Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
14368e7c by zhangmeng
Options

标头

1 parent dce034b2
Inline Side-by-side
Showing 22 changed files with 277 additions and 181 deletions
index.html
......@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<title>新吴区档案馆服务大厅</title>
<title>财务应收账款看板</title>
<!-- <script src="./browser.js"></script>-->
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
......
src/layoutPc/components/AppHeader.vue
<template>
<!-- <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">-->
<!-- {{ language == 0 ? '登录' : 'LOGIN' }}-->
<!-- </el-button>-->
<!-- <div @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</div>-->
<div>
<!-- <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">-->
<!-- {{ language == 0 ? '登录' : 'LOGIN' }}-->
<!-- </el-button>-->
<!-- <div @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</div>-->
<LoginDialog ref="pcloginDialog" @submitForm="reFlash"/>
<h1 class="text-center m0">新吴区档案馆服务大厅</h1>
<!-- <img alt="" src="@/assets/image/top.png" style="width: 100%">-->
<h1 class="text-top pd20">
数据统计截至2025-03-20 12:00:30
</h1>
<div class="date">
<svg :width="`calc(300*100vw/1920)`" :height="`calc(100*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
<svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
<!-- 定义渐变色 -->
<defs>
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff" />
<!-- <stop offset="70%" stop-color="#fff" />-->
<stop offset="100%" stop-color="#529DFF" />
<linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#fff"/>
<!-- <stop offset="70%" stop-color="#fff" />-->
<stop offset="100%" stop-color="#529DFF"/>
</linearGradient>
</defs>
<!-- 应用渐变色到文本 -->
<text x="0" y="0" fill="url(#gradient)">{{date}}</text>
<text fill="url(#gradient)" x="0" y="0">{{ date }}</text>
</svg>
</div>
</div>
</template>
<script setup>
......@@ -36,7 +39,7 @@ import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import cache from '@/plugins/cache'
import {useStorage} from "@vueuse/core";
import { dayjs } from 'element-plus'
import {dayjs} from 'element-plus'
const router = useRouter()
const route = useRoute()
......@@ -86,12 +89,37 @@ watch(() => useUserStore().visitor, (val) => {
})
</script>
<style scoped lang="scss">
h1{font-family: 'YouSheBiaoTiHei';position: relative;top: calc(15*100vw/1920);
background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);font-size: calc(32*100vw/1920);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.text-center{color: #fff;}
.date{color: #fff;position: absolute;right:calc(30*100vw/1920);}
<style lang="scss" scoped>
h1 {
font-family: 'YouSheBiaoTiHei';
position: relative;
top: calc(15 * 100vw / 1920);
//background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
font-size: calc(32 * 100vw / 1920);
//-webkit-background-clip: text;
//-webkit-text-fill-color: transparent;
}
.text-center {
color: #fff;
}
.text-top {
background: url('@/assets/image/top@2x.png') no-repeat top center;
background-size: 100%;
height: calc(50 * 100vw / 1920);
margin: 0;
font-size: calc(17 * 100vw / 1920);
font-weight: 400;
color: #12BFFF;
line-height: calc(40 * 100vw / 1920);
padding-left: calc(30 * 100vw / 1920)
}
.date {
color: #fff;
position: absolute;
right: calc(30 * 100vw / 1920);
}
</style>
......
src/layoutPc/index.vue
<template>
<div class="bg">
<video id="video" autoplay loop muted src="/bg.mp4"></video>
<app-header />
<app-main />
<app-header/>
<app-main/>
</div>
</template>
<script setup>
import { AppMain, AppHeader, AppBottom } from './components'
import {AppMain, AppHeader, AppBottom} from './components'
</script>
<style lang="scss">
#video{position:absolute;z-index: -1;width: 100%;height: 100%;
object-fit: cover;}
.bg{width: 100vw;height: 100vh;
#video {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.bg {
width: 100vw;
height: 100vh;
//background: rgba(0,0,0,0.75)
background: url("/bg@2x.png") no-repeat top center;
background: url("@/assets/image/bg@2x.png") no-repeat top center;
background-size: 100% 100%;
}
</style>
......
src/viewsPc/home.vue
<template>
<div class="main">
<el-row class="w100">
<el-col :span="7">
<el-col :span="8">
<left-page/>
</el-col>
<el-col :span="10">
<el-col :span="8">
<center-page/>
</el-col>
<el-col :span="7">
<el-col :span="8">
<right-page/>
</el-col>
</el-row>
......@@ -21,14 +21,15 @@ import CenterPage from "@/viewsPc/vip/centerPage"
import RightPage from "@/viewsPc/vip/rightPage"
import {onBeforeUnmount, ref} from "vue";
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, onMounted,onUnmounted} from "@vue/runtime-core";
import {getCurrentInstance, onMounted, onUnmounted} from "@vue/runtime-core";
const {proxy} = getCurrentInstance()
onMounted(()=>{
onMounted(() => {
})
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
</style>
......
src/viewsPc/vip/centerPage.vue
<template>
<!-- -->
<div class="partA">
<rotate-part>
</rotate-part>
<div class="gif_bg">
<img src="@/assets/img/rote.png">
</div>
......@@ -15,64 +12,64 @@
<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%">
<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 x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
非常满意
</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 :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">
<!-- 液体球-->
<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%">
<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 x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
满意
</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 :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="q3box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <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="q3box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <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%">
<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 x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
不满意
</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 :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>
......@@ -117,7 +114,7 @@ let total = 0
let intervalA = null
onMounted(() => {
init()
// init()
window.addEventListener('resize', handleResize);
})
const init = () => {
......@@ -132,7 +129,7 @@ function getdata() {
api.getDegree().then(res => {
list.value = res.data
for (let n in list.value) {
total = total + (list.value[n]||0)
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])
......@@ -143,10 +140,10 @@ function getdata() {
}
function handleResize() {
liquid1.resize()
liquid2.resize()
liquid1?.resize()
liquid2?.resize()
// liquid3.resize()
liquid4.resize()
liquid4?.resize()
// liquid5.resize()
}
......@@ -225,7 +222,7 @@ const setQ1 = (ref, data) => {
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.partA {
min-height: 340px;
height: 70vh;
......@@ -246,7 +243,8 @@ const setQ1 = (ref, data) => {
}
.partB {
display: flex;justify-content: space-around;
display: flex;
justify-content: space-around;
}
.qqbox {
......
src/viewsPc/vip/leftPage.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" />
<el-radio-button label="本季度" value="quarter" />
<el-radio-button label="本年" value="year" />
<el-radio-button label="本月" value="month"/>
<el-radio-button label="本季度" value="quarter"/>
<el-radio-button label="本年" value="year"/>
</el-radio-group>
</div>
<div ref="zhuRef" style="width: 100%; height: 40vh;"></div>
</div>
......@@ -18,9 +16,9 @@
<div class="title">档案检索情况</div>
<div class="po_right">
<el-radio-group v-model="radioB" size="small" @change="radioBChange">
<el-radio-button label="本月" value="month" />
<el-radio-button label="本季度" value="quarter" />
<el-radio-button label="本年" value="year" />
<el-radio-button label="本月" value="month"/>
<el-radio-button label="本季度" value="quarter"/>
<el-radio-button label="本年" value="year"/>
</el-radio-group>
</div>
......@@ -30,7 +28,8 @@
</template>
<script setup>
import { onMounted, ref ,onUnmounted} from 'vue'
import {onMounted, ref, onUnmounted} from 'vue'
import _ from 'lodash'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
......@@ -46,27 +45,31 @@ let chartA
let chartB
let intervalA = null;
onMounted(() => {
init()
// init()
window.addEventListener('resize', handleResize);
})
const init = () => {
if(!intervalA){
if (!intervalA) {
getdata()
}
intervalA = setInterval(getdata, 1000*60*60);
intervalA = setInterval(getdata, 1000 * 60 * 60);
}
const getdata = () => {
clear()
getAdata()
getBdata()
}
const getAdata = () => {
api.getJieDai({type: radioA.value}).then(res => {
dataA.value = []
kindList.value = []
for(let n of res.data){
if(n.count>0){
for (let n of res.data) {
if (n.count > 0) {
kindList.value.push(n.name)
dataA.value.push(n.count)
}
......@@ -74,12 +77,13 @@ const getAdata = () => {
setA()
})
}
const getBdata = () => {
api.getJianSuo({type: radioB.value}).then(res => {
dataA.value = []
kindList.value = []
for(let n of res.data){
if(n.count>0) {
for (let n of res.data) {
if (n.count > 0) {
kindList.value.push(n.name)
dataA.value.push(n.count)
}
......@@ -87,10 +91,11 @@ const getBdata = () => {
setB()
})
}
const setA = () => {
chartA = echarts.init(zhuRef.value)
const option = {
animation:true,
animation: true,
// dataset: dataA.value,
// dataZoom: [
// {
......@@ -125,8 +130,8 @@ const setA = () => {
yAxis: {
name: '单位(次)',
nameTextStyle: {
color:'#7ECEF4',
fontSize:'1.2rem'
color: '#7ECEF4',
fontSize: '1.2rem'
},
axisLine: {
show: false
......@@ -146,14 +151,14 @@ const setA = () => {
}
}
},
tooltip:{
alwaysShowContent:true,
tooltip: {
alwaysShowContent: true,
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText:'box-shadow:none',
extraCssText: 'box-shadow:none',
position: 'top',
textStyle:{
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1rem'
......@@ -166,30 +171,30 @@ const setA = () => {
showBackground: false,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: '#037FC9' },
{ offset: 0, color: '#0C3C7E' }
{offset: 1, color: '#037FC9'},
{offset: 0, color: '#0C3C7E'}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: '#2378f7' },
{ offset: 0, color: '#83bff6' }
{offset: 1, color: '#2378f7'},
{offset: 0, color: '#83bff6'}
])
}
},
data:dataA.value
data: dataA.value
}
]
}
chartA.setOption(option)
autoHover(chartA,option,0,2000)
autoHover(chartA, option, 0, 2000)
}
const setB = () => {
chartB = echarts.init(lineRef.value)
const option = {
animation:true,
animation: true,
grid: {
top: '15%',
left: '12%',
......@@ -213,12 +218,12 @@ const setB = () => {
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
renderModer: 'html',
// alignItems: 'center',
className:'downDot',
className: 'downDot',
backgroundColor: 'rgba(8,13,86,0.2)',
borderWidth: 0,
extraCssText:'box-shadow:none',
extraCssText: 'box-shadow:none',
position: 'top',
textStyle:{
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '10rem'
......@@ -245,8 +250,8 @@ const setB = () => {
yAxis: {
name: '单位(次)',
nameTextStyle: {
color:'#7ECEF4',
fontSize:'1.2rem'
color: '#7ECEF4',
fontSize: '1.2rem'
},
type: 'value',
axisLabel: {
......@@ -270,14 +275,14 @@ const setB = () => {
data: dataA.value,
type: 'line',
itemStyle: {
borderWidth:'0',
borderWidth: '0',
color: '#03DAFD',
},
emphasis: {
itemStyle: {
color: '#fff',
borderColor: '#fff',
borderWidth:'4',
borderWidth: '4',
shadowColor: '#fff',
shadowBlur: '4',
}
......@@ -293,12 +298,14 @@ const setB = () => {
]
}
chartB.setOption(option)
autoHover(chartB,option,0,2000)
autoHover(chartB, option, 0, 2000)
}
const radioAChange = (e) => {
clear()
getAdata()
}
const radioBChange = (e) => {
clear()
getBdata()
......@@ -309,6 +316,7 @@ const clear = () => {
clearTimeout(autoToolTip);
}
}
function autoHover(myChart, option, index, time) {
autoToolTip(myChart, option, {
interval: time,// 轮播间隔时间 默认2s
......@@ -316,67 +324,104 @@ function autoHover(myChart, option, index, time) {
seriesIndex: index, // 第1个被轮播的序列下标
});
}
function handleResize() {
chartA.resize()
chartB.resize()
chartA?.resize()
chartB?.resize()
}
onUnmounted(() => {
if (intervalA) {
clearInterval(intervalA);
}
})
</script>
<style scoped lang="scss">
:deep(.el-radio-button--small .el-radio-button__inner){
font-size: calc(12*100vw/1920);
padding: calc(5*100vw/1920) calc(11*100vw/1920);
<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);
}
.title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;
.title {
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-family: 'YouSheBiaoTiHei';
color: #FFFFFF;
//text-shadow: 0px 4px 3px #003F85;
font-size: calc(17*100vw/1920);
font-size: calc(17 * 100vw / 1920);
background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;position: relative;
-webkit-text-fill-color: transparent;
position: relative;
&::after{
content: '';width: 100%;height: 100%;
background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
&::after {
content: '';
width: 100%;
height: 100%;
background: url("@/assets/img/line2.png") no-repeat;
background-size: contain;
position: absolute;
top: calc(20 * 100vw / 1920);
left: 0;
animation: movelr 4s ease-in infinite;
}
}
@keyframes movelr {
0% {
left: 0;opacity: 1;
left: 0;
opacity: 1;
}
100% {
left: calc(220*100vw/1920);opacity: 0;
left: calc(220 * 100vw / 1920);
opacity: 0;
}
}
.chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left;
background-size: 100% 100%;position: relative;overflow: hidden;
.po_right{position: absolute;right: calc(20*100vw/1920);top: calc(40*100vw/1920);z-index: 1;
:deep(.el-radio-button){
.chartCard {
background: url("@/assets/img/box_bg.png") no-repeat top left;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.po_right {
position: absolute;
right: calc(20 * 100vw / 1920);
top: calc(40 * 100vw / 1920);
z-index: 1;
:deep(.el-radio-button) {
--el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
--el-radio-button-checked-text-color: #fff;
--el-radio-button-disabled-checked-fill: #03DAFD;
--el-radio-button-checked-border-color: #0D599A;
.el-radio-button__inner{color: #7ECEF4;background: transparent;
.el-radio-button__inner {
color: #7ECEF4;
background: transparent;
border-color: #0D599A;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner{
color: #fff;background: linear-gradient(0deg, #2C67B7, #40A5F4);
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #fff;
background: linear-gradient(0deg, #2C67B7, #40A5F4);
}
}
}
}
.downDot{position: relative;
&::after{content: '';width: calc(6*100vw/1920);height: calc(6*100vw/1920);
background: #fff;border-radius: 50%;
position: absolute;bottom: 0;}
.downDot {
position: relative;
&::after {
content: '';
width: calc(6 * 100vw / 1920);
height: calc(6 * 100vw / 1920);
background: #fff;
border-radius: 50%;
position: absolute;
bottom: 0;
}
}
</style>
......
src/viewsPc/vip/rightPage.vue
......@@ -2,12 +2,11 @@
<div class="pd20">
<div class="chartCard">
<div class="title">查档接待情况</div>
<div class="po_right">
<el-radio-group v-model="radioA" size="small" @change="radioAChange">
<el-radio-button label="本月" value="month" />
<el-radio-button label="本季度" value="quarter" />
<el-radio-button label="本年" value="year" />
<el-radio-button label="本月" value="month"/>
<el-radio-button label="本季度" value="quarter"/>
<el-radio-button label="本年" value="year"/>
</el-radio-group>
</div>
......@@ -17,11 +16,11 @@
<div class="chartCard mt30">
<div class="title">档案接收总览</div>
<div class="po_right">
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month" />-->
<!-- <el-radio-button label="本季度" value="quarter" />-->
<!-- <el-radio-button label="本年" value="year" />-->
<!-- </el-radio-group>-->
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month" />-->
<!-- <el-radio-button label="本季度" value="quarter" />-->
<!-- <el-radio-button label="本年" value="year" />-->
<!-- </el-radio-group>-->
</div>
<div ref="lineRef" style="width: 100%; height: 40vh;"></div>
......@@ -35,6 +34,7 @@ import _ from 'lodash'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const zhuRef = ref(null)
const lineRef = ref(null)
const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
......@@ -45,15 +45,15 @@ let chartA
let chartB
let intervalA = null
onMounted(() => {
init()
// init()
window.addEventListener('resize', handleResize);
})
const init = () => {
clear()
if(!intervalA){
if (!intervalA) {
getdata()
}
intervalA = setInterval(getdata, 1000*60*60);
intervalA = setInterval(getdata, 1000 * 60 * 60);
}
const getdata = () => {
getA()
......@@ -61,11 +61,11 @@ const getdata = () => {
}
const getA = () => {
//定时更新
api.getJieYue({type: radioA.value}).then(res=>{
api.getJieYue({type: radioA.value}).then(res => {
dataA.value = []
kindList.value = []
for(let n of res.data){
if(n.count>0) {
for (let n of res.data) {
if (n.count > 0) {
kindList.value.push(n.name)
dataA.value.push(n.count)
}
......@@ -177,11 +177,11 @@ const setA = () => {
}
const getB = () => {
api.getJieShou().then(res=>{
api.getJieShou().then(res => {
dataA.value = []
kindList.value = []
for(let n of res.data){
if(n.count>0) {
for (let n of res.data) {
if (n.count > 0) {
kindList.value.push(n.name)
dataA.value.push(n.count)
}
......@@ -333,9 +333,10 @@ function autoHover(myChart, option, index, time) {
}
function handleResize() {
chartA.resize()
chartB.resize()
chartA?.resize()
chartB?.resize()
}
onUnmounted(() => {
if (intervalA) {
clearInterval(intervalA);
......@@ -343,42 +344,57 @@ onUnmounted(() => {
})
</script>
<style scoped lang="scss">
:deep(.el-radio-button--small .el-radio-button__inner){
font-size: calc(12*100vw/1920);
padding: calc(5*100vw/1920) calc(11*100vw/1920);
<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);
}
.title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;font-family: 'YouSheBiaoTiHei';
.title {
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-family: 'YouSheBiaoTiHei';
color: #FFFFFF;
//text-shadow: 0px 4px 3px #003F85;
background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
-webkit-background-clip: text;
font-size: calc(17*100vw/1920);
-webkit-text-fill-color: transparent;position: relative;
&::after{
content: '';width: 100%;height: 100%;
background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
font-size: calc(17 * 100vw / 1920);
-webkit-text-fill-color: transparent;
position: relative;
&::after {
content: '';
width: 100%;
height: 100%;
background: url("@/assets/img/line2.png") no-repeat;
background-size: contain;
position: absolute;
top: calc(20 * 100vw / 1920);
left: 0;
animation: movelr 4s ease-in infinite;
}
}
@keyframes movelr {
0% {
left: 0;opacity: 1;
left: 0;
opacity: 1;
}
100% {
left: calc(220*100vw/1920);opacity: 0;
left: calc(220 * 100vw / 1920);
opacity: 0;
}
}
.chartCard {
background: url("@/assets/img/box_bg.png") no-repeat top left;
background-size: 100% 100%;
position: relative;overflow: hidden;
position: relative;
overflow: hidden;
.po_right {
position: absolute;
right: calc(20*100vw/1920);
top: calc(40*100vw/1920);
right: calc(20 * 100vw / 1920);
top: calc(40 * 100vw / 1920);
z-index: 1;
:deep(.el-radio-button) {
......@@ -406,8 +422,8 @@ onUnmounted(() => {
&::after {
content: '';
width: calc(6*100vw/1920);
height: calc(6*100vw/1920);
width: calc(6 * 100vw / 1920);
height: calc(6 * 100vw / 1920);
background: #fff;
border-radius: 50%;
position: absolute;
......
vite.config.js
......@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
target: 'http://192.168.1.207:5511/',
// target: 'https://jijin.wtwuxicenter.com/stage-api',
// target: 'http://192.168.1.207:5511/',
target: 'https://jijin.wtwuxicenter.com/stage-api',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!