monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by CN守护者
Commit 6a8086df6a5e34394ffb1cbaf627f4846571f0f9 1 parent 15bbb4fc

浙江大屏前端 1、灌入5个组件数据 2、部分组件样式微调

Inline Side-by-side
Showing 21 changed files with 354 additions and 161 deletions
@@ -77,17 +77,17 @@ @@ -77,17 +77,17 @@
77 } 77 }
78 .screen-middle #middle-top { 78 .screen-middle #middle-top {
79 width: 100%; 79 width: 100%;
80 - height: 32.4%; 80 + height: 32%;
81 position: relative; 81 position: relative;
82 } 82 }
83 .screen-middle #middle-center { 83 .screen-middle #middle-center {
84 width: 100%; 84 width: 100%;
85 - height: 32.4%; 85 + height: 32%;
86 position: relative; 86 position: relative;
87 } 87 }
88 .screen-middle #middle-bottom { 88 .screen-middle #middle-bottom {
89 width: 100%; 89 width: 100%;
90 - height: 34%; 90 + height: 36%;
91 position: relative; 91 position: relative;
92 } 92 }
93 93
@@ -96,6 +96,12 @@ @@ -96,6 +96,12 @@
96 width: 30%; 96 width: 30%;
97 } 97 }
98 98
  99 +.declarepolyline-title {
  100 + position: absolute;
  101 + left: 80%;
  102 + top: 20%;
  103 +}
  104 +
99 .screen-right #right-top { 105 .screen-right #right-top {
100 height: 26%; 106 height: 26%;
101 position: relative; 107 position: relative;
@@ -9,18 +9,30 @@ @@ -9,18 +9,30 @@
9 .deduction-title-size { 9 .deduction-title-size {
10 position: absolute; 10 position: absolute;
11 left: 9%; 11 left: 9%;
12 - top: 20%; 12 + top: 22%;
13 } 13 }
14 .deduction-box-text-left { 14 .deduction-box-text-left {
15 position: absolute; 15 position: absolute;
16 - left: 12%;  
17 - top: 45%; 16 + left: 17%;
  17 + top: 47%;
18 } 18 }
19 .deduction-box-text-right { 19 .deduction-box-text-right {
20 position: absolute; 20 position: absolute;
21 - left: 60%;  
22 - top: 45%; 21 + left: 53%;
  22 + top: 47%;
23 } 23 }
24 .deduction-text-number { 24 .deduction-text-number {
25 color: #01E6E6; 25 color: #01E6E6;
  26 +}
  27 +
  28 +.deduction-box-img-left {
  29 + position: absolute;
  30 + left: 10%;
  31 + top: 5%;
  32 +}
  33 +
  34 +.deduction-box-img-right {
  35 + position: absolute;
  36 + left: 50%;
  37 + top: 5%;
26 } 38 }
1 .topfive-title-size { 1 .topfive-title-size {
2 position: absolute; 2 position: absolute;
3 left: 16%; 3 left: 16%;
4 - top: 7%; 4 + top: 5%;
5 } 5 }
6 .topfive-title-img { 6 .topfive-title-img {
7 position: absolute; 7 position: absolute;
8 left: 5%; 8 left: 5%;
  9 + top: 4%;
  10 +}
  11 +
  12 +.available-title-size{
  13 + position: absolute;
  14 + left: 10%;
9 top: 5%; 15 top: 5%;
10 -}  
  16 +}
  17 +
  18 +.available-title-img {
  19 + position: absolute;
  20 + left: 3%;
  21 + top: 4%;
  22 +}
@@ -84,6 +84,11 @@ const routes = [{ @@ -84,6 +84,11 @@ const routes = [{
84 path: '/deduction', 84 path: '/deduction',
85 name: 'deduction', 85 name: 'deduction',
86 component: () => myImport('views/dp/components/deduction/index') 86 component: () => myImport('views/dp/components/deduction/index')
  87 + },
  88 + {
  89 + path: '/declarepolyline',
  90 + name: 'declarepolyline',
  91 + component: () => myImport('views/dp/components/declarePolyline/index')
87 } 92 }
88 ]; 93 ];
89 94
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="availability_ref"></div> 2 <div class="com-chart" id="availability_ref"></div>
3 <div class="topfive-box-title"> 3 <div class="topfive-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="topfive-title-size">业务可用性</span> 4 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> <!-- bor1_6 -->
  5 + <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
6 </div> 6 </div>
7 </div> 7 </div>
@@ -18,6 +18,7 @@ export default { @@ -18,6 +18,7 @@ export default {
18 time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"] 18 time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
19 } 19 }
20 }, 20 },
  21 + titleFontSize: 20,
21 startValue: 0, // 区域缩放的起点值 22 startValue: 0, // 区域缩放的起点值
22 endValue: 6, // 区域缩放的终点值 23 endValue: 6, // 区域缩放的终点值
23 timerId: null // 定时器的标识 24 timerId: null // 定时器的标识
@@ -36,12 +37,12 @@ export default { @@ -36,12 +37,12 @@ export default {
36 computed: { 37 computed: {
37 comtitleTextStyle () { 38 comtitleTextStyle () {
38 return { 39 return {
39 - fontSize: this.titleFontSize / 2 + 'px' 40 + fontSize: this.titleFontSize / 1.2 + 'px'
40 } 41 }
41 }, 42 },
42 comtitleImgStyle () { 43 comtitleImgStyle () {
43 return { 44 return {
44 - height: this.titleFontSize * 1.2 + 'px', 45 + // height: this.titleFontSize + 'px',
45 width: this.titleFontSize * 8 + 'px' 46 width: this.titleFontSize * 8 + 'px'
46 } 47 }
47 } 48 }
@@ -63,18 +64,28 @@ export default { @@ -63,18 +64,28 @@ export default {
63 }, 64 },
64 xAxis: { 65 xAxis: {
65 type: 'category', 66 type: 'category',
66 - boundaryGap: false 67 + boundaryGap: false,
  68 + axisLabel: {
  69 + textStyle: {
  70 + color: '#E6E8EB'
  71 + }
  72 + }
67 }, 73 },
68 yAxis: { 74 yAxis: {
69 type: 'value', 75 type: 'value',
70 splitLine: { 76 splitLine: {
71 show: false 77 show: false
  78 + },
  79 + axisLabel: {
  80 + textStyle: {
  81 + color: '#E6E8EB'
  82 + }
72 } 83 }
73 } 84 }
74 } 85 }
75 this.chartInstance.setOption(initOption) 86 this.chartInstance.setOption(initOption)
76 }, 87 },
77 - async getData () { 88 + getData () {
78 // await this.$http.get() 89 // await this.$http.get()
79 // const { data: ret } = await this.$http.get('responsemonitor') 90 // const { data: ret } = await this.$http.get('responsemonitor')
80 // this.allData = ret 91 // this.allData = ret
@@ -151,23 +162,6 @@ export default { @@ -151,23 +162,6 @@ export default {
151 screenAdapter () { 162 screenAdapter () {
152 this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6 163 this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
153 const adapterOption = { 164 const adapterOption = {
154 - // title: {  
155 - // left: this.titleFontSize * 2,  
156 - // textStyle: {  
157 - // fontSize: this.titleFontSize,  
158 - // color: '#F0F3F8'  
159 - // // rich: {  
160 - // // Sunny: {  
161 - // // // 这样设定 backgroundColor 就可以是图片了。  
162 - // // backgroundColor: {  
163 - // // image: require('../assets/img/bg_box_3.png')  
164 - // // },  
165 - // // // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。  
166 - // // height: this.titleFontSize * 1.5  
167 - // // }  
168 - // // }  
169 - // }  
170 - // },  
171 legend: { 165 legend: {
172 itemWidth: this.titleFontSize, 166 itemWidth: this.titleFontSize,
173 itemHeight: this.titleFontSize, 167 itemHeight: this.titleFontSize,
@@ -56,12 +56,22 @@ export default { @@ -56,12 +56,22 @@ export default {
56 }, 56 },
57 xAxis: { 57 xAxis: {
58 type: 'category', 58 type: 'category',
59 - boundaryGap: false 59 + boundaryGap: false,
  60 + axisLabel: {
  61 + textStyle: {
  62 + color: '#E6E8EB'
  63 + }
  64 + }
60 }, 65 },
61 yAxis: { 66 yAxis: {
62 type: 'value', 67 type: 'value',
63 splitLine: { 68 splitLine: {
64 show: false 69 show: false
  70 + },
  71 + axisLabel: {
  72 + textStyle: {
  73 + color: '#E6E8EB'
  74 + }
65 } 75 }
66 } 76 }
67 } 77 }
@@ -57,12 +57,22 @@ export default { @@ -57,12 +57,22 @@ export default {
57 }, 57 },
58 xAxis: { 58 xAxis: {
59 type: 'category', 59 type: 'category',
60 - boundaryGap: false 60 + boundaryGap: false,
  61 + axisLabel: {
  62 + textStyle: {
  63 + color: '#E6E8EB'
  64 + }
  65 + }
61 }, 66 },
62 yAxis: { 67 yAxis: {
63 type: 'value', 68 type: 'value',
64 splitLine: { 69 splitLine: {
65 show: false 70 show: false
  71 + },
  72 + axisLabel: {
  73 + textStyle: {
  74 + color: '#E6E8EB'
  75 + }
66 } 76 }
67 } 77 }
68 } 78 }
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="declarepolyline_ref"></div> 2 <div class="com-chart" id="declarepolyline_ref"></div>
3 - <div class="com-title" :style="comtitlesizeStyle"> 3 + <div class="declarepolyline-title" :style="comtitlesizeStyle">
4 <el-row> 4 <el-row>
5 - <el-col :span="24" :style="comboxTitleStyle"> 5 + <el-col :span="24">
6 <div class="grid-content bg-purple-dark"> 6 <div class="grid-content bg-purple-dark">
7 - <img src="../assets/img/title_light.png" :style="comimgsizeStyle">  
8 - 本月应申报 7 + <img src="./src/assets/img/icon-ysb.png" :style="comimgsizeStyle">
  8 + <span>本月应申报</span>
9 </div> 9 </div>
10 </el-col> 10 </el-col>
11 </el-row> 11 </el-row>
12 <el-row> 12 <el-row>
13 - <el-col :span="24" :style="comboxTitleStyle"> 13 + <el-col :span="24">
14 <div class="grid-content bg-purple-dark" :style="comtitletextStyle"> 14 <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
15 - 1234521 15 + {{declareNumer}}
16 </div> 16 </div>
17 </el-col> 17 </el-col>
18 </el-row> 18 </el-row>
19 <el-row> 19 <el-row>
20 - <el-col :span="24" :style="comboxTitleStyle"> 20 + <el-col :span="24">
21 <div class="grid-content bg-purple-dark"> 21 <div class="grid-content bg-purple-dark">
22 - <img src="../assets/img/t.png" :style="comimgsizeStyle">  
23 - 本月申报率 22 + <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">
  23 + <span>本月申报率</span>
24 </div> 24 </div>
25 </el-col> 25 </el-col>
26 </el-row> 26 </el-row>
27 <el-row> 27 <el-row>
28 - <el-col :span="24" :style="comboxTitleStyle"> 28 + <el-col :span="24">
29 <div class="grid-content bg-purple-dark" :style="comtitletextStyle"> 29 <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
30 - 98.55% 30 + <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>
31 </div> 31 </div>
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
@@ -5,25 +5,33 @@ export default { @@ -5,25 +5,33 @@ export default {
5 data () { 5 data () {
6 return { 6 return {
7 chartInstance: null, 7 chartInstance: null,
8 - allData: {  
9 - polyline: {  
10 - data: {  
11 - name: "申报率",  
12 - data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]  
13 - },  
14 - declareNumer: "1200848",  
15 - declareRate: "98.55%",  
16 - numerTitle: "本月应申报",  
17 - rateTitle: "本月申报率"  
18 - },  
19 - xAxis: {  
20 - today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]  
21 - }  
22 - }, 8 + // allData: {
  9 + // polyline: {
  10 + // data: {
  11 + // name: "申报率",
  12 + // data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
  13 + // },
  14 + // declareNumer: "1200848",
  15 + // declareRate: "98.55%",
  16 + // numerTitle: "本月应申报",
  17 + // rateTitle: "本月申报率"
  18 + // },
  19 + // xAxis: {
  20 + // today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
  21 + // }
  22 + // },
  23 + allData:{},
23 startValue: 0, // 区域缩放的起点值 24 startValue: 0, // 区域缩放的起点值
24 endValue: 9, // 区域缩放的终点值 25 endValue: 9, // 区域缩放的终点值
25 timerId: null, // 定时器的标识 26 timerId: null, // 定时器的标识
26 - titleFontSize: 30 27 + titleFontSize: 30,
  28 + declareRate: '0%',
  29 + declareRateLeft: 0,
  30 + declareRateRight: '%',
  31 + declareNumer: 0,
  32 + curve: 'KPIDA0ACBBP',
  33 + rateTitle: 'KPIDA0ACBBK',
  34 + numerTitle: 'KPIDA0ACBBG'
27 } 35 }
28 }, 36 },
29 computed: { 37 computed: {
@@ -40,13 +48,18 @@ export default { @@ -40,13 +48,18 @@ export default {
40 }, 48 },
41 comimgsizeStyle () { 49 comimgsizeStyle () {
42 return { 50 return {
43 - width: this.titleFontSize + 'px' 51 + width: this.titleFontSize / 1.5 + 'px'
  52 + }
  53 + },
  54 + comboxtextStyle () {
  55 + return {
  56 + fontSize: this.titleFontSize / 3 + 'px'
44 } 57 }
45 } 58 }
46 }, 59 },
47 mounted () { 60 mounted () {
48 this.initChart() 61 this.initChart()
49 - this.getData() 62 + this.getData(this)
50 window.addEventListener('resize', this.screenAdapter) 63 window.addEventListener('resize', this.screenAdapter)
51 this.screenAdapter() 64 this.screenAdapter()
52 }, 65 },
@@ -59,9 +72,10 @@ export default { @@ -59,9 +72,10 @@ export default {
59 this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref')) 72 this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))
60 const initOption = { 73 const initOption = {
61 grid: { 74 grid: {
62 - left: '5%',  
63 - right: '35%',  
64 - bottom: '3%', 75 + top: '10%',
  76 + left: '1%',
  77 + right: '30%',
  78 + bottom: '1%',
65 containLabel: true 79 containLabel: true
66 }, 80 },
67 legend: { 81 legend: {
@@ -70,23 +84,43 @@ export default { @@ -70,23 +84,43 @@ export default {
70 }, 84 },
71 xAxis: { 85 xAxis: {
72 type: 'category', 86 type: 'category',
73 - boundaryGap: false 87 + boundaryGap: false,
  88 + axisLabel: {
  89 + textStyle: {
  90 + color: '#E6E8EB'
  91 + }
  92 + }
74 }, 93 },
75 yAxis: { 94 yAxis: {
76 type: 'value', 95 type: 'value',
77 splitLine: { 96 splitLine: {
78 show: false 97 show: false
  98 + },
  99 + axisLabel: {
  100 + textStyle: {
  101 + color: '#E6E8EB'
  102 + }
79 } 103 }
80 } 104 }
81 } 105 }
82 this.chartInstance.setOption(initOption) 106 this.chartInstance.setOption(initOption)
83 }, 107 },
84 - async getData () {  
85 - // await this.$http.get()  
86 - // const { data: ret } = await this.$http.get('declarepolyline')  
87 - // this.allData = ret  
88 - this.updateChart()  
89 - this.startInterval() 108 + getData (that) {
  109 + const { proxy } = Vue.getCurrentInstance();
  110 + var params = {
  111 + curve: that.curve,
  112 + rateTitle: that.rateTitle,
  113 + numerTitle: that.numerTitle
  114 + };
  115 + proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
  116 + if(res.success){
  117 + console.log(res.obj)
  118 + that.allData = res.obj;
  119 + that.updateChart()
  120 + that.startInterval()
  121 + }
  122 + });
  123 +
90 }, 124 },
91 updateChart () { 125 updateChart () {
92 // 半透明的颜色值 126 // 半透明的颜色值
@@ -108,25 +142,17 @@ export default { @@ -108,25 +142,17 @@ export default {
108 const timeArr = this.allData.xAxis.today 142 const timeArr = this.allData.xAxis.today
109 const seriesData = this.allData.polyline.data.data 143 const seriesData = this.allData.polyline.data.data
110 const seriesName = this.allData.polyline.data.name 144 const seriesName = this.allData.polyline.data.name
  145 + const declareRate = this.allData.polyline.declareRate
  146 + if(declareRate.indexOf('.') > 0){
  147 + this.declareRateLeft = declareRate.split('.')[0] + '.'
  148 + this.declareRateRight = declareRate.split('.')[1]
  149 + }
  150 + this.declareNumer = this.allData.polyline.declareNumer
111 // 图例的数据 151 // 图例的数据
112 const legendArr = this.allData.polyline.data.data.map(item => { 152 const legendArr = this.allData.polyline.data.data.map(item => {
113 return item.name 153 return item.name
114 }) 154 })
115 - const numerTitle = this.allData.polyline.numerTitle // 本月应申报 标题  
116 - const rateTitle = this.allData.polyline.rateTitle // 本月申报率 标题  
117 - const declareNumer = this.allData.polyline.declareNumer // 本月应申报 数值  
118 - const declareRate = this.allData.polyline.declareRate // 本月申报率 数值  
119 - const htmlText = numerTitle + '\n' + declareNumer + '\n' + rateTitle + '\n' + declareRate  
120 - console.log(htmlText)  
121 const dataOption = { 155 const dataOption = {
122 - // title: {  
123 - // text: htmlText,  
124 - // top: '25%',  
125 - // right: '15%',  
126 - // textStyle: {  
127 - // color: '#F1F2F5'  
128 - // }  
129 - // },  
130 xAxis: { 156 xAxis: {
131 data: timeArr 157 data: timeArr
132 }, 158 },
@@ -181,12 +207,12 @@ export default { @@ -181,12 +207,12 @@ export default {
181 if (this.timerId) { 207 if (this.timerId) {
182 clearInterval(this.timerId) 208 clearInterval(this.timerId)
183 } 209 }
184 - let index = 30 210 + let index = 10
185 this.timerId = setInterval(() => { 211 this.timerId = setInterval(() => {
186 this.startValue++ 212 this.startValue++
187 this.endValue++ 213 this.endValue++
188 - if ((this.allData.polyline.data).length > 0) {  
189 - index = (this.allData.polyline.data)[0].data.length 214 + if (this.allData.polyline.data.data.length > 0) {
  215 + index = this.allData.polyline.data.data.length
190 } 216 }
191 if (this.endValue > index - 1) { 217 if (this.endValue > index - 1) {
192 this.startValue = 0 218 this.startValue = 0
@@ -3,42 +3,66 @@ @@ -3,42 +3,66 @@
3 <el-row> 3 <el-row>
4 <el-col :span="24"> 4 <el-col :span="24">
5 <div class="grid-content bg-purple-dark com-box-title"> 5 <div class="grid-content bg-purple-dark com-box-title">
6 - <span>  
7 - <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->  
8 - <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>  
9 - </span>  
10 - </div>  
11 - </el-col>  
12 - </el-row>  
13 - <el-row>  
14 - <el-col :span="11">  
15 - <div class="grid-content bg-purple com-box">  
16 - <span >  
17 - <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->  
18 - <div class="deduction-box-text-left" :style="comnumberTextStyle">  
19 - <div>  
20 - <span class="deduction-text-number">{{deductionAmount}}</span>  
21 - <span :style="comnumberUnitStyle">万元</span>  
22 - </div>  
23 - <div>本月扣款金额</div>  
24 - </div>  
25 - </span>  
26 - </div>  
27 - </el-col>  
28 - <el-col :span="13">  
29 - <div class="grid-content bg-purple-light">  
30 - <span >  
31 - <img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">  
32 - <div class="deduction-box-text-right" :style="comnumberTextStyle">  
33 - <div>  
34 - <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>  
35 - <span :style="comnumberUnitStyle">万笔</span>  
36 - </div>  
37 - <div>本月扣款笔数</div>  
38 - </div> 6 + <span>
  7 + <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
  8 + <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>
39 </span> 9 </span>
40 </div> 10 </div>
41 </el-col> 11 </el-col>
42 </el-row> 12 </el-row>
  13 + <el-col :span="24">
  14 + <div class="grid-content bg-purple-dark com-box-title">
  15 + <span>
  16 + <img class="deduction-box-img-left" :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->
  17 + <div class="deduction-box-text-left" :style="comnumberTextStyle">
  18 + <div>
  19 + <span class="deduction-text-number">{{deductionAmount}}</span>
  20 + <span :style="comnumberUnitStyle">亿元</span>
  21 + </div>
  22 + <div>本月扣款金额</div>
  23 + </div>
  24 + </span>
  25 + <span>
  26 + <img class="deduction-box-img-right" :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">
  27 + <div class="deduction-box-text-right" :style="comnumberTextStyle">
  28 + <div>
  29 + <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>
  30 + <span :style="comnumberUnitStyle">万笔</span>
  31 + </div>
  32 + <div>本月扣款笔数</div>
  33 + </div>
  34 + </span>
  35 + </div>
  36 + </el-col>
  37 +<!-- <el-row>-->
  38 +<!-- <el-col :span="12">-->
  39 +<!-- <div class="grid-content bg-purple com-box">-->
  40 +<!-- <span >-->
  41 +<!-- <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> &lt;!&ndash; bor1_6 &ndash;&gt;-->
  42 +<!-- <div class="deduction-box-text-left" :style="comnumberTextStyle">-->
  43 +<!-- <div>-->
  44 +<!-- <span class="deduction-text-number">{{deductionAmount}}</span>-->
  45 +<!-- <span :style="comnumberUnitStyle">亿元</span>-->
  46 +<!-- </div>-->
  47 +<!-- <div>本月扣款金额</div>-->
  48 +<!-- </div>-->
  49 +<!-- </span>-->
  50 +<!-- </div>-->
  51 +<!-- </el-col>-->
  52 +<!-- <el-col :span="12">-->
  53 +<!-- <div class="grid-content bg-purple-light">-->
  54 +<!-- <span >-->
  55 +<!-- <img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">-->
  56 +<!-- <div class="deduction-box-text-right" :style="comnumberTextStyle">-->
  57 +<!-- <div>-->
  58 +<!-- <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>-->
  59 +<!-- <span :style="comnumberUnitStyle">万笔</span>-->
  60 +<!-- </div>-->
  61 +<!-- <div>本月扣款笔数</div>-->
  62 +<!-- </div>-->
  63 +<!-- </span>-->
  64 +<!-- </div>-->
  65 +<!-- </el-col>-->
  66 +<!-- </el-row>-->
43 </div> 67 </div>
44 </div> 68 </div>
@@ -10,7 +10,10 @@ export default { @@ -10,7 +10,10 @@ export default {
10 // 扣款金额 10 // 扣款金额
11 deductionAmount: '0.00', 11 deductionAmount: '0.00',
12 // 扣款笔数 12 // 扣款笔数
13 - deductionNumber: '0.00' 13 + deductionNumber: '0.00',
  14 + // 传入值
  15 + kipValue1: 'KPIDA0ACBBI', // 本月扣款金额
  16 + kipValue2: 'KPIDA0ACBBO' // 本月扣款笔数
14 } 17 }
15 }, 18 },
16 computed: { 19 computed: {
@@ -55,8 +58,7 @@ export default { @@ -55,8 +58,7 @@ export default {
55 } 58 }
56 }, 59 },
57 mounted () { 60 mounted () {
58 - this.initChart()  
59 - this.getData() 61 + this.getData(this)
60 window.addEventListener('resize', this.screenAdapter) 62 window.addEventListener('resize', this.screenAdapter)
61 this.screenAdapter() 63 this.screenAdapter()
62 }, 64 },
@@ -66,9 +68,25 @@ export default { @@ -66,9 +68,25 @@ export default {
66 methods: { 68 methods: {
67 initChart () { 69 initChart () {
68 }, 70 },
69 - async getData () {  
70 - // await this.$http.get()  
71 - this.updateChart() 71 + getData (that) {
  72 + const { proxy } = Vue.getCurrentInstance();
  73 + var params = {
  74 + kipValue1: that.kipValue1, // 本月扣款金额
  75 + kipValue2: that.kipValue2 // 本月扣款笔数
  76 + };
  77 + proxy.$http.get("/api-web/bigScreen/deduction", params, function (res) {
  78 + if(res.success){
  79 + res.data.map((item) => {
  80 + if(item.name == that.kipValue1){
  81 + that.deductionAmount = item.value
  82 + }
  83 + if(item.name == that.kipValue2){
  84 + that.deductionNumber = item.value
  85 + }
  86 +
  87 + })
  88 + }
  89 + });
72 }, 90 },
73 updateChart () { 91 updateChart () {
74 }, 92 },
@@ -28,10 +28,12 @@ export default { @@ -28,10 +28,12 @@ export default {
28 bitBitFalg: 0, 28 bitBitFalg: 0,
29 isOneCommaShow: false, 29 isOneCommaShow: false,
30 isTwoCommaShow: false, 30 isTwoCommaShow: false,
31 - declaredAmountNumber: 1283, // 左边数 31 + declaredAmountNumber: 0, // 左边数
32 undeclaredAmountNumber: 0, // 右边数 32 undeclaredAmountNumber: 0, // 右边数
33 leftTitle: '本月已申报数', 33 leftTitle: '本月已申报数',
34 - rightTitle: '本月未申报' 34 + rightTitle: '本月未申报',
  35 + kipValue1: 'KPIDA0ACBBF',
  36 + kipValue2: 'KPIDA0ACBBD'
35 } 37 }
36 }, 38 },
37 computed: { 39 computed: {
@@ -80,9 +82,9 @@ export default { @@ -80,9 +82,9 @@ export default {
80 82
81 }, 83 },
82 mounted () { 84 mounted () {
83 - this.startInterval() 85 + // this.startInterval()
84 // this.initChart() 86 // this.initChart()
85 - this.getData() 87 + this.getData(this)
86 window.addEventListener('resize', this.screenAdapter) 88 window.addEventListener('resize', this.screenAdapter)
87 this.screenAdapter() 89 this.screenAdapter()
88 }, 90 },
@@ -143,10 +145,29 @@ export default { @@ -143,10 +145,29 @@ export default {
143 this.mustBitFalg = 1 145 this.mustBitFalg = 1
144 } 146 }
145 }, 147 },
146 - async getData () {  
147 - // await this.$http.get()  
148 - this.initChart()  
149 - this.updateChart() 148 + getData (that) {
  149 + const { proxy } = Vue.getCurrentInstance();
  150 + var params = {
  151 + kipValue1: that.kipValue1,
  152 + kipValue2: that.kipValue2
  153 + };
  154 + proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
  155 + if(res.success){
  156 + console.log(res.map)
  157 + const map = res.map
  158 + // 左边数
  159 + if(map.leftNumber){
  160 + that.declaredAmountNumber = map.leftNumber
  161 + }
  162 + // 右边数
  163 + if(map.rightNumber){
  164 + that.undeclaredAmountNumber = map.rightNumber
  165 + }
  166 + that.initChart()
  167 + that.updateChart()
  168 + }
  169 + });
  170 +
150 }, 171 },
151 updateChart () { 172 updateChart () {
152 // const dataOption = {} 173 // const dataOption = {}
@@ -28,10 +28,12 @@ export default { @@ -28,10 +28,12 @@ export default {
28 bitBitFalg: 0, 28 bitBitFalg: 0,
29 isOneCommaShow: false, 29 isOneCommaShow: false,
30 isTwoCommaShow: false, 30 isTwoCommaShow: false,
31 - declaredAmountNumber: 1283, // 左边数 31 + declaredAmountNumber: 0, // 左边数
32 undeclaredAmountNumber: 0, // 右边数 32 undeclaredAmountNumber: 0, // 右边数
33 leftTitle: '今日已申报数', 33 leftTitle: '今日已申报数',
34 - rightTitle: '本日申报未导入' 34 + rightTitle: '本日申报未导入',
  35 + kipValue1: 'KPIDA0ACBBS',
  36 + kipValue2: 'KPIDA0ACBBE'
35 } 37 }
36 }, 38 },
37 computed: { 39 computed: {
@@ -80,9 +82,9 @@ export default { @@ -80,9 +82,9 @@ export default {
80 82
81 }, 83 },
82 mounted () { 84 mounted () {
83 - this.startInterval() 85 + // this.startInterval()
84 // this.initChart() 86 // this.initChart()
85 - this.getData() 87 + this.getData(this)
86 window.addEventListener('resize', this.screenAdapter) 88 window.addEventListener('resize', this.screenAdapter)
87 this.screenAdapter() 89 this.screenAdapter()
88 }, 90 },
@@ -143,10 +145,31 @@ export default { @@ -143,10 +145,31 @@ export default {
143 this.mustBitFalg = 1 145 this.mustBitFalg = 1
144 } 146 }
145 }, 147 },
146 - async getData () {  
147 - // await this.$http.get()  
148 - this.initChart()  
149 - this.updateChart() 148 + getData (that) {
  149 + const { proxy } = Vue.getCurrentInstance();
  150 + var params = {
  151 + kipValue1: that.kipValue1,
  152 + kipValue2: that.kipValue2
  153 + };
  154 + proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
  155 + if(res.success){
  156 + console.log(res.map)
  157 + const map = res.map
  158 + // 左边数
  159 + console.log(map.leftNumber)
  160 + if(map.leftNumber){
  161 + that.declaredAmountNumber = map.leftNumber
  162 + }
  163 + // 右边数
  164 + console.log(map.rightNumber)
  165 + if(map.rightNumber){
  166 + that.undeclaredAmountNumber = map.rightNumber
  167 + }
  168 + that.initChart()
  169 + that.updateChart()
  170 + }
  171 + });
  172 +
150 }, 173 },
151 updateChart () { 174 updateChart () {
152 // const dataOption = {} 175 // const dataOption = {}
@@ -56,12 +56,22 @@ export default { @@ -56,12 +56,22 @@ export default {
56 }, 56 },
57 xAxis: { 57 xAxis: {
58 type: 'category', 58 type: 'category',
59 - boundaryGap: false 59 + boundaryGap: false,
  60 + axisLabel: {
  61 + textStyle: {
  62 + color: '#E6E8EB'
  63 + }
  64 + }
60 }, 65 },
61 yAxis: { 66 yAxis: {
62 type: 'value', 67 type: 'value',
63 splitLine: { 68 splitLine: {
64 show: false 69 show: false
  70 + },
  71 + axisLabel: {
  72 + textStyle: {
  73 + color: '#E6E8EB'
  74 + }
65 } 75 }
66 } 76 }
67 } 77 }
@@ -50,12 +50,22 @@ export default { @@ -50,12 +50,22 @@ export default {
50 }, 50 },
51 xAxis: { 51 xAxis: {
52 type: 'category', 52 type: 'category',
53 - boundaryGap: false 53 + boundaryGap: false,
  54 + axisLabel: {
  55 + textStyle: {
  56 + color: '#E6E8EB'
  57 + }
  58 + }
54 }, 59 },
55 yAxis: { 60 yAxis: {
56 type: 'value', 61 type: 'value',
57 splitLine: { 62 splitLine: {
58 show: false 63 show: false
  64 + },
  65 + axisLabel: {
  66 + textStyle: {
  67 + color: '#E6E8EB'
  68 + }
59 } 69 }
60 } 70 }
61 } 71 }
@@ -21,7 +21,9 @@ export default { @@ -21,7 +21,9 @@ export default {
21 name: '实名采集', 21 name: '实名采集',
22 value: 2001 22 value: 2001
23 }], 23 }],
24 - titleFontSize: 30 24 + titleFontSize: 30,
  25 + kpiIdTitle: 'KPIDA0ACBBX',
  26 + kpiIdValue: 'KPIDA0ACBBJ'
25 } 27 }
26 }, 28 },
27 computed: { 29 computed: {
@@ -39,7 +41,7 @@ export default { @@ -39,7 +41,7 @@ export default {
39 }, 41 },
40 mounted () { 42 mounted () {
41 this.initChart() 43 this.initChart()
42 - this.getData() 44 + this.getData(this)
43 window.addEventListener('resize', this.screenAdapter) 45 window.addEventListener('resize', this.screenAdapter)
44 this.screenAdapter() 46 this.screenAdapter()
45 }, 47 },
@@ -110,23 +112,24 @@ export default { @@ -110,23 +112,24 @@ export default {
110 } 112 }
111 this.chartInstance.setOption(initOption) 113 this.chartInstance.setOption(initOption)
112 }, 114 },
113 - getData () {  
114 - // await this.$http.get()  
115 - // const { data: ret } = await this.$http.get('topfive')  
116 - // this.allData = ret 115 + getData (that) {
117 // this.allData.sort((a, b) => { 116 // this.allData.sort((a, b) => {
118 // return a.value - b.value 117 // return a.value - b.value
119 // }) 118 // })
120 const { proxy } = Vue.getCurrentInstance(); 119 const { proxy } = Vue.getCurrentInstance();
121 var params = { 120 var params = {
122 - kipValue: 'kipValue' 121 + kpiIdTitle: that.kpiIdTitle,
  122 + kpiIdValue: that.kpiIdValue
123 }; 123 };
124 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) { 124 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
125 - console.log(res.object)  
126 - },function (){  
127 - proxy.$global.showMsg('没有查询到记录！'); 125 + console.log(res.data)
  126 + if(res.success){
  127 + that.allData = res.data
  128 + that.updateChart()
  129 +
  130 + }
128 }); 131 });
129 - this.updateChart() 132 +
130 }, 133 },
131 updateChart () { 134 updateChart () {
132 const sellerNames = this.allData.map((item) => { 135 const sellerNames = this.allData.map((item) => {
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span> 6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
7 <div class="title-left"> 7 <div class="title-left">
8 <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog"> 8 <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
9 - <span :style="datetimeStyle" >2049-01-01 00:00:00</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">
@@ -41,7 +41,8 @@ export default { @@ -41,7 +41,8 @@ export default {
41 }, 41 },
42 data () { 42 data () {
43 return { 43 return {
44 - titleFontSize: 30 44 + titleFontSize: 30,
  45 + dateTime: '00-00-00 00:00:00'
45 } 46 }
46 }, 47 },
47 computed: { 48 computed: {
@@ -72,9 +73,17 @@ export default { @@ -72,9 +73,17 @@ export default {
72 screenAdapter () { 73 screenAdapter () {
73 this.titleFontSize = document.getElementById('bgscreen_ref').offsetWidth / 100 * 3.6 74 this.titleFontSize = document.getElementById('bgscreen_ref').offsetWidth / 100 * 3.6
74 console.log(this.titleFontSize) 75 console.log(this.titleFontSize)
  76 + },
  77 + timeFormat (number) {
  78 + return number.length == 1 ? ('0' + number) : number
75 } 79 }
76 }, 80 },
77 mounted () { 81 mounted () {
  82 + var that = this
  83 + // 获取当前系统时间
  84 + var myDate = new Date();
  85 + 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() + '');
  86 +
78 window.addEventListener('resize', this.screenAdapter) 87 window.addEventListener('resize', this.screenAdapter)
79 this.screenAdapter() 88 this.screenAdapter()
80 }, 89 },