Skip to content

P
pc
Commit dabf0309 authored by Gakki's avatar Gakki
Browse files
Options

首页添加组件

parent e0a3a5ac
Hide whitespace changes
Inline Side-by-side
Showing with 1089 additions and 0 deletions
src/views/home.vue
View file @ dabf0309
......@@ -697,6 +697,7 @@ export default {
},
created(){},
mounted(){
console.log('当前登录api: ' + this.$api.BASE_URL)
this.getList()
this.getConfig()
this.getDisposal()
......
src/views/home/ComplaintsTrain.vue 0 → 100644
View file @ dabf0309
// 投诉直通车 & 应急报修
<template>
<div class="box">
<div class="title">
{{moduletitle}}
<div>
<p :class="`${active=='month'?'active':''}`" @click="changeRank('month')">月排行</p>
<p :class="`${active=='year'?'active':''}`" @click="changeRank('year')">年排行</p>
<p :class="`${active=='total'?'active':''}`" @click="changeRank('total')">总排行</p>
<p @click="toMore">···</p>
</div>
</div>
<div class="content">
<div class="list" v-for="(item,index) in list" :key="index">
<div class="left">
<span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span>
<span>{{item.complaintType}}</span>
</div>
<div class="danwei">{{item.num}} 件</div>
</div>
</div>
</div>
</template>
<script >
import {mapActions, mapState} from 'vuex'
export default {
props: {
moduletitle: {
type: String,
default: '',
},
},
data(){
return{
active: 'year',
list: []
}
},
created(){
if (this.moduletitle == '投诉直通车') {
this.get_ComplaintsTrain(this.active).then(res => {
this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5)
})
}
},
methods: {
...mapActions([
'get_ComplaintsTrain'
]),
changeRank(item){
this.active = item
if (this.moduletitle == '投诉直通车') {
this.get_ComplaintsTrain(this.active).then(res => {
this.list = this.$com.confirm(res, 'data.content', []).slice(0, 5)
})
}
},
toMore(){
switch (this.moduletitle) {
case '投诉直通车':
this.$router.push({path: '/pudong/complaintPath/complaintList'})
break
default:
break
}
},
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
position: relative;
}
.box .title >div{
position: absolute;
display: flex;
top: 0;
right:12px;
height: 30px;
}
.box .title >div p{
margin-right:10px;
color: #818283;
cursor: pointer;
}
.box .title >div .active{
color: rgb(68,136,245);
}
.box .title >div p:last-child{
color: rgb(68,136,245);
font-weight: 800;
font-size: 20px;
margin: 0;
}
.box .content{
padding:15px;
flex:1;
display: flex;
flex-direction: column;
}
.box .content .list{
display: flex;
justify-content: space-between;
height: 22%;
/* cursor: pointer; */
color: rgb(96,97,98);
align-items: center;
}
.box .content .list .left{
flex: 1;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
font-size: 12px;
}
.box .content .list .left span{
font-size: 14px;
}
.box .content .list .left span:first-child{
display: inline-block;
width: 18px;
height: 18px;
font-size: 14px;
line-height: 18px;
border-radius: 50%;
text-align: center;
margin-right: 12px;
flex: 1;
}
</style>
\ No newline at end of file
src/views/home/EmergencyRepair.vue 0 → 100644
View file @ dabf0309
// 应急报修
<template>
<div class="box">
<div class="title">
应急报修
<div>
<p :class="`${active=='M'?'active':''}`" @click="changeRank('M')">月排行</p>
<p :class="`${active=='Y'?'active':''}`" @click="changeRank('Y')">年排行</p>
<p :class="`${active=='A'?'active':''}`" @click="changeRank('A')">总排行</p>
<p @click="toMore">···</p>
</div>
</div>
<div class="content">
<div class="list" v-for="(item,index) in list" :key="index">
<div class="left">
<span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span>
<span>{{item.name}}</span>
</div>
<div>10 件</div>
</div>
</div>
</div>
</template>
<script >
export default {
data(){
return{
active: 'M',
list: [
]
}
},
methods: {
changeRank(item){
// console.log(item)
this.active = item
this.list = []
},
toMore(){},
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
}
.box .title >div{
position: absolute;
display: flex;
top: 0;
right:12px;
height: 50px;
}
.box .title >div p{
margin-right: 1rem;
color: #818283;
cursor: pointer;
}
.box .title >div .active{
color: rgb(68,136,245);
}
.box .title >div p:last-child{
color: rgb(68,136,245);
font-weight: 800;
font-size: 2rem;
margin: 0;
}
.box .content{
padding:1rem 2rem;
flex:1;
display: flex;
flex-direction: column;
}
.box .content .list{
display: flex;
justify-content: space-between;
height: 22%;
cursor: pointer;
color: rgb(96,97,98);
}
.box .content .list .left span:first-child{
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
border-radius: 50%;
text-align: center;
margin-right: 1rem;
font-weight: 500;
}
</style>
\ No newline at end of file
src/views/home/FileModule.vue 0 → 100644
View file @ dabf0309
//文档模块
<template>
<div class="box">
<div v-for="(item,index) in list" :key="index" @click="clickFile(item)">
<img :src="require(`@/assets/icon/${item.src}`)" >
<p>{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
list: [
{
name: '小区档案',
src: 'sect-icon.png',
path: '/houseData/basicInfo'
},
{
name: '物企档案',
src: 'wuqi-icon.png',
path: '/houseData/propertyInfo'
},
{
name: '业委会档案',
path: '/houseData/indCous',
src: 'juwei-icon.png',
},
]
}
},
methods: {
clickFile(item){
// console.log(item)
this.$router.push({path: item.path})
},
}
}
</script>
<style scoped>
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box >div{
padding: .5rem;
background: #fff;
width: 100%;
height:30%;
display: flex;
align-items:center;
flex-direction: column;
justify-content: space-around;
cursor: pointer;
}
img{
width: 2vw;
}
p{
padding: 0;
margin: 0;
}
</style>
\ No newline at end of file
src/views/home/IndustrySupervision.vue 0 → 100644
View file @ dabf0309
// 行业督查
<template>
<div class="box">
<div class="title">
行业督查
</div>
<div class="content">
<div class="month">
<div class="img" v-for="(item,index) in 12" :key="index" @click="clickMonth(item)" @mouseenter="mouseover(index)" @mouseleave="mouseout">
<img class="imgs" :src="require(`@/assets/icon/nm.png`)" >
<p style="color:rgb(68,136,245);whiteSpace:nowrap;" class="monthCol">{{index+1}}月</p>
<div class="mingxi" style="whiteSpace:nowrap;">明细</div>
</div>
</div>
<div class="inner">
<div class="task" v-for="(item,index) in taskList " :key="index">
<span>{{item.name}}</span>
<span>{{item.value}}</span>
</div>
</div>
</div>
</div>
</template>
<script >
import {mapActions, mapState} from 'vuex'
export default {
data(){
return{
taskList: [
{
name: '进行中主题',
value: 0
},
{
name: '已完成检查',
value: 0
},
{
value: 0,
name: '已开整改单',
},
],
list: [],
}
},
created(){
this.getIndustrySupervision().then(res => {
let obj = this.$com.confirm(res, 'data.content', [])
this.taskList[0].value = obj.processingCount || 0
this.taskList[1].value = obj.completedCount || 0
this.taskList[2].value = obj.alreadyOpenInspectionCount || 0
})
this.getMonthCheck().then(res => {
let arr = this.$com.confirm(res, 'data.content', [])
// console.log(arr)
arr.forEach((ele, index) => {
document.querySelectorAll('.imgs')[ele.month-1].src = require('@/assets/icon/ok.png')
document.querySelectorAll('.monthCol')[ele.month-1].style.color ='rgb(127, 179, 67)'
})
})
},
methods: {
...mapActions([
'getIndustrySupervision',
'getMonthCheck',
]),
//月份补零
format(num){
if (num < 10) {
return '0'+num
}else{
return num
}
},
// 点击月份跳转
clickMonth(item){
let time = new Date().getFullYear()
// this.$router.push({
// path: '/checkorder/month/monthList',
// query: {
// month: time+'-'+this.format(item)
// }
// })
},
//悬停展示明细
mouseover(index){
document.querySelectorAll('.mingxi').forEach((item, i) => {
if (index== i) {
document.querySelectorAll('.mingxi')[i].style.display = 'block'
}else{
document.querySelectorAll('.mingxi')[i].style.display = 'none'
}
})
},
//离开不显示明细
mouseout(){
document.querySelectorAll('.mingxi').forEach((item, i) => {
document.querySelectorAll('.mingxi')[i].style.display = 'none'
})
}
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
min-height: 240px;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
}
.box .content{
padding:12px;
flex:1;
display: flex;
}
.box .content .month{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex: 2;
padding:0 12px;
}
.box .content .month .img{
width: 24%;
height: 55px;
position: relative;
/* border: 1px solid #ccc; */
}
.box .content .month .img .mingxi{
width: 50px;
height: 20px;
position: absolute;
background: #ccc;
bottom: 0rem;
left: 50%;
text-align: center;
font-size:12px;
display: none;
transform: translate(-50%,0%);
cursor: pointer;
border-radius: 0 0 5px 5px;
}
.box .content .month .img img{
width: 50px;
height: 50px;
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
font-size: 12px;
font-weight: 550;
cursor: pointer;
}
.box .content .month .img p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 14px;
cursor: pointer;
}
.box .content .inner{
flex: 1;
background: rgb(230,238,246);
border-radius: 5px;
margin: 1% 0;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box .content .inner .task{
display: flex;
flex-direction: column;
padding: 12px;
font-weight: 500;
font-size: 12px;
}
.box .content .inner .task span:last-child{
color: rgb(68,136,245);
font-size: 12px;
}
</style>
\ No newline at end of file
src/views/home/ManagementModule.vue 0 → 100644
View file @ dabf0309
//管理模块
<template>
<div class="box">
<div class="title">
{{moduletitle}}管理
</div>
<div class="content">
<div id="chartsXY" v-if="moduletitle == '信用'" />
<div id="chartsFX" v-if="moduletitle == '风险'" />
<div id="chartsFL" v-if="moduletitle == '分类'" />
<div class="inner">
<p v-for="(item,index) in list" :key="index">
<span class="yuan" :style="`background:${item.color}`"/>{{item.name}} : {{item.value}}
</p>
</div>
</div>
</div>
</template>
<script >
import echarts from 'echarts'
import {mapActions, mapState} from 'vuex'
export default {
props: {
moduletitle: {
type: String,
default: '',
},
},
data(){
return{
list: [ ],
option: {
tooltip: {
trigger: 'item',
transitionDuration: 0,
formatter: '{b} <br/>{c} ({d}%)'
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
'itemStyle': {
'normal': {
'borderWidth': 4, // 间距的宽度
'borderColor': '#fff', //背景色
}
},
data: [
{value: 335, name: '直接访问'},
{value: 135, name: '视频广告'},
{value: 148, name: '搜索引擎'}
]
}
]
}
}
},
created(){
},
mounted(){
this.getList()
},
methods: {
...mapActions([
'GET_Creditratingranking'
]),
async getList(){
let myChart = null
let newArr = []
switch (this.moduletitle) {
case '信用':
await this.GET_Creditratingranking().then(res => {
this.list = this.$com.confirm(res, 'data.content', [])
this.list.forEach(item => {
newArr.push({
value: item.num,
name: item.level+'级',
color: item.level == 'A' ? 'rgb(93,161,248)':item.level == 'B' ? 'rgb(142,102,222)':'rgb(244,212,102)'
})
})
//如果没有c 写假数据
if (newArr.length<3) {
newArr.push({
value: 0,
name: 'C',
color: 'rgb(244,212,102)'
})
}
this.list= newArr
myChart= echarts.init(document.getElementById('chartsXY'))
this.option.series[0].data = newArr
this.option.color = ['rgb(93,161,248)', 'rgb(142,102,222)', 'rgb(244,212,102)']
})
break
case '风险':
this.list = [
{
value: 165,
name: '高风险',
color: 'rgb(235,108,103)'
},
{
value: 306,
name: '中风险',
color: 'rgb(244,212,101)'
},
{
value: 2358,
name: '低风险',
color: 'rgb(119,200,125)'
},
]
await setTimeout(() => {
this.option.series[0].data = this.list
myChart= echarts.init(document.getElementById('chartsFX'))
this.option.color = ['rgb(235,108,103)', 'rgb(244,212,101)', 'rgb(119,200,125)']
}, 0)
break
case '分类':
this.list = [
{
value: 163,
name: '监管1类',
color: 'rgb(93,161,248)'
},
{
value: 108,
name: '监管2类',
color: 'rgb(236,109,103)'
},
{
value: 27,
name: '监管3类',
color: 'rgb(244,212,101)'
},
]
await setTimeout(() => {
this.option.series[0].data = this.list
this.option.color = ['rgb(93,161,248)', 'rgb(236,109,103)', 'rgb(244,212,101)']
myChart= echarts.init(document.getElementById('chartsFL'))
}, 0)
break
default:
break
}
setTimeout(() => {
myChart.setOption(this.option)
window.addEventListener('resize', function () {
myChart.resize()
})
}, 0)
}
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
min-height: 23vh;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
}
.box .content{
padding: 1rem;
flex:1;
display: flex;
align-items: center;
}
.box .content >div:first-child{
width:50%;
height:100%;
}
.box .content >div:last-child{
width:50%;
height:80%;
font-size: 12px;
}
.box .content .inner{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items:center;
}
.box .content .inner p{
width:100%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items:center;
}
.yuan{
width: 12px;
height: 12px;
display: inline-block;
border-radius:50%;
margin: 0 1rem;
}
</style>
\ No newline at end of file
src/views/home/RetrofitElevator.vue 0 → 100644
View file @ dabf0309
//电梯加装
<template>
<div class="box">
<div class="title">
全区电梯加装情况
</div>
<div class="content">
<div class="task" v-for="(item,index) in list " :key="index">
<p>{{item.name}}</p>
<p class="sum">{{Math.floor(+item.value*1000)/10}}%</p>
<div class="all">
<div class="done" :style="`width:${Math.floor(+item.value*1000)/100+'rem'}`"/>
<div class="yuan" :style="`left:${Math.floor(+item.value*1000)/100-.5+'rem'}`"/>
</div>
</div>
</div>
</div>
</template>
<script >
import {mapActions, mapState} from 'vuex'
export default {
props: {
},
data(){
return{
list: [
{
name: '加装意愿收集率',
value: 0
},
{
name: '加装意愿同意率',
value: 0
},
{
name: '加装已公告率',
value: 0
},
{
name: '加装已完工率',
value: 0
},
]
}
},
created(){
this.getADDelevator({pageSize: 5, pageNo: 1}).then(res => {
let arr = this.$com.confirm(res, 'data.content.heard', [])
arr.forEach((ele, index) => {
this.list[index].name = ele.name
this.list[index].value = ele.value
})
})
},
methods: {
...mapActions([
'getADDelevator'
]),
clickMonth(item){
// console.log(item)
},
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
}
.box .content{
flex:1;
display: flex;
flex-wrap: wrap;
overflow: hidden;
white-space: nowrap;
}
.box .content .task {
width: 50%;
/* height: 50%; */
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box .content .task p{
padding: 0;
margin: 0;
width: 100%;
font-size: 12px;
}
.box .content .task .sum{
color: rgb(0, 151, 153);
font-size: 12px;
}
.box .content .task .all{
height: .5rem;
width: 7rem;
margin-left: .5rem;
background: rgb(242,243,245);
border-radius: 5px;
position: relative;
}
.box .content .task .all .done{
position: absolute;
height: .5rem;
background: rgb(135,216,217);
border-radius:5px;
left: 0;
}
.box .content .task .all .yuan{
width: 1rem;
height: 1rem;
background: rgb(0,187,187);
border-radius: 50%;
position: absolute;
top: -.25rem;
}
</style>
\ No newline at end of file
src/views/home/RiskDisposal.vue 0 → 100644
View file @ dabf0309
//当年风险处置情况
<template>
<div class="box">
<div class="title">
当年风险处置情况
</div>
<div class="content">
<div class="top">
<div id="chartsFxczqk" ></div>
<div class="num">
<p><span style="color:rgb(100,177,248)">{{list[1].value}}</span>/{{list[0].value}}</p>
<p>未处置/累计发现数</p>
</div>
</div>
<div class="bottom">
<span>自治共治处置数<span class="sum">{{noneJointlyProcessedCount}}</span></span>
<span>部门协同处置数<span class="sum">{{jointlyProcessedCount}}</span></span>
</div>
</div>
</div>
</template>
<script >
import echarts from 'echarts'
import {mapActions, mapState} from 'vuex'
export default {
props: {
},
data(){
return{
allNum: {},
list: [
{value: 0, name: '累计发现数'},
{value: 0, name: '未处置'},
],
noneJointlyProcessedCount: 0,
jointlyProcessedCount: 0,
option: {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '访问来源',
type: 'pie',
minAngle: 15,
radius: ['50%', '68%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
'itemStyle': {
'normal': {
'borderWidth': 1, // 间距的宽度
'borderColor': '#fff', //背景色
}
},
data: [
]
}
]
}
}
},
created(){
this.get_RiskDisposal().then(res => {
this.allNum = this.$com.confirm(res, 'data.content', [])
})
},
watch: {
allNum: {
handler(cur){
this.list[0].value = cur.totalCount
this.list[1].value = cur.noneCount
this.jointlyProcessedCount = cur.jointlyProcessedCount
this.noneJointlyProcessedCount=cur.noneJointlyProcessedCount
setTimeout(() => {
let myChart= echarts.init(document.getElementById('chartsFxczqk'))
this.option.color = ['rgb(119,200,125)', 'rgb(236,109,103)']
this.option.series[0].data = this.list
myChart.setOption(this.option)
window.addEventListener('resize', function () {
myChart.resize()
})
}, 0)
},
deep: true
}
},
methods: {
...mapActions([
'get_RiskDisposal'
]),
}
}
</script>
<style scoped>
.box{
background: #fff;
display: flex;
flex-direction: column;
min-height: 25vh;
}
.box .title{
height: 35px;
padding-left: 20px;
line-height: 35px;
font-size: 15px;
font-weight: 550;
border-bottom: 1px solid #ccc;
}
.box .content{
padding: 12px;
flex:1;
}
.box .content .top{
height:80%;
width: 100%;
display: flex;
padding-left: 10%;
align-items: center;
/* border: 1px solid rgb(139, 57, 57); */
}
.box .content .top >div:first-child{
height:80%;
width: 30%;
/* border: 2px solid rgb(48, 146, 65); */
}
.box .content .top .num p{
font-size: 12px;
padding: 0;
margin: 0;
font-weight: 500;
/* border: 1px solid rgb(36, 111, 182); */
}
.box .content .top .num p:last-child{
font-size: 12px;
font-weight: normal;
/* border: 1px solid #ccc; */
}
.box .content .bottom{
width: 100%;
display: flex;
justify-content: space-around;
font-size: 12px;
}
.box .content .bottom .sum{
color: rgb(100,177,248);
font-size: 12px;
font-weight: 500;
padding-left: 12px;
display: inline-block;
}
</style>
\ No newline at end of file
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