维修
This commit is contained in:
xvv
parent
086fc02199
commit
56e545edf5
BIN
src/views/inspection/screen/imgs/bcke.png
Normal file
BIN
src/views/inspection/screen/imgs/bcke.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/views/inspection/screen/imgs/box.png
Normal file
BIN
src/views/inspection/screen/imgs/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/views/inspection/screen/imgs/c-title.png
Normal file
BIN
src/views/inspection/screen/imgs/c-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/views/inspection/screen/imgs/kuang.png
Normal file
BIN
src/views/inspection/screen/imgs/kuang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 20 KiB |
BIN
src/views/inspection/screen/imgs/top-bj.png
Normal file
BIN
src/views/inspection/screen/imgs/top-bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 133 KiB |
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cont">
|
<div class="cont">
|
||||||
<div class="top_">
|
<div class="top_">
|
||||||
<div>车辆检测数据大屏</div>
|
<!-- <div>车辆检测数据大屏</div>-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="content_">
|
<div class="content_">
|
||||||
@ -66,78 +67,38 @@
|
|||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="five_box">
|
<div class="five_box">
|
||||||
<div class="f_box">
|
<div class="three_box">
|
||||||
<div class="img_left">
|
<div class="three_title">订单数量</div>
|
||||||
<!-- <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
|
<div class="three_size">{{ data2.allNum || 0 }}</div>
|
||||||
订单数量
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="three_box">
|
||||||
<div class="f_size">{{ data2.allNum || 0 }}</div>
|
<div class="three_title">完成数量</div>
|
||||||
<!-- <div class="f_size">2</div>-->
|
<div class="three_size">{{ data2.ywcNum || 0 }}</div>
|
||||||
<!-- <div class="f_num">{{ statusTickets[3].value }}</div>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="three_box">
|
||||||
|
<div class="three_title">检测中</div>
|
||||||
|
<div class="three_size">{{ data2.jxzNum || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="f_box">
|
|
||||||
<div class="img_left">
|
|
||||||
<!-- <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
|
|
||||||
完成数量
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="fv_box">
|
||||||
<div class="f_size">{{ data2.ywcNum || 0 }}</div>
|
<div class="b-b">
|
||||||
<!-- <div class="f_num">{{ statusTickets[4].value }}</div>-->
|
<div>公示价格</div>
|
||||||
|
<div class="b_box">4090</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="b-b">
|
||||||
|
<div>应收</div>
|
||||||
|
<div class="b_box">4090</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="f_box">
|
<div class="b-b">
|
||||||
<div class="img_left">
|
<div>已收</div>
|
||||||
<!-- <img src="./imgs/3.png" style="width: 60px;height: 60px">-->
|
<div class="b_box">4090</div>
|
||||||
检测中数量
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="f_size">{{ data2.jxzNum || 0 }}</div>
|
|
||||||
<!-- <div class="f_num">{{ statusTickets[0].value }}</div>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="five_box">
|
|
||||||
<div class="f_box">
|
|
||||||
<div class="img_left">
|
|
||||||
<!-- <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
|
|
||||||
公示价格
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<!-- <div class="f_size">1</div>-->
|
|
||||||
<div class="f_size">{{ data1.gsAmount || 0 }}</div>
|
|
||||||
<!-- <div class="f_num">{{ statusTickets[3].value }}</div>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="f_box">
|
|
||||||
<div class="img_left">
|
|
||||||
<!-- <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
|
|
||||||
应收款
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="f_size">{{ data1.ysAmount || 0 }}</div>
|
|
||||||
<!-- <div class="f_num">{{ statusTickets[4].value }}</div>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="f_box">
|
|
||||||
<div class="img_left">
|
|
||||||
已收款
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="f_size">{{ data1.yjsAmount || 0 }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="f_box">
|
|
||||||
<div class="img_left">
|
|
||||||
<!-- <img src="./imgs/4.png" style="width: 60px;height: 60px">-->
|
|
||||||
待收款
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="f_size">{{ data1.ysAmount - data1.yjsAmount || 0 }}</div>
|
|
||||||
<!-- <div class="f_num">{{ statusTickets[1].value }}</div>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="b-b">
|
||||||
|
<div>待收</div>
|
||||||
|
<div class="b_box">4090</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="co_title">
|
<div class="co_title">
|
||||||
客户来源统计
|
客户来源统计
|
||||||
@ -179,16 +140,69 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="echaets_box">
|
<div class="echaets_box" style="padding-top: 15px" >
|
||||||
<div id="jchgl" style="width: 400px; height: 267px;"></div>
|
<!-- 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>
|
</div>
|
||||||
<div class="six_box">
|
<div class="six_box">
|
||||||
<div class="s_title">
|
<div class="s_title">
|
||||||
检测商品统计
|
检测商品统计
|
||||||
</div>
|
</div>
|
||||||
<div class="echaets_box">
|
<div class="echaets_box" style="display: flex;align-items: center;justify-content: space-around">
|
||||||
<div id="jcsptj" style="width: 400px; height: 267px;"></div>
|
<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>
|
</div>
|
||||||
@ -217,6 +231,7 @@ export default {
|
|||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
Amount: [],
|
Amount: [],
|
||||||
|
Progress1:60,
|
||||||
unit: 'day',
|
unit: 'day',
|
||||||
unit1: 'day',
|
unit1: 'day',
|
||||||
unit2: 'day',
|
unit2: 'day',
|
||||||
@ -242,6 +257,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
this.customerSource()
|
this.customerSource()
|
||||||
this.getServerData1()
|
this.getServerData1()
|
||||||
this.chartInfoNum()
|
this.chartInfoNum()
|
||||||
@ -251,10 +270,6 @@ export default {
|
|||||||
this.getfive1()
|
this.getfive1()
|
||||||
this.getfive3()
|
this.getfive3()
|
||||||
this.getProduct()
|
this.getProduct()
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleChange() {
|
handleChange() {
|
||||||
@ -285,27 +300,113 @@ export default {
|
|||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
async getServerData1() {
|
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 chartDom = document.getElementById('yskje');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
|
||||||
option = {
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.data.categories
|
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: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //更改坐标轴文字颜色
|
||||||
|
fontSize: 16, //更改坐标轴文字大小
|
||||||
|
fontFamily: 'MicrosoftYaHei'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: res.data.series
|
//更改坐标轴颜色
|
||||||
};
|
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);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@ -313,75 +414,169 @@ export default {
|
|||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
async getProduct() {
|
async getProduct() {
|
||||||
let res = await jcBigScreen.hotGoodsList()
|
|
||||||
console.log('检测商品统计', res)
|
|
||||||
res.data.forEach(item => {
|
|
||||||
item.name = item.goodsName
|
|
||||||
item.value = item.salesNum
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
var chartDom = document.getElementById('jcsptj');
|
var chartDom = document.getElementById('jcsptj');
|
||||||
|
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
|
|
||||||
option = {
|
option = {
|
||||||
|
color: ['#0174F6', '#40CC97', '#FFB323'],
|
||||||
title: {
|
title: {
|
||||||
// text: 'Referer of a Website',
|
text: '33%',
|
||||||
// subtext: 'Fake Data',
|
left: 'center',
|
||||||
left: 'center'
|
top: '40%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 30,
|
||||||
|
color: '#017fff',
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: 'left'
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// name: 'Access From',
|
name: '',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: '50%',
|
radius: ['60%', '70%'],
|
||||||
data: res.data,
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
itemStyle: {
|
label: {
|
||||||
shadowBlur: 10,
|
show: false,
|
||||||
shadowOffsetX: 0,
|
fontSize: 40,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
fontWeight: 'bold'
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '单燃料机油' },
|
||||||
|
{ value: 735, name: '双燃料机油' },
|
||||||
|
{ value: 580, name: '三燃料机油' }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
option && myChart.setOption(option);
|
|
||||||
}, 2000)
|
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 数量统计
|
* 数量统计
|
||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
async chartInfoNum() {
|
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 chartDom = document.getElementById('sltj');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
|
||||||
option = {
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.data.categories
|
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: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //更改坐标轴文字颜色
|
||||||
|
fontSize: 16, //更改坐标轴文字大小
|
||||||
|
fontFamily: 'MicrosoftYaHei'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: res.data.series
|
//更改坐标轴颜色
|
||||||
};
|
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);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@ -406,7 +601,15 @@ export default {
|
|||||||
data: res.data.categories
|
data: res.data.categories
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //更改坐标轴文字颜色
|
||||||
|
fontSize: 16, //更改坐标轴文字大小
|
||||||
|
fontFamily: 'MicrosoftYaHei'
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: res.data.series
|
series: res.data.series
|
||||||
};
|
};
|
||||||
@ -417,49 +620,76 @@ export default {
|
|||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
async chartLineInspectionNum() {
|
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 chartDom = document.getElementById('jcsl');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
|
|
||||||
option = {
|
option = {
|
||||||
title: {
|
color: ['#0663f0', '#FFD78B'],
|
||||||
text: '最近七天'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
data: names
|
top: '5%',
|
||||||
},
|
left: 'center'
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
saveAsImage: {}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: res.data.categories
|
data: ['01', '02', '03', '04', '05', '06', '07'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
onZero:false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //更改坐标轴文字颜色
|
||||||
|
fontSize: 12, //更改坐标轴文字大小
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: res.data.series
|
},
|
||||||
|
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);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -467,47 +697,61 @@ export default {
|
|||||||
* 客户来源分析饼图
|
* 客户来源分析饼图
|
||||||
*/
|
*/
|
||||||
async customerSource() {
|
async customerSource() {
|
||||||
const params = {
|
|
||||||
unit: this.unit,
|
|
||||||
}
|
|
||||||
const res = await jcBigScreen.chartLineInspectionAmount(params);
|
|
||||||
res.data.series.forEach(item => {
|
|
||||||
// console.log( '475'+ JSON.stringify(res.data.series[0].data))
|
|
||||||
item.type = 'line'
|
|
||||||
})
|
|
||||||
var chartDom = document.getElementById('khly');
|
var chartDom = document.getElementById('khly');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
|
|
||||||
const color = ['#31daf0', '#3367e6', '#d9458d', ];
|
|
||||||
option = {
|
option = {
|
||||||
legend: {
|
tooltip: {
|
||||||
top: 'bottom'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
toolbox: {
|
xAxis: {
|
||||||
show: true,
|
type: 'category',
|
||||||
feature: {
|
data: ['01', '02', '03', '04', '05', '06', '07'],
|
||||||
mark: { show: true },
|
axisLine: {
|
||||||
dataView: { show: true, readOnly: false },
|
lineStyle: {
|
||||||
restore: { show: traue },
|
color: '#fff'
|
||||||
saveAsImage: { show: true }
|
},
|
||||||
|
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: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Nightingale Chart',
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
type: 'pie',
|
type: 'line',
|
||||||
radius: [20, 50],
|
|
||||||
center: ['50%', '50%'],
|
symbolSize: 10,
|
||||||
roseType: 'area',
|
lineStyle: {
|
||||||
itemStyle: {
|
color: '#009EDA',
|
||||||
borderRadius: 8
|
width: 2
|
||||||
},
|
},
|
||||||
data: [
|
itemStyle: {
|
||||||
{ value: 40, name: 'rose 1' },
|
borderWidth: 3,
|
||||||
{ value: 38, name: 'rose 2' },
|
borderColor: '#009EDA',
|
||||||
{ value: 32, name: 'rose 3' }
|
color: '#009EDA'
|
||||||
]
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -557,7 +801,7 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cont {
|
.cont {
|
||||||
background: #020F32;
|
background: #020F32;
|
||||||
//background: url("./imgs/back.png") no-repeat;
|
background: url("./imgs/bcke.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@ -627,9 +871,9 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 4px solid #0174F6;
|
//border-bottom: 4px solid #0174F6;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab_buttom {
|
.tab_buttom {
|
||||||
@ -684,6 +928,35 @@ yb_title {
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin: 30px auto;
|
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 {
|
.f_size {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -710,13 +983,30 @@ yb_title {
|
|||||||
.co_title {
|
.co_title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: url("./imgs/c_title.png") no-repeat;
|
background: url("./imgs/c-title.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 40px;
|
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 {
|
.s_title {
|
||||||
@ -725,10 +1015,11 @@ yb_title {
|
|||||||
background: url("./imgs/title.png") no-repeat;
|
background: url("./imgs/title.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 40px;
|
padding-left: 10px;
|
||||||
|
padding-top: 5px;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -737,6 +1028,7 @@ yb_title {
|
|||||||
height: 267px;
|
height: 267px;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
border-bottom: 1px solid #0174F6;
|
border-bottom: 1px solid #0174F6;
|
||||||
|
background: rgba(82,125,243,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list_long {
|
.list_long {
|
||||||
@ -817,5 +1109,49 @@ yb_title {
|
|||||||
.c_right {
|
.c_right {
|
||||||
width: 25%;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user