设备维修

suerprisePlus

2024-08-14 d4a3ca549f8755c2f87442c27217c3be39cab5cc

 src/views/visual/mapView/dataStatistics.vue

@@ -2,27 +2,19 @@
    <Popup ref="pop" top="20px" :title="title" @close="close(true)" width="1000px" :maxHeight="'700px'"
        @cancel="close(false)">
        <div class="menuBox">
            <div class="serachContent">
                <el-select v-model="linesName" @change="setEchartChange" placeholder="请选择">
                    <el-option v-for="(item, key) in linesOption" :key="key" :label="item.line" :value="item.line">
                    </el-option>
                </el-select>
            <statistics></statistics>
            </div>
            <div class="echartContent">
                <div id="myEchart" class="myChart"> </div>
            </div>
        </div>

    </Popup>
</template>

<script>
import Popup from '@/components/Tool/Popup.vue';
import { zhangzitou_selectInfos } from "@/api/mapView/map.js"
import mapData from '@/assets/js/mapSdk/mapData';
import * as echarts from 'echarts';
 
import statistics from '@/views/visual/statistics/index.vue'
export default {
    name: 'dataAnalysis',
    components: { Popup },
    components: { Popup ,statistics},
    data() {
        return {
            title: '数据统计',
@@ -44,86 +36,7 @@
        open() {
            this.close(true);
            this.$refs.pop.open();
            this.getAllLines();
        },
        getAllLines() {
            zhangzitou_selectInfos().then(response => {
                if (response.data.code != 200) {
                    return this.close();
                }
                this.setAllLinses(response.data.result)
            })
        },
        setAllLinses(res) {
            this.allLines = res;
            this.linesOption = this.allLines.filter((item, index, self) =>
                index === self.findIndex((t) => t.line === item.line)
            );
            this.linesName = this.linesOption[0].line;
            this.setEchartChange();
        },
        setEchartChange() {
            zhangzitou_selectInfos({
                line: this.linesName
            }).then(response => {
                if (response.data.code != 200) return
                const result = response.data.result;

                const objData = []
                result.filter(item => {
                    const type = mapData.dataStatistics[item.type];
                    if (type) {
                        item.type = type
                    }
                    objData.push({
                        value: item.count, name: item.type
                    })
                })
                this.setEchartShow(objData)
            })

        },

        setEchartShow(res) {

            let option = {
                title: {

                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: this.linesName,
                        type: 'pie',
                        radius: '50%',
                        data: res,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            if (!this.myChart) {

                this.myChart = echarts.init(document.getElementById("myEchart"));
            }


            this.myChart.setOption(option);
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },
    },
};
@@ -133,25 +46,10 @@
.menuBox {
    position: relative;
    height: 660px;
    width: calc(100% - 0px);
    padding: 10px;
    display: flex;
    flex-direction: column;

    .serachContent {
        display: flex;
    }

    .echartContent {
        flex: 1;
    width: calc(100% - 0px)


        .myChart {
            margin-top: 10px;
            width: 100%;
            height: calc(100% - 10px);
        }
    }
     

}
</style>