<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据统计</title>
<script src="./js/vue2.7.16.js"></script>
<!-- axios -->
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/elementUI/elementUI.2.8.2.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="./js/elementUI/elementUI.2.8.2.css" />
<script src="./js/echarts.min.5.5.0.js"></script>
</head>
<body class="box">
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline search-style">
<el-form-item label="坐席姓名">
<el-input v-model="formInline.name" placeholder="坐席姓名" clearable></el-input>
</el-form-item>
<el-form-item label="部门">
<el-select v-model="formInline.fenzu" placeholder="部门" clearable>
<el-option v-for="item in fenZuList" :key="item.id" :label="item.fenzuName"
:value="item.fenzuName"></el-option>
</el-select>
</el-form-item><el-form-item label="日期范围">
<el-date-picker v-model="formInline.date" clearable type="daterange" range-separator="至"
start-placeholder="开始日期" :picker-options="disabledDateFn" end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
</el-form-item>
</el-form>
<div class="echarts-style">
<div id="main" style="width: 1190px;height:400px;"></div>
</div>
<div class="echarts-style">
<div id="main1" style="width: 1190px;height:400px;"></div>
</div>
<el-row v-if="totalData?.zonghujiao > 0">
<el-col :span="8">
<div class="total-style">
<div class="total-data-title">呼叫总次数</div>
<div class="total-data-number">{{totalData?.zonghujiao}}</div>
</div>
</el-col>
<el-col :span="8">
<div class="total-style">
<div class="total-data-title">呼叫应答数</div>
<div class="total-data-number">{{totalData?.zongyingdashu}}</div>
</div>
</el-col>
<el-col :span="8">
<div class="total-style" style="margin-right: 0;">
<div class="total-data-title">总接听率</div>
<div class="total-data-number">{{totalData?.zongjietonglv}} %</div>
</div>
</el-col>
</el-row>
<div class="table-style" v-loading="tableLoading">
<el-table border :data="tableList" stripe style="width: 100%">
<el-table-column prop="fenji" label="分机号" width="180"></el-table-column>
<el-table-column prop="name" label="坐席姓名" width="180"></el-table-column>
<el-table-column prop="callnumSum" label="呼叫次数"></el-table-column>
<el-table-column prop="accessNum" label="应答次数"></el-table-column>
<el-table-column prop="connectRate" label="接通率（%）"></el-table-column>
<el-table-column prop="calltimeSum" label="通话总时长（秒）"></el-table-column>
<el-table-column prop="jifeiSum" label="计费时长（分）"></el-table-column>
<el-table-column prop="avgduration" label="平均时长（秒）"></el-table-column>
</el-table>
<el-pagination style="margin-top: 10px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
myChart: null,
myChart1: null,
tableLoading: false,
instance: null,
companyName: null,
fenZuList: [],
formInline: {
name: '',
fenzu: '',
date: ''
},
disabledDateFn: {
disabledDate(time) {
return time.getTime() > Date.now()
}
},
totalData: {
zonghujiao: null
},
page: 1,
limit: 20,
total: 0,
tableList: [], // 表格数据
},
created() {
this.instance = axios.create({
baseURL: '###',
timeout: 10000
})
this.instance.interceptors.request.use(
config => {
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
);
},
mounted() {
this.init()
},
methods: {
init() {
this.loading = true
this.companyName = window.location.search.substr(1).split('=')[1]
this.postAxios('api/company_tongji/fenzu', { companyname: this.companyName }).then((res) => {
if (res.code === 200) {
this.fenZuList = res.data
} else {
this.$message.error(res.msg)
}
})
this.eCharts()
this.onSearch()
},
getAxios(url, params) {
return new Promise((resolve, reject) => {
this.instance.get(url, { params: params })
.then((res) => {
resolve(res.data)
})
.catch((err) => {
reject(err.data)
});
});
},
postAxios(url, data) {
return new Promise((resolve, reject) => {
this.instance.post(url, data, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((res) => {
resolve(res.data)
})
.catch((err) => {
reject(err)
})
})
},
onSearch() {
this.getData()
this.getTableData()
},
// 获取表格数据
getTableData() {
this.tableLoading = true
const data = {
companyname: this.companyName,
name: this.formInline.name,
fenzu: this.formInline.fenzu,
page: this.page,
limit: this.limit
}
if (this.formInline.date) {
data.start_timestamp = this.formInline.date[0]
data.end_timestamp = this.formInline.date[1]
}
this.getAxios('api/company_tongji/table', data).then((res) => {
if (res.code === 200) {
this.tableList = res.data
this.total = res.count
} else {
this.$message.error(res.msg)
}
}).finally(() => {
this.tableLoading = false
})
},
// 每页多少条
handleSizeChange(val) {
this.limit = val
this.getTableData()
},
// 第几页
handleCurrentChange(val) {
this.page = val
this.getTableData()
},
// 获取数据
getData() {
const data = {
companyname: this.companyName,
name: this.formInline.name,
fenzu: this.formInline.fenzu
}
if (this.formInline.date) {
data.start_timestamp = this.formInline.date[0]
data.end_timestamp = this.formInline.date[1]
}
this.getAxios('api/company_tongji/get', data).then((res) => {
if (res.code === 0) {
if (res.res.zonghujiao === '') {
this.totalData.zonghujiao = null
} else {
this.totalData.zonghujiao = res.res.zonghujiao
this.totalData.zongyingdashu = res.res.zongyingdashu
this.totalData.zongjietonglv = res.res.zongjietonglv
}
this.myChart.hideLoading()
this.myChart1.hideLoading()
this.myChart.setOption({
xAxis: {
data: res.res.
html + vue + elementUI + axios + echarts
需积分: 5 151 浏览量
2024-04-08
14:35:15
上传
评论
收藏 584KB ZIP 举报
html+vue+axios+elementUI+echarts.zip （8个子文件） 
html+vue+axios+elementUI+echarts js 
vue2.7.16.js 126KB echarts.min.5.5.0.js 1.18MB axios.min.js 48KB elementUI element-icons.woff 28KB elementUI.2.8.2.js 594KB elementUI.2.8.2.css 267KB index.css 118B
index.html 13KB资源评论
