标头
Showing
22 changed files
with
289 additions
and
193 deletions
| ... | @@ -7,7 +7,7 @@ | ... | @@ -7,7 +7,7 @@ |
| 7 | <meta name="renderer" content="webkit"> | 7 | <meta name="renderer" content="webkit"> |
| 8 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | 8 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| 9 | <link rel="icon" href="/favicon.ico"> | 9 | <link rel="icon" href="/favicon.ico"> |
| 10 | <title>新吴区档案馆服务大厅</title> | 10 | <title>财务应收账款看板</title> |
| 11 | <!-- <script src="./browser.js"></script>--> | 11 | <!-- <script src="./browser.js"></script>--> |
| 12 | <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> | 12 | <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
| 13 | 13 | ... | ... |
src/assets/image/bg.png
0 → 100644
702 KB
src/assets/image/bg@2x.png
0 → 100644
1.67 MB
src/assets/image/box01.png
0 → 100644
34.9 KB
src/assets/image/box01@2x.png
0 → 100644
85.8 KB
src/assets/image/box02.png
0 → 100644
4.22 KB
src/assets/image/box02@2x.png
0 → 100644
11.1 KB
src/assets/image/box03.png
0 → 100644
63.8 KB
src/assets/image/box03@2x.png
0 → 100644
139 KB
src/assets/image/box04.png
0 → 100644
31.4 KB
src/assets/image/box04@2x.png
0 → 100644
87.6 KB
src/assets/image/more.png
0 → 100644
959 Bytes
src/assets/image/more@2x.png
0 → 100644
2.39 KB
src/assets/image/top.png
0 → 100644
94.1 KB
src/assets/image/top@2x.png
0 → 100644
276 KB
| 1 | <template> | 1 | <template> |
| 2 | <!-- <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">--> | 2 | <div> |
| 3 | <!-- {{ language == 0 ? '登录' : 'LOGIN' }}--> | 3 | <!-- <el-button v-if="!isLogin" @click="goLogin" style="border-radius: 20px;" class="loginBtn">--> |
| 4 | <!-- </el-button>--> | 4 | <!-- {{ language == 0 ? '登录' : 'LOGIN' }}--> |
| 5 | <!-- <div @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</div>--> | 5 | <!-- </el-button>--> |
| 6 | <LoginDialog ref="pcloginDialog" @submitForm="reFlash"/> | 6 | <!-- <div @click="logout()">{{ language == 0 ? '退出' : 'Exit' }}</div>--> |
| 7 | 7 | <LoginDialog ref="pcloginDialog" @submitForm="reFlash"/> | |
| 8 | <h1 class="text-center m0">新吴区档案馆服务大厅</h1> | 8 | <!-- <img alt="" src="@/assets/image/top.png" style="width: 100%">--> |
| 9 | <div class="date"> | 9 | <h1 class="text-top pd20"> |
| 10 | <svg :width="`calc(300*100vw/1920)`" :height="`calc(100*100vw/1920)`" xmlns="http://www.w3.org/2000/svg"> | 10 | 数据统计截至2025-03-20 12:00:30 |
| 11 | <!-- 定义渐变色 --> | 11 | </h1> |
| 12 | <defs> | 12 | <div class="date"> |
| 13 | <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> | 13 | <svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg"> |
| 14 | <stop offset="0%" stop-color="#fff" /> | 14 | <!-- 定义渐变色 --> |
| 15 | <!-- <stop offset="70%" stop-color="#fff" />--> | 15 | <defs> |
| 16 | <stop offset="100%" stop-color="#529DFF" /> | 16 | <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> |
| 17 | </linearGradient> | 17 | <stop offset="0%" stop-color="#fff"/> |
| 18 | </defs> | 18 | <!-- <stop offset="70%" stop-color="#fff" />--> |
| 19 | <!-- 应用渐变色到文本 --> | 19 | <stop offset="100%" stop-color="#529DFF"/> |
| 20 | <text x="0" y="0" fill="url(#gradient)">{{date}}</text> | 20 | </linearGradient> |
| 21 | </svg> | 21 | </defs> |
| 22 | <!-- 应用渐变色到文本 --> | ||
| 23 | <text fill="url(#gradient)" x="0" y="0">{{ date }}</text> | ||
| 24 | </svg> | ||
| 25 | </div> | ||
| 22 | </div> | 26 | </div> |
| 23 | |||
| 24 | </template> | 27 | </template> |
| 25 | 28 | ||
| 26 | <script setup> | 29 | <script setup> |
| ... | @@ -36,7 +39,7 @@ import Captcha from './captcha' | ... | @@ -36,7 +39,7 @@ import Captcha from './captcha' |
| 36 | import CaptchaSms from './captchaSms' | 39 | import CaptchaSms from './captchaSms' |
| 37 | import cache from '@/plugins/cache' | 40 | import cache from '@/plugins/cache' |
| 38 | import {useStorage} from "@vueuse/core"; | 41 | import {useStorage} from "@vueuse/core"; |
| 39 | import { dayjs } from 'element-plus' | 42 | import {dayjs} from 'element-plus' |
| 40 | 43 | ||
| 41 | const router = useRouter() | 44 | const router = useRouter() |
| 42 | const route = useRoute() | 45 | const route = useRoute() |
| ... | @@ -86,12 +89,37 @@ watch(() => useUserStore().visitor, (val) => { | ... | @@ -86,12 +89,37 @@ watch(() => useUserStore().visitor, (val) => { |
| 86 | }) | 89 | }) |
| 87 | </script> | 90 | </script> |
| 88 | 91 | ||
| 89 | <style scoped lang="scss"> | 92 | <style lang="scss" scoped> |
| 90 | h1{font-family: 'YouSheBiaoTiHei';position: relative;top: calc(15*100vw/1920); | 93 | h1 { |
| 91 | background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);font-size: calc(32*100vw/1920); | 94 | font-family: 'YouSheBiaoTiHei'; |
| 92 | -webkit-background-clip: text; | 95 | position: relative; |
| 93 | -webkit-text-fill-color: transparent;} | 96 | top: calc(15 * 100vw / 1920); |
| 94 | .text-center{color: #fff;} | 97 | //background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%); |
| 95 | .date{color: #fff;position: absolute;right:calc(30*100vw/1920);} | 98 | font-size: calc(32 * 100vw / 1920); |
| 99 | //-webkit-background-clip: text; | ||
| 100 | //-webkit-text-fill-color: transparent; | ||
| 101 | } | ||
| 102 | |||
| 103 | .text-center { | ||
| 104 | color: #fff; | ||
| 105 | } | ||
| 106 | |||
| 107 | .text-top { | ||
| 108 | background: url('@/assets/image/top@2x.png') no-repeat top center; | ||
| 109 | background-size: 100%; | ||
| 110 | height: calc(50 * 100vw / 1920); | ||
| 111 | margin: 0; | ||
| 112 | font-size: calc(17 * 100vw / 1920); | ||
| 113 | font-weight: 400; | ||
| 114 | color: #12BFFF; | ||
| 115 | line-height: calc(40 * 100vw / 1920); | ||
| 116 | padding-left: calc(30 * 100vw / 1920) | ||
| 117 | } | ||
| 118 | |||
| 119 | .date { | ||
| 120 | color: #fff; | ||
| 121 | position: absolute; | ||
| 122 | right: calc(30 * 100vw / 1920); | ||
| 123 | } | ||
| 96 | </style> | 124 | </style> |
| 97 | 125 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="bg"> | 2 | <div class="bg"> |
| 3 | <video id="video" autoplay loop muted src="/bg.mp4"></video> | 3 | <video id="video" autoplay loop muted src="/bg.mp4"></video> |
| 4 | <app-header /> | 4 | <app-header/> |
| 5 | <app-main /> | 5 | <app-main/> |
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| 8 | 8 | ||
| 9 | <script setup> | 9 | <script setup> |
| 10 | import { AppMain, AppHeader, AppBottom } from './components' | 10 | import {AppMain, AppHeader, AppBottom} from './components' |
| 11 | </script> | 11 | </script> |
| 12 | 12 | ||
| 13 | <style lang="scss"> | 13 | <style lang="scss"> |
| 14 | #video{position:absolute;z-index: -1;width: 100%;height: 100%; | 14 | #video { |
| 15 | object-fit: cover;} | 15 | position: absolute; |
| 16 | .bg{width: 100vw;height: 100vh; | 16 | z-index: -1; |
| 17 | width: 100%; | ||
| 18 | height: 100%; | ||
| 19 | object-fit: cover; | ||
| 20 | } | ||
| 21 | |||
| 22 | .bg { | ||
| 23 | width: 100vw; | ||
| 24 | height: 100vh; | ||
| 17 | //background: rgba(0,0,0,0.75) | 25 | //background: rgba(0,0,0,0.75) |
| 18 | background: url("/bg@2x.png") no-repeat top center; | 26 | background: url("@/assets/image/bg@2x.png") no-repeat top center; |
| 19 | background-size: 100% 100%; | 27 | background-size: 100% 100%; |
| 20 | } | 28 | } |
| 21 | </style> | 29 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="main"> | 2 | <div class="main"> |
| 3 | <el-row class="w100"> | 3 | <el-row class="w100"> |
| 4 | <el-col :span="7"> | 4 | <el-col :span="8"> |
| 5 | <left-page/> | 5 | <left-page/> |
| 6 | </el-col> | 6 | </el-col> |
| 7 | <el-col :span="10"> | 7 | <el-col :span="8"> |
| 8 | <center-page/> | 8 | <center-page/> |
| 9 | </el-col> | 9 | </el-col> |
| 10 | <el-col :span="7"> | 10 | <el-col :span="8"> |
| 11 | <right-page/> | 11 | <right-page/> |
| 12 | </el-col> | 12 | </el-col> |
| 13 | </el-row> | 13 | </el-row> |
| ... | @@ -21,14 +21,15 @@ import CenterPage from "@/viewsPc/vip/centerPage" | ... | @@ -21,14 +21,15 @@ import CenterPage from "@/viewsPc/vip/centerPage" |
| 21 | import RightPage from "@/viewsPc/vip/rightPage" | 21 | import RightPage from "@/viewsPc/vip/rightPage" |
| 22 | import {onBeforeUnmount, ref} from "vue"; | 22 | import {onBeforeUnmount, ref} from "vue"; |
| 23 | import {useStorage} from "@vueuse/core/index"; | 23 | import {useStorage} from "@vueuse/core/index"; |
| 24 | import {getCurrentInstance, onMounted,onUnmounted} from "@vue/runtime-core"; | 24 | import {getCurrentInstance, onMounted, onUnmounted} from "@vue/runtime-core"; |
| 25 | |||
| 25 | const {proxy} = getCurrentInstance() | 26 | const {proxy} = getCurrentInstance() |
| 26 | 27 | ||
| 27 | 28 | ||
| 28 | onMounted(()=>{ | 29 | onMounted(() => { |
| 29 | 30 | ||
| 30 | }) | 31 | }) |
| 31 | </script> | 32 | </script> |
| 32 | 33 | ||
| 33 | <style scoped lang="scss"> | 34 | <style lang="scss" scoped> |
| 34 | </style> | 35 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | |||
| 3 | <!-- --> | ||
| 4 | <div class="partA"> | 2 | <div class="partA"> |
| 5 | <rotate-part> | 3 | <rotate-part> |
| 6 | </rotate-part> | 4 | </rotate-part> |
| 7 | |||
| 8 | <div class="gif_bg"> | 5 | <div class="gif_bg"> |
| 9 | <img src="@/assets/img/rote.png"> | 6 | <img src="@/assets/img/rote.png"> |
| 10 | </div> | 7 | </div> |
| ... | @@ -15,64 +12,64 @@ | ... | @@ -15,64 +12,64 @@ |
| 15 | <div class="q1box qqbox"> | 12 | <div class="q1box qqbox"> |
| 16 | <!-- 液体球--> | 13 | <!-- 液体球--> |
| 17 | <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div> | 14 | <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div> |
| 18 | <svg width="100%" :height="`calc(100*100vw/1920)`"> | 15 | <svg :height="`calc(100*100vw/1920)`" width="100%"> |
| 19 | <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> | 16 | <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> |
| 20 | <stop offset="0%" stop-color="#03AEFD"/> | 17 | <stop offset="0%" stop-color="#03AEFD"/> |
| 21 | <stop offset="10%" stop-color="#AEFFF3"/> | 18 | <stop offset="10%" stop-color="#AEFFF3"/> |
| 22 | </linearGradient> | 19 | </linearGradient> |
| 23 | <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`"> | 20 | <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%"> |
| 24 | 非常满意 | 21 | 非常满意 |
| 25 | </text> | 22 | </text> |
| 26 | <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" | 23 | <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold" |
| 27 | :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['非常满意'] }} | 24 | text-anchor="middle" x="50%">{{ list['非常满意'] }} |
| 28 | </text> | 25 | </text> |
| 29 | </svg> | 26 | </svg> |
| 30 | </div> | 27 | </div> |
| 31 | <div class="q2box qqbox"> | 28 | <div class="q2box qqbox"> |
| 32 | <!-- 液体球--> | 29 | <!-- 液体球--> |
| 33 | <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div> | 30 | <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div> |
| 34 | <svg width="100%" :height="`calc(100*100vw/1920)`"> | 31 | <svg :height="`calc(100*100vw/1920)`" width="100%"> |
| 35 | <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> | 32 | <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> |
| 36 | <stop offset="0%" stop-color="#03AEFD"/> | 33 | <stop offset="0%" stop-color="#03AEFD"/> |
| 37 | <stop offset="10%" stop-color="#AEFFF3"/> | 34 | <stop offset="10%" stop-color="#AEFFF3"/> |
| 38 | </linearGradient> | 35 | </linearGradient> |
| 39 | <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`"> | 36 | <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%"> |
| 40 | 满意 | 37 | 满意 |
| 41 | </text> | 38 | </text> |
| 42 | <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" | 39 | <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold" |
| 43 | :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['满意'] }} | 40 | text-anchor="middle" x="50%">{{ list['满意'] }} |
| 44 | </text> | 41 | </text> |
| 45 | </svg> | 42 | </svg> |
| 46 | </div> | 43 | </div> |
| 47 | <!-- <div class="q3box qqbox">--> | 44 | <!-- <div class="q3box qqbox">--> |
| 48 | <!-- <!– 液体球–>--> | 45 | <!-- <!– 液体球–>--> |
| 49 | <!-- <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>--> | 46 | <!-- <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>--> |
| 50 | <!-- <svg width="100%" :height="`calc(100*100vw/1920)`">--> | 47 | <!-- <svg width="100%" :height="`calc(100*100vw/1920)`">--> |
| 51 | <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">--> | 48 | <!-- <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">--> |
| 52 | <!-- <stop offset="0%" stop-color="#03AEFD"/>--> | 49 | <!-- <stop offset="0%" stop-color="#03AEFD"/>--> |
| 53 | <!-- <stop offset="10%" stop-color="#AEFFF3"/>--> | 50 | <!-- <stop offset="10%" stop-color="#AEFFF3"/>--> |
| 54 | <!-- </linearGradient>--> | 51 | <!-- </linearGradient>--> |
| 55 | <!-- <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"--> | 52 | <!-- <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"--> |
| 56 | <!-- :font-size="`calc(14*100vw/1920)`">基本满意--> | 53 | <!-- :font-size="`calc(14*100vw/1920)`">基本满意--> |
| 57 | <!-- </text>--> | 54 | <!-- </text>--> |
| 58 | <!-- <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"--> | 55 | <!-- <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"--> |
| 59 | <!-- :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}--> | 56 | <!-- :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}--> |
| 60 | <!-- </text>--> | 57 | <!-- </text>--> |
| 61 | <!-- </svg>--> | 58 | <!-- </svg>--> |
| 62 | <!-- </div>--> | 59 | <!-- </div>--> |
| 63 | <div class="q4box qqbox"> | 60 | <div class="q4box qqbox"> |
| 64 | <!-- 液体球--> | 61 | <!-- 液体球--> |
| 65 | <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div> | 62 | <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div> |
| 66 | <svg width="100%" :height="`calc(100*100vw/1920)`"> | 63 | <svg :height="`calc(100*100vw/1920)`" width="100%"> |
| 67 | <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> | 64 | <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%"> |
| 68 | <stop offset="0%" stop-color="#03AEFD"/> | 65 | <stop offset="0%" stop-color="#03AEFD"/> |
| 69 | <stop offset="10%" stop-color="#AEFFF3"/> | 66 | <stop offset="10%" stop-color="#AEFFF3"/> |
| 70 | </linearGradient> | 67 | </linearGradient> |
| 71 | <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`"> | 68 | <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%"> |
| 72 | 不满意 | 69 | 不满意 |
| 73 | </text> | 70 | </text> |
| 74 | <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" | 71 | <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold" |
| 75 | :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['不满意'] }} | 72 | text-anchor="middle" x="50%">{{ list['不满意'] }} |
| 76 | </text> | 73 | </text> |
| 77 | </svg> | 74 | </svg> |
| 78 | </div> | 75 | </div> |
| ... | @@ -117,7 +114,7 @@ let total = 0 | ... | @@ -117,7 +114,7 @@ let total = 0 |
| 117 | let intervalA = null | 114 | let intervalA = null |
| 118 | 115 | ||
| 119 | onMounted(() => { | 116 | onMounted(() => { |
| 120 | init() | 117 | // init() |
| 121 | window.addEventListener('resize', handleResize); | 118 | window.addEventListener('resize', handleResize); |
| 122 | }) | 119 | }) |
| 123 | const init = () => { | 120 | const init = () => { |
| ... | @@ -132,7 +129,7 @@ function getdata() { | ... | @@ -132,7 +129,7 @@ function getdata() { |
| 132 | api.getDegree().then(res => { | 129 | api.getDegree().then(res => { |
| 133 | list.value = res.data | 130 | list.value = res.data |
| 134 | for (let n in list.value) { | 131 | for (let n in list.value) { |
| 135 | total = total + (list.value[n]||0) | 132 | total = total + (list.value[n] || 0) |
| 136 | } | 133 | } |
| 137 | liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total]) | 134 | liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total]) |
| 138 | liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total]) | 135 | liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total]) |
| ... | @@ -143,10 +140,10 @@ function getdata() { | ... | @@ -143,10 +140,10 @@ function getdata() { |
| 143 | } | 140 | } |
| 144 | 141 | ||
| 145 | function handleResize() { | 142 | function handleResize() { |
| 146 | liquid1.resize() | 143 | liquid1?.resize() |
| 147 | liquid2.resize() | 144 | liquid2?.resize() |
| 148 | // liquid3.resize() | 145 | // liquid3.resize() |
| 149 | liquid4.resize() | 146 | liquid4?.resize() |
| 150 | // liquid5.resize() | 147 | // liquid5.resize() |
| 151 | } | 148 | } |
| 152 | 149 | ||
| ... | @@ -225,7 +222,7 @@ const setQ1 = (ref, data) => { | ... | @@ -225,7 +222,7 @@ const setQ1 = (ref, data) => { |
| 225 | 222 | ||
| 226 | </script> | 223 | </script> |
| 227 | 224 | ||
| 228 | <style scoped lang="scss"> | 225 | <style lang="scss" scoped> |
| 229 | .partA { | 226 | .partA { |
| 230 | min-height: 340px; | 227 | min-height: 340px; |
| 231 | height: 70vh; | 228 | height: 70vh; |
| ... | @@ -246,7 +243,8 @@ const setQ1 = (ref, data) => { | ... | @@ -246,7 +243,8 @@ const setQ1 = (ref, data) => { |
| 246 | } | 243 | } |
| 247 | 244 | ||
| 248 | .partB { | 245 | .partB { |
| 249 | display: flex;justify-content: space-around; | 246 | display: flex; |
| 247 | justify-content: space-around; | ||
| 250 | } | 248 | } |
| 251 | 249 | ||
| 252 | .qqbox { | 250 | .qqbox { | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="pd20"> | 2 | <div class="pd20"> |
| 3 | <div class="chartCard"> | 3 | <div class="chartCard"> |
| 4 | <div class="title">档案出证情况</div> | 4 | <div class="title">应收款余额</div> |
| 5 | |||
| 6 | <div class="po_right"> | 5 | <div class="po_right"> |
| 7 | <el-radio-group v-model="radioA" size="small" @change="radioAChange"> | 6 | <el-radio-group v-model="radioA" size="small" @change="radioAChange"> |
| 8 | <el-radio-button label="本月" value="month" /> | 7 | <el-radio-button label="本月" value="month"/> |
| 9 | <el-radio-button label="本季度" value="quarter" /> | 8 | <el-radio-button label="本季度" value="quarter"/> |
| 10 | <el-radio-button label="本年" value="year" /> | 9 | <el-radio-button label="本年" value="year"/> |
| 11 | </el-radio-group> | 10 | </el-radio-group> |
| 12 | </div> | 11 | </div> |
| 13 | |||
| 14 | <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> | 12 | <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> |
| 15 | </div> | 13 | </div> |
| 16 | 14 | ||
| ... | @@ -18,9 +16,9 @@ | ... | @@ -18,9 +16,9 @@ |
| 18 | <div class="title">档案检索情况</div> | 16 | <div class="title">档案检索情况</div> |
| 19 | <div class="po_right"> | 17 | <div class="po_right"> |
| 20 | <el-radio-group v-model="radioB" size="small" @change="radioBChange"> | 18 | <el-radio-group v-model="radioB" size="small" @change="radioBChange"> |
| 21 | <el-radio-button label="本月" value="month" /> | 19 | <el-radio-button label="本月" value="month"/> |
| 22 | <el-radio-button label="本季度" value="quarter" /> | 20 | <el-radio-button label="本季度" value="quarter"/> |
| 23 | <el-radio-button label="本年" value="year" /> | 21 | <el-radio-button label="本年" value="year"/> |
| 24 | </el-radio-group> | 22 | </el-radio-group> |
| 25 | </div> | 23 | </div> |
| 26 | 24 | ||
| ... | @@ -30,7 +28,8 @@ | ... | @@ -30,7 +28,8 @@ |
| 30 | </template> | 28 | </template> |
| 31 | 29 | ||
| 32 | <script setup> | 30 | <script setup> |
| 33 | import { onMounted, ref ,onUnmounted} from 'vue' | 31 | import {onMounted, ref, onUnmounted} from 'vue' |
| 32 | |||
| 34 | import _ from 'lodash' | 33 | import _ from 'lodash' |
| 35 | import {autoToolTip} from "@/plugins/auto-toolTip"; | 34 | import {autoToolTip} from "@/plugins/auto-toolTip"; |
| 36 | import * as echarts from "echarts"; | 35 | import * as echarts from "echarts"; |
| ... | @@ -46,27 +45,31 @@ let chartA | ... | @@ -46,27 +45,31 @@ let chartA |
| 46 | let chartB | 45 | let chartB |
| 47 | 46 | ||
| 48 | let intervalA = null; | 47 | let intervalA = null; |
| 48 | |||
| 49 | onMounted(() => { | 49 | onMounted(() => { |
| 50 | init() | 50 | // init() |
| 51 | window.addEventListener('resize', handleResize); | 51 | window.addEventListener('resize', handleResize); |
| 52 | }) | 52 | }) |
| 53 | |||
| 53 | const init = () => { | 54 | const init = () => { |
| 54 | if(!intervalA){ | 55 | if (!intervalA) { |
| 55 | getdata() | 56 | getdata() |
| 56 | } | 57 | } |
| 57 | intervalA = setInterval(getdata, 1000*60*60); | 58 | intervalA = setInterval(getdata, 1000 * 60 * 60); |
| 58 | } | 59 | } |
| 60 | |||
| 59 | const getdata = () => { | 61 | const getdata = () => { |
| 60 | clear() | 62 | clear() |
| 61 | getAdata() | 63 | getAdata() |
| 62 | getBdata() | 64 | getBdata() |
| 63 | } | 65 | } |
| 66 | |||
| 64 | const getAdata = () => { | 67 | const getAdata = () => { |
| 65 | api.getJieDai({type: radioA.value}).then(res => { | 68 | api.getJieDai({type: radioA.value}).then(res => { |
| 66 | dataA.value = [] | 69 | dataA.value = [] |
| 67 | kindList.value = [] | 70 | kindList.value = [] |
| 68 | for(let n of res.data){ | 71 | for (let n of res.data) { |
| 69 | if(n.count>0){ | 72 | if (n.count > 0) { |
| 70 | kindList.value.push(n.name) | 73 | kindList.value.push(n.name) |
| 71 | dataA.value.push(n.count) | 74 | dataA.value.push(n.count) |
| 72 | } | 75 | } |
| ... | @@ -74,12 +77,13 @@ const getAdata = () => { | ... | @@ -74,12 +77,13 @@ const getAdata = () => { |
| 74 | setA() | 77 | setA() |
| 75 | }) | 78 | }) |
| 76 | } | 79 | } |
| 80 | |||
| 77 | const getBdata = () => { | 81 | const getBdata = () => { |
| 78 | api.getJianSuo({type: radioB.value}).then(res => { | 82 | api.getJianSuo({type: radioB.value}).then(res => { |
| 79 | dataA.value = [] | 83 | dataA.value = [] |
| 80 | kindList.value = [] | 84 | kindList.value = [] |
| 81 | for(let n of res.data){ | 85 | for (let n of res.data) { |
| 82 | if(n.count>0) { | 86 | if (n.count > 0) { |
| 83 | kindList.value.push(n.name) | 87 | kindList.value.push(n.name) |
| 84 | dataA.value.push(n.count) | 88 | dataA.value.push(n.count) |
| 85 | } | 89 | } |
| ... | @@ -87,10 +91,11 @@ const getBdata = () => { | ... | @@ -87,10 +91,11 @@ const getBdata = () => { |
| 87 | setB() | 91 | setB() |
| 88 | }) | 92 | }) |
| 89 | } | 93 | } |
| 94 | |||
| 90 | const setA = () => { | 95 | const setA = () => { |
| 91 | chartA = echarts.init(zhuRef.value) | 96 | chartA = echarts.init(zhuRef.value) |
| 92 | const option = { | 97 | const option = { |
| 93 | animation:true, | 98 | animation: true, |
| 94 | // dataset: dataA.value, | 99 | // dataset: dataA.value, |
| 95 | // dataZoom: [ | 100 | // dataZoom: [ |
| 96 | // { | 101 | // { |
| ... | @@ -105,7 +110,7 @@ const setA = () => { | ... | @@ -105,7 +110,7 @@ const setA = () => { |
| 105 | // } | 110 | // } |
| 106 | // ], | 111 | // ], |
| 107 | xAxis: [{ | 112 | xAxis: [{ |
| 108 | data: kindList.value, | 113 | data: kindList.value, |
| 109 | axisLabel: { | 114 | axisLabel: { |
| 110 | inside: false, | 115 | inside: false, |
| 111 | color: '#7ECEF4', | 116 | color: '#7ECEF4', |
| ... | @@ -125,8 +130,8 @@ const setA = () => { | ... | @@ -125,8 +130,8 @@ const setA = () => { |
| 125 | yAxis: { | 130 | yAxis: { |
| 126 | name: '单位(次)', | 131 | name: '单位(次)', |
| 127 | nameTextStyle: { | 132 | nameTextStyle: { |
| 128 | color:'#7ECEF4', | 133 | color: '#7ECEF4', |
| 129 | fontSize:'1.2rem' | 134 | fontSize: '1.2rem' |
| 130 | }, | 135 | }, |
| 131 | axisLine: { | 136 | axisLine: { |
| 132 | show: false | 137 | show: false |
| ... | @@ -146,14 +151,14 @@ const setA = () => { | ... | @@ -146,14 +151,14 @@ const setA = () => { |
| 146 | } | 151 | } |
| 147 | } | 152 | } |
| 148 | }, | 153 | }, |
| 149 | tooltip:{ | 154 | tooltip: { |
| 150 | alwaysShowContent:true, | 155 | alwaysShowContent: true, |
| 151 | formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, | 156 | formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, |
| 152 | backgroundColor: 'transparent', | 157 | backgroundColor: 'transparent', |
| 153 | borderWidth: 0, | 158 | borderWidth: 0, |
| 154 | extraCssText:'box-shadow:none', | 159 | extraCssText: 'box-shadow:none', |
| 155 | position: 'top', | 160 | position: 'top', |
| 156 | textStyle:{ | 161 | textStyle: { |
| 157 | color: '#fff', | 162 | color: '#fff', |
| 158 | fontWeight: 'bold', | 163 | fontWeight: 'bold', |
| 159 | fontSize: '1rem' | 164 | fontSize: '1rem' |
| ... | @@ -166,30 +171,30 @@ const setA = () => { | ... | @@ -166,30 +171,30 @@ const setA = () => { |
| 166 | showBackground: false, | 171 | showBackground: false, |
| 167 | itemStyle: { | 172 | itemStyle: { |
| 168 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 173 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| 169 | { offset: 1, color: '#037FC9' }, | 174 | {offset: 1, color: '#037FC9'}, |
| 170 | { offset: 0, color: '#0C3C7E' } | 175 | {offset: 0, color: '#0C3C7E'} |
| 171 | ]) | 176 | ]) |
| 172 | }, | 177 | }, |
| 173 | emphasis: { | 178 | emphasis: { |
| 174 | itemStyle: { | 179 | itemStyle: { |
| 175 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 180 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| 176 | { offset: 1, color: '#2378f7' }, | 181 | {offset: 1, color: '#2378f7'}, |
| 177 | { offset: 0, color: '#83bff6' } | 182 | {offset: 0, color: '#83bff6'} |
| 178 | ]) | 183 | ]) |
| 179 | } | 184 | } |
| 180 | }, | 185 | }, |
| 181 | data:dataA.value | 186 | data: dataA.value |
| 182 | } | 187 | } |
| 183 | ] | 188 | ] |
| 184 | } | 189 | } |
| 185 | chartA.setOption(option) | 190 | chartA.setOption(option) |
| 186 | autoHover(chartA,option,0,2000) | 191 | autoHover(chartA, option, 0, 2000) |
| 187 | } | 192 | } |
| 188 | 193 | ||
| 189 | const setB = () => { | 194 | const setB = () => { |
| 190 | chartB = echarts.init(lineRef.value) | 195 | chartB = echarts.init(lineRef.value) |
| 191 | const option = { | 196 | const option = { |
| 192 | animation:true, | 197 | animation: true, |
| 193 | grid: { | 198 | grid: { |
| 194 | top: '15%', | 199 | top: '15%', |
| 195 | left: '12%', | 200 | left: '12%', |
| ... | @@ -213,12 +218,12 @@ const setB = () => { | ... | @@ -213,12 +218,12 @@ const setB = () => { |
| 213 | formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, | 218 | formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`, |
| 214 | renderModer: 'html', | 219 | renderModer: 'html', |
| 215 | // alignItems: 'center', | 220 | // alignItems: 'center', |
| 216 | className:'downDot', | 221 | className: 'downDot', |
| 217 | backgroundColor: 'rgba(8,13,86,0.2)', | 222 | backgroundColor: 'rgba(8,13,86,0.2)', |
| 218 | borderWidth: 0, | 223 | borderWidth: 0, |
| 219 | extraCssText:'box-shadow:none', | 224 | extraCssText: 'box-shadow:none', |
| 220 | position: 'top', | 225 | position: 'top', |
| 221 | textStyle:{ | 226 | textStyle: { |
| 222 | color: '#fff', | 227 | color: '#fff', |
| 223 | fontWeight: 'bold', | 228 | fontWeight: 'bold', |
| 224 | fontSize: '10rem' | 229 | fontSize: '10rem' |
| ... | @@ -245,8 +250,8 @@ const setB = () => { | ... | @@ -245,8 +250,8 @@ const setB = () => { |
| 245 | yAxis: { | 250 | yAxis: { |
| 246 | name: '单位(次)', | 251 | name: '单位(次)', |
| 247 | nameTextStyle: { | 252 | nameTextStyle: { |
| 248 | color:'#7ECEF4', | 253 | color: '#7ECEF4', |
| 249 | fontSize:'1.2rem' | 254 | fontSize: '1.2rem' |
| 250 | }, | 255 | }, |
| 251 | type: 'value', | 256 | type: 'value', |
| 252 | axisLabel: { | 257 | axisLabel: { |
| ... | @@ -267,17 +272,17 @@ const setB = () => { | ... | @@ -267,17 +272,17 @@ const setB = () => { |
| 267 | }, | 272 | }, |
| 268 | series: [ | 273 | series: [ |
| 269 | { | 274 | { |
| 270 | data: dataA.value, | 275 | data: dataA.value, |
| 271 | type: 'line', | 276 | type: 'line', |
| 272 | itemStyle: { | 277 | itemStyle: { |
| 273 | borderWidth:'0', | 278 | borderWidth: '0', |
| 274 | color: '#03DAFD', | 279 | color: '#03DAFD', |
| 275 | }, | 280 | }, |
| 276 | emphasis: { | 281 | emphasis: { |
| 277 | itemStyle: { | 282 | itemStyle: { |
| 278 | color: '#fff', | 283 | color: '#fff', |
| 279 | borderColor: '#fff', | 284 | borderColor: '#fff', |
| 280 | borderWidth:'4', | 285 | borderWidth: '4', |
| 281 | shadowColor: '#fff', | 286 | shadowColor: '#fff', |
| 282 | shadowBlur: '4', | 287 | shadowBlur: '4', |
| 283 | } | 288 | } |
| ... | @@ -286,19 +291,21 @@ const setB = () => { | ... | @@ -286,19 +291,21 @@ const setB = () => { |
| 286 | show: false, | 291 | show: false, |
| 287 | position: 'bottom', | 292 | position: 'bottom', |
| 288 | formatter: '{c}', | 293 | formatter: '{c}', |
| 289 | fontSize: '1rem', | 294 | fontSize: '1rem', |
| 290 | color: '#03DAFD' | 295 | color: '#03DAFD' |
| 291 | } | 296 | } |
| 292 | } | 297 | } |
| 293 | ] | 298 | ] |
| 294 | } | 299 | } |
| 295 | chartB.setOption(option) | 300 | chartB.setOption(option) |
| 296 | autoHover(chartB,option,0,2000) | 301 | autoHover(chartB, option, 0, 2000) |
| 297 | } | 302 | } |
| 303 | |||
| 298 | const radioAChange = (e) => { | 304 | const radioAChange = (e) => { |
| 299 | clear() | 305 | clear() |
| 300 | getAdata() | 306 | getAdata() |
| 301 | } | 307 | } |
| 308 | |||
| 302 | const radioBChange = (e) => { | 309 | const radioBChange = (e) => { |
| 303 | clear() | 310 | clear() |
| 304 | getBdata() | 311 | getBdata() |
| ... | @@ -309,6 +316,7 @@ const clear = () => { | ... | @@ -309,6 +316,7 @@ const clear = () => { |
| 309 | clearTimeout(autoToolTip); | 316 | clearTimeout(autoToolTip); |
| 310 | } | 317 | } |
| 311 | } | 318 | } |
| 319 | |||
| 312 | function autoHover(myChart, option, index, time) { | 320 | function autoHover(myChart, option, index, time) { |
| 313 | autoToolTip(myChart, option, { | 321 | autoToolTip(myChart, option, { |
| 314 | interval: time,// 轮播间隔时间 默认2s | 322 | interval: time,// 轮播间隔时间 默认2s |
| ... | @@ -316,67 +324,104 @@ function autoHover(myChart, option, index, time) { | ... | @@ -316,67 +324,104 @@ function autoHover(myChart, option, index, time) { |
| 316 | seriesIndex: index, // 第1个被轮播的序列下标 | 324 | seriesIndex: index, // 第1个被轮播的序列下标 |
| 317 | }); | 325 | }); |
| 318 | } | 326 | } |
| 327 | |||
| 319 | function handleResize() { | 328 | function handleResize() { |
| 320 | chartA.resize() | 329 | chartA?.resize() |
| 321 | chartB.resize() | 330 | chartB?.resize() |
| 322 | } | 331 | } |
| 332 | |||
| 323 | onUnmounted(() => { | 333 | onUnmounted(() => { |
| 324 | if (intervalA) { | 334 | if (intervalA) { |
| 325 | clearInterval(intervalA); | 335 | clearInterval(intervalA); |
| 326 | } | 336 | } |
| 327 | }) | 337 | }) |
| 338 | |||
| 328 | </script> | 339 | </script> |
| 329 | 340 | ||
| 330 | <style scoped lang="scss"> | 341 | <style lang="scss" scoped> |
| 331 | :deep(.el-radio-button--small .el-radio-button__inner){ | 342 | :deep(.el-radio-button--small .el-radio-button__inner) { |
| 332 | font-size: calc(12*100vw/1920); | 343 | font-size: calc(12 * 100vw / 1920); |
| 333 | padding: calc(5*100vw/1920) calc(11*100vw/1920); | 344 | padding: calc(5 * 100vw / 1920) calc(11 * 100vw / 1920); |
| 334 | } | 345 | } |
| 335 | 346 | ||
| 336 | .title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0; | 347 | .title { |
| 348 | padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0; | ||
| 337 | font-family: 'YouSheBiaoTiHei'; | 349 | font-family: 'YouSheBiaoTiHei'; |
| 338 | color: #FFFFFF; | 350 | color: #FFFFFF; |
| 339 | //text-shadow: 0px 4px 3px #003F85; | 351 | //text-shadow: 0px 4px 3px #003F85; |
| 340 | font-size: calc(17*100vw/1920); | 352 | font-size: calc(17 * 100vw / 1920); |
| 341 | background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); | 353 | background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); |
| 342 | -webkit-background-clip: text; | 354 | -webkit-background-clip: text; |
| 343 | -webkit-text-fill-color: transparent;position: relative; | 355 | -webkit-text-fill-color: transparent; |
| 356 | position: relative; | ||
| 344 | 357 | ||
| 345 | &::after{ | 358 | &::after { |
| 346 | content: '';width: 100%;height: 100%; | 359 | content: ''; |
| 347 | background: url("@/assets/img/line2.png") no-repeat;background-size: contain; | 360 | width: 100%; |
| 348 | position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite; | 361 | height: 100%; |
| 362 | background: url("@/assets/img/line2.png") no-repeat; | ||
| 363 | background-size: contain; | ||
| 364 | position: absolute; | ||
| 365 | top: calc(20 * 100vw / 1920); | ||
| 366 | left: 0; | ||
| 367 | animation: movelr 4s ease-in infinite; | ||
| 349 | } | 368 | } |
| 350 | } | 369 | } |
| 370 | |||
| 351 | @keyframes movelr { | 371 | @keyframes movelr { |
| 352 | 0% { | 372 | 0% { |
| 353 | left: 0;opacity: 1; | 373 | left: 0; |
| 374 | opacity: 1; | ||
| 354 | } | 375 | } |
| 355 | 100% { | 376 | 100% { |
| 356 | left: calc(220*100vw/1920);opacity: 0; | 377 | left: calc(220 * 100vw / 1920); |
| 378 | opacity: 0; | ||
| 357 | } | 379 | } |
| 358 | } | 380 | } |
| 359 | .chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left; | ||
| 360 | background-size: 100% 100%;position: relative;overflow: hidden; | ||
| 361 | 381 | ||
| 362 | .po_right{position: absolute;right: calc(20*100vw/1920);top: calc(40*100vw/1920);z-index: 1; | 382 | .chartCard { |
| 363 | :deep(.el-radio-button){ | 383 | background: url("@/assets/img/box_bg.png") no-repeat top left; |
| 384 | background-size: 100% 100%; | ||
| 385 | position: relative; | ||
| 386 | overflow: hidden; | ||
| 387 | |||
| 388 | .po_right { | ||
| 389 | position: absolute; | ||
| 390 | right: calc(20 * 100vw / 1920); | ||
| 391 | top: calc(40 * 100vw / 1920); | ||
| 392 | z-index: 1; | ||
| 393 | |||
| 394 | :deep(.el-radio-button) { | ||
| 364 | --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); | 395 | --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); |
| 365 | --el-radio-button-checked-text-color: #fff; | 396 | --el-radio-button-checked-text-color: #fff; |
| 366 | --el-radio-button-disabled-checked-fill: #03DAFD; | 397 | --el-radio-button-disabled-checked-fill: #03DAFD; |
| 367 | --el-radio-button-checked-border-color: #0D599A; | 398 | --el-radio-button-checked-border-color: #0D599A; |
| 368 | .el-radio-button__inner{color: #7ECEF4;background: transparent; | 399 | |
| 400 | .el-radio-button__inner { | ||
| 401 | color: #7ECEF4; | ||
| 402 | background: transparent; | ||
| 369 | border-color: #0D599A; | 403 | border-color: #0D599A; |
| 370 | } | 404 | } |
| 371 | .el-radio-button__original-radio:checked+.el-radio-button__inner{ | 405 | |
| 372 | color: #fff;background: linear-gradient(0deg, #2C67B7, #40A5F4); | 406 | .el-radio-button__original-radio:checked + .el-radio-button__inner { |
| 407 | color: #fff; | ||
| 408 | background: linear-gradient(0deg, #2C67B7, #40A5F4); | ||
| 373 | } | 409 | } |
| 374 | } | 410 | } |
| 375 | } | 411 | } |
| 376 | } | 412 | } |
| 377 | .downDot{position: relative; | 413 | |
| 378 | &::after{content: '';width: calc(6*100vw/1920);height: calc(6*100vw/1920); | 414 | .downDot { |
| 379 | background: #fff;border-radius: 50%; | 415 | position: relative; |
| 380 | position: absolute;bottom: 0;} | 416 | |
| 417 | &::after { | ||
| 418 | content: ''; | ||
| 419 | width: calc(6 * 100vw / 1920); | ||
| 420 | height: calc(6 * 100vw / 1920); | ||
| 421 | background: #fff; | ||
| 422 | border-radius: 50%; | ||
| 423 | position: absolute; | ||
| 424 | bottom: 0; | ||
| 425 | } | ||
| 381 | } | 426 | } |
| 382 | </style> | 427 | </style> | ... | ... |
| ... | @@ -2,12 +2,11 @@ | ... | @@ -2,12 +2,11 @@ |
| 2 | <div class="pd20"> | 2 | <div class="pd20"> |
| 3 | <div class="chartCard"> | 3 | <div class="chartCard"> |
| 4 | <div class="title">查档接待情况</div> | 4 | <div class="title">查档接待情况</div> |
| 5 | |||
| 6 | <div class="po_right"> | 5 | <div class="po_right"> |
| 7 | <el-radio-group v-model="radioA" size="small" @change="radioAChange"> | 6 | <el-radio-group v-model="radioA" size="small" @change="radioAChange"> |
| 8 | <el-radio-button label="本月" value="month" /> | 7 | <el-radio-button label="本月" value="month"/> |
| 9 | <el-radio-button label="本季度" value="quarter" /> | 8 | <el-radio-button label="本季度" value="quarter"/> |
| 10 | <el-radio-button label="本年" value="year" /> | 9 | <el-radio-button label="本年" value="year"/> |
| 11 | </el-radio-group> | 10 | </el-radio-group> |
| 12 | </div> | 11 | </div> |
| 13 | 12 | ||
| ... | @@ -17,11 +16,11 @@ | ... | @@ -17,11 +16,11 @@ |
| 17 | <div class="chartCard mt30"> | 16 | <div class="chartCard mt30"> |
| 18 | <div class="title">档案接收总览</div> | 17 | <div class="title">档案接收总览</div> |
| 19 | <div class="po_right"> | 18 | <div class="po_right"> |
| 20 | <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> | 19 | <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> |
| 21 | <!-- <el-radio-button label="本月" value="month" />--> | 20 | <!-- <el-radio-button label="本月" value="month" />--> |
| 22 | <!-- <el-radio-button label="本季度" value="quarter" />--> | 21 | <!-- <el-radio-button label="本季度" value="quarter" />--> |
| 23 | <!-- <el-radio-button label="本年" value="year" />--> | 22 | <!-- <el-radio-button label="本年" value="year" />--> |
| 24 | <!-- </el-radio-group>--> | 23 | <!-- </el-radio-group>--> |
| 25 | </div> | 24 | </div> |
| 26 | 25 | ||
| 27 | <div ref="lineRef" style="width: 100%; height: 40vh;"></div> | 26 | <div ref="lineRef" style="width: 100%; height: 40vh;"></div> |
| ... | @@ -35,6 +34,7 @@ import _ from 'lodash' | ... | @@ -35,6 +34,7 @@ import _ from 'lodash' |
| 35 | import {autoToolTip} from "@/plugins/auto-toolTip"; | 34 | import {autoToolTip} from "@/plugins/auto-toolTip"; |
| 36 | import * as echarts from "echarts"; | 35 | import * as echarts from "echarts"; |
| 37 | import * as api from "@/apiPc/common" | 36 | import * as api from "@/apiPc/common" |
| 37 | |||
| 38 | const zhuRef = ref(null) | 38 | const zhuRef = ref(null) |
| 39 | const lineRef = ref(null) | 39 | const lineRef = ref(null) |
| 40 | const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) | 40 | const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) |
| ... | @@ -45,15 +45,15 @@ let chartA | ... | @@ -45,15 +45,15 @@ let chartA |
| 45 | let chartB | 45 | let chartB |
| 46 | let intervalA = null | 46 | let intervalA = null |
| 47 | onMounted(() => { | 47 | onMounted(() => { |
| 48 | init() | 48 | // init() |
| 49 | window.addEventListener('resize', handleResize); | 49 | window.addEventListener('resize', handleResize); |
| 50 | }) | 50 | }) |
| 51 | const init = () => { | 51 | const init = () => { |
| 52 | clear() | 52 | clear() |
| 53 | if(!intervalA){ | 53 | if (!intervalA) { |
| 54 | getdata() | 54 | getdata() |
| 55 | } | 55 | } |
| 56 | intervalA = setInterval(getdata, 1000*60*60); | 56 | intervalA = setInterval(getdata, 1000 * 60 * 60); |
| 57 | } | 57 | } |
| 58 | const getdata = () => { | 58 | const getdata = () => { |
| 59 | getA() | 59 | getA() |
| ... | @@ -61,11 +61,11 @@ const getdata = () => { | ... | @@ -61,11 +61,11 @@ const getdata = () => { |
| 61 | } | 61 | } |
| 62 | const getA = () => { | 62 | const getA = () => { |
| 63 | //定时更新 | 63 | //定时更新 |
| 64 | api.getJieYue({type: radioA.value}).then(res=>{ | 64 | api.getJieYue({type: radioA.value}).then(res => { |
| 65 | dataA.value = [] | 65 | dataA.value = [] |
| 66 | kindList.value = [] | 66 | kindList.value = [] |
| 67 | for(let n of res.data){ | 67 | for (let n of res.data) { |
| 68 | if(n.count>0) { | 68 | if (n.count > 0) { |
| 69 | kindList.value.push(n.name) | 69 | kindList.value.push(n.name) |
| 70 | dataA.value.push(n.count) | 70 | dataA.value.push(n.count) |
| 71 | } | 71 | } |
| ... | @@ -177,11 +177,11 @@ const setA = () => { | ... | @@ -177,11 +177,11 @@ const setA = () => { |
| 177 | } | 177 | } |
| 178 | 178 | ||
| 179 | const getB = () => { | 179 | const getB = () => { |
| 180 | api.getJieShou().then(res=>{ | 180 | api.getJieShou().then(res => { |
| 181 | dataA.value = [] | 181 | dataA.value = [] |
| 182 | kindList.value = [] | 182 | kindList.value = [] |
| 183 | for(let n of res.data){ | 183 | for (let n of res.data) { |
| 184 | if(n.count>0) { | 184 | if (n.count > 0) { |
| 185 | kindList.value.push(n.name) | 185 | kindList.value.push(n.name) |
| 186 | dataA.value.push(n.count) | 186 | dataA.value.push(n.count) |
| 187 | } | 187 | } |
| ... | @@ -333,9 +333,10 @@ function autoHover(myChart, option, index, time) { | ... | @@ -333,9 +333,10 @@ function autoHover(myChart, option, index, time) { |
| 333 | } | 333 | } |
| 334 | 334 | ||
| 335 | function handleResize() { | 335 | function handleResize() { |
| 336 | chartA.resize() | 336 | chartA?.resize() |
| 337 | chartB.resize() | 337 | chartB?.resize() |
| 338 | } | 338 | } |
| 339 | |||
| 339 | onUnmounted(() => { | 340 | onUnmounted(() => { |
| 340 | if (intervalA) { | 341 | if (intervalA) { |
| 341 | clearInterval(intervalA); | 342 | clearInterval(intervalA); |
| ... | @@ -343,42 +344,57 @@ onUnmounted(() => { | ... | @@ -343,42 +344,57 @@ onUnmounted(() => { |
| 343 | }) | 344 | }) |
| 344 | </script> | 345 | </script> |
| 345 | 346 | ||
| 346 | <style scoped lang="scss"> | 347 | <style lang="scss" scoped> |
| 347 | :deep(.el-radio-button--small .el-radio-button__inner){ | 348 | :deep(.el-radio-button--small .el-radio-button__inner) { |
| 348 | font-size: calc(12*100vw/1920); | 349 | font-size: calc(12 * 100vw / 1920); |
| 349 | padding: calc(5*100vw/1920) calc(11*100vw/1920); | 350 | padding: calc(5 * 100vw / 1920) calc(11 * 100vw / 1920); |
| 350 | } | 351 | } |
| 351 | .title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;font-family: 'YouSheBiaoTiHei'; | 352 | |
| 353 | .title { | ||
| 354 | padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0; | ||
| 355 | font-family: 'YouSheBiaoTiHei'; | ||
| 352 | color: #FFFFFF; | 356 | color: #FFFFFF; |
| 353 | //text-shadow: 0px 4px 3px #003F85; | 357 | //text-shadow: 0px 4px 3px #003F85; |
| 354 | background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); | 358 | background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); |
| 355 | -webkit-background-clip: text; | 359 | -webkit-background-clip: text; |
| 356 | font-size: calc(17*100vw/1920); | 360 | font-size: calc(17 * 100vw / 1920); |
| 357 | -webkit-text-fill-color: transparent;position: relative; | 361 | -webkit-text-fill-color: transparent; |
| 358 | &::after{ | 362 | position: relative; |
| 359 | content: '';width: 100%;height: 100%; | 363 | |
| 360 | background: url("@/assets/img/line2.png") no-repeat;background-size: contain; | 364 | &::after { |
| 361 | position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite; | 365 | content: ''; |
| 366 | width: 100%; | ||
| 367 | height: 100%; | ||
| 368 | background: url("@/assets/img/line2.png") no-repeat; | ||
| 369 | background-size: contain; | ||
| 370 | position: absolute; | ||
| 371 | top: calc(20 * 100vw / 1920); | ||
| 372 | left: 0; | ||
| 373 | animation: movelr 4s ease-in infinite; | ||
| 362 | } | 374 | } |
| 363 | } | 375 | } |
| 376 | |||
| 364 | @keyframes movelr { | 377 | @keyframes movelr { |
| 365 | 0% { | 378 | 0% { |
| 366 | left: 0;opacity: 1; | 379 | left: 0; |
| 380 | opacity: 1; | ||
| 367 | } | 381 | } |
| 368 | 100% { | 382 | 100% { |
| 369 | left: calc(220*100vw/1920);opacity: 0; | 383 | left: calc(220 * 100vw / 1920); |
| 384 | opacity: 0; | ||
| 370 | } | 385 | } |
| 371 | } | 386 | } |
| 372 | 387 | ||
| 373 | .chartCard { | 388 | .chartCard { |
| 374 | background: url("@/assets/img/box_bg.png") no-repeat top left; | 389 | background: url("@/assets/img/box_bg.png") no-repeat top left; |
| 375 | background-size: 100% 100%; | 390 | background-size: 100% 100%; |
| 376 | position: relative;overflow: hidden; | 391 | position: relative; |
| 392 | overflow: hidden; | ||
| 377 | 393 | ||
| 378 | .po_right { | 394 | .po_right { |
| 379 | position: absolute; | 395 | position: absolute; |
| 380 | right: calc(20*100vw/1920); | 396 | right: calc(20 * 100vw / 1920); |
| 381 | top: calc(40*100vw/1920); | 397 | top: calc(40 * 100vw / 1920); |
| 382 | z-index: 1; | 398 | z-index: 1; |
| 383 | 399 | ||
| 384 | :deep(.el-radio-button) { | 400 | :deep(.el-radio-button) { |
| ... | @@ -406,8 +422,8 @@ onUnmounted(() => { | ... | @@ -406,8 +422,8 @@ onUnmounted(() => { |
| 406 | 422 | ||
| 407 | &::after { | 423 | &::after { |
| 408 | content: ''; | 424 | content: ''; |
| 409 | width: calc(6*100vw/1920); | 425 | width: calc(6 * 100vw / 1920); |
| 410 | height: calc(6*100vw/1920); | 426 | height: calc(6 * 100vw / 1920); |
| 411 | background: #fff; | 427 | background: #fff; |
| 412 | border-radius: 50%; | 428 | border-radius: 50%; |
| 413 | position: absolute; | 429 | position: absolute; | ... | ... |
| ... | @@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => { | ... | @@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => { |
| 81 | rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') | 81 | rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') |
| 82 | }, | 82 | }, |
| 83 | '/dev-api': { | 83 | '/dev-api': { |
| 84 | target: 'http://192.168.1.207:5511/', | 84 | // target: 'http://192.168.1.207:5511/', |
| 85 | // target: 'https://jijin.wtwuxicenter.com/stage-api', | 85 | target: 'https://jijin.wtwuxicenter.com/stage-api', |
| 86 | changeOrigin: true, | 86 | changeOrigin: true, |
| 87 | rewrite: (p) => p.replace(/^\/dev-api/, '') | 87 | rewrite: (p) => p.replace(/^\/dev-api/, '') |
| 88 | }, | 88 | }, | ... | ... |
-
Please register or sign in to post a comment