Skip to content

P
pc
Commit 43c5a215 authored by 程卓's avatar 程卓
Browse files
Options

Merge branch 'dev-newDashBoard' into dev

parents accf7ba4 fffdb7d9
Show whitespace changes
Inline Side-by-side
Showing with 1029 additions and 5 deletions
src/router/routes.js
View file @ 43c5a215
...@@ -27,6 +27,10 @@ const appRoutes = [ ...@@ -27,6 +27,10 @@ const appRoutes = [
path: '/portal-home', name: 'home', component: resolve => require(['@/views/home'], resolve), //Home, path: '/portal-home', name: 'home', component: resolve => require(['@/views/home'], resolve), //Home,
meta: { title: '首页' }, meta: { title: '首页' },
}, },
{
path: '/dashBoard', name: 'dashBoard', component: resolve => require(['@/views/dashBoard'], resolve), //Home,
meta: { title: '首页' },
},
{ path: '/person', name: 'person', component: resolve => require(['@/views/person-center'], resolve), //PersonCenter, { path: '/person', name: 'person', component: resolve => require(['@/views/person-center'], resolve), //PersonCenter,
meta: { title: '个人中心' }, meta: { title: '个人中心' },
}, },
......
src/server/api.js
View file @ 43c5a215
...@@ -204,4 +204,6 @@ export default { ...@@ -204,4 +204,6 @@ export default {
GET_LABEL_LIST: MOCK_URL + '/service-customkey-ddd/labels', // 获取标签列表 GET_LABEL_LIST: MOCK_URL + '/service-customkey-ddd/labels', // 获取标签列表
GET_FB_WY_MANAGE_CHECK: '/service-documents-ddd/checkOrder/dahboard/countDatas', //首页-房办月查-物业双周查-经理自查
} }
src/views/dashBoard.vue 0 → 100644
View file @ 43c5a215
<template>
<div id="home" class="layoutPadding">
<a-row type="flex" class="align-stretch" style="">
<a-col :span="24">
<a-row type="flex" style="height:100%;">
<a-col :span="6">
<div class="home-card topBox" style="margin-right:10px;">
<a-row>
<a-col :span='7'>
<div class="justify-between topBox" >
<div>
<p class="top-font" >小区数</p>
<span class="top-count" >{{baseData.community}}</span>
</div>
</div>
</a-col>
<a-col :span='12'>
<a-row style="border-left: 1px solid lightgrey; padding-left: 10px; padding-bottom: 5px;">
<a-col :span='16'>
<span class="top-font" > 本月新增 : </span>
</a-col>
<a-col :span='8'>
<span class="top-count-extra" style="cursor: pointer;" >{{2}}</span>
</a-col>
</a-row>
<a-row style="border-left: 1px solid lightgrey; padding-left: 10px;padding-top: 10px;">
<a-col :span='16'>
<span class="top-font" > 本月注销 : </span>
</a-col>
<a-col :span='8'>
<span class="top-count-extra" style="cursor: pointer;">{{3}}</span>
</a-col>
</a-row>
</a-col>
<a-col :span='1' />
<a-col :span='4'>
<div class="align-center" style="margin-top: 0px">
<img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
</div>
</a-col>
</a-row>
<a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
<a-col :span='7'>
商品 : {{332}}
</a-col>
<a-col :span='7'>
直管 : {{224}}
</a-col>
<a-col :span='10'>
保障及其他 : {{321}}
</a-col>
</a-row>
</div>
</a-col>
<a-col :span="6">
<div class="home-card topBox" style="margin-right:10px;">
<a-row>
<a-col :span='7'>
<div class="justify-between topBox" >
<div>
<p class="top-font" >门牌幢</p>
<span class="top-count" >{{baseData.building}}</span>
</div>
</div>
</a-col>
<a-col :span='12'>
<a-row style="border-left: 1px solid lightgrey; padding-left: 10px; padding-bottom: 5px;">
<a-col :span='16'>
<span class="top-font" > 本月增加 : </span>
</a-col>
<a-col :span='8'>
<span class="top-count-extra" style="cursor: pointer;" >{{0}}</span>
</a-col>
</a-row>
<a-row style="border-left: 1px solid lightgrey; padding-left: 10px;padding-top: 10px;">
<a-col :span='16'>
<span class="top-font" > 本月注销 : </span>
</a-col>
<a-col :span='8'>
<span class="top-count-extra" style="cursor: pointer;">{{4}}</span>
</a-col>
</a-row>
</a-col>
<a-col :span='1' />
<a-col :span='4'>
<div class="align-center" style="margin-top: 0px">
<img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
</div>
</a-col>
</a-row>
<a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
<a-col :span='12'>
有电梯 : {{332}}
</a-col>
</a-row>
</div>
</a-col>
<a-col :span="6">
<div class="home-card topBox" style="margin-right:10px;">
<a-row>
<a-col :span='7'>
<div class="justify-between topBox" >
<div>
<p class="top-font" >物业企业</p>
<span class="top-count" >{{baseData.company}}</span>
</div>
</div>
</a-col>
<a-col :span='12' />
<a-col :span='4'>
<div class="align-center" style="margin-top: 0px">
<img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
</div>
</a-col>
</a-row>
<a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
<a-col :span='12'>
区属物业 : {{111}}
</a-col>
<a-col :span='12'>
本市注册 : {{222}}
</a-col>
</a-row>
</div>
</a-col>
<a-col :span="6">
<div class="home-card topBox" style="">
<a-row>
<a-col :span='7'>
<div class="justify-between topBox" >
<div>
<p class="top-font" >业委会</p>
<span class="top-count" >{{baseData.ic}}</span>
</div>
</div>
</a-col>
<a-col :span='12' />
<a-col :span='4'>
<div class="align-center" style="margin-top: 0px">
<img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
</div>
</a-col>
</a-row>
<a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
<a-col :span='12'>
近五个月到期 : {{11}}
</a-col>
<a-col :span='12'>
已过期 : {{5}}
</a-col>
</a-row>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row class="align-stretch" style="margin-top:10px;">
<a-col :span="6">
<div class="month">
<div class="home-card monthTitle">
<span>房办月查</span>
<span>{{ parseInt(((secRowInfos.HOUSING_OFFICE.count.rectifiedCount/secRowInfos.HOUSING_OFFICE.count.rectifyCount)*100)) }}%</span>
</div>
<div class="home-card monthBox">
<p class="monthBoxTitle">今年完成情况</p>
<div class="monthBoxContent" >
<div class="hoverTest" v-for="item in FB_month" :key="item.name">
<div @click="checkMonth(item)" :class="'monthImg blue '" :style="`background:${item.backgroundColor}; color:${item.color}`">
{{item.name}}
<div class="monthHover" @click="hoverMonth(item)">
<div>
<span>明细</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-card monthBottom">
<span>整改执行</span>
<span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.HOUSING_OFFICE.count.rectifiedCount}}/</span>{{secRowInfos.HOUSING_OFFICE.count.rectifyCount}}</span>
</div>
</div>
</a-col>
<a-col :span="6">
<div class="month">
<div class="home-card monthTitle">
<span>物企双周查</span>
<span>{{ parseInt(((secRowInfos.PROPERTY_BIWEEKLY.count.rectifiedCount/secRowInfos.PROPERTY_BIWEEKLY.count.rectifyCount)*100)) }}%</span>
</div>
<div class="home-card monthBox">
<p class="monthBoxTitle">今年完成情况</p>
<div class="monthBoxContent" >
<div class="hoverTest" v-for="item in WQ_month" :key="item.name">
<div @click="checkMonth(item)" :class="'monthImg blue '" :style="`background:${item.backgroundColor}; color:${item.color}`">
{{item.name}}
<div class="monthHover" @click="hoverMonth(item)">
<div>
<span>明细</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-card monthBottom">
<span>整改执行</span>
<span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.PROPERTY_BIWEEKLY.count.rectifiedCount}}/</span>{{secRowInfos.PROPERTY_BIWEEKLY.count.rectifyCount}}</span>
</div>
</div>
</a-col>
<a-col :span="6">
<div class="month" style="height:100%">
<div class="home-card monthTitle">
<span>物业经理自查</span>
</div>
<div class="home-card monthBox">
<p class="monthBoxTitle" > {{!showMonthOrYear? '本月':'今年'}}完成情况 <span @click="showMonthOrYear=!showMonthOrYear" style="float:right;fontSize:12px;cursor:pointer;color:rgb(80,150,250)">切换今年</span></p>
<div class="monthBoxContent" v-show="showMonthOrYear">
<div class="hoverTest" v-for="item in manager_month" :key="item.name">
<div @click="checkMonth(item)" :class="'monthImg blue'" :style="`background:${item.backgroundColor}; color:${item.color}`">
{{item.name}}
<div class="monthHover" @click="hoverMonth(item)">
<div>
<span>明细</span>
</div>
</div>
</div>
</div>
</div>
<div v-show="!showMonthOrYear" class="calendar">
<!-- <a-calendar id="calendar" :validRange="validRange" :fullscreen="false" /> -->
<table border=0 style="width:100%;height:100%;text-align:center;marginTop:10px">
<thead>
<tr>
<th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th>
</tr>
</thead>
<tbody ref='calendar'>
</tbody>
</table>
</div>
</div>
<div class="home-card monthBottom">
<span>整改执行</span>
<span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.COMMUNITY_MANAGER_YEAR.count.rectifiedCount}}/</span>{{secRowInfos.COMMUNITY_MANAGER_YEAR.count.rectifyCount}}</span>
</div>
</div>
</a-col>
<a-col :span="6">
<div class="sec-right">
<div style="">
<a-row>
<a-col :span="24" >
<div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
<img src="@/assets/icon/xqda.png" style="width:40px;margin:0 10%" alt="">
<p style="color:rgb(80,150,250)"> 小区档案</p>
</div>
</a-col>
</a-row>
<a-row>
<a-col :span="24" >
<div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})">
<img src="@/assets/icon/wyqyda.png" style="width:40px;margin:0 10%" alt="">
<p style="color:rgb(80,150,250)"> 物业企业档案</p>
</div>
</a-col>
</a-row>
</div>
<div style="flex:1;marginTop:10px; display:flex;flex-direction:column" class="home-card">
<div class="home-card" style="border-bottom:1px solid #ccc;font-weight:550;">
<span>专项检查</span>
</div >
<div style="flex:1;display:flex;flex-direction:column;justify-content:space-around;paddingLeft:10%;font-weight:600;fontSize:15px">
<div style="">
<span ><img src="@/assets/icon/yyzt.png" alt="" style="width:20px;margin-right:3px;"> 已有主题</span>
<span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{theme}}</span>
</div>
<div>
<span ><img src="@/assets/icon/ywcjcxq.png" alt="" style="width:20px;margin-right:3px;"> 已完成小区</span>
<span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{sect}}</span>
</div>
<div>
<span ><img src="@/assets/icon/zt.png" alt="" style="width:20px;margin-right:3px;"> 已开整改单</span>
<span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{receipts}}</span>
</div>
<div>
<span ><img src="@/assets/icon/zt.png" alt="" style="width:20px;margin-right:3px;"> 已完成整改</span>
<span style="float:right;paddingRight:50px;color:rgb(80,150,250)">0</span>
</div>
</div>
</div>
</div>
</a-col>
</a-row>
<a-row class="align-stretch" style="margin-top:10px;">
<a-col :span="12" style="marginRight:10px">
<div class="home-card" style="margin-top:10px;">
<ComplaintsTrain moduletitle="投诉问题" />
</div>
</a-col>
<a-col :span="12">
<div class="home-card" style="margin-top:10px;">
<ComplaintsTrain moduletitle="报修" />
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import ComplaintsTrain from '@/views/home/ComplaintsTrain'
import qs from 'qs'
import axios from 'axios'
export default {
name: 'HomePage',
components: {
ComplaintsTrain
},
data() {
return{
sect: 0, //已完成小区
theme: 0, //已有主题
receipts: 0, //已开整改单
baseData: {},
showMonthOrYear: false,
date: new Date(),
titleData: {},
openConfig: false,
disposal: {},
nowMonth: '本月',
checkStreet: 0,
totStreet: 0,
FB_month: [
{name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
],
WQ_month: [
{name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
],
manager_month: [
{name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'},
{name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
{name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' },
],
expired: 0,
secRowInfos: {},
}
},
mounted(){
this.getFBCheck()
this.getCheckData()
this.getSectNum()
this.getbaseInfo()
this.getReceiptsNum()
},
updated(){
this.$nextTick(() => {
this.myCanlendar()
})
},
computed: {
validRange(){ //限制日历只展示当前月的日期
let year = this.$moment(new Date()).format('YYYY')
let month = +this.$moment(new Date()).format('MM')
let last = ''
let start = year+'-'+month+'-01'
let arr1 = [1, 3, 5, 7, 8, 10, 12]
let arr2 = [4, 6, 9, 11]
if (arr1.indexOf(month)!=-1) {
last = year+'-'+month+'-31'
}else if (arr2.indexOf(month)!=-1){
last = year+'-'+month+'-30'
}else if(String((year/4)).indexOf('.')!=-1 ){
last = year+'-'+month+'-28'
}else{
last = year+'-'+month+'-29'
}
return [this.$moment(start), this.$moment(last)]
}
},
methods: {
//日历组件
myCanlendar(){
let dateArr = [...this.$moment(new Date()).format('YYYY-MM-DD').split('-')]
// console.log('获取当前日期:'dateArr)
// 获取当前月对应的最大天数
let maxDayObj = new Date(dateArr[0], dateArr[1], 0)
let maxDay = maxDayObj.getDate()
// console.log('当前月对应的最大天数:'+maxDay)
// 获取当前日期第一天对应周几
let firstDayObj = new Date(dateArr[0], dateArr[1]-1, 1)
let firstDay = firstDayObj.getDay()
firstDay = firstDay == 0 ? 7 : firstDay
// console.log('获取当前日期第一天对应周几:'+firstDay)
// 打印表格
let spaceOnce = true
let tab='<tr>'
for(let i=1;i<=maxDay;i++){
// 打印最前面的空格子,确保只打印一次
if(firstDay>0 && spaceOnce){
for(let j=1;j<firstDay;j++){
tab+= '<td>&nbsp</td>'
}
spaceOnce = false
}
let info = this.secRowInfos.COMMUNITY_MANAGER_MATH.data[i]
let color= 'rgb(226,235,245)'
if (info) {
if (info.rectifiedCount / info.rectifyCount <0.9 ) {
color= '#CC4D4D'
} else if(info.rectifiedCount / info.rectifyCount == 1 || info.rectifyCount == 0) {
color= '#6EB629'
} else {
color= '#FFD400'
}
}
tab+= '<td style="border-radius:20%;text-align:center;border:4px solid #fff;background:'+color+'">'+i+'</td>'
if((i-(8-firstDay))%7==0){
tab+='</tr><tr>'
}
/*
如果某月的第一天是周日，那么格子总数会有42个，反之35个就够了，这里按42个打印
// 打印最后几个空格子， tbody总共应有42个格子,-天数 -前面的空格子
*/
let lastSpace = 42-maxDay-(firstDay-1)
// console.log('最后总共有空格:'+lastSpace+',倒数第二行空格:'+(lastSpace-7))
if(i==maxDay && lastSpace > 0){
for(let k = 0;k<lastSpace;k++){
tab+= '<td>&nbsp</td>'
// 减7是计算倒数第二行最后有几个空格,然后换下一行.
if((lastSpace-7)>0 && k+1 == (lastSpace-7))tab+='</tr><tr>'
}
}
}
tab += '</tr>'
this.$refs.calendar.innerHTML = tab
},
/**
* 获取dashboard数据
*/
getbaseInfo(){
this.$ajax.get({
url: this.$api.GET_RESOURE_LIST,
}).then(res => {
if (res.code === '200') {
this.baseData = this.$com.confirm(res, 'data.content', [])
}
})
this.$ajax.get({
url: this.$api.GET_ALREADY_OR_EXPIRE,
}).then(res => {
if (res.code === '200') {
let inner = res.data.content
this.expired = inner.alreadyExpireCount
this.expireInFiveMonth = inner.willExpireCount
}
})
},
/**
* 获房办月查完成情况
*/
getFBCheck(){
this.$ajax.get({
url: this.$api.GET_FB_WY_MANAGE_CHECK,
}).then(res => {
if (res.code === '200') {
this.secRowInfos = this.$com.confirm(res, 'data.content', {})
// 处理房办的月份颜色
this.secRowInfos.HOUSING_OFFICE.data.forEach((ele, i) => {
if (ele.rectifiedCount/ele.rectifyCount == 1 ) { // 完成率100 绿色
this.FB_month[i].backgroundColor = '#6EB629'
this.FB_month[i].color = '#fff'
}else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
this.FB_month[i].backgroundColor = '#CC4D4D'
this.FB_month[i].color = '#fff'
} else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
this.FB_month[i].backgroundColor = '#FFD400'
this.FB_month[i].color = '#fff'
}else{ // 无数据状态
this.FB_month[i].backgroundColor = 'rgb(226,235,245)'
this.FB_month[i].color = '#2B87FE'
}
})
// 处理物企双周查月份颜色
this.secRowInfos.PROPERTY_BIWEEKLY.data.forEach((ele, i) => {
if (ele.rectifiedCount/ele.rectifyCount == 1 || ele.rectifyCount == 0) { // 完成率100 绿色
this.WQ_month[i].backgroundColor = '#6EB629'
this.WQ_month[i].color = '#fff'
}else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
this.WQ_month[i].backgroundColor = '#CC4D4D'
this.WQ_month[i].color = '#fff'
} else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
this.WQ_month[i].backgroundColor = '#FFD400'
this.WQ_month[i].color = '#fff'
}else{ // 无数据状态
this.WQ_month[i].backgroundColor = 'rgb(226,235,245)'
this.WQ_month[i].color = '#2B87FE'
}
})
// 处理小区经理自查月份颜色
this.secRowInfos.COMMUNITY_MANAGER_YEAR.data.forEach((ele, i) => {
if (ele.rectifiedCount/ele.rectifyCount == 1 ) { // 完成率100 绿色
this.manager_month[i].backgroundColor = '#6EB629'
this.manager_month[i].color = '#fff'
}else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
this.manager_month[i].backgroundColor = '#CC4D4D'
this.manager_month[i].color = '#fff'
} else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
this.manager_month[i].backgroundColor = '#FFD400'
this.manager_month[i].color = '#fff'
}else{ // 无数据状态
this.manager_month[i].backgroundColor = 'rgb(226,235,245)'
this.manager_month[i].color = '#2B87FE'
}
})
}
})
},
/**
* 获取专项检查数据
*/
getCheckData(){
const Axios = axios.create({
baseURL: this.$api.BASE_URL,
timeout: 15000,
})
let config = {
method: 'post',
url: this.$api.GET_CHWECK_DATA,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
}
let params= {
pageNo: 1,
pageSize: 10000,
flag: '0',
someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
hpb_id: '310104000000'
}
config = Object.assign(config, { data: qs.stringify(params) })
Axios(config)
.then(res => {
if (res.data.code === '200') {
let data = this.$com.confirm(res, 'data.data.content', [])
this.theme=0
for(let i=0;i<data.length;i++){
if(data[i].THEMETYPE == '专项'){
this.theme+=1
}
}
}
}).catch(err => {
this.$message.error(err.data.msg)
})
},
/**
* 获取已完成检查小区
*/
getSectNum(){
const Axios = axios.create({
baseURL: this.$api.BASE_URL,
timeout: 15000,
})
let config = {
method: 'post',
url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
}
let params= {
pageNo: 1,
pageSize: 10000,
someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
hpb_id: '310104000000'
}
config = Object.assign(config, { data: qs.stringify(params) })
Axios(config)
.then(res => {
this.sect =res.data.data.totalRows
}).catch(err => {
this.$message.error(err.data.msg)
})
},
/**
* 获取已开整改单
*/
getReceiptsNum(){
const Axios = axios.create({
baseURL: this.$api.BASE_URL,
timeout: 15000,
})
let config = {
method: 'post',
url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
}
let params= {
pageNo: 1,
pageSize: 10000,
isPublish: '1',
someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
hpb_id: '310104000000'
}
config = Object.assign(config, { data: qs.stringify(params) })
Axios(config)
.then(res => {
this.receipts =res.data.data.totalRows
}).catch(err => {
this.$message.error(err.data.msg)
})
},
/**
* 点击月份
*/
checkMonth(item){
this.nowMonth = item.name
this.checkStreet = item.checkStreet
for(let i=0;i<this.FB_month.length;i++){
if(this.FB_month[i].name == item.name){
this.FB_month[i].class='hadCheckMonth'
}else{
this.FB_month[i].class=''
}
}
},
hoverMonth(item){
let time = new Date().getFullYear()
// console.log(time+'-'+parseInt(item.name))
this.$router.push({
name: 'month',
query: {
month: time+'-'+parseInt(item.name)
}
})
},
/**
* 获取房办月查统计
*/
getHouthMonth(){
this.$ajax.get({
url: this.$api.GET_HOUSE_MONTH,
}).then(res => {
if (res.code === '200') {
let cont = this.$com.confirm(res, 'data.content', [])
this.totStreet = cont[0].totStreet
for(let i=0;i<cont.length;i++){
if(cont[i] && cont[i].month && cont[i].month>0){
this.FB_month[cont[i].month-1].check=true
this.FB_month[cont[i].month-1].checkStreet=cont[i].checkStreet
this.FB_month[cont[i].month-1].totStreet=cont[i].totStreet
}
}
let num = Number(this.$moment(this.date).format('MM'))
this.FB_month[num-1].class='hadCheckMonth'
this.nowMonth = this.FB_month[num-1].name
this.checkStreet = this.FB_month[num-1].checkStreet
}
})
},
/**
* 获取处置单统计
*/
getDisposal(){
this.$ajax.get({
url: this.$api.GET_HOME_DISPOSAL,
}).then(res => {
if (res.code === '200') {
this.disposal = this.$com.confirm(res, 'data.content', [])
}
})
},
},
}
</script>
<style scoped>
#home {
width: 100%;
display: flex;
flex-direction: column;
}
.home-card{
background: #fff;
padding: 15px;
}
.topBox{
height: 100%;
}
.top-font{
color:#818283;
font-size:14px;
margin-bottom:3px;
}
.top-count{
color:#000;
font-size:28px;
font-weight:600;
line-height:34px;
}
.top-count-extra{
color:#000;
font-size:24px;
font-weight:600;
line-height:24px;
}
.sec-right{
height: 100%;
display:flex;
flex-direction: column;
}
.middle-right{
text-align:center;
height: calc(50% - 10px);
display:flex;
align-items: center;
cursor: pointer;
}
.middle-right p{
font-size:14px;
margin:5px ;
}
.month{
height:100%;
background:#fff;
margin-right:10px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.monthTitle,.monthBottom{
display: flex;
justify-content: space-between;
align-items: center;
}
.monthTitle>span{
font-weight:600;
font-size:16px;
}
.monthBottom>span{
font-weight:500;
font-size:14px;
}
.monthBottom .monthBottomNum{
color: rgb(0,103,251);
font-size: 20px;
}
.monthBox{
display:flex;
flex-direction:column;
flex:1;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
/* margin: 0 10px; */
}
.monthBoxTitle{
font-weight: 500;
font-size:14px;
margin-bottom:10px;
}
.monthBoxContent,
.calendar{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
flex:1;
margin: 15px 0;
}
.monthBoxContent .hoverTest{
width: 21%;
}
.monthImg{
margin:10%;
padding-top: calc(40% - 11px);
padding-bottom: calc(40% - 11px);
text-align:center;
cursor: pointer;
border:1px solid transparent;
border-radius: 14%;
position: relative;
}
.monthHover{
z-index:999;
position:absolute;
bottom:0px;
left:0;
height:50%;
background: rgba(0,0,0,0.5);
width: 100%;
color: #fff;
border-radius: 0 0 14% 14%;
display:none;
line-height:100%;
}
.monthHover div{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.monthImg:hover .monthHover{
display: block;
}
#home .ant-progress-inner{
border: none;
}
#home .ant-tabs-tab-active.ant-tabs-tab{
line-height: 31px;
}
#home .ant-tabs-tabpane{
padding: 0px 15px 10px 15px;
}
.justify-between{
display:flex;
justify-content:space-between;
}
.align-center{
display:flex;
align-items:center;
}
.align-stretch{
display:flex;
align-items:stretch;
}
.row-number{
height: 18px;
width: 18px;
border-radius: 50%;
text-align: center;
}
.green{
color: #579D1F;
}
.blue{
color: #2B87FE;
}
.hadCheckMonth.green {
border-color: #579D1F;
}
.hadCheckMonth.blue {
border-color: #2B87FE;
}
</style>
<style>
#calendar{
width:100%;
}
#calendar>.ant-fullcalendar-header{
display: none;
}
#calendar .ant-fullcalendar{
border-top:0px;
width: 100%;
}
#calendar .ant-fullcalendar-table{
width: 100%;
/* margin-top: -20px; */
}
#calendar table{
height:auto;
}
#calendar .ant-fullcalendar-disabled-cell{
display: none;
}
</style>
\ No newline at end of file
src/views/home/ComplaintsTrain.vue
View file @ 43c5a215
...@@ -7,18 +7,21 @@ ...@@ -7,18 +7,21 @@
<p :class="`${active=='month'?'active':''}`" @click="changeRank('month')">月排行</p> <p :class="`${active=='month'?'active':''}`" @click="changeRank('month')">月排行</p>
<p :class="`${active=='year'?'active':''}`" @click="changeRank('year')">年排行</p> <p :class="`${active=='year'?'active':''}`" @click="changeRank('year')">年排行</p>
<p :class="`${active=='total'?'active':''}`" @click="changeRank('total')">总排行</p> <p :class="`${active=='total'?'active':''}`" @click="changeRank('total')">总排行</p>
<p @click="toMore">···</p> <!-- <p @click="toMore">···</p> -->
</div> </div>
</div> </div>
<div class="content"> <div class="content" >
<div class="list" v-for="(item,index) in list" :key="index"> <div class="list" v-for="(item,index) in list" :key="index">
<div class="left"> <div class="left">
<span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span> <span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span>
<span>{{item.complaintType}}</span> <span>{{item.complaintType}}</span>
</div> </div>
<div class="danwei">{{item.num}} 件</div> <!-- <div class="danwei">{{item.num}} 件</div> -->
</div> </div>
</div> </div>
<!-- <div class="content" v-else style="">
<p> 暂无数据... </p>
</div> -->
</div> </div>
</template> </template>
...@@ -45,6 +48,27 @@ export default { ...@@ -45,6 +48,27 @@ export default {
}) })
} }
if (this.moduletitle == '投诉问题') {
this.getList()
}
if (this.moduletitle == '报修') { // 没接口 假数据
this.list =[
{
complaintType: '供电供水设备经常出现故障',
_id: '高空坠物隐患',
},
{
complaintType: '日常运作出现状况',
_id: '高空坠物隐患',
},
{
complaintType: '各种分摊费和特约维修费',
_id: '高空坠物隐患',
},
]
}
}, },
methods: { methods: {
...mapActions([ ...mapActions([
...@@ -57,6 +81,52 @@ export default { ...@@ -57,6 +81,52 @@ export default {
this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5) this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5)
}) })
} }
if (this.moduletitle == '投诉问题') {
this.getList()
}
if (this.moduletitle == '报修') { // 没接口 假数据
this.list =[
{
complaintType: '高空坠物隐患',
_id: '高空坠物隐患',
},
{
complaintType: '日常运作出现状况',
_id: '高空坠物隐患',
},
{
complaintType: '各种分摊费和特约维修费',
_id: '高空坠物隐患',
},
]
}
},
getList(){
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth()+1
const params = {}
if(this.active == 'month'){
params.type = 'M'
params.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
}else if(this.active == 'year'){
params.type = 'Y'
params.dateTime = year + ''
}else if(this.active == 'total'){
params.type = 'S'
}
params.tsNum_desc = 'desc'
params.pageNo = 1
params.pageSize = 8
this.$ajax.get({
url: this.$api.GET_TOUSUQUESTION_LIST,
params: params
}).then(res => {
if (res.code === '200') {
this.list = this.$com.confirm(res, 'data.content.content', [])
}
})
}, },
toMore(){ toMore(){
switch (this.moduletitle) { switch (this.moduletitle) {
...@@ -105,16 +175,17 @@ export default { ...@@ -105,16 +175,17 @@ export default {
.box .title >div .active{ .box .title >div .active{
color: rgb(68,136,245); color: rgb(68,136,245);
} }
.box .title >div p:last-child{ /* .box .title >div p:last-child{
color: rgb(68,136,245); color: rgb(68,136,245);
font-weight: 800; font-weight: 800;
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
} } */
.box .content{ .box .content{
padding:15px; padding:15px;
flex:1; flex:1;
display: flex; display: flex;
min-height:200px;
flex-direction: column; flex-direction: column;
} }
.box .content .list{ .box .content .list{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment