277 lines
8.3 KiB
Vue
277 lines
8.3 KiB
Vue
<template>
|
|
<div>
|
|
<scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
|
|
<div id="index" ref="appRef" :key="componentKey">
|
|
<div class="bg">
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="host-body">
|
|
<div class="d-flex jc-center">
|
|
<dv-decoration-10 class="dv-dec-10" />
|
|
<div class="d-flex jc-center">
|
|
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
|
<div class="title" @click="handleWelcome" style="cursor: pointer;">
|
|
<span class="title-text" style="display: inline-block;width: 100%;line-height: 2;">
|
|
下堡坪乡农村福利院长者管理系统
|
|
</span>
|
|
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
|
</div>
|
|
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
|
|
</div>
|
|
<dv-decoration-10 class="dv-dec-10-s" />
|
|
</div>
|
|
|
|
<!-- 第二行 -->
|
|
<div class="d-flex jc-between px-2">
|
|
<div class="d-flex aside-width">
|
|
<div class="react-left ml-3 fw-b" style="background-color: #1a5cd7;">
|
|
<span class="text">数据统计</span>
|
|
</div>
|
|
<div class="react-left ml-3 sx">
|
|
<span class="text" @click="jumpPage(1)">数据查询</span>
|
|
</div>
|
|
<div class="react-left ml-3 sx">
|
|
<span class="text" @click="jumpPage(2)">荣誉展示</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex aside-width">
|
|
<div class="react-right mr-3 react-l-s sx" style="width: 250px;">
|
|
<span class="text " @click="jumpPage(3)">实时监控</span>
|
|
</div>
|
|
<div class="react-right mr-3 react-l-s sx" style="width: 250px;">
|
|
<span class="text " @click="jumpPage(4)">健康预警</span>
|
|
</div>
|
|
<div class="react-right mr-4 react-l-s" style="width: 380px;">
|
|
<span class="react-after"></span>
|
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body-box">
|
|
<!-- 第三行数据 -->
|
|
<div class="content-box">
|
|
<div>
|
|
<dv-border-box-12>
|
|
<xb :sexData="mapData.sexList" />
|
|
</dv-border-box-12>
|
|
</div>
|
|
<div>
|
|
<dv-border-box-12>
|
|
<nltj :ageList="mapData.ageList" />
|
|
</dv-border-box-12>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div>
|
|
<center :centerData="mapData.centerData" />
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div>
|
|
<dv-border-box-12>
|
|
<hldj :nursingLevelList="mapData.nursingLevelList" />
|
|
</dv-border-box-12>
|
|
</div>
|
|
<div>
|
|
<dv-border-box-12>
|
|
<jzfp :ifHelpPoorList="mapData.ifHelpPoorList" />
|
|
</dv-border-box-12>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第四行数据 -->
|
|
<div class="bottom-box">
|
|
<dv-border-box-13>
|
|
<bottomRight :rzData="mapData.rzData" />
|
|
</dv-border-box-13>
|
|
<dv-border-box-12>
|
|
<bottomLeft :villageCountList="mapData.villageCountList"/>
|
|
</dv-border-box-12>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scale-box>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import drawMixin from '../../utils/drawMixin'
|
|
import useDraw from '@/utils/useDraw'
|
|
import {
|
|
formatTime
|
|
} from '../../utils/index.js'
|
|
import hldj from './hldj'
|
|
import xb from './xb'
|
|
import jzfp from './jzfp'
|
|
import nltj from './nltj'
|
|
import center from './center'
|
|
import bottomLeft from './bottomLeft'
|
|
import bottomRight from './bottomRight'
|
|
import ScaleBox from 'vue2-scale-box'
|
|
|
|
import {
|
|
dataStatistics
|
|
} from '@/api/data/data'
|
|
|
|
export default {
|
|
mixins: [drawMixin],
|
|
data () {
|
|
return {
|
|
timing: null,
|
|
loading: true,
|
|
dateDay: null,
|
|
dateYear: null,
|
|
dateWeek: null,
|
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
decorationColor: ['#568aea', '#000000'],
|
|
componentKey: 0,
|
|
mapData: {
|
|
sexList: [],
|
|
ageList: [],
|
|
nursingLevelList: [],
|
|
ifHelpPoorList: [],
|
|
centerData: {
|
|
countList: [],
|
|
jzgyRate: null,
|
|
fsgyRate: null,
|
|
villageRankList: []
|
|
},
|
|
rzData: {
|
|
roomTypeList: [],
|
|
roomCountList: []
|
|
},
|
|
villageCountList: []
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
ScaleBox,
|
|
hldj,
|
|
xb,
|
|
jzfp,
|
|
nltj,
|
|
center,
|
|
bottomLeft,
|
|
bottomRight
|
|
},
|
|
mounted () {
|
|
this.timeFn()
|
|
this.cancelLoading()
|
|
|
|
const {
|
|
calcRate,
|
|
windowDraw,
|
|
unWindowDraw
|
|
} = useDraw(this.$refs.appRef)
|
|
|
|
// 调用 useDraw 返回的方法 屏幕适应
|
|
windowDraw()
|
|
calcRate()
|
|
this.componentKey += 1
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.timing)
|
|
|
|
const {
|
|
unWindowDraw
|
|
} = useDraw()
|
|
unWindowDraw()
|
|
},
|
|
// 生命周期 - 创建完成
|
|
created () {
|
|
this.getDataAll()
|
|
},
|
|
methods: {
|
|
getDataAll () {
|
|
dataStatistics().then((res) => {
|
|
if (res.code == 200) {
|
|
console.log(res.data)
|
|
this.mapData = res.data
|
|
|
|
this.addCenterData()
|
|
this.mapData.centerData.countList.push(this.mapData.ljrzCount)
|
|
this.mapData.centerData.countList.push(this.mapData.jnrzCount)
|
|
this.mapData.centerData.countList.push(this.mapData.byxzCount)
|
|
this.mapData.centerData.countList.push(this.mapData.mqzyCount)
|
|
this.mapData.centerData.countList.push(this.mapData.wcjyCount)
|
|
this.mapData.centerData.countList.push(this.mapData.jnjyCount)
|
|
|
|
this.mapData.centerData.jzgyRate = this.mapData.jzgyRate
|
|
this.mapData.centerData.fsgyRate = this.mapData.fsgyRate
|
|
this.mapData.centerData.villageRankList = this.mapData.villageRankList
|
|
|
|
this.mapData.rzData.roomTypeList = this.mapData.roomTypeList
|
|
this.mapData.rzData.roomCountList = this.mapData.roomCountList
|
|
} else {
|
|
this.$message.error('数据加载失败')
|
|
}
|
|
})
|
|
},
|
|
addCenterData () {
|
|
const centerData = {
|
|
countList: [],
|
|
jzgyRate: null,
|
|
fsgyRate: null,
|
|
villageRankList: []
|
|
}
|
|
const rzData = {
|
|
roomTypeList: [],
|
|
roomCountList: []
|
|
}
|
|
this.$set(this.mapData, 'centerData', centerData)
|
|
this.$set(this.mapData, 'rzData', rzData)
|
|
},
|
|
timeFn () {
|
|
this.timing = setInterval(() => {
|
|
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
|
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
|
this.dateWeek = this.weekday[new Date().getDay()]
|
|
}, 1000)
|
|
},
|
|
cancelLoading () {
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 500)
|
|
},
|
|
handleWelcome () {
|
|
this.$router.push({
|
|
path: '/welcome'
|
|
})
|
|
},
|
|
jumpPage (type) {
|
|
if (type == 1) {
|
|
this.$router.push({
|
|
path: '/welcome'
|
|
})
|
|
} else if (type == 2) {
|
|
this.$router.push({
|
|
path: '/honor/show'
|
|
})
|
|
} else if (type == 3) {
|
|
this.$router.push({
|
|
path: '/aqld_bjcl'
|
|
})
|
|
} else if (type == 4) {
|
|
this.$router.push({
|
|
path: '/aqld_jkjc'
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../assets/scss/index.scss';
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.sx :hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|