检测大屏更新
This commit is contained in:
许允枞
parent
47866bb68f
commit
cecce06e0f
@ -64,6 +64,13 @@ export function getfive3(params) {
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 检测商品统计
|
||||
export function hotGoodsList() {
|
||||
return request({
|
||||
url: '/partnerOwn/partner/newHotGoodsList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,7 +21,9 @@
|
||||
<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 class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index"
|
||||
@click="gbindex(index,item.unit)"> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echaets_box">
|
||||
@ -35,7 +37,9 @@
|
||||
<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 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">
|
||||
@ -45,101 +49,114 @@
|
||||
</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 @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>-->
|
||||
<!-- <div @click="countOrAmount()" class="tab_buttom">金额</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tab_bt">
|
||||
<div class="yb_">
|
||||
<div class="yb_title">工单总金额（元）</div>
|
||||
<div class="numlist">
|
||||
<!-- <div class="num_box" v-for="(item,index) in 6" :key="index">-->
|
||||
<!-- {{index}}-->
|
||||
<!-- </div>-->
|
||||
<div class="num_box">
|
||||
<!-- {{ statistics.totalAmount }}-->
|
||||
</div>
|
||||
<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="yb_">
|
||||
<div class="yb_title">今日工单金额（元）</div>
|
||||
<div class="numlist">
|
||||
<!-- <div class="num_box" v-for="(item,index) in 6" :key="index">-->
|
||||
<!-- {{index}}-->
|
||||
<!-- </div>-->
|
||||
<div class="num_box">
|
||||
<!-- {{ statistics.todayAmount }}-->
|
||||
</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">
|
||||
<!-- <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
|
||||
公示价格
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="f_size">{{ statusTickets[3].name }}</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[3].value }}</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">
|
||||
<!-- <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
|
||||
应收款
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="f_size">{{ statusTickets[4].name }}</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[4].value }}</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">
|
||||
<img src="./imgs/3.png" style="width: 60px;height: 60px">
|
||||
已收款
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="f_size">{{ statusTickets[0].name }}</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[0].value }}</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">
|
||||
<!-- <img src="./imgs/4.png" style="width: 60px;height: 60px">-->
|
||||
待收款
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="f_size">{{ statusTickets[1].name }}</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[1].value }}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="f_box">
|
||||
<div class="img_left">
|
||||
<img src="./imgs/5.png" style="width: 60px;height: 60px">
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="f_size">{{ statusTickets[5].name }}</div>-->
|
||||
<!-- <div class="f_num">{{ statusTickets[5].value }}</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>
|
||||
<div class="ot_vox">
|
||||
<div class="long_box" v-for="(item,index) in data3" :key="index">
|
||||
<div class="l_one">{{ item.remark || '' }}</div>
|
||||
<div class="l_two">{{ item.theNum || '' }}</div>
|
||||
<div class="l_three">{{ item.theAmount || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="list_long">-->
|
||||
<!-- <div class="long_title">-->
|
||||
<!-- <div class="l_one">工单号</div>-->
|
||||
<!-- <div class="l_two">服务客户</div>-->
|
||||
<!-- <div class="l_three">服务顾问</div>-->
|
||||
<!-- <div class="l_four">创建时间</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="ot_vox">-->
|
||||
<!-- <div class="long_box" v-for="(item,index) in todayTickets" :key="index">-->
|
||||
<!-- <div class="l_one">{{ item.ticketNo }}</div>-->
|
||||
<!-- <div class="l_two">{{ item.userName }}</div>-->
|
||||
<!-- <div class="l_three">{{ item.adviserName }}</div>-->
|
||||
<!-- <div class="l_four">{{ parseTime(item.createTime) }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="c_right">
|
||||
<div class="six_box">
|
||||
@ -157,7 +174,9 @@
|
||||
<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 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">
|
||||
@ -166,7 +185,10 @@
|
||||
</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>
|
||||
@ -178,29 +200,43 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
|
||||
import {chartInfoNum, chartLineInspectionAmount} from "@/views/inspection/screen/api/jcBigScreen";
|
||||
import {
|
||||
chartInfoNum,
|
||||
chartLineInspectionAmount,
|
||||
getfive1,
|
||||
getfive2,
|
||||
getfive3, hotGoodsList
|
||||
} from "@/views/inspection/screen/api/jcBigScreen";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {},
|
||||
data() {
|
||||
const formatDate = (date) => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
return {
|
||||
Amount: [],
|
||||
unit: '',
|
||||
unit1: '',
|
||||
unit2: '',
|
||||
unit: 'day',
|
||||
unit1: 'day',
|
||||
unit2: 'day',
|
||||
data2: '',
|
||||
data1: '',
|
||||
data3: '',
|
||||
chartData1: {},
|
||||
params : {
|
||||
unit:this.unit,
|
||||
params: {
|
||||
unit: this.unit,
|
||||
},
|
||||
qhindex:0,
|
||||
qhindex1:0,
|
||||
qhindex2:0,
|
||||
zilist:[
|
||||
{text:'日',unit:'day'},
|
||||
{text:'周',unit:'week'},
|
||||
{text:'月',unit:'month'},
|
||||
{text:'年',unit:'year'},
|
||||
// value1: [new Date(), new Date()],
|
||||
value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
|
||||
qhindex: 0,
|
||||
qhindex1: 0,
|
||||
qhindex2: 0,
|
||||
zilist: [
|
||||
{text: '日', unit: 'day'},
|
||||
{text: '周', unit: 'week'},
|
||||
{text: '月', unit: 'month'},
|
||||
{text: '年', unit: 'year'},
|
||||
|
||||
],
|
||||
}
|
||||
@ -211,24 +247,33 @@ export default {
|
||||
this.chartInfoNum()
|
||||
this.chartLineInspectionNum()
|
||||
this.chartInfoRatio()
|
||||
this.getfive2()
|
||||
this.getfive1()
|
||||
this.getfive3()
|
||||
this.getProduct()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
gbindex(index,unit){
|
||||
handleChange() {
|
||||
console.log('选择的时间', this.value1)
|
||||
this.getfive2()
|
||||
this.getfive1()
|
||||
},
|
||||
gbindex(index, unit) {
|
||||
this.qhindex = index
|
||||
this.unit = unit
|
||||
this.getServerData1()
|
||||
},
|
||||
gbindex1(index,unit){
|
||||
console.log('22',unit);
|
||||
gbindex1(index, unit) {
|
||||
console.log('22', unit);
|
||||
this.qhindex1 = index
|
||||
this.unit1 = unit
|
||||
this.chartInfoNum()
|
||||
},
|
||||
gbindex2(index,unit){
|
||||
gbindex2(index, unit) {
|
||||
console.log('33');
|
||||
this.qhindex2 = index
|
||||
this.unit2 = unit
|
||||
@ -241,10 +286,10 @@ export default {
|
||||
*/
|
||||
async getServerData1() {
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
unit: this.unit,
|
||||
}
|
||||
let res = await jcBigScreen.getServerData1(params)
|
||||
console.log('已收款金额',res)
|
||||
console.log('已收款金额', res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
@ -263,16 +308,64 @@ export default {
|
||||
};
|
||||
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,
|
||||
unit: this.unit1,
|
||||
}
|
||||
let res = await jcBigScreen.chartInfoNum(params)
|
||||
console.log('数量统计',res)
|
||||
console.log('数量统计', res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
@ -297,10 +390,10 @@ export default {
|
||||
*/
|
||||
async chartInfoRatio() {
|
||||
const params = {
|
||||
unit:this.unit2,
|
||||
unit: this.unit2,
|
||||
}
|
||||
let res = await jcBigScreen.chartInfoRatio(params)
|
||||
console.log('检测合格率',res)
|
||||
console.log('检测合格率', res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
@ -325,10 +418,10 @@ export default {
|
||||
*/
|
||||
async chartLineInspectionNum() {
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
unit: this.unit,
|
||||
}
|
||||
let res = await jcBigScreen.chartLineInspectionNum(params)
|
||||
console.log('检测数量',res)
|
||||
console.log('检测数量', res)
|
||||
res.data.series.forEach(item => {
|
||||
item.type = 'bar'
|
||||
})
|
||||
@ -336,16 +429,6 @@ export default {
|
||||
var chartDom = document.getElementById('jcsl');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
// option = {
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// data: res.data.categories
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value'
|
||||
// },
|
||||
// series: res.data.series
|
||||
// };
|
||||
option = {
|
||||
title: {
|
||||
text: '最近七天'
|
||||
@ -385,7 +468,7 @@ export default {
|
||||
*/
|
||||
async customerSource() {
|
||||
const params = {
|
||||
unit:this.unit,
|
||||
unit: this.unit,
|
||||
}
|
||||
const res = await jcBigScreen.chartLineInspectionAmount(params);
|
||||
res.data.series.forEach(item => {
|
||||
@ -406,6 +489,41 @@ export default {
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
/**
|
||||
* 订单数量
|
||||
*/
|
||||
async getfive2() {
|
||||
let data2 = {
|
||||
startTime: this.value1[0],
|
||||
endTime: this.value1[1]
|
||||
}
|
||||
console.log('订单数量等参数', data2)
|
||||
const res = await getfive2(data2)
|
||||
console.log('订单数量等', res.data)
|
||||
this.data2 = res.data
|
||||
},
|
||||
/**
|
||||
* 营业额统计
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async getfive1() {
|
||||
let data1 = {
|
||||
startTime: this.value1[0],
|
||||
endTime: this.value1[1]
|
||||
}
|
||||
const res = await getfive1(data1)
|
||||
console.log('营业额统计', res.data)
|
||||
this.data1 = res.data
|
||||
},
|
||||
/**
|
||||
* 客户来源
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async getfive3() {
|
||||
const res = await getfive3()
|
||||
console.log('客户来源', res.data)
|
||||
this.data3 = res.data
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -440,14 +558,16 @@ export default {
|
||||
//align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dis-t{
|
||||
|
||||
.dis-t {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.lan-you{
|
||||
|
||||
.lan-you {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user