lsappBms/lss_vue_wx/src/views/data/data.vue

<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-navbar>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="tab1">
                <div class="headMsg">
                    <div>中心数据库总量：{{tab1_head1}}</div>
                    <div>五大数据库总量：{{tab1_head2}}</div>
                </div>
                <div id="tab1_chart1" class="echarts"></div>
                <div class="echartsBox">
                    <table class="tab1_table">
                        <thead><tr><td>库名</td><td>数据量（GB）</td><td>占比（%）</td></tr></thead>
                        <tbody>
                            <tr><td>入口库</td><td>335</td><td>13.08%</td></tr>
                            <tr><td>信用库</td><td>310</td><td>20.1%</td></tr>
                            <tr><td>地理库</td><td>234</td><td>9.13%</td></tr>
                            <tr><td>法人库</td><td>135</td><td>5.27%</td></tr>
                            <tr><td>电子证据</td><td>1548</td><td>60.42%</td></tr>
                        </tbody>
                    </table>
                </div>
                <div id="tab1_chart2" class="echarts echartsBox"></div>
                <div id="tab1_chart3" class="echarts echartsBox bottom"></div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab2">
                <div class="headMsg">
                    <div>总用户数：{{tab2_head1}}</div>
                    <div>在线用户数：{{tab2_head1}}</div>
                    <div>上云系统总数量：{{tab2_head1}}</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"></div>
                <div class="echartsBox bottom">
                    <table class="tab1_table">
                        <thead><tr><td>各委办局</td><td>接入效率</td><td>交换效率</td></tr></thead>
                        <tbody>
                            <tr><td>交通</td><td>335</td><td>13.08%</td></tr>
                            <tr><td>公安</td><td>310</td><td>20.1%</td></tr>
                            <tr><td>卫计</td><td>234</td><td>9.13%</td></tr>
                            <tr><td>国土</td><td>135</td><td>5.27%</td></tr>
                            <tr><td>城管</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>安监</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>房产局</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>旅游</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>水务</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>法院</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>环保</td><td>1548</td><td>60.42%</td></tr>
                            <tr><td>财政</td><td>1548</td><td>60.42%</td></tr>
                        </tbody>
                    </table>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab3">
                <div class="headMsg">
                    <div>当日数据交换量：{{tab3_head1}}</div>
                    <div>数据交换次数：{{tab3_head2}}</div>
                </div>
                <div id="tab3_chart1" class="echarts echartsBox"></div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                selected: "tab1",
                tab1_head1: "423GB",
                tab1_head2: "1168GB",
                tab2_head1: "1523638",
                tab2_head2: "35216",
                tab2_head3: "102",
                tab3_head1: "114388",
                tab3_head2: "35216",
                list: [],
                labels: [],
                pageNum: 1,
                tagId: 0,
                popupVisible: false,
                department: ['交通', '公安', '卫计', '国土', '城管', '安监', '房产', '教育', '旅游', '水务', '法院', '环保', '财政'],
			}
		},
		methods: {
            // 数据存储监控
            set_tab1_chart1(){
                var myChart = this.echarts.init(document.getElementById('tab1_chart1'));
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '五大库数据储存量',
                        x:'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        color:'#000',
                        textStyle:{
                            color:"#fff",
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        data:['入口库','信用库','地理库','法人库','电子证据'],
                        textStyle:{
                            color:'#888',
                            fontSize:12
                        }
                    },
                    series: [
                        {
                            name:'数据储存量',
                            type:'pie',
                            radius: ['35%', '55%'],
                            avoidLabelOverlap: false,
                            color:['#F68077','#66B1FD','#0BC3FF','#FCF255','#90FB4C'],
                            label: {
                                normal: {  //正常的样式
                                    show: true,
                                    position: 'left'
                                },
                                emphasis: { //选中时候的样式
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    }
                                }
                            },  //提示文字
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'入口库'},
                                {value:310, name:'信用库'},
                                {value:234, name:'地理库'},
                                {value:135, name:'法人库'},
                                {value:1548, name:'电子证据'}
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            },

            set_tab1_chart2(){
                var myChart = this.echarts.init(document.getElementById('tab1_chart2'));
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '五大库使用情况',
                        x:'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: ['交通', '公安', '卫计', '国土', '城管', '安监', '房产局', '教育', '旅游', '水务', '法院', '环保', '财政']
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：%',
                    },
                    series: [{
                        data: [12, 20, 15, 80, 70, 11, 30, 80, 30, 80, 20, 50, 60],
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab1_chart3(){
                var myChart = this.echarts.init(document.getElementById('tab1_chart3'));
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '中心库数据存储情况',
                        x:'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: ['交通', '公安', '卫计', '国土', '城管', '安监', '房产局', '教育', '旅游', '水务', '法院', '环保', '财政']
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：%',
                    },
                    series: [{
                        data: [12, 20, 15, 80, 70, 11, 30, 80, 30, 80, 20, 50, 60],
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            // 云平台监控
            set_tab2_chart1(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart1'));
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '上云系统数量分析',
                        x:'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {  
                            interval:0,  
                            rotate:40  
                        },
                        type: 'category',
                        data: ['交通', '公安', '卫计', '国土', '城管', '安监', '房产局', '教育', '旅游', '水务', '法院', '环保', '财政']
                    },
                    yAxis: {
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'value',
                        name: '单位：%',
                    },
                    series: [{
                        data: [12, 20, 15, 80, 70, 11, 30, 80, 30, 80, 20, 50, 60],
                        type: 'bar',
                        barWidth : 10,
                        itemStyle:{
                            normal:{
                                color: '#FF5B29',
                            }
                        },
                    }]
                };
                myChart.setOption(option);
            },

            set_tab2_chart2(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart2')) , 
                    _this = this;
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '数据接入效率',
                        x:'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    radar: [{
                        indicator: (function (){
                            var res = [];
                            for(var i in _this.department) {
                                res.push({text: _this.department[i] , max:100});
                            }
                            return res;
                        })(),
                        radius: 80
                    }],
                    series: [{
                        type: 'radar',
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [
                            {
                                name: '接入效率',
                                value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(84,196,168,0.7)',
                                        lineStyle: {
                                            color: '#fff',
                                        },
                                    },
                                },
                            }
                        ]
                    }]
                };
                myChart.setOption(option);
            },

            set_tab2_chart3(){
                var myChart = this.echarts.init(document.getElementById('tab2_chart3')) , 
                    _this = this;
                var option = {
                    backgroundColor: '#fff',
                    title : {
                        text: '数据交换效率',
                        x:'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    radar: [{
                        indicator: (function (){
                            var res = [];
                            for(var i in _this.department) {
                                res.push({text: _this.department[i] , max:100});
                            }
                            return res;
                        })(),
                        radius: 80
                    }],
                    series: [{
                        type: 'radar',
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [
                            {
                                name:'交换效率',
                                value:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3],
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(252,202,94,0.7)',
                                        lineStyle: {
                                            color: '#fff',
                                        },
                                    },
                                },
                            }
                        ]
                    }]
                };
                myChart.setOption(option);
            },

            // 数据交换
            set_tab3_chart1(){
                // var uploadedDataURL = "/asset/get/s/data-1559121268278-ozjd-lXoz.png";
                // var uploadedDataURL = "/asset/get/s/data-1559121263841-UC5w7mTJ9.png";
                // var uploadedDataURL = "/asset/get/s/data-1559121259198-sxyPSimU9.png";
                // var uploadedDataURL = "/asset/get/s/data-1559121254241-xj5JAIBzC.png";
                // var uploadedDataURL = "/asset/get/s/data-1559121249274-QxHDAdQGy.png";
                var  colorList=['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c','#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c','#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', "rgba(250,250,250,0.5)"];
                var sportsIcon = {
                    'a':'../../assets/image/userHead.jpg',
                    'b':'../../assets/image/userHead.jpg',
                    'c':'../../assets/image/userHead.jpg',
                    'd':'../../assets/image/userHead.jpg',
                    'e':'../../assets/image/userHead.jpg',
                };
                var myChart = this.echarts.init(document.getElementById('tab3_chart1'));
                var option = {
                    backgroundColor: '#fff',
                    title: {
                        text: '80',
                        subtext: '总量',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontSize:20,
                            fontWeight:'normal',
                            color: ['#333']
                        },
                        subtextStyle: {
                            color: '#666',
                            fontSize: 12
                        },
                    },
                    grid: {
                        bottom: 150,
                        left: 0,
                        right: '10%'
                    },
                    legend: {
                        show:false,
                        orient: 'vertical',
                        top: "middle",
                        right: "5%",
                        textStyle: {
                            color: '#f2f2f2',
                            fontSize: 13,

                        },
                        icon: 'roundRect'
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['25%', '33%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 15,
                                    length2: 120,
                                    lineStyle: {
                                        color: '#d3d3d3'
                                    },
                                    align: 'right'
                                },
                                color: "#000",
                                emphasis: {
                                    show: true
                                }
                            },
                            label:{
                                normal:{
                                    formatter: function(params){
                                        var str = '';
                                        switch(params.name){
                                            case '交通局':str = '{a|}\n{nameStyle|交通局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '公安局':str = '{b|}\n{nameStyle|公安局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '卫计局':str = '{c|}\n{nameStyle|卫计局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '国土局':str = '{d|}\n{nameStyle|国土局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '城管':str = '{a|}\n{nameStyle|城管 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '安监局':str = '{e|}\n{nameStyle|安监局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '房产局':str = '{a|}\n{nameStyle|房产局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '教育局':str = '{e|}\n{nameStyle|教育局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '旅游局':str = '{a|}\n{nameStyle|旅游局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '水务局':str = '{e|}\n{nameStyle|水务局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '法院':str = '{a|}\n{nameStyle|法院 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '环保局':str = '{e|}\n{nameStyle|环保局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                            case '财政局':str = '{e|}\n{nameStyle|财政局 }'+'{rate|'+params.value+'%}\n' + '{rate|'+params.data.value1+'}';break;
                                        }
                                        return str
                                    },
                                    padding: [0, -110],
                                    height: 165,
                                    rich: {
                                        a: {
                                            width:24,
                                            height:50,
                                            lineHeight: 50,
                                            backgroundColor: {
                                                // image: sportsIcon.e
                                            },
                                            align: 'left'
                                        },
                                        b: {
                                            width:24,
                                            height:50,
                                            lineHeight: 50,
                                            backgroundColor: {
                                                // image: sportsIcon.d
                                            },
                                            align: 'left'
                                        },
                                        c: {
                                            width:24,
                                            height:50,
                                            lineHeight: 50,
                                            backgroundColor: {
                                                // image: sportsIcon.c
                                            },
                                            align: 'left'
                                        },
                                        d: {
                                            width:24,
                                            height:50,
                                            lineHeight: 50,
                                            backgroundColor: {
                                                // image: sportsIcon.b
                                            },
                                            align: 'left'
                                        },
                                        e: {
                                            width:24,
                                            height:50,
                                            lineHeight: 50,
                                            backgroundColor: {
                                                // image: sportsIcon.a
                                            },
                                            align: 'left'
                                        },
                                        nameStyle: {
                                            fontSize: 14,
                                            color: "#555",
                                            align: 'left'
                                        },
                                        rate: {
                                            fontSize: 12,
                                            color: "#1ab4b8",
                                            align: 'left'
                                        }
                                    }
                                }
                            },
                            data: [
                                {value:17, name:'交通局',value1:0,},
                                {value:23, name:'公安局',value1:10,},
                                {value:27, name:'卫计局',value1:20,},
                                {value:33, name:'国土局',value1:30,},
                                {value:20, name:'安监局',value1:50,},
                                {value:39, name:'房产局',value1:60,},
                                {value:29, name:'教育局',value1:70,},
                                {value:19, name:'旅游局',value1:80,},
                                {value:39, name:'水务局',value1:90,},
                                {value:29, name:'法院',value1:100,},
                                {value:80, name:'城管',value1:110,},
                                {value:49, name:'环保局',value1:110,},
                                {value:10, name:'财政局',value1:120,},
                            ],
                        },
                        // 边框的设置
                        {
                            radius: ['40%', '47%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            itemStyle: {
                                normal: {
                                    color:'rgba(250,250,250,0.5)'
                                }
                            },
                            data: [{
                                value: 1,
                            }],
                        }
                    ]
                };
                myChart.setOption(option);
            },

            changeTab() {
                if(this.selected == 'tab1') {
                    this.set_tab1_chart1();
                    this.set_tab1_chart2();
                    this.set_tab1_chart3();
                } else if(this.selected == 'tab2') {
                    this.set_tab2_chart1();
                    this.set_tab2_chart2();
                    this.set_tab2_chart3();
                } else if(this.selected == 'tab3') {
                    this.set_tab3_chart1();
                }
            }
        },
        created() {
        },
		mounted() {
            // 数据存储监控
            this.set_tab1_chart1();
            this.set_tab1_chart2();
            this.set_tab1_chart3();
		}
	}

</script>

<style scoped>
    .tab_head {
        position: fixed;
        z-index: 105;
        width: 100%;
        top: 0;
        
    }

    .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.15rem;
    }

    .headMsg {
        line-height: 0.25rem;
    }

    .echarts {
        width: 100%;
        height: 3rem;
        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: 30%;
    }

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