Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1a249169 by xiaomiao
Options

兼容性样式调整

1 parent e27e11dd
Inline Side-by-side
Showing 3 changed files with 255 additions and 266 deletions
...@@ -11,74 +11,74 @@ ...@@ -11,74 +11,74 @@
11 </template> 11 </template>
12 12
13 <script> 13 <script>
14 import maps from "@/components/Echart/Map"; 14 import maps from "@/components/Echart/Map";
15 import brokenline from "@/components/Echart/Brokenline"; 15 import brokenline from "@/components/Echart/Brokenline";
16 export default { 16 export default {
17 data () { 17 data () {
18 return {}; 18 return {};
19 }, 19 },
20 components: { maps, brokenline }, 20 components: { maps, brokenline },
21 mounted () { }, 21 mounted () { },
22 beforeDestroy () { }, 22 beforeDestroy () { },
23 methods: {}, 23 methods: {},
24 }; 24 };
25 </script> 25 </script>
26 26
27 <style lang="scss" scoped> 27 <style lang="scss" scoped>
28 .centercard { 28 .centercard {
29 width: 44%; 29 width: 44%;
30 height: calc(100vh - 114px); 30 height: calc(100vh - 114px);
31 box-sizing: border-box; 31 box-sizing: border-box;
32 padding: 0 .0521rem; 32 padding: 0 0.0521rem;
33 display: flex; 33 display: flex;
34 flex-direction: column; 34 flex-direction: column;
35 35
36 .card1 { 36 .card1 {
37 width: 100%; 37 width: 100%;
38 background: url("~@/image/mapcenter.png") no-repeat; 38 background: url("~@/image/mapcenter.png") no-repeat;
39 background-size: 100% 100%; 39 background-size: 100% 100%;
40 position: relative; 40 position: relative;
41 height: 64%; 41 height: 64%;
42 42
43 .title { 43 .title {
44 position: absolute; 44 position: absolute;
45 font-weight: bold; 45 font-weight: bold;
46 color: #02D9FD; 46 color: #02d9fd;
47 line-height: .1354rem; 47 line-height: 0.1354rem;
48 font-size: .1146rem; 48 font-size: 0.1146rem;
49 position: absolute; 49 position: absolute;
50 left: 0; 50 left: 0;
51 right: 0; 51 right: 0;
52 top: .0365rem; 52 top: 0.0365rem;
53 text-align: right; 53 text-align: right;
54 padding-right: 15%; 54 padding-right: 15%;
55 }
55 } 56 }
56 }
57
58 .card2 {
59 width: 100%;
60 background: url("~@/image/sjqs.png") no-repeat;
61 background-size: 100% 100%;
62 position: relative;
63 flex: 1;
64 57
65 .title { 58 .card2 {
66 position: absolute;
67 font-weight: bold;
68 color: #02D9FD;
69 line-height: .1354rem;
70 font-size: .1146rem;
71 position: absolute;
72 left: 0;
73 right: 0;
74 top: .0365rem;
75 text-align: center;
76 margin-bottom: .0521rem;
77 }
78 .brokenline {
79 margin: auto;
80 width: 100%; 59 width: 100%;
60 background: url("~@/image/sjqs.png") no-repeat;
61 background-size: 100% 100%;
62 position: relative;
63 flex: 1;
64
65 .title {
66 position: absolute;
67 font-weight: bold;
68 color: #02d9fd;
69 line-height: 0.1354rem;
70 font-size: 0.1146rem;
71 position: absolute;
72 left: 0;
73 right: 0;
74 top: 0.0365rem;
75 text-align: center;
76 margin-bottom: 0.0521rem;
77 }
78 .brokenline {
79 margin: auto;
80 width: 100%;
81 }
81 } 82 }
82 } 83 }
83 }
84 </style> 84 </style>
......
...@@ -13,59 +13,57 @@ ...@@ -13,59 +13,57 @@
13 <dv-decoration-5 13 <dv-decoration-5
14 :dur="1" 14 :dur="1"
15 class="dv-dec-5" 15 class="dv-dec-5"
16 :color="decorationColor" 16 :color="decorationColor" />
17 />
18 </div> 17 </div>
19 <dv-decoration-8 18 <dv-decoration-8
20 class="dv-dec-8" 19 class="dv-dec-8"
21 :reverse="true" 20 :reverse="true"
22 :color="decorationColor" 21 :color="decorationColor" />
23 />
24 </div> 22 </div>
25 <dv-decoration-10 class="dv-dec-10-s" /> 23 <dv-decoration-10 class="dv-dec-10-s" />
26 </div> 24 </div>
27 </div> 25 </div>
28 <screencontent v-show="isshow"/> 26 <screencontent v-show="isshow" />
29 </div> 27 </div>
30 </div> 28 </div>
31 </div> 29 </div>
32 </template> 30 </template>
33 <script> 31 <script>
34 import drawMixin from "@/utils/drawMixin"; 32 import drawMixin from "@/utils/drawMixin";
35 import screencontent from "./screencontent"; 33 import screencontent from "./screencontent";
36 export default { 34 export default {
37 mixins: [drawMixin], 35 mixins: [drawMixin],
38 data() { 36 data () {
39 return { 37 return {
40 isshow:true, 38 isshow: true,
41 loading: true, 39 loading: true,
42 decorationColor: ["#568aea", "#568aea"], 40 decorationColor: ["#568aea", "#568aea"],
43 }; 41 };
44 }, 42 },
45 components: { 43 components: {
46 screencontent, 44 screencontent,
47 }, 45 },
48 mounted() { 46 mounted () {
49 47
50 // this.timeFn(); 48 // this.timeFn();
51 this.cancelLoading(); 49 this.cancelLoading();
52 }, 50 },
53 beforeDestroy() { 51 beforeDestroy () {
54 clearInterval(this.timing); 52 clearInterval(this.timing);
55 }, 53 },
56 methods: { 54 methods: {
57 cancelLoading() { 55 cancelLoading () {
58 setTimeout(() => { 56 setTimeout(() => {
59 this.loading = false; 57 this.loading = false;
60 }, 500); 58 }, 500);
59 },
60 },
61 computed: {
62 ...mapGetters(["products"]),
61 }, 63 },
62 }, 64 };
63 computed: {
64 ...mapGetters(["products"]),
65 },
66 };
67 </script> 65 </script>
68 66
69 <style scoped lang="scss"> 67 <style scoped lang="scss">
70 @import "./index.scss"; 68 @import "./index.scss";
71 </style> 69 </style>
......
...@@ -55,206 +55,197 @@ ...@@ -55,206 +55,197 @@
55 55
56 <script> 56 <script>
57 57
58 import columnar from "@/components/Echart/Columnar"; 58 import columnar from "@/components/Echart/Columnar";
59 import work from "@/api/work"; 59 import work from "@/api/work";
60 export default { 60 export default {
61 data () { 61 data () {
62 return { 62 return {
63 // 日均接入量 63 // 日均接入量
64 qxerrer: "", 64 qxerrer: "",
65 qxsuccess: "", 65 qxsuccess: "",
66 sterrer: "", 66 sterrer: "",
67 stsuccess: "", 67 stsuccess: "",
68 qxjrl: "", 68 qxjrl: "",
69 stjrl: "", 69 stjrl: "",
70 qxcgl: "", 70 qxcgl: "",
71 stcgl: "" 71 stcgl: ""
72 }; 72 };
73 },
74 mounted () {
75 this.getsthjqxjrtotal();
76 },
77 components: { columnar },
78 computed: {
79 qxjrlList: function () {
80 return this.qxjrl && this.qxjrl.toString().split("");
81 }, 73 },
82 stjrlList: function () { 74 mounted () {
83 return this.stjrl && this.stjrl.toString().split(""); 75 this.getsthjqxjrtotal();
84 }, 76 },
85 }, 77 components: { columnar },
86 methods: { 78 computed: {
87 getsthjqxjrtotal () { 79 qxjrlList: function () {
88 return new Promise(async (resolve) => { 80 return this.qxjrl && this.qxjrl.toString().split("");
89 try { 81 },
90 let p = { 82 stjrlList: function () {
91 DJLX: "", 83 return this.stjrl && this.stjrl.toString().split("");
92 QLLX: "", 84 },
93 XZQDM: "", 85 },
94 }; 86 methods: {
95 let res = await work.getsthjqxjrtotal(p); 87 getsthjqxjrtotal () {
96 this.stjrl=res.result.stsum 88 return new Promise(async (resolve) => {
97 this.qxjrl=res.result.qxsum 89 try {
98 this.qxerrer=Number(res.result.qxjrerrer) 90 let p = {
99 this.sterrer=Number(res.result.sthjerrer) 91 DJLX: "",
100 if(res.result.sum=="0"){ 92 QLLX: "",
101 this.qxcgl="100%" 93 XZQDM: "",
102 this.stcgl="100%" 94 };
103 }else{ 95 let res = await work.getsthjqxjrtotal(p);
104 let qxcglnum=Number(res.result.qxjrsuccess)/this.qxjrl*100 96 this.stjrl = res.result.stsum
105 let stcgl=Number(res.result.sthjsuccess)/this.qxjrl*100 97 this.qxjrl = res.result.qxsum
106 this.qxcgl=qxcglnum.toFixed(2)+"%"; 98 this.qxerrer = Number(res.result.qxjrerrer)
107 this.stcgl=stcgl.toFixed(2)+"%"; 99 this.sterrer = Number(res.result.sthjerrer)
108 100 if (res.result.sum == "0") {
101 this.qxcgl = "100%"
102 this.stcgl = "100%"
103 } else {
104 let qxcglnum = Number(res.result.qxjrsuccess) / this.qxjrl * 100
105 let stcgl = Number(res.result.sthjsuccess) / this.qxjrl * 100
106 this.qxcgl = qxcglnum.toFixed(2) + "%";
107 this.stcgl = stcgl.toFixed(2) + "%";
108
109 }
110 } catch (error) {
111 this.$refs.msg.messageShow();
109 } 112 }
110 } catch (error) { 113 });
111 this.$refs.msg.messageShow(); 114 },
112 }
113 });
114 }, 115 },
115 }, 116 };
116 };
117 </script> 117 </script>
118 118
119 <style lang="scss" scoped> 119 <style lang="scss" scoped>
120 .leftcard { 120 .leftcard {
121 width: 32%; 121 width: 32%;
122 height: calc(100vh -114px);
123 display: flex;
124 flex-direction: column;
125
126 .card {
127 background: url("~@/image/qxjr.png") no-repeat;
128 background-size: 100% 100%;
129 position: relative;
130 text-align: center;
131 width: 100%;
132 height: 22%;
133 }
134 .carda {
135 background: url("~@/image/sthj.png") no-repeat;
136 background-size: 100% 100%;
137 position: relative;
138 text-align: center;
139 width: 100%;
140 height: 22%;
141 }
142
143 // .card1 {
144 // background: url("~@/image/sbtj.png") no-repeat;
145 // background-size: 100% 100%;
146 // position: relative;
147 // text-align: center;
148 // width: 100%;
149 // padding: .0417rem 0;
150 // height: 49%;
151 // }
152
153 .card1 {
154 background: url("~@/image/sbtj.png") no-repeat;
155 background-size: 100% 100%;
156 position: relative;
157 box-sizing: border-box;
158 flex: 1;
159 height: 56%;
160 }
161
162 .cardhead {
163 color: #02d9fd;
164 line-height: .125rem;
165 letter-spacing: .0104rem;
166 position: absolute;
167 font-size: .1042rem;
168 left: 0;
169 right: 0;
170 margin: auto;
171 text-align: center;
172 top: 8px;
173 font-weight: 700;
174 }
175
176 .rjjrlList {
177 display: flex; 122 display: flex;
178 margin-top: .01781rem; 123 height: calc(100vh - 114px);
124 flex-direction: column;
179 125
180 .qxjr { 126 .card {
181 background: url("~@/image/jrl3.png"); 127 height: 22%;
128 background: url("~@/image/qxjr.png") no-repeat;
182 background-size: 100% 100%; 129 background-size: 100% 100%;
130 position: relative;
131 text-align: center;
132 width: 100%;
183 } 133 }
184 134 .carda {
185 .sthj { 135 height: 22%;
186 background: url("~@/image/jh.png"); 136 background: url("~@/image/sthj.png") no-repeat;
187 background-size: 100% 100%; 137 background-size: 100% 100%;
188 } 138 position: relative;
189 139 text-align: center;
190 p { 140 width: 100%;
191 margin: 0 .0156rem .0521rem .0156rem;
192 font-weight: 700;
193 width: .195rem;
194 height: .2475rem;
195 font-size: .2863rem;
196 font-size: .2867rem;
197 } 141 }
198 }
199 142
200 .cardcontent { 143 .card1 {
201 width: 100%; 144 background: url("~@/image/sbtj.png") no-repeat;
202 height: 100%; 145 background-size: 100% 100%;
203 display: flex;
204 // padding: 35px 20px 20px 20px;
205 box-sizing: border-box;
206 color: #e3f1ff;
207 margin-top: .1263rem;
208
209 .cardcontent-left {
210 width: 60%;
211 flex-direction: column;
212 position: relative; 146 position: relative;
213 li{ 147 box-sizing: border-box;
214 font-size: .1042rem; 148 flex: 1;
215 }
216 } 149 }
217 150
218 .cardcontent-left::before { 151 .cardhead {
152 color: #02d9fd;
153 line-height: 0.125rem;
154 letter-spacing: 0.0104rem;
219 position: absolute; 155 position: absolute;
156 font-size: 0.1042rem;
157 left: 0;
220 right: 0; 158 right: 0;
221 top: .3042rem; 159 margin: auto;
222 content: ""; 160 text-align: center;
223 width: .0052rem; 161 top: 8px;
224 height: .4688rem; 162 font-weight: 700;
225 background: linear-gradient(180deg,
226 #091b4c 0%,
227 #47b5e0 56%,
228 #091b4c 100%);
229 } 163 }
230 164
231 .cardcontent-right { 165 .rjjrlList {
232 flex: 1; 166 display: flex;
233 width: 100%; 167 margin-top: 0.01781rem;
234 flex-direction: column;
235 font-size: .0833rem;
236 168
237 .bad { 169 .qxjr {
238 color: #c97168; 170 background: url("~@/image/jrl3.png");
171 background-size: 100% 100%;
239 } 172 }
240 173
241 .cg { 174 .sthj {
242 color: #5fba7d; 175 background: url("~@/image/jh.png");
176 background-size: 100% 100%;
243 } 177 }
244 178
245 p { 179 p {
246 margin-bottom: .0417rem; 180 margin: 0 0.0156rem 0.0521rem 0.0156rem;
181 font-weight: 700;
182 width: 0.195rem;
183 height: 0.2475rem;
184 font-size: 0.2863rem;
185 font-size: 0.2867rem;
186 }
187 }
188
189 .cardcontent {
190 width: 100%;
191 height: 100%;
192 display: flex;
193 // padding: 35px 20px 20px 20px;
194 box-sizing: border-box;
195 color: #e3f1ff;
196 margin-top: 0.1263rem;
197
198 .cardcontent-left {
199 width: 60%;
200 flex-direction: column;
201 position: relative;
202 li {
203 font-size: 0.1042rem;
204 }
205 }
206
207 .cardcontent-left::before {
208 position: absolute;
209 right: 0;
210 top: 0.3042rem;
211 content: "";
212 width: 0.0052rem;
213 height: 0.4688rem;
214 background: linear-gradient(
215 180deg,
216 #091b4c 0%,
217 #47b5e0 56%,
218 #091b4c 100%
219 );
220 }
221
222 .cardcontent-right {
223 flex: 1;
224 width: 100%;
225 flex-direction: column;
226 font-size: 0.0833rem;
247 227
248 span:nth-child(1) { 228 .bad {
249 margin-right: .0781rem; 229 color: #c97168;
250 } 230 }
251 231
252 span:nth-child(2) { 232 .cg {
253 font-size: .1042rem; 233 color: #5fba7d;
254 font-weight: 900; 234 }
235
236 p {
237 margin-bottom: 0.0417rem;
238
239 span:nth-child(1) {
240 margin-right: 0.0781rem;
241 }
242
243 span:nth-child(2) {
244 font-size: 0.1042rem;
245 font-weight: 900;
246 }
255 } 247 }
256 } 248 }
257 } 249 }
258 } 250 }
259 }
260 </style> 251 </style>
......