Merge branch 'dev' of http://122.51.230.86:3000/dianliang/lanan-system-vue into dev
This commit is contained in:
commit
558d633998
@ -52,3 +52,12 @@ export function confirmBack(id){
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 采购入库
|
||||
export function inWare(data){
|
||||
return request({
|
||||
url: preUrl + "/inWare",
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
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>
|
||||
<div class="cont">
|
||||
<div class="top_">
|
||||
<div>车辆检测数据大屏</div>
|
||||
<!-- <div>车辆检测数据大屏</div>-->
|
||||
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="content_">
|
||||
@ -66,78 +67,38 @@
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="five_box">
|
||||
<div class="f_box">
|
||||
<div class="img_left">
|
||||
<!-- <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
|
||||
订单数量
|
||||
<div class="three_box">
|
||||
<div class="three_title">订单数量</div>
|
||||
<div class="three_size">{{ data2.allNum || 0 }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="f_size">{{ data2.allNum || 0 }}</div>
|
||||
<!-- <div class="f_size">2</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[3].value }}</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 class="f_box">
|
||||
<div class="img_left">
|
||||
<!-- <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
|
||||
完成数量
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="f_size">{{ data2.ywcNum || 0 }}</div>
|
||||
<!-- <div class="f_num">{{ statusTickets[4].value }}</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="f_box">
|
||||
<div class="img_left">
|
||||
<!-- <img src="./imgs/3.png" style="width: 60px;height: 60px">-->
|
||||
检测中数量
|
||||
</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 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">
|
||||
客户来源统计
|
||||
@ -179,16 +140,69 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="jchgl" style="width: 400px; height: 267px;"></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">
|
||||
<div id="jcsptj" style="width: 400px; height: 267px;"></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>
|
||||
@ -217,6 +231,7 @@ export default {
|
||||
};
|
||||
return {
|
||||
Amount: [],
|
||||
Progress1:60,
|
||||
unit: 'day',
|
||||
unit1: 'day',
|
||||
unit2: 'day',
|
||||
@ -242,6 +257,10 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.customerSource()
|
||||
this.getServerData1()
|
||||
this.chartInfoNum()
|
||||
@ -251,10 +270,6 @@ export default {
|
||||
this.getfive1()
|
||||
this.getfive3()
|
||||
this.getProduct()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
@ -285,27 +300,113 @@ export default {
|
||||
* @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 = {
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
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: {
|
||||
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);
|
||||
},
|
||||
/**
|
||||
@ -313,75 +414,169 @@ export default {
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
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 myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
color: ['#0174F6', '#40CC97', '#FFB323'],
|
||||
title: {
|
||||
// text: 'Referer of a Website',
|
||||
// subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
text: '33%',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: {
|
||||
fontSize: 30,
|
||||
color: '#017fff',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
radius: ['60%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 40,
|
||||
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>}
|
||||
*/
|
||||
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 = {
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
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: {
|
||||
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);
|
||||
},
|
||||
/**
|
||||
@ -406,7 +601,15 @@ export default {
|
||||
data: res.data.categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#fff', //更改坐标轴文字颜色
|
||||
fontSize: 16, //更改坐标轴文字大小
|
||||
fontFamily: 'MicrosoftYaHei'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.data.series
|
||||
};
|
||||
@ -417,49 +620,76 @@ export default {
|
||||
* @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 = {
|
||||
title: {
|
||||
text: '最近七天'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color: ['#0663f0', '#FFD78B'],
|
||||
legend: {
|
||||
data: names
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
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: {
|
||||
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);
|
||||
},
|
||||
|
||||
@ -467,47 +697,61 @@ export default {
|
||||
* 客户来源分析饼图
|
||||
*/
|
||||
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 myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
const color = ['#31daf0', '#3367e6', '#d9458d', ];
|
||||
option = {
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: traue },
|
||||
saveAsImage: { show: true }
|
||||
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: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [20, 50],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'line',
|
||||
|
||||
symbolSize: 10,
|
||||
lineStyle: {
|
||||
color: '#009EDA',
|
||||
width: 2
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: 'rose 1' },
|
||||
{ value: 38, name: 'rose 2' },
|
||||
{ value: 32, name: 'rose 3' }
|
||||
]
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#009EDA',
|
||||
color: '#009EDA'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -557,7 +801,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.cont {
|
||||
background: #020F32;
|
||||
//background: url("./imgs/back.png") no-repeat;
|
||||
background: url("./imgs/bcke.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
@ -627,9 +871,9 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid #0174F6;
|
||||
//border-bottom: 4px solid #0174F6;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.tab_buttom {
|
||||
@ -684,6 +928,35 @@ yb_title {
|
||||
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;
|
||||
@ -710,13 +983,30 @@ yb_title {
|
||||
.co_title {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: url("./imgs/c_title.png") no-repeat;
|
||||
background: url("./imgs/c-title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
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 {
|
||||
@ -725,10 +1015,11 @@ yb_title {
|
||||
background: url("./imgs/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding-left: 40px;
|
||||
padding-left: 10px;
|
||||
padding-top: 5px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
@ -737,6 +1028,7 @@ yb_title {
|
||||
height: 267px;
|
||||
margin: 0px auto;
|
||||
border-bottom: 1px solid #0174F6;
|
||||
background: rgba(82,125,243,0.1);
|
||||
}
|
||||
|
||||
.list_long {
|
||||
@ -817,5 +1109,49 @@ yb_title {
|
||||
.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>
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<script>
|
||||
|
||||
import {getStaffList} from "@/api/company/staff";
|
||||
import {getUserProfile} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "StaffChoose",
|
||||
@ -19,6 +20,9 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
roleCode:{
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -47,14 +51,23 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.listStaff()
|
||||
this.getNow()
|
||||
},
|
||||
methods: {
|
||||
async listStaff() {
|
||||
this.selectLoading = true
|
||||
try {
|
||||
if (!this.isGet) return;
|
||||
if (this.roleCode){
|
||||
// todo 暂时先把流程跑通了来
|
||||
}else {
|
||||
const res = await getStaffList(this.query)
|
||||
this.staffList = res.data
|
||||
if (this.query){
|
||||
this.staffSelected = this.staffList.filter(item => item.tel === this.query)[0].id
|
||||
this.query = null
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.selectLoading = false
|
||||
}
|
||||
@ -62,6 +75,11 @@ export default {
|
||||
changeQuery(val) {
|
||||
this.query = val
|
||||
this.listStaff()
|
||||
},
|
||||
async getNow(){
|
||||
// 获取当前登录用户
|
||||
const res = await getUserProfile()
|
||||
this.changeQuery(res.data.mobile)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,9 +108,9 @@
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
|
||||
>查看
|
||||
</el-button>
|
||||
<!-- <el-button size="mini" type="text" icon="el-icon-edit-outline"-->
|
||||
<!-- >修改-->
|
||||
<!-- </el-button>-->
|
||||
<el-button @click="handleInWares(scope.row)" v-if="scope.row.soStatus === '02'" size="mini" type="text" icon="el-icon-edit-outline"
|
||||
>入库
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-close" @click="handleVoidSo(scope.row)"
|
||||
>作废
|
||||
</el-button>
|
||||
@ -123,6 +123,33 @@
|
||||
/>
|
||||
|
||||
<SoShow :so-by-type="soByType" :is-back="isBack" ref="soShow" />
|
||||
|
||||
<el-dialog title="入库" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
|
||||
<el-table v-loading="inLoading" :data="inItems" :stripe="true" :show-overflow-tooltip="true"
|
||||
@selection-change="selectRow"
|
||||
@cell-mouse-enter="handleCellEnter"
|
||||
@cell-mouse-leave="handleCellLeave"
|
||||
@cell-click="handleCellClick"
|
||||
:key="tableKey"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="商品名称" align="center" prop="repairWares.name" />
|
||||
<el-table-column label="商品编码" align="center" prop="repairWares.code" width="180" />
|
||||
<el-table-column label="条形码" align="center" prop="repairWares.barCode" width="180" />
|
||||
<el-table-column label="规格" align="center" prop="repairWares.model" width="180" />
|
||||
<el-table-column label="采购数量" align="center" prop="goodsCount" width="150" />
|
||||
<el-table-column label="入库数量" align="center" prop="inCount" width="150">
|
||||
<div class="item" slot-scope="scope">
|
||||
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.inCount"/>
|
||||
<span class="item__txt">{{ scope.row.inCount }}</span>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" :disabled="selectRows.length === 0" @click="doInWares">确定</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -132,8 +159,10 @@ import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
|
||||
import CorpChoose from "@/views/repair/Components/CorpChoose.vue";
|
||||
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
|
||||
import {DICT_TYPE} from "@/utils/dict";
|
||||
import {getRepairSoPage, voidSo, getRepairSoById} from "@/api/repair/stockOperate/stockOperate";
|
||||
import {getRepairSoPage, voidSo, getRepairSoById, inWare} from "@/api/repair/stockOperate/stockOperate";
|
||||
import SoShow from "@/views/repair/stockOperate/Components/SoSow.vue";
|
||||
import {getRepairSoiByIds} from "@/api/repair/stockOperate/stockOperateItem";
|
||||
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
|
||||
|
||||
export default {
|
||||
name: "SoIndex",
|
||||
@ -203,7 +232,19 @@ export default {
|
||||
showSearch: true,
|
||||
list: [],
|
||||
loading: false,
|
||||
total: 0
|
||||
total: 0,
|
||||
dialogVisible: false,
|
||||
inItems: [],
|
||||
inLoading: false,
|
||||
selectRows: [],
|
||||
inWaresFormData:{
|
||||
id: null,
|
||||
soiList: [],
|
||||
soNo: null
|
||||
},
|
||||
editProp: ['inCount'],
|
||||
clickCellMap: {},
|
||||
tableKey: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -283,11 +324,136 @@ export default {
|
||||
async handleShow(row){
|
||||
const res = await getRepairSoById(row.id)
|
||||
await this.$refs.soShow.open(res.data)
|
||||
},
|
||||
// 入库操作
|
||||
async handleInWares(row){
|
||||
this.inWaresFormData = {
|
||||
id: null,
|
||||
soiList: []
|
||||
}
|
||||
this.inWaresFormData['id'] = row.id
|
||||
try {
|
||||
this.dialogVisible = true
|
||||
this.inLoading = true
|
||||
const resRow = await getRepairSoById(row.id)
|
||||
const ids = resRow.data.goodsList.map(item => item.id)
|
||||
const res = await getRepairSoiByIds(ids)
|
||||
this.inItems = res.data
|
||||
this.inItems = this.inItems.filter(item => item.inCount !== item.goodsCount)
|
||||
this.inItems = [...this.inItems.map(item => {
|
||||
return {
|
||||
...item,
|
||||
goodsCount: item.goodsCount - item?.inCount | 0,
|
||||
inCount: item.goodsCount - item?.inCount | 0
|
||||
}
|
||||
})]
|
||||
}finally {
|
||||
this.inLoading = false
|
||||
}
|
||||
},
|
||||
selectRow(val){
|
||||
this.selectRows = val
|
||||
},
|
||||
async doInWares(){
|
||||
try {
|
||||
this.inWaresFormData.soiList = this.selectRows
|
||||
this.inWaresFormData.soNo = createUniqueCodeByHead("RC")
|
||||
this.inLoading = true
|
||||
await inWare(this.inWaresFormData)
|
||||
this.dialogVisible = false
|
||||
this.$modal.msgSuccess("入库成功")
|
||||
await this.pageSo()
|
||||
}catch{}
|
||||
},
|
||||
/** 鼠标移入cell */
|
||||
handleCellEnter(row, column, cell, event) {
|
||||
const property = column.property
|
||||
if (row.id && this.editProp.includes(property)) {
|
||||
cell.querySelector('.item__txt').classList.add('item__txt--hover')
|
||||
}
|
||||
},
|
||||
/** 鼠标移出cell */
|
||||
handleCellLeave(row, column, cell, event) {
|
||||
const property = column.property
|
||||
if (row.id && this.editProp.includes(property)) {
|
||||
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
|
||||
}
|
||||
},
|
||||
/** 点击cell */
|
||||
handleCellClick(row, column, cell, event) {
|
||||
const property = column.property
|
||||
if (this.editProp.includes(property)) {
|
||||
if (!row.id || property !== 'goods') {
|
||||
// 保存cell
|
||||
this.saveCellClick(row, cell)
|
||||
cell.querySelector('.item__txt').style.display = 'none'
|
||||
cell.querySelector('.item__input').style.display = 'inline'
|
||||
cell.querySelector('input').focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 取消编辑状态 */
|
||||
cancelEditable(cell) {
|
||||
cell.querySelector('.item__txt').style.display = 'inline'
|
||||
cell.querySelector('.item__input').style.display = 'none'
|
||||
},
|
||||
/** 保存进入编辑的cell */
|
||||
saveCellClick(row, cell) {
|
||||
const id = row.id
|
||||
if (this.clickCellMap[id] !== undefined) {
|
||||
if (!this.clickCellMap[id].includes(cell)) {
|
||||
this.clickCellMap[id].push(cell)
|
||||
}
|
||||
} else {
|
||||
this.clickCellMap[id] = [cell]
|
||||
}
|
||||
},
|
||||
/** 保存数据 */
|
||||
save(row) {
|
||||
const id = row.id
|
||||
// 取消本行所有cell的编辑状态
|
||||
this.clickCellMap[id].forEach(cell => {
|
||||
this.cancelEditable(cell)
|
||||
})
|
||||
this.clickCellMap[id] = []
|
||||
this.tableKey++
|
||||
this.selectRows = []
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item {
|
||||
.item__input {
|
||||
display: none;
|
||||
width: 100px;
|
||||
/* 调整elementUI中样式 如果不需要调整请忽略 */
|
||||
.el-input__inner {
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
/* 调整elementUI中样式 如果不需要调整请忽略 */
|
||||
.el-input__suffix {
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
line-height: 26px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item__txt {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
width: 100px;
|
||||
line-height: 24px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.item__txt--hover {
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -76,10 +76,12 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" v-if="type" @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
|
||||
<el-button type="primary" v-if="type" @click="handlePass"
|
||||
:disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
|
||||
通知领料
|
||||
</el-button>
|
||||
<el-button type="primary" v-else @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
|
||||
<el-button type="primary" v-else @click="handlePass"
|
||||
:disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
|
||||
通知退料
|
||||
</el-button>
|
||||
<el-button v-if="type" type="primary" @click="handleCreate" :disabled="selections.length === 0">
|
||||
@ -163,7 +165,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="danger" @click="handleSubmit">结算</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -253,10 +255,9 @@ export default {
|
||||
}
|
||||
},
|
||||
// 生成采购 true是全部、false是选择
|
||||
async handleCreate(flag){
|
||||
async handleCreate() {
|
||||
this.inStockDialog = true
|
||||
if (flag){
|
||||
this.partList = [...this.items.map(item => {
|
||||
this.partList = [...this.selections.map(item => {
|
||||
return {
|
||||
...item.wares,
|
||||
count: item.waresCount,
|
||||
@ -264,16 +265,6 @@ export default {
|
||||
totalPrice: item.waresCount * item.wares.purPrice
|
||||
}
|
||||
})]
|
||||
}else {
|
||||
this.partList = [...this.selections.map(item => {
|
||||
return {
|
||||
...item.wares,
|
||||
count: item.waresCount,
|
||||
newPrice: item.wares.price,
|
||||
totalPrice: item.waresCount * item.wares.price
|
||||
}
|
||||
})]
|
||||
}
|
||||
this.dialogVisible = false
|
||||
},
|
||||
async getList() {
|
||||
@ -397,7 +388,9 @@ export default {
|
||||
/** 保存数据 */
|
||||
save(row) {
|
||||
// 更新表格的数据
|
||||
if (row.wares) {
|
||||
row.isStock = this.type ? row.waresCount <= row.wares.stock : row.waresCount <= row.waresAlreadyCount
|
||||
}
|
||||
if (!this.type && !row.isStock) {
|
||||
this.$modal.msgWarning("退料数量不能超过领取数量")
|
||||
row.waresCount = row.waresAlreadyCount
|
||||
@ -446,8 +439,10 @@ export default {
|
||||
userName: res.data.nickname,
|
||||
soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
|
||||
itemCount: this.partList.length,
|
||||
totalPrice: this.partList.reduce((x, y) => {return x + y.totalPrice}, 0),
|
||||
soStatus: "03",
|
||||
totalPrice: this.partList.reduce((x, y) => {
|
||||
return x + y.totalPrice
|
||||
}, 0),
|
||||
soStatus: "02",
|
||||
remark: this.remark,
|
||||
}
|
||||
this.formData.goodsList = [...this.partList.map(item => {
|
||||
@ -470,6 +465,7 @@ export default {
|
||||
::v-deep .el-table .stock td {
|
||||
color: #ff0000 !important; /* 红色背景 */
|
||||
}
|
||||
|
||||
.item {
|
||||
.item__input {
|
||||
display: none;
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<el-button size="mini"
|
||||
v-if=" scope.row.ticketsWorkStatus !== '01' && userRole === 'repair_staff' && !isFinish && nowUser.id === scope.row.nowRepairId"
|
||||
type="text" icon="el-icon-monitor" @click="handleRecord(scope.row, 'sgz')">
|
||||
过程记录{{scope.row.ticketsWorkStatus !== '01' && ((userRole === 'service_advisor' || userRole === 'general_inspection') && !isFinish)}}
|
||||
过程记录
|
||||
</el-button>
|
||||
<el-button size="mini"
|
||||
v-if="scope.row.ticketsWorkStatus !== '01' && userRole === 'repair_staff' && !isFinish && nowUser.id === scope.row.nowRepairId"
|
||||
|
||||
@ -19,7 +19,8 @@
|
||||
</el-form-item>
|
||||
<el-form-item v-if="TicketType === 'tu'" label="维修类别" prop="repairType">
|
||||
<el-select v-model="queryParams.repairType" size="small">
|
||||
<el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="TicketType === 'tp'" label="类型" prop="repairType">
|
||||
@ -41,8 +42,9 @@
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
|
||||
</el-row>
|
||||
<TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isWXCW"/>
|
||||
<pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
<TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isCW"/>
|
||||
<pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -85,18 +87,23 @@ export default {
|
||||
showSearch: true,
|
||||
total: 0,
|
||||
list: [],
|
||||
isWXCW: false
|
||||
isCW: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage()
|
||||
this.getIsWXCW()
|
||||
this.getIsCW()
|
||||
},
|
||||
methods: {
|
||||
// 是否是财务
|
||||
async getIsWXCW(){
|
||||
const res = await checkRole("wxcw")
|
||||
this.isWXCW = res.data
|
||||
async getIsCW() {
|
||||
const kjRes = await checkRole("kj")
|
||||
if (kjRes.data) {
|
||||
this.isCW = kjRes.data
|
||||
} else {
|
||||
const cnRes = await checkRole("cn")
|
||||
this.isCW = cnRes.data
|
||||
}
|
||||
},
|
||||
// 类型选择
|
||||
getRepairType(data) {
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
|
||||
>查看
|
||||
</el-button>
|
||||
<el-button v-if="TicketType === 'tu' && isWXCW && !scope.row.payType" size="mini" type="text" icon="el-icon-finished"
|
||||
<el-button v-if="TicketType === 'tu' && isWXCW && scope.row.isFinish === '1'" size="mini" type="text" icon="el-icon-finished"
|
||||
@click="handlePaid(scope.row)"
|
||||
>结算
|
||||
</el-button>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-dialog title="客户信息" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
|
||||
<el-dialog title="客户信息" ref="dialogRef" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body v-loading="dialogLoading">
|
||||
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
|
||||
label-width="100px">
|
||||
<el-collapse v-model="activeNames">
|
||||
@ -68,16 +68,16 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="选择会员" prop="userInfo.memberLevelId">
|
||||
<el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">
|
||||
<el-option v-for="(item,index) in levelList" :key="item.id"
|
||||
:label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="2">-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="选择会员" prop="userInfo.memberLevelId">-->
|
||||
<!-- <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">-->
|
||||
<!-- <el-option v-for="(item,index) in levelList" :key="item.id"-->
|
||||
<!-- :label="item.name" :value="item.id"/>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="联系地址" prop="userInfo.address">
|
||||
@ -318,11 +318,17 @@ export default {
|
||||
sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
|
||||
cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE),
|
||||
buttonLoading: false,
|
||||
dialogLoading: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async open(data) {
|
||||
this.dialogVisible = true
|
||||
try {
|
||||
this.reset()
|
||||
// this.dialogLoading = this.$loading({
|
||||
// target: this.$refs.dialogRef.$el
|
||||
// })
|
||||
if (data?.userInfo?.id){
|
||||
this.formData.userInfo = {
|
||||
...this.formData.userInfo,
|
||||
@ -336,8 +342,10 @@ export default {
|
||||
brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
|
||||
}
|
||||
}
|
||||
await this.listLevel()
|
||||
this.dialogVisible = true
|
||||
// await this.listLevel()
|
||||
}finally {
|
||||
// this.dialogLoading.close()
|
||||
}
|
||||
},
|
||||
async compute(){
|
||||
this.buttonLoading = true
|
||||
|
||||
70
src/views/rescue/screen/api/rescueBigScreen.js
Normal file
70
src/views/rescue/screen/api/rescueBigScreen.js
Normal file
@ -0,0 +1,70 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 救援大屏救援订单
|
||||
export function getRescueOrderCount(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getRescueOrderCount',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏日常费用统计接口
|
||||
export function getRescueExpenseCount(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getRescueExpenseCount',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取经营分析接口
|
||||
export function getManageAnalyze(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getManageAnalyze',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取出车次数统计接口
|
||||
export function getDrawOutAVehicleCount(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getDrawOutAVehicleCount',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取司机排名接口
|
||||
export function getDriverSort(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getDriverSort',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取救援详细数据接口
|
||||
export function getRescueStatistics(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getRescueStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取车辆预警接口
|
||||
export function getRescueCarEarlyWarning(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getRescueCarEarlyWarning',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 救援大屏获取救援订单占比接口
|
||||
export function getRescueOrderByRoad(params) {
|
||||
return request({
|
||||
url: '/rescue/bigScree/getRescueOrderByRoad',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
src/views/rescue/screen/imgs/1.png
Normal file
BIN
src/views/rescue/screen/imgs/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/views/rescue/screen/imgs/2.png
Normal file
BIN
src/views/rescue/screen/imgs/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/views/rescue/screen/imgs/3.png
Normal file
BIN
src/views/rescue/screen/imgs/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/views/rescue/screen/imgs/4.png
Normal file
BIN
src/views/rescue/screen/imgs/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/rescue/screen/imgs/5.png
Normal file
BIN
src/views/rescue/screen/imgs/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/rescue/screen/imgs/back.png
Normal file
BIN
src/views/rescue/screen/imgs/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/views/rescue/screen/imgs/c_list.png
Normal file
BIN
src/views/rescue/screen/imgs/c_list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
src/views/rescue/screen/imgs/c_title.png
Normal file
BIN
src/views/rescue/screen/imgs/c_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
src/views/rescue/screen/imgs/numbcak.png
Normal file
BIN
src/views/rescue/screen/imgs/numbcak.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 B |
BIN
src/views/rescue/screen/imgs/title.png
Normal file
BIN
src/views/rescue/screen/imgs/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/views/rescue/screen/imgs/top.png
Normal file
BIN
src/views/rescue/screen/imgs/top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@ -1,13 +1,852 @@
|
||||
<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="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 class="lan-you">
|
||||
<div class="yi" :class="{'er' : typeIndex == index}" v-for="(item,index) in typeList" :key="index"
|
||||
@click="indexType(index,item.type)"> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="rescueOrder" 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' : qhindex3 == index}" v-for="(item,index) in zilist" :key="index"
|
||||
@click="gbindex3(index,item.unit)"> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="rescueExpense" 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="f_box">
|
||||
<div class="img_left">
|
||||
<!-- <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
|
||||
订单数量
|
||||
</div>
|
||||
<div>
|
||||
<div class="f_size">{{ data2.allNum || 0 }}</div>
|
||||
<!-- <div class="f_size">2</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">{{ data2.ywcNum || 0 }}</div>
|
||||
<!-- <div class="f_num">{{ statusTickets[4].value }}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="f_box">
|
||||
<div class="img_left">
|
||||
<!-- <img src="./imgs/3.png" style="width: 60px;height: 60px">-->
|
||||
检测中数量
|
||||
</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>
|
||||
<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 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.sort || '' }}</div>
|
||||
<div class="l_two">{{ item.nickname || '' }}</div>
|
||||
<div class="l_three">{{ item.money || '' }}</div>
|
||||
<div class="l_four">{{ item.count || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c_right">
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
救援订单数占比
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="rescueOrderByRoad" 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="drawOutAVehicle" style="width: 400px; height: 267px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six_box">
|
||||
<div class="s_title">
|
||||
救援车辆预警
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
<div id="jcsptj" style="width: 400px; height: 267px;"></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";
|
||||
import * as rescueBigScreen from "@/views/rescue/screen/api/rescueBigScreen";
|
||||
import {getDriverSort} from "@/views/rescue/screen/api/rescueBigScreen";
|
||||
|
||||
export default {
|
||||
name: 'rescueBigScreen'
|
||||
name: 'Index',
|
||||
components: {},
|
||||
data() {
|
||||
const formatDate = (date) => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
return {
|
||||
Amount: [],
|
||||
unit: 'day',
|
||||
unit1: 'day',
|
||||
unit2: 'day',
|
||||
unit3: 'day',
|
||||
unit4: 'recentMonth',
|
||||
data2: '',
|
||||
data1: '',
|
||||
data3: '',
|
||||
chartData1: {},
|
||||
params: {
|
||||
unit: this.unit,
|
||||
},
|
||||
typeIndex:0,
|
||||
type:'count',
|
||||
// value1: [new Date(), new Date()],
|
||||
value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
|
||||
qhindex: 0,
|
||||
qhindex1: 0,
|
||||
qhindex2: 0,
|
||||
qhindex3: 0,
|
||||
zilist: [
|
||||
{text: '日', unit: 'day'},
|
||||
{text: '周', unit: 'week'},
|
||||
{text: '月', unit: 'month'},
|
||||
{text: '年', unit: 'year'},
|
||||
|
||||
],
|
||||
timelist: [
|
||||
{text: '日', unit: 'day'},
|
||||
{text: '周', unit: 'week'},
|
||||
{text: '月', unit: 'month'},
|
||||
{text: '年', unit: 'year'},
|
||||
|
||||
],
|
||||
typeList: [
|
||||
{text: '数量', type : 'count'},
|
||||
{text: '金额', type : 'money'},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.customerSource()
|
||||
this.getServerData1()
|
||||
this.chartInfoNum()
|
||||
this.chartLineInspectionNum()
|
||||
this.chartInfoRatio()
|
||||
this.getfive2()
|
||||
this.getfive1()
|
||||
this.getfive3()
|
||||
this.getProduct()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log('选择的时间', this.value1)
|
||||
this.getfive2()
|
||||
this.getfive1()
|
||||
},
|
||||
gbindex(index, unit) {
|
||||
this.qhindex = index
|
||||
this.unit = unit
|
||||
this.customerSource()
|
||||
},
|
||||
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()
|
||||
},
|
||||
gbindex3(index, unit) {
|
||||
console.log('33');
|
||||
this.qhindex3 = index
|
||||
this.unit3 = unit
|
||||
this.getServerData1()
|
||||
},
|
||||
indexType(index, type) {
|
||||
this.typeIndex = index
|
||||
this.type = type
|
||||
this.customerSource()
|
||||
},
|
||||
|
||||
/**
|
||||
* 日常费用
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async getServerData1() {
|
||||
const params = {
|
||||
timeType: this.unit3,
|
||||
}
|
||||
let res = await rescueBigScreen.getRescueExpenseCount(params)
|
||||
console.log('日常费用', res)
|
||||
// res.data.series.forEach(item => {
|
||||
// item.type = 'bar'
|
||||
// })
|
||||
var chartDom = document.getElementById('rescueExpense');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
dataset: {
|
||||
source: res.data.source
|
||||
},
|
||||
yAxis: {},
|
||||
series:[{ type: 'bar' }, { type: 'bar' }]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 检测商品统计
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
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 myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
title: {
|
||||
// text: 'Referer of a Website',
|
||||
// subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}, 2000)
|
||||
|
||||
},
|
||||
/**
|
||||
* 数量统计
|
||||
* @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 = {
|
||||
timeType: this.unit2,
|
||||
}
|
||||
let res = await rescueBigScreen.getDrawOutAVehicleCount(params)
|
||||
console.log('出车次数', res)
|
||||
var chartDom = document.getElementById('drawOutAVehicle');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.xList
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: res.data.yList,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 救援订单占比
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async chartLineInspectionNum() {
|
||||
// const params = {
|
||||
// timeType: this.unit,
|
||||
// }
|
||||
let res = await rescueBigScreen.getRescueOrderByRoad()
|
||||
console.log('救援订单占比', res)
|
||||
res.data.forEach(item => {
|
||||
item.value = item.count
|
||||
})
|
||||
var chartDom = document.getElementById('rescueOrderByRoad');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
title: {
|
||||
// text: 'Referer of a Website',
|
||||
// subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
|
||||
/**
|
||||
* 救援大屏救援订单
|
||||
*/
|
||||
async customerSource() {
|
||||
const params = {
|
||||
timeType: this.unit,
|
||||
type: this.type
|
||||
}
|
||||
const res = await rescueBigScreen.getRescueOrderCount(params);
|
||||
const name = []
|
||||
const data = []
|
||||
res.data.forEach(item => {
|
||||
name.push(item.name)
|
||||
data.push(item.value)
|
||||
})
|
||||
var chartDom = document.getElementById('rescueOrder');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: name
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: {
|
||||
data: data,
|
||||
type: 'line'
|
||||
}
|
||||
};
|
||||
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 params = {
|
||||
timeType: this.unit4
|
||||
}
|
||||
const res = await getDriverSort(params)
|
||||
console.log('司机排名', res.data)
|
||||
this.data3 = res.data
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.cont {
|
||||
background: #020F32;
|
||||
//background: url("./imgs/back.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;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: 20px;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.s_title {
|
||||
width: 90%;
|
||||
height: 32px;
|
||||
background: url("./imgs/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding-left: 40px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.echaets_box {
|
||||
width: 90%;
|
||||
height: 267px;
|
||||
margin: 0px auto;
|
||||
border-bottom: 1px solid #0174F6;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user