Sfoglia il codice sorgente

首页和工单页,页面修改

miaofuhao 9 mesi fa
parent
commit
44061ef639

+ 7 - 0
package-lock.json

14
         "element-plus": "^2.9.5",
14
         "element-plus": "^2.9.5",
15
         "file-saver": "^2.0.5",
15
         "file-saver": "^2.0.5",
16
         "js-cookie": "^3.0.5",
16
         "js-cookie": "^3.0.5",
17
+        "lottie-web": "^5.12.2",
17
         "pinia": "^3.0.1",
18
         "pinia": "^3.0.1",
18
         "vue": "^3.5.13",
19
         "vue": "^3.5.13",
19
         "vue-router": "^4.5.0",
20
         "vue-router": "^4.5.0",
1481
         "lodash-es": "*"
1482
         "lodash-es": "*"
1482
       }
1483
       }
1483
     },
1484
     },
1485
+    "node_modules/lottie-web": {
1486
+      "version": "5.12.2",
1487
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
1488
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
1489
+      "license": "MIT"
1490
+    },
1484
     "node_modules/magic-string": {
1491
     "node_modules/magic-string": {
1485
       "version": "0.30.17",
1492
       "version": "0.30.17",
1486
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",
1493
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",

+ 1 - 0
package.json

17
     "element-plus": "^2.9.5",
17
     "element-plus": "^2.9.5",
18
     "file-saver": "^2.0.5",
18
     "file-saver": "^2.0.5",
19
     "js-cookie": "^3.0.5",
19
     "js-cookie": "^3.0.5",
20
+    "lottie-web": "^5.12.2",
20
     "pinia": "^3.0.1",
21
     "pinia": "^3.0.1",
21
     "vue": "^3.5.13",
22
     "vue": "^3.5.13",
22
     "vue-router": "^4.5.0",
23
     "vue-router": "^4.5.0",

BIN
src.zip


BIN
src/assets/Flow2.gif


File diff suppressed because it is too large
+ 1558 - 0
src/assets/animations/huawu.json


+ 8 - 0
src/router/index.js

3
 import ChildMap from '@/views/childMap/childMap.vue';
3
 import ChildMap from '@/views/childMap/childMap.vue';
4
 import orderList from '@/views/orderList/orderList.vue';
4
 import orderList from '@/views/orderList/orderList.vue';
5
 
5
 
6
+import ceshi from '@/views/ceshi.vue';
7
+
8
+
6
 const routes = [
9
 const routes = [
7
   {
10
   {
8
     path: '',
11
     path: '',
19
     name: 'OrderList',
22
     name: 'OrderList',
20
     component: orderList,
23
     component: orderList,
21
   },
24
   },
25
+  {
26
+    path: '/ceshi',
27
+    name: 'Ceshi',
28
+    component: ceshi,
29
+  },
22
   
30
   
23
 ];
31
 ];
24
 
32
 

+ 35 - 0
src/views/ceshi.vue

1
+<template>
2
+    <div ref="lottieContainer" class="lottie-box"></div>
3
+  </template>
4
+  
5
+  <script setup>
6
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
7
+  import lottie from 'lottie-web'
8
+  import animationData from '@/assets/animations/huawu.json'
9
+
10
+  
11
+  const lottieContainer = ref(null)
12
+  let anim = null
13
+  
14
+  onMounted(() => {
15
+    anim = lottie.loadAnimation({
16
+      container: lottieContainer.value, // DOM容器
17
+      renderer: 'svg',                 // 渲染模式:svg/canvas/html
18
+      loop: true,                      // 循环播放
19
+      autoplay: true,                  // 自动播放
20
+      path: animationData    // JSON文件路径
21
+    })
22
+  })
23
+  
24
+  onBeforeUnmount(() => {
25
+    anim.destroy() // 组件卸载时销毁动画
26
+  })
27
+  </script>
28
+  
29
+  <style>
30
+  .lottie-box {
31
+    width: 300px;
32
+    height: 300px;
33
+    margin: 0 auto;
34
+  }
35
+  </style>

+ 12 - 5
src/views/dashboard/cpns/map-chart.vue

2
   <div style="position: relative;width: 100%; height: 55vh;">
2
   <div style="position: relative;width: 100%; height: 55vh;">
3
     <div class="btnCen">
3
     <div class="btnCen">
4
       <div class="cenItem">
4
       <div class="cenItem">
5
-        <div class="cenItemImg"></div>
5
+        <div class="cenItemImg">
6
+          <img :src="Flow2" width="80%" />
7
+        </div>
6
         <div class="cenItemCon">
8
         <div class="cenItemCon">
7
           <div>12356话务总量</div>
9
           <div>12356话务总量</div>
8
           <div>
10
           <div>
11
         </div>
13
         </div>
12
       </div>
14
       </div>
13
       <div class="cenItem">
15
       <div class="cenItem">
14
-        <div class="cenItemImg"></div>
16
+        <div class="cenItemImg">
17
+          <img :src="Flow2" width="80%" />
18
+        </div>
15
         <div class="cenItemCon">
19
         <div class="cenItemCon">
16
           <div>八院话务总量</div>
20
           <div>八院话务总量</div>
17
           <div>
21
           <div>
22
         </div>
26
         </div>
23
       </div>
27
       </div>
24
       <div class="cenItem">
28
       <div class="cenItem">
25
-        <div class="cenItemImg"></div>
29
+        <div class="cenItemImg">
30
+          <img :src="Flow2" width="80%" />
31
+        </div>
26
         <div class="cenItemCon">
32
         <div class="cenItemCon">
27
           <div>九院话务总量</div>
33
           <div>九院话务总量</div>
28
           <div>
34
           <div>
43
 import { onMounted, ref } from 'vue';
49
 import { onMounted, ref } from 'vue';
44
 import * as echarts from 'echarts';
50
 import * as echarts from 'echarts';
45
 import { ZZmapData } from '@/utils/zhengzhou.js'
51
 import { ZZmapData } from '@/utils/zhengzhou.js'
52
+import Flow2 from '@/assets/Flow2.gif'
46
 
53
 
47
 import { getPageListData } from '@/api/index.js'
54
 import { getPageListData } from '@/api/index.js'
48
 import { useRouter } from 'vue-router';
55
 import { useRouter } from 'vue-router';
197
       .cenItemImg {
204
       .cenItemImg {
198
         width: 28%;
205
         width: 28%;
199
         height: 5vh;
206
         height: 5vh;
200
-        background: url(/src/assets/con_right.png) no-repeat;
201
-        background-size: 100% 100%;
207
+        // background: url(/src/assets/con_right.png) no-repeat;
208
+        // background-size: 100% 100%;
202
       }
209
       }
203
       .cenItemCon{
210
       .cenItemCon{
204
         width: 72%;
211
         width: 72%;

+ 12 - 1
src/views/dashboard/dashboard.vue

3
         <!-- 标题区域 -->
3
         <!-- 标题区域 -->
4
         <header class="dashboard-header">
4
         <header class="dashboard-header">
5
             <!-- <h1>智慧城市数据大屏</h1> -->
5
             <!-- <h1>智慧城市数据大屏</h1> -->
6
-            <div class="title_text"></div>
6
+            <div class="child_title_text" style="font-size: 1.8vw; margin-top: 1vh;">郑州市12356心理援助热线大数据分析系统</div>
7
             <div class="time">{{ currentTime }}</div>
7
             <div class="time">{{ currentTime }}</div>
8
         </header>
8
         </header>
9
 
9
 
432
 </script>
432
 </script>
433
 
433
 
434
 <style lang="scss" scoped>
434
 <style lang="scss" scoped>
435
+    .child_title_text{
436
+        font-weight: bold;
437
+        font-size: 1.3vw;
438
+        background: linear-gradient(to bottom, #07B9FF, #F3FDFF);
439
+        /* 将背景裁剪到文字区域,-webkit- 前缀用于兼容 Safari 等浏览器 */
440
+        -webkit-background-clip: text;
441
+        background-clip: text;
442
+        /* 使文字颜色透明,显示出渐变背景,-webkit- 前缀用于兼容 Safari 等浏览器 */
443
+        -webkit-text-fill-color: transparent;
444
+        text-fill-color: transparent;
445
+    }
435
     .scroll-container{
446
     .scroll-container{
436
         display: block;
447
         display: block;
437
         height: 9vh;
448
         height: 9vh;

+ 18 - 3
src/views/orderList/orderList.vue

3
         <!-- 标题区域 -->
3
         <!-- 标题区域 -->
4
         <header class="dashboard-header">
4
         <header class="dashboard-header">
5
             <!-- <h1>智慧城市数据大屏</h1> -->
5
             <!-- <h1>智慧城市数据大屏</h1> -->
6
-            <div class="title_text"></div>
6
+            <div class="child_title_text" style="font-size: 1.8vw; margin-top: 1vh;">郑州市12356心理援助热线大数据分析系统</div>
7
             <div class="time">{{ currentTime }}</div>
7
             <div class="time">{{ currentTime }}</div>
8
         </header>
8
         </header>
9
 
9
 
10
         <!-- 数据展示区域 -->
10
         <!-- 数据展示区域 -->
11
         <!-- <LineChart :values="values" :xLabels="xLabels" color="#00FF87" auto-resize theme="dark" @chart-click="handleChartClick" /> -->
11
         <!-- <LineChart :values="values" :xLabels="xLabels" color="#00FF87" auto-resize theme="dark" @chart-click="handleChartClick" /> -->
12
         <div class="child-content">
12
         <div class="child-content">
13
-            <div class="child-title"></div>
13
+            <div class="child-title">
14
+                <div class="child_title_text">郑州市12356热线工单</div>
15
+            </div>
14
             <div class="child-warp">
16
             <div class="child-warp">
15
                 <div class="center_item2_tit">
17
                 <div class="center_item2_tit">
16
                     <span class="btn_tit" @click="goToPage('/')">郑州市</span> /
18
                     <span class="btn_tit" @click="goToPage('/')">郑州市</span> /
185
     gap: 1vh;
187
     gap: 1vh;
186
     background: url('@/assets/bj.png') no-repeat;
188
     background: url('@/assets/bj.png') no-repeat;
187
     background-size: 100% 100%;
189
     background-size: 100% 100%;
188
-
190
+    .child_title_text{
191
+        font-weight: bold;
192
+        font-size: 1.3vw;
193
+        background: linear-gradient(to bottom, #07B9FF, #F3FDFF);
194
+        /* 将背景裁剪到文字区域,-webkit- 前缀用于兼容 Safari 等浏览器 */
195
+        -webkit-background-clip: text;
196
+        background-clip: text;
197
+        /* 使文字颜色透明,显示出渐变背景,-webkit- 前缀用于兼容 Safari 等浏览器 */
198
+        -webkit-text-fill-color: transparent;
199
+        text-fill-color: transparent;
200
+    }
189
     .dashboard-header {
201
     .dashboard-header {
190
         /* width: 89%; */
202
         /* width: 89%; */
191
         background: url('@/assets/title_bg.png') no-repeat;
203
         background: url('@/assets/title_bg.png') no-repeat;
216
             height: 5vh;
228
             height: 5vh;
217
             line-height: 5vh;
229
             line-height: 5vh;
218
             margin-bottom: 2vh;
230
             margin-bottom: 2vh;
231
+            
232
+            
233
+            
219
             .title_text {
234
             .title_text {
220
                 background: url('@/assets/title_text_bg.png') no-repeat;
235
                 background: url('@/assets/title_text_bg.png') no-repeat;
221
                 background-size: 100% 100%;
236
                 background-size: 100% 100%;