fj-dc-ui/.svn/pristine/6a/6abf1a02a79a0db5ebd257f0d8b4e0575ca13561.svn-base

<!--  -->
<template>
    <div>
        <el-row style="text-align: center;">
            <el-radio-group v-model="useObjFlagRadio" @change="searchTypeChangeEvent">
                <el-radio label="1">问题数量</el-radio>
                <el-radio label="2">项目数量</el-radio>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-col :span="14">
                <div style="width:100%;" :style="{'height': colHeight - 40 + 'px'}" ref="left_bar"></div>
            </el-col>
            <el-col :span="10">
                <el-row>
                    <div style="width:100%;" :style="{'height': colHeight/2 - 40 + 'px'}" ref="right_top_bar"></div>
                </el-row>
                <el-row>
                    <div style="width:100%;" :style="{'height': colHeight/2 - 40 + 'px'}" ref="right_bottom_pie"></div>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import echarts from 'echarts'
    import request from "@util/gw_ajax_request"
    import {
        leftData,
        right_topData,
        right_bottomData,
    } from "./inspectionApi.js";

    export default {
        //import引入的组件需要注入到对象中才能使用
        props: ['addForm', 'addForms', 'addFormt', 'isClear', 'testBool','singleOrMach'],
        components: {},
        data() {
            //这里存放数据
            return {
                returnedTarget: {},
                useObjFlagRadio: "1",
                selectNum: 1,
                barData_zy: {},
                barData_zy_right_top: {},
                barData_zy_right_bottom: {},
                name_left: [],
                value_left: [],
                nameShow: [],
                name_right_top: [],
                value_right_top: [],
                mySeries: [],
                mySeries_right_top: [],
                mySeries_right_bottom: [],
                pieData_zy: [],
                chart: {},
                chart_right_top: {},
                chart_right_bottom: {},
                barData: [],
                barData_right_top: [],
                barData_right_bottom: [],
                radius_in: "",
                radius_out: "",
                stbClaName: "前期与设计",
                colHeight: window.innerHeight - 90,
                scale: 1,
                rich: {
                    yellow: {
                        color: "#ffc72b",
                        fontSize: 30 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    black: {
                        // color: "#3a3a3a",
                        fontSize: 30 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    blackSmall: {
                        // color: "#3a3a3a",
                        fontSize: 16 * this.scale,
                        padding: [5, 4],
                        align: 'center'
                    },
                    total: {
                        // color: "#ffc72b",
                        fontSize: 40 * this.scale,
                        align: 'center'
                    },
                    white: {
                        // color: "#fff",
                        align: 'center',
                        fontSize: 14 * this.scale,
                        padding: [21, 0]
                    },
                    blue: {
                        color: '#49dff0',
                        fontSize: 16 * this.scale,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#3a3a3a',
                        width: '100%',
                        borderWidth: 1,
                        height: 0,
                    }
                },
              standSize: document.body.clientWidth

            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {
            isClear(n, o) {//从多批次切换到单批次时数据回归
                this.testBool = !this.testBool;
                this.chart.clear();
                this.chart_right_top.clear();
                this.chart_right_bottom.clear();
                this.clearAllData();
                // this.mySeries = [];
                this.paramsConfigEvent();
                this.getDataChartData_left(this.addForm, 1)
                this.getDataChartData_right_top(this.addForm, 1)
                this.getDataChartData_right_bottom({
                    "year": new Date().getFullYear(),
                    "batch": "",
                    "stbClaName": this.returnedTarget.stbClaName,
                    "rgstrId": this.addForm.rgstrId
                }, 1)
            },
            "addForm.year": {
                handler(newVal, oldVal) {
                    // if(newVal) {
                        var _self = this;
                        console.log("newVal:" + newVal + ", oldVal:" + oldVal)
                        this.selectNum = 1;
                        this.clearData();
                        this.paramsConfigEvent();
                        if (this.testBool) {
                            _self.getDataChartData_left(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_top(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_bottom(_self.returnedTarget, _self.selectNum)
                        }
                    // }
                },
                deep: true
            },
            "addForm.batch": {
                handler(newVal, oldVal) {
                    // if(newVal) {
                        var _self = this;
                        console.log("newVal:" + newVal + ", oldVal:" + oldVal)
                        this.selectNum = 1;
                        this.clearData();
                        this.paramsConfigEvent();
                        if (this.testBool) {
                            _self.getDataChartData_left(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_top(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_bottom(_self.returnedTarget, _self.selectNum)
                        }
                    // }
                },
                deep: true
            },
            "addForm.rgstrId": {
                handler(newVal, oldVal) {
                    if(newVal) {
                        var _self = this;
                        console.log("newVal:" + newVal + ", oldVal:" + oldVal)
                        this.selectNum = 1;
                        this.clearData();
                        this.paramsConfigEvent();
                        if (this.testBool) {
                            _self.getDataChartData_left(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_top(_self.addForm, _self.selectNum)
                            _self.getDataChartData_right_bottom(_self.returnedTarget, _self.selectNum)
                        }
                    }
                },
                deep: true
            },
            // "addForms.year": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addForms, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addForms,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addForms.batch": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addForms, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addForms,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addForms.rgstrId": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 2;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addForms, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addForms,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.year": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addFormt, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addFormt,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.batch": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addFormt, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addFormt,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
            // "addFormt.rgstrId": {
            //     handler(newVal, oldVal) {
            //         if(newVal) {
            //             var _self = this;
            //             console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            //             this.selectNum = 3;
            //             this.clearData();
            //             // this.paramsConfigEvent();
            //             if (this.testBool) {
            //                 _self.getDataChartData_left(_self.addFormt, _self.selectNum)
            //                 // _self.getDataChartData_right_top(_self.addFormt,_self.selectNum)
            //                 // _self.getDataChartData_right_bottom(_self.returnedTarget,_self.selectNum)
            //             }
            //         }
            //     },
            //     deep: true
            // },
        },
        //方法集合
        methods: {
            // getDataChartReslove(params,item){
            //     var _self = this;
            //     let paramsSelf = params;
            //     paramsSelf.useObjFlag = _self.useObjFlagRadio;
            //     _self.getDataChartData_left(paramsSelf,item);
            //     _self.getDataChartData_right_top(paramsSelf,item);
            //     _self.getDataChartData_right_bottom(paramsSelf,item);
            // },
            functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
                for (var i = 0; i < arraytosearch.length; i++) {
                    if (arraytosearch[i][key] == valuetosearch) {
                        return i;
                    }
                }
                return null;
            },
            //柱图左侧
            getDataChartData_left(params, item) {
                var _self = this;
              if (params.years) {
                  delete params['years']
              //   params.years = params.years.join(',');
              }

                leftData(params).then((res) => {//正确的接口地址
                    if (res.success) {
                        res.data = res.data.sort(_self.sortFun('count'));
                        res.data.forEach(ele => {
                            _self.name_left.push(ele.name);
                            _self.value_left.push(ele.count);
                        });
                        _self.barData_zy = {
                            "name_left": _self.name_left,
                            "value_left": _self.value_left,
                            "pcNum": item
                        };
                        if (_self.barData.length != 0) {
                            var index = _self.functiontofindIndexByKeyValue(_self.barData, "pcNum", _self.barData_zy.pcNum);
                            if (index == null) {
                                _self.barData.push(_self.barData_zy)
                            } else {
                                _self.mySeries = [];
                                _self.barData[index] = _self.barData_zy;
                            }
                        } else {
                            _self.barData.push(_self.barData_zy)
                        }
                        _self.init_left_barChart();
                    }
                })

            },
            //柱图右侧——上
            getDataChartData_right_top(params, item) {
                var _self = this;
              if (params.years) {
                  delete params['years']
              //   params.years = params.years.join(',');
              }
                right_topData(params).then((res) => {//正确的接口地址
                    if (res.success) {
                        res.data.forEach(ele => {
                            _self.name_right_top.push(ele.name);
                            _self.value_right_top.push(ele.count);
                            _self.nameShow.push(ele.showName)
                        });
                        _self.barData_zy_right_top = {
                            "name_right_top": _self.name_right_top,
                            "value_right_top": _self.value_right_top,
                            "nameShow": _self.nameShow,
                            "pcNum": item
                        };
                        if (_self.barData_right_top.length != 0) {
                            var index = _self.functiontofindIndexByKeyValue(_self.barData_right_top, "pcNum", _self.barData_zy_right_top.pcNum);
                            if (index == null) {
                                _self.barData_right_top.push(_self.barData_zy_right_top)
                            } else {
                                _self.mySeries_right_top = [];
                                _self.barData_right_top[index] = _self.barData_zy_right_top;
                            }
                        } else {
                            _self.barData_right_top.push(_self.barData_zy_right_top)
                        }
                        _self.init_right_top_barChart();
                    }

                })
            },
            //饼图右下
            getDataChartData_right_bottom(params, item) {
                var _self = this;
                var dataList = [];
                let paramsSelf = params;
              if (params.years) {
                  delete paramsSelf['years']
              //   params.years = params.years.join(',');
              }
                right_bottomData(paramsSelf).then((res) => {//正确的接口地址
                    if (res.success) {
                        _self.clearData();
                        _self.pieData_zy = [];
                        res.data.forEach(ele => {
                            _self.barData_right_bottom.push({
                                "value": ele.count,
                                "name": ele.name
                            });
                        });
                        _self.barData_zy_right_bottom = {
                            "value_right_bottom_pieData": _self.barData_right_bottom,
                            "pcNum": 1
                        };
                        // if(_self.pieData_zy.length != 0){
                        //     var index = _self.functiontofindIndexByKeyValue(_self.pieData_zy, "pcNum", _self.barData_zy_right_bottom.pcNum);
                        //     if(index == null){
                        //         _self.pieData_zy.push(_self.barData_zy_right_bottom)
                        //     }else{
                        //         _self.mySeries_right_bottom = [];
                        //         _self.pieData_zy[index] = _self.barData_zy_right_bottom;
                        //     }
                        // }else{
                        //     _self.pieData_zy.push(_self.barData_zy_right_bottom)
                        // }
                        _self.pieData_zy.push(_self.barData_zy_right_bottom)
                    }
                    _self.init_right_bottom_pieChart();
                })
            },
            sortFun(property) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
                for (var i = 0; i < arraytosearch.length; i++) {
                    if (arraytosearch[i][key] == valuetosearch) {
                        return i;
                    }
                }
                return null;
            },
            init_left_barChart: function () {
                var _self = this;
                this.chart = echarts.init(this.$refs['left_bar']);
                this.barData.forEach(ele => {
                    let barNormal = {
                        name: "问题数量" + ele.pcNum,
                        type: "bar",
                        barWidth: '20%',
                        itemStyle: {
                            normal: {
                                color: "#5ce9c7"
                            }
                        },
                        // data: [47,47,35,36,35,15,15]
                        data: ele.value_left,
                    }
                    this.mySeries.push(barNormal);
                })
                let option = {
                    toolbox: {
                        show: true,
                        orient: "vertical",
                        left: "right",
                        top: "top",
                        feature: {
                            saveAsImage: { show: true },  // 保存图表
                        },
                    },
                    title: {
                        text: "全专业各类问题发生频率",
                        textStyle: {
                            align: 'center',
                            fontSize: 20,
                        },
                        top: '0%',
                    },
                    // backgroundColor: '#0f375f',
                    grid: {
                        top: "5%",
                        bottom: "15%",
                        left: "1%",
                        right: "5%",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: false
                            }
                        }
                    },
                    legend: {
                        data: ["个数"],
                        top: "5%",
                        textStyle: {
                            // color: "#ffffff"
                        }
                    },
                    xAxis: {
                        type: "value",
                        axisLine: {
                            show: true //隐藏X轴轴线
                        },

                        axisTick: {
                            show: true //隐藏X轴刻度
                        },
                        axisLabel: {
                            rotate: 15,
                            show: true,
                            textStyle: {
                                // color: "#ebf8ac" //X轴文字颜色
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                // color: '#01FCE3'
                            }
                        },
                    },
                    yAxis: [{
                        data: _self.barData[0].name_left,
                        type: 'category',
                        name: "个",
                        nameTextStyle: {
                            // color: "#ebf8ac"
                        },
                        splitLine: {
                            show: false
                        },

                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                // color: "#ebf8ac"
                            }
                        },
                    },

                    ],
                    series: _self.mySeries,
                };

                this.chart.setOption(option);
                window.addEventListener("resize", () => {
                    this.chart.resize();
                });
            },
            init_right_top_barChart: function () {
                var _self = this;
                this.chart_right_top = echarts.init(this.$refs['right_top_bar']);
                this.barData_right_top.forEach(ele => {
                    let barNormal = {
                        name: "问题数量" + ele.pcNum,
                        type: "bar",
                        barWidth: 25,
                        itemStyle: {
                            normal: {
                                // color: ["#5ce9c7","#5085f2","#f59a8f","#fdb301","#8d7fec","#f2719a"]
                                color: function (params) {
                                    let colorList = ["#5ce9c7", "#5085f2", "#f59a8f", "#fdb301", "#8d7fec", "#f2719a"];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },

                        // data: [47,47,35,36,35,15,15]
                        data: ele.value_right_top,
                    }
                    this.mySeries_right_top.push(barNormal);
                })
                let option = {
                    toolbox: {
                        show: true,
                        orient: "vertical",
                        left: "right",
                        top: "top",
                        feature: {
                            saveAsImage: { show: true },  // 保存图表
                        },
                    },
                    title: {
                        text: "各专业高频问题",
                        textStyle: {
                            align: 'left',
                            fontSize: 20,
                        },
                        top: '0%',
                        left: '5%',
                    },
                    // backgroundColor: '#0f375f',
                    grid: {
                        top: "5%",
                        bottom: "15%",
                        left: "1%",
                        right: "5%",
                        containLabel: true
                    },
                    tooltip: {
                        formatter: function (params, ticket, callback) {
                            return params[0].value;
                        },
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        data: ["个数"],
                        top: "5%",
                        textStyle: {
                            // color: "#ffffff"
                        }
                    },
                    xAxis: [
                        {
                            data: _self.barData_right_top[0].name_right_top,
                            axisLine: {
                                show: true //隐藏X轴轴线
                            },

                            axisTick: {
                                show: true //隐藏X轴刻度
                            },
                            axisLabel: {
                                rotate: 15,
                                show: true,
                                textStyle: {
                                    // color: "#ebf8ac" //X轴文字颜色
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    // color: '#01FCE3'
                                }
                            },
                        },
                        {
                            data: _self.barData_right_top[0].nameShow,
                            show: false,
                        },
                    ],
                    yAxis: [{
                        type: "value",
                        name: "个",
                        nameTextStyle: {
                            // color: "#ebf8ac"
                        },
                        splitLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                // color: "#ebf8ac"
                            }
                        },
                    },

                    ],
                    series: _self.mySeries_right_top,
                };

                this.chart_right_top.setOption(option);
                window.addEventListener("resize", () => {
                    this.chart_right_top.resize();
                });
                this.chart_right_top.on('click', function (params) {
                    _self.clearData();
                    _self.chart_right_bottom.clear();
                    _self.stbClaName = params.name;
                    const piePa = {
                        "stbClaName": params.name
                    };
                    _self.returnedTarget = Object.assign(piePa, _self.addForm);
                    _self.getDataChartData_right_bottom(_self.returnedTarget, _self.selectNum);
                })
            },
            init_right_bottom_pieChart: function () {
                var _self = this;
                // this.mySeries_right_bottom = [];
                this.chart_right_bottom = echarts.init(this.$refs['right_bottom_pie']);
                this.pieData_zy.forEach(ele => {
                    _self.radius_in = (ele.pcNum * 10 * 6) + '%'
                    _self.radius_out = (ele.pcNum * 10 * 2 + 8) + '%'
                    let pieData = {
                        name: '严重程度分布情况',
                        type: 'pie',
                        // radius:'25%',
                        radius: _self.radius_in,
                        center: ['50%', '40%'],
                        // hoverAnimation: false,
                        color: ['#5ce9c7', '#fed172', '#fb6086'],
                      labelLine: {
                        normal: {
                          show: true,
                          position: 'outside',
                          formatter: '{c}'
                        }
                      },
                      label: {
                        normal: {
                          show: true,
                          formatter: "{d}% ",
                          textStyle: {
                            fontSize: this.standSize / 150,
                          },
                        }
                      },
                        data: ele.value_right_bottom_pieData,
                    }
                    _self.mySeries_right_bottom.push(pieData);
                })
                let option = {
                    toolbox: {
                        show: true,
                        orient: "vertical",
                        left: "right",
                        top: "top",
                        feature: {
                            saveAsImage: { show: true },  // 保存图表
                        },
                    },
                    title: {
                        text: _self.stbClaName + " 各类问题分布",
                        textStyle: {
                            align: 'left',
                            fontSize: 20,
                        },
                        top: '3%',
                        left: '5%',
                    },
                    grid: {
                        top: "0%",
                        bottom: "25%",
                        left: "5%",
                        right: "5%",
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    series: _self.mySeries_right_bottom,
                };

                this.chart_right_bottom.setOption(option);
                window.addEventListener("resize", () => {
                    this.chart_right_bottom.resize();
                });
            },
            //置空数据
            clearData() {
                this.name_left = [];
                this.value_left = [];
                this.nameShow = [];
                this.name_right_top = [];
                this.value_right_top = [];
                this.mySeries = [];
                this.mySeries_right_top = [];
                this.mySeries_right_bottom = [];
                this.barData_right_bottom = [];
                // this.pieData_zy = [];
                // this.barData = [];
                // this.barData_right_top = [];
                // this.barData_right_bottom = [];
            },
            clearAllData() {
                this.barData_zy = {};
                this.barData_zy_right_top = {};
                this.barData_zy_right_bottom = {};
                this.name_left = [];
                this.value_left = [];
                this.nameShow = [];
                this.name_right_top = [];
                this.value_right_top = [];
                this.mySeries = [];
                this.mySeries_right_top = [];
                this.mySeries_right_bottom = [];
                this.pieData_zy = [];
                this.chart = {};
                this.chart_right_top = {};
                this.chart_right_bottom = {};
                this.barData = [];
                this.barData_right_top = [];
                this.barData_right_bottom = [];
            },
            searchTypeChangeEvent() {
                // alert(this.useObjFlagRadio);
                this.$emit("changeType", "single_fspd")
                this.addForm["useObjFlag"] = this.useObjFlagRadio;
                this.clearAllData();
                this.getDataChartData_left(this.addForm, this.selectNum)
                this.getDataChartData_right_top(this.addForm, this.selectNum)
                this.getDataChartData_right_bottom(this.returnedTarget, this.selectNum)
            },
            paramsConfigEvent() {
                const piePa = {
                    "stbClaName": this.stbClaName
                };
                this.returnedTarget = Object.assign(piePa, this.addForm);
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            // this.getDataChartReslove(this.addForm,this.selectNum)
            this.paramsConfigEvent();
            this.getDataChartData_left(this.addForm, this.selectNum)
            this.getDataChartData_right_top(this.addForm, this.selectNum)
            this.getDataChartData_right_bottom(this.returnedTarget, this.selectNum)
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
        destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style scoped>

</style>