master
parent
6d7cd933c5
commit
dfaf74cfd7
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader
|
||||
:icon="$route.meta.icon"
|
||||
:text="$route.meta.title"
|
||||
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
||||
>
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<header-content :auths="auths_auth_mixin">
|
||||
<template #search>
|
||||
<el-date-picker
|
||||
size="small"
|
||||
style="padding-bottom: 0;padding-top: 0;"
|
||||
v-model="daterange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
@change="daterangePick">
|
||||
</el-date-picker>
|
||||
|
||||
<Button
|
||||
style="margin-left: 6px;"
|
||||
type="primary"
|
||||
@click="getData"
|
||||
>查询</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table ref="xyTable"
|
||||
:is-page="false"
|
||||
:table-item="table"
|
||||
:list="list"
|
||||
:span-method="spanMethod"
|
||||
:auths="auths_auth_mixin"></xy-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LxHeader from '@/components/LxHeader';
|
||||
import headerContent from '@/components/LxHeader/XyContent.vue'
|
||||
import { authMixin } from '@/mixin/authMixin';
|
||||
import { index } from "@/api/system/baseForm"
|
||||
|
||||
export default {
|
||||
mixins: [authMixin],
|
||||
components: {
|
||||
headerContent,
|
||||
LxHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},{
|
||||
text: '最近一年',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
daterange: "",
|
||||
select: {
|
||||
table_name: 'leases',
|
||||
sort_name: 'land_id',
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
filter: [
|
||||
{
|
||||
key: "zulinkaishiqixian",
|
||||
op: "range",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
key: "zulinjieshuqixian",
|
||||
op: "range",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
table: [
|
||||
{
|
||||
prop: "area",
|
||||
label: "区域",
|
||||
customFn: row => {
|
||||
if (row.land_id) {
|
||||
return (
|
||||
<span>{ this.areas.get(row.land_id_lands_id_relation?.area) }</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span>{ this.areas.get(row.house_id_houses_id_relation?.area) }</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "asset",
|
||||
label: "资产名称",
|
||||
customFn: row => {
|
||||
if (row.land_id) {
|
||||
return (
|
||||
<span>【土地】{ row.land_id_lands_id_relation?.name }</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span>【房产】{ row.house_id_houses_id_relation?.name }</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "zulinshijian",
|
||||
label: "租赁时间",
|
||||
customFn: row => {
|
||||
return (
|
||||
<span>{ row.zulinkaishiqixian } ~ { row.zulinjieshuqixian }</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "shijimianji",
|
||||
label: "实际面积",
|
||||
customFn: row => {
|
||||
if (row.land_id) {
|
||||
return (
|
||||
<span>{ row.land_id_lands_id_relation?.shijimianji }</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span>{ row.house_id_houses_id_relation?.shijimianji }</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "zulinmianji",
|
||||
label: "租赁面积",
|
||||
},
|
||||
{
|
||||
prop: "rate",
|
||||
label: "出租率",
|
||||
customFn: row => {
|
||||
function getRate(a,b) {
|
||||
if (!parseFloat(a) || !parseFloat(b)) {
|
||||
return "0.00%"
|
||||
}
|
||||
return ((parseFloat(a) / parseFloat(b)) * 100).toFixed(2) + "%"
|
||||
}
|
||||
if (row.land_id) {
|
||||
return (
|
||||
<span>{ getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji) }</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span>{ getRate(row.zulingmianji, row.house_id_houses_id_relation?.shijimianji) }</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
spanArr: [],
|
||||
pos: 0,
|
||||
spanArr1: [],
|
||||
pos1: 0,
|
||||
areas: new Map([
|
||||
[1,"宜兴市"],
|
||||
[2,"惠山区"],
|
||||
[3,"新吴区"],
|
||||
[4,"梁溪区"],
|
||||
[5,"江阴市"],
|
||||
[6,"滨湖区"],
|
||||
[7,"锡山区"]
|
||||
])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
async getData () {
|
||||
this.spanArr = [];
|
||||
this.spanArr1 = [];
|
||||
this.pos = 0;
|
||||
this.pos1 = 0;
|
||||
const res = await index(this.select);
|
||||
let temp = res.data;
|
||||
|
||||
for (let i in temp) {
|
||||
if (Number(i) === 0) {
|
||||
this.spanArr.push(1);
|
||||
this.pos = 0;
|
||||
this.spanArr1.push(1);
|
||||
this.pos1 = 0;
|
||||
} else {
|
||||
if(temp[i].land_id ? (temp[i].land_id === temp[i - 1].land_id) : (temp[i].house_id === temp[i - 1].house_id)){
|
||||
this.spanArr[this.pos] += 1;
|
||||
this.spanArr.push(0)
|
||||
}else{
|
||||
this.spanArr.push(1);
|
||||
this.pos = i;
|
||||
}
|
||||
if(temp[i].land_id ? (temp[i].land_id_lands_id_relation.area === temp[i - 1].land_id_lands_id_relation?.area) : (temp[i].house_id_houses_id_relation.area === temp[i - 1].house_id_houses_id_relation?.area)){
|
||||
this.spanArr1[this.pos1] += 1;
|
||||
this.spanArr1.push(0)
|
||||
}else{
|
||||
this.spanArr1.push(1);
|
||||
this.pos1 = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.list = temp;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xyTable.doLayout();
|
||||
})
|
||||
},
|
||||
daterangePick (e) {
|
||||
if (e && e[0] && e[1]) {
|
||||
this.select.filter[0].value = `${this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')},2999-01-01 00:00:00`;
|
||||
this.select.filter[1].value = `${this.$moment(0).format('YYYY-MM-DD HH:mm:ss')},${this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')}`;
|
||||
} else {
|
||||
this.select.filter[0].value = "";
|
||||
this.select.filter[1].value = "";
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (column.property === "asset") {
|
||||
const _row = this.spanArr[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
}
|
||||
}
|
||||
if (column.property === "area") {
|
||||
const _row = this.spanArr1[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in new issue