dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

检测大屏更新

Browse Source
This commit is contained in:
许允枞 2024-10-23 14:26:16 +08:00
parent 47866bb68f
commit cecce06e0f
2 changed files with 228 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/inspection/screen/api/jcBigScreen.js
View File

@ -64,6 +64,13 @@ export function getfive3(params) {
params: params params: params
}) })
} }
// 检测商品统计
export function hotGoodsList() {
return request({
url: '/partnerOwn/partner/newHotGoodsList',
method: 'get',
})
}

256
src/views/inspection/screen/jcBigScreen.vue
View File

@ -21,7 +21,9 @@
<div class="dis-t"> <div class="dis-t">
<div class="lan-you"> <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> </div>
<div class="echaets_box"> <div class="echaets_box">
@ -35,7 +37,9 @@
<div class="dis-t"> <div class="dis-t">
<div class="lan-you"> <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> </div>
<div class="echaets_box"> <div class="echaets_box">
@ -51,95 +55,108 @@
<div class="tab_bt"> <div class="tab_bt">
<div class="yb_"> <el-date-picker
<div class="yb_title">工单总金额（元）</div> v-model="value1"
<div class="numlist"> type="daterange"
<!-- <div class="num_box" v-for="(item,index) in 6" :key="index">--> @change="handleChange"
<!-- {{index}}--> value-format="yyyy-MM-dd"
<!-- </div>--> range-separator="至"
<div class="num_box"> start-placeholder="开始日期"
<!-- {{ statistics.totalAmount }}--> 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> </div>
<div class="f_box">
<div class="img_left">
<!-- <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
完成数量
</div> </div>
<div class="yb_"> <div>
<div class="yb_title">今日工单金额（元）</div> <div class="f_size">{{ data2.ywcNum || 0 }}</div>
<div class="numlist"> <!-- <div class="f_num">{{ statusTickets[4].value }}</div>-->
<!-- <div class="num_box" v-for="(item,index) in 6" :key="index">-->
<!-- {{index}}-->
<!-- </div>-->
<div class="num_box">
<!-- {{ statistics.todayAmount }}-->
</div> </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> </div>
<div class="five_box"> <div class="five_box">
<div class="f_box"> <div class="f_box">
<div class="img_left"> <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> <div>
<!-- <div class="f_size">{{ statusTickets[3].name }}</div>--> <!-- <div class="f_size">1</div>-->
<div class="f_size">{{ data1.gsAmount || 0 }}</div>
<!-- <div class="f_num">{{ statusTickets[3].value }}</div>--> <!-- <div class="f_num">{{ statusTickets[3].value }}</div>-->
</div> </div>
</div> </div>
<div class="f_box"> <div class="f_box">
<div class="img_left"> <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> <div>
<!-- <div class="f_size">{{ statusTickets[4].name }}</div>--> <div class="f_size">{{ data1.ysAmount || 0 }}</div>
<!-- <div class="f_num">{{ statusTickets[4].value }}</div>--> <!-- <div class="f_num">{{ statusTickets[4].value }}</div>-->
</div> </div>
</div> </div>
<div class="f_box"> <div class="f_box">
<div class="img_left"> <div class="img_left">
<img src="./imgs/3.png" style="width: 60px;height: 60px"> 已收款
</div> </div>
<div> <div>
<!-- <div class="f_size">{{ statusTickets[0].name }}</div>--> <div class="f_size">{{ data1.yjsAmount || 0 }}</div>
<!-- <div class="f_num">{{ statusTickets[0].value }}</div>-->
</div> </div>
</div> </div>
<div class="f_box"> <div class="f_box">
<div class="img_left"> <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> <div>
<!-- <div class="f_size">{{ statusTickets[1].name }}</div>--> <div class="f_size">{{ data1.ysAmount - data1.yjsAmount || 0 }}</div>
<!-- <div class="f_num">{{ statusTickets[1].value }}</div>--> <!-- <div class="f_num">{{ statusTickets[1].value }}</div>-->
</div> </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>
</div>
</div> </div>
<div class="co_title"> <div class="co_title">
今日工单 客户来源统计
</div> </div>
<!-- <div class="list_long">--> <div class="list_long">
<!-- <div class="long_title">--> <div class="long_title">
<!-- <div class="l_one">工单号</div>--> <div class="l_one">客户来源</div>
<!-- <div class="l_two">服务客户</div>--> <div class="l_two">数量</div>
<!-- <div class="l_three">服务顾问</div>--> <div class="l_three">公示金额</div>
<!-- <div class="l_four">创建时间</div>--> <!-- <div class="l_four">创建时间</div>-->
<!-- </div>--> </div>
<!-- <div class="ot_vox">--> <div class="ot_vox">
<!-- <div class="long_box" v-for="(item,index) in todayTickets" :key="index">--> <div class="long_box" v-for="(item,index) in data3" :key="index">
<!-- <div class="l_one">{{ item.ticketNo }}</div>--> <div class="l_one">{{ item.remark || '' }}</div>
<!-- <div class="l_two">{{ item.userName }}</div>--> <div class="l_two">{{ item.theNum || '' }}</div>
<!-- <div class="l_three">{{ item.adviserName }}</div>--> <div class="l_three">{{ item.theAmount || '' }}</div>
<!-- <div class="l_four">{{ parseTime(item.createTime) }}</div>--> </div>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- </div>-->
</div> </div>
<div class="c_right"> <div class="c_right">
<div class="six_box"> <div class="six_box">
@ -157,7 +174,9 @@
<div class="dis-t"> <div class="dis-t">
<div class="lan-you"> <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> </div>
<div class="echaets_box"> <div class="echaets_box">
@ -166,7 +185,10 @@
</div> </div>
<div class="six_box"> <div class="six_box">
<div class="s_title"> <div class="s_title">
维修工人排行 检测商品统计
</div>
<div class="echaets_box">
<div id="jcsptj" style="width: 400px; height: 267px;"></div>
</div> </div>
</div> </div>
</div> </div>
@ -178,21 +200,35 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen'; 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 { export default {
name: 'Index', name: 'Index',
components: {}, components: {},
data() { data() {
const formatDate = (date) => {
return date.toISOString().split('T')[0];
};
return { return {
Amount: [], Amount: [],
unit: '', unit: 'day',
unit1: '', unit1: 'day',
unit2: '', unit2: 'day',
data2: '',
data1: '',
data3: '',
chartData1: {}, chartData1: {},
params: { params: {
unit: this.unit, unit: this.unit,
}, },
// value1: [new Date(), new Date()],
value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
qhindex: 0, qhindex: 0,
qhindex1: 0, qhindex1: 0,
qhindex2: 0, qhindex2: 0,
@ -211,12 +247,21 @@ export default {
this.chartInfoNum() this.chartInfoNum()
this.chartLineInspectionNum() this.chartLineInspectionNum()
this.chartInfoRatio() this.chartInfoRatio()
this.getfive2()
this.getfive1()
this.getfive3()
this.getProduct()
}, },
mounted() { mounted() {
}, },
methods: { methods: {
handleChange() {
console.log('选择的时间', this.value1)
this.getfive2()
this.getfive1()
},
gbindex(index, unit) { gbindex(index, unit) {
this.qhindex = index this.qhindex = index
this.unit = unit this.unit = unit
@ -263,6 +308,54 @@ export default {
}; };
option && myChart.setOption(option); 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>} * @returns {Promise<void>}
@ -336,16 +429,6 @@ export default {
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 = {
// xAxis: {
// type: 'category',
// data: res.data.categories
// },
// yAxis: {
// type: 'value'
// },
// series: res.data.series
// };
option = { option = {
title: { title: {
text: '最近七天' text: '最近七天'
@ -406,6 +489,41 @@ export default {
}; };
option && myChart.setOption(option); 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,6 +558,7 @@ export default {
//align-items: center; //align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.dis-t { .dis-t {
width: 100%; width: 100%;
display: flex; display: flex;
@ -447,6 +566,7 @@ export default {
justify-content: space-between; justify-content: space-between;
margin: 10px auto; margin: 10px auto;
} }
.lan-you { .lan-you {
display: flex; display: flex;
align-items: center; align-items: center;