Skip to content

杨炀 / dangan_dataV

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

大屏初稿

1 parent 787223b9
Expand all
Inline Side-by-side
Showing 5 changed files with 149 additions and 202 deletions
src/layoutPc/index.vue
...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
23 width: 100vw; 23 width: 100vw;
24 height: 100vh; 24 height: 100vh;
25 min-width: 1000px; 25 min-width: 1000px;
26 //overflow: hidden; 26 overflow: hidden;
27 //background: rgba(0,0,0,0.75) 27 //background: rgba(0,0,0,0.75)
28 background: url("@/assets/image/bg@2x.png") no-repeat top center; 28 background: url("@/assets/image/bg@2x.png") no-repeat top center;
29 background-size: 100% 100%; 29 background-size: 100% 100%;
......
src/store/modules/user.js
1 import { login, logout, getInfo, loginByPhone } from '@/api/login' 1 import {login, logout, getInfo, loginByPhone} from '@/api/login'
2 import { getToken, setToken, removeToken } from '@/utils/auth' 2 import {getToken, setToken, removeToken} from '@/utils/auth'
3 import { getMyOwnMemberInfo } from '@/api/system/userInfo.js' 3 import {getMyOwnMemberInfo} from '@/api/system/userInfo.js'
4 import { defineStore } from 'pinia' 4 import {defineStore} from 'pinia'
5 import aes from '@/utils/aes' 5 import aes from '@/utils/aes'
6 import { loginDance } from '@/apiPc/login.js' 6 import {loginDance} from '@/apiPc/login.js'
7 import { getRemindCount } from '@/api/system/user' 7 import {getRemindCount} from '@/api/system/user'
8 import { ElMessageBox } from 'element-plus' 8 import {ElMessageBox} from 'element-plus'
9 9
10 const useUserStore = defineStore( 10 const useUserStore = defineStore(
11 'user', 11 'user',
...@@ -29,10 +29,10 @@ const useUserStore = defineStore( ...@@ -29,10 +29,10 @@ const useUserStore = defineStore(
29 isExam: '1', // 是否为考点，0：是；1：否, 29 isExam: '1', // 是否为考点，0：是；1：否,
30 genFlag: '', // 是否是自动的协会 30 genFlag: '', // 是否是自动的协会
31 badge: {}, 31 badge: {},
32 reLogin: {show:false,query:{}}, 32 reLogin: {show: false, query: {}},
33 visitor: false, 33 visitor: false,
34 language: 0, 34 language: 0,
35 activeName:"5" 35 activeName: "5"
36 }), 36 }),
37 actions: { 37 actions: {
38 // 登录 38 // 登录
...@@ -101,10 +101,6 @@ const useUserStore = defineStore( ...@@ -101,10 +101,6 @@ const useUserStore = defineStore(
101 this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1 101 this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1
102 this.dept = user.dept 102 this.dept = user.dept
103 this.avatar = avatar 103 this.avatar = avatar
104 if (personInfo) {
105 this.perId = aes.encrypt(personInfo.perId)
106 this.personInfo = personInfo
107 }
108 resolve(res.data) 104 resolve(res.data)
109 }).catch(error => { 105 }).catch(error => {
110 reject(error) 106 reject(error)
...@@ -147,9 +143,9 @@ const useUserStore = defineStore( ...@@ -147,9 +143,9 @@ const useUserStore = defineStore(
147 }, 143 },
148 setReLogin(query) { 144 setReLogin(query) {
149 console.log(query) 145 console.log(query)
150 this.reLogin = {show:true,query:query} 146 this.reLogin = {show: true, query: query}
151 setTimeout(() => { 147 setTimeout(() => {
152 this.reLogin = {show:false,query:query} 148 this.reLogin = {show: false, query: query}
153 }, 1000) 149 }, 1000)
154 }, 150 },
155 checkAndLogin() { 151 checkAndLogin() {
...@@ -164,8 +160,8 @@ const useUserStore = defineStore( ...@@ -164,8 +160,8 @@ const useUserStore = defineStore(
164 return true 160 return true
165 } 161 }
166 }, 162 },
167 updataActiveName(v){ 163 updataActiveName(v) {
168 this.activeName=v 164 this.activeName = v
169 } 165 }
170 } 166 }
171 }) 167 })
......
src/viewsPc/vip/leftPage.vue
...@@ -167,8 +167,7 @@ const setA = () => { ...@@ -167,8 +167,7 @@ const setA = () => {
167 center: ['25%', '50%'], 167 center: ['25%', '50%'],
168 radius: '5%', 168 radius: '5%',
169 emphasis: { 169 emphasis: {
170 radius: '5%', 170 scale: false
171 show: false,
172 }, 171 },
173 data: [ 172 data: [
174 {value: 110, name: ''}, 173 {value: 110, name: ''},
...@@ -188,9 +187,10 @@ const setA = () => { ...@@ -188,9 +187,10 @@ const setA = () => {
188 avoidLabelOverlap: false, 187 avoidLabelOverlap: false,
189 label: { 188 label: {
190 show: false, 189 show: false,
190
191 },
191 emphasis: { 192 emphasis: {
192 show: false 193 scale: false
193 }
194 }, 194 },
195 data: [ 195 data: [
196 {value: 12, name: ''}, 196 {value: 12, name: ''},
...@@ -204,6 +204,7 @@ const setA = () => { ...@@ -204,6 +204,7 @@ const setA = () => {
204 avoidLabelOverlap: false, 204 avoidLabelOverlap: false,
205 itemStyle: { 205 itemStyle: {
206 borderWidth: 2, 206 borderWidth: 2,
207 opacity: 0.8,
207 // borderColor: '#fff', 208 // borderColor: '#fff',
208 }, 209 },
209 label: { 210 label: {
......
src/viewsPc/vip/rightPage.vue
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 <div class="po_right"> 5 <div class="po_right">
6 <el-radio-group v-model="radioA" size="small" @change="radioAChange"> 6 <el-radio-group v-model="radioA" size="small" @change="radioAChange">
7 <el-radio-button label="本月" value="month"/> 7 <el-radio-button label="本月" value="month"/>
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 </el-radio-group> 10 </el-radio-group>
11 </div> 11 </div>
12 12
13 <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> 13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 14 </div>
15 15
16 <div class="chartCard mt30"> 16 <div class="chartCard mt30">
17 <div class="title">档案接收总览</div> 17 <div class="title">回款</div>
18 <div class="po_right"> 18 <div class="po_right">
19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> 19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
20 <!-- <el-radio-button label="本月" value="month" />--> 20 <!-- <el-radio-button label="本月" value="month" />-->
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
23 <!-- </el-radio-group>--> 23 <!-- </el-radio-group>-->
24 </div> 24 </div>
25 25
26 <div ref="lineRef" style="width: 100%; height: 40vh;"></div> 26 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
27 </div>
28 <div class="chartCard mt30">
29 <div class="title">逾期360天以上未开票</div>
30 <div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
27 </div> 31 </div>
28 </div> 32 </div>
29 </template> 33 </template>
...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common" ...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
37 41
38 const zhuRef = ref(null) 42 const zhuRef = ref(null)
39 const lineRef = ref(null) 43 const lineRef = ref(null)
44 const overdueRef = ref(null)
40 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 45 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
41 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 46 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
42 const radioA = ref('month') 47 const radioA = ref('month')
43 const radioB = ref('month')
44 let chartA 48 let chartA
45 let chartB 49 let chartB
50 let chartC
46 let intervalA = null 51 let intervalA = null
47 onMounted(() => { 52 onMounted(() => {
48 // init() 53 // init()
49 window.addEventListener('resize', handleResize); 54 window.addEventListener('resize', handleResize);
55 setA()
56 setB()
57 setC()
50 }) 58 })
51 const init = () => { 59 const init = () => {
52 clear() 60 clear()
...@@ -77,98 +85,51 @@ const getA = () => { ...@@ -77,98 +85,51 @@ const getA = () => {
77 const setA = () => { 85 const setA = () => {
78 chartA = echarts.init(zhuRef.value) 86 chartA = echarts.init(zhuRef.value)
79 const option = { 87 const option = {
80 animation: true, 88 tooltip: {
81 // dataZoom: [ 89 trigger: 'axis',
82 // { 90 axisPointer: {
83 // show: false, 91 // Use axis to trigger tooltip
84 // start: 0, 92 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
85 // end: 100
86 // },
87 // {
88 // type: 'inside',
89 // start: 0,
90 // end: 100
91 // }
92 // ],
93 xAxis: [{
94 data: kindList.value,
95 axisLabel: {
96 inside: false,
97 color: '#7ECEF4',
98 fontSize: '1.1rem'
99 },
100 axisTick: {
101 show: false
102 },
103 axisLine: {
104 show: true,
105 lineStyle: {
106 color: 'RGBA(38, 81, 128, 1)'
107 } 93 }
108 }, 94 },
109 z: 10 95 legend: {
110 }], 96 top: "3%"
111 yAxis: {
112 name: '单位(次)',
113 nameTextStyle: {
114 color: '#7ECEF4',
115 fontSize: '1.2rem'
116 }, 97 },
117 axisLine: { 98 grid: {
118 show: false 99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
119 }, 103 },
120 axisTick: { 104 xAxis: {
121 show: false 105 type: 'value'
122 }, 106 },
123 axisLabel: { 107 yAxis: {
124 color: '#7ECEF4', 108 type: 'category',
125 fontSize: '1.3rem' 109 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
126 }, 110 },
127 splitLine: { 111 series: [
128 show: true, 112 {
129 lineStyle: { 113 name: 'Direct',
130 color: 'RGBA(38, 81, 128, 1)', 114 type: 'bar',
131 type: 'dashed' 115 label: {
132 } 116 show: true
133 }
134 }, 117 },
135 tooltip: { 118 emphasis: {
136 alwaysShowContent: true, 119 focus: 'series'
137 formatter: '<div style="font-size: 1.5rem">{c}</div>', 120 },
138 backgroundColor: 'transparent', 121 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
139 borderWidth: 0,
140 extraCssText: 'box-shadow:none',
141 position: 'top',
142 textStyle: {
143 color: '#fff',
144 fontWeight: 'bold',
145 fontSize: '1.5rem'
146 }
147 }, 122 },
148 series: [
149 { 123 {
150 type: 'pictorialBar', 124 name: 'Direct',
151 barGap: '0%', 125 type: 'bar',
152 symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', 126 label: {
153 showBackground: false, 127 show: true
154 itemStyle: {
155 borderWidth: 0,
156 borderColor: '#B8FFF4',
157 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
158 {offset: 1, color: 'rgba(184, 255, 244, 0.1)'},
159 {offset: 0, color: 'rgba(184, 255, 244, 0.8)'}
160 ])
161 }, 128 },
162 emphasis: { 129 emphasis: {
163 svgPath: 'M0,0 L5,0 L5,5 L0,5 Z', 130 focus: 'series'
164 itemStyle: {
165 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
166 {offset: 1, color: '#2378f7'},
167 {offset: 0, color: '#83bff6'}
168 ])
169 }
170 }, 131 },
171 data: dataA.value 132 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
172 } 133 }
173 ] 134 ]
174 } 135 }
...@@ -192,124 +153,112 @@ const getB = () => { ...@@ -192,124 +153,112 @@ const getB = () => {
192 const setB = () => { 153 const setB = () => {
193 chartB = echarts.init(lineRef.value) 154 chartB = echarts.init(lineRef.value)
194 const option = { 155 const option = {
195 animation: true,
196 grid: {
197 top: '15%',
198 left: '15%',
199 right: '10%',
200 bottom: '12%'
201 },
202 // dataZoom: [
203 // {
204 // show: false,
205 // start: 0,
206 // end: 100
207 // },
208 // {
209 // type: 'inside',
210 // start: 0,
211 // end: 100
212 // }
213 // ],
214 tooltip: { 156 tooltip: {
215 trigger: 'item', 157 trigger: 'axis',
216 formatter: '<div style="font-size: 1.5rem">{c}</div>', 158 axisPointer: {
217 renderModer: 'html', 159 // Use axis to trigger tooltip
218 className: 'downDot', 160 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
219 backgroundColor: 'transparent',
220 borderWidth: 0,
221 extraCssText: 'box-shadow:none',
222 position: 'top',
223 textStyle: {
224 color: '#fff',
225 fontWeight: 'bold',
226 fontSize: '1.5rem'
227 } 161 }
228 }, 162 },
163 legend: {
164 top: "3%"
165 },
166 grid: {
167 left: '3%',
168 right: '4%',
169 bottom: '3%',
170 containLabel: true
171 },
229 xAxis: { 172 xAxis: {
173 type: 'value'
174 },
175 yAxis: {
230 type: 'category', 176 type: 'category',
231 boundaryGap: false, 177 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
232 data: kindList.value, 178 },
233 axisTick: { 179 series: [
234 show: false 180 {
181 name: 'Direct',
182 type: 'bar',
183 label: {
184 show: true
235 }, 185 },
236 axisLabel: { 186 emphasis: {
237 color: '#7ECEF4', 187 focus: 'series'
238 fontSize: '1.1rem',
239 interval: 0
240 }, 188 },
241 axisLine: { 189 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
242 show: true, 190 }
243 lineStyle: { 191 ]
244 color: 'RGBA(38, 81, 128, 1)' 192 }
193 chartB.setOption(option)
194 autoHover(chartB, option, 0, 2000)
195 }
196 const setC = () => {
197 chartC = echarts.init(overdueRef.value)
198 const option = {
199 tooltip: {
200 trigger: 'axis',
201 axisPointer: {
202 type: 'shadow'
245 } 203 }
246 }, 204 },
205 legend: {
206 top: '10%',
207 textStyle: {
208 color: '#FFF'
247 }, 209 },
248 yAxis: {
249 name: '单位(卷/件)',
250 nameTextStyle: {
251 color: '#7ECEF4',
252 fontSize: '1.2rem'
253 },
254 type: 'value',
255 axisLabel: {
256 fontSize: '1.3rem'
257 }, 210 },
258 axisLine: { 211 grid: {
259 lineStyle: { 212 left: '3%',
260 color: '#03DAFD', 213 right: '4%',
261 } 214 bottom: '3%',
215 containLabel: true
262 }, 216 },
263 splitLine: { 217 xAxis: [
264 show: true, 218 {
265 lineStyle: { 219 type: 'category',
266 color: 'RGBA(38, 81, 128, 1)', 220 stack: 'Ad',
267 type: 'dashed' 221 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
268 } 222 }
223 ],
224 yAxis: [
225 {
226 type: 'value',
227 name: '金额(万元)',
269 } 228 }
270 }, 229 ],
271 series: [ 230 series: [
272 { 231 {
273 data: dataA.value, 232 name: '0-180天未开票',
274 type: 'line', 233 type: 'bar',
275 itemStyle: { 234 stack: 'Ad',
276 borderWidth: '0',
277 color: '#3A80D5',
278 },
279 emphasis: { 235 emphasis: {
280 itemStyle: { 236 focus: 'series'
281 color: '#fff',
282 borderColor: '#fff',
283 borderWidth: '4',
284 shadowColor: '#fff',
285 shadowBlur: '4',
286 }
287 }, 237 },
288 label: { 238 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
289 show: false,
290 position: 'bottom',
291 formatter: '{c}',
292 fontSize: 12,
293 color: '#03DAFD'
294 }, 239 },
295 areaStyle: {
296 opacity: 0.8,
297 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
298 { 240 {
299 offset: 0, 241 name: '180-360天未开票',
300 color: 'rgba(128, 255, 165,0.5)' 242 type: 'bar',
243 stack: 'Ad',
244 emphasis: {
245 focus: 'series'
246 },
247 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
301 }, 248 },
302 { 249 {
303 offset: 1, 250 name: '逾期360天以上',
304 color: 'rgba(1, 191, 236,0.5)' 251 type: 'bar',
305 } 252 stack: 'Ad',
306 ]) 253 emphasis: {
307 } 254 focus: 'series'
308 } 255 },
256 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
257 },
309 ] 258 ]
310 } 259 }
311 chartB.setOption(option) 260 chartC.setOption(option)
312 autoHover(chartB, option, 0, 2000) 261 autoHover(chartC, option, 0, 2000)
313 } 262 }
314 const radioAChange = (e) => { 263 const radioAChange = (e) => {
315 getA() 264 getA()
...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) { ...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
335 function handleResize() { 284 function handleResize() {
336 chartA?.resize() 285 chartA?.resize()
337 chartB?.resize() 286 chartB?.resize()
287 chartC?.resize()
338 } 288 }
339 289
340 onUnmounted(() => { 290 onUnmounted(() => {
...@@ -386,7 +336,7 @@ onUnmounted(() => { ...@@ -386,7 +336,7 @@ onUnmounted(() => {
386 } 336 }
387 337
388 .chartCard { 338 .chartCard {
389 background: url("@/assets/img/box_bg.png") no-repeat top left; 339 background: url("@/assets/image/box01@2x.png") no-repeat top left;
390 background-size: 100% 100%; 340 background-size: 100% 100%;
391 position: relative; 341 position: relative;
392 overflow: hidden; 342 overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!