liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
lancer 2 years ago
parent
0f0ca79611
commit
d4bf5d995b
2 changed files with 822 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -0
      src/api/modules/api.js
  2. +806
    -0
      src/views/Statistics/dataScreeSys.vue

+ 16
- 0
src/api/modules/api.js View File

@@ -837,3 +837,19 @@ export function editRoleAndDept(data) {
data
})
}
// 获取数据总览统计数据
export function dataOverViewWithSystem(data) {
return request({
url: 'autoSR/cusStageStatistics/dataOverViewWithSystem',
method:'post',
data
})
}
// 获取数据总览统计数据
export function dataOverviewWithSystemWithDay(data) {
return request({
url: 'autoSR/cusStageStatistics/dataOverviewWithSystemWithDay',
method:'post',
data
})
}

+ 806
- 0
src/views/Statistics/dataScreeSys.vue View File

@@ -0,0 +1,806 @@
<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.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 class="app-titel">
<div class="titel-text">接待时间</div>
<div class="toptimeqhuan">
<div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">近7天</div>
<div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)"> 近15天 </div>
<div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)"> 近30天 </div>
</div>
<div style="margin-left: 26px">
<el-date-picker
@change="confirmtime()"
v-model="customtime"
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</div> -->
</div>

<!-- 二 -->
<div class="app-box-er">
<div class="container">
<div class="grid-content">
<div class="text1">代理商数</div>
<div class="text2">{{ firstTab.agentQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">服务器内代理商数</div>
<div class="text2">{{ firstTab.agentQofEnough || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">过期代理商数</div>
<div class="text2">
{{ firstTab.agentQofUnenough || 0 }}
</div>
</div>
<div class="grid-content">
<div class="text1">楼盘总数</div>
<div class="text2">{{ firstTab.houseQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">服务器内楼盘总数</div>
<div class="text2">{{ firstTab.houseQofEnough || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">过期楼盘数</div>
<div class="text2">{{ firstTab.houseQofUnenough || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">设备总数</div>
<div class="text2">{{ firstTab.equipmentQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">已售设备数</div>
<div class="text2">{{ firstTab.equipmentQuantityWithSold || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">待售设备数</div>
<div class="text2">
{{ firstTab.equipmentQuantityWithNotSold || 0 }}
</div>
</div>
<div class="grid-content">
<div class="text1">待验收设备数</div>
<div class="text2">
{{ firstTab.equipmentQuantityWithNotAccept || 0 }}
</div>
</div>
<div class="grid-content">
<div class="text1">已报废设备数</div>
<div class="text2">{{ firstTab.damageEquipmentQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">正常设备数</div>
<div class="text2">{{ firstTab.normalequipmentQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">用户数</div>
<div class="text2">{{ firstTab.userQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">顾问数</div>
<div class="text2">{{ firstTab.accountQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">接待量</div>
<div class="text2">{{ firstTab.receptionQuantity || 0 }}</div>
</div>
<div class="grid-content">
<div class="text1">接待客户</div>
<div class="text2">
{{ firstTab.customerQuantity || 0 }}
</div>
</div>
<div class="grid-content">
<div class="text1">接待时长(小时)</div>
<div class="text2">
{{ Math.floor(firstTab.receptionTime / 60) || 0 }}
</div>
</div>
<div class="grid-content">
<div class="text1">平均接待时长(分钟)</div>
<div class="text2">{{ firstTab.receptionTimeWithAvg || 0 }}</div>
</div>
</div>
<!-- <div id="main"></div> -->
</div>

<div class="app-box-er">
<div style="line-height: 40px; font-weight: bold">今日实时状况</div>
<div class="container">
<div class="grid-content" @click="secondChange('1')">
<div class="text1" :class="{ tophovese: secindex == 1 }">接待量</div>
<div class="text2" :class="{ tophovese: secindex == 1 }">
{{ secondTab.receptionQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="secondChange('2')">
<div class="text1" :class="{ tophovese: secindex == 2 }">
活跃用户
</div>
<div class="text2" :class="{ tophovese: secindex == 2 }">
{{ secondTab.activeUserQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="secondChange('3')">
<div class="text1" :class="{ tophovese: secindex == 3 }">
活跃设备
</div>
<div class="text2" :class="{ tophovese: secindex == 3 }">
{{ secondTab.activeEquipmentQuantity || 0 }}
</div>
</div>
</div>
<!-- <div id="main"></div> -->
</div>

<div class="app-box-er">
<div class="app_titile" style="margin-bottom: 10px">
<div style="line-height: 30px; font-weight: bold">整体看板</div>
<div>
<div class="app-titel">
<div class="toptimeqhuan">
<div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
近7天
</div>
<div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
近15天
</div>
<div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
近30天
</div>
</div>
<div style="margin-left: 26px">
<el-date-picker
@change="confirmtime()"
v-model="customtime"
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid-content" @click="Overviewxlick('1')">
<div class="text1" :class="{ tophovese: cardindex == 1 }">
购买服务楼盘数
</div>
<div class="text2" :class="{ tophovese: cardindex == 1 }">
{{ thirdTab.receptionCount || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('2')">
<div class="text1" :class="{ tophovese: cardindex == 2 }">
服务期内楼盘数
</div>
<div class="text2" :class="{ tophovese: cardindex == 2 }">
{{ thirdTab.activeCustomer || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('3')">
<div class="text1" :class="{ tophovese: cardindex == 3 }">
销售设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 3 }">
{{ thirdTab.avgDuration || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('4')">
<div class="text1" :class="{ tophovese: cardindex == 4 }">
活跃设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 4 }">
{{ thirdTab.fraction || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="text1" :class="{ tophovese: cardindex == 5 }">
新增用户数
</div>
<div class="text2" :class="{ tophovese: cardindex == 5 }">
{{ thirdTab.prohibitedCustomer || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
<div class="text2" :class="{ tophovese: cardindex == 6 }">
{{ thirdTab.prohibitedCustomer || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="text1" :class="{ tophovese: cardindex == 7 }">
平均接待时长
</div>
<div class="text2" :class="{ tophovese: cardindex == 7 }">
{{ thirdTab.prohibitedCustomer || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="text1" :class="{ tophovese: cardindex == 8 }">
活跃设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 8 }">
{{ thirdTab.prohibitedCustomer || 0 }}
</div>
</div>
</div>

<div id="main"></div>
</div>
</div>
</template>

<script>
import * as echarts from "echarts";
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
//根据当前日期 --- 禁止选中之后的日期
return time.getTime() > Date.now();
},
},
firstTab: {},
secondTab: {},
thirdTab: {},
selValue: "0",
choicValue: "",
houseList: [],
secindex: "1",
timeType: 4,
customtime: [],
cardindex: "1",
options: [
{
label: "代理商",
value: "0",
},
{
label: "公司",
value: "1",
},
],
};
},
mounted() {
this.getList();
this.tabtimetap(4);
},
methods: {
valuechange() {
// console.log(this.choicValue);
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
},
// 当选择的代理商或者楼盘切换时
selChange() {
this.choicValue = "";
this.getList();
},
// 获取下拉框数据
getList() {
console.log(this.selValue);
// 当为楼盘选择时
if (this.selValue == 1) {
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
});
} else {
this.$api.api
.findMyAgent({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
});
}
},
dataOverviewWithSystemWithDay() {
this.$api.api
.dataOverviewWithSystemWithDay({
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
console.log(res);
// this.firstTab = res.data;
// 对数据进行处理
// 将数据给一个指定值然后设置一个方法还进行tab切换的时候调用
this.secondTab=res.data
// 调用方法
this.getChars1(1)
});
},
// echars生成
getChars1(idx){
console.log(idx);
let arr=[]
let arr1=[]
let Strname=['昨日','今日']
let timeDate=[]
// 判断是第几个然后对数据进行渲染
// 先处理时间
// let str=''
// str.substring
this.secondTab.yesterdayReceptionList.map(item=>{
timeDate.push(item.time.substring(11,16))
// console.log(timeDate);
if(idx==1){
// 接待量

}
if(idx==2){
// 活跃用户
}
if(idx==3){
// 活跃设备
}
})
// this.SwitchCARDS(arr,arr1, timeDate, Strname)
},
// 获取总览数据
dataOverViewWithSystem() {
this.$api.api
.dataOverViewWithSystem({
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
// console.log(res);
this.firstTab = res.data;
});
},
Overviewxlick(i) {
this.cardindex = i;
},
secondChange(i) {
this.secindex = i;
},
confirmtime(e) {
this.timeType = "-1";
if (!e) return;
console.log(e);
},
tabtimetap(i) {
this.timeType = i;
// this.getTableList()
this.checked = false;
this.selectTime = "";
this.selectTime1 = "";
//给时间选择器赋值
let num = 24 * 3600 * 1000;
// 获取当前时间戳转换为日期格式
if (this.timeType == 4) {
num = 24 * 3600 * 1000 * 6;
}
if (this.timeType == 5) {
num = 24 * 3600 * 1000 * 14;
}
if (this.timeType == 6) {
num = 24 * 3600 * 1000 * 29;
}

this.customtime = [
this.timestampToTime(new Date().getTime() - num),
this.timestampToTime(new Date().getTime()),
];

// this.getTableList();
// this.getdetail();
},
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,arr1, timeDate, Strname) {
var chartDom = document.getElementById("main");
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: [
{
name: Strname[0],
data: arr,
type: "line",
smooth: true,
},
{
name: Strname[1],
data: arr1,
type: "line",
smooth: true,
},
],
};
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;
}

// 进度条
.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;
}
#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;
}
</style>

Write Preview
Loading…
Cancel
Save