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
<template>
<!-- -->
<div class="partA">
<rotate-part>
</rotate-part>
<!-- -->
<div class="partA">
<rotate-part>
</rotate-part>
<div class="gif_bg">
<img src="@/assets/img/rote.png">
<div class="gif_bg">
<img src="@/assets/img/rote.png">
</div>
</div>
</div>
<!-- -->
<div class="partB">
<div class="q1box qqbox">
<!-- 液体球-->
<div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">非常满意</text>
<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>
</svg>
</div>
<div class="q2box qqbox">
<!-- 液体球-->
<div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">满意</text>
<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>
</svg>
</div>
<div class="q3box qqbox">
<!-- 液体球-->
<div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">基本满意</text>
<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>
</svg>
</div>
<div class="q4box qqbox">
<!-- 液体球-->
<div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">不满意</text>
<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>
</svg>
<!-- -->
<div class="partB">
<div class="q1box qqbox">
<!-- 液体球-->
<div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
非常满意
</text>
<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>
</svg>
</div>
<div class="q2box qqbox">
<!-- 液体球-->
<div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
满意
</text>
<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>
</svg>
</div>
<div class="q3box qqbox">
<!-- 液体球-->
<div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"
:font-size="`calc(14*100vw/1920)`">基本满意
</text>
<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>
</svg>
</div>
<div class="q4box qqbox">
<!-- 液体球-->
<div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
不满意
</text>
<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>
</svg>
</div>
<!-- <div class="q5box qqbox">-->
<!-- <div ref="q5" style="width: 100%;height: 90px;"></div>-->
<!-- <svg width="100%" height="100">-->
<!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD" />-->
<!-- <stop offset="10%" stop-color="#AEFFF3" />-->
<!-- </linearGradient>-->
<!-- <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>-->
<!-- <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>-->
<!-- </svg>-->
<!-- </div>-->
</div>
<!-- <div class="q5box qqbox">-->
<!-- <div ref="q5" style="width: 100%;height: 90px;"></div>-->
<!-- <svg width="100%" height="100">-->
<!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD" />-->
<!-- <stop offset="10%" stop-color="#AEFFF3" />-->
<!-- </linearGradient>-->
<!-- <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>-->
<!-- <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>-->
<!-- </svg>-->
<!-- </div>-->
</div>
</template>
<script setup>
import rotatePart from './rotatePart'
import { onMounted, ref, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { szToHz } from '@/utils/ruoyi'
import {onMounted, ref, watch} from 'vue'
import {ArrowRight} from '@element-plus/icons-vue'
import {szToHz} from '@/utils/ruoyi'
import 'echarts-liquidfill'
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const statisticStyle = ref({'color':'#fff'})
const statisticStyle = ref({'color': '#fff'})
const q1 = ref(null)
const q2 = ref(null)
const q3 = ref(null)
......@@ -105,33 +121,36 @@ onMounted(() => {
window.addEventListener('resize', handleResize);
})
const init = () => {
if(!intervalA){
if (!intervalA) {
getdata()
}
intervalA = setInterval(getdata, 1000*60*60);
intervalA = setInterval(getdata, 1000 * 60 * 60);
}
function getdata() {
api.getDegree().then(res=>{
api.getDegree().then(res => {
list.value = res.data
for (let n in list.value){
for (let n in list.value) {
total = total + list.value[n]
}
setQ1(q1.value,[list.value['非常满意']/total,list.value['非常满意']/total],liquid1)
setQ1(q2.value,[list.value['满意']/total,list.value['满意']/total],liquid2)
setQ1(q3.value,[list.value['基本满意']/total,list.value['基本满意']/total],liquid3)
setQ1(q4.value,[list.value['不满意']/total,list.value['不满意']/total],liquid4)
setQ1(q5.value,[list.value['非常不满意']/total,list.value['非常不满意']/total],liquid5)
liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total])
liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total])
liquid3 = setQ1(q3.value, [list.value['基本满意'] / total, list.value['基本满意'] / total])
liquid4 = setQ1(q4.value, [list.value['不满意'] / total, list.value['不满意'] / total])
// liquid5 = setQ1(q5.value, [list.value['非常不满意'] / total, list.value['非常不满意'] / total])
})
}
function handleResize() {
liquid1.resize()
liquid2.resize()
liquid3.resize()
liquid4.resize()
liquid5.resize()
// liquid5.resize()
}
const setQ1 = (ref, data, dom) => {
dom = echarts.init(ref)
const setQ1 = (ref, data) => {
let dom = echarts.init(ref)
const option = {
series: [
{
......@@ -200,27 +219,43 @@ const setQ1 = (ref, data, dom) => {
]
}
dom.setOption(option)
return dom
}
</script>
<style scoped lang="scss">
.partA{min-height: 340px;height: 70vh;
.partA {
min-height: 340px;
height: 70vh;
background: url("@/assets/img/pan.png") no-repeat bottom;
background-size: 100% auto;position: relative;
background-size: 100% auto;
position: relative;
}
.gif_bg{width: 100%;position: absolute;bottom: calc(-100*100vw/1920);;
img{width: 100%;
transform: rotate3d(1,0,0,70deg);
.gif_bg {
width: 100%;
position: absolute;
bottom: calc(-100 * 100vw / 1920);;
img {
width: 100%;
transform: rotate3d(1, 0, 0, 70deg);
}
}
.partB{display: flex;}
.qqbox{width: 25%;position: relative;top: calc(-20*100vw/1920);
.partB {
display: flex;
}
.qqbox {
width: 25%;
position: relative;
top: calc(-20 * 100vw / 1920);
background: url("@/assets/img/q1.png") no-repeat bottom center;
background-size: 70%;
}
//.q1box,.q5box{top: -60px}
//.q2box,.q4box{top: -30px}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!