Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
787223b9 by zhangmeng
Options

饼图

1 parent 65d3b4bb
Inline Side-by-side
Showing 3 changed files with 225 additions and 73 deletions
src/layoutPc/components/AppHeader.vue
...@@ -105,7 +105,7 @@ h1 { ...@@ -105,7 +105,7 @@ h1 {
105 .text-top { 105 .text-top {
106 background: url('@/assets/image/top@2x.png') no-repeat top center; 106 background: url('@/assets/image/top@2x.png') no-repeat top center;
107 background-size: 100%; 107 background-size: 100%;
108 height: calc(50 * 100vw / 1920); 108 height: calc(63 * 100vw / 1920);
109 margin: 0; 109 margin: 0;
110 font-size: calc(17 * 100vw / 1920); 110 font-size: calc(17 * 100vw / 1920);
111 font-weight: 400; 111 font-weight: 400;
......
src/layoutPc/index.vue
...@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
22 .bg { 22 .bg {
23 width: 100vw; 23 width: 100vw;
24 height: 100vh; 24 height: 100vh;
25 min-width: 1000px;
25 //overflow: hidden; 26 //overflow: hidden;
26 //background: rgba(0,0,0,0.75) 27 //background: rgba(0,0,0,0.75)
27 background: url("@/assets/image/bg@2x.png") no-repeat top center; 28 background: url("@/assets/image/bg@2x.png") no-repeat top center;
......
src/viewsPc/vip/centerPage.vue
1 <template> 1 <template>
2 <div class="partA"> 2 <div class="center">
3 <rotate-part> 3
4 </rotate-part> 4 <div class="top">
5 <div class="gif_bg"> 5 <div class="left">
6 <img src="@/assets/img/rote.png"> 6 <div class="titleTop">懂事会得分</div>
7 <div class="titleCenter">预计得分 <span class="tex1">5</span></div>
8 <div class="titleCenter">标准得分 <span class="tex2">10</span>
9 </div>
10 </div>
11 <div class="right">
12 <div class="rTop">
13 <div>领导重点关注</div>
14 <div><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
15 </div>
16 <div class="rBotton">
17 <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
18 <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
19 <!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
20 <!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
21 <!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
22 <!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
23 </div>
24
7 </div> 25 </div>
8 </div> 26 </div>
9 27
10 <!-- --> 28
11 <div class="partB"> 29 <div class="bottom">
12 <div class="q1box qqbox"> 30 <div ref="boardRef1" style="width: 100%;height: 20vh;">
13 <!-- 液体球--> 31 看板11
14 <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div> 32 </div>
15 <svg :height="`calc(100*100vw/1920)`" width="100%"> 33 <div ref="boardRef2" style="width: 100%;height: 20vh;">
16 <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> 34 看板11
17 <stop offset="0%" stop-color="#03AEFD"/>
18 <stop offset="10%" stop-color="#AEFFF3"/>
19 </linearGradient>
20 <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
21 非常满意
22 </text>
23 <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"
24 text-anchor="middle" x="50%">{{ list['非常满意'] }}
25 </text>
26 </svg>
27 </div> 35 </div>
28 <div class="q2box qqbox"> 36 <div ref="boardRef3" style="width: 100%;height: 20vh;">
29 <!-- 液体球--> 37 看板11
30 <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
31 <svg :height="`calc(100*100vw/1920)`" width="100%">
32 <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
33 <stop offset="0%" stop-color="#03AEFD"/>
34 <stop offset="10%" stop-color="#AEFFF3"/>
35 </linearGradient>
36 <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
37 满意
38 </text>
39 <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"
40 text-anchor="middle" x="50%">{{ list['满意'] }}
41 </text>
42 </svg>
43 </div> 38 </div>
44 <!-- <div class="q3box qqbox">--> 39 <div ref="boardRef4" style="width: 100%;height: 20vh;">
40 看板11
41 </div>
42 </div>
43
44 <!-- &lt;!&ndash; &ndash;&gt;-->
45 <!-- <div class="partB">-->
46 <!-- <div class="q1box qqbox">-->
45 <!-- &lt;!&ndash; 液体球&ndash;&gt;--> 47 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
46 <!-- <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>--> 48 <!-- <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
47 <!-- <svg width="100%" :height="`calc(100*100vw/1920)`">--> 49 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
48 <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">--> 50 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
49 <!-- <stop offset="0%" stop-color="#03AEFD"/>--> 51 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
50 <!-- <stop offset="10%" stop-color="#AEFFF3"/>--> 52 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
51 <!-- </linearGradient>--> 53 <!-- </linearGradient>-->
52 <!-- <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"--> 54 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
53 <!-- :font-size="`calc(14*100vw/1920)`">基本满意--> 55 <!-- 非常满意-->
54 <!-- </text>--> 56 <!-- </text>-->
55 <!-- <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"--> 57 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
56 <!-- :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}--> 58 <!-- text-anchor="middle" x="50%">{{ list['非常满意'] }}-->
57 <!-- </text>--> 59 <!-- </text>-->
58 <!-- </svg>--> 60 <!-- </svg>-->
59 <!-- </div>--> 61 <!-- </div>-->
60 <div class="q4box qqbox"> 62 <!-- <div class="q2box qqbox">-->
61 <!-- 液体球--> 63 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
62 <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div> 64 <!-- <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
63 <svg :height="`calc(100*100vw/1920)`" width="100%"> 65 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
64 <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> 66 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
65 <stop offset="0%" stop-color="#03AEFD"/> 67 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
66 <stop offset="10%" stop-color="#AEFFF3"/> 68 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
67 </linearGradient> 69 <!-- </linearGradient>-->
68 <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%"> 70 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
69 不满意 71 <!-- 满意-->
70 </text> 72 <!-- </text>-->
71 <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold" 73 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
72 text-anchor="middle" x="50%">{{ list['不满意'] }} 74 <!-- text-anchor="middle" x="50%">{{ list['满意'] }}-->
73 </text> 75 <!-- </text>-->
74 </svg> 76 <!-- </svg>-->
75 </div> 77 <!-- </div>-->
76 <!-- <div class="q5box qqbox">--> 78 <!-- &lt;!&ndash; <div class="q3box qqbox">&ndash;&gt;-->
77 <!-- <div ref="q5" style="width: 100%;height: 90px;"></div>--> 79 <!-- &lt;!&ndash; &lt;!&ndash; 液体球&ndash;&gt;&ndash;&gt;-->
78 <!-- <svg width="100%" height="100">--> 80 <!-- &lt;!&ndash; <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>&ndash;&gt;-->
79 <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">--> 81 <!-- &lt;!&ndash; <svg width="100%" :height="`calc(100*100vw/1920)`">&ndash;&gt;-->
80 <!-- <stop offset="0%" stop-color="#03AEFD" />--> 82 <!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
81 <!-- <stop offset="10%" stop-color="#AEFFF3" />--> 83 <!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD"/>&ndash;&gt;-->
84 <!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3"/>&ndash;&gt;-->
85 <!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
86 <!-- &lt;!&ndash; <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"&ndash;&gt;-->
87 <!-- &lt;!&ndash; :font-size="`calc(14*100vw/1920)`">基本满意&ndash;&gt;-->
88 <!-- &lt;!&ndash; </text>&ndash;&gt;-->
89 <!-- &lt;!&ndash; <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"&ndash;&gt;-->
90 <!-- &lt;!&ndash; :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}&ndash;&gt;-->
91 <!-- &lt;!&ndash; </text>&ndash;&gt;-->
92 <!-- &lt;!&ndash; </svg>&ndash;&gt;-->
93 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
94 <!-- <div class="q4box qqbox">-->
95 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
96 <!-- <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>-->
97 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
98 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
99 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
100 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
82 <!-- </linearGradient>--> 101 <!-- </linearGradient>-->
83 <!-- <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>--> 102 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
84 <!-- <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>--> 103 <!-- 不满意-->
104 <!-- </text>-->
105 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
106 <!-- text-anchor="middle" x="50%">{{ list['不满意'] }}-->
107 <!-- </text>-->
85 <!-- </svg>--> 108 <!-- </svg>-->
86 <!-- </div>--> 109 <!-- </div>-->
110 <!-- &lt;!&ndash; <div class="q5box qqbox">&ndash;&gt;-->
111 <!-- &lt;!&ndash; <div ref="q5" style="width: 100%;height: 90px;"></div>&ndash;&gt;-->
112 <!-- &lt;!&ndash; <svg width="100%" height="100">&ndash;&gt;-->
113 <!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
114 <!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD" />&ndash;&gt;-->
115 <!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3" />&ndash;&gt;-->
116 <!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
117 <!-- &lt;!&ndash; <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>&ndash;&gt;-->
118 <!-- &lt;!&ndash; <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>&ndash;&gt;-->
119 <!-- &lt;!&ndash; </svg>&ndash;&gt;-->
120 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
121 <!-- </div>-->
122
87 </div> 123 </div>
88 124
89 125
90 </template> 126 </template>
91 127
92 <script setup> 128 <script setup>
93 import rotatePart from './rotatePart'
94 import {onMounted, ref, watch} from 'vue' 129 import {onMounted, ref, watch} from 'vue'
95 import {ArrowRight} from '@element-plus/icons-vue'
96 import {szToHz} from '@/utils/ruoyi'
97 import 'echarts-liquidfill' 130 import 'echarts-liquidfill'
98 import * as echarts from "echarts"; 131 import * as echarts from "echarts";
99 import * as api from "@/apiPc/common" 132 import * as api from "@/apiPc/common"
100 133
101 const statisticStyle = ref({'color': '#fff'}) 134 const statisticStyle = ref({'color': '#fff'})
135
136 const boardRef1 = ref(null)
137 const boardRef2 = ref(null)
138 const boardRef3 = ref(null)
139 const boardRef4 = ref(null)
140
102 const q1 = ref(null) 141 const q1 = ref(null)
103 const q2 = ref(null) 142 const q2 = ref(null)
104 const q3 = ref(null) 143 const q3 = ref(null)
...@@ -223,6 +262,118 @@ const setQ1 = (ref, data) => { ...@@ -223,6 +262,118 @@ const setQ1 = (ref, data) => {
223 </script> 262 </script>
224 263
225 <style lang="scss" scoped> 264 <style lang="scss" scoped>
265 .center {
266 .top {
267 padding-top: calc(20 * 100vw / 1920);
268 display: flex;
269 justify-content: space-between;
270 align-items: center;
271
272 .left {
273 background: url("@/assets/image/box02@2x.png") no-repeat center;
274 background-size: 100% 100%;
275 width: calc(140 * 100vw / 1920);
276 height: calc(100 * 100vw / 1920);
277
278 .titleTop {
279 text-align: center;
280 font-family: PingFang SC, serif;
281 font-weight: 600;
282 font-size: calc(20 * 100vw / 1920);
283 color: #FFFFFF;
284 text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
285 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
286 -webkit-background-clip: text;
287 -webkit-text-fill-color: transparent;
288 }
289
290 .titleCenter {
291 //text-align: center;
292 padding-left: calc(21 * 100vw / 1920);
293 font-family: PingFang SC, serif;
294 font-weight: 400;
295 font-size: calc(15 * 100vw / 1920);
296 color: #FFFFFF;
297 margin-top: calc(11 * 100vw / 1920);
298
299 span {
300 margin-left: calc(10 * 100vw / 1920);
301 font-size: calc(17 * 100vw / 1920);
302 }
303
304 .tex1 {
305 color: #F4AB09
306 }
307
308 .tex2 {
309 color: #1DFBD1;
310 }
311 }
312
313 }
314
315 .right {
316 background: url("@/assets/image/box03@2x.png") no-repeat center;
317 background-size: 100% 100%;
318 width: calc(480 * 100vw / 1920);
319 height: calc(110 * 100vw / 1920);
320 padding: calc(13 * 100vw / 1920) calc(35 * 100vw / 1920);
321
322 .rTop {
323 display: flex;
324 justify-content: space-between;
325 font-family: PingFang SC, serif;
326 font-weight: 600;
327 font-size: calc(20 * 100vw / 1920);
328 color: #FFFFFF;
329 text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
330 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
331 -webkit-background-clip: text;
332 -webkit-text-fill-color: transparent;
333
334 .rTop-img {
335 width: calc(30 * 100vw / 1920);
336 height: calc(12 * 100vw / 1920);
337 }
338 }
339
340 .rBotton {
341 height: calc(60 * 100vw / 1920);
342 //overflow-y: scroll;
343 .row-text {
344 font-family: PingFang SC, serif;
345 font-weight: 400;
346 font-size: calc(17 * 100vw / 1920);
347 color: #FFFFFF;
348 height: calc(20 * 100vw / 1920);
349 margin: calc(8 * 100vw / 1920) 0;
350
351 span {
352 display: inline-block;
353 width: calc(12 * 100vw / 1920);
354 height: calc(12 * 100vw / 1920);
355 background-color: #01D7F0;
356 transform: rotate(45deg);
357 margin-left: calc(3 * 100vw / 1920);
358 border-radius: calc(3 * 100vw / 1920);
359 }
360 }
361 }
362
363
364 }
365 }
366
367 .bottom {
368 background: url("@/assets/image/box04@2x.png") no-repeat center;
369 background-size: 100% 100%;
370 margin-top: calc(20 * 100vw / 1920);
371 height: 76vh;
372 padding: calc(10 * 100vw / 1920);
373 }
374 }
375
376
226 .partA { 377 .partA {
227 min-height: 340px; 378 min-height: 340px;
228 height: 70vh; 379 height: 70vh;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!