|
|
|
@@ -1,16 +1,481 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
楼盘 |
|
|
|
</div> |
|
|
|
<div class="box-center"> |
|
|
|
<div class="toptab" style="display: none"> |
|
|
|
<div |
|
|
|
@click="tapclickyab(0)" |
|
|
|
:class="{ activecllasscet: activeTotal == 0 }" |
|
|
|
:style="{ background: activeTotal == 0 ? '#2671E2' : '#ffffff' }" |
|
|
|
> |
|
|
|
楼盘 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="tapclickyab(1)" |
|
|
|
:class="{ activecllasscet: activeTotal == 1 }" |
|
|
|
:style="{ background: activeTotal == 1 ? '#2671E2' : '#ffffff' }" |
|
|
|
> |
|
|
|
代理商 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="tapclickyab(2)" |
|
|
|
:class="{ activecllasscet: activeTotal == 2 }" |
|
|
|
:style="{ background: activeTotal == 2 ? '#2671E2' : '#ffffff' }" |
|
|
|
> |
|
|
|
公司 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 头 --> |
|
|
|
<div class="app-top"> |
|
|
|
<div class="app-titel" style="margin-top: 5px"> |
|
|
|
<div class="div-lab"> |
|
|
|
<div class="label" style="margin-left: 15px">时间：</div> |
|
|
|
<div class="toptimeqhuan"> |
|
|
|
<div |
|
|
|
:class="{ tophove: searchForm.timeType == 4 }" |
|
|
|
@click="tabtimetap(4)" |
|
|
|
> |
|
|
|
近七天 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:class="{ tophove: searchForm.timeType == 5 }" |
|
|
|
@click="tabtimetap(5)" |
|
|
|
> |
|
|
|
近十五天 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:class="{ tophove: searchForm.timeType == 6 }" |
|
|
|
@click="tabtimetap(6)" |
|
|
|
> |
|
|
|
近三十天 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-date-picker |
|
|
|
v-model="time" |
|
|
|
type="daterange" |
|
|
|
class="div-inp" |
|
|
|
range-separator="-" |
|
|
|
start-placeholder="开始日期" |
|
|
|
:default-time="['00:00:00', '23:59:59']" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
end-placeholder="结束日期" |
|
|
|
@change="timeChange" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="div-lab"> |
|
|
|
<el-input |
|
|
|
v-model="changeValue" |
|
|
|
clearable |
|
|
|
placeholder="请输入" |
|
|
|
@change="selectChange" |
|
|
|
style="width: 363px" |
|
|
|
> |
|
|
|
<el-select |
|
|
|
v-model="selflag" |
|
|
|
slot="prepend" |
|
|
|
class="input-with-select" |
|
|
|
style="width: 115px" |
|
|
|
placeholder="请选择" |
|
|
|
@change="selChange" |
|
|
|
> |
|
|
|
<el-option label="公司名称" value="1"></el-option> |
|
|
|
<el-option label="代理商名称" value="2"></el-option> |
|
|
|
<el-option label="楼盘名称" value="3"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="app-titel" style="margin-top: 5px"> |
|
|
|
<div class="div-lab"> |
|
|
|
<div class="label">城市：</div> |
|
|
|
<el-cascader |
|
|
|
:props="props" |
|
|
|
@change="locationsChange" |
|
|
|
placeholder="省/市" |
|
|
|
size="small" |
|
|
|
separator="/" |
|
|
|
v-model="provice" |
|
|
|
clearable |
|
|
|
></el-cascader> |
|
|
|
</div> |
|
|
|
<div class="div-lab"> |
|
|
|
<div class="label">运营人：</div> |
|
|
|
<el-input class="div-inp" v-model="searchForm.userName"></el-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="app-titel" style="margin-top: 15px"> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-button style="background: #2671e2; color: #ffffff" @click="screen" |
|
|
|
>筛选</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-button @click="clascreen">清空筛选条件</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 表格 --> |
|
|
|
<div class="cen-tab"> |
|
|
|
<el-table :data="tableData" stripe style="width: 100%"> |
|
|
|
<el-table-column prop="houseName" label="楼盘名称" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="orgName" label="公司名称" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="agentName" label="代理商" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="area" label="地区" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="userName" label="运营人" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="linkman" label="负责人" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="onlineQuantity" label="在线设备" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="noOnlineQuantity" |
|
|
|
label="离线设备" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="activeQuantity" label="活跃设备" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="activeAccount" label="活跃顾问" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="sumReception" label="接待量" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="sumRecordTime" label="接待时长" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="avgExacutiveRate" |
|
|
|
label="平均执行率" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="sumProhibitedQuantity" |
|
|
|
label="违禁次数" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" align="center" fixed="right" width="200"> |
|
|
|
<template slot-scope="{ row }"> |
|
|
|
<el-button type="text" @click="goEquiment(row)" |
|
|
|
>设备使用统计</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<!-- <el-table-column prop="date" label="备注" align="center"> |
|
|
|
</el-table-column> --> |
|
|
|
<!-- scope --> |
|
|
|
</el-table> |
|
|
|
<div style="display: flex; justify-content: flex-end; margin-top: 10px"> |
|
|
|
<el-pagination |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
:current-page="currentPage" |
|
|
|
:page-sizes="[10, 20, 30, 40]" |
|
|
|
:page-size="size" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getAreaList } from "@/api/modules/api"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
props: { |
|
|
|
lazy: true, |
|
|
|
async lazyLoad(node, resolve) { |
|
|
|
const { level } = node; |
|
|
|
if (level == 0) { |
|
|
|
// console.log(23); |
|
|
|
const { data } = await getAreaList({ parentId: 0 }); //获取省接口 |
|
|
|
var nodes = data.map((item) => { |
|
|
|
return { |
|
|
|
value: item.id, |
|
|
|
label: item.name, |
|
|
|
leaf: false, |
|
|
|
}; |
|
|
|
}); |
|
|
|
resolve(nodes); |
|
|
|
} else if (level == 1) { |
|
|
|
const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口 |
|
|
|
var nodes = data.map((item) => { |
|
|
|
return { |
|
|
|
value: item.id, |
|
|
|
label: item.name, |
|
|
|
leaf: true, |
|
|
|
}; |
|
|
|
}); |
|
|
|
resolve(nodes); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
activeTotal: "0", |
|
|
|
provice: [], |
|
|
|
value: "", |
|
|
|
input: "", |
|
|
|
tableData: [], |
|
|
|
multipleSelection: [], |
|
|
|
changeValue: "", |
|
|
|
dialogVisible: false, |
|
|
|
houseList: [], |
|
|
|
time: [], |
|
|
|
searchForm: { |
|
|
|
houseName: "", |
|
|
|
provinceId: "", |
|
|
|
cityId: "", |
|
|
|
orgName: "", |
|
|
|
agentName: "", |
|
|
|
userName: "", |
|
|
|
timeType: "4", |
|
|
|
staDate: "", |
|
|
|
endDate: "", |
|
|
|
}, |
|
|
|
currentPage: 1, |
|
|
|
selflag: "1", |
|
|
|
size: 10, |
|
|
|
total: 10, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 获取楼盘列表 |
|
|
|
this.tabtimetap(4); |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectChange(e) { |
|
|
|
this.searchForm.equipImei = ""; |
|
|
|
this.searchForm.userName = ""; |
|
|
|
if (!e) retun; |
|
|
|
if (this.selflag == 1) { |
|
|
|
this.searchForm.orgName = e; |
|
|
|
} |
|
|
|
if (this.selflag == 2) { |
|
|
|
this.searchForm.agentName = e; |
|
|
|
} |
|
|
|
if (this.selflag == 3) { |
|
|
|
this.searchForm.houseName = e; |
|
|
|
} |
|
|
|
}, |
|
|
|
goEquiment(row) { |
|
|
|
console.log(row); |
|
|
|
this.$router.push({ |
|
|
|
path: "/Equipment/equipmentDetailList", |
|
|
|
query: { |
|
|
|
houseId: row.id, |
|
|
|
startDate: this.searchForm.staDate, |
|
|
|
endDate: this.searchForm.endDate, |
|
|
|
timeType: this.searchForm.timeType, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
tapclickyab(i) { |
|
|
|
this.activeTotal = i; |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
timeChange(e) { |
|
|
|
this.searchForm.timeType = -1; |
|
|
|
this.searchForm.staDate = e[0]; |
|
|
|
this.searchForm.endDate = e[1]; |
|
|
|
// this.houseChange(); |
|
|
|
}, |
|
|
|
tabtimetap(idx) { |
|
|
|
this.searchForm.staDate = ""; |
|
|
|
this.searchForm.endDate = ""; |
|
|
|
// this.$set(this, "time", null); |
|
|
|
this.searchForm.timeType = idx; |
|
|
|
let num = 24 * 3600 * 1000; |
|
|
|
// 获取当前时间戳转换为日期格式 |
|
|
|
if (idx == 4) { |
|
|
|
num = 24 * 3600 * 1000 * 6; |
|
|
|
} |
|
|
|
if (idx == 5) { |
|
|
|
num = 24 * 3600 * 1000 * 14; |
|
|
|
} |
|
|
|
if (idx == 6) { |
|
|
|
num = 24 * 3600 * 1000 * 30; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
this.time = [ |
|
|
|
this.timestampToTime(new Date().getTime() - num), |
|
|
|
this.timestampToTime(new Date().getTime()), |
|
|
|
]; |
|
|
|
}, |
|
|
|
timestampToTime(timestamp) { |
|
|
|
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
|
|
|
// var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
|
|
|
|
|
|
|
var yyyy = date.getFullYear() + "-"; |
|
|
|
|
|
|
|
<style lang="" scoped > |
|
|
|
var MM = |
|
|
|
(date.getMonth() + 1 < 10 |
|
|
|
? "0" + (date.getMonth() + 1) |
|
|
|
: date.getMonth() + 1) + "-"; |
|
|
|
|
|
|
|
// var dd = date.getDate() + ' '; |
|
|
|
var dd = |
|
|
|
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; |
|
|
|
|
|
|
|
// var HH = date.getHours() + ':'; |
|
|
|
// var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':'; |
|
|
|
// |
|
|
|
// // var mm = date.getMinutes() + ':'; |
|
|
|
// var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':'; |
|
|
|
// |
|
|
|
// // var ss = date.getSeconds(); |
|
|
|
// var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()); |
|
|
|
|
|
|
|
// return yyyy+MM+dd+HH+mm+ss; |
|
|
|
return yyyy + MM + dd; |
|
|
|
}, |
|
|
|
locationsChange(e) { |
|
|
|
console.log(e); |
|
|
|
if (!e) return; |
|
|
|
this.searchForm.provinceId = e[0]; |
|
|
|
this.searchForm.cityId = e[1]; |
|
|
|
}, |
|
|
|
selChange() { |
|
|
|
this.changeValue = ""; |
|
|
|
this.searchForm.agentName = ""; |
|
|
|
this.searchForm.userName = ""; |
|
|
|
this.searchForm.orgName = ""; |
|
|
|
}, |
|
|
|
screen() { |
|
|
|
this.currentPage = 1; |
|
|
|
console.log(this.searchForm); |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
clascreen() { |
|
|
|
this.time = []; |
|
|
|
this.provice = []; |
|
|
|
this.changeValue = ""; |
|
|
|
this.searchForm = { |
|
|
|
houseName: "", |
|
|
|
provinceId: "", |
|
|
|
cityId: "", |
|
|
|
orgName: "", |
|
|
|
agentName: "", |
|
|
|
userName: "", |
|
|
|
timeType: "4", |
|
|
|
staDate: "", |
|
|
|
endDate: "", |
|
|
|
}; |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
// 获取常错词列表 |
|
|
|
houseStatistics() { |
|
|
|
let obj = { |
|
|
|
current: this.currentPage, |
|
|
|
size: this.size, |
|
|
|
...this.searchForm, |
|
|
|
}; |
|
|
|
this.$api.api.houseStatistics(obj).then((res) => { |
|
|
|
// console.log(res); |
|
|
|
this.tableData = res.data.records; |
|
|
|
this.total = res.data.total; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleSelectionChange(val) { |
|
|
|
this.multipleSelection = val; |
|
|
|
}, |
|
|
|
handleSizeChange(val) { |
|
|
|
console.log(`每页 ${val} 条`); |
|
|
|
this.size = val; |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
handleCurrentChange(val) { |
|
|
|
console.log(`当前页: ${val}`); |
|
|
|
this.currentPage = val; |
|
|
|
this.houseStatistics(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped="scoped" lang="scss" > |
|
|
|
.box-center { |
|
|
|
width: 100%; |
|
|
|
padding: 15px; |
|
|
|
min-width: 1200px; |
|
|
|
padding-bottom: 100px; |
|
|
|
} |
|
|
|
.toptab { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
.toptab div { |
|
|
|
padding-left: 30px; |
|
|
|
padding-right: 30px; |
|
|
|
padding-top: 10px; |
|
|
|
padding-bottom: 10px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
.activecllasscet { |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
.cen-tab { |
|
|
|
width: 100%; |
|
|
|
padding: 15px; |
|
|
|
background: #ffffff; |
|
|
|
margin-top: 15px; |
|
|
|
} |
|
|
|
.tophove { |
|
|
|
color: #ffffff; |
|
|
|
background: #2671e2; |
|
|
|
} |
|
|
|
.app-top { |
|
|
|
width: 100%; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
padding-top: 15px; |
|
|
|
padding-bottom: 15px; |
|
|
|
.app-titel { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
.label { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
color: #32363d; |
|
|
|
line-height: 32px; |
|
|
|
margin-left: 15px; |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
.toptimeqhuan { |
|
|
|
height: 30px; |
|
|
|
background: #ffffff; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.toptimeqhuan div { |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
font-size: 14px; |
|
|
|
margin-right: 15px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.div-lab { |
|
|
|
display: flex; |
|
|
|
margin: 5px; |
|
|
|
} |
|
|
|
.div-inp { |
|
|
|
width: 250px; |
|
|
|
} |
|
|
|
</style> |
