返乡登记
@@ -25,7 +25,7 @@
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="padding-bottom: 70px;background:#fff;"></div> -->
|
||||
<div style="pad-b120"></div>
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@ export default {
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/wxcp/wxuser/list?name=${this.name}¤t=${this.current}&size=20`).then((res) => {
|
||||
this.$http.post(`/app/wxcp/wxuser/list?name=${this.name}¤t=${this.current}&size=10000`).then((res) => {
|
||||
if (res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
item.isChecked = false
|
||||
@@ -112,6 +112,9 @@ export default {
|
||||
height: 100%;
|
||||
padding-bottom: 140px;
|
||||
background: #fff;
|
||||
.pad-b120{
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div class="BackUserList">
|
||||
<AiTopFixed>
|
||||
<AiTopFixed v-if="isAdmin">
|
||||
<div class="pad-t32"></div>
|
||||
<div class="select-gird" @click="linkTo('./SelectGird')">
|
||||
<img src="./components/img/gird-icon.png" alt="" class="gird-icon">
|
||||
<div>
|
||||
{{params.girdName}}
|
||||
<img src="./components/img/down-icon.png" alt="" class="down-icon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="tab-item">
|
||||
<h2 style="color:#2C51CE;">{{totalInfo.total}}</h2>
|
||||
@@ -19,23 +27,12 @@
|
||||
<p>异常处理</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="left">
|
||||
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
|
||||
<u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
|
||||
<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>
|
||||
<u-search v-model="name" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="name='',getListInit"></u-search>
|
||||
</div>
|
||||
<div class="tab-select">
|
||||
<div class="item" :class="!tabIndex ? 'active' : ''" @click="tabClick(0)">返乡人员<span></span></div>
|
||||
<div class="item" :class="tabIndex ? 'active' : ''" @click="tabClick(1)">异常人员<span></span></div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="user-list">
|
||||
<div class="user-list" v-if="isAdmin">
|
||||
<div class="item" @click="toUser(item)" v-for="(item,index) in list" :key="index">
|
||||
<h2 class="name">{{item.name}}<span class="status" v-if="item.status == 0">有异常</span></h2>
|
||||
<p class="color-999">{{item.idNumber}}</p>
|
||||
@@ -44,7 +41,16 @@
|
||||
<p><img src="./components/img/time-icon.png" alt="">{{item.createTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"></AiEmpty>
|
||||
<AiEmpty v-if="!list.length && isAdmin"></AiEmpty>
|
||||
<div v-if="!isAdmin" class="empty">
|
||||
<img src="./components/img/no-admin.png" alt="">
|
||||
<p>没有网格员权限<br />无法查看返乡登记哦~</p>
|
||||
</div>
|
||||
<div class="pad-b120"></div>
|
||||
<div class="footer">
|
||||
<div class="bg-fff">登记</div>
|
||||
<div class="bg-blue">邀请居民填写</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -52,6 +58,7 @@
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
appName: '返乡登记',
|
||||
data() {
|
||||
return {
|
||||
areaId: '',
|
||||
@@ -60,7 +67,9 @@ export default {
|
||||
current: 1,
|
||||
list: [],
|
||||
name: '',
|
||||
totalInfo: {}
|
||||
totalInfo: {},
|
||||
params: {},
|
||||
isAdmin: true
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
@@ -73,15 +82,12 @@ export default {
|
||||
uni.$on('updateList', () => {
|
||||
this.getListInit()
|
||||
})
|
||||
this.isGirdUser()
|
||||
uni.$on('goback', (res) => {
|
||||
this.params = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
areaSelect(e) {
|
||||
this.areaId =e
|
||||
this.$nextTick(() => {
|
||||
this.getListInit()
|
||||
})
|
||||
this.getTotal()
|
||||
},
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
this.getListInit()
|
||||
@@ -115,7 +121,21 @@ export default {
|
||||
},
|
||||
toUser(row) {
|
||||
uni.navigateTo({url: `./UserInfo?id=${row.id}`})
|
||||
}
|
||||
},
|
||||
linkTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
isGirdUser() {
|
||||
this.isAdmin = false
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType != '0') {
|
||||
this.isAdmin = true
|
||||
this.params = res.data.appGirdInfo
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current ++
|
||||
@@ -254,5 +274,85 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.pad-t32{
|
||||
padding-top: 32px;
|
||||
}
|
||||
.select-gird{
|
||||
width: calc(100% - 60px);
|
||||
padding: 24px 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
margin: 0 30px 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div{
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
img{
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 112px;
|
||||
height: 48px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #3F8DF5;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
text-align: center;
|
||||
img{
|
||||
width: 282px;
|
||||
height: 306px;
|
||||
margin: 136px auto 0;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.pad-b120{
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 110px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
z-index: 99;
|
||||
.bg-fff{
|
||||
flex: 1;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
.bg-blue{
|
||||
flex: 2;
|
||||
color: #fff;
|
||||
background-color: #3975C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
306
src/sass/AppBackUserList/SelectGird.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="SelectGird">
|
||||
<div class="header-middle">
|
||||
<div class="hint">
|
||||
<span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
|
||||
</div>
|
||||
<div class="showTypes">
|
||||
<div v-if="treeList.length > 0">
|
||||
<div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
|
||||
<div class="imges">
|
||||
<span>
|
||||
<img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
|
||||
<img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
|
||||
</span>
|
||||
<img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
|
||||
</div>
|
||||
<div class="rightes">
|
||||
<div class="applicationNames">{{ item.girdName }}</div>
|
||||
<img src="./components/img/right-icon.png" alt="" class="imgs" v-if="item.girdLevel != 2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="padding-bottom: 70px;"></div> -->
|
||||
<div class="subBtn" @click="submit">
|
||||
<div>确定选择</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectGird',
|
||||
data() {
|
||||
return {
|
||||
SelectGird: {},
|
||||
allData: null,
|
||||
treeList: [],
|
||||
slectList: [],
|
||||
userGird: {},
|
||||
userList: [],
|
||||
girdLevel: 0,
|
||||
parentGirdId: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.isGirdUser()
|
||||
},
|
||||
methods: {
|
||||
isGirdUser() {
|
||||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.checkType) {
|
||||
this.userGird = res.data
|
||||
this.getTree()
|
||||
} else {
|
||||
this.$u.toast('当前人员不是网格员或网格管理员')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getTree() {
|
||||
this.slectList = []
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.allData = res.data
|
||||
this.treeInit()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
treeInit() {
|
||||
this.treeList = this.allData
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
var obj = {
|
||||
girdName: '可选范围',
|
||||
id: '',
|
||||
girdLevel: ''
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
},
|
||||
|
||||
itemClick(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var obj = {
|
||||
girdName: row.girdName,
|
||||
id: row.id,
|
||||
girdLevel: row.girdLevel
|
||||
}
|
||||
this.slectList.push(obj)
|
||||
this.searckGird(row)
|
||||
},
|
||||
|
||||
searckGird(row) {
|
||||
if(row.girdLevel == 2) return
|
||||
var girdLevel = Number(row.girdLevel)+1
|
||||
this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.treeList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
girdNameClick(row, index) {
|
||||
this.userList = []
|
||||
if(!index) { //第一级别
|
||||
this.slectList = []
|
||||
this.treeInit()
|
||||
}else {
|
||||
var list = []
|
||||
this.slectList.map((item, i) => {
|
||||
if(i <= index) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
this.slectList = list
|
||||
this.searckGird(row)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
girdClick(row, index) {
|
||||
if (this.treeList[index].isChecked) {//取消
|
||||
this.treeList[index].isChecked = false
|
||||
this.SelectGird = {}
|
||||
} else {
|
||||
this.treeList.map((item) => {
|
||||
item.isChecked = false
|
||||
})
|
||||
this.treeList[index].isChecked = true
|
||||
this.SelectGird = row
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
|
||||
submit() {
|
||||
if (this.SelectGird.id != null) {
|
||||
uni.$emit('goback', this.SelectGird)
|
||||
console.log(this.SelectGird)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
return this.$u.toast('请选择网格')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SelectGird {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding-bottom: 140px;
|
||||
.header-top {
|
||||
background: #fff;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
.hint {
|
||||
padding: 28px 20px 28px 32px;
|
||||
line-height: 56px;
|
||||
box-shadow: 0px 1px 0px 0px #e4e5e6;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.showTypes {
|
||||
.empty-div {
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 200px;
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.rightes {
|
||||
width: calc(100% - 188px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
.applicationNames {
|
||||
width: calc(100% - 56px);
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.imgs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showUsers {
|
||||
.cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
// background: pink;
|
||||
padding: 0 0 0 32px;
|
||||
|
||||
.imges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
.imgselect {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatras {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 8px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.rights {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
border-bottom: 1px solid #e4e5e6;
|
||||
padding-right: 40px;
|
||||
.applicationNames {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.idNumbers {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subBtn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
background: #f4f8fb;
|
||||
div {
|
||||
width: 192px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #1365dd;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
margin: 20px 34px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
src/sass/AppBackUserList/components/img/big-user.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 282 B After Width: | Height: | Size: 282 B |
BIN
src/sass/AppBackUserList/components/img/down-icon.png
Normal file
|
After Width: | Height: | Size: 314 B |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
BIN
src/sass/AppBackUserList/components/img/gird--select-icon.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/sass/AppBackUserList/components/img/gird-icon.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 161 KiB After Width: | Height: | Size: 161 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
BIN
src/sass/AppBackUserList/components/img/jujue.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sass/AppBackUserList/components/img/local-icon.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/sass/AppBackUserList/components/img/map-icon-active.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/sass/AppBackUserList/components/img/map-icon.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/sass/AppBackUserList/components/img/no-admin.png
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
src/sass/AppBackUserList/components/img/org-icon-active.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 277 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
BIN
src/sass/AppBackUserList/components/img/right-icon.png
Normal file
|
After Width: | Height: | Size: 373 B |
BIN
src/sass/AppBackUserList/components/img/search-icon.png
Normal file
|
After Width: | Height: | Size: 766 B |
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/sass/AppBackUserList/components/img/statistics-icon.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
BIN
src/sass/AppBackUserList/components/img/tx@2x.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
BIN
src/sass/AppBackUserList/components/img/xz.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/sass/AppBackUserList/components/img/xzh.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
@@ -1,281 +0,0 @@
|
||||
<template>
|
||||
<div class="AppEpidemicSituation">
|
||||
<div class="header">
|
||||
<img src="./components/img/header.png" alt="" />
|
||||
<div class="content-info">
|
||||
<div class="title">
|
||||
<h2>实时数据统计</h2>
|
||||
<div>截止{{toadyText}}</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 class="tab-item">
|
||||
<h2 class="color-4185F5">{{totalInfo.report2}}</h2>
|
||||
<p>今日上报人数</p>
|
||||
</div>
|
||||
<div class="tab-item">
|
||||
<h2 class="color-CD413A">{{totalInfo.report3}}</h2>
|
||||
<p>今日上报异常</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<img src="./components/img/fxry.png" alt="" class="mar-r18" @click="toBack"/>
|
||||
<img src="./components/img/jkjc.png" alt="" @click="toHealth" />
|
||||
</div>
|
||||
<div class="echart-content">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: 'AppEpidemicSituation',
|
||||
appName: '疫情防控',
|
||||
data() {
|
||||
return {
|
||||
toadyText: '',
|
||||
totalInfo: {},
|
||||
echartData: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
onShow() {
|
||||
document.title = '疫情防控'
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
var date = new Date();
|
||||
this.toadyText = date.getFullYear() + '-' + date.getMonth()+1 + '-' + date.getDate()
|
||||
this.getTotal()
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
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)
|
||||
},
|
||||
toHealth(){
|
||||
uni.navigateTo({
|
||||
url:`./Health`
|
||||
})
|
||||
},
|
||||
toBack(){
|
||||
uni.navigateTo({
|
||||
url:`./BackUserList`
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppEpidemicSituation {
|
||||
.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: 33%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
padding: 0 26px;
|
||||
box-sizing: border-box;
|
||||
margin: 306px 0 32px 0;
|
||||
img {
|
||||
width: calc(50% - 18px);
|
||||
height: 136px;
|
||||
}
|
||||
.mar-r18 {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
.echart-content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 32px 38px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 96px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -82,6 +82,7 @@ import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Health',
|
||||
appName: '健康上报',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
BIN
src/sass/AppHealth/components/img/blue-icon.png
Normal file
|
After Width: | Height: | Size: 282 B |
BIN
src/sass/AppHealth/components/img/fxry.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
src/sass/AppHealth/components/img/header.png
Normal file
|
After Width: | Height: | Size: 161 KiB |
BIN
src/sass/AppHealth/components/img/jkjc.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
src/sass/AppHealth/components/img/org-icon.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
src/sass/AppHealth/components/img/phone-icon.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/sass/AppHealth/components/img/phone2@.png
Normal file
|
After Width: | Height: | Size: 978 B |
BIN
src/sass/AppHealth/components/img/time-icon.png
Normal file
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/sass/AppHealth/components/img/user-img.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |