Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
b7998bdf by zhangmeng
Options

大屏初稿

1 parent 787223b9
Inline Side-by-side
Showing 5 changed files with 957 additions and 576 deletions
src/layoutPc/index.vue
......@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
width: 100vw;
height: 100vh;
min-width: 1000px;
//overflow: hidden;
overflow: hidden;
//background: rgba(0,0,0,0.75)
background: url("@/assets/image/bg@2x.png") no-repeat top center;
background-size: 100% 100%;
......
src/store/modules/user.js
import { login, logout, getInfo, loginByPhone } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { getMyOwnMemberInfo } from '@/api/system/userInfo.js'
import { defineStore } from 'pinia'
import {login, logout, getInfo, loginByPhone} from '@/api/login'
import {getToken, setToken, removeToken} from '@/utils/auth'
import {getMyOwnMemberInfo} from '@/api/system/userInfo.js'
import {defineStore} from 'pinia'
import aes from '@/utils/aes'
import { loginDance } from '@/apiPc/login.js'
import { getRemindCount } from '@/api/system/user'
import { ElMessageBox } from 'element-plus'
import {loginDance} from '@/apiPc/login.js'
import {getRemindCount} from '@/api/system/user'
import {ElMessageBox} from 'element-plus'
const useUserStore = defineStore(
'user',
{
state: () => ({
token: getToken(),
user: null,
group: {},
name: '',
nickName: '',
avatar: '',
roles: [],
permissions: [],
memberInfo: {},
authenticationStatus: '', // 是否已认证
deptType: '',
showPrice: false,
perId: '',
personInfo: '',
unit: '',
isExam: '1', // 是否为考点，0：是；1：否,
genFlag: '', // 是否是自动的协会
badge: {},
reLogin: {show:false,query:{}},
visitor: false,
language: 0,
activeName:"5"
}),
actions: {
// 登录
login(userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
loginByPhone(userInfo) {
const phonenumber = userInfo.telNo.trim()
const code = userInfo.code
return new Promise((resolve, reject) => {
loginByPhone(phonenumber, code).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
loginPc(userInfo) {
const username = userInfo.username
const password = userInfo.password
const uuid = userInfo.uuid
const code = userInfo.code
return new Promise((resolve, reject) => {
loginDance(username, password, code, uuid).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
getInfo() {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.data.user
const personInfo = res.data.personInfo
const avatar = user.avatar
if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
this.roles = res.data.roles
this.permissions = res.data.permissions
} else {
this.roles = ['ROLE_DEFAULT']
}
this.user = user
this.group = res.data.group
this.name = user.userName
this.nickName = user.nickName
this.deptType = user.dept.deptType
this.genFlag = user.dept.genFlag
this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1
this.dept = user.dept
this.avatar = avatar
if (personInfo) {
this.perId = aes.encrypt(personInfo.perId)
this.personInfo = personInfo
}
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// 退出系统
logOut() {
return new Promise((resolve, reject) => {
logout(this.token).then(() => {
this.token = ''
this.roles = []
this.permissions = []
this.perId = ''
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取道馆信息
getMemInfo() {
return getMyOwnMemberInfo().then(res => {
this.authenticationStatus = res.data.authenticationStatus
this.memberInfo = res.data.memberInfo
this.isExam = res.data?.dept?.isExam
})
},
getRemindInfo() {
getRemindCount().then((res) => {
this.badge = res.data
})
},
setVisitor() {
this.visitor = true
setTimeout(() => {
this.visitor = false
}, 1000)
},
setReLogin(query) {
console.log(query)
this.reLogin = {show:true,query:query}
setTimeout(() => {
this.reLogin = {show:false,query:query}
}, 1000)
},
checkAndLogin() {
if (!this.perId) {
ElMessageBox.alert('请先登录账号', '系统提示')
.then(() => {
this.setReLogin()
})
'user',
{
state: () => ({
token: getToken(),
user: null,
group: {},
name: '',
nickName: '',
avatar: '',
roles: [],
permissions: [],
memberInfo: {},
authenticationStatus: '', // 是否已认证
deptType: '',
showPrice: false,
perId: '',
personInfo: '',
unit: '',
isExam: '1', // 是否为考点，0：是；1：否,
genFlag: '', // 是否是自动的协会
badge: {},
reLogin: {show: false, query: {}},
visitor: false,
language: 0,
activeName: "5"
}),
actions: {
// 登录
login(userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
loginByPhone(userInfo) {
const phonenumber = userInfo.telNo.trim()
const code = userInfo.code
return new Promise((resolve, reject) => {
loginByPhone(phonenumber, code).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
loginPc(userInfo) {
const username = userInfo.username
const password = userInfo.password
const uuid = userInfo.uuid
const code = userInfo.code
return new Promise((resolve, reject) => {
loginDance(username, password, code, uuid).then(res => {
setToken(res.data.token)
this.token = res.data.token
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
getInfo() {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.data.user
const personInfo = res.data.personInfo
const avatar = user.avatar
if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
this.roles = res.data.roles
this.permissions = res.data.permissions
} else {
this.roles = ['ROLE_DEFAULT']
}
this.user = user
this.group = res.data.group
this.name = user.userName
this.nickName = user.nickName
this.deptType = user.dept.deptType
this.genFlag = user.dept.genFlag
this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1
this.dept = user.dept
this.avatar = avatar
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// 退出系统
logOut() {
return new Promise((resolve, reject) => {
logout(this.token).then(() => {
this.token = ''
this.roles = []
this.permissions = []
this.perId = ''
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取道馆信息
getMemInfo() {
return getMyOwnMemberInfo().then(res => {
this.authenticationStatus = res.data.authenticationStatus
this.memberInfo = res.data.memberInfo
this.isExam = res.data?.dept?.isExam
})
},
getRemindInfo() {
getRemindCount().then((res) => {
this.badge = res.data
})
},
setVisitor() {
this.visitor = true
setTimeout(() => {
this.visitor = false
}, 1000)
},
setReLogin(query) {
console.log(query)
this.reLogin = {show: true, query: query}
setTimeout(() => {
this.reLogin = {show: false, query: query}
}, 1000)
},
checkAndLogin() {
if (!this.perId) {
ElMessageBox.alert('请先登录账号', '系统提示')
.then(() => {
this.setReLogin()
})
return false
} else {
return true
return false
} else {
return true
}
},
updataActiveName(v) {
this.activeName = v
}
}
},
updataActiveName(v){
this.activeName=v
}
}
})
})
export default useUserStore
......
src/viewsPc/vip/centerPage.vue
<template>
<div class="center">
<div class="top">
<div ref="textRef" class="top">
<div class="left">
<div class="titleTop">懂事会得分</div>
<div class="titleCenter">预计得分 <span class="tex1">5</span></div>
......@@ -25,137 +24,116 @@
</div>
</div>
<div class="bottom">
<div ref="boardRef1" style="width: 100%;height: 20vh;">
看板11
<div class="father">
<div style="display: flex">
<div class="bing" style="width: 30%">
<div class="bingTitle">
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
营业收入
</div>
<div ref="bing1" style="width: 100%;height:13vh;">
</div>
<div class="bingBottom">
<div>2025年营业收入</div>
<div>(万元)</div>
</div>
</div>
<div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
</div>
<hr>
</div>
<div ref="boardRef2" style="width: 100%;height: 20vh;">
看板11
<div class="father">
<div style="display: flex">
<div class="bing" style="width: 30%">
<div class="bingTitle">
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
应收余额
</div>
<div ref="bing2" style="width: 100%;height:13vh;">
</div>
<div class="bingBottom">
<div>2025年3月前 累计应收余额</div>
<div>(万元)</div>
</div>
</div>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
</div>
<hr>
</div>
<div ref="boardRef3" style="width: 100%;height: 20vh;">
看板11
<div class="father">
<div style="display: flex">
<div class="bing" style="width: 30%">
<div class="bingTitle">
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
现金余额
</div>
<div ref="bing3" style="width: 100%;height:13vh;">
</div>
<div class="bingBottom">
<div>2025年3月前 累计现金余额</div>
<div>(万元)</div>
</div>
</div>
<div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
</div>
<hr>
</div>
<div ref="boardRef4" style="width: 100%;height: 20vh;">
看板11
<div>
<div ref="zhuRef4" style="width: 100%;height: 17vh">
1234
</div>
</div>
</div>
<!-- &lt;!&ndash; &ndash;&gt;-->
<!-- <div class="partB">-->
<!-- <div class="q1box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 非常满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['非常满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <div class="q2box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="q3box qqbox">&ndash;&gt;-->
<!-- &lt;!&ndash; &lt;!&ndash; 液体球&ndash;&gt;&ndash;&gt;-->
<!-- &lt;!&ndash; <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <svg width="100%" :height="`calc(100*100vw/1920)`">&ndash;&gt;-->
<!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD"/>&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"&ndash;&gt;-->
<!-- &lt;!&ndash; :font-size="`calc(14*100vw/1920)`">基本满意&ndash;&gt;-->
<!-- &lt;!&ndash; </text>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"&ndash;&gt;-->
<!-- &lt;!&ndash; :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}&ndash;&gt;-->
<!-- &lt;!&ndash; </text>&ndash;&gt;-->
<!-- &lt;!&ndash; </svg>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="q4box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 不满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['不满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="q5box qqbox">&ndash;&gt;-->
<!-- &lt;!&ndash; <div ref="q5" style="width: 100%;height: 90px;"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <svg width="100%" height="100">&ndash;&gt;-->
<!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD" />&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3" />&ndash;&gt;-->
<!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>&ndash;&gt;-->
<!-- &lt;!&ndash; </svg>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
</div>
</template>
<script setup>
import {onMounted, ref, watch} from 'vue'
import 'echarts-liquidfill'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
import {onMounted, ref} from 'vue'
const zhuRef1 = ref(null)
const zhuRef2 = ref(null)
const zhuRef3 = ref(null)
const zhuRef4 = ref(null)
const bing1 = ref(null)
const bing2 = ref(null)
const bing3 = ref(null)
const textRef = ref(null)
let chart1
let chart11
let chart2
let chart22
let chart3
let chart33
let chart44
const statisticStyle = ref({'color': '#fff'})
const boardRef1 = ref(null)
const boardRef2 = ref(null)
const boardRef3 = ref(null)
const boardRef4 = ref(null)
const q1 = ref(null)
const q2 = ref(null)
const q3 = ref(null)
const q4 = ref(null)
const q5 = ref(null)
const list = ref([])
let liquid1
let liquid2
let liquid3
let liquid4
let liquid5
let total = 0
let intervalA = null
onMounted(() => {
// init()
window.addEventListener('resize', handleResize);
handelBing1()
handelZhu1()
handelBing2()
handelZhu2()
handelBing3()
handelZhu3()
handelZhu4()
})
const init = () => {
if (!intervalA) {
getdata()
......@@ -170,104 +148,558 @@ function getdata() {
for (let n in list.value) {
total = total + (list.value[n] || 0)
}
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()
chart1?.resize()
chart11?.resize()
chart2?.resize()
chart22?.resize()
chart3?.resize()
chart33?.resize()
chart44?.resize()
}
const setQ1 = (ref, data) => {
let dom = echarts.init(ref)
const handelBing1 = () => {
chart1 = echarts.init(bing1.value)
const option = {
tooltip: {
trigger: ''
},
series: [
{
type: 'liquidFill',
radius: '100%',
center: ['50%', '50%'],
color: [
{
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: ["#2897FE"], // 0% 处的颜色
},
{
offset: 0,
color: ["rgba(0,149,255,0)"], // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
],
data: data, // data个数代表波浪数
amplitude: 5,
// 图形样式
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
label: {
show: false
},
itemStyle: {
opacity: 0.5, // 波浪的透明度
shadowBlur: 2, // 波浪的阴影范围
},
backgroundStyle: {
borderWidth: 2,
borderColor: 'transparent',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'transparent' // 0% 处的颜色
}, {
offset: 1, color: '#144C8A' // 100% 处的颜色
}],
global: false // 缺省为 false
}
borderWidth: 2
},
emphasis: {
scale: false
},
startAngle: 180,
endAngle: 360,
data: [
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
},
{
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
label: {
show: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
emphasis: {
scale: false
},
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'}
]
},
{
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
label: {
show: true,
position: 'center',
formatter: '{b}'
},
emphasis: {
scale: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 735, name: '2025'}
]
},
{
name: '4',
type: 'pie',
radius: ['38%', '50%'],
center: ['50%', '70%'],
label: {
show: false
},
emphasis: {
scale: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [{value: 1048, name: ''}]
}
]
}
chart1.setOption(option)
autoHover(chart1, option, 3, 2000)
}
const handelBing2 = () => {
chart2 = echarts.init(bing2.value)
const option = {
tooltip: {
trigger: ''
},
series: [
{
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
label: {
show: false
},
itemStyle: {
borderWidth: 2
},
emphasis: {
scale: false
},
startAngle: 180,
endAngle: 360,
data: [
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
},
{
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
label: {
show: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
emphasis: {
scale: false
},
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'}
]
},
{
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
label: {
show: true,
textStyle: {
color: '#fff',
shadowColor: '#000',
shadowBlur: 10,
fontSize: '2rem',
},
formatter: (params) => {
return `${(params.value * 100).toFixed(2)}%`;
},
},
outline: {
show: false,
position: 'center',
formatter: '{b}'
},
emphasis: {
scale: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 735, name: '2025'}
]
},
]
}
dom.setOption(option)
return dom
chart2.setOption(option)
autoHover(chart2, option, 2, 2000)
}
const handelBing3 = () => {
chart3 = echarts.init(bing3.value)
const option = {
tooltip: {
trigger: ''
},
series: [
{
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
label: {
show: false
},
itemStyle: {
borderWidth: 2
},
emphasis: {
scale: false
},
startAngle: 180,
endAngle: 360,
data: [
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
},
{
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
label: {
show: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
emphasis: {
scale: false
},
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'}
]
},
{
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
label: {
show: true,
position: 'center',
formatter: '{b}'
},
emphasis: {
scale: false
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 735, name: '2025'}
]
},
]
}
chart3.setOption(option)
autoHover(chart3, option, 2, 2000)
}
const handelZhu1 = () => {
chart11 = echarts.init(zhuRef1.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '0',
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '单位(万)',
}
],
series: [
{
name: '2025年',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
{
name: '2024年',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
},
]
}
chart11.setOption(option)
autoHover(chart11, option, 0, 2000)
}
const handelZhu2 = () => {
chart22 = echarts.init(zhuRef2.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '0',
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '单位(万)',
}
],
series: [
{
name: '2025年',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
{
name: '2024年',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
},
]
}
chart22.setOption(option)
autoHover(chart22, option, 0, 2000)
}
const handelZhu3 = () => {
chart33 = echarts.init(zhuRef3.value)
const option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: '2025年'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['2024年', '2025年',],
textStyle: {
color: "#00DDFF"
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '2024年',
type: 'line',
stack: 'Total',
smooth: false,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 0.3,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 301, 264, 200, 340, 250, 301, 264, 200, 340, 250]
},
{
name: '2025年',
type: 'line',
stack: 'Total',
smooth: false,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 0.3,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: [120, 282, 211, 234, 220, 340, 310, 120, 282, 211, 234, 220]
},
]
}
chart33.setOption(option)
autoHover(chart33, option, 0, 2000)
}
const handelZhu4 = () => {
chart44 = echarts.init(zhuRef4.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
stack: 'Ad',
data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海']
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
}
],
series: [
{
name: '海陆',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
},
]
}
chart44.setOption(option)
autoHover(chart44, option, 0, 2000)
}
function autoHover(myChart, option, index, time) {
autoToolTip(myChart, option, {
interval: time,// 轮播间隔时间 默认2s
loopSeries: false,// 是否循环轮播所有序列
seriesIndex: index, // 第1个被轮播的序列下标
});
}
</script>
<style lang="scss" scoped>
:deep(.el-radio-button--small .el-radio-button__inner) {
font-size: calc(12 * 100vw / 1920);
padding: calc(5 * 100vw / 1920) calc(11 * 100vw / 1920);
}
.center {
width: 100%;
.father {
position: relative;
}
.top {
padding-top: calc(20 * 100vw / 1920);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
.left {
background: url("@/assets/image/box02@2x.png") no-repeat center;
......@@ -359,8 +791,6 @@ const setQ1 = (ref, data) => {
}
}
}
}
}
......@@ -368,44 +798,48 @@ const setQ1 = (ref, data) => {
background: url("@/assets/image/box04@2x.png") no-repeat center;
background-size: 100% 100%;
margin-top: calc(20 * 100vw / 1920);
height: 76vh;
padding: calc(10 * 100vw / 1920);
}
}
position: relative;
overflow: hidden;
.partA {
min-height: 340px;
height: 70vh;
background: url("@/assets/img/pan.png") no-repeat bottom;
background-size: 100% auto;
position: relative;
}
.bing {
text-align: center;
.gif_bg {
width: 100%;
position: absolute;
bottom: calc(-100 * 100vw / 1920);;
.bingTitle {
font-family: PingFang SC, serif;
font-weight: 500;
font-size: calc(18 * 100vw / 1920);
color: #D1D6DF;
text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
margin-top: calc(10 * 100vw / 1920);
img {
width: 100%;
transform: rotate3d(1, 0, 0, 70deg);
}
}
.titleImg {
display: block;
width: calc(50 * 100vw / 1920);
height: calc(20 * 100vw / 1920);
}
}
.partB {
display: flex;
justify-content: space-around;
}
.bingBottom {
position: absolute;
z-index: 99;
bottom: 0;
left: 0;
width: 30%;
.qqbox {
width: 33%;
position: relative;
top: calc(-20 * 100vw / 1920);
background: url("@/assets/img/q1.png") no-repeat bottom center;
background-size: 70%;
div {
font-family: PingFang SC;
font-weight: 400;
font-size: calc(14 * 100vw / 1920);
color: #FFFFFF;
}
}
}
}
}
//.q1box,.q5box{top: -60px}
//.q2box,.q4box{top: -30px}
</style>
......
src/viewsPc/vip/leftPage.vue
......@@ -167,8 +167,7 @@ const setA = () => {
center: ['25%', '50%'],
radius: '5%',
emphasis: {
radius: '5%',
show: false,
scale: false
},
data: [
{value: 110, name: ''},
......@@ -188,9 +187,10 @@ const setA = () => {
avoidLabelOverlap: false,
label: {
show: false,
emphasis: {
show: false
}
},
emphasis: {
scale: false
},
data: [
{value: 12, name: ''},
......@@ -204,6 +204,7 @@ const setA = () => {
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 2,
opacity: 0.8,
// borderColor: '#fff',
},
label: {
......
src/viewsPc/vip/rightPage.vue
<template>
<div class="pd20">
<div class="chartCard">
<div class="title">查档接待情况</div>
<div class="title">开票计划与执行</div>
<div class="po_right">
<el-radio-group v-model="radioA" size="small" @change="radioAChange">
<el-radio-button label="本月" value="month"/>
......@@ -10,11 +10,11 @@
</el-radio-group>
</div>
<div ref="zhuRef" style="width: 100%; height: 40vh;"></div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">档案接收总览</div>
<div class="title">回款</div>
<div class="po_right">
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month" />-->
......@@ -23,7 +23,11 @@
<!-- </el-radio-group>-->
</div>
<div ref="lineRef" style="width: 100%; height: 40vh;"></div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">逾期360天以上未开票</div>
<div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
</div>
</div>
</template>
......@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
const zhuRef = ref(null)
const lineRef = ref(null)
const overdueRef = ref(null)
const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
const radioA = ref('month')
const radioB = ref('month')
let chartA
let chartB
let chartC
let intervalA = null
onMounted(() => {
// init()
window.addEventListener('resize', handleResize);
setA()
setB()
setC()
})
const init = () => {
clear()
......@@ -77,98 +85,51 @@ const getA = () => {
const setA = () => {
chartA = echarts.init(zhuRef.value)
const option = {
animation: true,
// dataZoom: [
// {
// show: false,
// start: 0,
// end: 100
// },
// {
// type: 'inside',
// start: 0,
// end: 100
// }
// ],
xAxis: [{
data: kindList.value,
axisLabel: {
inside: false,
color: '#7ECEF4',
fontSize: '1.1rem'
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
}
},
z: 10
}],
yAxis: {
name: '单位(次)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.3rem'
},
splitLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)',
type: 'dashed'
}
}
},
tooltip: {
alwaysShowContent: true,
formatter: '<div style="font-size: 1.5rem">{c}</div>',
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1.5rem'
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
},
series: [
{
type: 'pictorialBar',
barGap: '0%',
symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
showBackground: false,
itemStyle: {
borderWidth: 0,
borderColor: '#B8FFF4',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: 'rgba(184, 255, 244, 0.1)'},
{offset: 0, color: 'rgba(184, 255, 244, 0.8)'}
])
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
},
{
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
svgPath: 'M0,0 L5,0 L5,5 L0,5 Z',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: '#2378f7'},
{offset: 0, color: '#83bff6'}
])
}
focus: 'series'
},
data: dataA.value
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
}
]
}
......@@ -192,125 +153,113 @@ const getB = () => {
const setB = () => {
chartB = echarts.init(lineRef.value)
const option = {
animation: true,
grid: {
top: '15%',
left: '15%',
right: '10%',
bottom: '12%'
},
// dataZoom: [
// {
// show: false,
// start: 0,
// end: 100
// },
// {
// type: 'inside',
// start: 0,
// end: 100
// }
// ],
tooltip: {
trigger: 'item',
formatter: '<div style="font-size: 1.5rem">{c}</div>',
renderModer: 'html',
className: 'downDot',
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1.5rem'
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: kindList.value,
axisTick: {
show: false
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.1rem',
interval: 0
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
}
},
type: 'value'
},
yAxis: {
name: '单位(卷/件)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
},
type: 'value',
axisLabel: {
fontSize: '1.3rem'
},
axisLine: {
lineStyle: {
color: '#03DAFD',
}
},
splitLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)',
type: 'dashed'
}
}
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
},
series: [
{
data: dataA.value,
type: 'line',
itemStyle: {
borderWidth: '0',
color: '#3A80D5',
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
itemStyle: {
color: '#fff',
borderColor: '#fff',
borderWidth: '4',
shadowColor: '#fff',
shadowBlur: '4',
}
},
label: {
show: false,
position: 'bottom',
formatter: '{c}',
fontSize: 12,
color: '#03DAFD'
focus: 'series'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(128, 255, 165,0.5)'
},
{
offset: 1,
color: 'rgba(1, 191, 236,0.5)'
}
])
}
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
}
]
}
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
}
const setC = () => {
chartC = echarts.init(overdueRef.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '10%',
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
stack: 'Ad',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
}
],
series: [
{
name: '0-180天未开票',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
},
{
name: '180-360天未开票',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
},
{
name: '逾期360天以上',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
]
}
chartC.setOption(option)
autoHover(chartC, option, 0, 2000)
}
const radioAChange = (e) => {
getA()
}
......@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
function handleResize() {
chartA?.resize()
chartB?.resize()
chartC?.resize()
}
onUnmounted(() => {
......@@ -386,7 +336,7 @@ onUnmounted(() => {
}
.chartCard {
background: url("@/assets/img/box_bg.png") no-repeat top left;
background: url("@/assets/image/box01@2x.png") no-repeat top left;
background-size: 100% 100%;
position: relative;
overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!