Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
2b76acdf by renchao@pashanhoo.com
Options

style:首页增加定时器

1 parent d8f268f3
Inline Side-by-side
Showing 7 changed files with 216 additions and 187 deletions
...@@ -3,43 +3,51 @@ ...@@ -3,43 +3,51 @@
3 </template> 3 </template>
4 4
5 <script> 5 <script>
6 import Chart from './Chart' 6 import Chart from './Chart'
7 import work from "@/api/work"; 7 import work from "@/api/work";
8 export default { 8 export default {
9 data () { 9 data () {
10 return { 10 return {
11 cdata: { 11 cdata: {
12 legendItem: ['接入', '上报', '登簿'], 12 timer: null,
13 color: [ 13 legendItem: ['接入', '上报', '登簿'],
14 "#02D9FD", 14 color: [
15 "#FF7962", 15 "#02D9FD",
16 "#F5C03D " 16 "#FF7962",
17 ], 17 "#F5C03D "
18 echartData: [] 18 ],
19 } 19 echartData: []
20 } 20 }
21 },
22 components: {
23 Chart
24 },
25 mounted() {
26
27 window.addEventListener("resize", () => {
28 this.dataTrend()
29 });
30 this.dataTrend()
31 },
32 methods: {
33 async dataTrend() {
34 try {
35 let { result: res } = await work.dataTrend();
36 this.cdata.echartData = [];
37 this.cdata.echartData=res,
38 this.cdata.echartData.reverse()
39 } catch (error) {
40 console.log(error);
41 } 21 }
42 }, 22 },
43 }, 23 components: {
44 } 24 Chart
25 },
26 created () {
27 this.dataTrend()
28 this.timer = setInterval(() => {
29 this.dataTrend()
30 }, 10000) // 10s
31 },
32 mounted () {
33 window.addEventListener("resize", () => {
34 this.dataTrend()
35 });
36 },
37 methods: {
38 async dataTrend () {
39 try {
40 let { result: res } = await work.dataTrend();
41 this.cdata.echartData = [];
42 this.cdata.echartData = res,
43 this.cdata.echartData.reverse()
44 } catch (error) {
45 console.log(error);
46 }
47 },
48 },
49 destroyed () {
50 clearInterval(this.timer)
51 }
52 }
45 </script> 53 </script>
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-04-03 13:40:18 4 * @LastEditTime: 2023-07-03 16:50:43
5 --> 5 -->
6 <template> 6 <template>
7 <Chart :cdata="cdata" /> 7 <Chart :cdata="cdata" />
8 </template> 8 </template>
9 9
10 <script> 10 <script>
11 import Chart from "./Chart"; 11 import Chart from "./Chart";
12 import work from "@/api/work"; 12 import work from "@/api/work";
13 export default { 13 export default {
14 data () { 14 data () {
15 return { 15 return {
16 cdata: [] 16 timer: null, // 定时器
17 } 17 cdata: []
18 }, 18 }
19 components: { 19 },
20 Chart 20 components: {
21 }, 21 Chart
22 mounted () { 22 },
23 this.mapViews(); 23 created () {
24 }, 24 this.mapViews();
25 methods: { 25 this.timer = setInterval(() => {
26 async mapViews () { 26 this.mapViews();
27 try { 27 }, 10000) // 10s
28 let { result: res } = await work.mapViews("A20"); 28 },
29 res.map((item) => { 29 methods: {
30 async mapViews () {
31 try {
32 let { result: res } = await work.mapViews("A20");
33 res.map((item) => {
30 34
31 return ( 35 return (
32 this.cdata.push({ "name": item.areaName, "value": item.ywtotal }) 36 this.cdata.push({ "name": item.areaName, "value": item.ywtotal })
33 ) 37 )
34 38
35 }); 39 });
36 } catch (error) { 40 } catch (error) {
37 this.$refs.msg.messageShow(); 41 this.$refs.msg.messageShow();
42 }
38 } 43 }
44 },
45 destroyed () {
46 clearInterval(this.timer)
39 } 47 }
40 } 48 }
41 }
42 </script> 49 </script>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-03 16:45:40
5 -->
1 <template> 6 <template>
2 <div class="centercard"> 7 <div class="centercard">
3 <div class="card1"> 8 <div class="card1">
...@@ -11,75 +16,72 @@ ...@@ -11,75 +16,72 @@
11 </template> 16 </template>
12 17
13 <script> 18 <script>
14 import maps from "@/components/Echart/Map"; 19 import maps from "@/components/Echart/Map";
15 import brokenline from "@/components/Echart/Brokenline"; 20 import brokenline from "@/components/Echart/Brokenline";
16 export default { 21 export default {
17 data () { 22 data () {
18 return {}; 23 return {};
19 }, 24 },
20 components: { maps, brokenline }, 25 components: { maps, brokenline },
21 mounted () { }, 26 };
22 beforeDestroy () { },
23 methods: {},
24 };
25 </script> 27 </script>
26 28
27 <style lang="scss" scoped> 29 <style lang="scss" scoped>
28 .centercard { 30 .centercard {
29 width: 40%; 31 width: 40%;
30 height: calc(100vh - 114px); 32 height: calc(100vh - 114px);
31 box-sizing: border-box; 33 box-sizing: border-box;
32 padding: 0 0.0521rem; 34 padding: 0 0.0521rem;
33 display: flex; 35 display: flex;
34 flex-direction: column; 36 flex-direction: column;
35 37
36 .card1 { 38 .card1 {
37 width: 100%; 39 width: 100%;
38 background: url("~@/image/mapcenter.png") no-repeat; 40 background: url("~@/image/mapcenter.png") no-repeat;
39 background-size: 100% 100%; 41 background-size: 100% 100%;
40 position: relative; 42 position: relative;
41 height: 64%; 43 height: 64%;
42 44
43 .title { 45 .title {
44 position: absolute; 46 position: absolute;
45 font-weight: bold; 47 font-weight: bold;
46 color: #02d9fd; 48 color: #02d9fd;
47 line-height: 0.1354rem; 49 line-height: 0.1354rem;
48 font-size: 0.1146rem; 50 font-size: 0.1146rem;
49 position: absolute; 51 position: absolute;
50 left: 0; 52 left: 0;
51 right: 0; 53 right: 0;
52 top: 0.0365rem; 54 top: 0.0365rem;
53 text-align: right; 55 text-align: right;
54 padding-right: 15%; 56 padding-right: 15%;
57 }
55 } 58 }
56 }
57 59
58 .card2 { 60 .card2 {
59 width: 100%; 61 width: 100%;
60 background: url("~@/image/sjqs.png") no-repeat; 62 background: url("~@/image/sjqs.png") no-repeat;
61 background-size: 100% 100%; 63 background-size: 100% 100%;
62 position: relative; 64 position: relative;
63 flex: 1; 65 flex: 1;
64 66
65 .title { 67 .title {
66 position: absolute; 68 position: absolute;
67 font-weight: bold; 69 font-weight: bold;
68 color: #02d9fd; 70 color: #02d9fd;
69 line-height: 0.1354rem; 71 line-height: 0.1354rem;
70 font-size: 0.1146rem; 72 font-size: 0.1146rem;
71 position: absolute; 73 position: absolute;
72 left: 0; 74 left: 0;
73 right: 0; 75 right: 0;
74 top: 0.0365rem; 76 top: 0.0365rem;
75 text-align: center; 77 text-align: center;
76 margin-bottom: 0.0521rem; 78 margin-bottom: 0.0521rem;
77 } 79 }
78 80
79 .brokenline { 81 .brokenline {
80 margin: auto; 82 margin: auto;
81 width: 100%; 83 width: 100%;
84 }
82 } 85 }
83 } 86 }
84 }
85 </style> 87 </style>
......
1 <!-- 1 <!--
2 * @Description :工作台左侧表 2 * @Description :工作台左侧表
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-18 11:27:22 4 * @LastEditTime: 2023-07-03 16:50:16
5 --> 5 -->
6 <template> 6 <template>
7 <div class="leftcard"> 7 <div class="leftcard">
...@@ -57,14 +57,13 @@ ...@@ -57,14 +57,13 @@
57 </div> 57 </div>
58 </div> 58 </div>
59 </template> 59 </template>
60
61 <script> 60 <script>
62
63 import columnar from "@/components/Echart/Columnar"; 61 import columnar from "@/components/Echart/Columnar";
64 import work from "@/api/work"; 62 import work from "@/api/work";
65 export default { 63 export default {
66 data () { 64 data () {
67 return { 65 return {
66 timer: null, // 定时器
68 // 日均接入量 67 // 日均接入量
69 qxerrer: "", 68 qxerrer: "",
70 qxsuccess: "", 69 qxsuccess: "",
...@@ -76,8 +75,11 @@ ...@@ -76,8 +75,11 @@
76 stcgl: "" 75 stcgl: ""
77 }; 76 };
78 }, 77 },
79 mounted () { 78 created () {
80 this.getsthjqxjrtotal(); 79 this.getsthjqxjrtotal();
80 this.timer = setInterval(() => {
81 this.getsthjqxjrtotal();
82 }, 10000) // 10s
81 }, 83 },
82 components: { columnar }, 84 components: { columnar },
83 computed: { 85 computed: {
...@@ -118,6 +120,9 @@ ...@@ -118,6 +120,9 @@
118 }); 120 });
119 }, 121 },
120 }, 122 },
123 destroyed () {
124 clearInterval(this.timer)
125 }
121 }; 126 };
122 </script> 127 </script>
123 128
......
1 <!-- 1 <!--
2 * @Description :工作台右侧表 2 * @Description :工作台右侧表
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-18 11:26:52 4 * @LastEditTime: 2023-07-03 16:50:07
5 --> 5 -->
6 <template> 6 <template>
7 <div class="rightcard"> 7 <div class="rightcard">
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 export default { 30 export default {
31 data () { 31 data () {
32 return { 32 return {
33 timer: null,
33 config: { 34 config: {
34 headerBGC: '#016AC5', 35 headerBGC: '#016AC5',
35 oddRowBGC: '#154295', 36 oddRowBGC: '#154295',
...@@ -42,8 +43,13 @@ ...@@ -42,8 +43,13 @@
42 } 43 }
43 }, 44 },
44 components: { columnarsmat, Rose }, 45 components: { columnarsmat, Rose },
46 created () {
47 this.getdjywltotal()
48 this.timer = setInterval(() => {
49 this.getdjywltotal()
50 }, 5000) // 5s
51 },
45 mounted () { 52 mounted () {
46 this.getdjywltotal();
47 window.addEventListener("resize", () => { 53 window.addEventListener("resize", () => {
48 this.config.data = []; 54 this.config.data = [];
49 this.getdjywltotal(); 55 this.getdjywltotal();
...@@ -65,19 +71,21 @@ ...@@ -65,19 +71,21 @@
65 this.config.data.push([index + 1, item.AREACODE, item.ywtotal]) 71 this.config.data.push([index + 1, item.AREACODE, item.ywtotal])
66 72
67 }); 73 });
68
69 // 遍历修改数组键，作为echars图表的参数 74 // 遍历修改数组键，作为echars图表的参数
70
71
72 } catch (error) { 75 } catch (error) {
73 console.log(error); 76 console.log(error);
74 } 77 }
75 78 }
76 },
77 }, 79 },
80 destroyed () {
81 clearInterval(this.timer)
82 }
78 } 83 }
79 </script> 84 </script>
80 <style lang="scss" scoped> 85 <style lang="scss" scoped>
86 /deep/.dv-scroll-board .rows {
87 overflow-y: auto;
88 }
81 /deep/.row-item:not(:last-child) { 89 /deep/.row-item:not(:last-child) {
82 margin-bottom: 0.026rem; 90 margin-bottom: 0.026rem;
83 } 91 }
......
1 <!-- 1 <!--
2 * @Description :工作台表内容 2 * @Description :工作台表内容
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-18 13:09:47 4 * @LastEditTime: 2023-07-03 16:39:09
5 --> 5 -->
6 <template> 6 <template>
7 <div class="content" id="box"> 7 <div class="content" id="box">
8 <leftcard /> 8 <leftcard />
9 <centercard /> 9 <centercard />
10 <rightcard /> 10 <rightcard />
11 </div> 11 </div>
12 </template> 12 </template>
13 <script> 13 <script>
14 import "@/utils/flexible.js"; 14 import "@/utils/flexible.js";
15 import drawMixin from "@/utils/drawMixin"; 15 import drawMixin from "@/utils/drawMixin";
16 import leftcard from "./leftcard"; 16 import leftcard from "./leftcard";
17 import centercard from "./centercard"; 17 import centercard from "./centercard";
18 import rightcard from "./rightcard"; 18 import rightcard from "./rightcard";
19 export default { 19 export default {
20 mixins: [drawMixin], 20 mixins: [drawMixin],
21 data () { 21 data () {
22 return { 22 return {
23 decorationColor: ["#568aea", "#568aea"], 23 decorationColor: ["#568aea", "#568aea"],
24 }; 24 };
25 },
26 components: {
27 leftcard,
28 centercard,
29 rightcard
30 },
31 mounted () {
32 // this.timeFn();
33 this.cancelLoading();
34 },
35 beforeDestroy () {
36 clearInterval(this.timing);
37 },
38 methods: {
39 cancelLoading () {
40 setTimeout(() => {
41 this.loading = false;
42 }, 500);
43 }, 25 },
44 }, 26 components: {
45 }; 27 leftcard,
28 centercard,
29 rightcard
30 },
31 mounted () {
32 // this.timeFn();
33 this.cancelLoading();
34 },
35 beforeDestroy () {
36 clearInterval(this.timing);
37 },
38 methods: {
39 cancelLoading () {
40 setTimeout(() => {
41 this.loading = false;
42 }, 500);
43 },
44 },
45 };
46 </script> 46 </script>
47 47
48 <style scoped lang="scss"> 48 <style scoped lang="scss">
49 .content { 49 .content {
50 width: 100%; 50 width: 100%;
51 height: calc(100% -94px); 51 height: calc(100% -94px);
52 margin: auto; 52 margin: auto;
53 display: flex; 53 display: flex;
54 justify-content: space-between; 54 justify-content: space-between;
55 margin-top: 15px; 55 margin-top: 15px;
56 56 }
57 }
58 // #box{
59 // width: 1620px;
60 // height: 680px;
61 // position: absolute;
62 // transform-origin: left top;
63 // overflow: hidden;
64 // }
65 </style> 57 </style>
......
1 <!-- 1 <!--
2 * @Description :修改登簿日志弹窗 2 * @Description :修改登簿日志弹窗
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-18 13:16:22 4 * @LastEditTime: 2023-07-03 16:27:13
5 --> 5 -->
6 <template> 6 <template>
7 <!-- 修改登簿日志弹窗 --> 7 <!-- 修改登簿日志弹窗 -->
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 <el-tabs v-model="titleName" type="card"> 15 <el-tabs v-model="titleName" type="card">
16 <el-tab-pane label="登薄详情" name="sjmx"></el-tab-pane> 16 <el-tab-pane label="登薄详情" name="sjmx"></el-tab-pane>
17 <el-tab-pane label="xml报文" name="xml"></el-tab-pane> 17 <el-tab-pane label="xml报文" name="xml"></el-tab-pane>
18 <el-tab-pane label="返回结果" name="fhjg"></el-tab-pane>
18 </el-tabs> 19 </el-tabs>
19 <div class="dialog-from" v-if="titleName == 'sjmx'"> 20 <div class="dialog-from" v-if="titleName == 'sjmx'">
20 <el-row class="dialog-from_header item-content-input"> 21 <el-row class="dialog-from_header item-content-input">
...@@ -186,6 +187,9 @@ ...@@ -186,6 +187,9 @@
186 <div class="JsonEditor" v-if="titleName == 'xml'"> 187 <div class="JsonEditor" v-if="titleName == 'xml'">
187 <JsonEditor class="editXML" :resultInfo="resultInfo" :key="key" /> 188 <JsonEditor class="editXML" :resultInfo="resultInfo" :key="key" />
188 </div> 189 </div>
190 <div class="JsonEditor" v-if="titleName == 'fhjg'">
191 <JsonEditor class="editXML" :resultInfo="resultInfo" :key="key" />
192 </div>
189 </div> 193 </div>
190 </div> 194 </div>
191 <div class="d-center" v-if="titleName == 'sjmx'"> 195 <div class="d-center" v-if="titleName == 'sjmx'">
...@@ -310,6 +314,9 @@ ...@@ -310,6 +314,9 @@
310 getDetail(data).then(res => { 314 getDetail(data).then(res => {
311 let { accessLog, registerInfo, accessInfo, accessList, registerList 315 let { accessLog, registerInfo, accessInfo, accessList, registerList
312 } = res.result 316 } = res.result
317
318 console.log(res.result, 'res.resultres.resultres.result');
319
313 this.accessLog = accessLog 320 this.accessLog = accessLog
314 this.resultInfo = accessLog.LOGSXML 321 this.resultInfo = accessLog.LOGSXML
315 this.registerInfo = registerInfo 322 this.registerInfo = registerInfo
......