You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

415 lines
12 KiB

<template>
<div class="dashboard-container">
<div class="dashboard-text">当前登陆人: {{ name }}</div>
<!-- <div class="dashboard-text">roles: <span v-for="role in roles" :key="role">{{ role }}</span></div> -->
<el-row :gutter="20">
<el-col :span="12" style="margin-bottom:15px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>雨管巡查</span>
<el-button @click='gowhere(1)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
</div>
<div class="text item">
<el-table :data="tableData" class="v-table" :height="300" style="width: 100%">
<el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsinspection"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='typeName'">
<el-tag>{{scope.row[column.field]}}</el-tag>
</div>
<div v-else-if="column.type=='statusName'">
<el-tag :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':'info')))">
{{insStatus[scope.row[column.field]]}}
</el-tag>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :span="12" style="margin-bottom:15px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>雨管养护</span>
<el-button @click='gowhere(2)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
</div>
<div class="text item">
<el-table :data="mainData" class="v-table" :height="300" style="width: 100%">
<el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsmain"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='type'">
<el-tag>{{scope.row[column.field]}}</el-tag>
</div>
<div v-else-if="column.type=='status'">
<el-tag :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':(scope.row[column.field]==3?'info':'danger'))))">
{{insStatus[scope.row[column.field]]}}
</el-tag>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>通用巡查</span>
<el-button @click='gowhere(3)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
</div>
<div class="text item">
<el-table :data="comData" class="v-table" :height="300" style="width: 100%">
<el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnscom"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='status'">
<el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'warning'))">
{{comStatus[scope.row[column.field]]}}
</el-tag>
</div>
<div v-else-if="column.type=='feedback_department_id'">
<div v-for="item in departments" v-if="scope.row[column.field] == item.id">
{{item.name}}
</div>
</div>
<div v-else-if="column.type=='ask_type_id'">
{{scope.row[column.field]}}
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>日常监督考核</span>
<el-button @click='gowhere(4)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
</div>
<div class="text item">
<el-table :data="dailyData" class="v-table" :height="300" style="width: 100%">
<el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsdaily"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='status'">
<el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'danger'))">
{{dailyStatus[scope.row[column.field]]}}
</el-tag>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
listdept
} from "../../api/system/department.js"
import {
listall
} from '../../api/rain/inspection.js'
import {
listmain
} from '../../api/rain/maintain.js'
import {
listcommon
} from '../../api/commonInspection/index.js'
import {
listdaily
} from '../../api/assess/daily.js'
export default {
name: 'Dashboard',
data(){
return {
tableData:[],
mainData:[],
comData:[],
dailyData:[],
departments:[],
paginations:{
page:1,
page_size:10
},
insStatus:["待审核","已审核","已办结","已退回","缺陷办结"],
comStatus:['',"已提交","已审核","已办结"],
dailyStatus:['',"无异常","已处理","未处理"],
columnsinspection: [{
field: "address",
title: "地址",
type: "string",
align: "left",
width: 400
},
{
field: "typeName",
title: "类型",
type: "typeName",
align: "left",
width: 160
},
{
field: "status",
title: "状态",
type: "statusName",
align: "center",
width: 160
},
{
field: "admin_id",
title: "提交人",
type: "string",
align: "center",
width: 160
},
{
field: "created_at",
title: "提交日期",
type: "string",
align: "center",
width: 200
}
],
columnsmain:[
{
field: "address",
title: "地址/排放点",
type: "string",
align: "left",
width:400
},
{
field: "typeName",
title: "类型",
type: "type",
align: "left",
width:160
},
{
field: "status",
title: "状态",
type: "status",
align: "center",
width:160
},
{
field: "admin_id",
title: "提交人",
type: "string",
align: "center",
width:160
},
{
field: "created_at",
title: "提交日期",
type: "string",
align: "center",
width:200
}
],
columnscom:[{
field: "feedback_department_id",
title: "反馈科室",
type: "feedback_department_id",
width:140
},
{
field: "ask_type_name",
title: "类型",
type: "ask_type_id",
align: "center",
width:140
},
{
field: "ask_content_name",
title: "内容",
type: "string",
align: "center",
width:140
},
{
field: "address",
title: "地址",
type: "string",
align: "lefft",
width:400
},
{
field: "status",
title: "状态",
type: "status",
align: "center",
width:140
},
{
field: "username",
title: "提交人",
type: "user",
align: "center",
width:140
},
{
field: "department_id",
title: "提交科室",
type: "string",
align: "center",
width:140
},
{
field: "created_at",
title: "提交日期",
type: "string",
align: "center",
width:200
}],
columnsdaily:[{
field: "name",
title: "名称",
type: "string",
align: "left"
},
{
field: "status",
title: "状态",
type: "status",
align: "center"
}]
}
},
computed: {
...mapGetters([
'name',
'roles'
])
},
created() {
this.initload()
this.load()
},
methods:{
initload(){
listdept().then(res => {
this.departments = res
})
},
gowhere(type){
let url ="/admin/#/rain/inspection/inspection"
if(type==1){
url ="/admin/#/rain/inspection/inspection"
}
if(type==2){
url ="/admin/#/rain/maintain/maintain"
}
if(type==3){
url ="/admin/#/common/index"
}
if(type==4){
url ="/admin/#/assess/daily"
}
window.location.href = url
},
load() {
listall({
page: this.paginations.page,
page_size: this.paginations.page_size
}).then(response => {
for(var m of response.data){
m.typeName = m.type==1?"日常雨水设施":"在建工地巡查"
}
this.tableData = response.data;
}).catch(error => {
console.log(error)
reject(error)
});
listmain({
page: this.paginations.page,
page_size: this.paginations.page_size
}).then(response => {
for(var m of response.data){
m.typeName = (m.type==1?"雨水管道疏挖":(m.type==2?"雨水管道疏通":(m.type==3?"汛期助排":"污泥外运")))
}
this.mainData = response.data;
}).catch(error => {
console.log(error)
reject(error)
});
listcommon({
page: this.paginations.page,
page_size: this.paginations.page_size
}).then(response => {
for(var m of response.data){
m.username = m.user?m.user.name:""
m.ask_type_name = m.ask_type_detail?m.ask_type_detail.value:""
m.ask_content_name = m.ask_content_detail?m.ask_content_detail.value:""
}
this.comData = response.data;
}).catch(error => {
console.log(error)
reject(error)
});
listdaily({
page: this.paginations.page,
page_size: this.paginations.page_size
}).then(response => {
this.dailyData = response.data;
}).catch(error => {
console.log(error)
reject(error)
});
},
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
margin-top:0
}
&-text {
font-size: 18px;
line-height: 30px;
margin:10px 0;
}
}
</style>