|
|
@@ -1,738 +0,0 @@
|
|
|
-<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>
|
