Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
0a74a5ed by 华明祺
Options

no message

1 parent cf92e7ca
Inline Side-by-side
Showing 1 changed file with 127 additions and 92 deletions
src/viewsPc/vip/centerPage.vue
1 <template> 1 <template>
2 2
3 <!-- --> 3 <!-- -->
4 <div class="partA"> 4 <div class="partA">
5 <rotate-part> 5 <rotate-part>
6 </rotate-part> 6 </rotate-part>
7 7
8 <div class="gif_bg"> 8 <div class="gif_bg">
9 <img src="@/assets/img/rote.png"> 9 <img src="@/assets/img/rote.png">
10 </div>
10 </div> 11 </div>
11 </div> 12
12 13 <!-- -->
13 <!-- --> 14 <div class="partB">
14 <div class="partB"> 15 <div class="q1box qqbox">
15 <div class="q1box qqbox"> 16 <!-- 液体球-->
16 <!-- 液体球--> 17 <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
17 <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div> 18 <svg width="100%" :height="`calc(100*100vw/1920)`">
18 <svg width="100%" :height="`calc(100*100vw/1920)`"> 19 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
19 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 20 <stop offset="0%" stop-color="#03AEFD"/>
20 <stop offset="0%" stop-color="#03AEFD" /> 21 <stop offset="10%" stop-color="#AEFFF3"/>
21 <stop offset="10%" stop-color="#AEFFF3" /> 22 </linearGradient>
22 </linearGradient> 23 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
23 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">非常满意</text> 24 非常满意
24 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['非常满意']}}</text> 25 </text>
25 </svg> 26 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
26 </div> 27 :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['非常满意'] }}
27 <div class="q2box qqbox"> 28 </text>
28 <!-- 液体球--> 29 </svg>
29 <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div> 30 </div>
30 <svg width="100%" :height="`calc(100*100vw/1920)`"> 31 <div class="q2box qqbox">
31 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 32 <!-- 液体球-->
32 <stop offset="0%" stop-color="#03AEFD" /> 33 <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
33 <stop offset="10%" stop-color="#AEFFF3" /> 34 <svg width="100%" :height="`calc(100*100vw/1920)`">
34 </linearGradient> 35 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
35 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">满意</text> 36 <stop offset="0%" stop-color="#03AEFD"/>
36 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['满意']}}</text> 37 <stop offset="10%" stop-color="#AEFFF3"/>
37 </svg> 38 </linearGradient>
38 </div> 39 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
39 <div class="q3box qqbox"> 40 满意
40 <!-- 液体球--> 41 </text>
41 <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div> 42 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
42 <svg width="100%" :height="`calc(100*100vw/1920)`"> 43 :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['满意'] }}
43 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 44 </text>
44 <stop offset="0%" stop-color="#03AEFD" /> 45 </svg>
45 <stop offset="10%" stop-color="#AEFFF3" /> 46 </div>
46 </linearGradient> 47 <div class="q3box qqbox">
47 <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">基本满意</text> 48 <!-- 液体球-->
48 <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['基本满意']}}</text> 49 <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>
49 </svg> 50 <svg width="100%" :height="`calc(100*100vw/1920)`">
50 </div> 51 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
51 <div class="q4box qqbox"> 52 <stop offset="0%" stop-color="#03AEFD"/>
52 <!-- 液体球--> 53 <stop offset="10%" stop-color="#AEFFF3"/>
53 <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div> 54 </linearGradient>
54 <svg width="100%" :height="`calc(100*100vw/1920)`"> 55 <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"
55 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 56 :font-size="`calc(14*100vw/1920)`">基本满意
56 <stop offset="0%" stop-color="#03AEFD" /> 57 </text>
57 <stop offset="10%" stop-color="#AEFFF3" /> 58 <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"
58 </linearGradient> 59 :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}
59 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">不满意</text> 60 </text>
60 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['不满意'] }}</text> 61 </svg>
61 </svg> 62 </div>
63 <div class="q4box qqbox">
64 <!-- 液体球-->
65 <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
66 <svg width="100%" :height="`calc(100*100vw/1920)`">
67 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
68 <stop offset="0%" stop-color="#03AEFD"/>
69 <stop offset="10%" stop-color="#AEFFF3"/>
70 </linearGradient>
71 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
72 不满意
73 </text>
74 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
75 :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['不满意'] }}
76 </text>
77 </svg>
78 </div>
79 <!-- <div class="q5box qqbox">-->
80 <!-- <div ref="q5" style="width: 100%;height: 90px;"></div>-->
81 <!-- <svg width="100%" height="100">-->
82 <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">-->
83 <!-- <stop offset="0%" stop-color="#03AEFD" />-->
84 <!-- <stop offset="10%" stop-color="#AEFFF3" />-->
85 <!-- </linearGradient>-->
86 <!-- <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>-->
87 <!-- <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>-->
88 <!-- </svg>-->
89 <!-- </div>-->
62 </div> 90 </div>
63 <!-- <div class="q5box qqbox">-->
64 <!-- <div ref="q5" style="width: 100%;height: 90px;"></div>-->
65 <!-- <svg width="100%" height="100">-->
66 <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">-->
67 <!-- <stop offset="0%" stop-color="#03AEFD" />-->
68 <!-- <stop offset="10%" stop-color="#AEFFF3" />-->
69 <!-- </linearGradient>-->
70 <!-- <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>-->
71 <!-- <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>-->
72 <!-- </svg>-->
73 <!-- </div>-->
74 </div>
75 91
76 92
77 </template> 93 </template>
78 94
79 <script setup> 95 <script setup>
80 import rotatePart from './rotatePart' 96 import rotatePart from './rotatePart'
81 import { onMounted, ref, watch } from 'vue' 97 import {onMounted, ref, watch} from 'vue'
82 import { ArrowRight } from '@element-plus/icons-vue' 98 import {ArrowRight} from '@element-plus/icons-vue'
83 import { szToHz } from '@/utils/ruoyi' 99 import {szToHz} from '@/utils/ruoyi'
84 import 'echarts-liquidfill' 100 import 'echarts-liquidfill'
85 import * as echarts from "echarts"; 101 import * as echarts from "echarts";
86 import * as api from "@/apiPc/common" 102 import * as api from "@/apiPc/common"
87 103
88 const statisticStyle = ref({'color':'#fff'}) 104 const statisticStyle = ref({'color': '#fff'})
89 const q1 = ref(null) 105 const q1 = ref(null)
90 const q2 = ref(null) 106 const q2 = ref(null)
91 const q3 = ref(null) 107 const q3 = ref(null)
...@@ -105,33 +121,36 @@ onMounted(() => { ...@@ -105,33 +121,36 @@ onMounted(() => {
105 window.addEventListener('resize', handleResize); 121 window.addEventListener('resize', handleResize);
106 }) 122 })
107 const init = () => { 123 const init = () => {
108 if(!intervalA){ 124 if (!intervalA) {
109 getdata() 125 getdata()
110 } 126 }
111 intervalA = setInterval(getdata, 1000*60*60); 127 intervalA = setInterval(getdata, 1000 * 60 * 60);
112 } 128 }
129
113 function getdata() { 130 function getdata() {
114 api.getDegree().then(res=>{ 131 api.getDegree().then(res => {
115 list.value = res.data 132 list.value = res.data
116 for (let n in list.value){ 133 for (let n in list.value) {
117 total = total + list.value[n] 134 total = total + list.value[n]
118 } 135 }
119 setQ1(q1.value,[list.value['非常满意']/total,list.value['非常满意']/total],liquid1) 136 liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total])
120 setQ1(q2.value,[list.value['满意']/total,list.value['满意']/total],liquid2) 137 liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total])
121 setQ1(q3.value,[list.value['基本满意']/total,list.value['基本满意']/total],liquid3) 138 liquid3 = setQ1(q3.value, [list.value['基本满意'] / total, list.value['基本满意'] / total])
122 setQ1(q4.value,[list.value['不满意']/total,list.value['不满意']/total],liquid4) 139 liquid4 = setQ1(q4.value, [list.value['不满意'] / total, list.value['不满意'] / total])
123 setQ1(q5.value,[list.value['非常不满意']/total,list.value['非常不满意']/total],liquid5) 140 // liquid5 = setQ1(q5.value, [list.value['非常不满意'] / total, list.value['非常不满意'] / total])
124 }) 141 })
125 } 142 }
143
126 function handleResize() { 144 function handleResize() {
127 liquid1.resize() 145 liquid1.resize()
128 liquid2.resize() 146 liquid2.resize()
129 liquid3.resize() 147 liquid3.resize()
130 liquid4.resize() 148 liquid4.resize()
131 liquid5.resize() 149 // liquid5.resize()
132 } 150 }
133 const setQ1 = (ref, data, dom) => { 151
134 dom = echarts.init(ref) 152 const setQ1 = (ref, data) => {
153 let dom = echarts.init(ref)
135 const option = { 154 const option = {
136 series: [ 155 series: [
137 { 156 {
...@@ -200,27 +219,43 @@ const setQ1 = (ref, data, dom) => { ...@@ -200,27 +219,43 @@ const setQ1 = (ref, data, dom) => {
200 ] 219 ]
201 } 220 }
202 dom.setOption(option) 221 dom.setOption(option)
222 return dom
203 } 223 }
204 224
205 </script> 225 </script>
206 226
207 <style scoped lang="scss"> 227 <style scoped lang="scss">
208 .partA{min-height: 340px;height: 70vh; 228 .partA {
229 min-height: 340px;
230 height: 70vh;
209 background: url("@/assets/img/pan.png") no-repeat bottom; 231 background: url("@/assets/img/pan.png") no-repeat bottom;
210 background-size: 100% auto;position: relative; 232 background-size: 100% auto;
233 position: relative;
211 } 234 }
212 235
213 .gif_bg{width: 100%;position: absolute;bottom: calc(-100*100vw/1920);; 236 .gif_bg {
214 img{width: 100%; 237 width: 100%;
215 transform: rotate3d(1,0,0,70deg); 238 position: absolute;
239 bottom: calc(-100 * 100vw / 1920);;
240
241 img {
242 width: 100%;
243 transform: rotate3d(1, 0, 0, 70deg);
216 } 244 }
217 } 245 }
218 246
219 .partB{display: flex;} 247 .partB {
220 .qqbox{width: 25%;position: relative;top: calc(-20*100vw/1920); 248 display: flex;
249 }
250
251 .qqbox {
252 width: 25%;
253 position: relative;
254 top: calc(-20 * 100vw / 1920);
221 background: url("@/assets/img/q1.png") no-repeat bottom center; 255 background: url("@/assets/img/q1.png") no-repeat bottom center;
222 background-size: 70%; 256 background-size: 70%;
223 } 257 }
258
224 //.q1box,.q5box{top: -60px} 259 //.q1box,.q5box{top: -60px}
225 //.q2box,.q4box{top: -30px} 260 //.q2box,.q4box{top: -30px}
226 </style> 261 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!