<template>
	<div class="data">
        <mt-navbar v-model="selected" class="tab_head" v-on:click.native="changeTab">
            <mt-tab-item id="tab1">中心库</mt-tab-item>
            <mt-tab-item id="tab2">数据交换</mt-tab-item>
            <mt-tab-item id="tab3">五大库</mt-tab-item>
            <mt-tab-item id="tab4">云平台</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="tab1">
                <div class="headMsg top">
                    <div>中心库数据总数：{{data1.dataSizeInfoCenterStorageTotal}}条</div>
                    <div>已完成入库单位：{{data1.dataSizeInfoWarehouseUnits}}个</div>
                </div>
                <div id="tab1_chart1" class="echarts"></div>
                <div class="echartsBox bottom">
                    <table class="tab1_table">
                        <thead><tr><td>部门名称</td><td>行数（行）</td><td>储存量</td></tr></thead>
                        <tbody class="tab1_tbody">
                            <tr v-for="item in data1.dataSizeStatistics">
                                <td>{{item.departmentName}}</td>
                                <td>{{item.rows}}</td>
                                <td>{{item.storedSize}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab2">
                <div class="headMsg top">
                    <div>数据交换总量：{{data2!=''?data2.catalogDataChangeNum.totalLines:0}}条</div>
                    <div>单日最大数据交换量：{{data2!=''?data2.catalogDataChangeNum.maxLinesOfADay:0}}条</div>
                </div>
                <div class="headMsg">
                    <div>数据交换总次数：{{data2!=''?data2.catalogDataChangeNum.totalTimes:0}}次</div>
                    <div>单日最大数据交换次数：{{data2!=''?data2.catalogDataChangeNum.maxTimesOfADay:0}}次</div>
                </div>
                <div id="tab2_chart1" class="echarts echartsBox"></div>
                <div id="tab2_chart2" class="echarts echartsBox"></div>
                <div id="tab2_chart3" class="echarts echartsBox bottom"></div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab3">
                <div id="tab3_chart1" class="echarts echartsBox top"></div>
                <div class="echartsBox">
                    <table class="tab1_table tab3_tbody">
                        <thead>
                            <tr><td colspan="3"><h3 style="padding:0;margin:0">三大库建设情况</h3></td></tr>
                            <tr><td>库名称</td><td>数据量（条）</td><td>存储量（KB）</td></tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data3.databaseConstruction">
                                <td>{{item.databaseName}}</td>
                                <td>{{item.dataSize}}</td>
                                <td>{{item.reserveSize}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="tab3_chart2" class="echarts echartsBox"></div>
                <div class="echartsBox bottom">
                    <table class="tab1_table tab3_tbody_nowarp">
                        <thead>
                            <tr><td colspan="3"><h4 style="padding:0;margin:0">电子证照类型</h4></td></tr>
                            <tr><td>部门名称</td><td>证照类型</td><td>数量</td></tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data3.photoDatabaseData">
                                <td>{{item.deptName}}</td>
                                <td>{{item.photoType}}</td>
                                <td>{{item.num}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab4">
                <div id="tab4_chart1" class="echarts echartsBox top"></div>
                <div id="tab4_chart2" class="echarts echartsBox"></div>
                <div id="tab4_chart3" class="echarts echartsBox"></div>
                <div class="echartsBox bottom">
                    <table class="tab1_table tab4_tbody">
                        <thead>
                            <tr><td colspan="3"><h4 style="padding:0;margin:0">系统告警</h4></td></tr>
                            <tr><td>告警类型</td><td>数量（次）</td></tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data4.systemWarningInfo">
                                <td>{{item.wamingType}}</td>
                                <td>{{item.wamingNum}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                selected: "tab1",
                data1: '',
                data2: '',
                data3: '',
                data4: '',
			}
		},
		methods: {
            // 中心库
            getData1() {
                this.http.post(this.port.showData.centralRepository, {} , 
                res => {
                    if (res.code == "ok") {
                       this.data1 = res.data;
                       this.set_tab1_chart1();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            set_tab1_chart1(){
                var myChart = this.echarts.init(document.getElementById('tab1_chart1')),
                    dataTypeStatistics = this.data1.dataTypeStatistics;
                var dataX = [],dataY = [];
                for(var i in dataTypeStatistics) {
                    dataX.push(dataTypeStatistics[i].dataType)
                    dataY.push({
                        'value': dataTypeStatistics[i].dataProportion,
                        'name': dataTypeStatistics[i].dataType
                    })
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '数据类型统计',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    grid: {
                        left: '30%',
                        right: '30%',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        color:'#000',
                        textStyle:{
                            color:"#fff",
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        y: '85%',
                        data: dataX,
                        textStyle:{
                            color:'#888',
                            fontSize:12
                        }
                    },
                    series: [
                        {
                            name:'数据类型统计',
                            type:'pie',
                            radius: ['20%', '40%'],
                            avoidLabelOverlap: false,
                            color:['#F68077','#66B1FD','#0BC3FF','#FCF255','#90FB4C'],
                            label: {
                                normal: {  //正常的样式
                                    show: true,
                                    position: 'left',
                                    formatter: '{b}({d}%)' 
                                },
                                emphasis: { //选中时候的样式
                                    show: true,
                                    textStyle: {
                                        fontSize: '15',
                                        fontWeight: 'bold'
                                    }
                                },
                            },  //提示文字
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: dataY
                        }
                    ]
                };
                myChart.setOption(option);
            },

            // 数据交换
            getData2() {
                this.http.post(this.port.showData.dataExchange, {} , 
                res => {
                    if (res.code == "ok") {
                       this.data2 = res.data;
                       this.set_tab2_chart1();
                       this.set_tab2_chart2();
                       this.set_tab2_chart3();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            set_tab2_chart1(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart1')),
                    catalogSupplyApplyTop5 = this.data2.catalogSupplyApplyTop5;
                var dataX = [],dataY = [];
                for(var i in catalogSupplyApplyTop5) {
                    dataX.push(catalogSupplyApplyTop5[i].departmentName)
                    dataY.push(catalogSupplyApplyTop5[i].totalLines)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '数据交换TOP5',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{b}：{c}条"
                    },
                    grid: {
                        top: "75px",
                        left: '15%',
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'log',
                        name: '单位：条',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab2_chart2(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart2')),
                    resourceCatalogNum = this.data2.resourceCatalogNum;
                var dataX = [],dataY = [];
                for(var i in resourceCatalogNum) {
                    dataX.push(resourceCatalogNum[i].geweibanBoardName)
                    dataY.push(resourceCatalogNum[i].size)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '各部门发布的资源数量',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{b}：{c}个"
                    },
                    grid:{
                        left: '15%',
                        top: "75px",
                        bottom: "125px"
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 30,
                    }, {
                        start: 0,
                        end: 30,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: { 
                            fontSize: 10,
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX,
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'log',
                        name: '单位：个',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab2_chart3(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart3')),
                    catalogApiApply = this.data2.catalogApiApply;
                var dataX = [],dataY = [];
                for(var i in catalogApiApply) {
                    dataX.push(catalogApiApply[i].showDay)
                    dataY.push(catalogApiApply[i].totalTimes)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '各部门申请次数',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{b}：{c}个"
                    },
                    grid:{
                        top: "75px",
                        bottom: "100px"
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 50,
                    }, {
                        start: 0,
                        end: 50,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'log',
                        name: '单位：个',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'line',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            // 五大库
            getData3() {
                this.http.post(this.port.showData.fiveMainStorehouses, {} , 
                res => {
                    if (res.code == "ok") {
                       this.data3 = res.data;
                       this.set_tab3_chart1();
                       this.set_tab3_chart2();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            set_tab3_chart1() {
                var myChart = this.echarts.init(document.getElementById('tab3_chart1')),
                    dataSource = this.data3.dataSource;
                var dataX = [],dataY1 = [],dataY2 = [];
                for(var i in dataSource) {
                    dataX.push(dataSource[i].geweibanBoardName)
                    dataY1.push(dataSource[i].dataSize)
                    dataY2.push(dataSource[i].storageVolume)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '数据来源',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {},
                    legend: {
                        data:['数据量','存储量']
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    grid: {
                        left: '15%',
                        right: '15%',
                        top: "75px",
                        bottom: "100px"
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 50,
                    }, {
                        start: 0,
                        end: 50,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    yAxis: [
                        {
                            type: 'log',
                            name: '数据量',
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: '#d14a61'
                                }
                            },
                            axisTick:{
                                show:false
                            },
                            name: '单位：条',
                            axisLabel: { 
                                interval:0, 
                                rotate:40 
                            } 
                        },
                        {
                            type: 'log',
                            name: '存储量',
                            position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: '#675bba'
                                }
                            },
                            axisTick:{
                                show:false
                            },
                            name: '单位：KB',
                            axisLabel: { 
                                interval:0, 
                                rotate:-40 
                            } 
                        },
                    ],
                    series: [
                        {
                            name:'数据量',
                            type:'bar',
                            barWidth : 10,
                            data: dataY1,
                            itemStyle:{
                                normal:{
                                    color: '#d14a61',
                                }
                            },
                        },
                        {
                            name:'存储量',
                            type:'bar',
                            barWidth : 10,
                            yAxisIndex: 1,
                            data: dataY2,
                            itemStyle:{
                                normal:{
                                    color: '#675bba',
                                }
                            },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab3_chart2(){
                var myChart = this.echarts.init(document.getElementById('tab3_chart2')),
                    geographicDatabase = this.data3.geographicDatabase;
                var dataX = [],dataY = [];
                for(var i in geographicDatabase) {
                    dataX.push(geographicDatabase[i].type)
                    dataY.push({
                        'value': geographicDatabase[i].num,
                        'name': geographicDatabase[i].type
                    })
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '地理信息库图层分散',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    grid: {
                        left: '30%',
                        right: '30%',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        color:'#000',
                        textStyle:{
                            color:"#fff",
                        }
                    },
                    legend: {
                        // orient: 'vertical',
                        // x: 'right',
                        orient: 'horizontal',
                        x: 'center',
                        y: '80%',
                        data: dataX,
                        textStyle:{
                            color:'#888',
                            fontSize:12
                        }
                    },
                    series: [
                        {
                            name:'地理信息库图层分散',
                            type:'pie',
                            minAngle: 5,
                            avoidLabelOverlap: true,
                            radius: ['20%', '40%'],
                            avoidLabelOverlap: false,
                            color:['#F68077','#66B1FD','#0BDDDF','#FCF255','#90FB4C',
                            '#F6ADE7','#6253FD','#0663FF','#FC3255','#901B4C','#FCD255','#95D25C'],
                            label: {
                                normal: {  //正常的样式
                                    show: true,
                                    position: 'left',
                                    formatter: '{b}\n({d}%)'
                                },
                                emphasis: { //选中时候的样式
                                    show: true,
                                    textStyle: {
                                        fontSize: '15',
                                        fontWeight: 'bold'
                                    }
                                }
                            },  //提示文字
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: dataY
                        }
                    ]
                };
                myChart.setOption(option);
            },

            // 云平台
            getData4() {
                this.http.post(this.port.showData.cloudPlatform, {} , 
                res => {
                    if (res.code == "ok") {
                       this.data4 = res.data;
                       this.set_tab4_chart1();
                       this.set_tab4_chart2();
                       this.set_tab4_chart3();
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            set_tab4_chart1() {
                var myChart = this.echarts.init(document.getElementById('tab4_chart1')),
                    applyVirtualSize = this.data4.applyVirtualSize;
                var dataX = [],dataY = [];
                for(var i in applyVirtualSize) {
                    dataX.push(applyVirtualSize[i].geweibanBoardName)
                    dataY.push(applyVirtualSize[i].applyNum)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '申请虚拟机数量',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{d}：{c}个"
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：个',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab4_chart2(){
                var myChart = this.echarts.init(document.getElementById('tab4_chart2')),
                    cpuUseRatio = this.data4.cpuUseRatio;
                var dataX = [],dataY = [];
                for(var i in cpuUseRatio) {
                    dataX.push(cpuUseRatio[i].time)
                    dataY.push(cpuUseRatio[i].cpuUseRatio)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '24H云平台CPU使用情况',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{b}：{c}%",
                    },
                    grid:{
                        bottom: "70px"
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 50,
                    }, {
                        start: 0,
                        end: 50,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：%',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'line',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab4_chart3(){
                var myChart = this.echarts.init(document.getElementById('tab4_chart3')),
                    memory = this.data4.memory;
                var dataX = [],dataY = [];
                for(var i in memory) {
                    dataX.push(memory[i].time)
                    dataY.push(memory[i].memoryUsage)
                }
                myChart.clear();
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '24H云平台内存使用情况',
                        x:'left',
                        textStyle:{
                            fontSize: 16,
                        }
                    },
                    tooltip: {
                        formatter: "{b}：{c}%",
                    },
                    grid:{
                        bottom: "70px"
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 50,
                    }, {
                        start: 0,
                        end: 50,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：%',
                        axisLabel: { 
                            interval:0, 
                            rotate:40 
                        } 
                    },
                    series: [{
                        data: dataY,
                        type: 'line',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            changeTab() {
                if(this.selected == 'tab1') {
                    this.getData1();
                } else if(this.selected == 'tab2') {
                    this.getData2();
                } else if(this.selected == 'tab3') {
                    this.getData3();
                } else if(this.selected == 'tab4') {
                    this.getData4();
                }
            }
        },
        created() {
        },
		mounted() {
            this.selected = "tab1";
            this.getData1();
		}
	}

</script>

<style scoped>
    .tab_head {
        position: fixed;
        z-index: 105;
        width: 100%;
        top: 0;
        border-bottom: 1px solid #ddd;
    }

    .mint-tab-container {
        /* height: calc(100% - 46px); */
        margin-top: 46px!important;
        margin-bottom: 0.45rem;
        overflow-y: auto;
        background: #efefef;
    }

    .data {
        background: #EFEFEF;
    }

    .headMsg {
        background: #fff;
        margin: 0.02rem 0 0.05rem 0;
        padding: 0.1rem 0.2rem;
        font-size: 0.14rem;
        line-height: 0.25rem;
    }

    .echarts {
        width: 100%;
        height: 3.5rem;
        background: #fff;
        padding: 0.05rem;
        box-sizing:border-box;
    }

    .echartsBox {
        margin-bottom: 0.11rem;
    }

    .tab1_table {
        width: 100%;
        border-collapse:collapse;
        border-spacing:1;
        border-spacing:0;
    }

    .tab1_table thead {
        background: #F8F8F8;
    }

    .tab1_table tbody {
        background: #fff;
    }

    .tab1_table tr td {
        line-height: 0.4rem;
        padding: 0 0.15rem;
    }

    .tab1_table tr td:nth-child(1) {
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tab3_tbody tr td:nth-child(1) {
        width: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tab1_table thead tr td {
        font-size: 0.14rem;
        height: 0.45rem;
        line-height: 0.2rem;
    }

    .tab1_table tbody tr td {
        font-size: 0.12rem;
        height: 0.45rem;
        line-height: 0.2rem;
        color: #666;
    }

    .tab3_tbody_nowarp tr td:nth-child(1) {
        width: 40%;
        overflow: auto;
        text-overflow: unset;
        white-space: unset;
    }

    .tab4_tbody tr td:nth-child(1) {
        width: 50%;
        overflow: auto;
        text-overflow: unset;
        white-space: unset;
    }

    #tab3_chart2 {
        height: 4.5rem;
    }

    .top {
        margin-top:0.05rem;
    }

    .bottom {
        margin-bottom: 0.5rem;
    }
</style>
<style>
    .tab_head .mint-tab-item-label {
        font-size: 0.14rem;
    }
</style>