parent
f6af695bcf
commit
41e7da9efc
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="info-container">
|
||||||
|
<threeCell />
|
||||||
|
<colorList />
|
||||||
|
<realTimeList />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import threeCell from "./threeCell.vue";
|
||||||
|
import colorList from "./colorList.vue";
|
||||||
|
import realTimeList from "./realTimeList.vue";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
components: { threeCell, colorList, realTimeList },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-container {
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<div class="realTime">
|
||||||
|
<introduceTitle title="本月实时数据更新情况"></introduceTitle>
|
||||||
|
|
||||||
|
<div class="total-num">
|
||||||
|
<div>
|
||||||
|
已更新<span style="color: #ff9e00">{{ totalData.houseCount }}</span
|
||||||
|
>户<span style="color: #ff9e00">{{ totalData.count }}</span
|
||||||
|
>人
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition-group
|
||||||
|
name="animate__animated animate__bounce"
|
||||||
|
tag="ul"
|
||||||
|
enter-active-class="animate__zoomInRight"
|
||||||
|
leave-active-class="animate__zoomOutRight"
|
||||||
|
class="container"
|
||||||
|
v-if="items.length > 0"
|
||||||
|
id="scrollContainer"
|
||||||
|
appear
|
||||||
|
>
|
||||||
|
<div v-for="item in items" :key="item.uuid" class="item">
|
||||||
|
<span style="flex: 1.3"
|
||||||
|
>{{ item.deptName }}{{ item.buildingName }}{{ item.houseName }}</span
|
||||||
|
>
|
||||||
|
<span style="color: #00fbc6">
|
||||||
|
{{ momentjs(item.updateTime).format("YYYY-MM-DD") }}</span
|
||||||
|
>
|
||||||
|
<span style="flex: 1.2; color: #18b9f1"
|
||||||
|
>网格员:{{ item.updateBy }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
<div class="container isNoData" v-else>暂无数据</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
|
||||||
|
import { getrealTime } from "@/api/home/index.js";
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
introduceTitle,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const moment = require("moment");
|
||||||
|
return {
|
||||||
|
momentjs: moment,
|
||||||
|
timer: null,
|
||||||
|
queryParmas: {
|
||||||
|
startTime: undefined,
|
||||||
|
buildingId: undefined,
|
||||||
|
parentid: undefined,
|
||||||
|
},
|
||||||
|
totalData: {
|
||||||
|
houseCount: 0,
|
||||||
|
count: 0,
|
||||||
|
},
|
||||||
|
items: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
"queryParamsXiaoqu.parentid"(newValue, oldValue) {
|
||||||
|
this.handleChange();
|
||||||
|
},
|
||||||
|
"queryParamsXiaoqu.buildingId"(newValue, oldValue) {
|
||||||
|
this.handleChange();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["queryParamsXiaoqu"]),
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.queryParmas = {
|
||||||
|
buildingId: this.queryParamsXiaoqu.buildingId,
|
||||||
|
parentid: this.queryParamsXiaoqu.parentid,
|
||||||
|
xiaoquId: this.queryParamsXiaoqu.xiaoquId,
|
||||||
|
};
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange() {
|
||||||
|
if (process.env.NODE_ENV === "development") return;
|
||||||
|
this.queryParmas.startTime = undefined;
|
||||||
|
clearInterval(this.timer);
|
||||||
|
this.totalData = {
|
||||||
|
houseCount: 0,
|
||||||
|
count: 0,
|
||||||
|
};
|
||||||
|
if (this.items.length > 0) this.backHomeTop();
|
||||||
|
this.items = [];
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
backHomeTop() {
|
||||||
|
let scrollContainer = document.getElementById("scrollContainer");
|
||||||
|
scrollContainer.scrollTop = 0;
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.getList(false);
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === "development") return;
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
if (this.items.length > 1000) {
|
||||||
|
//考虑dom太多影响到性能,每十秒删除后面100条数据,最后保留一千条
|
||||||
|
this.items.splice(-100);
|
||||||
|
}
|
||||||
|
this.getList(true);
|
||||||
|
}, 10000);
|
||||||
|
},
|
||||||
|
|
||||||
|
getList(isopen) {
|
||||||
|
this.queryParmas = {
|
||||||
|
startTime: isopen
|
||||||
|
? this.momentjs().format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
: undefined,
|
||||||
|
buildingId: this.queryParamsXiaoqu.buildingId,
|
||||||
|
parentid: this.queryParamsXiaoqu.parentid,
|
||||||
|
xiaoquId: this.queryParamsXiaoqu.xiaoquId,
|
||||||
|
};
|
||||||
|
getrealTime(this.queryParmas).then((res) => {
|
||||||
|
if (isopen) {
|
||||||
|
res.data.list.forEach((item, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.items.unshift(item);
|
||||||
|
}, 500 * index);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.items = res.data.list;
|
||||||
|
}
|
||||||
|
this.totalData.houseCount =
|
||||||
|
this.totalData.houseCount + res.data.houseCount;
|
||||||
|
this.totalData.count = this.totalData.count + res.data.count;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.realTime {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 26%;
|
||||||
|
}
|
||||||
|
.isNoData {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
background: rgba(0, 30, 57, 0.3);
|
||||||
|
border: 1px solid #016fbb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
flex: 0.8;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
||||||
|
}
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
& > div:nth-child(1) {
|
||||||
|
background: rgba(255, 158, 0, 0.3);
|
||||||
|
border-color: #ff9e00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-num {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin: 6px 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fffbf4;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*全局滚动条样式*/
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 10px;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div class="three-cell">
|
||||||
|
<div class="cell-item">
|
||||||
|
<img src="@/assets/images/ui/icon_3.png" alt="" />
|
||||||
|
<div class="lable-value">
|
||||||
|
<div class="value-item">
|
||||||
|
<div class="value-data">{{ from.house }}</div>
|
||||||
|
<div class="value-lable">总户数</div>
|
||||||
|
</div>
|
||||||
|
<div class="value-item" style="margin-left: 6px">
|
||||||
|
<div class="value-data">{{ from.person }}</div>
|
||||||
|
<div class="value-lable">人口数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell-item" v-show="!queryParamsXiaoqu.parentid">
|
||||||
|
<img src="@/assets/images/ui/icon_1.png" alt="" />
|
||||||
|
<div class="value-item">
|
||||||
|
<div class="value-data">{{ from.network }}</div>
|
||||||
|
<div class="value-lable">网格总数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell-item" v-show="!queryParamsXiaoqu.buildingId">
|
||||||
|
<img src="@/assets/images/ui/icon_2.png" alt="" />
|
||||||
|
<div class="value-item">
|
||||||
|
<div class="value-data">{{ from.building }}</div>
|
||||||
|
<div class="value-lable">楼幢总数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
|
import { getTotaldata } from "@/api/home/index.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
from: {
|
||||||
|
house: 0,
|
||||||
|
person: 0,
|
||||||
|
network: 0,
|
||||||
|
building: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(["queryParamsXiaoqu"]),
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
queryParamsXiaoqu: {
|
||||||
|
handler(val) {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getData() {
|
||||||
|
let res = await getTotaldata(this.queryParamsXiaoqu);
|
||||||
|
this.from = {
|
||||||
|
house: res.data["网格户数据"],
|
||||||
|
person: res.data["网格人数据"],
|
||||||
|
network: res.data["网格总数数据"],
|
||||||
|
building: res.data["网格楼栋数据"],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.three-cell {
|
||||||
|
height: 15%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.cell-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
.lable-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.value-item {
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.value-data {
|
||||||
|
margin: 2px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "DIN-Medium-2.otf";
|
||||||
|
text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
|
||||||
|
0 0 50px #278873;
|
||||||
|
}
|
||||||
|
.value-lable {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #30ecf9;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue