kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

排查统计

Browse Source
This commit is contained in:
liuye
2022-09-22 16:59:51 +08:00
parent 49db004ad0
commit 16940be175
2 changed files with 345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/project/pingchang/AppCommunityManagement/Statistics.vue Normal file
View File

@@ -0,0 +1,345 @@
<template>
<div class="Statistics">
<div class="header">
<img src="./components/img/header.png" alt="" />
<div class="content-info">
<div class="title">
<h2>实时数据统计</h2>
<div>
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
<span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
<span v-else>地区选择</span>
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
</AiAreaPicker>
</div>
</div>
<div class="tab-content">
<div class="tab-item">
<h2 class="color-5AAD6A">{{totalInfo.back1}}</h2>
<p>累计排查</p>
</div>
<div class="tab-item">
<h2 class="color-4185F5">{{totalInfo.back2}}</h2>
<p>今日排查</p>
</div>
<div class="tab-item">
<h2 class="color-CD413A">{{totalInfo.back3}}</h2>
<p>今日核酸</p>
</div>
<div class="tab-item">
<h2 class="color-5AAD6A">{{totalInfo.report1}}</h2>
<p>我的排查</p>
</div>
</div>
</div>
</div>
<div class="echart-content mar-t160">
<div class="title">排查数据统计</div>
<div class="echart" id="statistic"></div>
<div class="type-text"><span class="tips bg-32C5FF"></span>排查人数 <span class="tips bg-FFAA44"></span>已采核酸</div>
</div>
<div class="echart-content">
<div class="title">返乡数据统计
<span class="right-search">时间选择<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" /></span>
</div>
<div class="chart-flex">
<div class="chart-box" id="statisticCircle" style="width: 200px;height: 200px;"></div>
<div class="type-num">
<div class="item status0">
<div class="label">
<span class="tips"></span>返乡登记
</div>
<div class="num">20</div>
</div>
<div class="item status1">
<div class="label">
<span class="tips"></span>卡口登记
</div>
<div class="num">20</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
name: 'Statistics',
data() {
return {
toadyText: '',
totalInfo: {},
echartData: null,
echartDataClrcle: null,
areaId: '',
areaName: '',
}
},
computed: { ...mapState(['user']) },
onShow() {
document.title = '排查统计'
},
onLoad() {
var date = new Date();
this.toadyText = date.getFullYear() + '-' + date.getMonth()+1 + '-' + date.getDate()
this.getTotal()
},
methods: {
areaSelect(e) {
this.areaId = e
},
getTotal() {
this.$http.post(`/app/appepidemicbackhomerecord/statisticForQW`).then((res) => {
if (res.code == 0) {
this.totalInfo = res.data.map
var xData = [], yDataBack = [], yDataError = []
for(let key in res.data.fiveTotal){
xData.push(key)
yDataBack.push(res.data.fiveTotal[key])
}
for(let key in res.data.fiveUnusual){
yDataError.push(res.data.fiveUnusual[key])
}
this.chartInit(xData, yDataBack, yDataError)
this.chartInitCircle()
}
})
},
chartInit(xData, yDataBack, yDataError) {
console.log(xData)
this.echartData = echarts.init(document.getElementById('statistic'))
var option = {
grid: {
left: '6%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: yDataBack,
lineStyle: {
normal: {
color: '#32c5ff'
}
},
itemStyle : {
normal : {
color:'#32c5ff',
}
}
},
{
type: 'line',
data: yDataError,
lineStyle: {
normal: {
color: '#ffaa44'
}
},
itemStyle : {
normal : {
color:'#ffaa44',
}
}
},
]
};
this.echartData.setOption(option)
},
chartInitCircle() {
this.echartDataCircle = echarts.init(document.getElementById('statisticCircle'))
var option = {
color: ['#4185F5', '#5AAD6A'],
series: [
{
type: 'pie',
radius: '80%',
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '返乡登记' },
{ value: 735, name: '卡口登记' },
],
}
]
};
this.echartDataCircle.setOption(option)
}
},
}
</script>
<style lang="scss" scoped>
.Statistics {
.header {
position: relative;
img {
width: 100%;
height: 504px;
}
.content-info {
width: calc(100% - 60px);
background: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
border-radius: 8px;
position: absolute;
top: 368px;
left: 30px;
z-index: 99;
margin-bottom: 32px;
.title {
display: flex;
justify-content: space-between;
padding: 32px 32px 32px 48px;
h2 {
font-size: 36px;
font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800;
color: #333;
line-height: 50px;
}
div {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
}
}
.tab-content {
padding-bottom: 20px;
.tab-item {
display: inline-block;
width: 25%;
text-align: center;
margin-bottom: 32px;
h2 {
font-size: 52px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
line-height: 60px;
margin-bottom: 10px;
letter-spacing: -4px;
}
p {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 40px;
}
.color-5AAD6A {
color: #5aad6a;
}
.color-4185F5 {
color: #4185f5;
}
.color-CD413A {
color: #cd413a;
}
}
}
}
}
.mar-t160 {
margin-top: 160px;
}
.echart-content {
width: 100%;
background-color: #fff;
padding: 0 32px 38px;
box-sizing: border-box;
margin-bottom: 32px;
.title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 96px;
margin-bottom: 16px;
overflow: hidden;
.right-search {
float: right;
font-size: 28px;
color: #666;
}
}
.echart {
width: 100%;
height: 464px;
background: #f9f9f9;
border-radius: 8px;
margin-bottom: 32px;
}
.type-text {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 40px;
text-align: center;
.tips {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 20px;
}
.bg-32C5FF {
background: #32c5ff;
}
.bg-FFAA44 {
background: #ffaa44;
margin-left: 80px;
}
}
.chart-flex {
display: flex;
justify-content: space-between;
.type-num {
width: 240px;
margin-top: 120px;
.item {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 32px;
.tips {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 20px;
}
}
.status0 {
color: #4185F5;
.tips {
background-color: #4185F5;
}
}
.status1 {
color: #5AAD6A;
.tips {
background-color: #5AAD6A;
}
}
}
}
}
}
</style>

BIN
src/project/pingchang/AppCommunityManagement/components/img/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB