检测大屏更新
This commit is contained in:
许允枞
parent
aa42ceb0b8
commit
e16de18dd2
@ -1,10 +1,67 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 客户来源分析饼图
|
||||
export function chartLineInspectionAmount() {
|
||||
export function chartLineInspectionAmount(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/chartLineInspectionAmount',
|
||||
url: '/partnerOwn/partner/newChartLineInspectionAmount',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 已收款金额
|
||||
export function getServerData1(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newChartInfoAmount',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 数量统计
|
||||
export function chartInfoNum(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newChartInfoNum',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 数量统计
|
||||
export function chartLineInspectionNum(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newChartLineInspectionNum',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 检测合格率
|
||||
export function chartInfoRatio(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newChartInfoRatio',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 五条
|
||||
export function getfive1(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newStaticsTable1',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 五条
|
||||
export function getfive2(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newStaticsTable2',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 五条
|
||||
export function getfive3(params) {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newStaticsTable3',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -11,21 +11,35 @@
|
||||
成交金额（已收款）
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<!-- <div id="khly" style="width: 400px; height: 267px;"></div>-->
|
||||
<div id="khly" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
已收款金额统计分析
|
||||
已收款金额(按车型)
|
||||
</div>
|
||||
<div class="dis-t">
|
||||
|
||||
<div class="lan-you">
|
||||
<div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.unit)"> {{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="yskje" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
订单数量统计分析
|
||||
数量统计(按车型)
|
||||
</div>
|
||||
<div class="dis-t">
|
||||
|
||||
<div class="lan-you">
|
||||
<div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex1(index,item.unit)"> {{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="sltj" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,16 +144,24 @@
|
||||
<div class="c_right">
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
维修类型统计
|
||||
检测数量
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="jcsl" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
月工单金额走势
|
||||
检测合格率
|
||||
</div>
|
||||
<div class="dis-t">
|
||||
|
||||
<div class="lan-you">
|
||||
<div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex2(index,item.unit)"> {{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="jchgl" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six_box">
|
||||
@ -156,58 +178,236 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
|
||||
import {chartInfoNum, chartLineInspectionAmount} from "@/views/inspection/screen/api/jcBigScreen";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
Amount: [],
|
||||
unit: '',
|
||||
unit1: '',
|
||||
unit2: '',
|
||||
chartData1: {},
|
||||
params : {
|
||||
unit:this.unit,
|
||||
},
|
||||
qhindex:0,
|
||||
qhindex1:0,
|
||||
qhindex2:0,
|
||||
zilist:[
|
||||
{text:'日',unit:'day'},
|
||||
{text:'周',unit:'week'},
|
||||
{text:'月',unit:'month'},
|
||||
{text:'年',unit:'year'},
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.customerSource()
|
||||
this.getServerData1()
|
||||
this.chartInfoNum()
|
||||
this.chartLineInspectionNum()
|
||||
this.chartInfoRatio()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
gbindex(index,unit){
|
||||
this.qhindex = index
|
||||
this.unit = unit
|
||||
this.getServerData1()
|
||||
},
|
||||
gbindex1(index,unit){
|
||||
console.log('22',unit);
|
||||
this.qhindex1 = index
|
||||
this.unit1 = unit
|
||||
this.chartInfoNum()
|
||||
},
|
||||
gbindex2(index,unit){
|
||||
console.log('33');
|
||||
this.qhindex2 = index
|
||||
this.unit2 = unit
|
||||
this.chartInfoRatio()
|
||||
},
|
||||
|
||||
/**
|
||||
* 已收款金额
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async getServerData1() {
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
}
|
||||
let res = await jcBigScreen.getServerData1(params)
|
||||
console.log('已收款金额',res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
var chartDom = document.getElementById('yskje');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: res.data.series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 数量统计
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async chartInfoNum() {
|
||||
const params = {
|
||||
unit:this.unit1,
|
||||
}
|
||||
let res = await jcBigScreen.chartInfoNum(params)
|
||||
console.log('数量统计',res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
var chartDom = document.getElementById('sltj');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: res.data.series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 检测合格率
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async chartInfoRatio() {
|
||||
const params = {
|
||||
unit:this.unit2,
|
||||
}
|
||||
let res = await jcBigScreen.chartInfoRatio(params)
|
||||
console.log('检测合格率',res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
var chartDom = document.getElementById('jchgl');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: res.data.series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 检测数量
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async chartLineInspectionNum() {
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
}
|
||||
let res = await jcBigScreen.chartLineInspectionNum(params)
|
||||
console.log('检测数量',res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
const names = res.data.series.map(item => item.name)
|
||||
var chartDom = document.getElementById('jcsl');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
// option = {
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// data: res.data.categories
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value'
|
||||
// },
|
||||
// series: res.data.series
|
||||
// };
|
||||
option = {
|
||||
title: {
|
||||
text: '最近七天'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: names
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: res.data.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: res.data.series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
|
||||
/**
|
||||
* 客户来源分析饼图
|
||||
*/
|
||||
async customerSource() {
|
||||
const res = await RepairBigScreenApi.customerSource();
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
}
|
||||
const res = await jcBigScreen.chartLineInspectionAmount(params);
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'line'
|
||||
})
|
||||
var chartDom = document.getElementById('khly');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
toolbox: {
|
||||
show: true,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.categories
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '客户来源分析',
|
||||
type: 'pie',
|
||||
radius: [20, 100],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
data: res.data,
|
||||
}
|
||||
]
|
||||
series: res.data.series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -240,6 +440,17 @@ export default {
|
||||
//align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dis-t{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.lan-you{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c_left {
|
||||
width: 25%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user