<template>
|
<div style="margin-right: 30px" class="data-reMechanism">
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-select style="width: 200px" v-model="searchWay" @change="changeWay" placeholder="请选择">
|
<a-select-option value="1"> 时间 </a-select-option>
|
<a-select-option value="2"> 活动 </a-select-option>
|
</a-select>
|
<a-select
|
v-if="searchWay == 2"
|
style="width: 300px; margin: 0 12px"
|
@change="activeTimeChange"
|
v-model="activeTime"
|
placeholder="请选择"
|
>
|
<a-select-option value=""> 全部 </a-select-option>
|
<a-select-option v-for="item in activeOptions" :key="item.id" :value="item.id">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
<a-range-picker style="width: 300px; margin: 0 12px" v-if="searchWay == 1" @change="timeChange" />
|
<a-button type="primary" @click="searchActive"> 搜索 </a-button>
|
</div>
|
<div class="fueling-overview-ct">
|
<div class="block-title" style="display: flex; align-items: center">
|
<div style="margin-right: 12px">加油概况</div>
|
<a-switch v-model="isContrast" />
|
<a-range-picker style="width: 300px; margin: 0 12px" v-if="isContrast" @change="contrastTimeChange" />
|
</div>
|
<div class="fueling-overview-block">
|
<div class="fueling-overview-item" id="traffic-flow-card">
|
<div class="fueling-overview-name">车流量</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.carCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.carCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">进站数</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.appearCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.appearCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item" id="oil-count-card">
|
<div class="fueling-overview-name">加油数</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.oilCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.oilCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">油品销量</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.oilVolume }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.oilVolume }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- table区域-begin -->
|
<div class="table-ct">
|
<div class="table-block">
|
<div class="block-title">车流量TOP10</div>
|
<a-table
|
ref="table"
|
size="middle"
|
bordered
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
class="infoTable"
|
:scroll="{ x: true }"
|
:columns="trafficFlowCol"
|
:dataSource="trafficFlowData"
|
:loading="loading"
|
:pagination="false"
|
>
|
</a-table>
|
</div>
|
<div class="table-block">
|
<div class="block-title">加油数TOP10</div>
|
<a-table
|
ref="table"
|
size="middle"
|
bordered
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
class="infoTable"
|
:scroll="{ x: true }"
|
:columns="refueNumCol"
|
:dataSource="refueNumData"
|
:loading="loading"
|
:pagination="false"
|
>
|
</a-table>
|
</div>
|
<div class="table-block">
|
<div class="block-title">油品销量TOP10</div>
|
<a-table
|
ref="table"
|
size="middle"
|
bordered
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
class="infoTable"
|
:scroll="{ x: true }"
|
:columns="oilSalesCol"
|
:dataSource="oilSalesData"
|
:loading="loading"
|
:pagination="false"
|
>
|
</a-table>
|
</div>
|
</div>
|
<TopTenCustomers
|
:customerData="customerObj"
|
:typeOneTotal="customerOneTotal"
|
:typeTwoTotal="customerTwoTotal"
|
></TopTenCustomers>
|
</div>
|
</template>
|
|
<script>
|
import TopTenCustomers from './TopTenCustomers'
|
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
|
export default {
|
name: 'DataReMechanism',
|
components: {
|
TopTenCustomers,
|
},
|
props: {
|
selectTreeObj: {
|
default: () => {
|
return JSON.parse(localStorage.getItem('userDepartInfo'))
|
},
|
},
|
},
|
watch: {
|
isContrast() {
|
this.contrastObj = {}
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
description: '数据报表（机构）',
|
searchWay: '1',
|
isContrast: false,
|
activeTime: '',
|
customerObj: {}, //TOP10客户数据
|
customerOneTotal: 0,
|
customerTwoTotal: 0,
|
statisTotalObj: {},
|
contrastObj: {},
|
// 车流量表头
|
trafficFlowCol: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '加油站名称',
|
align: 'center',
|
dataIndex: 'orgName',
|
},
|
{
|
title: '车流量',
|
align: 'center',
|
dataIndex: 'carCount',
|
},
|
{
|
title: '拐入率',
|
align: 'center',
|
dataIndex: 'entryRate',
|
customRender: function (t, r, index) {
|
return r.entryRate + '%'
|
},
|
},
|
],
|
// 车流量数据
|
trafficFlowData: [],
|
// 加油数表头
|
refueNumCol: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '加油站名称',
|
align: 'center',
|
dataIndex: 'orgName',
|
},
|
{
|
title: '加油数',
|
align: 'center',
|
dataIndex: 'oilCount',
|
},
|
{
|
title: '加油率',
|
align: 'center',
|
dataIndex: 'oilRate',
|
customRender: function (t, r, index) {
|
return r.oilRate + '%'
|
},
|
},
|
],
|
// 加油数数据
|
refueNumData: [],
|
// 油品销量表头
|
oilSalesCol: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '加油站名称',
|
align: 'center',
|
dataIndex: 'orgName',
|
},
|
{
|
title: '加油数',
|
align: 'center',
|
dataIndex: 'oilCount',
|
},
|
{
|
title: '油品销量',
|
align: 'center',
|
dataIndex: 'oilVolume',
|
},
|
],
|
// 油品销量数据
|
oilSalesData: [],
|
startTime: '',
|
endTime: '',
|
activeOptions: [],
|
}
|
},
|
|
methods: {
|
changeWay() {
|
this.startTime = ''
|
this.endTime = ''
|
},
|
timeChange(e, t) {
|
console.log(e, t)
|
this.startTime = t[0]
|
this.endTime = t[1]
|
},
|
contrastTimeChange(e, t) {
|
postAction('/jyz/dataTable/statisTotal', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: t[0],
|
endTime: t[1],
|
}).then((res) => {
|
this.contrastObj = res.result
|
})
|
},
|
activeTimeChange(e) {
|
console.log(e)
|
if (e) {
|
let item = this.activeOptions.find((el) => el.id == e)
|
this.startTime = item.startTime
|
this.endTime = item.endTime
|
} else {
|
this.startTime = ''
|
this.endTime = ''
|
}
|
},
|
activeChange() {},
|
getStatisOrgTop() {
|
postAction('/jyz/dataTable/statisOrgTop', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
}).then((res) => {
|
this.trafficFlowData = res.result.trafficTop
|
this.refueNumData = res.result.oilTop
|
this.oilSalesData = res.result.oilVolumeTop
|
})
|
},
|
//获取统计总数
|
getStatisTotal() {
|
postAction('/jyz/dataTable/statisTotal', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
}).then((res) => {
|
this.statisTotalObj = res.result
|
})
|
},
|
getCustomerData() {
|
getAction('/jyz/dataTable/clientTop', {
|
orgCode: this.selectTreeObj.orgCode,
|
}).then((res) => {
|
this.customerObj = res.result
|
this.customerOneTotal = 0
|
this.customerTwoTotal = 0
|
this.customerObj.type1.map((el) => {
|
this.customerOneTotal += el.oilSum
|
})
|
this.customerObj.type2.map((el) => {
|
this.customerTwoTotal += el.oilSum
|
})
|
})
|
},
|
getActiveListAll() {
|
getAction('/jyz/activity/listAll', {
|
orgCode: this.selectTreeObj.orgCode,
|
}).then((res) => {
|
this.activeOptions = res.result
|
})
|
},
|
searchActive() {
|
this.getStatisOrgTop()
|
this.getStatisTotal()
|
},
|
initData() {
|
this.getCustomerData()
|
this.getStatisOrgTop()
|
this.getActiveListAll()
|
this.getStatisTotal()
|
},
|
},
|
|
created() {
|
this.initData()
|
},
|
mounted() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const scrollTarget = localStorage.getItem('scrollToTarget')
|
if (scrollTarget) {
|
const element = document.getElementById(scrollTarget)
|
if (element) {
|
element.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
localStorage.removeItem('scrollToTarget')
|
}
|
}
|
}, 500)
|
})
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
/deep/ .ant-table-content {
|
height: 500px;
|
.ant-table-placeholder {
|
background: none;
|
border: none;
|
}
|
}
|
.ant-switch::after {
|
background: #fff;
|
}
|
.data-reMechanism {
|
.block-title {
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.fueling-overview-ct {
|
margin: 0 12px;
|
.fueling-overview-block {
|
display: flex;
|
.fueling-overview-item {
|
border: 1px solid #343a44;
|
padding: 12px 80px 12px 12px;
|
margin: 12px;
|
.fueling-overview-num {
|
color: #5b81f9;
|
font-size: 16px;
|
}
|
}
|
}
|
}
|
.table-ct {
|
display: flex;
|
.table-block {
|
flex: 1;
|
margin: 0 12px;
|
}
|
}
|
}
|
</style>
|
