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 @@
</template>
<script>
import Chart from './Chart'
import work from "@/api/work";
export default {
data () {
return {
cdata: {
legendItem: ['接入', '上报', '登簿'],
color: [
"#02D9FD",
"#FF7962",
"#F5C03D "
],
echartData: []
}
}
},
components: {
Chart
},
mounted() {
window.addEventListener("resize", () => {
this.dataTrend()
});
this.dataTrend()
},
methods: {
async dataTrend() {
try {
let { result: res } = await work.dataTrend();
this.cdata.echartData = [];
this.cdata.echartData=res,
this.cdata.echartData.reverse()
} catch (error) {
console.log(error);
import Chart from './Chart'
import work from "@/api/work";
export default {
data () {
return {
cdata: {
timer: null,
legendItem: ['接入', '上报', '登簿'],
color: [
"#02D9FD",
"#FF7962",
"#F5C03D "
],
echartData: []
}
}
},
},
}
components: {
Chart
},
created () {
this.dataTrend()
this.timer = setInterval(() => {
this.dataTrend()
}, 10000) // 10s
},
mounted () {
window.addEventListener("resize", () => {
this.dataTrend()
});
},
methods: {
async dataTrend () {
try {
let { result: res } = await work.dataTrend();
this.cdata.echartData = [];
this.cdata.echartData = res,
this.cdata.echartData.reverse()
} catch (error) {
console.log(error);
}
},
},
destroyed () {
clearInterval(this.timer)
}
}
</script>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-04-03 13:40:18
* @LastEditTime: 2023-07-03 16:50:43
-->
<template>
<Chart :cdata="cdata" />
</template>
<script>
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
return {
cdata: []
}
},
components: {
Chart
},
mounted () {
this.mapViews();
},
methods: {
async mapViews () {
try {
let { result: res } = await work.mapViews("A20");
res.map((item) => {
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
return {
timer: null, // 定时器
cdata: []
}
},
components: {
Chart
},
created () {
this.mapViews();
this.timer = setInterval(() => {
this.mapViews();
}, 10000) // 10s
},
methods: {
async mapViews () {
try {
let { result: res } = await work.mapViews("A20");
res.map((item) => {
return (
this.cdata.push({ "name": item.areaName, "value": item.ywtotal })
)
return (
this.cdata.push({ "name": item.areaName, "value": item.ywtotal })
)
});
} catch (error) {
this.$refs.msg.messageShow();
});
} catch (error) {
this.$refs.msg.messageShow();
}
}
},
destroyed () {
clearInterval(this.timer)
}
}
}
</script>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-03 16:45:40
-->
<template>
<div class="centercard">
<div class="card1">
......@@ -11,75 +16,72 @@
</template>
<script>
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
export default {
data () {
return {};
},
components: { maps, brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
};
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
export default {
data () {
return {};
},
components: { maps, brokenline },
};
</script>
<style lang="scss" scoped>
.centercard {
width: 40%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 0.0521rem;
display: flex;
flex-direction: column;
.centercard {
width: 40%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 0.0521rem;
display: flex;
flex-direction: column;
.card1 {
width: 100%;
background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 64%;
.card1 {
width: 100%;
background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 64%;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: right;
padding-right: 15%;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: right;
padding-right: 15%;
}
}
}
.card2 {
width: 100%;
background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
.card2 {
width: 100%;
background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: center;
margin-bottom: 0.0521rem;
}
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: center;
margin-bottom: 0.0521rem;
}
.brokenline {
margin: auto;
width: 100%;
.brokenline {
margin: auto;
width: 100%;
}
}
}
}
</style>
......
<!--
* @Description :工作台左侧表
* @Autor : miaofang
* @LastEditTime : 2023-05-18 11:27:22
* @LastEditTime: 2023-07-03 16:50:16
-->
<template>
<div class="leftcard">
......@@ -57,14 +57,13 @@
</div>
</div>
</template>
<script>
import columnar from "@/components/Echart/Columnar";
import work from "@/api/work";
export default {
data () {
return {
timer: null, // 定时器
// 日均接入量
qxerrer: "",
qxsuccess: "",
......@@ -76,8 +75,11 @@
stcgl: ""
};
},
mounted () {
created () {
this.getsthjqxjrtotal();
this.timer = setInterval(() => {
this.getsthjqxjrtotal();
}, 10000) // 10s
},
components: { columnar },
computed: {
......@@ -118,6 +120,9 @@
});
},
},
destroyed () {
clearInterval(this.timer)
}
};
</script>
......
<!--
* @Description :工作台右侧表
* @Autor : miaofang
* @LastEditTime : 2023-05-18 11:26:52
* @LastEditTime: 2023-07-03 16:50:07
-->
<template>
<div class="rightcard">
......@@ -30,6 +30,7 @@
export default {
data () {
return {
timer: null,
config: {
headerBGC: '#016AC5',
oddRowBGC: '#154295',
......@@ -42,8 +43,13 @@
}
},
components: { columnarsmat, Rose },
created () {
this.getdjywltotal()
this.timer = setInterval(() => {
this.getdjywltotal()
}, 5000) // 5s
},
mounted () {
this.getdjywltotal();
window.addEventListener("resize", () => {
this.config.data = [];
this.getdjywltotal();
......@@ -65,19 +71,21 @@
this.config.data.push([index + 1, item.AREACODE, item.ywtotal])
});
// 遍历修改数组键，作为echars图表的参数
} catch (error) {
console.log(error);
}
},
}
},
destroyed () {
clearInterval(this.timer)
}
}
</script>
<style lang="scss" scoped>
/deep/.dv-scroll-board .rows {
overflow-y: auto;
}
/deep/.row-item:not(:last-child) {
margin-bottom: 0.026rem;
}
......
<!--
* @Description :工作台表内容
* @Autor : miaofang
* @LastEditTime : 2023-05-18 13:09:47
* @LastEditTime: 2023-07-03 16:39:09
-->
<template>
<div class="content" id="box">
<leftcard />
<centercard />
<rightcard />
<leftcard />
<centercard />
<rightcard />
</div>
</template>
<script>
import "@/utils/flexible.js";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
mixins: [drawMixin],
data () {
return {
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
leftcard,
centercard,
rightcard
},
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
import "@/utils/flexible.js";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
mixins: [drawMixin],
data () {
return {
decorationColor: ["#568aea", "#568aea"],
};
},
},
};
components: {
leftcard,
centercard,
rightcard
},
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
};
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100% -94px);
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 15px;
}
// #box{
// width: 1620px;
// height: 680px;
// position: absolute;
// transform-origin: left top;
// overflow: hidden;
// }
.content {
width: 100%;
height: calc(100% -94px);
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 15px;
}
</style>
......
<!--
* @Description :修改登簿日志弹窗
* @Autor : miaofang
* @LastEditTime : 2023-05-18 13:16:22
* @LastEditTime: 2023-07-03 16:27:13
-->
<template>
<!-- 修改登簿日志弹窗 -->
......@@ -15,6 +15,7 @@
<el-tabs v-model="titleName" type="card">
<el-tab-pane label="登薄详情" name="sjmx"></el-tab-pane>
<el-tab-pane label="xml报文" name="xml"></el-tab-pane>
<el-tab-pane label="返回结果" name="fhjg"></el-tab-pane>
</el-tabs>
<div class="dialog-from" v-if="titleName == 'sjmx'">
<el-row class="dialog-from_header item-content-input">
......@@ -186,6 +187,9 @@
<div class="JsonEditor" v-if="titleName == 'xml'">
<JsonEditor class="editXML" :resultInfo="resultInfo" :key="key" />
</div>
<div class="JsonEditor" v-if="titleName == 'fhjg'">
<JsonEditor class="editXML" :resultInfo="resultInfo" :key="key" />
</div>
</div>
</div>
<div class="d-center" v-if="titleName == 'sjmx'">
......@@ -310,6 +314,9 @@
getDetail(data).then(res => {
let { accessLog, registerInfo, accessInfo, accessList, registerList
} = res.result
console.log(res.result, 'res.resultres.resultres.result');
this.accessLog = accessLog
this.resultInfo = accessLog.LOGSXML
this.registerInfo = registerInfo
......