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

init

newStyle
lancer 3 years ago
parent
06924f16b6
commit
430b033da4
8 changed files with 2745 additions and 77 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -0
      src/api/modules/api.js
  2. +1
    -1
      src/views/Equipment/batch.vue
  3. +905
    -0
      src/views/Statistics/dataScreeAge.vue
  4. +882
    -0
      src/views/Statistics/dataScreeOrg.vue
  5. +170
    -72
      src/views/Statistics/dataScreeSys.vue
  6. +760
    -0
      src/views/Statistics/houseDataSys.vue
  7. +0
    -1
      src/views/admin/role/orgRole.vue
  8. +3
    -3
      vue.config.js

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

@@ -853,3 +853,27 @@ export function dataOverviewWithSystemWithDay(data) {
data
})
}
// 整体看板
export function dataOverviewWithSystemWithLook(data) {
return request({
url: 'autoSR/cusStageStatistics/dataOverviewWithSystemWithLook',
method:'post',
data
})
}
// 获取楼盘数据一
export function houseDataAll(data) {
return request({
url: 'autoSR/cusStageStatistics/houseDataAll',
method:'post',
data
})
}
// 获取楼盘数据一
export function houseTrends(data) {
return request({
url: 'autoSR/cusStageStatistics/houseTrends',
method:'post',
data
})
}

+ 1
- 1
src/views/Equipment/batch.vue View File

@@ -172,7 +172,7 @@ export default {
},
created() {
this.equ_batch_add = this.permissions["equ_batch_add"];
this.equ_index_edit = this.permissions["equ_index_edit"];
this.equ_batch_edit = this.permissions["equ_batch_edit"];
},
mounted() {
this.getcompanyList()


+ 905
- 0
src/views/Statistics/dataScreeAge.vue View File

@@ -0,0 +1,905 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-top">
<div class="app-titel">
<!-- <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 class="titel-text">选择公司</div>
<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: 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: 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: 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: 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.houseQuantity || 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.houseQofEnough || 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.activeEquipmentQuantity || 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.userCountWithNewJoin || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('6')">
<div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
<div class="text2" :class="{ tophovese: cardindex == 6 }">
{{ thirdTab.receptionQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('7')">
<div class="text1" :class="{ tophovese: cardindex == 7 }">
平均接待时长
</div>
<div class="text2" :class="{ tophovese: cardindex == 7 }">
{{ thirdTab.receptionTimeWithAvg || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('8')">
<div class="text1" :class="{ tophovese: cardindex == 8 }">
活跃设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 8 }">
{{ thirdTab.activeEquipmentQuantity || 0 }}
</div>
</div>
</div>

<div id="echar2"></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: "1",
choicValue: "",
houseList: [],
secindex: "1",
dateType: 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();
this.dataOverviewWithSystemWithLook();
},
// 当选择的代理商或者楼盘切换时
selChange() {
this.choicValue = "";
this.dateType = 4;
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();
this.dataOverviewWithSystemWithLook();
});
} else {
this.$api.api
.findMyAgent({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay();
this.dataOverviewWithSystemWithLook();
});
}
},
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);
});
},
// 整体看板
dataOverviewWithSystemWithLook() {
this.$api.api
.dataOverviewWithSystemWithLook({
startDate: this.dateType ? "" : this.customtime[0],
endDate: this.dateType ? "" : this.customtime[1],
dateType: this.dateType,
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
console.log(res);
this.thirdTab = res.data;
this.getChars2(1);
});
},
// echars生成
getChars1(idx) {
console.log(idx);
let Strname = ["昨日", "今日"];
let timeDate = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
let arr1 = [];
let arr2 = [];
// console.log(timeDate);
if (idx == 1 || idx == 3) {
// 接待量
this.secondTab.yesterdayReceptionList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr2.push(item.data);
});
this.secondTab.todayActiveUserList.map((item) => {
arr1.push(item.data);
});
}
if (idx == 2) {
// 活跃用户
this.secondTab.todayActiveUserList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr1.push(item.data);
});
this.secondTab.yesterdayActiveUserList.map((item) => {
arr2.push(item.data);
});
}
// if (idx == 3) {
// // 活跃设备
// }
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);
},
getChars2(idx) {
console.log(idx);
let Strname = [];
let timeDate = [];
let arr1 = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
// console.log(timeDate);
if (idx == 1) {
Strname = ["购买服务楼盘数"];
this.thirdTab.buyHouseList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 2) {
Strname = ["服务期内楼盘数"];
this.thirdTab.houseQofEnoughList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 4) {
Strname = ["活跃设备数"];
this.thirdTab.activeUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 5) {
Strname = ["新增用户数"];
this.thirdTab.newJoinUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 6) {
Strname = ["接待量"];
this.thirdTab.receptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 7) {
Strname = ["平均接待时长"];
this.thirdTab.avgReceptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 8) {
Strname = ["活跃设备数"];
this.thirdTab.activeEquipmentList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
}
let arr = [
{
name: Strname[0],
data: arr1,
type: "line",
smooth: true,
}
];
this.SwitchCARDS(arr, "echar2", 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;
this.getChars2(i);
},
secondChange(i) {
this.secindex = i;
this.getChars1(i);
},
confirmtime(e) {
this.dateType = null;
if (!e) return;
console.log(e);
this.dataOverviewWithSystemWithLook();
},
tabtimetap(i) {
this.dateType = i;
// this.getTableList()
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.dataOverviewWithSystemWithLook();
// 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, 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;
}

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

+ 882
- 0
src/views/Statistics/dataScreeOrg.vue View File

@@ -0,0 +1,882 @@
<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> -->

<!-- 二 -->
<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: 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: 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.houseQuantity || 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.houseQofEnough || 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.activeEquipmentQuantity || 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.userCountWithNewJoin || 0 }}
</div>
</div> -->
<div class="grid-content" @click="Overviewxlick('6')">
<div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
<div class="text2" :class="{ tophovese: cardindex == 6 }">
{{ thirdTab.receptionQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('7')">
<div class="text1" :class="{ tophovese: cardindex == 7 }">
平均接待时长
</div>
<div class="text2" :class="{ tophovese: cardindex == 7 }">
{{ thirdTab.receptionTimeWithAvg || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('8')">
<div class="text1" :class="{ tophovese: cardindex == 8 }">
活跃设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 8 }">
{{ thirdTab.activeEquipmentQuantity || 0 }}
</div>
</div>
</div>

<div id="echar2"></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: "1",
choicValue:localStorage.getItem('houseId'),
houseList: [],
secindex: "1",
dateType: 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();
this.dataOverviewWithSystemWithLook();
},
// 当选择的代理商或者楼盘切换时
selChange() {
this.choicValue = "";
this.dateType = 4;
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();
this.dataOverviewWithSystemWithLook();
});
} else {
this.$api.api
.findMyAgent({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay();
this.dataOverviewWithSystemWithLook();
});
}
},
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);
});
},
// 整体看板
dataOverviewWithSystemWithLook() {
this.$api.api
.dataOverviewWithSystemWithLook({
startDate: this.dateType ? "" : this.customtime[0],
endDate: this.dateType ? "" : this.customtime[1],
dateType: this.dateType,
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
console.log(res);
this.thirdTab = res.data;
this.getChars2(1);
});
},
// echars生成
getChars1(idx) {
console.log(idx);
let Strname = ["昨日", "今日"];
let timeDate = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
let arr1 = [];
let arr2 = [];
// console.log(timeDate);
if (idx == 1 || idx == 3) {
// 接待量
this.secondTab.yesterdayReceptionList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr2.push(item.data);
});
this.secondTab.todayActiveUserList.map((item) => {
arr1.push(item.data);
});
}
if (idx == 2) {
// 活跃用户
this.secondTab.todayActiveUserList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr1.push(item.data);
});
this.secondTab.yesterdayActiveUserList.map((item) => {
arr2.push(item.data);
});
}
// if (idx == 3) {
// // 活跃设备
// }
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);
},
getChars2(idx) {
console.log(idx);
let Strname = [];
let timeDate = [];
let arr1 = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
// console.log(timeDate);
if (idx == 1) {
Strname = ["购买服务楼盘数"];
this.thirdTab.buyHouseList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 2) {
Strname = ["服务期内楼盘数"];
this.thirdTab.houseQofEnoughList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 4) {
Strname = ["活跃设备数"];
this.thirdTab.activeUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 5) {
Strname = ["新增用户数"];
this.thirdTab.newJoinUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 6) {
Strname = ["接待量"];
this.thirdTab.receptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 7) {
Strname = ["平均接待时长"];
this.thirdTab.avgReceptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 8) {
Strname = ["活跃设备数"];
this.thirdTab.activeEquipmentList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
}
let arr = [
{
name: Strname[0],
data: arr1,
type: "line",
smooth: true,
}
];
this.SwitchCARDS(arr, "echar2", 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;
this.getChars2(i);
},
secondChange(i) {
this.secindex = i;
this.getChars1(i);
},
confirmtime(e) {
this.dateType = null;
if (!e) return;
console.log(e);
this.dataOverviewWithSystemWithLook();
},
tabtimetap(i) {
this.dateType = i;
// this.getTableList()
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.dataOverviewWithSystemWithLook();
// 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, 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;
}

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

+ 170
- 72
src/views/Statistics/dataScreeSys.vue View File

@@ -53,9 +53,9 @@
<!-- <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 :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: 26px">
<el-date-picker
@@ -189,7 +189,7 @@
</div>
</div>
</div>
<!-- <div id="main"></div> -->
<div id="main"></div>
</div>

<div class="app-box-er">
@@ -198,13 +198,13 @@
<div>
<div class="app-titel">
<div class="toptimeqhuan">
<div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
<div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
近7天
</div>
<div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
<div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
近15天
</div>
<div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
<div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
近30天
</div>
</div>
@@ -231,7 +231,7 @@
购买服务楼盘数
</div>
<div class="text2" :class="{ tophovese: cardindex == 1 }">
{{ thirdTab.receptionCount || 0 }}
{{ thirdTab.houseQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('2')">
@@ -239,23 +239,23 @@
服务期内楼盘数
</div>
<div class="text2" :class="{ tophovese: cardindex == 2 }">
{{ thirdTab.activeCustomer || 0 }}
{{ thirdTab.houseQofEnough || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('3')">
<!-- <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> -->
<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 }}
{{ thirdTab.activeEquipmentQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
@@ -263,34 +263,34 @@
新增用户数
</div>
<div class="text2" :class="{ tophovese: cardindex == 5 }">
{{ thirdTab.prohibitedCustomer || 0 }}
{{ thirdTab.userCountWithNewJoin || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="grid-content" @click="Overviewxlick('6')">
<div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
<div class="text2" :class="{ tophovese: cardindex == 6 }">
{{ thirdTab.prohibitedCustomer || 0 }}
{{ thirdTab.receptionQuantity || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="grid-content" @click="Overviewxlick('7')">
<div class="text1" :class="{ tophovese: cardindex == 7 }">
平均接待时长
</div>
<div class="text2" :class="{ tophovese: cardindex == 7 }">
{{ thirdTab.prohibitedCustomer || 0 }}
{{ thirdTab.receptionTimeWithAvg || 0 }}
</div>
</div>
<div class="grid-content" @click="Overviewxlick('5')">
<div class="grid-content" @click="Overviewxlick('8')">
<div class="text1" :class="{ tophovese: cardindex == 8 }">
活跃设备数
</div>
<div class="text2" :class="{ tophovese: cardindex == 8 }">
{{ thirdTab.prohibitedCustomer || 0 }}
{{ thirdTab.activeEquipmentQuantity || 0 }}
</div>
</div>
</div>

<div id="main"></div>
<div id="echar2"></div>
</div>
</div>
</template>
@@ -313,7 +313,7 @@ export default {
choicValue: "",
houseList: [],
secindex: "1",
timeType: 4,
dateType: 4,
customtime: [],
cardindex: "1",
options: [
@@ -336,11 +336,13 @@ export default {
valuechange() {
// console.log(this.choicValue);
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
this.dataOverviewWithSystemWithDay();
this.dataOverviewWithSystemWithLook();
},
// 当选择的代理商或者楼盘切换时
selChange() {
this.choicValue = "";
this.dateType = 4;
this.getList();
},
// 获取下拉框数据
@@ -355,7 +357,8 @@ export default {
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
this.dataOverviewWithSystemWithDay();
this.dataOverviewWithSystemWithLook();
});
} else {
this.$api.api
@@ -365,7 +368,8 @@ export default {
.then((res) => {
this.houseList = res.data;
this.dataOverViewWithSystem();
this.dataOverviewWithSystemWithDay()
this.dataOverviewWithSystemWithDay();
this.dataOverviewWithSystemWithLook();
});
}
},
@@ -376,41 +380,140 @@ export default {
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
console.log(res);
// console.log(res);
// this.firstTab = res.data;
// 对数据进行处理
// 将数据给一个指定值然后设置一个方法还进行tab切换的时候调用
this.secondTab=res.data
this.secondTab = res.data;
// 调用方法
this.getChars1(1)
this.getChars1(1);
});
},
// 整体看板
dataOverviewWithSystemWithLook() {
this.$api.api
.dataOverviewWithSystemWithLook({
startDate: this.dateType ? "" : this.customtime[0],
endDate: this.dateType ? "" : this.customtime[1],
dateType: this.dateType,
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
// console.log(res);
this.thirdTab = res.data;
this.getChars2(1);
});
},
// echars生成
getChars1(idx){
console.log(idx);
let arr=[]
let arr1=[]
let Strname=['昨日','今日']
let timeDate=[]
getChars1(idx) {
// console.log(idx);
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)
let arr1 = [];
let arr2 = [];
// console.log(timeDate);
if (idx == 1 || idx == 3) {
// 接待量
this.secondTab.yesterdayReceptionList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr2.push(item.data);
});
this.secondTab.todayActiveUserList.map((item) => {
arr1.push(item.data);
});
}
if (idx == 2) {
// 活跃用户
this.secondTab.todayActiveUserList.map((item) => {
timeDate.push(item.time.substring(11, 16));
arr1.push(item.data);
});
this.secondTab.yesterdayActiveUserList.map((item) => {
arr2.push(item.data);
});
}
// if (idx == 3) {
// // 活跃设备
// }
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);
},
getChars2(idx) {
// console.log(idx);
let Strname = [];
let timeDate = [];
let arr1 = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
// console.log(timeDate);
if (idx == 1) {
Strname = ["购买服务楼盘数"];
this.thirdTab.buyHouseList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 2) {
Strname = ["服务期内楼盘数"];
this.thirdTab.houseQofEnoughList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 4) {
Strname = ["活跃设备数"];
this.thirdTab.activeUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 5) {
Strname = ["新增用户数"];
this.thirdTab.newJoinUserList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 6) {
Strname = ["接待量"];
this.thirdTab.receptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 7) {
Strname = ["平均接待时长"];
this.thirdTab.avgReceptionList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 8) {
Strname = ["活跃设备数"];
this.thirdTab.activeEquipmentList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
}
let arr = [
{
name: Strname[0],
data: arr1,
type: "line",
smooth: true,
}
];
this.SwitchCARDS(arr, "echar2", timeDate, Strname);
},
// 获取总览数据
dataOverViewWithSystem() {
@@ -426,17 +529,20 @@ export default {
},
Overviewxlick(i) {
this.cardindex = i;
this.getChars2(i);
},
secondChange(i) {
this.secindex = i;
this.getChars1(i);
},
confirmtime(e) {
this.timeType = "-1";
this.dateType = null;
if (!e) return;
console.log(e);
this.dataOverviewWithSystemWithLook();
},
tabtimetap(i) {
this.timeType = i;
this.dateType = i;
// this.getTableList()
this.checked = false;
this.selectTime = "";
@@ -444,13 +550,13 @@ export default {
//给时间选择器赋值
let num = 24 * 3600 * 1000;
// 获取当前时间戳转换为日期格式
if (this.timeType == 4) {
if (this.dateType == 4) {
num = 24 * 3600 * 1000 * 6;
}
if (this.timeType == 5) {
if (this.dateType == 5) {
num = 24 * 3600 * 1000 * 14;
}
if (this.timeType == 6) {
if (this.dateType == 6) {
num = 24 * 3600 * 1000 * 29;
}

@@ -458,7 +564,7 @@ export default {
this.timestampToTime(new Date().getTime() - num),
this.timestampToTime(new Date().getTime()),
];
this.dataOverviewWithSystemWithLook();
// this.getTableList();
// this.getdetail();
},
@@ -490,8 +596,9 @@ export default {
return yyyy + MM + dd;
},
//卡片下折线图
SwitchCARDS(arr,arr1, timeDate, Strname) {
var chartDom = document.getElementById("main");
SwitchCARDS(arr, str, timeDate, Strname) {
// console.log(arr,str,timeDate,Strname);
var chartDom = document.getElementById(str);
var myChart = echarts.init(chartDom);
var option;

@@ -552,20 +659,7 @@ export default {
show: false,
},
},
series: [
{
name: Strname[0],
data: arr,
type: "line",
smooth: true,
},
{
name: Strname[1],
data: arr1,
type: "line",
smooth: true,
},
],
series: arr,
};
option && myChart.setOption(option);
window.addEventListener("resize", () => {
@@ -633,6 +727,10 @@ export default {
width: 100%;
height: 380px;
}
#echar2 {
width: 100%;
height: 380px;
}
#Brokenline1 {
width: 100%;
height: 350px;


+ 760
- 0
src/views/Statistics/houseDataSys.vue View File

@@ -0,0 +1,760 @@
<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>

<div class="app-box-er">
<div class="container1">
<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.houseQuantity || 0 }}
</div>
</div>
</div>
<!-- <div id="main"></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('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.receptionQuantity || 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",
checked: false,
selectTime1: "", //对比时间
selectTime: "", //对比时间
choicValue: localStorage.getItem("houseId"),
houseList: [],
secindex: "1",
dateType: 4,
compare: {},
compare1: {},
time: [],
customtime: [],
Confirmthecontrast: false,
cardindex: "1",
options: [
{
label: "代理商",
value: "0",
},
{
label: "公司",
value: "1",
},
],
};
},
mounted() {
this.getList();
this.tabtimetap(4);
},
methods: {
// 获取tab一
houseDataAll() {
this.$api.api
.houseDataAll({
agentId: this.selValue == 0 ? this.choicValue : null,
orgCode: this.selValue == 1 ? this.choicValue : null,
})
.then((res) => {
this.firstTab = res.data;
});
},
// 获取tab2
houseTrends() {
console.log(this.time);
this.$api.api
.houseTrends({
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,
})
.then((res) => {
// console.log(res);
// 数据处理
// 判断是否选择了对比
this.compare = res.data.firstData;

if (this.selectTime1) {
// 有对比
this.compare1 = res.data.secondData;
}
this.getChars(1);
});
},
getChars(idx) {
if (!this.timeSelect1) {
// console.log(idx);
let Strname = [];
let timeDate = [];
let arr1 = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
// console.log(timeDate);
console.log();
if (idx == 1) {
Strname = ["活跃楼盘数"];
this.compare.activeHouseQuantityList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
} else if (idx == 2) {
Strname = ["服务器内楼盘数"];
this.compare.houseQofEnoughList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
}
let arr = [
{
name: Strname[0],
data: arr1,
type: "line",
smooth: true,
},
];
this.SwitchCARDS(arr, "main", timeDate, Strname);
} else {
let Strname = ["选择时间", "对比时间"];
let timeDate = [];
// 判断是第几个然后对数据进行渲染
// 先处理时间
let arr1 = [];
let arr2 = [];
if (idx == 1) {
this.compare.activeHouseQuantityList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
this.compare1.activeHouseQuantityList.map((item) => {
arr2.push(item.data);
});
} else if (idx == 2) {
this.compare.houseQofEnoughList.map((item) => {
timeDate.push(item.time.substring(5, 10));
arr1.push(item.data);
});
this.compare1.houseQofEnoughList.map((item) => {
arr1.push(item.data);
});
}
}
},
//时间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.houseTrends();
},
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.houseTrends();
},
getList() {
console.log(this.selValue);
// 当为楼盘选择时
if (this.selValue == 1) {
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.houseDataAll();
this.houseTrends();
});
} else {
this.$api.api
.findMyAgent({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
this.houseDataAll();
this.houseTrends();
});
}
},
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.houseDataAll();
this.houseTrends();
},
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;
}
</style>

+ 0
- 1
src/views/admin/role/orgRole.vue View File

@@ -182,7 +182,6 @@ export default {
getTableList(){
this.$api.api.userDict({
dictType:1,
dictKey:null
}).then(res=>{
console.log(res);
this.list=res.data


+ 3
- 3
vue.config.js View File

@@ -3,11 +3,11 @@
* https://cli.vuejs.org/zh/config/
*/
// const url = 'http://pigx-gateway'
// const url = 'http://39.97.167.65:9999' //测试
const url = 'http://39.97.167.65:9999' //测试
// const url = 'http://192.168.31.169:9999' //长龙
const url = 'http://192.168.31.134:9999' //嘉豪
// const url = 'http://192.168.31.133:9999' //嘉豪
// const url = 'http://192.168.31.100:9999' //王笑
// const url = 'http://mrra2f.natappfree.cc' //王笑
// const url = 'http://68jyh3.natappfree.cc' //王笑

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']


Write Preview
Loading…
Cancel
Save