<template>
|
<div class="row">
|
<div class="col-sm-6 col-xl-4 mb5">
|
<b-card no-body class="mb-1 pl20 pr20 pt15 pb10">
|
<div class="d-flex align-items-center">
|
<div class="ion d-block ion-ios-school display-4 text-success"></div>
|
<div class="ml-3">
|
<div class="text-muted small">下属学校</div>
|
<div class="text-large">{{this.schoolList.length}}</div>
|
</div>
|
</div>
|
</b-card>
|
<b-card no-body class="mb-2">
|
<b-card-header header-tag="h5" class="with-elements pr-0 pb-0">
|
<div class="card-header-title">日常上报统计:
|
<small class="text-muted">（当日0点—24点）</small>
|
</div>
|
<!-- <div class="card-header-elements ml-auto">
|
<b-dd variant="default icon-btn borderless btn-round md-btn-flat" size="sm" text="Primary" class="dropdown-toggle-hide-arrow mr-3" :right="!isRTL">
|
<template slot="button-content"><i class="ion ion-ios-more"></i></template>
|
<b-dd-item>Action 1</b-dd-item>
|
<b-dd-item>Action 2</b-dd-item>
|
</b-dd>
|
</div> -->
|
</b-card-header>
|
<div class="py-2 px-3">
|
<div class="cui-example cui-example-vertical-spacing">
|
<vue-echart :options="pieOptions" :theme="polarTheme" :auto-resize="true"></vue-echart>
|
</div>
|
</div>
|
</b-card>
|
<b-card no-body>
|
<b-card-header header-tag="h5" class="with-elements pr-0 pb-0">
|
<div class="card-header-title">应急上报事件</div>
|
</b-card-header>
|
<div class="pl10 pr10 pt10 overflow-y" style="height:30vh">
|
<b-list-group :flush="true" v-if="tableData.length !== 0">
|
<b-list-group-item class="py-3" v-for="(iteam,index) in tableData" :key="index">
|
<div class="badge badge-danger float-right">紧急</div>
|
<div class="font-weight-semibold f18">【{{userInfo.sysOrgs.length&&userInfo.sysOrgs[0]?userInfo.sysOrgs[0].name:''}}】{{iteam.orgName}}</div>
|
<p class="text-truncate my-1">{{iteam.name}}</p>
|
<small class="text-muted">{{iteam.submitDate}}</small>
|
</b-list-group-item>
|
</b-list-group>
|
<div class="py-5 text-center" v-else>
|
<small class="text-muted">暂无数据</small>
|
</div>
|
</div>
|
<div class="pb20 pl10 pr10" v-if="total">
|
<hr class="border-light mt-0">
|
<b-pagination class="justify-content-center justify-content-sm-end m-0" v-model="activePage" :total-rows="total" :per-page="pageSize" />
|
</div>
|
</b-card>
|
</div>
|
<div class="col-sm-6 col-xl-8">
|
<b-card no-body class="pr" style="height: 84vh;">
|
<div class="clearfix mapSearch">
|
<b-input
|
placeholder=" 搜学校..."
|
style="max-width: 20rem;"
|
class="mr5 fl"
|
v-model="searchName"
|
@keyup.enter.native="handleSearch"
|
/>
|
<b-btn variant="primary" class="mr10 fl" @click.native="handleSearch"><span class="fs fas-search"></span>搜索</b-btn>
|
</div>
|
<commonMapModel :searchArr="searchRESList" @mapDailyfn="toDailyReporting" @mapEmergencyfn="toDailyEmergencyReporting"/>
|
</b-card>
|
</div>
|
</div>
|
</template>
|
|
<!-- Custom template animation -->
|
<style>
|
.echarts {
|
height: 300px !important;
|
width: 100% !important;
|
}
|
</style>
|
<script>
|
import {
|
getDailySubmitCount,
|
getEmergencyList
|
// getSchoolInfo
|
} from '@/server/home.js'
|
import { getDistrictAllSchoolById } from '@/server/common.js'
|
import commonMapModel from '@/components/map/commonMapModel'
|
import ECharts from 'vue-echarts/components/ECharts.vue'
|
import 'echarts/lib/chart/pie'
|
import 'echarts/theme/shine'
|
let pieOption = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b} : {d}% ({c})'
|
},
|
legend: {
|
// orient: 'vertical',
|
// x: 'left',
|
// y: 'center',
|
type: 'scroll',
|
data: ['未上报', '已上报']
|
},
|
series: [
|
{
|
name: '签到统计',
|
type: 'pie',
|
// radius: ['40%', '60%'],
|
radius: '80%', // 50%
|
center: ['50%', '55%'],
|
avoidLabelOverlap: true,
|
selectedMode: 'single',
|
position: 'top',
|
label: {
|
// show:false
|
position: 'inside',
|
formatter: params => {
|
// '{b}({c})'
|
let labelStr = ''
|
if (
|
params.data &&
|
params.data.name &&
|
(params.data.value || params.data.value === 0) &&
|
(params.data.countNum || params.data.countNum === 0)
|
) {
|
labelStr =
|
params.data.name +
|
'(' +
|
params.data.value +
|
'/' +
|
params.data.countNum +
|
')'
|
}
|
return labelStr !== '' ? labelStr : params.name
|
}
|
},
|
data: []
|
}
|
]
|
}
|
export default {
|
name: 'home',
|
metaInfo: {
|
title: 'Home'
|
},
|
data() {
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
/* 列表 */
|
tableData: [],
|
total: 0,
|
pageSize: 3,
|
activePage: 1,
|
/* 图表 */
|
pieOptions: pieOption,
|
polarTheme: 'shine',
|
|
schoolList: [],
|
searchName: '',
|
searchRESList: []
|
}
|
},
|
computed: {},
|
methods: {
|
/* 查询图表数据 */
|
async getDailySubmitCountData() {
|
let res = await getDailySubmitCount({ orgId: this.userInfo.orgId })
|
if (
|
res &&
|
!isNaN(parseInt(res.notSubmitedSchools)) &&
|
!isNaN(parseInt(res.submitedSchools))
|
) {
|
const countNum =
|
parseInt(res.notSubmitedSchools) + parseInt(res.submitedSchools)
|
// this.pieOptions.series[0].data.splice(0,1,{ value: res.notSubmitedSchools, name: '未上报', countNum })
|
// this.pieOptions.series[0].data.splice(1,1,{ value: res.submitedSchools, name: '已上报', countNum })
|
this.pieOptions.series[0].data = [
|
{ value: res.notSubmitedSchools, name: '未上报', countNum },
|
{ value: res.submitedSchools, name: '已上报', countNum }
|
]
|
}
|
},
|
/* 查询应急事件列表 */
|
async getETableList() {
|
let result = await getEmergencyList({
|
orgId: this.userInfo.orgId,
|
start: (this.activePage - 1) * this.pageSize,
|
length: this.pageSize,
|
startTime: this.$moment().format('YYYY-MM-DD 00:00:00'),
|
endTime: this.$moment().format('YYYY-MM-DD 23:59:59'),
|
isSubmit: '1'
|
})
|
if (result && result.data && (result.total || result.total === 0)) {
|
this.tableData = result.data
|
this.total = result.total
|
} else {
|
this.$toast({
|
message: result.message && result.message + '(' + result.code + ')',
|
type: 'error'
|
})
|
}
|
},
|
/* 查询地图数据 */
|
async getMapSchoolList() {
|
let res = await getDistrictAllSchoolById({
|
currentId: this.userInfo.orgId,
|
searchName: this.searchName
|
})
|
if (res && res.data) {
|
if (this.schoolList.length === 0 && this.searchName === '') {
|
this.schoolList = res.data
|
} else {
|
this.searchRESList = res.data
|
}
|
}
|
},
|
// 搜索
|
handleSearch() {
|
this.getMapSchoolList()
|
},
|
|
/* 地图跳转 */
|
toDailyReporting(row) {
|
this.$router.push({
|
path: '/reportingRecord',
|
query: { tabType: 'daily', searchName: row.data.name }
|
})
|
},
|
toDailyEmergencyReporting(row) {
|
this.$router.push({
|
path: '/reportingRecord',
|
query: { tabType: 'emergent', searchName: row.data.name }
|
})
|
}
|
},
|
created() {
|
console.log(this.$store.getters, '获取基础信息', this.$store.state.userInfo.orgId)
|
this.getDailySubmitCountData()
|
this.getETableList()
|
/* 查询地图 */
|
this.getMapSchoolList()
|
},
|
watch: {
|
activePage(val, oldVal) {
|
if (val !== oldVal) {
|
this.activePage = val
|
this.getETableList()
|
}
|
}
|
},
|
components: {
|
'vue-echart': ECharts,
|
commonMapModel
|
}
|
}
|
</script>
|
<style>
|
.mapSearch {
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
padding: 10px;
|
width: 100%;
|
max-width: 30rem;
|
}
|
</style>
|
