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.
765 lines
20 KiB
765 lines
20 KiB
<template>
|
|
<div>
|
|
<Card style="margin: 20px 0;">
|
|
<div>
|
|
|
|
<div class="contract">
|
|
<div class="contract__title">
|
|
<h3>待办通知</h3>
|
|
|
|
|
|
<div class="more" @click="$router.push('/lease')">
|
|
更多
|
|
<i class="el-icon-d-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
<div class="type-bar">
|
|
<div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 0 }" @click="radioPick(0)">合约中</div>
|
|
<div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 1 }" @click="radioPick(1)">临期</div>
|
|
<div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 2 }" @click="radioPick(2)">已过期</div>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" :style="{ 'left': 80 * radio + 'px' }" viewBox="0 0 100 10" preserveAspectRatio="xMinYMin meet">
|
|
<path d="M 0 10,L 44 10,L 50 2,L56 10,L 100 10" stroke="#aaa" stroke-width="1" fill="#fff"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- <Tabs style="width: 24%;">-->
|
|
<!-- <TabPane label="合约中3"></TabPane>-->
|
|
<!-- <TabPane label="临期1"></TabPane>-->
|
|
<!-- <TabPane label="已过期2"></TabPane>-->
|
|
<!-- </Tabs>-->
|
|
|
|
<Table style="margin-top: 20px;" :loading="leaseTableLoading" size="small" stripe highlight-row :height="400" :data="leases" :columns="leaseTable"></Table>
|
|
<Page style="margin-top: 14px;display: flex;justify-content: flex-end;" size="small" :total="leaseTotal" show-elevator show-total :page-size="leaseSelect.page_size"></Page>
|
|
<!-- <xy-table :border="false" :is-page="false" :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
|
|
</div>
|
|
|
|
<Divider></Divider>
|
|
|
|
<el-row :gutter="80" type="flex">
|
|
<el-col :span="12">
|
|
<div class="contract__title">
|
|
<h3>系统通知</h3>
|
|
|
|
<div class="more" @click="$router.push('/notice')">
|
|
更多
|
|
<i class="el-icon-d-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div class="list-item" v-for="item in notices.slice((noticeSelect.page-1)*noticeSelect.page_size,(noticeSelect.page-1)*noticeSelect.page_size+noticeSelect.page_size)" @click="item.name ? ($refs['drawer'].setType(1),$refs['drawer'].setRow(item),$refs['drawer'].show()) : ($refs['drawer'].setType(3),$refs['drawer'].setRow(item),$refs['drawer'].show())">
|
|
<span>{{ item.name || item.dikuaimingcheng }}</span>
|
|
<span>{{ item.shijian || item.zulinkaishiqixian }}</span>
|
|
</div>
|
|
|
|
<Page class="list-page" :page-size="noticeSelect.page_size" :total="noticeTotal" size="small" @on-change="e => (noticeSelect.page = e)"/>
|
|
</div>
|
|
<!-- <xy-table :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="contract__title">
|
|
<h3>制度文档</h3>
|
|
|
|
<div class="more" @click="$router.push('/system/documents')">
|
|
更多
|
|
<i class="el-icon-d-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div class="list-item" v-for="item in systems" @click="$refs['drawer'].setType(2),$refs['drawer'].setRow(item),$refs['drawer'].show()">
|
|
<span>{{ item.name }}</span>
|
|
<span>{{ $moment(new Date(item.created_at)).format('YYYY-MM-DD') }}</span>
|
|
</div>
|
|
|
|
<Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />
|
|
</div>
|
|
<!-- <xy-table :height="400" :table-item="table2" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select1"></xy-table>-->
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row :gutter="80" type="flex">-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <div class="contract__title">-->
|
|
<!-- <h3>安全检查</h3>-->
|
|
|
|
<!-- <div class="more" @click="$router.push('/system/documents')">-->
|
|
<!-- 更多-->
|
|
<!-- <i class="el-icon-d-arrow-right"></i>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <div class="list">-->
|
|
<!-- <div class="list-item" v-for="item in assetSafetyPlan" @click="$refs['drawer'].setType(4),$refs['drawer'].setRow(item),$refs['drawer'].show()">-->
|
|
<!-- <span>{{ item.jihuamingcheng }}</span>-->
|
|
<!-- <span>{{ $moment(new Date(item.jihuakaishishijian)).format('YYYY-MM-DD') }}</span>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
<drawer ref="drawer"></drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from "echarts";
|
|
import PanelGroup from './components/PanelGroup'
|
|
import drawer from "./components/drawer.vue"
|
|
|
|
import {
|
|
getChartsHome, getNotice
|
|
} from '@/api/dashboard';
|
|
import { index } from "@/api/system/baseForm"
|
|
|
|
export default {
|
|
components: {
|
|
PanelGroup,
|
|
drawer,
|
|
},
|
|
data() {
|
|
return {
|
|
col: '',
|
|
line: '',
|
|
business_data: [],
|
|
collect_data: [],
|
|
list: {
|
|
"business": {
|
|
"server_money_total": Math.round(Math.random()*100000+10000),
|
|
"nurse_money_total": Math.round(Math.random()*50000+5000),
|
|
"remain_money_total": Math.round(Math.random()*50000+5000)
|
|
},
|
|
"person_efficiency": {
|
|
"server_time_total": Math.round(Math.random()*50+20),
|
|
"expect": Math.round(Math.random()*25+10),
|
|
"act": Math.round(Math.random()*25+10)
|
|
},
|
|
"customer": {
|
|
"active": Math.round(Math.random()*50+30),
|
|
"add": Math.round(Math.random()*25+10),
|
|
"wash": Math.round(Math.random()*25+10)
|
|
},
|
|
"order": {
|
|
"server_total": Math.round(Math.random()*50+30),
|
|
"cycle_total": Math.round(Math.random()*25+10),
|
|
"unit_total": Math.round(Math.random()*25+10)
|
|
}},
|
|
customerArr: [],
|
|
orderArr: [],
|
|
chartData: {},
|
|
|
|
radio: 0,
|
|
config: {
|
|
time: 1,
|
|
unit: 'months'
|
|
},
|
|
leaseTableLoading: false,
|
|
leaseSelect: {
|
|
table_name: 'leases',
|
|
filter: [
|
|
{
|
|
key: 'zulinjieshuqixian',
|
|
op: 'range',
|
|
value: `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
|
|
},
|
|
{
|
|
key: 'zulinkaishiqixian',
|
|
op: 'range',
|
|
value: `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
|
|
}
|
|
],
|
|
page: 1,
|
|
page_size: 10
|
|
},
|
|
leases: [],
|
|
leaseTotal: 0,
|
|
leaseTable: [
|
|
{
|
|
title: '序号',
|
|
fixed: 'left',
|
|
align: 'center',
|
|
width: 60,
|
|
render:(h, { row, column, index }) => {
|
|
return h('div',{
|
|
style: {
|
|
height: '18px',
|
|
width: '18px',
|
|
'border-radius': '100%',
|
|
color: '#fff',
|
|
background: '#4986cc',
|
|
'text-align': 'center',
|
|
'font-size': '12px'
|
|
}
|
|
},index+1)
|
|
}
|
|
},
|
|
{
|
|
title: '地块名称',
|
|
key: 'dikuaimingcheng',
|
|
width: 180,
|
|
fixed: 'left',
|
|
align: 'left',
|
|
render: (h, { row }) => {
|
|
return h('div',[
|
|
...row?.land?.map(i => h('Tag', {
|
|
props: {
|
|
color: "green"
|
|
}
|
|
},i.name)),
|
|
...row?.houses?.map(i => h('Tag', {
|
|
props: {
|
|
color: "blue"
|
|
}
|
|
},i.name))
|
|
])
|
|
}
|
|
},
|
|
{
|
|
title: '出租方',
|
|
key: 'chuzufang',
|
|
align: 'left',
|
|
width: 150
|
|
},
|
|
{
|
|
title: '承租方',
|
|
align: 'center',
|
|
key: 'chengzufang',
|
|
width: 150
|
|
},
|
|
{
|
|
title: '租赁期限',
|
|
width: 190,
|
|
align: 'center',
|
|
render:(h,{ row }) => {
|
|
return ('div',[
|
|
h('span',this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD')),
|
|
h('span',' - '),
|
|
h('span',this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD'))
|
|
])
|
|
}
|
|
},
|
|
{
|
|
title: '应收租金',
|
|
key: 'yingshouzujin',
|
|
align: 'right',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '实收租金',
|
|
label: 'shishouzujin',
|
|
align: 'right',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '保证金',
|
|
key: 'baozhengjin',
|
|
width: 120,
|
|
customFn:row => {
|
|
return (
|
|
<div style={{'text-align': row.baozhengjin === '无' ? 'center' : 'right' }}>{ row.baozhengjin }</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: '未到位原因',
|
|
key: 'weidaoweiyuanyin',
|
|
minWidth: 140
|
|
}
|
|
],
|
|
systemSelect: {
|
|
table_name: 'systems',
|
|
filter: [
|
|
],
|
|
page: 1,
|
|
page_size: 10
|
|
},
|
|
systems: [],
|
|
systemTotal: 0,
|
|
assetSafetyPlanSelect: {
|
|
table_name: 'asset_safety_plans',
|
|
page: 1,
|
|
page_size: 10,
|
|
filter: [
|
|
{
|
|
key: "jihuakaishishijian",
|
|
op: "range",
|
|
value: `${this.$moment().format("YYYY-MM-DD")},2999-01-01`
|
|
}
|
|
]
|
|
},
|
|
assetSafetyPlanTotal: 0,
|
|
assetSafetyPlan: [],
|
|
noticeSelect: {
|
|
table_name: 'notices',
|
|
page: 1,
|
|
page_size: 10
|
|
},
|
|
noticeTotal: 0,
|
|
notices: [],
|
|
}
|
|
},
|
|
watch: {
|
|
chartData(val, newval) {
|
|
if (newval){
|
|
this.init();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
index,
|
|
async loadData() {
|
|
await getChartsHome().then((res) => {
|
|
console.log(res);
|
|
this.list = res.list;
|
|
this.chartData = res;
|
|
let _business_data = [];
|
|
let _collect_data = [];
|
|
res.business_data.map(item => {
|
|
_business_data.push(item.server_money_total)
|
|
_collect_data.push(item.collect_money)
|
|
})
|
|
this.business_data = _business_data;
|
|
this.collect_data = _collect_data;
|
|
let _customerArr = [];
|
|
let _orderArr = [];
|
|
|
|
res.order_data.map(item => {
|
|
_customerArr.push(item.active_customer)
|
|
_orderArr.push(item.order_total)
|
|
})
|
|
this.customerArr = _customerArr;
|
|
this.orderArr = _orderArr;
|
|
}).catch()
|
|
},
|
|
init() {
|
|
this.col = echarts.init(document.getElementById('col-chart'))
|
|
this.col.setOption({
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
position: 'bottom'
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['第一周', '第二周', '第三周', '第四周']
|
|
},
|
|
series: [{
|
|
name: '服务金额',
|
|
type: 'bar',
|
|
data: this.business_data,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(42,182,252)'
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '收款',
|
|
type: 'bar',
|
|
data: this.collect_data,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(34,228,255)'
|
|
},
|
|
},
|
|
}
|
|
],
|
|
select1: {
|
|
|
|
}
|
|
})
|
|
|
|
this.line = echarts.init(document.getElementById('line-chart'))
|
|
this.line.setOption({
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['活跃客户', '服务订单']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '6%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['第一周', '第二周', '第三周', '第四周']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [{
|
|
name: '活跃客户',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.customerArr,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(42,182,252)'
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '服务订单',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: this.orderArr,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(34,228,255)'
|
|
},
|
|
},
|
|
}
|
|
]
|
|
})
|
|
},
|
|
|
|
async radioPick (e) {
|
|
this.radio = e
|
|
if (e === 1) {
|
|
let date = this.$moment()
|
|
let preDate = date.add(this.config.time, this.config.unit).format("YYYY-MM-DD")
|
|
this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${preDate}`
|
|
this.leaseSelect.filter[1].value = ''
|
|
}
|
|
if (e === 2) {
|
|
this.leaseSelect.filter[0].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
|
|
this.leaseSelect.filter[1].value = ''
|
|
}
|
|
if (e === 0) {
|
|
this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
|
|
this.leaseSelect.filter[1].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
|
|
}
|
|
|
|
this.leaseSelect.page = 1;
|
|
await this.getLeases();
|
|
},
|
|
|
|
async getConfig () {
|
|
const res = await index({
|
|
table_name: 'warnings',
|
|
filter: [
|
|
{
|
|
key: 'flag',
|
|
op: 'eq',
|
|
value: 'contract'
|
|
}
|
|
]
|
|
})
|
|
this.config.time = Number(res.data[0]?.time);
|
|
this.config.unit = res.data[0]?.unit;
|
|
},
|
|
|
|
async getNotices () {
|
|
const res = await getNotice();
|
|
this.notices = res;
|
|
this.noticeTotal = res.length;
|
|
},
|
|
async getAssetSafetyPlan () {
|
|
this.assetSafetyPlanSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${this.$moment().add(this.config.time, this.config.unit).format("YYYY-MM-DD")}`
|
|
const res = await index(this.assetSafetyPlanSelect,false);
|
|
this.assetSafetyPlan = res.data;
|
|
this.assetSafetyPlanTotal = res.total;
|
|
},
|
|
async getSystems () {
|
|
const res = await index(this.systemSelect,false);
|
|
this.systems = res.data;
|
|
this.systemTotal = res.total;
|
|
},
|
|
async getLeases () {
|
|
try {
|
|
this.leaseTableLoading = true;
|
|
const res = await index(this.leaseSelect,false);
|
|
this.leases = res.data;
|
|
this.leaseTotal = res.total;
|
|
this.leaseTableLoading = false;
|
|
}catch (e) {
|
|
this.leaseTableLoading = false;
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getNotices();
|
|
this.getSystems();
|
|
this.getConfig().then(_ => {
|
|
this.getLeases();
|
|
this.getAssetSafetyPlan();
|
|
})
|
|
//this.loadData();
|
|
},
|
|
mounted() {
|
|
|
|
//this.init()
|
|
|
|
window.onresize = () => {
|
|
this.col.resize()
|
|
this.line.resize()
|
|
}
|
|
|
|
},
|
|
destroyed() {
|
|
window.onresize = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-main{
|
|
background-color: #fff !important;
|
|
}
|
|
.statistics {
|
|
display: flex;
|
|
|
|
margin-top: 20px;
|
|
|
|
&-title {
|
|
|
|
padding-left: 6px;
|
|
}
|
|
|
|
&-content {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
|
|
&-top {
|
|
|
|
&__num {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__name {
|
|
font-size: 10px;
|
|
color: rgb(140, 140, 140);
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-left {
|
|
|
|
&__num {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__name {
|
|
font-size: 10px;
|
|
color: rgb(140, 140, 140);
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
|
|
&__num {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__name {
|
|
font-size: 10px;
|
|
color: rgb(140, 140, 140);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
display: flex;
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.chartItem {
|
|
|
|
width: 49%;
|
|
|
|
.chartItemTitle {
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#col-chart {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
min-height: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
#line-chart {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
flex: 1;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
min-height: 400px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.contract {
|
|
|
|
&__title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
|
|
& > h3 {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
height: 14px;
|
|
width: 140px;
|
|
background: radial-gradient(12px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 0 0/12px 12px no-repeat,
|
|
radial-gradient(120px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 12px 0/130px 12px no-repeat;
|
|
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: -6px;
|
|
}
|
|
}
|
|
|
|
.more {
|
|
transition: all .2s;
|
|
cursor: pointer;
|
|
zoom: .9;
|
|
|
|
i {
|
|
zoom: .9;
|
|
}
|
|
|
|
&:hover {
|
|
color: $primaryColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.type-bar {
|
|
display: flex;
|
|
|
|
position: relative;
|
|
top: 4px;
|
|
&::before {
|
|
content: '';
|
|
height: .5px;
|
|
background: #aaa;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&__item {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
width: 80px;
|
|
line-height: 40px;
|
|
transition: all .2s;
|
|
|
|
&--active {
|
|
color: $primaryColor;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
& > svg {
|
|
width: 80px;
|
|
transition: all .2s;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
|
|
padding: 10px 10px 0 10px;
|
|
&-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
margin-top: 30px;
|
|
}
|
|
&-item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
|
|
padding-left: 16px;
|
|
position: relative;
|
|
& > span + span {
|
|
text-align: right;
|
|
color: #999;
|
|
zoom: .9;
|
|
flex-basis: 90px;
|
|
flex-shrink: 0;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 100%;
|
|
background: $primaryColor;
|
|
transform: translateY(-50%);
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%
|
|
}
|
|
}
|
|
&-item + &-item {
|
|
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|