1158 lines
27 KiB
Vue
1158 lines
27 KiB
Vue
<template>
|
||
<div class="cont">
|
||
<div class="top_">
|
||
<!-- <div>车辆检测数据大屏</div>-->
|
||
|
||
</div>
|
||
<!-- -->
|
||
<div class="content_">
|
||
<div class="c_left">
|
||
<div class="six_box">
|
||
<div class="s_title">
|
||
成交金额（已收款）
|
||
</div>
|
||
<div class="echaets_box">
|
||
<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>
|
||
<div class="c_cont">
|
||
<div class="tab_">
|
||
<!-- <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>-->
|
||
<!-- <div @click="countOrAmount()" class="tab_buttom">金额</div>-->
|
||
</div>
|
||
|
||
|
||
<div class="tab_bt">
|
||
<el-date-picker
|
||
v-model="value1"
|
||
type="daterange"
|
||
@change="handleChange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="five_box">
|
||
<div class="three_box">
|
||
<div class="three_title">订单数量</div>
|
||
<div class="three_size">{{ data2.allNum || 0 }}</div>
|
||
</div>
|
||
<div class="three_box">
|
||
<div class="three_title">完成数量</div>
|
||
<div class="three_size">{{ data2.ywcNum || 0 }}</div>
|
||
</div>
|
||
<div class="three_box">
|
||
<div class="three_title">检测中</div>
|
||
<div class="three_size">{{ data2.jxzNum || 0 }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="fv_box">
|
||
<div class="b-b">
|
||
<div>公示价格</div>
|
||
<div class="b_box">4090</div>
|
||
</div>
|
||
<div class="b-b">
|
||
<div>应收</div>
|
||
<div class="b_box">4090</div>
|
||
</div>
|
||
<div class="b-b">
|
||
<div>已收</div>
|
||
<div class="b_box">4090</div>
|
||
</div>
|
||
<div class="b-b">
|
||
<div>待收</div>
|
||
<div class="b_box">4090</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="co_title">
|
||
客户来源统计
|
||
</div>
|
||
<div class="list_long">
|
||
<div class="long_title">
|
||
<div class="l_one">客户来源</div>
|
||
<div class="l_two">数量</div>
|
||
<div class="l_three">公示金额</div>
|
||
<!-- <div class="l_four">创建时间</div>-->
|
||
</div>
|
||
<div class="ot_vox">
|
||
<div class="long_box" v-for="(item,index) in data3" :key="index">
|
||
<div class="l_one">{{ item.remark || '' }}</div>
|
||
<div class="l_two">{{ item.theNum || '' }}</div>
|
||
<div class="l_three">{{ item.theAmount || '' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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" style="padding-top: 15px" >
|
||
<!-- gdt-->
|
||
<div class="jd_box">
|
||
<div class="jd_bt">
|
||
<div>重型货车</div>
|
||
<div>{{Progress1}}%</div>
|
||
</div>
|
||
<div class="jd_k">
|
||
<div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
|
||
</div>
|
||
</div>
|
||
<div class="jd_box">
|
||
<div class="jd_bt">
|
||
<div>3.5以上 轻型货车</div>
|
||
<div>{{Progress1}}%</div>
|
||
</div>
|
||
<div class="jd_k">
|
||
<div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
|
||
</div>
|
||
</div>
|
||
<div class="jd_box">
|
||
<div class="jd_bt">
|
||
<div>3.5以下 轻型货车</div>
|
||
<div>{{Progress1}}%</div>
|
||
</div>
|
||
<div class="jd_k">
|
||
<div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="six_box">
|
||
<div class="s_title">
|
||
检测商品统计
|
||
</div>
|
||
<div class="echaets_box" style="display: flex;align-items: center;justify-content: space-around">
|
||
<div id="jcsptj" style="width: 170px; height: 170px;"></div>
|
||
<div>
|
||
<div class="hang_box">
|
||
<div>
|
||
<div class="jt_"></div>
|
||
<div class="jt_size" style="color: #0174F6">双燃料机油</div>
|
||
</div>
|
||
<div>278</div>
|
||
</div>
|
||
<div class="hang_box" >
|
||
<div>
|
||
<div class="jt_" style="background: #40CC97"></div>
|
||
<div class="jt_size" style="color: #40CC97">双燃料机油</div>
|
||
</div>
|
||
|
||
<div>278</div>
|
||
</div>
|
||
<div class="hang_box">
|
||
<div>
|
||
<div class="jt_" style="background: #FFB323"></div>
|
||
<div class="jt_size" style="color: #FFB323">双燃料机油</div>
|
||
</div>
|
||
<div>278</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
|
||
import {
|
||
chartInfoNum,
|
||
chartLineInspectionAmount,
|
||
getfive1,
|
||
getfive2,
|
||
getfive3, hotGoodsList
|
||
} from "@/views/inspection/screen/api/jcBigScreen";
|
||
|
||
export default {
|
||
name: 'Index',
|
||
components: {},
|
||
data() {
|
||
const formatDate = (date) => {
|
||
return date.toISOString().split('T')[0];
|
||
};
|
||
return {
|
||
Amount: [],
|
||
Progress1:60,
|
||
unit: 'day',
|
||
unit1: 'day',
|
||
unit2: 'day',
|
||
data2: '',
|
||
data1: '',
|
||
data3: '',
|
||
chartData1: {},
|
||
params: {
|
||
unit: this.unit,
|
||
},
|
||
// value1: [new Date(), new Date()],
|
||
value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
|
||
qhindex: 0,
|
||
qhindex1: 0,
|
||
qhindex2: 0,
|
||
zilist: [
|
||
{text: '日', unit: 'day'},
|
||
{text: '周', unit: 'week'},
|
||
{text: '月', unit: 'month'},
|
||
{text: '年', unit: 'year'},
|
||
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
|
||
|
||
},
|
||
mounted() {
|
||
this.customerSource()
|
||
this.getServerData1()
|
||
this.chartInfoNum()
|
||
this.chartLineInspectionNum()
|
||
this.chartInfoRatio()
|
||
this.getfive2()
|
||
this.getfive1()
|
||
this.getfive3()
|
||
this.getProduct()
|
||
},
|
||
methods: {
|
||
handleChange() {
|
||
console.log('选择的时间', this.value1)
|
||
this.getfive2()
|
||
this.getfive1()
|
||
},
|
||
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() {
|
||
|
||
var chartDom = document.getElementById('yskje');
|
||
var myChart = echarts.init(chartDom);
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['小型汽车', '中型汽车', '大型汽车'],
|
||
//更改坐标轴颜色
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
onZero:false
|
||
},
|
||
// x轴的字体样式
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 14, //更改坐标轴文字大小
|
||
fontFamily: 'MicrosoftYaHei'
|
||
},
|
||
formatter:function(params) {
|
||
return params.split(" ").join("\n")
|
||
// console.log(' formatter',params);
|
||
},
|
||
},
|
||
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 16, //更改坐标轴文字大小
|
||
fontFamily: 'MicrosoftYaHei'
|
||
}
|
||
},
|
||
//更改坐标轴颜色
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#657CA8'
|
||
}
|
||
},
|
||
//网格线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#294a88',
|
||
width: 2,
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
series: [{
|
||
data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
|
||
type: 'bar',
|
||
barWidth:40,
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
// build a color map as your need.
|
||
var colorList = [
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#4DA9FF' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#1D92FF' // 100% 处的颜色
|
||
}], false),
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#FF5C00' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#FF9F0A' // 100% 处的颜色
|
||
}], false),
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#D7FF39' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#32D74B' // 100% 处的颜色
|
||
}], false)
|
||
];
|
||
return colorList[params.dataIndex]
|
||
},
|
||
//以下为是否显示，显示位置和显示格式的设置了
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}',
|
||
fontSize: 20,
|
||
color:'#B8CBF7'
|
||
}
|
||
}
|
||
},
|
||
}]
|
||
}
|
||
// 绘制图表
|
||
option && myChart.setOption(option);
|
||
},
|
||
/**
|
||
* 检测商品统计
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getProduct() {
|
||
var chartDom = document.getElementById('jcsptj');
|
||
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
color: ['#0174F6', '#40CC97', '#FFB323'],
|
||
title: {
|
||
text: '33%',
|
||
left: 'center',
|
||
top: '40%',
|
||
textStyle: {
|
||
fontSize: 30,
|
||
color: '#017fff',
|
||
align: 'center'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['60%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: 40,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 1048, name: '单燃料机油' },
|
||
{ value: 735, name: '双燃料机油' },
|
||
{ value: 580, name: '三燃料机油' }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
/**
|
||
* 数量统计
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async chartInfoNum() {
|
||
var chartDom = document.getElementById('sltj');
|
||
var myChart = echarts.init(chartDom);
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['小型汽车', '中型汽车', '大型汽车'],
|
||
//更改坐标轴颜色
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
onZero:false
|
||
},
|
||
// x轴的字体样式
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 14, //更改坐标轴文字大小
|
||
fontFamily: 'MicrosoftYaHei'
|
||
},
|
||
formatter:function(params) {
|
||
return params.split(" ").join("\n")
|
||
// console.log(' formatter',params);
|
||
},
|
||
},
|
||
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 16, //更改坐标轴文字大小
|
||
fontFamily: 'MicrosoftYaHei'
|
||
}
|
||
},
|
||
//更改坐标轴颜色
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#657CA8'
|
||
}
|
||
},
|
||
//网格线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#294a88',
|
||
width: 2,
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
series: [{
|
||
data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
|
||
type: 'bar',
|
||
barWidth:40,
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
// build a color map as your need.
|
||
var colorList = [
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#4DA9FF' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#1D92FF' // 100% 处的颜色
|
||
}], false),
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#FF5C00' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#FF9F0A' // 100% 处的颜色
|
||
}], false),
|
||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#D7FF39' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#32D74B' // 100% 处的颜色
|
||
}], false)
|
||
];
|
||
return colorList[params.dataIndex]
|
||
},
|
||
//以下为是否显示，显示位置和显示格式的设置了
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}',
|
||
fontSize: 20,
|
||
color:'#B8CBF7'
|
||
}
|
||
}
|
||
},
|
||
}]
|
||
}
|
||
// 绘制图表
|
||
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',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 16, //更改坐标轴文字大小
|
||
fontFamily: 'MicrosoftYaHei'
|
||
}
|
||
},
|
||
},
|
||
series: res.data.series
|
||
};
|
||
option && myChart.setOption(option);
|
||
},
|
||
/**
|
||
* 检测数量
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async chartLineInspectionNum() {
|
||
var chartDom = document.getElementById('jcsl');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
color: ['#0663f0', '#FFD78B'],
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['01', '02', '03', '04', '05', '06', '07'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
onZero:false
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff', //更改坐标轴文字颜色
|
||
fontSize: 12, //更改坐标轴文字大小
|
||
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
type: 'line',
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: '#0663f0' },
|
||
{ offset: 0, color: '#0663f0' }
|
||
])
|
||
}
|
||
},
|
||
{
|
||
data: [220, 182, 191, 234, 290, 330, 310],
|
||
type: 'line',
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: '#FFD78B' },
|
||
{ offset: 0, color: '#FFD78B' }
|
||
])
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
|
||
/**
|
||
* 客户来源分析饼图
|
||
*/
|
||
async customerSource() {
|
||
var chartDom = document.getElementById('khly');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['01', '02', '03', '04', '05', '06', '07'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
onZero:false
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
lineStyle: {
|
||
color: '#fff'
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'line',
|
||
|
||
symbolSize: 10,
|
||
lineStyle: {
|
||
color: '#009EDA',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 3,
|
||
borderColor: '#009EDA',
|
||
color: '#009EDA'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
/**
|
||
* 订单数量
|
||
*/
|
||
async getfive2() {
|
||
let data2 = {
|
||
startTime: this.value1[0],
|
||
endTime: this.value1[1]
|
||
}
|
||
console.log('订单数量等参数', data2)
|
||
const res = await getfive2(data2)
|
||
console.log('订单数量等', res.data)
|
||
this.data2 = res.data
|
||
},
|
||
/**
|
||
* 营业额统计
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getfive1() {
|
||
let data1 = {
|
||
startTime: this.value1[0],
|
||
endTime: this.value1[1]
|
||
}
|
||
const res = await getfive1(data1)
|
||
console.log('营业额统计', res.data)
|
||
this.data1 = res.data
|
||
},
|
||
/**
|
||
* 客户来源
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getfive3() {
|
||
const res = await getfive3()
|
||
console.log('客户来源', res.data)
|
||
this.data3 = res.data
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cont {
|
||
background: #020F32;
|
||
background: url("./imgs/bcke.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
.top_ {
|
||
width: 100%;
|
||
height: 86px;
|
||
background: url("./imgs/top.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 50px;
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.content_ {
|
||
width: 100%;
|
||
display: flex;
|
||
//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%;
|
||
}
|
||
|
||
.c_cont {
|
||
width: 50%;
|
||
}
|
||
|
||
.tab_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.yb_title {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.tab_bt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
//border-bottom: 4px solid #0174F6;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
|
||
.tab_buttom {
|
||
width: 120px;
|
||
height: 32px;
|
||
|
||
border: 1px solid #0174F6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
yb_title {
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.numlist {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.num_box {
|
||
width: 38px;
|
||
height: 50px;
|
||
border-radius: 0px 0px 0px 0px;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("./imgs/numbcak.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #FFFFFF;
|
||
margin: 0px 10px;
|
||
}
|
||
|
||
.yb_ {
|
||
width: 50%;
|
||
}
|
||
|
||
.tab_acvit {
|
||
background: #0174F6 !important;
|
||
}
|
||
|
||
.five_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin: 30px auto;
|
||
}
|
||
.fv_box{
|
||
width: 100%;
|
||
height: 142px;
|
||
background: url("./imgs/top-bj.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 20px;
|
||
align-items: center;
|
||
}
|
||
.three_box{
|
||
width: 190px;
|
||
height: 80px;
|
||
background: url("./imgs/kuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding-top: 15px;
|
||
}
|
||
.three_title{
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
.three_size{
|
||
font-weight: 500;
|
||
font-size: 30px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.f_size {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.f_num {
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.img_left {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.f_box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.co_title {
|
||
width: 100%;
|
||
height: 32px;
|
||
background: url("./imgs/c-title.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
padding-top: 5px;
|
||
}
|
||
.b-b{
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
.b_box{
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 30px;
|
||
color: #FFFFFF;
|
||
width: 105px;
|
||
height: 80px;
|
||
background: url("./imgs/box.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.s_title {
|
||
width: 90%;
|
||
height: 32px;
|
||
background: url("./imgs/title.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
padding-top: 5px;
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.echaets_box {
|
||
width: 90%;
|
||
height: 267px;
|
||
margin: 0px auto;
|
||
border-bottom: 1px solid #0174F6;
|
||
background: rgba(82,125,243,0.1);
|
||
}
|
||
|
||
.list_long {
|
||
width: 100%;
|
||
height: 563px;
|
||
|
||
}
|
||
|
||
.l_one {
|
||
width: 30%;
|
||
text-align: left;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding-left: 35px;
|
||
}
|
||
|
||
.l_two {
|
||
width: 20%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.l_three {
|
||
width: 20%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.l_four {
|
||
width: 30%;
|
||
text-align: right;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding-right: 35px;
|
||
}
|
||
|
||
.long_title {
|
||
width: 100%;
|
||
height: 58px;
|
||
background: rgba(1, 116, 246, 0.1);
|
||
background: url("./imgs/c_list.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.ot_vox {
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.long_box {
|
||
width: 100%;
|
||
height: 58px;
|
||
background: rgba(1, 116, 246, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.six_box {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.c_right {
|
||
width: 25%;
|
||
}
|
||
.jd_k{
|
||
height: 20px;
|
||
width: 100%;
|
||
background: rgba(1,116,246,0.3);
|
||
border: 1px solid rgba(1,116,246,0.3);
|
||
box-shadow: inset 0px 1px 3px 0px rgba(116,129,163,0.5);
|
||
}
|
||
.jd_v{
|
||
width: 70%;
|
||
height: 100%;
|
||
background: linear-gradient( 90deg, rgba(77,241,227,0) 0%, rgba(77,241,227,0.5) 50%, #4DF1E3 100%);
|
||
border-right: 4px solid #fff;
|
||
}
|
||
.jd_bt{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
margin-bottom: 5px;
|
||
}
|
||
.jd_box{
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
margin: 10px auto;
|
||
}
|
||
.hang_box{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
margin: 15px auto;
|
||
}
|
||
.jt_{
|
||
width: 100px;
|
||
height: 2px;
|
||
border-radius: 2px 2px 2px 2px;
|
||
background: #0174F6;
|
||
}
|
||
.jt_size{
|
||
font-size: 14px;
|
||
}
|
||
</style>
|