|
@@ -5,18 +5,26 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="datas">
|
|
|
- <div class="datas-tip">
|
|
|
- <div class="datas-tip-li d-t-s">空闲:0-70</div>
|
|
|
- <div class="datas-tip-li d-t-w">较忙:70-90</div>
|
|
|
- <div class="datas-tip-li d-t-e">拥挤:90-100</div>
|
|
|
+ <div class="datas-tip" v-if="yjd[numsKeys[numsIndex]]">
|
|
|
+ <div class="datas-tip-li d-t-t">
|
|
|
+ {{ tipTitleFormat([numsKeys[numsIndex]]) }}
|
|
|
+ </div>
|
|
|
+ <div class="datas-tip-li d-t-s">
|
|
|
+ 一般:{{ yjd[numsKeys[numsIndex]].yb || "" }}
|
|
|
+ </div>
|
|
|
+ <div class="datas-tip-li d-t-w">
|
|
|
+ 较忙:{{ yjd[numsKeys[numsIndex]].jm || "" }}
|
|
|
+ </div>
|
|
|
+ <div class="datas-tip-li d-t-e">
|
|
|
+ 繁忙:{{ yjd[numsKeys[numsIndex]].fm || "" }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div class="box box1" style="--color: #19ffff"> -->
|
|
|
<div
|
|
|
class="box box1"
|
|
|
:style="
|
|
|
nums.jt
|
|
|
- ? nums.jt > 70
|
|
|
- ? nums.jt > 90
|
|
|
+ ? nums.jt > yjdFormat(yjd['jt'] ? yjd['jt'].jm : '')
|
|
|
+ ? nums.jt > yjdFormat(yjd['jt'] ? yjd['jt'].fm : '')
|
|
|
? '--color: #e84545'
|
|
|
: '--color: #ffde7d'
|
|
|
: '--color: #19ffff'
|
|
@@ -38,8 +46,8 @@
|
|
|
<div class="box-con-bottom-right">
|
|
|
{{
|
|
|
nums.jt
|
|
|
- ? nums.jt > 70
|
|
|
- ? nums.jt > 90
|
|
|
+ ? nums.jt > yjdFormat(yjd["jt"] ? yjd["jt"].jm : "")
|
|
|
+ ? nums.jt > yjdFormat(yjd["jt"] ? yjd["jt"].fm : "")
|
|
|
? "拥挤"
|
|
|
: "较忙"
|
|
|
: "空闲"
|
|
@@ -55,8 +63,8 @@
|
|
|
class="box box2"
|
|
|
:style="
|
|
|
nums.zht
|
|
|
- ? nums.zht > 70
|
|
|
- ? nums.zht > 90
|
|
|
+ ? nums.zht > yjdFormat(yjd['zht'] ? yjd['zht'].jm : '')
|
|
|
+ ? nums.zht > yjdFormat(yjd['zht'] ? yjd['zht'].fm : '')
|
|
|
? '--color: #e84545'
|
|
|
: '--color: #ffde7d'
|
|
|
: '--color: #19ffff'
|
|
@@ -70,7 +78,7 @@
|
|
|
class="box-con-top"
|
|
|
:class="numsKeys[numsIndex] == 'zht' ? 'active' : ''"
|
|
|
>
|
|
|
- 自助厅拥挤度
|
|
|
+ 自助区拥挤度
|
|
|
</div>
|
|
|
<div class="box-con-bottom">
|
|
|
<div class="box-con-bottom-left">{{ nums.zht || 0 }}</div>
|
|
@@ -78,8 +86,9 @@
|
|
|
<div class="box-con-bottom-right">
|
|
|
{{
|
|
|
nums.zht
|
|
|
- ? nums.zht > 70
|
|
|
- ? nums.zht > 90
|
|
|
+ ? nums.zht > yjdFormat(yjd["zht"] ? yjd["zht"].jm : "")
|
|
|
+ ? nums.zht >
|
|
|
+ yjdFormat(yjd["zht"] ? yjd["zht"].fm : "")
|
|
|
? "拥挤"
|
|
|
: "较忙"
|
|
|
: "空闲"
|
|
@@ -95,8 +104,8 @@
|
|
|
class="box box3"
|
|
|
:style="
|
|
|
nums.wsbs
|
|
|
- ? nums.wsbs > 70
|
|
|
- ? nums.wsbs > 90
|
|
|
+ ? nums.wsbs > yjdFormat(yjd['wsbs'] ? yjd['wsbs'].jm : '')
|
|
|
+ ? nums.wsbs > yjdFormat(yjd['wsbs'] ? yjd['wsbs'].fm : '')
|
|
|
? '--color: #e84545'
|
|
|
: '--color: #ffde7d'
|
|
|
: '--color: #19ffff'
|
|
@@ -110,7 +119,7 @@
|
|
|
class="box-con-top"
|
|
|
:class="numsKeys[numsIndex] == 'wsbs' ? 'active' : ''"
|
|
|
>
|
|
|
- 网上办税厅拥挤度
|
|
|
+ 网上办税区拥挤度
|
|
|
</div>
|
|
|
<div class="box-con-bottom">
|
|
|
<div class="box-con-bottom-left">{{ nums.wsbs || 0 }}</div>
|
|
@@ -118,8 +127,10 @@
|
|
|
<div class="box-con-bottom-right">
|
|
|
{{
|
|
|
nums.wsbs
|
|
|
- ? nums.wsbs > 70
|
|
|
- ? nums.wsbs > 90
|
|
|
+ ? nums.wsbs >
|
|
|
+ yjdFormat(yjd["wsbs"] ? yjd["wsbs"].jm : "")
|
|
|
+ ? nums.wsbs >
|
|
|
+ yjdFormat(yjd["wsbs"] ? yjd["wsbs"].fm : "")
|
|
|
? "拥挤"
|
|
|
: "较忙"
|
|
|
: "空闲"
|
|
@@ -135,21 +146,25 @@
|
|
|
class="datas-show"
|
|
|
:style="
|
|
|
nums[numsKeys[numsIndex]]
|
|
|
- ? nums[numsKeys[numsIndex]] > 70
|
|
|
- ? nums[numsKeys[numsIndex]] > 90
|
|
|
+ ? nums[numsKeys[numsIndex]] >
|
|
|
+ yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].jm : '')
|
|
|
+ ? nums[numsKeys[numsIndex]] >
|
|
|
+ yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].fm : '')
|
|
|
? '--color: #e84545'
|
|
|
: '--color: #ffde7d'
|
|
|
: '--color: #19ffff'
|
|
|
: '--color: #19ffff'
|
|
|
"
|
|
|
>
|
|
|
- <div class="datas-show-tip">拥挤度</div>
|
|
|
+ <div class="datas-show-tip">{{tipTitleFormat([numsKeys[numsIndex]])}}拥挤度</div>
|
|
|
<div class="datas-show-num">{{ nums[numsKeys[numsIndex]] || 0 }}</div>
|
|
|
<div class="datas-show-state">
|
|
|
{{
|
|
|
nums[numsKeys[numsIndex]]
|
|
|
- ? nums[numsKeys[numsIndex]] > 70
|
|
|
- ? nums[numsKeys[numsIndex]] > 90
|
|
|
+ ? nums[numsKeys[numsIndex]] >
|
|
|
+ yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].jm : "")
|
|
|
+ ? nums[numsKeys[numsIndex]] >
|
|
|
+ yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].fm : "")
|
|
|
? "拥挤"
|
|
|
: "较忙"
|
|
|
: "空闲"
|
|
@@ -178,18 +193,36 @@ export default {
|
|
|
numsKeys: [],
|
|
|
numsIndex: 0,
|
|
|
timer2: null,
|
|
|
+ yjd: {},
|
|
|
};
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
- this.lb();
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ tipTitleFormat(e) {
|
|
|
+ if (e) {
|
|
|
+ return e == "wsbs"
|
|
|
+ ? "网上办税区"
|
|
|
+ : e == "jt"
|
|
|
+ ? "办税厅"
|
|
|
+ : e == "zht"
|
|
|
+ ? "自助区"
|
|
|
+ : "";
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yjdFormat(e) {
|
|
|
+ if (e) {
|
|
|
+ return e.split("-")[0];
|
|
|
+ } else {
|
|
|
+ return 40;
|
|
|
+ }
|
|
|
+ },
|
|
|
lb() {
|
|
|
- clearTimeout(this.timer2);
|
|
|
- this.timer2 = null;
|
|
|
let nums = this.nums;
|
|
|
this.numsKeys = Object.keys(nums);
|
|
|
if (this.numsIndex < this.numsKeys.length - 1) {
|
|
@@ -198,8 +231,10 @@ export default {
|
|
|
this.numsIndex = 0;
|
|
|
}
|
|
|
this.timer2 = setTimeout(() => {
|
|
|
+ clearTimeout(this.timer2);
|
|
|
+ this.timer2 = null;
|
|
|
this.lb();
|
|
|
- }, 5 * 1000);
|
|
|
+ }, 10 * 1000);
|
|
|
},
|
|
|
bgFormat(e) {
|
|
|
if (e) {
|
|
@@ -262,7 +297,16 @@ export default {
|
|
|
let newNums = JSON.stringify(res.data);
|
|
|
if (oldNums != newNums) {
|
|
|
this.$nextTick(() => {
|
|
|
- this.nums = res.data;
|
|
|
+ this.nums = {
|
|
|
+ jt: res.data.jt,
|
|
|
+ wsbs: res.data.wsbs,
|
|
|
+ zht: res.data.zht,
|
|
|
+ };
|
|
|
+ this.yjd = res.data.yjd;
|
|
|
+
|
|
|
+ if (!this.timer2) {
|
|
|
+ this.lb();
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
setTimeout(() => {
|
|
@@ -316,6 +360,10 @@ export default {
|
|
|
font-family: "苹方简M";
|
|
|
}
|
|
|
|
|
|
+ .d-t-t {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
.d-t-s {
|
|
|
color: #19ffff;
|
|
|
}
|
|
@@ -361,7 +409,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
- color: #f08a5d;
|
|
|
+ // color: #f08a5d;
|
|
|
// animation: active 1.5s infinite;
|
|
|
}
|
|
|
|
|
@@ -442,7 +490,7 @@ export default {
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, calc(-50% + 30px));
|
|
|
- width: 200px;
|
|
|
+ width: fit-content;
|
|
|
height: 170px;
|
|
|
|
|
|
.datas-show-tip {
|