14368e7c by zhangmeng

标头

1 parent dce034b2
...@@ -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
......
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 <!-- &lt;!&ndash; 液体球&ndash;&gt;--> 45 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
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 },
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!