From d29d77e91951e30abba6596359b138bc4c6ac108 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 25 三月 2026 14:37:27 +0800
Subject: [PATCH] 修改折线图
---
src/views/dataAnalysis/components/DataReGasStation.vue | 412 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 406 insertions(+), 6 deletions(-)
diff --git a/src/views/dataAnalysis/components/DataReGasStation.vue b/src/views/dataAnalysis/components/DataReGasStation.vue
index 6c4dca0..56e99c3 100644
--- a/src/views/dataAnalysis/components/DataReGasStation.vue
+++ b/src/views/dataAnalysis/components/DataReGasStation.vue
@@ -1,5 +1,5 @@
<template>
- <div style="margin-right: 30px" class="data-reMechanism">
+ <div style="margin-right: 30px" class="data-reMechanism" :class="{ 'trend-detail-open': trendDetailVisible }">
<div style="display: flex; align-items: center">
<div style="margin-right:12px;font-size:16px;font-weight:bold">瓒嬪娍鍒嗘瀽</div>
<a-radio-group v-model="trendAnalysisType" @change="trendAnalysisTypeChange">
@@ -9,10 +9,11 @@
<a-radio-button :value="3"> 閫氳繃鐜� </a-radio-button>
<a-radio-button :value="4"> 瀹㈡埛 </a-radio-button>
<a-radio-button :value="5"> 娴佸け鐜� </a-radio-button>
+ <a-radio-button :value="6"> 閿�鍞噾棰� </a-radio-button>
</a-radio-group>
</div>
<div>
- <div style="display: flex; align-items: flex-end; flex-direction: column">
+ <div class="trend-analysis-chart" :class="{ 'is-modal-open': trendDetailVisible }" style="display: flex; align-items: flex-end; flex-direction: column">
<a-radio-group
style="margin: 20px 0"
size="small"
@@ -31,6 +32,8 @@
:chartData="trendAnalysisData"
style="width: 100%"
:showpercent="trendAnalysisChartShowPercent"
+ :enablePointClick="true"
+ @chart-click="handleTrendChartClick"
></DataReLineChart>
</div>
<div id="trendAnalysisChartID"></div>
@@ -64,7 +67,7 @@
<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">
+ <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>
@@ -78,7 +81,7 @@
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.appearCount }}</span>
</div>
</div>
- <div class="fueling-overview-item">
+ <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>
@@ -120,7 +123,49 @@
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.rebackRate }}%</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.totalAmount }}</span>
+ <span style="color: #16b777" v-if="isContrast">{{ contrastObj.totalAmount }}</span>
+ </div>
+ </div>
</div>
+ </div>
+ <div class="oil-freq-compare-ct">
+ <div class="block-title">娲诲姩鍓嶅悗杞﹁締鍔犳补棰戞</div>
+ <div class="oil-freq-compare-operator">
+ <span>娲诲姩鍓嶆椂娈�</span>
+ <a-range-picker
+ style="width: 360px; margin: 0 12px"
+ :value="beforeTimeRange"
+ format="YYYY-MM-DD HH:mm:ss"
+ valueFormat="YYYY-MM-DD HH:mm:ss"
+ :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
+ @change="beforeTimeChange"
+ />
+ <span>娲诲姩鍚庢椂娈�</span>
+ <a-range-picker
+ style="width: 360px; margin: 0 12px"
+ :value="afterTimeRange"
+ format="YYYY-MM-DD HH:mm:ss"
+ valueFormat="YYYY-MM-DD HH:mm:ss"
+ :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
+ @change="afterTimeChange"
+ />
+ <a-button type="primary" @click="getOilFreqCompareData"> 缁熻棰戞 </a-button>
+ </div>
+ <a-table
+ class="oil-freq-compare-table"
+ rowKey="licenseNum"
+ size="middle"
+ :columns="oilFreqCompareColumns"
+ :dataSource="oilFreqCompareData"
+ :loading="oilFreqCompareLoading"
+ :scroll="{ y: 420 }"
+ :pagination="{ pageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50'] }"
+ >
+ </a-table>
</div>
<div>
<div class="block-title">杞﹀瀷鍒嗘瀽</div>
@@ -170,11 +215,61 @@
</div>
</div>
</div>
+ <div>
+ <div class="block-title">娌瑰搧绫诲瀷鍒嗘瀽</div>
+ <div style="display: flex">
+ <DataReLineChart
+ style="width: 70%"
+ domId="oilTypeLine"
+ ref="oilTypeLineRef"
+ :chartData="oilTypeLineData"
+ ></DataReLineChart>
+ <div style="width: 30%">
+ <a-radio-group v-model="oilTypeSpecies" size="small" @change="oilTypeSpeciesChange">
+ <a-radio-button :value="5"> 娌瑰搧閿�閲� </a-radio-button>
+ <a-radio-button :value="6"> 閿�鍞噾棰� </a-radio-button>
+ </a-radio-group>
+ <DataRePieChart
+ style="width: 100%"
+ domId="oilTypePie"
+ ref="oilTypePieRef"
+ :chartData="oilTypePieData"
+ ></DataRePieChart>
+ </div>
+ </div>
+ </div>
<TopTenCustomers
:customerData="customerObj"
:typeOneTotal="customerOneTotal"
:typeTwoTotal="customerTwoTotal"
></TopTenCustomers>
+ <a-modal
+ centered
+ width="70%"
+ :footer="null"
+ v-model="trendDetailVisible"
+ :title="trendDetailTitle"
+ :zIndex="5000"
+ :getContainer="getModalContainer"
+ wrapClassName="trend-detail-modal-wrap"
+ @cancel="closeTrendDetail"
+ >
+ <a-table
+ size="middle"
+ bordered
+ :columns="trendDetailColumns"
+ :dataSource="trendDetailData"
+ :loading="trendDetailLoading"
+ :scroll="{ y: 420 }"
+ :pagination="{ pageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50'] }"
+ :rowKey="
+ (record, index) => {
+ return record.id || record.licenseNum || record.captureTime || record.startTime || index
+ }
+ "
+ >
+ </a-table>
+ </a-modal>
</div>
</template>
@@ -183,6 +278,7 @@
import DataReLineChart from './DataReLineChart'
import DataRePieChart from './DataRePieChart'
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
+import moment from 'moment'
export default {
name: 'DataReMechanism',
components: {
@@ -209,6 +305,7 @@
description: '鏁版嵁鎶ヨ〃锛堝姞娌圭珯锛�',
vehicleTypeSpecies: 1,
fuelingStationSpecies: 2,
+ oilTypeSpecies: 5,
searchWay: '1',
isContrast: false,
activeTime: '',
@@ -223,15 +320,150 @@
vehicleTypePieData: {}, //杞﹀瀷鍒嗘瀽楗煎浘鏁版嵁
fuelLevelLineData: {}, //鍔犳补浣嶅垎鏋愭姌绾垮浘鏁版嵁
fuelLevelPieData: {}, //鍔犳补浣嶅垎鏋愰ゼ鍥炬暟鎹�
+ oilTypeLineData: {}, //娌瑰搧绫诲瀷鍒嗘瀽鎶樼嚎鍥炬暟鎹�
+ oilTypePieData: {}, //娌瑰搧绫诲瀷鍒嗘瀽楗煎浘鏁版嵁
vehicleTypeLineData: {}, //杞﹀瀷鍒嗘瀽鎶樼嚎鍥炬暟鎹�
trendAnalysisType: 0, //瓒嬪娍鍒嗘瀽閫夋嫨绫诲瀷
trendAnalysisUnit: 'DAYS', //瓒嬪娍鍒嗘瀽閫夋嫨鏃堕棿
trendAnalysisData: {}, //瓒嬪娍鍒嗘瀽鏁版嵁
trendAnalysisChart: null, //瓒嬪娍鍒嗘瀽鍥捐〃
+ trendDetailVisible: false,
+ trendDetailTitle: '瓒嬪娍鍒嗘瀽鏄庣粏',
+ trendDetailLoading: false,
+ trendDetailData: [],
+ trendDetailColumns: [],
+ beforeStartTime: '',
+ beforeEndTime: '',
+ afterStartTime: '',
+ afterEndTime: '',
+ beforeTimeRange: [],
+ afterTimeRange: [],
+ oilFreqCompareLoading: false,
+ oilFreqCompareData: [],
+ oilFreqCompareColumns: [
+ {
+ title: '杞︾墝鍙�',
+ align: 'center',
+ dataIndex: 'licenseNum',
+ },
+ {
+ title: '娲诲姩鍓嶅姞娌规鏁�',
+ align: 'center',
+ dataIndex: 'beforeOilCount',
+ },
+ {
+ title: '娲诲姩鍚庡姞娌规鏁�',
+ align: 'center',
+ dataIndex: 'afterOilCount',
+ },
+ {
+ title: '鍙樺寲鍊�',
+ align: 'center',
+ dataIndex: 'diffOilCount',
+ },
+ {
+ title: '鍙樺寲鐜�',
+ align: 'center',
+ dataIndex: 'diffRate',
+ customRender: function (t) {
+ if (t === null || t === undefined) {
+ return '--'
+ }
+ return t + '%'
+ },
+ },
+ ],
}
},
methods: {
+ moment,
+ getModalContainer() {
+ return document.body
+ },
+ getTrendDetailColumnsByType() {
+ let commonIndexColumn = {
+ title: '搴忓彿',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 80,
+ align: 'center',
+ customRender: function (t, r, index) {
+ return parseInt(index) + 1
+ },
+ }
+ if (this.trendAnalysisType == 0) {
+ return [
+ commonIndexColumn,
+ { title: '鎶撴媿鏃堕棿', align: 'center', dataIndex: 'captureTime' },
+ { title: '杞︽祦閲�', align: 'center', dataIndex: 'carCount' },
+ { title: '杞﹀瀷缂栫爜', align: 'center', dataIndex: 'modelCode' },
+ { title: '璁惧缂栫爜', align: 'center', dataIndex: 'cameraCode' },
+ ]
+ }
+ if (this.trendAnalysisType == 4 || this.trendAnalysisType == 5) {
+ return [
+ commonIndexColumn,
+ { title: '鏇存柊鏃堕棿', align: 'center', dataIndex: 'updateTimeSelf' },
+ { title: '杞︾墝鍙�', align: 'center', dataIndex: 'licenseNum' },
+ { title: '瀹㈡埛绫诲瀷', align: 'center', dataIndex: 'clientName' },
+ { title: '绱鍔犳补娆℃暟', align: 'center', dataIndex: 'oilCount' },
+ { title: '绱娌瑰搧閿�閲�', align: 'center', dataIndex: 'oilSum' },
+ ]
+ }
+ if (this.trendAnalysisType == 6) {
+ return [
+ commonIndexColumn,
+ { title: '杩涚珯鏃堕棿', align: 'center', dataIndex: 'startTime' },
+ { title: '杞︾墝鍙�', align: 'center', dataIndex: 'licenseNum' },
+ { title: '琛屼负绫诲瀷', align: 'center', dataIndex: 'behaviorText' },
+ { title: '鍔犳补浣�', align: 'center', dataIndex: 'oilPosition' },
+ { title: '娌瑰搧閿�閲�', align: 'center', dataIndex: 'oilVolume' },
+ { title: '閿�鍞噾棰�(鍏�)', align: 'center', dataIndex: 'totalAmount' },
+ { title: '閫氳繃鐜�(鍒�)', align: 'center', dataIndex: 'spandTime' },
+ ]
+ }
+ return [
+ commonIndexColumn,
+ { title: '杩涚珯鏃堕棿', align: 'center', dataIndex: 'startTime' },
+ { title: '杞︾墝鍙�', align: 'center', dataIndex: 'licenseNum' },
+ { title: '琛屼负绫诲瀷', align: 'center', dataIndex: 'behaviorText' },
+ { title: '鍔犳补浣�', align: 'center', dataIndex: 'oilPosition' },
+ { title: '娌瑰搧閿�閲�', align: 'center', dataIndex: 'oilVolume' },
+ { title: '閫氳繃鐜�(鍒�)', align: 'center', dataIndex: 'spandTime' },
+ ]
+ },
+ handleTrendChartClick(params) {
+ if (!params || !params.name) {
+ return
+ }
+ if (this.$refs.trendAnalysisLineRef && this.$refs.trendAnalysisLineRef.hideTooltip) {
+ this.$refs.trendAnalysisLineRef.hideTooltip()
+ }
+ this.trendDetailVisible = true
+ this.trendDetailTitle = '瓒嬪娍鍒嗘瀽鏄庣粏 - ' + params.name
+ this.trendDetailColumns = this.getTrendDetailColumnsByType()
+ this.trendDetailLoading = true
+ postAction('/jyz/dataTable/statTrendDetail', {
+ orgCode: this.selectTreeObj.orgCode,
+ startTime: this.startTime,
+ endTime: this.endTime,
+ trendType: this.trendAnalysisType,
+ timeUnit: this.trendAnalysisUnit,
+ statTime: params.name,
+ seriesName: params.seriesName,
+ })
+ .then((res) => {
+ this.trendDetailData = res.result || []
+ })
+ .finally(() => {
+ this.trendDetailLoading = false
+ })
+ },
+ closeTrendDetail() {
+ this.trendDetailVisible = false
+ this.trendDetailData = []
+ },
//鑾峰彇杞﹀瀷/鍔犳补浣嶆姌绾垮浘鏁版嵁
getVehicleTypeLineData() {
postAction('/jyz/dataTable/statisMidTable', {
@@ -287,10 +519,46 @@
this.fuelingStationSpecies = e.target.value
this.getFuelingStationPieData()
},
+ //鑾峰彇娌瑰搧绫诲瀷楗煎浘鏁版嵁
+ getOilTypePieData() {
+ postAction('/jyz/dataTable/statFan', {
+ orgCode: this.selectTreeObj.orgCode,
+ startTime: this.startTime,
+ endTime: this.endTime,
+ type: this.oilTypeSpecies,
+ }).then((res) => {
+ console.log(res)
+ this.oilTypePieData = res.result
+ this.$nextTick(() => {
+ this.$refs.oilTypePieRef.setChart()
+ })
+ })
+ },
+ //鑾峰彇娌瑰搧绫诲瀷鏌辩姸鍥炬暟鎹�
+ getOilTypeLineData() {
+ const barType = this.oilTypeSpecies == 5 ? 3 : 4
+ postAction('/jyz/dataTable/statBar', {
+ orgCode: this.selectTreeObj.orgCode,
+ startTime: this.startTime,
+ endTime: this.endTime,
+ type: barType,
+ }).then((res) => {
+ console.log(res)
+ this.oilTypeLineData = res.result
+ this.$nextTick(() => {
+ this.$refs.oilTypeLineRef.setChart()
+ })
+ })
+ },
+ oilTypeSpeciesChange(e) {
+ this.oilTypeSpecies = e.target.value
+ this.getOilTypePieData()
+ this.getOilTypeLineData()
+ },
//瓒嬪娍鍒嗘瀽绫诲瀷鍒囨崲
trendAnalysisTypeChange(e) {
let val = e.target.value
- if (val == 0 || val == 2 || val == 3 || val == 5) {
+ if (val == 0 || val == 2 || val == 3 || val == 5 || val == 6) {
this.trendAnalysisChartShowPercent = true
} else {
this.trendAnalysisChartShowPercent = false
@@ -340,15 +608,70 @@
this.contrastObj = res.result
})
},
+ beforeTimeChange(e, t) {
+ this.beforeTimeRange = t
+ this.beforeStartTime = t && t.length ? t[0] : ''
+ this.beforeEndTime = t && t.length ? t[1] : ''
+ },
+ afterTimeChange(e, t) {
+ this.afterTimeRange = t
+ this.afterStartTime = t && t.length ? t[0] : ''
+ this.afterEndTime = t && t.length ? t[1] : ''
+ },
+ setOilFreqDefaultRangeByActivity(activity) {
+ if (!activity || !activity.startTime || !activity.endTime) {
+ return
+ }
+ this.afterStartTime = activity.startTime
+ this.afterEndTime = activity.endTime
+ this.afterTimeRange = [this.afterStartTime, this.afterEndTime]
+ let startMoment = moment(activity.startTime)
+ let endMoment = moment(activity.endTime)
+ let spanSeconds = endMoment.diff(startMoment, 'seconds')
+ if (spanSeconds <= 0) {
+ return
+ }
+ this.beforeEndTime = startMoment.format('YYYY-MM-DD HH:mm:ss')
+ this.beforeStartTime = startMoment.clone().subtract(spanSeconds, 'seconds').format('YYYY-MM-DD HH:mm:ss')
+ this.beforeTimeRange = [this.beforeStartTime, this.beforeEndTime]
+ },
+ getOilFreqCompareData() {
+ if (!this.beforeStartTime || !this.beforeEndTime || !this.afterStartTime || !this.afterEndTime) {
+ this.oilFreqCompareData = []
+ return
+ }
+ this.oilFreqCompareLoading = true
+ postAction('/jyz/dataTable/statisOilFreqCompare', {
+ orgCode: this.selectTreeObj.orgCode,
+ beforeStartTime: this.beforeStartTime,
+ beforeEndTime: this.beforeEndTime,
+ afterStartTime: this.afterStartTime,
+ afterEndTime: this.afterEndTime,
+ })
+ .then((res) => {
+ this.oilFreqCompareData = res.result || []
+ })
+ .finally(() => {
+ this.oilFreqCompareLoading = false
+ })
+ },
activeTimeChange(e) {
console.log(e)
if (e) {
let item = this.activeOptions.find((el) => el.id == e)
this.startTime = item.startTime
this.endTime = item.endTime
+ this.setOilFreqDefaultRangeByActivity(item)
} else {
this.startTime = ''
this.endTime = ''
+ this.beforeStartTime = ''
+ this.beforeEndTime = ''
+ this.afterStartTime = ''
+ this.afterEndTime = ''
+ this.beforeTimeRange = []
+ this.afterTimeRange = []
+ this.oilFreqCompareData = []
}
},
activeChange() {},
@@ -389,7 +712,10 @@
this.getVehicleTypeLineData()
this.getVehicleStationPieData()
this.getFuelingStationPieData()
+ this.getOilTypePieData()
+ this.getOilTypeLineData()
this.getTrendAnalysis()
+ this.getOilFreqCompareData()
},
initData() {
this.getCustomerData()
@@ -398,6 +724,8 @@
this.getVehicleTypeLineData()
this.getVehicleStationPieData()
this.getFuelingStationPieData()
+ this.getOilTypePieData()
+ this.getOilTypeLineData()
this.getTrendAnalysis()
},
},
@@ -405,12 +733,32 @@
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')
+ }
+ }
+ const trendType = localStorage.getItem('trendAnalysisType')
+ if (trendType) {
+ this.trendAnalysisType = parseInt(trendType)
+ localStorage.removeItem('trendAnalysisType')
+ this.getTrendAnalysis()
+ }
+ }, 500)
+ })
+ },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-table-content {
- height: 500px;
+ height: auto;
.ant-table-placeholder {
background: none;
border: none;
@@ -420,7 +768,29 @@
background: #fff;
}
.data-reMechanism {
+ position: relative;
+ isolation: isolate;
+ > div {
+ position: relative;
+ z-index: 2;
+ }
+ > div:nth-child(2) {
+ z-index: 1;
+ }
+ &.trend-detail-open {
+ pointer-events: none;
+ }
+ .trend-analysis-chart {
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
+ }
+ .trend-analysis-chart.is-modal-open {
+ pointer-events: none;
+ }
.table-operator {
+ position: relative;
+ z-index: 2;
margin: 24px 0 0 0;
}
.block-title {
@@ -428,6 +798,8 @@
font-size: 16px;
}
.fueling-overview-ct {
+ position: relative;
+ z-index: 2;
// margin: 0 12px;
.fueling-overview-block {
display: flex;
@@ -443,5 +815,33 @@
}
}
}
+ .oil-freq-compare-ct {
+ position: relative;
+ z-index: 2;
+ margin: 8px 12px 24px 12px;
+ .oil-freq-compare-operator {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px 0;
+ margin: 12px 0;
+ }
+ .oil-freq-compare-table {
+ /deep/ .ant-table-body {
+ min-height: 240px;
+ }
+ /deep/ .ant-table-pagination.ant-pagination {
+ margin: 12px 0 4px 0;
+ }
+ }
+ }
+}
+</style>
+<style lang="less">
+.trend-detail-modal-wrap {
+ z-index: 5000 !important;
+}
+.trend-detail-modal-wrap + .ant-modal-mask {
+ z-index: 4999 !important;
}
</style>
--
Gitblit v1.8.0