Merge branch 'dev' of http://122.51.230.86:3000/dianliang/lanan-system-vue into dev
This commit is contained in:
xiaofajia
commit
6e9d9ac508
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>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
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>
|
</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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user