|
|
|
@@ -0,0 +1,993 @@ |
|
|
|
<template> |
|
|
|
<div class="box-center"> |
|
|
|
<!-- 头 --> |
|
|
|
<div class="app-top"> |
|
|
|
<div class="app-titel" style="margin-left: 15px"> |
|
|
|
<el-select |
|
|
|
v-model="selValue" |
|
|
|
@change="selChange" |
|
|
|
style="width: 100px" |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<!-- --> |
|
|
|
<div style="margin-left: 26px" v-if="selValue == 1"> |
|
|
|
<el-select |
|
|
|
v-model="choicValue" |
|
|
|
@change="valuechange" |
|
|
|
placeholder="默认为全部" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<!-- 楼盘 --> |
|
|
|
<div style="margin-left: 26px" v-else-if="selValue == 2"> |
|
|
|
<el-select |
|
|
|
v-model="choicValue" |
|
|
|
@change="valuechange" |
|
|
|
placeholder="默认为全部" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.propertyName" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 26px" v-else> |
|
|
|
<el-select |
|
|
|
v-model="choicValue" |
|
|
|
@change="valuechange" |
|
|
|
clearable |
|
|
|
placeholder="默认为全部" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in houseList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.agentName" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="app-box-er"> |
|
|
|
<div class="app-titel" style="margin-bottom: 10px"> |
|
|
|
<div class="titel-text" style="text-indent: 0">楼盘趋势</div> |
|
|
|
<div class="toptimeqhuan"> |
|
|
|
<div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)"> |
|
|
|
近7天 |
|
|
|
</div> |
|
|
|
<div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)"> |
|
|
|
近15天 |
|
|
|
</div> |
|
|
|
<div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)"> |
|
|
|
近30天 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-date-picker |
|
|
|
@change="confirmtime" |
|
|
|
v-model="customtime" |
|
|
|
:clearable="false" |
|
|
|
type="daterange" |
|
|
|
range-separator="-" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
:picker-options="pickerOptions" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<el-checkbox v-model="checked" @change="radioChange" |
|
|
|
>对比时间段</el-checkbox |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="checked" |
|
|
|
style=" |
|
|
|
margin-left: 20px; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
min-width: 220px; |
|
|
|
height: 30px; |
|
|
|
border-radius: 4px; |
|
|
|
max-width: 250px; |
|
|
|
font-size: 13px; |
|
|
|
line-height: 30px; |
|
|
|
text-indent: 8px; |
|
|
|
" |
|
|
|
@click="show" |
|
|
|
> |
|
|
|
{{ selectTime1 ? "时段二： " : "请选择： " }} |
|
|
|
<span v-if="selectTime1">{{ selectTime + "-" + selectTime1 }}</span> |
|
|
|
<el-date-picker |
|
|
|
style="opacity: 0" |
|
|
|
v-model="time" |
|
|
|
@change="timeChange" |
|
|
|
ref="time" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
format="yyyy-MM-dd" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
:picker-options="pickerOptions" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('receptionCount')" |
|
|
|
style="height: auto; padding-bottom: 10px" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="text1" |
|
|
|
:class="{ tophovese: secindex == 'receptionCount' }" |
|
|
|
> |
|
|
|
接待量 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="text2" |
|
|
|
:class="{ tophovese: secindex == 'receptionCount' }" |
|
|
|
> |
|
|
|
{{ compare.receptionCount || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.receptionCount || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style=" |
|
|
|
compare2.receptionCount >= 0 ? 'color:green;' : 'color:red;' |
|
|
|
" |
|
|
|
> |
|
|
|
{{ compare2.receptionCount || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('avgDuration')" |
|
|
|
style="height: auto" |
|
|
|
> |
|
|
|
<div class="text1" :class="{ tophovese: secindex == 'avgDuration' }"> |
|
|
|
平均接待时长(分钟) |
|
|
|
</div> |
|
|
|
<div class="text2" :class="{ tophovese: secindex == 'avgDuration' }"> |
|
|
|
{{ compare.avgDuration || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.avgDuration || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style="compare2.avgDuration >= 0 ? 'color:green;' : 'color:red;'" |
|
|
|
> |
|
|
|
{{ compare2.avgDuration || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('prohibitedCustomer')" |
|
|
|
style="height: auto; padding-bottom: 10px" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="text1" |
|
|
|
:class="{ tophovese: secindex == 'prohibitedCustomer' }" |
|
|
|
> |
|
|
|
违禁接待次数 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="text2" |
|
|
|
:class="{ tophovese: secindex == 'prohibitedCustomer' }" |
|
|
|
> |
|
|
|
{{ compare.prohibitedCustomer || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.prohibitedCustomer || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style=" |
|
|
|
compare2.prohibitedCustomer >= 0 ? 'color:green;' : 'color:red;' |
|
|
|
" |
|
|
|
> |
|
|
|
{{ compare2.prohibitedCustomer || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('activeCustomer')" |
|
|
|
style="height: auto; padding-bottom: 10px" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="text1" |
|
|
|
:class="{ tophovese: secindex == 'activeCustomer' }" |
|
|
|
> |
|
|
|
有效接待 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="text2" |
|
|
|
:class="{ tophovese: secindex == 'activeCustomer' }" |
|
|
|
> |
|
|
|
{{ compare.activeCustomer || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.activeCustomer || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style=" |
|
|
|
compare2.activeCustomer >= 0 ? 'color:green;' : 'color:red;' |
|
|
|
" |
|
|
|
> |
|
|
|
{{ compare2.activeCustomer || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('activeCustomerRate')" |
|
|
|
style="height: auto; padding-bottom: 10px" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="text1" |
|
|
|
:class="{ tophovese: secindex == 'activeCustomerRate' }" |
|
|
|
> |
|
|
|
有效接待占比 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="text2" |
|
|
|
:class="{ tophovese: secindex == 'activeCustomerRate' }" |
|
|
|
> |
|
|
|
{{ compare.activeCustomerRate || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.activeCustomerRate || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style=" |
|
|
|
compare2.activeCustomerRate >= 0 ? 'color:green;' : 'color:red;' |
|
|
|
" |
|
|
|
> |
|
|
|
{{ compare2.activeCustomerRate || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="grid-content" |
|
|
|
@click="secondChange('fraction')" |
|
|
|
style="height: auto; padding-bottom: 10px" |
|
|
|
> |
|
|
|
<div class="text1" :class="{ tophovese: secindex == 'fraction' }"> |
|
|
|
平均执行率 |
|
|
|
</div> |
|
|
|
<div class="text2" :class="{ tophovese: secindex == 'fraction' }"> |
|
|
|
{{ compare.fraction || 0 }} |
|
|
|
</div> |
|
|
|
<div class="text33" v-if="selectTime1"> |
|
|
|
<div> |
|
|
|
对比时段: |
|
|
|
<span style="text-indent: 20px">{{ |
|
|
|
compare1.fraction || 0 |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:style="compare2.fraction >= 0 ? 'color:green;' : 'color:red;'" |
|
|
|
> |
|
|
|
{{ compare2.fraction || 0 }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="main"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="app-box-er" v-if="selectTime1"> |
|
|
|
<template> |
|
|
|
<el-table :data="tableData" style="width: 100%" height="320"> |
|
|
|
<el-table-column prop="time" label="时间" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="data1" label="时段一" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="data2" label="时段二" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="data3" label="变化" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span |
|
|
|
:style="scope.row.data3 >= 0 ? 'color:green;' : 'color:red;'" |
|
|
|
>{{ scope.row.data3 }}</span |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
<!-- <div style="display: flex; justify-content: flex-end; margin-top: 10px"> |
|
|
|
<el-pagination |
|
|
|
@size-change="handleSizeChange1" |
|
|
|
@current-change="handleCurrentChange1" |
|
|
|
:current-page="currentPage3" |
|
|
|
:page-sizes="[6, 10, 14, 20]" |
|
|
|
:page-size="6" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from "echarts"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
pickerOptions: { |
|
|
|
disabledDate(time) { |
|
|
|
//根据当前日期 --- 禁止选中之后的日期 |
|
|
|
return time.getTime() > Date.now(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
firstTab: {}, |
|
|
|
tableData: [], |
|
|
|
secondTab: {}, |
|
|
|
thirdTab: {}, |
|
|
|
selValue: "0", |
|
|
|
checked: false, |
|
|
|
selectTime1: "", //对比时间 |
|
|
|
selectTime: "", //对比时间 |
|
|
|
choicValue: localStorage.getItem("houseId"), |
|
|
|
houseList: [], |
|
|
|
secindex: "receptionCount", |
|
|
|
dateType: 4, |
|
|
|
compare: {}, |
|
|
|
compare1: {}, |
|
|
|
compare2: {}, |
|
|
|
time: [], |
|
|
|
customtime: [], |
|
|
|
Confirmthecontrast: false, |
|
|
|
cardindex: "1", |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
label: "代理商", |
|
|
|
value: "0", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "公司", |
|
|
|
value: "1", |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "楼盘", |
|
|
|
value: "2", |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getList(); |
|
|
|
this.tabtimetap(4); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取tab2 |
|
|
|
receptionOverviewOfSystem() { |
|
|
|
console.log(this.time); |
|
|
|
let obj = { |
|
|
|
startDate: this.dateType ? "" : this.customtime[0], |
|
|
|
endDate: this.dateType ? "" : this.customtime[1], |
|
|
|
contrastStartDate: this.selectTime, |
|
|
|
contrastEndDate: this.selectTime1, |
|
|
|
dateType: this.dateType, |
|
|
|
agentId: this.selValue == 0 ? this.choicValue : null, |
|
|
|
orgCode: this.selValue == 1 ? this.choicValue : null, |
|
|
|
houseId: this.selValue == 2 ? this.choicValue : null, |
|
|
|
}; |
|
|
|
this.$api.api.receptionOverviewOfSystem(obj).then((res) => { |
|
|
|
console.log(res); |
|
|
|
// 数据处理 |
|
|
|
// 判断是否选择了对比 |
|
|
|
// return |
|
|
|
this.compare = res.data.firstData; |
|
|
|
|
|
|
|
if (this.selectTime1) { |
|
|
|
// 有对比 |
|
|
|
this.compare1 = res.data.secondData; |
|
|
|
// 将得到的三者的数据进行组装为一个数组 |
|
|
|
this.compare2 = res.data.thirdData; |
|
|
|
} |
|
|
|
this.getChars("receptionCount"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
async getChars(str) { |
|
|
|
let obj = { |
|
|
|
startDate: this.dateType ? "" : this.customtime[0], |
|
|
|
endDate: this.dateType ? "" : this.customtime[1], |
|
|
|
contrastStartDate: this.selectTime, |
|
|
|
contrastEndDate: this.selectTime1, |
|
|
|
dateType: this.dateType, |
|
|
|
agentId: this.selValue == 0 ? this.choicValue : null, |
|
|
|
orgCode: this.selValue == 1 ? this.choicValue : null, |
|
|
|
houseId: this.selValue == 2 ? this.choicValue : null, |
|
|
|
}; |
|
|
|
if (!this.selectTime1) { |
|
|
|
let res = await this.$api.api.receptionDataOfSystem(obj); |
|
|
|
// console.log(res, str); |
|
|
|
// return |
|
|
|
// console.log(idx); |
|
|
|
let Strname = ["时段一"]; |
|
|
|
let timeDate = []; |
|
|
|
let arr1 = []; |
|
|
|
// 判断是第几个然后对数据进行渲染 |
|
|
|
// 先处理时间 |
|
|
|
// console.log(timeDate); |
|
|
|
res.data.firstValue.map((item) => { |
|
|
|
timeDate.push(item.statDate.substring(5, 10)); |
|
|
|
arr1.push(item[str]); |
|
|
|
}); |
|
|
|
|
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
name: Strname[0], |
|
|
|
data: arr1, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.SwitchCARDS(arr, "main", timeDate, Strname); |
|
|
|
} else { |
|
|
|
let res = await this.$api.api.receptionDataOfSystem(obj); |
|
|
|
// console.log(res, str); |
|
|
|
// return |
|
|
|
let Strname = ["时段一", "时段二"]; |
|
|
|
let timeDate = []; |
|
|
|
// 判断是第几个然后对数据进行渲染 |
|
|
|
// 先处理时间 |
|
|
|
let arr1 = []; |
|
|
|
let arr2 = []; |
|
|
|
let arr3 = []; |
|
|
|
res.data.firstValue.map((item, idx) => { |
|
|
|
timeDate.push( |
|
|
|
item.statDate.substring(5, 10) + |
|
|
|
"VS" + |
|
|
|
res.data.secondValue[idx].statDate.substring(5, 10) |
|
|
|
); |
|
|
|
arr1.push(item[str]); |
|
|
|
arr2.push(res.data.secondValue[idx][str]); |
|
|
|
arr3.push(res.data.thirdData[idx][str]); |
|
|
|
}); |
|
|
|
let arr = [ |
|
|
|
{ |
|
|
|
name: Strname[0], |
|
|
|
data: arr1, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: Strname[1], |
|
|
|
data: arr2, |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.SwitchCARDS(arr, "main", timeDate, Strname); |
|
|
|
let tableData = []; |
|
|
|
timeDate.map((item, idx) => { |
|
|
|
let obj = { |
|
|
|
time: item, |
|
|
|
data1: arr1[idx], |
|
|
|
data2: arr2[idx], |
|
|
|
data3: arr3[idx], |
|
|
|
}; |
|
|
|
tableData.push(obj); |
|
|
|
}); |
|
|
|
this.tableData = tableData; |
|
|
|
// console.log(tableData); |
|
|
|
} |
|
|
|
}, |
|
|
|
//时间tab切换 |
|
|
|
tabtimetap(i) { |
|
|
|
this.dateType = i; |
|
|
|
this.checked = false; |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
//给时间选择器赋值 |
|
|
|
let num = 24 * 3600 * 1000; |
|
|
|
// 获取当前时间戳转换为日期格式 |
|
|
|
if (this.dateType == 4) { |
|
|
|
num = 24 * 3600 * 1000 * 6; |
|
|
|
} |
|
|
|
if (this.dateType == 5) { |
|
|
|
num = 24 * 3600 * 1000 * 14; |
|
|
|
} |
|
|
|
if (this.dateType == 6) { |
|
|
|
num = 24 * 3600 * 1000 * 29; |
|
|
|
} |
|
|
|
this.customtime = [ |
|
|
|
this.timestampToTime(new Date().getTime() - num), |
|
|
|
this.timestampToTime(new Date().getTime()), |
|
|
|
]; |
|
|
|
this.$set(this, "time", null); |
|
|
|
this.Confirmthecontrast = false; |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}, |
|
|
|
show() { |
|
|
|
this.$refs.time.pickerVisible = true; |
|
|
|
}, |
|
|
|
timeChange(e) { |
|
|
|
// 对数据进行处理 |
|
|
|
// 当当前选择的为自定义时间时 |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
this.timeSelect(e); |
|
|
|
}, |
|
|
|
timeSelect(e) { |
|
|
|
// 获取今天昨天近一周 |
|
|
|
// 获取一天的时间戳 |
|
|
|
let num = 24 * 3600 * 1000; |
|
|
|
// 获取当前时间戳转换为日期格式 |
|
|
|
if (this.dateType == 4) { |
|
|
|
num = 24 * 3600 * 1000 * 6; |
|
|
|
} |
|
|
|
if (this.dateType == 5) { |
|
|
|
num = 24 * 3600 * 1000 * 14; |
|
|
|
} |
|
|
|
if (this.dateType == 6) { |
|
|
|
num = 24 * 3600 * 1000 * 29; |
|
|
|
} |
|
|
|
this.selectTime = e; |
|
|
|
this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num); |
|
|
|
console.log(this.selectTime, this.selectTime1); |
|
|
|
this.Confirmthecontrast = true; |
|
|
|
// this.page.openTime = this.customtime[0]; |
|
|
|
// this.page.closeTime = this.customtime[1]; |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
console.log(this.selValue); |
|
|
|
// 当为楼盘选择时 |
|
|
|
if (this.selValue == 1) { |
|
|
|
this.$api.api |
|
|
|
.findMyOrg({ |
|
|
|
orgType: localStorage.getItem("orgType"), |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
this.houseList = res.data; |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}); |
|
|
|
} else if (this.selValue == 2) { |
|
|
|
this.$api.api |
|
|
|
.findHouseByUser({ |
|
|
|
orgType: localStorage.getItem("orgType"), |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
this.houseList = res.data; |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.$api.api |
|
|
|
.findMyAgent({ |
|
|
|
orgType: localStorage.getItem("orgType"), |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
this.houseList = res.data; |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
secondChange(i) { |
|
|
|
this.secindex = i; |
|
|
|
this.getChars(i); |
|
|
|
}, |
|
|
|
confirmtime(e) { |
|
|
|
this.dateType = null; |
|
|
|
this.checked = false; |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
this.$set(this, "time", null); |
|
|
|
if (!e) return; |
|
|
|
// this.page.openTime = this.customtime[0]; |
|
|
|
// this.page.closeTime = this.customtime[1]; |
|
|
|
this.Confirmthecontrast = false; |
|
|
|
// this.trendtrendAnalysis() |
|
|
|
}, |
|
|
|
selChange() { |
|
|
|
this.choicValue = ""; |
|
|
|
this.dateType = 4; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
valuechange() { |
|
|
|
// console.log(this.choicValue); |
|
|
|
this.receptionOverviewOfSystem(); |
|
|
|
}, |
|
|
|
radioChange() { |
|
|
|
this.selectTime = ""; |
|
|
|
this.selectTime1 = ""; |
|
|
|
this.$set(this, "time", null); |
|
|
|
}, |
|
|
|
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() + "-"; |
|
|
|
|
|
|
|
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; |
|
|
|
}, |
|
|
|
//卡片下折线图 |
|
|
|
SwitchCARDS(arr, str, timeDate, Strname) { |
|
|
|
// console.log(arr,str,timeDate,Strname); |
|
|
|
var chartDom = document.getElementById(str); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
option = { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: Strname, |
|
|
|
bottom: "10", |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: 10, |
|
|
|
right: 10, |
|
|
|
|
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: timeDate, |
|
|
|
axisLabel: { |
|
|
|
//重点在这一块，其余可以忽略 |
|
|
|
textStyle: { |
|
|
|
color: "#212121", //更改坐标轴文字颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "solid", |
|
|
|
color: "#DDE1EE", //x线的颜色 |
|
|
|
width: "1", //坐标线的宽度 |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
splitNumber: 4, |
|
|
|
axisLabel: { |
|
|
|
//重点在这一块，其余可以忽略 |
|
|
|
textStyle: { |
|
|
|
color: "#212121", //更改坐标轴文字颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
ype: "solid", |
|
|
|
color: "#DDE1EE", //x线的颜色 |
|
|
|
width: "1", //坐标线的宽度 |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "dashed", // y轴分割线类型 |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
//y轴刻度线 |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: arr, |
|
|
|
}; |
|
|
|
option && myChart.setOption(option); |
|
|
|
window.addEventListener("resize", () => { |
|
|
|
myChart.resize(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped="scoped" lang="scss" > |
|
|
|
.box-center { |
|
|
|
width: 100%; |
|
|
|
padding: 15px; |
|
|
|
min-width: 1200px; |
|
|
|
padding-bottom: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(6, 16%); |
|
|
|
grid-column-gap: 12px; |
|
|
|
grid-row-gap: 18px; |
|
|
|
} |
|
|
|
.container1 { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(3, 30%); |
|
|
|
grid-column-gap: 66px; |
|
|
|
grid-row-gap: 18px; |
|
|
|
} |
|
|
|
// 进度条 |
|
|
|
.jinbox { |
|
|
|
width: 100%; |
|
|
|
height: 18px; |
|
|
|
line-height: 18px; |
|
|
|
display: flex; |
|
|
|
font-size: 16px; |
|
|
|
color: #2c3542; |
|
|
|
margin-top: 20px; |
|
|
|
.jinboxtit { |
|
|
|
width: 14%; |
|
|
|
height: 18px; |
|
|
|
padding-right: 6px; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.jinbox-box { |
|
|
|
width: 75%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 8px; |
|
|
|
background: #f2f2f2; |
|
|
|
} |
|
|
|
.boxbaifenbi { |
|
|
|
height: 100%; |
|
|
|
background: #60d7a0; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
.boxbaifenbi2 { |
|
|
|
height: 100%; |
|
|
|
background: #5b8ff9; |
|
|
|
} |
|
|
|
.jinboxbott { |
|
|
|
width: 16%; |
|
|
|
text-indent: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#main { |
|
|
|
width: 100%; |
|
|
|
height: 380px; |
|
|
|
} |
|
|
|
#echar2 { |
|
|
|
width: 100%; |
|
|
|
height: 380px; |
|
|
|
} |
|
|
|
#Brokenline1 { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
#Brokenline2 { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
#Pinspeak1 { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
#Pinspeak2 { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
.app-box-san { |
|
|
|
width: 100%; |
|
|
|
// height: 400px; |
|
|
|
display: flex; |
|
|
|
margin-top: 15px; |
|
|
|
.zuo { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
margin-right: 15px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 4px; |
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
height: 55px; |
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
display: flex; |
|
|
|
align-content: center; |
|
|
|
.text1 { |
|
|
|
flex: 2; |
|
|
|
line-height: 55px; |
|
|
|
text-indent: 20px; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16px; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.text2 { |
|
|
|
flex: 1; |
|
|
|
height: 55px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.you { |
|
|
|
height: 100%; |
|
|
|
flex: 1; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 4px; |
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
height: 55px; |
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
display: flex; |
|
|
|
align-content: center; |
|
|
|
.text1 { |
|
|
|
flex: 2; |
|
|
|
line-height: 55px; |
|
|
|
text-indent: 20px; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16px; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.text2 { |
|
|
|
flex: 1; |
|
|
|
height: 55px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.app-box-er { |
|
|
|
width: 100%; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
margin-top: 15px; |
|
|
|
padding: 15px; |
|
|
|
} |
|
|
|
.grid-content { |
|
|
|
background: #ffffff; |
|
|
|
height: 90px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
.text1 { |
|
|
|
height: 16px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 16px; |
|
|
|
text-indent: 20px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.text2 { |
|
|
|
height: 32px; |
|
|
|
font-size: 32px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 32px; |
|
|
|
text-indent: 20px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tophove { |
|
|
|
color: #ffffff; |
|
|
|
background: #2671e2; |
|
|
|
} |
|
|
|
.tophovese { |
|
|
|
color: #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; |
|
|
|
.titel-text { |
|
|
|
height: 100%; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
color: #32363d; |
|
|
|
text-indent: 30px; |
|
|
|
} |
|
|
|
.toptimeqhuan { |
|
|
|
width: 190px; |
|
|
|
height: 32px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
overflow: hidden; |
|
|
|
margin-left: 20px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.toptimeqhuan div { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.hejisan { |
|
|
|
width: 92%; |
|
|
|
margin: 0 auto; |
|
|
|
display: flex; |
|
|
|
margin-top: 15px; |
|
|
|
.text1-1 { |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
.text1-2 { |
|
|
|
color: #333333; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.app_titile { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.text33 { |
|
|
|
font-size: 12px; |
|
|
|
text-indent: 20px; |
|
|
|
line-height: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
</style> |
