monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit bfc690ecd6136c35e493a82bc54eb33ce345c18e 1 parent de8bcde1

今日申报/本月申报组件(80%) 及折线图，柱状图(50%)

Inline Side-by-side
Showing 22 changed files with 861 additions and 26 deletions
@@ -27,3 +27,7 @@ @@ -27,3 +27,7 @@
27 @import "../css/datacenter.css"; 27 @import "../css/datacenter.css";
28 28
29 @import "../css/assetsOverview.css"; 29 @import "../css/assetsOverview.css";
  30 +
  31 +@import "../css/declare.css";
  32 +
  33 +@import "../css/digital.css";
@@ -184,7 +184,7 @@ @@ -184,7 +184,7 @@
184 } 184 }
185 185
186 .yxqk .items li img { 186 .yxqk .items li img {
187 - opacity: .5; 187 + /*opacity: .5;*/
188 position: absolute; 188 position: absolute;
189 top: 8px; 189 top: 8px;
190 left: 8px; 190 left: 8px;
@@ -261,7 +261,7 @@ @@ -261,7 +261,7 @@
261 .yxqk__pie--bad::before { 261 .yxqk__pie--bad::before {
262 background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png'); 262 background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png');
263 } 263 }
264 -.yxqk__pie span::before { 264 +.yxqk__pie::before {
265 content: ''; 265 content: '';
266 display: block; 266 display: block;
267 width: 278px; 267 width: 278px;
@@ -14,10 +14,10 @@ @@ -14,10 +14,10 @@
14 14
15 .sjzx .item h5 { 15 .sjzx .item h5 {
16 color: #fff; 16 color: #fff;
17 - font-size: .2rem; 17 + font-size: 11px;
18 text-align: center; 18 text-align: center;
19 position:absolute; 19 position:absolute;
20 - bottom:0; 20 + bottom:-16px;
21 left:14px; 21 left:14px;
22 } 22 }
23 23
  1 +.declare-container{
  2 + background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;
  4 + height: 100%;
  5 + overflow: hidden;
  6 + max-width:323px;
  7 +}
  8 +.declare-total{
  9 + font-size: 16px;
  10 + color:#ffffff;
  11 + text-align: center;
  12 + /*padding: 5px;*/
  13 + display: flex;
  14 + justify-content: center;
  15 + align-items: center;
  16 + background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
  17 + background-position: center;
  18 + background-repeat: no-repeat;
  19 + margin-top:20px;
  20 + height: 53px;
  21 +}
  22 +.total-title{
  23 + margin-right: 10px;
  24 +}
  25 +.total-num{
  26 + font-size: 22px;
  27 + color:#4fc9fc;
  28 +}
  29 +.declaration-rate{
  30 + font-size:14px;
  31 + color:#d5e1f5;
  32 + display: flex;
  33 + justify-content: space-around;
  34 +}
  35 +.proportion-num{
  36 + font-size: 16px;
  37 + color:#4fc9fc;
  38 +}
  39 +.declare-today{
  40 + margin-top:20px;
  41 +}
  42 +.declare-title{
  43 + color: #fff;
  44 + font-size: 14px;
  45 + display: flex;
  46 + justify-content: space-between;
  47 + align-items: flex-end;
  48 + padding: 0 5px;
  49 + margin-bottom: 8px;
  50 +}
  51 +.declare-bg{
  52 + width: 167px;
  53 + height: 27px;
  54 + background-repeat: no-repeat;
  55 +
  56 +}
  57 +.icon-proportion{
  58 + width:6px;
  59 + height:20px;
  60 + background-color: #4fc9fc;
  61 + display: inline-block;
  62 + border-radius: 3px;
  63 + margin: 0 2px;
  64 +}
  65 +.porportion-opactiy{
  66 + opacity:.5 ;
  67 +}
  68 +.declare-con{
  69 + font-size: 12px;
  70 +}
  71 +.declare-bg-today{
  72 + background-image: url("/vue3/src/assets/images/zjdp/declare-today.png");
  73 +}
  74 +.declare-bg-month{
  75 + background-image: url("/vue3/src/assets/images/zjdp/declare-month.png");
  76 +}
  77 +.volume-today{
  78 + background-image: url("/vue3/src/assets/images/zjdp/volume-today.png");
  79 +}
  80 +.volume-today-container{
  81 + font-size: 14px;
  82 + color:#FFFFFF;
  83 + text-align: left;
  84 + padding:5px;
  85 + display: flex;
  86 + justify-content: flex-start;
  87 + align-items: center;
  88 +}
  89 +.volume-proportion{
  90 + margin:0 15px;
  91 + width:130px;
  92 + height:4px;
  93 + background: linear-gradient(to right ,#FFFFFF,#97d5f4);
  94 + border-radius: 3px;
  95 + display: inline-block;
  96 +}
  97 +.volume-proportion-doc{
  98 + background: linear-gradient(to right ,#FFFFFF,#efe0a7);
  99 +}
  100 +.volume-proportion-net{
  101 + background: linear-gradient(to right ,#FFFFFF,#e5abd1);
  102 +}
  103 +.num-doc{
  104 + color:#efe0a7;
  105 +}
  106 +.num-net{
  107 + color:#e5abd1;
  108 +}
  1 +/*大屏电子数字字体*/
  2 +@font-face {
  3 + font-family: 'DSDIG';
  4 + src: url('../../src/assets/font/DS-DIGI.ttf');
  5 + font-display: swap;
  6 +}
  7 +.digital {
  8 + margin-right: 8px;
  9 +}
  10 +.digital .box-item {
  11 + position: relative;
  12 + font-size: 44px;
  13 + line-height: 31px;
  14 + text-align: center;
  15 + list-style: none;
  16 + color: #2D7CFF;
  17 + writing-mode: vertical-lr;
  18 + text-orientation: upright;
  19 + /*文字禁止编辑*/
  20 + -moz-user-select: none; /*火狐*/
  21 + -webkit-user-select: none; /*webkit浏览器*/
  22 + -ms-user-select: none; /*IE10*/
  23 + -khtml-user-select: none; /*早期浏览器*/
  24 + user-select: none;
  25 + /* overflow: hidden; */
  26 +}
  27 +.digital .number-item {
  28 + width: 34px;
  29 + height: 58px;
  30 + color: #FFFFFF;
  31 + font-family: DSDIG;/*/使用自定义字体*/
  32 + list-style: none;
  33 + margin-right: 10px;
  34 + background: rgba(6,27,114,.7);
  35 + border-radius:4px;
  36 + box-shadow: 0px 0px 10px #0FDAFF inset;
  37 + -moz-box-shadow: 0px 0px 10px #0FDAFF inset;
  38 + -webkit-box-shadow: 0px 0px 10px #0FDAFF inset;
  39 + border: 2px solid #0FDAFF;
  40 + /*border-image: linear-gradient(#0FDAFF,#0D278E) 1 1;*/
  41 + position: relative;
  42 +}
  43 +
  44 +.digital .number-item-comma:after{
  45 + content: ",";
  46 + position: absolute;
  47 + bottom: 0;
  48 + right: -22px;
  49 +}
  50 +.digital .number-item-color{
  51 + color:#8A9CAE;
  52 +}
  53 +
  54 +.digital .number-item span {
  55 + position: relative;
  56 + display: inline-block;
  57 + margin-right: 10px;
  58 + width: 100%;
  59 + height: 100%;
  60 + writing-mode: vertical-rl;
  61 + text-orientation: upright;
  62 + overflow: hidden;
  63 +}
  64 +.digital .number-item i {
  65 + font-style: normal;
  66 + position: absolute;
  67 + top: 8px;
  68 + left: 50%;
  69 + transform: translate(-50%,0);
  70 + transition: transform 1s ease-in-out;
  71 + letter-spacing: 10px;
  72 +}
  73 +.number-item:last-child {
  74 + margin-right: 0;
  75 +}
@@ -140,3 +140,7 @@ body{font-size: 15px;} @@ -140,3 +140,7 @@ body{font-size: 15px;}
140 margin:12px 6px 0 6px; 140 margin:12px 6px 0 6px;
141 border-bottom:2px solid #0C4493; 141 border-bottom:2px solid #0C4493;
142 } 142 }
  143 +.lineChart,.barChart{
  144 + background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
  145 + background-position: center;
  146 +}
1 export default { 1 export default {
2 - name: 'dataCenter', 2 + name: 'assetOverview',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 - // Swiper,SwiperSlide  
6 }, 5 },
7 data(){ 6 data(){
8 return { 7 return {
@@ -24,20 +23,16 @@ export default { @@ -24,20 +23,16 @@ export default {
24 if(data && data.healthStatus){ 23 if(data && data.healthStatus){
25 if(data.healthStatus == '2'){//问题 24 if(data.healthStatus == '2'){//问题
26 proxy.pieClass="yxqk__pie--worse"; 25 proxy.pieClass="yxqk__pie--worse";
27 - // $("#all_resource_status").removeClass("yxqk__pie--good").removeClass("yxqk__pie--bad").addClass("yxqk__pie--worse");  
28 } else if(data.healthStatus == '1'){//严重问题 26 } else if(data.healthStatus == '1'){//严重问题
29 proxy.pieClass="yxqk__pie--bad"; 27 proxy.pieClass="yxqk__pie--bad";
30 - // $("#all_resource_status").removeClass("yxqk__pie--worse").removeClass("yxqk__pie--good").addClass("yxqk__pie--bad");  
31 }else{ 28 }else{
32 proxy.pieClass="yxqk__pie--good"; 29 proxy.pieClass="yxqk__pie--good";
33 30
34 } 31 }
35 - // $("#yxjk_resource_health_text").text(data.healthStatusName);  
36 proxy.healthStatusName=data.healthStatusName; 32 proxy.healthStatusName=data.healthStatusName;
37 } 33 }
38 //资源总量 34 //资源总量
39 if(data && data.total){ 35 if(data && data.total){
40 - // $("#yxjk_total_resource").text(data.total);  
41 proxy.totalData=data.total; 36 proxy.totalData=data.total;
42 } 37 }
43 //分类总量 38 //分类总量
@@ -64,18 +59,11 @@ export default { @@ -64,18 +59,11 @@ export default {
64 showData.push({resTypeName:"存储",num:storage,code:'STORAGE'}); 59 showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
65 showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'}); 60 showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
66 //类型统计 61 //类型统计
67 - // var html = $("#yxjk_resource_type_count_id_tmpl").render(showData.slice(0,4));  
68 - // $("#yxjk_resource_type_count_id").html(html); 62 +
69 proxy.assetOverviewData=showData; 63 proxy.assetOverviewData=showData;
70 64
71 //悬浮提示 65 //悬浮提示
72 - // var html = $("#yxjk_resource_type_count_tips_tmpl").render(showData);  
73 - // $("#yxjk_resource_type_count_tips").html(html);  
74 - /* $(".yxqk_tips_div").hover(function () {  
75 - $(".yxqk_tips_container").show();  
76 - },function () {  
77 - $(".yxqk_tips_container").hide();  
78 - });*/ 66 +
79 } 67 }
80 }); 68 });
81 69
  1 +<div class="barChart">
  2 + <div id="bar-echart" style="width:100%;height:700px;"></div>
  3 +</div>
  1 +export default {
  2 + name: 'barChart',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + domainName:'http://192.168.0.159:8080/api-web',
  9 +
  10 + }
  11 + },
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + // 挂载完
  15 + Vue.onMounted(() => {
  16 + const chartDom = document.getElementById('bar-echart');
  17 + const myChart = echarts.init(chartDom);
  18 + let option;
  19 +
  20 + option = {
  21 + title: {
  22 + text: '近30天访问量',
  23 + x:'center',
  24 + y:'7px',
  25 + textStyle:{
  26 + color:"#ffffff",
  27 + fontSize:14
  28 + }
  29 + },
  30 + xAxis: {
  31 + type: 'category',
  32 + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  33 + axisLine:{
  34 + show:true,//是否显示坐标线
  35 + lineStyle: {
  36 + color:'#0a1b31'//坐标线颜色
  37 + }
  38 + },
  39 + axisTick: {
  40 + show: false //是否显示坐标刻度
  41 + },
  42 + axisLabel:{
  43 + color:'#ffffff',
  44 + fontSize: 12
  45 + },
  46 + },
  47 + yAxis: {
  48 + type: 'value',
  49 + splitLine:{
  50 + show:false,
  51 +
  52 + },
  53 + axisLine:{
  54 + show:true,//是否显示坐标线
  55 + lineStyle: {
  56 + color:'#0a1b31'//坐标线颜色
  57 + }
  58 + },
  59 + axisLabel:{
  60 + 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"
  83 + }
  84 + }
  85 + }
  86 + ]
  87 + };
  88 +
  89 + option && myChart.setOption(option);
  90 + })
  91 + return{
  92 +
  93 + }
  94 + }
  95 +}
  1 +<div class="declare-container" id="declare">
  2 + <!--今日申报-->
  3 + <div class="declare-left">
  4 + <div class="declare-total">
  5 + <span class="total-title">本月应申报</span>
  6 + <span class="total-num">{{reportable}}</span>
  7 + </div>
  8 + <div class="declaration-rate">
  9 + <span class="rate-title">本月申报率</span>
  10 + <span class="proportion-bar">
  11 + <i :class="['icon-proportion',{'porportion-opactiy':i>opactiyNum}]" v-for="i in opactiyNumTotal"></i>
  12 + </span>
  13 + <span class="proportion-num">{{declarationRate}}</span>
  14 + </div>
  15 + <div class="declare-today">
  16 + <div class="declare-title">
  17 + <div class="declare-bg declare-bg-today"></div>
  18 + <div class="declare-con">
  19 + <span class="declare-text">本日申报未导入:</span>
  20 + <span class="declare-num">{{reportableToday}}</span>
  21 + </div>
  22 + </div>
  23 + <div class="declare-today-num">
  24 + <Digital :numm="56631" :numLen="7"></Digital>
  25 + </div>
  26 + </div>
  27 + <div class="declare-today">
  28 + <div class="declare-title">
  29 + <div class="declare-bg declare-bg-month"></div>
  30 + <div class="declare-con">
  31 + <span class="declare-text">本月未申报:</span>
  32 + <span class="declare-num">{{reportableMonth}}</span>
  33 + </div>
  34 + </div>
  35 + <div class="declare-today-num">
  36 + <Digital :numm="5640397" :numLen="7"></Digital>
  37 + </div>
  38 + </div>
  39 + <div class="declare-today">
  40 + <div class="declare-title">
  41 + <div class="declare-bg volume-today"></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>
  47 + </div>
  48 + <div class="volume-today-container">
  49 + <span class="volume-text">涉税文书</span>
  50 + <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
  51 + <span class="volume-num num-doc">{{volumeNumDoc}}</span>
  52 + </div>
  53 + <div class="volume-today-container">
  54 + <span class="volume-text">网上申报</span>
  55 + <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
  56 + <span class="volume-num num-net">{{volumeNumNet}}</span>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="declare-right">
  61 +
  62 + </div>
  63 +
  64 +</div>
  1 +export default {
  2 + name: 'declare',
  3 + template: '',
  4 + components: {
  5 + 'Digital': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/digital/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:'http://192.168.0.245:8180/api-web',
  12 + declareData:'',
  13 + reportable:0,//本月应申报
  14 + reportableToday:0,//本日申报未导入
  15 + reportableMonth:0, //本月未申报数
  16 + declarationRate:0.94,//申报率
  17 + volumeNumDoc:0,//涉税文书业务量
  18 + volumeNumNet:0,//网上申报业务量
  19 + volumeNum:0, //业务量数
  20 + styleVolume:'',//业务量style样式
  21 + styleVolumeDoc:'',
  22 + styleVolumeNet:'',
  23 + opactiyNum:0, //不透明显示的个数
  24 + opactiyNumMath:0, //不透明显示的个数中间量
  25 + opactiyNumTotal:20//总透明数
  26 + }
  27 + },
  28 + setup(props, {attrs, slots, emit}) {
  29 + const {proxy} = Vue.getCurrentInstance();
  30 + // 挂载完
  31 + Vue.onMounted(() => {
  32 + proxy.reportable=proxy.numberFilter('1006105',-1);
  33 + proxy.reportableToday=proxy.numberFilter('1006506',-1);
  34 + proxy.reportableMonth=proxy.numberFilter('2848',-1);
  35 +
  36 + proxy.volumeNum=proxy.numberFilter('5765404',-1);
  37 + proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);
  38 + proxy.volumeNumNet=proxy.numberFilter('698423',-1);
  39 +
  40 + proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal
  41 +
  42 + if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
  43 + proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
  44 +
  45 + }else{
  46 + proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
  47 +
  48 + }
  49 + console.log(proxy.opactiyNumMath)
  50 + proxy.declarationRate=proxy.declarationRate*100+'%';
  51 +
  52 + let num1=5765404;
  53 + let num2=5458044;
  54 + let num3=698423;
  55 +
  56 + proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'
  57 + proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'
  58 + proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px'
  59 +
  60 +
  61 +
  62 +
  63 + })
  64 + const eleWidthNum=(num,num1,num2,num3)=>{
  65 + let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
  66 + let widthNum=Math.ceil((num*150)/maxNum)
  67 + console.log("aaa",num,widthNum)
  68 + let widthData=0;
  69 + if(widthNum!='' && widthNum!=null && widthNum!=undefined){
  70 + widthData=widthNum;
  71 + }
  72 + return widthData;
  73 + }
  74 +
  75 + const numberFilter = function (val,places = 2) {
  76 + //value为传进来的数据 比如 12345.6789
  77 + //places 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
  78 + //数据校验
  79 + if (parseFloat(val).toString() == 'NaN') return '0.00'
  80 + // 将数值截取
  81 + let num = val.toString().split('.')
  82 + let zs = num[0]
  83 + let xs = num[1]
  84 + // 整数部分处理，增加,
  85 + const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  86 + if (xs != null) {
  87 + if(places == 0){
  88 + return intPartFormat + '.' + xs
  89 + }else if(places == -1){
  90 + return intPartFormat
  91 + }else{
  92 + return intPartFormat +'.' + xs.substr(0,places)
  93 + }
  94 + } else {
  95 + return intPartFormat
  96 + }
  97 + }
  98 +
  99 + return{
  100 + numberFilter,
  101 + eleWidthNum
  102 + }
  103 + }
  104 +}
  1 +<div class="digital">
  2 + <!-- 数字滚动显示-->
  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 }"
  5 + v-for="(item,index) in orderNum"
  6 + :key="index" :style="cStyle">
  7 + <span v-if="!isNaN(item)">
  8 + <i :id="`numberItem${index}`" :ref="`numberItem${index}`" :style='iStyle'>0123456789</i>
  9 + </span>
  10 + <span class="comma" v-else>{{item}}</span>
  11 + </li>
  12 + </div>
  13 +
  14 +</div>
  1 +export default {
  2 + name: 'digital',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + numDiff:0//补位0的个数
  9 + }
  10 + },
  11 + props:['numm','numLen'],
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + const {numm, numLen} = Vue.toRefs(props);
  15 + const orderNum = Vue.ref([]);
  16 + // 处理数字
  17 + // numm: 传入的数字 numLen: 默认显示几位数
  18 + let numVal=numm.value+'';
  19 + proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length);
  20 + const toOrderNum = (num) => {
  21 +
  22 + num = num.toString();
  23 + if (num.length < numLen.value) {
  24 + num = '0' + num // 如未满定义的位数，添加"0"补位
  25 + toOrderNum(num) // 递归添加"0"补位
  26 + } else if (num.length === numLen.value) {
  27 + orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
  28 + } else {
  29 + // 数字超过八位显示异常
  30 + // this.$message('数字过大，显示异常')
  31 + }
  32 +
  33 + }
  34 + toOrderNum(numm.value)
  35 + Vue.watch(numm, (newVal) => {
  36 + toOrderNum(newVal)
  37 + })
  38 + // 挂载完
  39 + Vue.onMounted(() => {
  40 + setTimeout(() => {
  41 + proxy.setNumberTransform()
  42 +
  43 + },200)
  44 +
  45 + })
  46 + const setNumberTransform=()=> {
  47 + // 结合CSS 对数字字符进行滚动,显示数量
  48 + console.log("test",proxy.orderNum.length)
  49 + console.log("aaa",proxy.$refs)
  50 +
  51 + for (let index = 0; index < proxy.orderNum.length; index++) {
  52 + const ele = proxy.$refs[`numberItem${index}`];
  53 +
  54 + ele.style.transform = `translate(-50%, -${proxy.orderNum[index] * 10}%)`
  55 + }
  56 + }
  57 + return{
  58 + orderNum,
  59 + toOrderNum,
  60 + setNumberTransform
  61 + }
  62 + },
  63 + // 如果中途数据有更新，重新执行动画
  64 + watch: {
  65 + numm() {
  66 + this.setNumberTransform()
  67 + }
  68 + }
  69 +}
  1 +<div class="lineChart">
  2 + <div id="line-echart" style="width:100%;height:700px;"></div>
  3 +</div>
  1 +export default {
  2 + name: 'lineChart',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + domainName:'http://192.168.0.245:8180/api-web',
  9 + yAxisData:'',//y序列的数据
  10 + seriesData:[],//y轴数据
  11 +
  12 + }
  13 + },
  14 + setup(props, {attrs, slots, emit}) {
  15 + //业务性能指标y序列
  16 + let performanceData=[
  17 + {
  18 +
  19 + type: 'value',
  20 + axisLabel: {
  21 + formatter: '{value} %'//以百分比显示
  22 + },
  23 + }, {
  24 + name: '单位:万',
  25 + type: 'value',
  26 + axisLabel: {
  27 + show: true,
  28 + interval: 'right',//居中显示
  29 + },
  30 + },
  31 + ]
  32 + //一般y序列
  33 + let yAxisCommon={
  34 + type: 'value',
  35 + splitLine:{
  36 + lineStyle: {
  37 + color:'#0a1b31'
  38 + }
  39 + },
  40 + axisLabel:{
  41 + color:'#ffffff',
  42 + },
  43 + }
  44 +
  45 + //业务双y轴数据
  46 + let performanceYData=[
  47 + {
  48 + name:'可用性',
  49 + type: 'line',
  50 + smooth:true,
  51 + // stack: 'Total',
  52 + show:false,
  53 + data:[120, 132, 101, 134, 90, 230, 210],
  54 + yAxisIndex:1,
  55 + showSymbol:false,
  56 + itemStyle : {
  57 + normal : {
  58 + color:"#97d5f4",//tooltip里的小圆点颜色
  59 + lineStyle:{
  60 + color:'#97d5f4'
  61 + }
  62 + }
  63 + }
  64 + },
  65 + {
  66 + name:'成功率',
  67 + type: 'line',
  68 + smooth:true,
  69 + // stack: 'Total',
  70 + show:false,
  71 + data:[120, 132, 101, 134, 90, 230, 210],
  72 + yAxisIndex:0,
  73 + showSymbol:false,
  74 + itemStyle : {
  75 + normal : {
  76 + color:"#efe0a7",//tooltip里的小圆点颜色
  77 + lineStyle:{
  78 + color:'#efe0a7'
  79 + }
  80 + }
  81 + }
  82 + },
  83 + {
  84 + name:'响应率',
  85 + type: 'line',
  86 + smooth:true,
  87 + // stack: 'Total',
  88 + show:false,
  89 + data:[220, 182, 191, 234, 290, 330, 310],
  90 + yAxisIndex:0,
  91 + showSymbol:false,
  92 + itemStyle : {
  93 + normal : {
  94 + color:"#e5abd1",//tooltip里的小圆点颜色
  95 + lineStyle:{
  96 + color:'#e5abd1'
  97 + }
  98 + }
  99 + }
  100 + },
  101 + {
  102 + name:'交易量',
  103 + type: 'line',
  104 + smooth:true,
  105 + // stack: 'Total',
  106 + show:false,
  107 + data:[150,232,201,154,190,330,410],
  108 + yAxisIndex:1,
  109 + showSymbol:false,
  110 + itemStyle : {
  111 + normal : {
  112 + color:"#97aaff",//tooltip里的小圆点颜色
  113 + lineStyle:{
  114 + color:'#97aaff'
  115 + }
  116 + }
  117 + }
  118 + }
  119 + ]
  120 + //一般y轴数据
  121 + let ySeriesCommon=[
  122 + {
  123 + name: '网络投票',
  124 + type: 'line',
  125 + smooth:true,
  126 + stack: 'Total',
  127 + data: [120, 132, 101, 134, 90, 230, 210],
  128 + yAxisIndex:0,
  129 + showSymbol:false,
  130 + itemStyle : {
  131 + normal : {
  132 + color:"#97d5f4",//tooltip里的小圆点颜色
  133 + lineStyle:{
  134 + color:'#97d5f4'
  135 + }
  136 + }
  137 + },
  138 + },
  139 + {
  140 + name: '涉税文书',
  141 + type: 'line',
  142 + smooth:true,
  143 + stack: 'Total',
  144 + data: [220, 182, 191, 234, 290, 330, 310],
  145 + showSymbol:false,
  146 + yAxisIndex:0,
  147 + itemStyle : {
  148 + color:"#ffffff",
  149 + normal : {
  150 + color:'#efe0a7',
  151 + lineStyle:{
  152 + color:'#efe0a7'
  153 + }
  154 + }
  155 + },
  156 + },
  157 + {
  158 + name: '网上申报',
  159 + type: 'line',
  160 + smooth:true,
  161 + stack: 'Total',
  162 + data: [150, 232, 201, 154, 190, 330, 410],
  163 + yAxisIndex:0,
  164 + showSymbol:false,
  165 + itemStyle : {
  166 + normal : {
  167 + color:'#e5abd1',
  168 + lineStyle:{
  169 + color:'#e5abd1'
  170 + }
  171 + }
  172 + },
  173 + },
  174 + ]
  175 +
  176 + const {proxy} = Vue.getCurrentInstance();
  177 +
  178 + // 挂载完
  179 + Vue.onMounted(() => {
  180 + /*$.get(proxy.domainName,function(res){
  181 +
  182 + })*/
  183 + proxy.yAxisData=performanceData;
  184 + proxy.seriesData=performanceYData;
  185 +
  186 + console.log('222',proxy.yAxisData)
  187 + const chartDom = document.getElementById('line-echart');
  188 + const myChart = echarts.init(chartDom);
  189 + let option;
  190 +
  191 + option = {
  192 + title: {
  193 + text: ''
  194 + },
  195 + tooltip: {
  196 + trigger: 'axis',
  197 + backgroundColor:'rgba(50,50,50,0.7)',
  198 + borderColor:"#333",
  199 + textStyle:{
  200 + color:"#fff",
  201 + }
  202 +
  203 + },
  204 + legend: {
  205 + data: ['网络投票', '涉税文书', '网上申报'],
  206 + itemHeight:0,//图例圆圈大小设置
  207 + y:'7px',
  208 + textStyle: {
  209 + color: '#ffffff',
  210 + fontsize:"12px"
  211 + }
  212 +
  213 + },
  214 + grid: {
  215 + left: '3%',
  216 + right: '4%',
  217 + bottom: '3%',
  218 + containLabel: true,
  219 + show:true,//设置网格区域背景色
  220 + borderColor:"transparent",
  221 + backgroundColor:new echarts.graphic.LinearGradient(
  222 + 0,0,0,1,
  223 + [
  224 + {offset:0,color:'#3ac9fb'},
  225 + {offset:1,color:'#2a81f3'}
  226 + ]
  227 + )
  228 + },
  229 + toolbox: {
  230 + feature: {
  231 + saveAsImage: {}
  232 + }
  233 + },
  234 + xAxis: {
  235 + type: 'category',
  236 + boundaryGap: false,
  237 + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  238 +
  239 + axisLine:{
  240 + show:false,//是否显示坐标线
  241 + },
  242 + axisTick: {
  243 + show: false //是否显示坐标刻度
  244 + },
  245 + axisLabel:{
  246 + color:'#ffffff',
  247 + },
  248 +
  249 + },
  250 + yAxis: proxy.yAxisData,
  251 + series: proxy.seriesData,
  252 + itemStyle:{
  253 + showSymbol:false
  254 + }
  255 + };
  256 +
  257 + option && myChart.setOption(option);
  258 +
  259 + let xAxisData=proxy.getRangeData();
  260 + // console.log('111',xAxisData)
  261 +
  262 +
  263 + })
  264 +
  265 + const getRangeData=()=> {
  266 + //获取当前月份的最后一天,当前日期
  267 + const date = new Date();
  268 + let currentMonth = date.getMonth();
  269 + const nextMonth = ++currentMonth;
  270 + const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
  271 + const oneDay = 1000 * 60 * 60 * 24;
  272 + const lastTime = new Date(nextMonthFirstDay - oneDay);
  273 + const lastDay = lastTime.getDate();
  274 +
  275 + const dd = date.getDate();
  276 + let rangeData=[];
  277 + if(dd+15>lastDay){
  278 + console.log("11",dd)
  279 + const start=lastDay-15;
  280 + const end=lastDay;
  281 + for(let i=start;i<end;i++){
  282 + rangeData.push(i+1)
  283 + }
  284 + }else{
  285 + const start=dd;
  286 + const end=dd+15;
  287 + for(let i=start;i<end;i++){
  288 + console.log("44",i)
  289 + rangeData.push(i)
  290 + }
  291 + }
  292 + return rangeData;
  293 + }
  294 +
  295 + return{
  296 + getRangeData
  297 + }
  298 + }
  299 +}
@@ -12,24 +12,24 @@ @@ -12,24 +12,24 @@
12 <div class="screen-body"> 12 <div class="screen-body">
13 <section class="screen-left" > 13 <section class="screen-left" >
14 <div class="left-top"> 14 <div class="left-top">
15 -<!-- 省局网络拓扑-->  
16 -<!-- <NetworkTopology :></NetworkTopology>--> 15 + <!--省局网络拓扑-->
  16 +<!-- <NetworkTopology ></NetworkTopology>-->
17 </div> 17 </div>
18 <div class="left-bottom"> 18 <div class="left-bottom">
19 <div class="left-bottom-left"> 19 <div class="left-bottom-left">
20 <div class="left-bottom-left-top"> 20 <div class="left-bottom-left-top">
21 -<!-- 数据中心--> 21 + <!--数据中心-->
22 <DataCenter></DataCenter> 22 <DataCenter></DataCenter>
23 23
24 </div> 24 </div>
25 <div class="left-bottom-left-bottom"> 25 <div class="left-bottom-left-bottom">
26 - 资产概览 26 + <!--资产概览-->
  27 + <AssetOverview></AssetOverview>
27 28
28 </div> 29 </div>
29 </div> 30 </div>
30 <div class="left-bottom-right"> 31 <div class="left-bottom-right">
31 云平台 32 云平台
32 -  
33 </div> 33 </div>
34 </div> 34 </div>
35 </section> 35 </section>
@@ -7,6 +7,12 @@ export default { @@ -7,6 +7,12 @@ export default {
7 ), 7 ),
8 'DataCenter': Vue.defineAsyncComponent( 8 'DataCenter': Vue.defineAsyncComponent(
9 () => myImport('views/zjdaping/components/dataCenter/index') 9 () => myImport('views/zjdaping/components/dataCenter/index')
  10 + ),
  11 + 'AssetOverview': Vue.defineAsyncComponent(
  12 + () => myImport('views/zjdaping/components/assetOverview/index')
  13 + ),
  14 + 'Digital': Vue.defineAsyncComponent(
  15 + () => myImport('views/zjdaping/components/digital/index')
10 ) 16 )
11 }, 17 },
12 data() { 18 data() {
@@ -26,10 +32,9 @@ export default { @@ -26,10 +32,9 @@ export default {
26 32
27 // 挂载完 33 // 挂载完
28 Vue.onMounted(() => { 34 Vue.onMounted(() => {
29 - let that = this  
30 // 获取当前系统时间 35 // 获取当前系统时间
31 let myDate = new Date(); 36 let myDate = new Date();
32 - that.dateTime = myDate.getFullYear() + '-' + that.timeFormat(myDate.getMonth() + 1 + '') + '-' + that.timeFormat(myDate.getDate() + '') // + ' ' + that.timeFormat(myDate.getHours() + '') + ':' + that.timeFormat(myDate.getMinutes() + '') + ':' + that.timeFormat(myDate.getSeconds() + ''); 37 + // 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() + '');
33 38
34 }) 39 })
35 40