monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit a6a2599c03e4c58c837cf3cd07c945a3aa4dd695 2 parents d570b700 37b6062b

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 37 changed files with 713 additions and 364 deletions
@@ -34,4 +34,6 @@ @@ -34,4 +34,6 @@
34 34
35 @import "../css/resourceStatistics.css"; 35 @import "../css/resourceStatistics.css";
36 36
37 -@import "../css/cloudPlatform.css";  
  37 +@import "../css/cloudPlatform.css";
  38 +
  39 +@import "../css/navTabs.css";
@@ -75,7 +75,10 @@ @@ -75,7 +75,10 @@
75 position: relative; 75 position: relative;
76 z-index: 1; 76 z-index: 1;
77 } 77 }
78 - 78 +.yxqk .tip .asset-tip{
  79 + display: inline-block;
  80 + position: relative;
  81 +}
79 82
80 .yxqk .tip b { 83 .yxqk .tip b {
81 color:#00b3fe; 84 color:#00b3fe;
@@ -199,7 +202,7 @@ @@ -199,7 +202,7 @@
199 opacity: .9; 202 opacity: .9;
200 position: absolute; 203 position: absolute;
201 top: -10px; 204 top: -10px;
202 - left: 270px; 205 + left: 70px;
203 z-index: 999; 206 z-index: 999;
204 width: 132px; 207 width: 132px;
205 height: 170px; 208 height: 170px;
1 -.declare-container{ 1 +.declare-container,.declare-lineChart{
2 background: url("/vue3/src/assets/images/zjdp/img-bg.png"); 2 background: url("/vue3/src/assets/images/zjdp/img-bg.png");
3 background-position: center; 3 background-position: center;
4 - height: 100%;  
5 - overflow: hidden; 4 +
  5 +}
  6 +.declare-container{
6 max-width:323px; 7 max-width:323px;
  8 +
7 } 9 }
8 .declare-total{ 10 .declare-total{
9 font-size: 16px; 11 font-size: 16px;
  1 +.navTabs-container{
  2 + display: flex;
  3 + justify-content: space-between;
  4 + align-items: center;
  5 + padding: 0 10px;
  6 +}
  7 +.navTabs-container .el-carousel{
  8 + flex: 1;
  9 +}
  10 +.navTabs-container .el-carousel__item {
  11 + display: flex;
  12 + justify-content: center;
  13 + align-items: center;
  14 +}
  15 +.navTabs-container .el-carousel__arrow--left {
  16 + left: 3px;
  17 +}
  18 +.navTabs-container .el-carousel__arrow--right{
  19 + right:3px;
  20 +}
  21 +.rightArrow,.leftArrow{
  22 + cursor: pointer;
  23 +}
  24 +.tabContaier{
  25 + display: flex;
  26 + justify-content: space-around;
  27 + flex: 1;
  28 +}
  29 +.tabItem{
  30 + padding:5px 30px;
  31 + border-bottom: 3px solid #1ac045;
  32 + background-color: #0c1532;
  33 + border-radius: 3px;
  34 + color: #fff;
  35 + font-size: 16px;
  36 + cursor: pointer;
  37 + font-family: "PingFang SC";
  38 + box-sizing: border-box;
  39 + height: 43px;
  40 + align-items: center;
  41 + display: flex;
  42 +}
  43 +.borderColorGood{
  44 + border-bottom: 3px solid #d2bf3f;
  45 +
  46 +}
  47 +.borderColorMi{
  48 + border-bottom: 3px solid #f31515;
  49 +
  50 +}
  51 +.tabItem:hover,.tabItem.active{
  52 + background-color: #0b1943;
  53 +}
1 .network-container{ 1 .network-container{
2 width: 100%; 2 width: 100%;
3 height: 100%; 3 height: 100%;
4 - background-image: url("/vue3/src/assets/images/bg.jpg");  
5 - background-position: center; 4 + /* background-image: url("/vue3/src/assets/images/bg.jpg");
  5 + background-position: center;*/
6 text-align: left; 6 text-align: left;
7 overflow: visible; 7 overflow: visible;
  8 + position: relative;
8 } 9 }
9 10
10 #network-echart{ 11 #network-echart{
@@ -13,4 +14,10 @@ @@ -13,4 +14,10 @@
13 background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png"); 14 background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
14 background-position: center; 15 background-position: center;
15 background-repeat: no-repeat; 16 background-repeat: no-repeat;
  17 + background-size: 100%;
  18 +}
  19 +.network-title{
  20 + position: absolute;
  21 + top: -10px;
  22 + z-index: 1;
16 } 23 }
@@ -3,10 +3,21 @@ body{font-size: 15px;} @@ -3,10 +3,21 @@ body{font-size: 15px;}
3 background: url("/vue3/src/assets/images/zjdp/img-bg.png"); 3 background: url("/vue3/src/assets/images/zjdp/img-bg.png");
4 background-position: center; 4 background-position: center;
5 } 5 }
  6 +.zj-screen{
  7 + padding:0 10px;
  8 +}
6 .container-title{ 9 .container-title{
7 color: white; 10 color: white;
8 text-align: left; 11 text-align: left;
9 } 12 }
  13 +.screen-header .title-date{
  14 + color: #ffff;
  15 + left:2%;
  16 + top:44%;
  17 +}
  18 +.title-date span{
  19 + margin-left: 12px;
  20 +}
10 .left-40{ 21 .left-40{
11 width:48%; 22 width:48%;
12 } 23 }
@@ -104,14 +104,6 @@ const routes = [{ @@ -104,14 +104,6 @@ const routes = [{
104 path: '/zjdaping', 104 path: '/zjdaping',
105 name: 'zjdaping', 105 name: 'zjdaping',
106 component: () => myImport('views/zjdaping/index') 106 component: () => myImport('views/zjdaping/index')
107 - // component: () => myImport('views/zjdaping/components/networkTopology/index')  
108 - // component: () => myImport('views/zjdaping/components/dataCenter/index')  
109 - // component: () => myImport('views/zjdaping/components/cloudPlatform/index')  
110 - // component: () => myImport('views/zjdaping/components/assetOverview/index')  
111 - // component: () => myImport('views/zjdaping/components/declare/index')  
112 - // component: () => myImport('views/zjdaping/components/lineChart/index')  
113 - // component: () => myImport('views/zjdaping/components/resourceStatistics/index')  
114 - // component: () => myImport('views/zjdaping/components/performance/index')  
115 }, 107 },
116 { 108 {
117 path:'/zjdapingchart', 109 path:'/zjdapingchart',
@@ -6,20 +6,24 @@ @@ -6,20 +6,24 @@
6 <div class="asset-overview yxqk"> 6 <div class="asset-overview yxqk">
7 <div class="asset-overview-tip"> 7 <div class="asset-overview-tip">
8 <div class="tip yxqk_tips_div"> 8 <div class="tip yxqk_tips_div">
9 - <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p> 9 + <div class="asset-tip">
  10 + <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
  11 + <!--悬浮提示信息-->
  12 + <div class="yxqk_tips_container" v-show="isShow" >
  13 + <ul class="items" id="yxjk_resource_type_count_tips" >
  14 + <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
  15 + <li v-for="(item,index) in assetOverviewDataAll">
  16 + <i :class="'icon-'+item.code"></i>
  17 + <span >{{item.name}}：{{item.num}}台</span>
  18 + </li>
  19 + </div>
  20 + </ul>
  21 + </div>
  22 + </div>
  23 +
10 <b id="yxjk_total_resource">{{totalData}}</b> 24 <b id="yxjk_total_resource">{{totalData}}</b>
11 25
12 - <!--悬浮提示信息-->  
13 - <div class="yxqk_tips_container" v-show="isShow" >  
14 - <ul class="items" id="yxjk_resource_type_count_tips" >  
15 - <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">  
16 - <li v-for="(item,index) in assetOverviewDataAll">  
17 - <i :class="'icon-'+item.code"></i>  
18 - <span >{{item.resTypeName}}：{{item.num}}台</span>  
19 - </li>  
20 - </div>  
21 - </ul>  
22 - </div> 26 +
23 27
24 </div> 28 </div>
25 <div id="all_resource_status" :class="['yxqk__pie',pieClass]"> 29 <div id="all_resource_status" :class="['yxqk__pie',pieClass]">
@@ -38,7 +42,7 @@ @@ -38,7 +42,7 @@
38 <li :class="'list-'+index" v-for="(item,index) in assetOverviewData"> 42 <li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
39 <img :src="'src/assets/images/zjdp/'+item.code+'.png'"> 43 <img :src="'src/assets/images/zjdp/'+item.code+'.png'">
40 <div style="margin-left: .02rem;"> 44 <div style="margin-left: .02rem;">
41 - <p>{{item.resTypeName}}</p> 45 + <p>{{item.name}}</p>
42 <div class="listNum"> 46 <div class="listNum">
43 <b>{{item.num}}</b><span>台</span> 47 <b>{{item.num}}</b><span>台</span>
44 </div> 48 </div>
@@ -20,7 +20,8 @@ export default { @@ -20,7 +20,8 @@ export default {
20 // 挂载完 20 // 挂载完
21 Vue.onMounted(() => { 21 Vue.onMounted(() => {
22 $.get(proxy.domainName +proxy.apiUrl,function (res) { 22 $.get(proxy.domainName +proxy.apiUrl,function (res) {
23 - const data = res.map; 23 + const data = res;
  24 + // const data = res.object;
24 //状态 25 //状态
25 if(data && data.healthStatus){ 26 if(data && data.healthStatus){
26 if(data.healthStatus == '2'){//问题 27 if(data.healthStatus == '2'){//问题
@@ -34,19 +35,19 @@ export default { @@ -34,19 +35,19 @@ export default {
34 proxy.healthStatusName=data.healthStatusName; 35 proxy.healthStatusName=data.healthStatusName;
35 } 36 }
36 //资源总量 37 //资源总量
37 - if(data && data.total){  
38 - proxy.totalData=data.total; 38 + if(data && data.count){
  39 + proxy.totalData=data.count;
39 } 40 }
40 //分类总量 41 //分类总量
41 - if(data && data.data){ 42 + if(data && data.object){
42 // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量 43 // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
43 // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER']; 44 // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
44 let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0; 45 let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
45 const showData = [];//展示的类型 46 const showData = [];//展示的类型
46 //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量 47 //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
47 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死 48 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
48 - $.each(data.data,function (i,v) {  
49 - const resType = v.resType; 49 + $.each(data.object,function (i,v) {
  50 + const resType = v.code;
50 if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; } 51 if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
51 if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; } 52 if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
52 if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; } 53 if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
@@ -54,16 +55,16 @@ export default { @@ -54,16 +55,16 @@ export default {
54 if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; } 55 if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
55 if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; } 56 if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
56 }); 57 });
57 - showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});  
58 - showData.push({resTypeName:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});  
59 - showData.push({resTypeName:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});  
60 - showData.push({resTypeName:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});  
61 - showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});  
62 - showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'}); 58 + showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
  59 + showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
  60 + showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
  61 + showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
  62 + showData.push({name:"存储",num:storage,code:'STORAGE'});
  63 + showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
63 //类型统计 64 //类型统计
64 65
65 proxy.assetOverviewData=showData; 66 proxy.assetOverviewData=showData;
66 - proxy.assetOverviewDataAll=data.data; 67 + proxy.assetOverviewDataAll=data.object;
67 68
68 //悬浮提示 69 //悬浮提示
69 70
1 -<div class="barChart">  
2 - <div id="bar-echart" style="width:100%;height:225px;"></div>  
3 -</div>  
  1 +<div id="bar-echart" style="width:100%;height:225px;"></div>
1 export default { 1 export default {
2 name: 'barChart', 2 name: 'barChart',
3 template: '', 3 template: '',
  4 + props:['yAxisData','seriesData','legendData','chartId'],
4 components: { 5 components: {
5 }, 6 },
6 data(){ 7 data(){
7 return { 8 return {
8 domainName:'http://192.168.0.159:8080/api-web', 9 domainName:'http://192.168.0.159:8080/api-web',
  10 + chartId:'bar-echart'
9 11
10 } 12 }
11 }, 13 },
@@ -13,10 +15,9 @@ export default { @@ -13,10 +15,9 @@ export default {
13 const {proxy} = Vue.getCurrentInstance(); 15 const {proxy} = Vue.getCurrentInstance();
14 // 挂载完 16 // 挂载完
15 Vue.onMounted(() => { 17 Vue.onMounted(() => {
16 - const chartDom = document.getElementById('bar-echart'); 18 + const chartDom=proxy.$el
17 const myChart = echarts.init(chartDom); 19 const myChart = echarts.init(chartDom);
18 let option; 20 let option;
19 -  
20 option = { 21 option = {
21 title: { 22 title: {
22 text: '近30天访问量', 23 text: '近30天访问量',
@@ -29,7 +30,7 @@ export default { @@ -29,7 +30,7 @@ export default {
29 }, 30 },
30 xAxis: { 31 xAxis: {
31 type: 'category', 32 type: 'category',
32 - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 33 + data: props.legendData,
33 axisLine:{ 34 axisLine:{
34 show:true,//是否显示坐标线 35 show:true,//是否显示坐标线
35 lineStyle: { 36 lineStyle: {
@@ -58,32 +59,18 @@ export default { @@ -58,32 +59,18 @@ export default {
58 }, 59 },
59 axisLabel:{ 60 axisLabel:{
60 color:'#ffffff', 61 color:'#ffffff',
61 - fontSize:12  
62 - },  
63 - },  
64 - series: [  
65 - {  
66 - data: [120, 200, 150, 80, 70, 110, 130],  
67 - type: 'bar',  
68 - showBackground: true,  
69 - backgroundStyle: {  
70 - color: 'rgba(180, 180, 180, 0.2)'  
71 - },  
72 - itemStyle:{  
73 - normal:{  
74 - barBorderRadius: [3,3,0,0],  
75 - color:new echarts.graphic.LinearGradient(  
76 - 0,0,0,1,  
77 - [  
78 - {offset:0,color:'#3ac9fb'},  
79 - {offset:1,color:'#2a81f3'}  
80 - ]  
81 - )  
82 - // color:"#ff0000" 62 + fontSize:12,
  63 + formatter:function (value,index){
  64 + if(value>=10000 &&value<10000000){
  65 + value=value/10000 +"万";
  66 + }else if(value>=10000000){
  67 + value=value/10000000+"千万";
83 } 68 }
  69 + return value;
84 } 70 }
85 } 71 }
86 - ] 72 + },
  73 + series: props.seriesData
87 }; 74 };
88 75
89 option && myChart.setOption(option); 76 option && myChart.setOption(option);
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 </div> 21 </div>
22 </div> 22 </div>
23 <div class="declare-today-num"> 23 <div class="declare-today-num">
24 - <Digital :numm="56631" :numLen="7"></Digital> 24 + <Digital v-if="declaredToday" :numm="declaredToday" :numLen="7"></Digital>
25 </div> 25 </div>
26 </div> 26 </div>
27 <div class="declare-today"> 27 <div class="declare-today">
@@ -33,19 +33,19 @@ @@ -33,19 +33,19 @@
33 </div> 33 </div>
34 </div> 34 </div>
35 <div class="declare-today-num"> 35 <div class="declare-today-num">
36 - <Digital :numm="5640397" :numLen="7"></Digital> 36 + <Digital v-if="declaredMonth" :numm="declaredMonth" :numLen="7"></Digital>
37 </div> 37 </div>
38 </div> 38 </div>
39 <div class="declare-today"> 39 <div class="declare-today">
40 <div class="declare-title"> 40 <div class="declare-title">
41 <div class="declare-bg volume-today"></div> 41 <div class="declare-bg volume-today"></div>
42 </div> 42 </div>
43 - <div class="volume-today-container">  
44 - <span class="volume-text">网络发票</span>  
45 - <span class="volume-proportion" :style="styleVolume"></span>  
46 - <span class="volume-num">{{volumeNum}}</span> 43 + <div class="volume-today-container" v-for="(item,index) in volumeData">
  44 + <span class="volume-text">{{item.name}}</span>
  45 + <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
  46 + <span class="volume-num">{{item.num1}}</span>
47 </div> 47 </div>
48 - <div class="volume-today-container"> 48 + <!-- <div class="volume-today-container">
49 <span class="volume-text">涉税文书</span> 49 <span class="volume-text">涉税文书</span>
50 <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span> 50 <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
51 <span class="volume-num num-doc">{{volumeNumDoc}}</span> 51 <span class="volume-num num-doc">{{volumeNumDoc}}</span>
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 <span class="volume-text">网上申报</span> 54 <span class="volume-text">网上申报</span>
55 <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span> 55 <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
56 <span class="volume-num num-net">{{volumeNumNet}}</span> 56 <span class="volume-num num-net">{{volumeNumNet}}</span>
57 - </div> 57 + </div>-->
58 </div> 58 </div>
59 </div> 59 </div>
60 <div class="declare-right"> 60 <div class="declare-right">
@@ -8,15 +8,20 @@ export default { @@ -8,15 +8,20 @@ export default {
8 }, 8 },
9 data(){ 9 data(){
10 return { 10 return {
11 - domainName:'http://192.168.0.245:8180/api-web', 11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
  13 + apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
  14 + volumeData:'',//业务量数据
12 declareData:'', 15 declareData:'',
13 reportable:0,//本月应申报 16 reportable:0,//本月应申报
14 reportableToday:0,//本日申报未导入 17 reportableToday:0,//本日申报未导入
  18 + declaredToday:0,//今日已申报数
15 reportableMonth:0, //本月未申报数 19 reportableMonth:0, //本月未申报数
  20 + declaredMonth:0,//本月已申报数
16 declarationRate:0.94,//申报率 21 declarationRate:0.94,//申报率
17 - volumeNumDoc:0,//涉税文书业务量  
18 - volumeNumNet:0,//网上申报业务量  
19 - volumeNum:0, //业务量数 22 + // volumeNumDoc:0,//涉税文书业务量
  23 + // volumeNumNet:0,//网上申报业务量
  24 + // volumeNum:0, //业务量数
20 styleVolume:'',//业务量style样式 25 styleVolume:'',//业务量style样式
21 styleVolumeDoc:'', 26 styleVolumeDoc:'',
22 styleVolumeNet:'', 27 styleVolumeNet:'',
@@ -29,41 +34,64 @@ export default { @@ -29,41 +34,64 @@ export default {
29 const {proxy} = Vue.getCurrentInstance(); 34 const {proxy} = Vue.getCurrentInstance();
30 // 挂载完 35 // 挂载完
31 Vue.onMounted(() => { 36 Vue.onMounted(() => {
32 - proxy.reportable=proxy.numberFilter('1006105',-1);  
33 - proxy.reportableToday=proxy.numberFilter('1006506',-1);  
34 - proxy.reportableMonth=proxy.numberFilter('2848',-1); 37 + $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD',function (res) {
  38 + const data = res;
  39 + if(data && data.map){
  40 + let reportableMonth=data.map.rightNumber;
  41 + proxy.declaredMonth=data.map.leftNumber;
  42 + proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
35 43
36 - proxy.volumeNum=proxy.numberFilter('5765404',-1);  
37 - proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);  
38 - proxy.volumeNumNet=proxy.numberFilter('698423',-1); 44 + let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
  45 + proxy.reportable=proxy.numberFilter(reportable,-1);
  46 + let declarationRate=(parseInt(proxy.declaredMonth) /reportable).toFixed(2);
  47 + proxy.opactiyNumMath=declarationRate*proxy.opactiyNumTotal
39 48
40 - proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal 49 + if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
  50 + proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
41 51
42 - if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){  
43 - proxy.opactiyNum=Math.floor(proxy.opactiyNumMath); 52 + }else{
  53 + proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
44 54
45 - }else{  
46 - proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath); 55 + }
  56 + proxy.declarationRate=declarationRate*100+'%';
47 57
48 - }  
49 - proxy.declarationRate=proxy.declarationRate*100+'%'; 58 + }
50 59
51 - let num1=5765404;  
52 - let num2=5458044;  
53 - let num3=698423; 60 + })
54 61
55 - proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'  
56 - proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'  
57 - proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px' 62 + $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBS&kipValue2=KPIDA0ACBBE',function (res) {
  63 + const data = res;
  64 + if(data && data.map){
  65 + let reportableToday=data.map.rightNumber;
  66 + proxy.declaredToday=data.map.leftNumber;
  67 + proxy.reportableToday=proxy.numberFilter(reportableToday,-1);
  68 + }
  69 + })
58 70
  71 + //业务量
  72 + $.get(proxy.domainName +proxy.apiUrl1,function (res) {
  73 + const data = res;
  74 + if(data && data.data){
  75 + let volumeData=data.data;
  76 + let maxVal=0;
  77 + $.each(volumeData,function (i,v){
  78 + v.num1=proxy.numberFilter(v.num,-1)
  79 + if(v.num>maxVal){
  80 + maxVal=v.num;
  81 + }
  82 + })
  83 + $.each(volumeData,function (i,v){
  84 + v.styleVolume='width:'+proxy.eleWidthNum(v.num,maxVal)+'px'
  85 + })
  86 + proxy.volumeData=volumeData;
59 87
  88 + }
60 89
  90 + })
61 91
62 }) 92 })
63 - const eleWidthNum=(num,num1,num2,num3)=>{  
64 - let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3); 93 + const eleWidthNum=(num,maxNum)=>{
65 let widthNum=Math.ceil((num*150)/maxNum) 94 let widthNum=Math.ceil((num*150)/maxNum)
66 - console.log("aaa",num,widthNum)  
67 let widthData=0; 95 let widthData=0;
68 if(widthNum!='' && widthNum!=null && widthNum!=undefined){ 96 if(widthNum!='' && widthNum!=null && widthNum!=undefined){
69 widthData=widthNum; 97 widthData=widthNum;
1 <div class="declare-lineChart"> 1 <div class="declare-lineChart">
2 - <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart> 2 + <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></LineChart>
3 </div> 3 </div>
@@ -9,20 +9,53 @@ export default { @@ -9,20 +9,53 @@ export default {
9 data(){ 9 data(){
10 return { 10 return {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 - apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',  
13 - resourceStatisticsData:'', 12 + apiUrl:'/api-web/bigScreen/PortFolioLineChart',
  13 + declareLineData:'',
14 yAxisCommon:[], 14 yAxisCommon:[],
15 ySeriesCommon:[], 15 ySeriesCommon:[],
  16 + legendData:[],
16 chartId:'line-echart-declare' 17 chartId:'line-echart-declare'
17 } 18 }
18 }, 19 },
  20 + watch:{
  21 +
  22 + },
19 setup(props, {attrs, slots, emit}) { 23 setup(props, {attrs, slots, emit}) {
20 const {proxy} = Vue.getCurrentInstance(); 24 const {proxy} = Vue.getCurrentInstance();
21 -  
22 -  
23 -  
24 // 挂载完 25 // 挂载完
25 Vue.onMounted(() => { 26 Vue.onMounted(() => {
  27 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  28 + const data = res;
  29 + let ySeriesCommon=[];
  30 + if (data && data.data) {
  31 + let declareLineData=data.data;
  32 + let legendData=[];
  33 + $.each(declareLineData,function (i,v){
  34 + ySeriesCommon.push({
  35 + name:v.name,
  36 + type:'line',
  37 + smooth:true,
  38 + stack:'Total',
  39 + data:v.number,
  40 + // yAxisIndex:0,
  41 + showSymbol:false,
  42 + itemStyle : {
  43 + normal : {
  44 + color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1',//tooltip里的小圆点颜色
  45 + lineStyle:{
  46 + color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1'
  47 + }
  48 + }
  49 + },
  50 + })
  51 + legendData.push(v.name)
  52 +
  53 + })
  54 + proxy.ySeriesCommon=ySeriesCommon;
  55 + proxy.legendData=legendData;
  56 + }
  57 + })
  58 +
26 //一般y序列 59 //一般y序列
27 proxy.yAxisCommon={ 60 proxy.yAxisCommon={
28 type: 'value', 61 type: 'value',
@@ -36,7 +69,7 @@ export default { @@ -36,7 +69,7 @@ export default {
36 }, 69 },
37 } 70 }
38 //一般y轴数据 71 //一般y轴数据
39 - proxy.ySeriesCommon=[ 72 + /* proxy.ySeriesCommon=[
40 { 73 {
41 name: '网络投票', 74 name: '网络投票',
42 type: 'line', 75 type: 'line',
@@ -89,7 +122,7 @@ export default { @@ -89,7 +122,7 @@ export default {
89 } 122 }
90 }, 123 },
91 }, 124 },
92 - ] 125 + ]*/
93 }) 126 })
94 127
95 return{ 128 return{
1 <div class="digital"> 1 <div class="digital">
2 <!-- 数字滚动显示--> 2 <!-- 数字滚动显示-->
3 <div class="box-item"> 3 <div class="box-item">
4 - <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }" 4 + <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }"
5 v-for="(item,index) in orderNum" 5 v-for="(item,index) in orderNum"
6 :key="index" :style="cStyle"> 6 :key="index" :style="cStyle">
7 <span v-if="!isNaN(item)"> 7 <span v-if="!isNaN(item)">
@@ -17,6 +17,7 @@ export default { @@ -17,6 +17,7 @@ export default {
17 // numm: 传入的数字 numLen: 默认显示几位数 17 // numm: 传入的数字 numLen: 默认显示几位数
18 let numVal=numm.value+''; 18 let numVal=numm.value+'';
19 proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length); 19 proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length);
  20 + console.log("numDiff--",proxy.numDiff)
20 const toOrderNum = (num) => { 21 const toOrderNum = (num) => {
21 22
22 num = num.toString(); 23 num = num.toString();
1 -<div class="lineChart">  
2 -<!-- <div :id="chartId" style="width:100%;height:225px;"></div>-->  
3 - <div id="line-echart" style="width:100%;height:225px;"></div>  
4 -</div>  
  1 +<div :id="chartId" style="width:100%;height:225px;"></div>
1 export default { 1 export default {
2 name: 'lineChart', 2 name: 'lineChart',
3 template: '', 3 template: '',
4 - props:['yAxisData','seriesData','chartId'], 4 + props:['yAxisData','seriesData','legendData','chartId'],
5 components: { 5 components: {
6 }, 6 },
7 data(){ 7 data(){
@@ -24,11 +24,13 @@ export default { @@ -24,11 +24,13 @@ export default {
24 proxy.yAxisData=props.yAxisData; 24 proxy.yAxisData=props.yAxisData;
25 proxy.seriesData=props.seriesData; 25 proxy.seriesData=props.seriesData;
26 proxy.chartId=props.chartId; 26 proxy.chartId=props.chartId;
27 - console.log('ddd',proxy.chartId)  
28 -  
29 - const chartDom = document.getElementById('line-echart');  
30 - // const chartDom = document.getElementById(proxy.chartId);  
31 - console.log('d3e3',$(proxy.chartId)) 27 + // const chartDom = document.getElementById('line-echart-declare');
  28 + let xAxisDataLength=proxy.seriesData[0].data.length;
  29 + let xAxisData=[];
  30 + for(let i=1;i<=xAxisDataLength;i++){
  31 + xAxisData.push(i)
  32 + }
  33 + const chartDom=proxy.$el
32 const myChart = echarts.init(chartDom); 34 const myChart = echarts.init(chartDom);
33 let option; 35 let option;
34 36
@@ -42,11 +44,12 @@ export default { @@ -42,11 +44,12 @@ export default {
42 borderColor:"#333", 44 borderColor:"#333",
43 textStyle:{ 45 textStyle:{
44 color:"#fff", 46 color:"#fff",
  47 + align:'left'
45 } 48 }
46 49
47 }, 50 },
48 legend: { 51 legend: {
49 - data: ['网络投票', '涉税文书', '网上申报'], 52 + data: props.legendData,
50 itemHeight:0,//图例圆圈大小设置 53 itemHeight:0,//图例圆圈大小设置
51 y:'7px', 54 y:'7px',
52 textStyle: { 55 textStyle: {
@@ -61,15 +64,15 @@ export default { @@ -61,15 +64,15 @@ export default {
61 bottom: '3%', 64 bottom: '3%',
62 containLabel: true, 65 containLabel: true,
63 }, 66 },
64 - toolbox: { 67 + /*toolbox: {
65 feature: { 68 feature: {
66 saveAsImage: {} 69 saveAsImage: {}
67 } 70 }
68 - }, 71 + },*/
69 xAxis: { 72 xAxis: {
70 type: 'category', 73 type: 'category',
71 boundaryGap: false, 74 boundaryGap: false,
72 - data: ['1', '2', '3', '4', '5', '6', '7'], 75 + data: xAxisData,
73 76
74 axisLine:{ 77 axisLine:{
75 show:false,//是否显示坐标线 78 show:false,//是否显示坐标线
@@ -91,43 +94,11 @@ export default { @@ -91,43 +94,11 @@ export default {
91 94
92 option && myChart.setOption(option); 95 option && myChart.setOption(option);
93 96
94 - let xAxisData=proxy.getRangeData();  
95 - // console.log('111',xAxisData)  
96 -  
97 -  
98 }) 97 })
99 98
100 99
101 - //获取当前月份的最后一天,当前日期  
102 - const getRangeData=()=> {  
103 - const date = new Date();  
104 - let currentMonth = date.getMonth();  
105 - const nextMonth = ++currentMonth;  
106 - const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);  
107 - const oneDay = 1000 * 60 * 60 * 24;  
108 - const lastTime = new Date(nextMonthFirstDay - oneDay);  
109 - const lastDay = lastTime.getDate();  
110 -  
111 - const dd = date.getDate();  
112 - let rangeData=[];  
113 - if(dd+15>lastDay){  
114 - const start=lastDay-15;  
115 - const end=lastDay;  
116 - for(let i=start;i<end;i++){  
117 - rangeData.push(i+1)  
118 - }  
119 - }else{  
120 - const start=dd;  
121 - const end=dd+15;  
122 - for(let i=start;i<end;i++){  
123 - rangeData.push(i)  
124 - }  
125 - }  
126 - return rangeData;  
127 - }  
128 -  
129 return{ 100 return{
130 - getRangeData 101 +
131 } 102 }
132 } 103 }
133 } 104 }
  1 +<div class="monitoring-bar">
  2 + <BarChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></BarChart>
  3 +</div>
  1 +export default {
  2 + name: 'performance',
  3 + template: '',
  4 + components: {
  5 + 'BarChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/barChart/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
  13 + declareLineData:'',
  14 + yAxisCommon:[],
  15 + ySeriesCommon:[],
  16 + legendData:[],
  17 + ySeriesCommonData:[],
  18 +
  19 + }
  20 + },
  21 + watch:{
  22 +
  23 + },
  24 + setup(props, {attrs, slots, emit}) {
  25 + const {proxy} = Vue.getCurrentInstance();
  26 +
  27 + // 挂载完
  28 + Vue.onMounted(() => {
  29 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  30 + const data = res;
  31 + if (data && data.data) {
  32 + let monitoringBarData=data.data;
  33 + let legendData=[];
  34 + $.each(monitoringBarData,function (i,v){
  35 + proxy.ySeriesCommonData.unshift(v.value)
  36 + legendData.push(i)
  37 + })
  38 + proxy.legendData=legendData
  39 + }
  40 + proxy.ySeriesCommon=[
  41 + {
  42 + data: proxy.ySeriesCommonData,
  43 + type: 'bar',
  44 + showBackground: true,
  45 + backgroundStyle: {
  46 + color: 'rgba(180, 180, 180, 0.2)'
  47 + },
  48 + itemStyle:{
  49 + normal:{
  50 + barBorderRadius: [3,3,0,0],
  51 + color:new echarts.graphic.LinearGradient(
  52 + 0,0,0,1,
  53 + [
  54 + {offset:0,color:'#3ac9fb'},
  55 + {offset:1,color:'#2a81f3'}
  56 + ]
  57 + )
  58 + // color:"#ff0000"
  59 + }
  60 + }
  61 + }
  62 + ]
  63 + })
  64 +
  65 + })
  66 +
  67 + return{
  68 + }
  69 + }
  70 +}
  1 +<div class="navTabs-container">
  2 + <div class="rightArrow">
  3 + <img src="/vue3/src/assets/images/zjdp/icon-left.png" @click="arrowClick('left')" alt="">
  4 + </div>
  5 + <el-carousel height="50px" :autoplay="false" indicator-position="none" arrow="never" ref="cardShow">
  6 + <el-carousel-item v-for="item in listItem" :key="item" >
  7 + <div class="tabContaier">
  8 + <div v-if="listArray" v-for="(itemData,index) in dataShow" :class="['tabItem', {'active':index==0,'borderColorGood':itemData.healthStatus==2,'borderColorMi':itemData.healthStatus==1}]">{{itemData.busTypeName}}</div>
  9 + </div>
  10 +
  11 +
  12 + </el-carousel-item>
  13 + </el-carousel>
  14 + <div class="rightArrow">
  15 + <img src="/vue3/src/assets/images/zjdp/icon-right.png" @click="arrowClick('right')" alt="">
  16 + </div>
  17 +
  18 +</div>
  1 +export default {
  2 + name: 'navTabs',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + domainName:sessionStorage.getItem('domainName'),
  9 + apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
  10 + listItem:1,//轮播数-总页数
  11 + pageSize:5,//每页显示5条数据
  12 + currentPage:0,//当前页
  13 + listArray:'' //导航数据
  14 +
  15 +
  16 + }
  17 + },
  18 + setup(props, {attrs, slots, emit}) {
  19 + const {proxy} = Vue.getCurrentInstance();
  20 + let accessToken = localStorage.getItem('access_token');
  21 + // 挂载完
  22 + Vue.onMounted(() => {
  23 + $.get(proxy.domainName +proxy.apiUrl+accessToken,function (res) {
  24 + const data = res;
  25 + if (data && data.data) {
  26 + let navTabsData=data.data;
  27 + proxy.listArray=navTabsData;
  28 +
  29 + }
  30 + })
  31 +
  32 + })
  33 + const arrowClick=(val)=>{
  34 + if(val=='right'){
  35 + proxy.$refs.cardShow.next();
  36 + proxy.nextPage();
  37 +
  38 + }else{
  39 + proxy.$refs.cardShow.prev();
  40 + proxy.prePage();
  41 +
  42 + }
  43 +
  44 + }
  45 + const nextPage= ()=>{
  46 + if (proxy.currentPage == proxy.pageNum - 1) return;
  47 + proxy.currentPage++;
  48 +
  49 + }
  50 + const prePage=()=>{
  51 + if (proxy.currentPage == 0) return;
  52 + proxy.currentPage--;
  53 + }
  54 +
  55 + return{
  56 + arrowClick,
  57 + nextPage,
  58 + prePage
  59 + }
  60 + },
  61 + computed:{
  62 + dataShow: function(){
  63 + let start = this.currentPage*this.pageSize;
  64 + let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
  65 + return this.listArray.slice(start, end)
  66 + },
  67 + pageNum: function(){
  68 + return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
  69 + }
  70 + }
  71 +}
@@ -3,5 +3,5 @@ @@ -3,5 +3,5 @@
3 <div class="container-title network-title"> 3 <div class="container-title network-title">
4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt=""> 4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
5 </div> 5 </div>
6 - <div id="network-echart"></div> 6 + <div id="network-echart" v-if="mapData" style="height:400px"></div>
7 </div> 7 </div>
@@ -12,6 +12,7 @@ export default { @@ -12,6 +12,7 @@ export default {
12 mapJsonUrl: 'public/data/zhejiang.json', 12 mapJsonUrl: 'public/data/zhejiang.json',
13 // cityUrl: '/datavis/getEchartsMap', 13 // cityUrl: '/datavis/getEchartsMap',
14 cityUrl: '/api-web/bigScreen/getEchartsMap', 14 cityUrl: '/api-web/bigScreen/getEchartsMap',
  15 + mapData:'',
15 // 标记各地市的坐标 16 // 标记各地市的坐标
16 geoCoordMap: { 17 geoCoordMap: {
17 "省局": [119.453576, 30.005871], 18 "省局": [119.453576, 30.005871],
@@ -61,8 +62,6 @@ export default { @@ -61,8 +62,6 @@ export default {
61 // 挂载完 62 // 挂载完
62 Vue.onMounted(() => { 63 Vue.onMounted(() => {
63 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"]; 64 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
64 - console.log("444",proxy.divIdName)  
65 -  
66 // 解析地图数据包 65 // 解析地图数据包
67 $.getJSON(proxy.mapJsonUrl, function(geoJson) { 66 $.getJSON(proxy.mapJsonUrl, function(geoJson) {
68 // 注册地图,传入数据 67 // 注册地图,传入数据
@@ -71,6 +70,7 @@ export default { @@ -71,6 +70,7 @@ export default {
71 $.get(proxy.domainName +proxy.cityUrl,function(res){ 70 $.get(proxy.domainName +proxy.cityUrl,function(res){
72 if(res.data && res.data.length > 0){ 71 if(res.data && res.data.length > 0){
73 const mapData = res.data; 72 const mapData = res.data;
  73 + proxy.mapData=mapData;
74 const obj = res.object; 74 const obj = res.object;
75 const optionMap = { 75 const optionMap = {
76 timeline: { 76 timeline: {
@@ -122,160 +122,180 @@ export default { @@ -122,160 +122,180 @@ export default {
122 tooltip: { 122 tooltip: {
123 show:false 123 show:false
124 }, 124 },
125 - series: [{  
126 - // 坐标点参数和样式  
127 - type: 'effectScatter',  
128 - coordinateSystem: 'geo',  
129 - data: proxy.convertData(mapData),  
130 - symbolSize: 10,  
131 - showEffectOn: 'render',  
132 - rippleEffect: { //涟漪特效  
133 - period: 4, //动画时间，值越小速度越快  
134 - brushType: 'stroke', //波纹绘制方式 stroke, fill  
135 - scale: 4 //波纹圆环最大限制，值越大波纹越大  
136 - },  
137 - label: {  
138 - normal: {  
139 - formatter: '{b}',  
140 - position: 'right',  
141 - show: true,  
142 - color:'#fff',  
143 - fontSize:16  
144 - }  
145 - },  
146 - itemStyle: {  
147 - normal: {  
148 - //点的颜色  
149 - color: function (data) {  
150 - return colors[data.value[2]];  
151 - },  
152 - shadowBlur: 2,  
153 - shadowColor: '#03BED9',  
154 - symbolSize: 5  
155 - }  
156 - }  
157 - },  
158 - {  
159 - // 线条参数和样式  
160 - type: 'lines',  
161 - // 变化频率  
162 - zlevel: 2,  
163 - effect: {  
164 - show: true,  
165 - // 箭头指向速度，值越小速度越快  
166 - period: 4,  
167 - // 特效尾迹长度,取值0到1,值越大,尾迹越长  
168 - trailLength: 0.03,  
169 - symbol: 'arrow',  
170 - // 图标大小  
171 - symbolSize: 6  
172 - },  
173 - lineStyle: {  
174 - normal: {  
175 - //线条颜色  
176 - color: function (data) {  
177 - // return colors[0];//线条跟着点的颜色一致  
178 - if(data.value == 0){  
179 - return '#00eaff';  
180 - }else{  
181 - return '#D81E06';  
182 - }  
183 -  
184 - },  
185 - // 尾迹线条宽度  
186 - width: 1,  
187 - // 尾迹线条透明度  
188 - opacity: 1,  
189 - // 尾迹线条曲直度  
190 - curveness: 0.3  
191 - }  
192 - },  
193 - data: proxy.convertToLineData(mapData)  
194 - },  
195 - {//被攻击点  
196 - // type: 'scatter',  
197 - type:'effectScatter',  
198 - hoverAnimation:true,//鼠标移入是否显示动画 125 + series: [
  126 + {
  127 + // 坐标点参数和样式
  128 + type: 'effectScatter',
199 coordinateSystem: 'geo', 129 coordinateSystem: 'geo',
200 - zlevel: 3,  
201 - rippleEffect: {  
202 - number:3,  
203 - period: 4,  
204 - brushType: 'fill',  
205 - scale: 2  
206 - },  
207 - symbol: 'circle',  
208 - symbolSize: 30,  
209 - itemStyle:{  
210 - color:'#EE4237', 130 + data: proxy.convertData(mapData),
  131 + symbolSize: 10,
  132 + showEffectOn: 'render',
  133 + rippleEffect: { //涟漪特效
  134 + period: 4, //动画时间，值越小速度越快
  135 + brushType: 'stroke', //波纹绘制方式 stroke, fill
  136 + scale: 4 //波纹圆环最大限制，值越大波纹越大
211 }, 137 },
212 label: { 138 label: {
213 normal: { 139 normal: {
214 - show: false,  
215 - position: 'left',  
216 - formatter: '省局',  
217 - textStyle: {  
218 - color: "#0f0"  
219 - }, 140 + formatter: '{b}',
  141 + position: 'right',
  142 + show: true,
  143 + color:'#fff',
220 fontSize:16 144 fontSize:16
221 - },  
222 - emphasis: {  
223 - show: false,  
224 - color: "#0f0"//鼠标移入字体颜色  
225 } 145 }
226 }, 146 },
227 - data: [{  
228 - name: '省局',  
229 - value: proxy.geoCoordMap['省局'].concat([10])  
230 - }]  
231 - }] 147 + itemStyle: {
  148 + normal: {
  149 + //点的颜色
  150 + color: function (data) {
  151 + return colors[data.value[2]];
  152 + },
  153 + shadowBlur: 2,
  154 + shadowColor: '#03BED9',
  155 + symbolSize: 5
  156 + }
  157 + }
  158 + },
  159 + {
  160 + // 线条参数和样式
  161 + type: 'lines',
  162 + // 变化频率
  163 + zlevel: 2,
  164 + effect: {
  165 + show: true,
  166 + // 箭头指向速度，值越小速度越快
  167 + period: 4,
  168 + // 特效尾迹长度,取值0到1,值越大,尾迹越长
  169 + trailLength: 0.03,
  170 + symbol: 'arrow',
  171 + // 图标大小
  172 + symbolSize: 6
  173 + },
  174 + lineStyle: {
  175 + normal: {
  176 + //线条颜色
  177 + color: function (data) {
  178 + // return colors[0];//线条跟着点的颜色一致
  179 + if(data.value == 0){
  180 + return '#00eaff';
  181 + }else{
  182 + return '#D81E06';
  183 + }
  184 +
  185 + },
  186 + // 尾迹线条宽度
  187 + width: 1,
  188 + // 尾迹线条透明度
  189 + opacity: 1,
  190 + // 尾迹线条曲直度
  191 + curveness: 0.3
  192 + }
  193 + },
  194 + data: proxy.convertToLineData(mapData)
  195 + },
  196 + {//被攻击点
  197 + // type: 'scatter',
  198 + type:'effectScatter',
  199 + hoverAnimation:true,//鼠标移入是否显示动画
  200 + coordinateSystem: 'geo',
  201 + zlevel: 3,
  202 + rippleEffect: {
  203 + number:3,
  204 + period: 4,
  205 + brushType: 'fill',
  206 + scale: 2
  207 + },
  208 + symbol: 'circle',
  209 + symbolSize: 30,
  210 + itemStyle:{
  211 + color:'#EE4237',
  212 + },
  213 + label: {
  214 + normal: {
  215 + show: false,
  216 + position: 'left',
  217 + formatter: '省局',
  218 + textStyle: {
  219 + color: "#0f0"
  220 + },
  221 + fontSize:16
  222 + },
  223 + emphasis: {
  224 + show: false,
  225 + color: "#0f0"//鼠标移入字体颜色
  226 + }
  227 + },
  228 + data: [{
  229 + name: '省局',
  230 + value: proxy.geoCoordMap['省局'].concat([10])
  231 + }]
  232 + }]
232 }] 233 }]
233 }; 234 };
  235 + setTimeout(function (){
  236 + let map_chart = echarts.init(document.getElementById('network-echart'));
  237 + // let map_chart=echarts.init($(proxy.divIdName)[0])
  238 + map_chart.setOption(optionMap);
  239 + map_chart.on('mouseout', 'geo', function (params) {
  240 + $('.map_tips').hide();
  241 + });
  242 + //当鼠标移入当前区域显示提示信息
  243 + map_chart.on('mouseover', 'geo',function (params) {
  244 + let name = params.name;
  245 + //先删除原来的
  246 + $(proxy.divIdName).find('.map_tips').remove();
  247 + //当前城市提示信息
  248 + let currentCity = obj[name];
  249 + if(currentCity && currentCity.length > 0){
  250 + let cityInfos = '';
  251 + $.each(currentCity,function (i,v) {
  252 + cityInfos += '<div class="map_tips_group">' +
  253 + ' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
  254 + ' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
  255 + ' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
  256 + ' </div>';
  257 + });
234 258
235 - // let map_chart = echarts.init(document.getElementById('network-echart'));  
236 - console.log("555",proxy.divIdName)  
237 - console.log("666",$(proxy.divIdName))  
238 -  
239 - let map_chart=echarts.init($(proxy.divIdName)[0])  
240 - map_chart.setOption(optionMap);  
241 - map_chart.on('mouseout', 'geo', function (params) {  
242 - $('.map_tips').hide();  
243 - });  
244 - //当鼠标移入当前区域显示提示信息  
245 - map_chart.on('mouseover', 'geo',function (params) {  
246 - let name = params.name;  
247 - //先删除原来的  
248 - $(proxy.divIdName).find('.map_tips').remove();  
249 - //当前城市提示信息  
250 - let currentCity = obj[name];  
251 - if(currentCity && currentCity.length > 0){  
252 - let cityInfos = '';  
253 - $.each(currentCity,function (i,v) {  
254 - cityInfos += '<div class="map_tips_group">' +  
255 - ' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +  
256 - ' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +  
257 - ' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +  
258 - ' </div>';  
259 - }); 259 + //地图区域悬浮提示
  260 + let cityTips =
  261 + '<div class="map_tips">' +
  262 + ' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
  263 + + cityInfos +
  264 + '</div>';
  265 + //提示框拼接在echar区域
  266 + $(cityTips).appendTo($(proxy.divIdName));
260 267
261 - //地图区域悬浮提示  
262 - let cityTips =  
263 - '<div class="map_tips">' +  
264 - ' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'  
265 - + cityInfos +  
266 - '</div>';  
267 - //提示框拼接在echar区域  
268 - $(cityTips).appendTo($(proxy.divIdName)); 268 + if ($('.map_tips').is(':hidden')) {
  269 + $('.map_tips').show();
  270 + }
  271 + //城市名称从左到右滑入效果
  272 + $('.map_tips_res').addClass("map_tips_city_0");
  273 + $('.map_tips_sxll').addClass("map_tips_city_1");
  274 + $('.map_tips_xxll').addClass("map_tips_city_2");
269 275
270 - if ($('.map_tips').is(':hidden')) {  
271 - $('.map_tips').show(); 276 + //根据鼠标位置定位
  277 + let layerX = params.event.offsetX;
  278 + let layerY = params.event.offsetY;
  279 + //随鼠标移动
  280 + if(name == '湖州市' || name == '嘉兴市'){
  281 + $('.map_tips').css({
  282 + 'top': layerY + 10,
  283 + 'left': layerX + 15
  284 + });
  285 + }else{
  286 + $('.map_tips').css({
  287 + 'top': layerY -120,
  288 + 'left': layerX + 15
  289 + });
  290 + }
  291 + }else{
  292 + $('.map_tips').hide();
272 } 293 }
273 - //城市名称从左到右滑入效果  
274 - $('.map_tips_res').addClass("map_tips_city_0");  
275 - $('.map_tips_sxll').addClass("map_tips_city_1");  
276 - $('.map_tips_xxll').addClass("map_tips_city_2");  
277 -  
278 - //根据鼠标位置定位 294 + });
  295 + //鼠标移动，提示信息随鼠标走
  296 + map_chart.on('mousemove', 'geo', function (params) {
  297 + let name = params.name;
  298 + //随鼠标移动
279 let layerX = params.event.offsetX; 299 let layerX = params.event.offsetX;
280 let layerY = params.event.offsetY; 300 let layerY = params.event.offsetY;
281 //随鼠标移动 301 //随鼠标移动
@@ -290,29 +310,8 @@ export default { @@ -290,29 +310,8 @@ export default {
290 'left': layerX + 15 310 'left': layerX + 15
291 }); 311 });
292 } 312 }
293 - }else{  
294 - $('.map_tips').hide();  
295 - }  
296 - });  
297 - //鼠标移动，提示信息随鼠标走  
298 - map_chart.on('mousemove', 'geo', function (params) {  
299 - let name = params.name;  
300 - //随鼠标移动  
301 - let layerX = params.event.offsetX;  
302 - let layerY = params.event.offsetY;  
303 - //随鼠标移动  
304 - if(name == '湖州市' || name == '嘉兴市'){  
305 - $('.map_tips').css({  
306 - 'top': layerY + 10,  
307 - 'left': layerX + 15  
308 - });  
309 - }else{  
310 - $('.map_tips').css({  
311 - 'top': layerY -120,  
312 - 'left': layerX + 15  
313 - });  
314 - }  
315 - }); 313 + });
  314 + },500)
316 } 315 }
317 }); 316 });
318 }); 317 });
@@ -322,5 +321,10 @@ export default { @@ -322,5 +321,10 @@ export default {
322 convertData, 321 convertData,
323 convertToLineData 322 convertToLineData
324 } 323 }
  324 + },
  325 +
  326 + onMounted(){
  327 +
325 } 328 }
  329 +
326 } 330 }
@@ -4,6 +4,6 @@ @@ -4,6 +4,6 @@
4 4
5 </div> 5 </div>
6 <div class="performance-lineChart"> 6 <div class="performance-lineChart">
7 - <LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance"></LineChart> 7 + <LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance" v-if="seriesDataPerformance"></LineChart>
8 </div> 8 </div>
9 </div> 9 </div>
@@ -21,6 +21,15 @@ export default { @@ -21,6 +21,15 @@ export default {
21 21
22 // 挂载完 22 // 挂载完
23 Vue.onMounted(() => { 23 Vue.onMounted(() => {
  24 + let data3=[350, 350, 350, 350, 350, 350, 350];
  25 + let data4=[220, 182, 191, 234, 290, 330, 310];
  26 + let data2=[100, 100, 100, 100, 100, 100, 100];
  27 + let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
  28 +
  29 + let min1=proxy.calMin([data1,data2]);
  30 + let max1=proxy.calMax([data1,data2]);
  31 + let min2=proxy.calMin([data3,data4]);
  32 + let max2=proxy.calMax([data3,data4]);
24 //业务性能指标y序列 33 //业务性能指标y序列
25 proxy.yAxisDataPerformance=[ 34 proxy.yAxisDataPerformance=[
26 { 35 {
@@ -29,6 +38,15 @@ export default { @@ -29,6 +38,15 @@ export default {
29 axisLabel: { 38 axisLabel: {
30 formatter: '{value} %'//以百分比显示 39 formatter: '{value} %'//以百分比显示
31 }, 40 },
  41 + splitLine:{
  42 + lineStyle: {
  43 + color:'#0a1b31'
  44 + }
  45 + },
  46 + min:0,
  47 + max:100,
  48 + splitNumber:10,
  49 + interval:(100-0)/10
32 }, { 50 }, {
33 name: '单位:万', 51 name: '单位:万',
34 type: 'value', 52 type: 'value',
@@ -36,6 +54,15 @@ export default { @@ -36,6 +54,15 @@ export default {
36 show: true, 54 show: true,
37 interval: 'right',//居中显示 55 interval: 'right',//居中显示
38 }, 56 },
  57 + splitLine:{
  58 + lineStyle: {
  59 + color:'#0a1b31'
  60 + }
  61 + },
  62 + min:min2,
  63 + max:max2,
  64 + splitNumber:10,
  65 + interval:(max2-min2)/10
39 }, 66 },
40 ] 67 ]
41 //业务双y轴数据 68 //业务双y轴数据
@@ -46,19 +73,30 @@ export default { @@ -46,19 +73,30 @@ export default {
46 smooth:true, 73 smooth:true,
47 // stack: 'Total', 74 // stack: 'Total',
48 show:false, 75 show:false,
49 - data:[120, 132, 101, 134, 90, 230, 210], 76 + data:data3,
50 yAxisIndex:1, 77 yAxisIndex:1,
51 showSymbol:false, 78 showSymbol:false,
52 itemStyle : { 79 itemStyle : {
53 normal : { 80 normal : {
54 color:"#97d5f4",//tooltip里的小圆点颜色 81 color:"#97d5f4",//tooltip里的小圆点颜色
55 lineStyle:{ 82 lineStyle:{
56 - color:'#97d5f4' 83 + color:'#97d5f4',
  84 + width:1
57 } 85 }
58 } 86 }
59 }, 87 },
60 areaStyle: { 88 areaStyle: {
61 - color:'rgba(151,213,244,0.1)' 89 + // color:'rgba(151,213,244,0.4)',
  90 + normal:{
  91 + color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
  92 + offset: 0,
  93 + color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
  94 + }, {
  95 + offset: 1,
  96 + color: 'rgba(151,213,244,0.1)'
  97 + }])
  98 + }
  99 +
62 }, 100 },
63 }, 101 },
64 { 102 {
@@ -67,19 +105,20 @@ export default { @@ -67,19 +105,20 @@ export default {
67 smooth:true, 105 smooth:true,
68 // stack: 'Total', 106 // stack: 'Total',
69 show:false, 107 show:false,
70 - data:[120, 132, 101, 134, 90, 230, 210], 108 + data:data1,
71 yAxisIndex:0, 109 yAxisIndex:0,
72 showSymbol:false, 110 showSymbol:false,
73 itemStyle : { 111 itemStyle : {
74 normal : { 112 normal : {
75 color:"#efe0a7",//tooltip里的小圆点颜色 113 color:"#efe0a7",//tooltip里的小圆点颜色
76 lineStyle:{ 114 lineStyle:{
77 - color:'#efe0a7' 115 + color:'#efe0a7',
  116 + width:1
78 } 117 }
79 } 118 }
80 }, 119 },
81 areaStyle: { 120 areaStyle: {
82 - color:'rgba(239,224,167,0.2)' 121 + color:'rgba(239,224,167,0)'
83 }, 122 },
84 }, 123 },
85 { 124 {
@@ -88,19 +127,20 @@ export default { @@ -88,19 +127,20 @@ export default {
88 smooth:true, 127 smooth:true,
89 // stack: 'Total', 128 // stack: 'Total',
90 show:false, 129 show:false,
91 - data:[220, 182, 191, 234, 290, 330, 310], 130 + data:data2,
92 yAxisIndex:0, 131 yAxisIndex:0,
93 showSymbol:false, 132 showSymbol:false,
94 itemStyle : { 133 itemStyle : {
95 normal : { 134 normal : {
96 color:"#e5abd1",//tooltip里的小圆点颜色 135 color:"#e5abd1",//tooltip里的小圆点颜色
97 lineStyle:{ 136 lineStyle:{
98 - color:'#e5abd1' 137 + color:'#e5abd1',
  138 + width:1
99 } 139 }
100 } 140 }
101 }, 141 },
102 areaStyle: { 142 areaStyle: {
103 - color:'rgba(229,171,209,0.3)' 143 + color:'rgba(229,171,209,0)'
104 }, 144 },
105 }, 145 },
106 { 146 {
@@ -109,25 +149,61 @@ export default { @@ -109,25 +149,61 @@ export default {
109 smooth:true, 149 smooth:true,
110 // stack: 'Total', 150 // stack: 'Total',
111 show:false, 151 show:false,
112 - data:[150,232,201,154,190,330,410], 152 + data:data4,
113 yAxisIndex:1, 153 yAxisIndex:1,
114 showSymbol:false, 154 showSymbol:false,
115 itemStyle : { 155 itemStyle : {
116 normal : { 156 normal : {
117 color:"#97aaff",//tooltip里的小圆点颜色 157 color:"#97aaff",//tooltip里的小圆点颜色
118 lineStyle:{ 158 lineStyle:{
119 - color:'#97aaff' 159 + color:'#97aaff',
  160 + width:1,
120 } 161 }
121 } 162 }
122 }, 163 },
123 areaStyle: { 164 areaStyle: {
124 - color:'rgba(151,170,255,0.4)' 165 + color:'rgba(151,170,255,0)'
125 }, 166 },
126 } 167 }
127 ] 168 ]
128 }) 169 })
  170 + //计算最大值
  171 + const calMax=(arr)=>{
  172 + let max=0;
  173 + arr.forEach((el)=>{
  174 + el.forEach((el1)=>{
  175 + if(!(el1 === undefined || el1 === '')){
  176 + if(max<el1){
  177 + max=el1;
  178 + }
  179 + }
  180 + })
  181 + })
  182 + let maxint=Math.ceil(max/9.5);
  183 + let maxval=maxint * 10;//让显示的刻度是整数
  184 + return maxval;
  185 + }
  186 + //计算最小值
  187 + const calMin=(arr)=>{
  188 + let min=0;
  189 + arr.forEach((el)=>{
  190 + el.forEach((el1)=>{
  191 + if(!(el1 === undefined || el1 === '')){
  192 + if(min>el1){
  193 + min=el1;
  194 + }
  195 + }
  196 + })
  197 + })
  198 + let minint=Math.floor(min/10);
  199 + let minval=minint * 10;//让显示的刻度是整数
  200 + return minval;
  201 + }
  202 +
129 203
130 return{ 204 return{
  205 + calMax,
  206 + calMin
131 } 207 }
132 } 208 }
133 } 209 }
@@ -8,30 +8,30 @@ @@ -8,30 +8,30 @@
8 <!-- <h3 class="medium">{{ item }}</h3>--> 8 <!-- <h3 class="medium">{{ item }}</h3>-->
9 <div class="medium "> 9 <div class="medium ">
10 <ul class="statisticsItem"> 10 <ul class="statisticsItem">
11 - <li class="listItem" v-for="itemData in 3 "> 11 + <li class="listItem" v-for="itemData in resourceStatisticsData ">
12 <div class="listItem-health"> 12 <div class="listItem-health">
13 <div class="healthList"> 13 <div class="healthList">
14 <span class="listText">优</span> 14 <span class="listText">优</span>
15 - <span class="listNum">4</span>  
16 - <span class="listPercent">100%</span> 15 + <span class="listNum">{{itemData.excellentNum}}</span>
  16 + <span class="listPercent">{{itemData.excellentPercent}}%</span>
17 </div> 17 </div>
18 <div class="healthList"> 18 <div class="healthList">
19 <span class="listText listText2">良</span> 19 <span class="listText listText2">良</span>
20 - <span class="listNum">0</span>  
21 - <span class="listPercent">0%</span> 20 + <span class="listNum">{{itemData.goodNum}}</span>
  21 + <span class="listPercent">{{itemData.goodPercent}}%</span>
22 </div> 22 </div>
23 <div class="healthList"> 23 <div class="healthList">
24 <span class="listText listText3">中</span> 24 <span class="listText listText3">中</span>
25 - <span class="listNum">0</span>  
26 - <span class="listPercent">0%</span> 25 + <span class="listNum">{{itemData.middleNum}}</span>
  26 + <span class="listPercent">{{itemData.middlePercent}}%</span>
27 </div> 27 </div>
28 </div> 28 </div>
29 - <div class="listItem-num">299</div> 29 + <div class="listItem-num">{{itemData.resTypeAllNum}}</div>
30 <div class="listItem-icon"> 30 <div class="listItem-icon">
31 - <i class="iconImg"><img src="/vue3/src/assets/images/zjdp/icon-sys.png" alt=""></i> 31 + <i class="iconImg"><img :src="'/vue3/src/assets/images/zjdp/icon-'+itemData.code+'.png'" alt=""></i>
32 </div> 32 </div>
33 <div class="listItem-icon-name"> 33 <div class="listItem-icon-name">
34 - 操作系統</i> 34 + {{itemData.name}}</i>
35 </div> 35 </div>
36 </li> 36 </li>
37 </ul> 37 </ul>
@@ -5,8 +5,9 @@ export default { @@ -5,8 +5,9 @@ export default {
5 data(){ 5 data(){
6 return { 6 return {
7 domainName:sessionStorage.getItem('domainName'), 7 domainName:sessionStorage.getItem('domainName'),
8 - apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',  
9 - resourceStatisticsData:'' 8 + apiUrl:'/api-web/bigScreen/getResTotal',
  9 + resourceStatisticsData:'',
  10 + busId:'53bebbd79f384f619513b50666ea1d48'
10 } 11 }
11 }, 12 },
12 setup(props, {attrs, slots, emit}) { 13 setup(props, {attrs, slots, emit}) {
@@ -14,6 +15,13 @@ export default { @@ -14,6 +15,13 @@ export default {
14 15
15 // 挂载完 16 // 挂载完
16 Vue.onMounted(() => { 17 Vue.onMounted(() => {
  18 + $.get(proxy.domainName +proxy.apiUrl+'?busId='+proxy.busId,function (res) {
  19 + const data = res;
  20 + if(data && data.data){
  21 + proxy.resourceStatisticsData=data.data;
  22 + }
  23 +
  24 + })
17 }) 25 })
18 26
19 return{ 27 return{
@@ -4,12 +4,12 @@ @@ -4,12 +4,12 @@
4 <img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt=""> 4 <img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt="">
5 </div> 5 </div>
6 6
7 - <div class="title-left">  
8 - <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog"> 7 + <div class="title-left title-date">
  8 + <img src="/vue3/src/assets/images/zjdp/time-icon.png" :style="timelogoStyle" class="timelog">
9 <span :style="datetimeStyle" >{{dateTime}}</span> 9 <span :style="datetimeStyle" >{{dateTime}}</span>
10 </div> 10 </div>
11 </header> 11 </header>
12 - <div class="screen-body"> 12 + <div class="screen-body zj-screen">
13 <section class="screen-left left-40" > 13 <section class="screen-left left-40" >
14 <div class="left-top"> 14 <div class="left-top">
15 <!--省局网络拓扑--> 15 <!--省局网络拓扑-->
@@ -44,12 +44,14 @@ @@ -44,12 +44,14 @@
44 <!--折线图--> 44 <!--折线图-->
45 <DeclareLine></DeclareLine> 45 <DeclareLine></DeclareLine>
46 <!--柱状图--> 46 <!--柱状图-->
47 - <BarChart></BarChart> 47 + <MonitoringMonth></MonitoringMonth>
48 </div> 48 </div>
49 </div> 49 </div>
50 <div class="screen-right-bottom"> 50 <div class="screen-right-bottom">
51 <!--导航轮播--> 51 <!--导航轮播-->
52 - <div class="screen-nav"></div> 52 + <div class="screen-nav">
  53 + <NavTabs></NavTabs>
  54 + </div>
53 <div class="screen-res-performance"> 55 <div class="screen-res-performance">
54 <div class="screen-res"> 56 <div class="screen-res">
55 <!--系统资源统计--> 57 <!--系统资源统计-->
@@ -26,11 +26,14 @@ export default { @@ -26,11 +26,14 @@ export default {
26 'DeclareLine': Vue.defineAsyncComponent( 26 'DeclareLine': Vue.defineAsyncComponent(
27 () => myImport('views/zjdaping/components/declareLine/index') 27 () => myImport('views/zjdaping/components/declareLine/index')
28 ), 28 ),
29 - 'BarChart': Vue.defineAsyncComponent(  
30 - () => myImport('views/zjdaping/components/barChart/index') 29 + 'MonitoringMonth': Vue.defineAsyncComponent(
  30 + () => myImport('views/zjdaping/components/monitoringMonth/index')
31 ), 31 ),
32 'Performance': Vue.defineAsyncComponent( 32 'Performance': Vue.defineAsyncComponent(
33 () => myImport('views/zjdaping/components/performance/index') 33 () => myImport('views/zjdaping/components/performance/index')
  34 + ),
  35 + 'NavTabs': Vue.defineAsyncComponent(
  36 + () => myImport('views/zjdaping/components/navTabs/index')
34 ) 37 )
35 }, 38 },
36 data() { 39 data() {
@@ -44,21 +47,25 @@ export default { @@ -44,21 +47,25 @@ export default {
44 const {proxy} = Vue.getCurrentInstance(); 47 const {proxy} = Vue.getCurrentInstance();
45 48
46 let datetimeStyle=()=>{// 左上角日期时间大小 49 let datetimeStyle=()=>{// 左上角日期时间大小
47 - fontSize: this.titleFontSize / 3 + 'px';  
48 - marginLeft: this.titleFontSize / 5 + 'px' 50 + fontSize: proxy.titleFontSize / 3 + 'px';
  51 + marginLeft: proxy.titleFontSize / 5 + 'px'
  52 + }
  53 + let timeFormat =(number)=> {
  54 + return number.length == 1 ? ('0' + number) : number
49 } 55 }
50 56
51 // 挂载完 57 // 挂载完
52 Vue.onMounted(() => { 58 Vue.onMounted(() => {
53 // 获取当前系统时间 59 // 获取当前系统时间
54 let myDate = new Date(); 60 let myDate = new Date();
55 - // proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + ''); 61 + proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + '');
56 62
57 }) 63 })
58 64
59 65
60 return { 66 return {
61 - datetimeStyle 67 + datetimeStyle,
  68 + timeFormat
62 } 69 }
63 } 70 }
64 } 71 }