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

首页优化

newStyle
jyt 2 years ago
parent
8fb2298a0e
commit
015f45c899
10 changed files with 1107 additions and 4 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/logoPng.png
  2. +117
    -0
      src/components/dateFilter/index.vue
  3. +116
    -0
      src/components/queryForm/dateFilter.vue
  4. +121
    -0
      src/components/queryForm/index.vue
  5. +98
    -0
      src/components/tabCard/index.vue
  6. +637
    -0
      src/components/tabTrend/index.vue
  7. +14
    -0
      src/components/theme.color.scss
  8. +1
    -1
      src/page/check/index.vue
  9. +2
    -2
      src/page/wel.vue
  10. +1
    -1
      src/views/ReceivingRecords/index.vue

BIN
public/logoPng.png View File

Before After
Width: 288  |  Height: 216  |  Size: 11 KiB

+ 117
- 0
src/components/dateFilter/index.vue View File

@@ -0,0 +1,117 @@
<template>
<div id="dateFilter">
<el-card shadow="hover">
<div class="app-titel">
<div class="titel-text">筛选日期：</div>
<el-button :class="{ 'el-button--primary': TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</el-button>
<el-button :class="{ 'el-button--primary': TimetoAhoose == 1 }" @click="tabtimetap(1)">近7天</el-button>
<el-button :class="{ 'el-button--primary': TimetoAhoose == 2 }" @click="tabtimetap(2)">近30天</el-button>
<div style="margin-left: 26px">
<el-date-picker @change="confirmtime()" v-model="customtime" :clearable="false" type="daterange"
range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
</el-card>
</div>
</template>

<script>

//事件 : getDate(s,e)获取开始时间，结束时间

export default {
name: "dateFilter",
data() {
return {
TimetoAhoose: 0,
customtime: [],
statDateStart: "",
statDateEnd: "",
dateType:0,
}
},
mounted() {
this.TimetoAhoose = 8;
// this.getTime(7);
},
methods: {
tabtimetap(i) {
this.customtime = [];
this.TimetoAhoose = i;
this.dateType = i;
this.$emit('getDate',this.dateType, "", "")
// switch (i) {
// case 1:
// this.getTime(7);;
// break;
// case 2:
// this.getTime(30);
// break;
// default:
// this.getTime(1);
// break;
// };
},
// getTime(range) {
// var end = new Date();
// var start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
// this.statDateStart = this.dateFormat(start);
// this.statDateEnd = this.dateFormat(end);
// this.$emit('getDate', this.statDateStart, this.statDateEnd)
// },
confirmtime() {
this.statDateStart = this.customtime[0];
this.statDateEnd = this.customtime[1];
this.TimetoAhoose = null;
this.dateType = null;
this.$emit('getDate',this.dateType, this.statDateStart, this.statDateEnd)
},
// dateFormat(time) {
// let date = new Date(time);
// let year = date.getFullYear(),
// month = ("0" + (date.getMonth() + 1)).slice(-2),
// day = ("0" + date.getDate()).slice(-2)
// return year + "-" + month + "-" + day;
// }
}
}
</script>

<style scoped="scoped" lang="scss">
#dateFilter {
.app-titel {
width: 100%;
display: flex;
align-items: center;

.titel-text {
height: 100%;
font-size: 16px;
color: #32363d;
}

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

+ 116
- 0
src/components/queryForm/dateFilter.vue View File

@@ -0,0 +1,116 @@
<template>
<div id="dateFilter">
<div class="app-titel">
<el-button :class="{ 'el-button--primary': TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</el-button>
<el-button :class="{ 'el-button--primary': TimetoAhoose == 1 }" @click="tabtimetap(1)">近7天</el-button>
<el-button :class="{ 'el-button--primary': TimetoAhoose == 2 }" @click="tabtimetap(2)">近30天</el-button>
<div style="margin-left: 26px">
<el-date-picker @change="confirmtime()" v-model="customtime" :clearable="false" type="daterange"
range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
</div>
</template>

<script>

//事件 : getDate(s,e)获取开始时间，结束时间

export default {
name: "dateFilter",
data() {
return {
TimetoAhoose: -1,
customtime: [],
statDateStart: "",
statDateEnd: "",
}
},
props:{
bindKey:{
type:String,
require:true
}
},
mounted() {
// this.TimetoAhoose = -1;
// this.getTime(7);
},
methods: {
tabtimetap(i) {
this.customtime = [];
this.TimetoAhoose = i;
switch (i) {
case 1:
this.getTime(7);
break;
case 2:
this.getTime(30);
break;
default:
this.getTime(1);
break;
};
},
getTime(range) {
var end = new Date();
var start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
this.statDateStart = this.dateFormat(start);
this.statDateEnd = this.dateFormat(end);
this.$emit('getDate', this.statDateStart, this.statDateEnd,this.bindKey)
},
confirmtime() {
this.statDateStart = this.customtime[0];
this.statDateEnd = this.customtime[1];
this.TimetoAhoose = null;
this.$emit('getDate', this.statDateStart, this.statDateEnd,this.bindKey)
},
dateFormat(time) {
let date = new Date(time);
let year = date.getFullYear(),
month = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2)
return year + "-" + month + "-" + day;
}
}
}
</script>

<style scoped="scoped" lang="scss">
#dateFilter {
.app-titel {
width: 100%;
display: flex;
align-items: center;

.titel-text {
height: 100%;
font-size: 16px;
color: #32363d;
}

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

+ 121
- 0
src/components/queryForm/index.vue View File

@@ -0,0 +1,121 @@
<template>
<div id="queryForm">
<el-card shadow="hover">
<el-form :model="ruleForm" status-icon label-width="100px">

<el-row v-if="isClose">
<el-col v-for="(item,index) in params.slice(0,4)" :key="index" :span="item.width">
<el-form-item :label="item.label">
<el-input v-if="item.type == 'input'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]"></el-input>
<el-select v-if="item.type == 'select'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]">
<el-option v-for="(i,k) in item.options" :key="k" :label="i.label" :value="i.value"></el-option>
</el-select>
<dateFilter v-if="item.type == 'dateRange'" :bindKey="item.key" @getDate="selDate"/>
</el-form-item>
</el-col>
</el-row>
<el-row v-else>
<el-col v-for="(item,index) in params" :key="index" :span="item.width">
<el-form-item :label="item.label">
<el-input v-if="item.type == 'input'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]"></el-input>
<el-select v-if="item.type == 'select'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]">
<el-option v-for="(i,k) in item.options" :key="k" :label="i.label" :value="i.value"></el-option>
</el-select>
<dateFilter ref="clearDate" v-if="item.type == 'dateRange'" :bindKey="item.key" @getDate="selDate"/>
</el-form-item>
</el-col>
</el-row>

<el-row>
<el-col :span="6">
<el-button type="primary" @click="submit">筛选</el-button>
<el-button @click="clear">清空筛选条件</el-button>
<el-button v-if="isSystole" @click="isSystoleForm" type="text">{{isOpen?'收起':'展开'}}<i style="margin-left:5px;" :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>

<script>

//事件 : submit(data)获取查询参数
//属性 params:[
// {
// type, 表单类型 input/select/dateRange
// key, 绑定名
// value, 值
// label, 前面的字
// width, 占的宽度
// props, 绑定其他属性
// options 选择框的选项 {label:名，value:值}
// }
//]
//属性 isSystole: 是否显示展开收起的按钮

import dateFilter from './dateFilter.vue'
export default {
name: "queryForm",
props: {
params: {
type: Array,
require:true
},
isSystole: {
type: Boolean,
require:false,
default:false,
},
},
data() {
return {
ruleForm: {},
isOpen:false,
isClose:true,
}
},
mounted(){

},
watch:{
isOpen(newD,oldD){
if(oldD){
this.isClose = true
}else{
this.isClose = false
}
}
},
components:{
dateFilter
},
methods:{
selDate(s,e,key){
this.ruleForm[key] = [s,e]
},
isSystoleForm(){
this.isOpen = !this.isOpen
},
submit(){
this.$emit('submit',this.ruleForm)
},
clear(){
if(this.ruleForm){
this.$refs.clearDate[0].TimetoAhoose = -1;
this.$refs.clearDate[0].customtime = [];
this.$refs.clearDate[0].statDateStart = "";
this.$refs.clearDate[0].statDateStart = "";
this.ruleForm = {}
this.$emit('submit',this.ruleForm)
}
}
}

}
</script>

<style scoped="scoped" lang="scss">

</style>

+ 98
- 0
src/components/tabCard/index.vue View File

@@ -0,0 +1,98 @@
<template>
<div id="tabCard">
<div class="cardItem" v-for="(item,index) in cardData" :key="index" @click="Overviewxlick(index)" :class="{ borderCss: cardindex == index }">
<span>{{item.label}}</span>
<h2>{{item.value}}</h2>
<div class="sel" :class="{ seled: cardindex == index }">
<i v-show="cardindex == index" class="el-icon-check" style="font-size:22px;color:#FFF;position: absolute;right: 2px;bottom: -42px;"></i>
</div>
</div>
</div>
</template>

<script>

//cardData 卡片数据 [{lable,value}]

export default {
name:"tabCard",
data() {
return {
cardindex: 0,
c:'#1E9493'
};
},
props:{
cardData:{
type:Array,
require:true,
}
},
mounted() {
},
methods: {
//卡片切换
Overviewxlick(i) {
console.log(i)
this.cardindex = i;
},
},
};
</script>

<style scoped="scoped" lang="scss" >

@import "../theme.color.scss";
#tabCard{
width: 100%;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
margin-top: 15px;
padding: 15px;
display: grid;
grid-template-columns: repeat(6, 16%);
grid-column-gap: 8px;
grid-row-gap: 18px;
.borderCss{
border: 1px solid $color1 !important;
}
.cardItem{
border: 1px solid #E0E0E0;
padding: 15px 0;
cursor: pointer;
position: relative;
border-radius: 4px;
span{
margin-left: 30px;
}
h2{
margin: 0;
margin-left: 30px;
margin-top:10px;
}
.sel{
width: 45px;
height: 45px;
position: absolute;
right:0;
bottom:0;
}
.seled {
position: absolute;

width: 0;

height: 0;

border-bottom: 45px solid $color1 !important;

border-left: 45px solid transparent !important;

}
}
}


</style>

+ 637
- 0
src/components/tabTrend/index.vue View File

@@ -0,0 +1,637 @@
<template>
<div class="box-center">
<div class="app-box-er">
<div class="container">
<el-card shadow="hover" :class="{ tophovese: cardindex == 1 }">
<div v-if="pointer == 'click'" @click="Overviewxlick('1')">
<div class="text1">
接待量
<el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.receptionCount || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.receptionCount || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.receptionCount > 0">
+{{ cardobjCycle.receptionCount || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.receptionCount < 0">
-{{ cardobjCycle.receptionCount || 0 }}
<i class="down"></i>
</span>
</div>
</div>
<div v-else @mouseenter="Overviewxlick('1')">
<div class="text1">
接待量
<el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.receptionCount || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.receptionCount || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.receptionCount > 0">
+{{ cardobjCycle.receptionCount || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.receptionCount < 0">
-{{ cardobjCycle.receptionCount || 0 }}
<i class="down"></i>
</span>
</div>
</div>
</el-card>
<el-card shadow="hover" :class="{ tophovese: cardindex == 2 }">
<div v-if="pointer == 'click'" @click="Overviewxlick('2')">
<div class="text1">
有效接待
<el-tooltip effect="light" content="筛选时间内，标记为有效的接待数，不包含待接单；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.activeCustomer || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.activeCustomer || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.activeCustomer > 0">
+{{ cardobjCycle.activeCustomer || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.activeCustomer < 0">
-{{ cardobjCycle.activeCustomer || 0 }}
<i class="down"></i>
</span>
</div>
</div>
<div v-else @mouseenter="Overviewxlick('2')">
<div class="text1">
有效接待
<el-tooltip effect="light" content="筛选时间内，标记为有效的接待数，不包含待接单；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.activeCustomer || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.activeCustomer || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.activeCustomer > 0">
+{{ cardobjCycle.activeCustomer || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.activeCustomer < 0">
-{{ cardobjCycle.activeCustomer || 0 }}
<i class="down"></i>
</span>
</div>
</div>
</el-card>
<el-card shadow="hover" :class="{ tophovese: cardindex == 3 }">
<div v-if="pointer == 'click'" @click="Overviewxlick('3')">
<div class="text1">
平均接待时长
<el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.avgDuration || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.avgDuration || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.receptionTimeWithAvg > 0">
+{{ cardobjCycle.receptionTimeWithAvg || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.receptionTimeWithAvg < 0">
-{{ cardobjCycle.receptionTimeWithAvg || 0 }}
<i class="down"></i>
</span>
</div>
</div>
<div v-else @mouseenter="Overviewxlick('3')">
<div class="text1">
平均接待时长
<el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.avgDuration || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.avgDuration || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.receptionTimeWithAvg > 0">
+{{ cardobjCycle.receptionTimeWithAvg || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.receptionTimeWithAvg < 0">
-{{ cardobjCycle.receptionTimeWithAvg || 0 }}
<i class="down"></i>
</span>
</div>
</div>
</el-card>
<el-card shadow="hover" :class="{ tophovese: cardindex == 4 }">
<div v-if="pointer == 'click'" @click="Overviewxlick('4')">
<div class="text1">
平均执行率(%)
<el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均执行率；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.fraction || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.fraction || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.avgFration > 0">
+{{ cardobjCycle.avgFration || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.avgFration < 0">
-{{ cardobjCycle.avgFration || 0 }}
<i class="down"></i>
</span>
</div>
</div>
<div v-else @mouseenter="Overviewxlick('4')">
<div class="text1">
平均执行率(%)
<el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均执行率；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.fraction || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.fraction || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.avgFration > 0">
+{{ cardobjCycle.avgFration || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.avgFration < 0">
-{{ cardobjCycle.avgFration || 0 }}
<i class="down"></i>
</span>
</div>
</div>
</el-card>
<el-card shadow="hover" :class="{ tophovese: cardindex == 5 }">
<div v-if="pointer == 'click'" @click="Overviewxlick('5')">
<div class="text1">
违禁接待次数
<el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.prohibitedCustomer || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.prohibitedCustomer > 0">
+{{ cardobjCycle.prohibitedCustomer || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.prohibitedCustomer < 0">
-{{ cardobjCycle.prohibitedCustomer || 0 }}
<i class="down"></i>
</span>
</div>
</div>
<div v-else @mouseenter="Overviewxlick('5')">
<div class="text1">
违禁接待次数
<el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>
</div>
<div class="text2">
{{ cardobj.prohibitedCustomer || 0 }}
</div>
<div class="text3">
<span>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span>
<span class="textUp" v-if="cardobjCycle.prohibitedCustomer > 0">
+{{ cardobjCycle.prohibitedCustomer || 0 }}
<i class="up"></i>
</span>
<span class="textDown" v-if="cardobjCycle.prohibitedCustomer < 0">
-{{ cardobjCycle.prohibitedCustomer || 0 }}
<i class="down"></i>
</span>
</div>
</div>
</el-card>
</div>

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

<script>


//pointer 参数：click/hover
//fromobj 自定义时间
//TimetoAhoose 今天传0/近7天传1/近30天传2
//key 随机数



import * as echarts from "echarts";
export default {
data() {
return {
customtime: [],
// TimetoAhoose: 0,
// fromobj: {
// statDateStart: "",
// statDateEnd: "",
// },
houseId: "",
cardobj: {},
cardobjs: {}, // 环比数据
cardobjCycle: {}, // 环比数值正负
cardindex: 1,
Brokenline: [],
};
},
props: {
fromobj: {
type: Object
},
TimetoAhoose:{
type:Number
},
pointer: {
type: String,
require: false,
default: "hover"
}
},
mounted() {
if(this.TimetoAhoose == null && (this.fromobj.statDateStart=='' || this.fromobj.statDateEnd=='')){
this.TimetoAhoose = 4;
}
this.houseId = localStorage.getItem("houseId");
this.overviewreceptionOverview();
this.overviewreceptionData();
},
methods: {
//卡片切换
Overviewxlick(i) {
this.cardindex = i;
var newline = [];
var newline2 = [];
var Strname = "";
if (this.cardindex == 1) {
Strname = "接待客户/个";
this.Brokenline.map((item) => {
newline.push(item.receptionCount);
newline2.push(item.statDate.slice(5, 10));
});
} else if (this.cardindex == 2) {
Strname = "接待客户/个";
this.Brokenline.map((item) => {
newline.push(item.activeCustomer);
newline2.push(item.statDate.slice(5, 10));
});
} else if (this.cardindex == 3) {
Strname = "接待时长/分钟";
this.Brokenline.map((item) => {
newline.push(item.avgDuration);
newline2.push(item.statDate.slice(5, 10));
});
} else if (this.cardindex == 4) {
Strname = "执行率/%";
this.Brokenline.map((item) => {
newline.push(item.fraction);
newline2.push(item.statDate.slice(5, 10));
});
} else {
Strname = "违禁/次";
this.Brokenline.map((item) => {
newline.push(item.prohibitedCustomer);
newline2.push(item.statDate.slice(5, 10));
});
}
this.SwitchCARDS(newline, newline2, Strname);
},
//获取卡片数据
overviewreceptionOverview() {
let parmo = {
houseId: this.houseId,
dateType: this.TimetoAhoose,
statDateStart: this.fromobj.statDateStart,
statDateEnd: this.fromobj.statDateEnd,
};
if (this.TimetoAhoose == 8) {
parmo.dateType = null;
}
this.$api.http.overviewreceptionOverview(parmo).then((res) => {
this.cardobj = res.data.valueA;
this.cardobjs = res.data.valueB;
this.cardobjCycle = res.data.contrast;
});
},
//获取卡片下折线图
overviewreceptionData() {
this.Brokenline = [];
let parmo = {
houseId: this.houseId,
dateType: this.TimetoAhoose,
statDateStart: this.fromobj.statDateStart,
statDateEnd: this.fromobj.statDateEnd,
};
if (this.TimetoAhoose == 8) {
parmo.dateType = null;
}
this.$api.http.overviewreceptionData(parmo).then((res) => {
this.Brokenline = res.data || [];
this.Overviewxlick(1);
});
},
//卡片下折线图
SwitchCARDS(newline, newline2, Strname) {
if (this.Brokenline == 0) {
return;
}
echarts.init(document.getElementById("main")).dispose(); // 销毁实例
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;

option = {
color: [
"#6F8EDC",
"#EE6666",
"#F98120",
"#1CC99E",
"#9474FB",
"#66AFF5",
"#FABD2B",
"#FFCF8F",
"#657292",
"#7A6A99",
"#BF5D52",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
legend: {
data: [Strname],
bottom: "10",
},
grid: {
left: 10,
right: 10,

containLabel: true,
},
xAxis: {
type: "category",
data: newline2,
axisLabel: {
//重点在这一块，其余可以忽略
textStyle: {
color: "#212121", //更改坐标轴文字颜色
},
},
axisLine: {
lineStyle: {
type: "solid",
color: "#DDE1EE", //x线的颜色
width: "1", //坐标线的宽度
},
},
},
series: [
{
name: Strname,
data: newline,
type: "line",
smooth: true,
},
],
};
if (this.cardindex == 3) {
option.tooltip = {
trigger: "axis",
formatter: "{b0}: {c0}" + "分钟",
};
} else {
option.tooltip = {
trigger: "axis",
formatter: "{b0}: {c0}" + "次",
};
}
if (this.cardindex == 4) {
option.tooltip = {
trigger: "axis",
formatter: "{b0}: {c0}" + "%",
};
option.yAxis = {
type: "value",
splitNumber: 5,
max: 100,
min: 0,
axisLabel: {
//重点在这一块，其余可以忽略
textStyle: {
color: "#212121", //更改坐标轴文字颜色
},
},
axisLine: {
lineStyle: {
ype: "solid",
color: "#DDE1EE", //x线的颜色
width: "1", //坐标线的宽度
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
},
},
axisTick: {
//y轴刻度线
show: false,
},
};
} else {
option.yAxis = {
type: "value",
splitNumber: 5,
min: 0,
minInterval: 1,
axisLabel: {
//重点在这一块，其余可以忽略
textStyle: {
color: "#212121", //更改坐标轴文字颜色
},
},
axisLine: {
lineStyle: {
ype: "solid",
color: "#DDE1EE", //x线的颜色
width: "1", //坐标线的宽度
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
},
},
axisTick: {
//y轴刻度线
show: false,
},
};
}
option && myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},

//自定义时间
// confirmtime() {
// this.fromobj.statDateStart = this.customtime[0];
// this.fromobj.statDateEnd = this.customtime[1];
// this.TimetoAhoose = 8;
// this.overviewreceptionOverview();
// this.overviewreceptionData();
// },
},
};
</script>

<style scoped="scoped" lang="scss" >

@import "../theme.color.scss";

.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;

.container {
display: grid;
grid-template-columns: repeat(5, 19%);
grid-column-gap: 12px;

/deep/ .el-card__body {
padding: 8px;
cursor: pointer;
}

.text1 {
height: 16px;
font-size: 16px;
font-weight: 400;
line-height: 16px;
text-indent: 20px;
margin-top: 10px;
color: #666666;
}

.text2 {
height: 32px;
font-size: 32px;
font-weight: normal;
line-height: 32px;
text-indent: 20px;
margin-top: 10px;
}

.text3 {
font-size: 14px;
margin: 10px 0;
width: 100%;
text-indent: 20px;
display: flex;
align-items: center;


.textUp {
font-size: 14px;
display: flex;
font-weight: 600;
color: rgba(231, 72, 60, 1);
background: rgba(253, 240, 239, 1);
align-items: center;
padding: 3px 12px 3px 0;
border-radius: 3px;
margin-left: 8px;

.up {
font-size: 14px;
display: block;
width: 20px;
height: 15px;
background: url("../../../public/img/indexIcon/indexCardUp.png") no-repeat;
background-size: 100%;
margin-left: 8px;
}
}

.textDown {
font-size: 14px;
display: flex;
font-weight: 600;
color: rgba(7, 183, 157, 1);
background: rgba(235, 250, 246, 1);
align-items: center;
padding: 3px 12px 3px 0;
border-radius: 3px;
margin-left: 8px;

.down {
display: block;
width: 20px;
height: 15px;
background: url("../../../public/img/indexIcon/indexCardDown.png") no-repeat;
background-size: 100%;
margin-left: 8px;
}
}
}


}

.tophovese {
border: 1px solid #2671e2 !important;
background: rgba(38, 113, 226, 0.04);
}
}




#main {
width: 100%;
height: 380px;
}
</style>

+ 14
- 0
src/components/theme.color.scss View File

@@ -0,0 +1,14 @@
$color1: #5B8FF9;
$color2: #E6625B;
$color3: #FF981E;
$color4: #F6BD16;
$color5: #07B79D;
$color6: #9B6BDF;
$color7: #5B8FF9;
$color8: #FF99C3;
$color9: #1E9493;
$color10: #BA3FB7;
$color11: #54BEF3;
$color12: #3C21F7;
$color13: #F87148;
$color14: #3EB171;

+ 1
- 1
src/page/check/index.vue View File

@@ -10,7 +10,7 @@
<div class="content">
<!-- 质控后台 -->
<div class="tab" @click="goindex(0)" v-if="tabFlag1">
<div><img src="/img/checktab1.png" alt="" /></div>
<div><img src="../../../public/logoPng.png" alt="" style="width:auto;"/></div>
<div class="text">AI销讲助手后台</div>
</div>
<div class="tab" @click="goindex(1)" v-if="tabFlag2">


+ 2
- 2
src/page/wel.vue View File

@@ -278,9 +278,9 @@
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">场景执行率
<div class="text1">维度触达占比
<el-tooltip effect="light"
content="筛选时间内，场景执行率=场景执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，场景执行率=5/10*100%=50%；"
content="筛选时间内，场景触达率=有效接待的场景执行率的之和/有效接待数，例如：品牌介绍，第1次接待执行了100%，第2次接待没有执行，场景触达率=（100+0）/2=50%；"
placement="bottom-end">
<i class="el-icon-question" style="color:#74A3EA"></i>
</el-tooltip>


+ 1
- 1
src/views/ReceivingRecords/index.vue View File

@@ -304,7 +304,7 @@
<div class="cen-tab">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column
prop="staTime"
prop="staTimeOfCN"
label="接待开始时间"
align="center"
width="200"


Write Preview
Loading…
Cancel
Save