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/analysisScreen/operationBigdata.vue | 90 +++++++++++++++++++++++++++++++--------------
1 files changed, 62 insertions(+), 28 deletions(-)
diff --git a/src/views/analysisScreen/operationBigdata.vue b/src/views/analysisScreen/operationBigdata.vue
index 5c6c829..ab63b7b 100644
--- a/src/views/analysisScreen/operationBigdata.vue
+++ b/src/views/analysisScreen/operationBigdata.vue
@@ -1,7 +1,8 @@
<template>
<div>
<div class="content">
- <div class="header_ct">{{ localInfo.operationViewName }}</div>
+ <div class="header_ct"><span class="blue-text">{{ localInfo.operationViewName }}</span>
+ 鍙鍖栧ぇ灞�</div>
<div class="tab_page">
<div class="operation">杩愯惀鏁版嵁鍒嗘瀽</div>
<div class="alarm" @click="goAlarmPage">鍛婅鏁版嵁鍒嗘瀽</div>
@@ -26,34 +27,34 @@
</div>
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
<div class="icon_ct">
- <div class="icon_fa">
+ <div class="icon_fa" @click="goToDataAnalysis">
<div class="icon_img_fa">
<img src="@/assets/img/bigdata/cheliuliang.png" alt="" />
</div>
<div class="icon_name">杞︽祦閲�</div>
<div class="icon_num">{{ overviewData.trafficFlow }}</div>
</div>
- <div class="icon_fa">
+ <div class="icon_fa" @click="goToDataAnalysis">
<div class="icon_img_fa">
<img src="@/assets/img/bigdata/jinzhanshu.png" alt="" />
</div>
<div class="icon_name">杩涚珯鏁�</div>
<div class="icon_num">{{ overviewData.inboundCount }}</div>
</div>
- <div class="icon_fa">
+ <div class="icon_fa" @click="goToDataAnalysis('oilCount')">
<div class="icon_img_fa">
<img src="@/assets/img/bigdata/jiayoushuliang.png" alt="" />
</div>
<div class="icon_name">鍔犳补鏁伴噺</div>
<div class="icon_num">{{ overviewData.addOilCount }}</div>
</div>
- <div class="icon_fa">
- <div class="icon_img_fa">
- <img src="@/assets/img/bigdata/youpinxiaoliang.png" alt="" />
- </div>
- <div class="icon_name">娌瑰搧閿�閲�</div>
- <div class="icon_num">{{ overviewData.saleOilCount }}</div>
- </div>
+<!-- <div class="icon_fa">-->
+<!-- <div class="icon_img_fa">-->
+<!-- <img src="@/assets/img/bigdata/youpinxiaoliang.png" alt="" />-->
+<!-- </div>-->
+<!-- <div class="icon_name">娌瑰搧閿�閲�</div>-->
+<!-- <div class="icon_num">{{ overviewData.saleOilCount }}</div>-->
+<!-- </div>-->
</div>
<div class="pie_chart_ct">
@@ -64,7 +65,7 @@
<div class="pie_self" id="refuelingRateChart"></div>
</div>
</div>
- <div class="block customer_statis">
+ <div class="block customer_statis" @click="goToCarInfo">
<div class="block_title">
<div>
<span class="blue_text">瀹㈡埛</span>
@@ -76,33 +77,33 @@
<div class="info_item">
<div class="info_num">{{ customerStatData.prospectCount }}</div>
<div class="info_name">娼滃湪瀹㈡埛</div>
- <!-- <div class="change_ct">
+ <div class="change_ct">
<img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
- <div class="change_num">20%</div>
- </div> -->
+ <div class="change_num">{{ prospectChangePercent }}%</div>
+ </div>
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
</div>
<div class="info_item">
<div class="info_num">{{ customerStatData.generalCustomerCount }}</div>
<div class="info_name">涓�鑸鎴�</div>
- <!-- <div class="change_ct">
+ <div class="change_ct">
<img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
- <div class="change_num">20%</div>
- </div> -->
+ <div class="change_num">{{ generalCustomerChangePercent }}%</div>
+ </div>
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
</div>
<div class="info_item">
<div class="info_num">{{ customerStatData.loyalCustomerCount }}</div>
<div class="info_name">蹇犲疄瀹㈡埛</div>
- <!-- <div class="change_ct">
- <img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
- <div class="change_num">20%</div>
- </div> -->
+ <div class="change_ct change_ct_red">
+ <img class="change_icon" src="@/assets/img/bigdata/x1.png" alt="" />
+ <div class="change_num">{{ loyalCustomerChangePercent }}%</div>
+ </div>
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
</div>
</div>
</div>
- <div class="block traffic_statis">
+ <div class="block traffic_statis" @click="goToDataAnalysis">
<div class="block_title">
<div>
<span class="blue_text">杞︽祦閲�</span>
@@ -125,7 +126,7 @@
<!-- <img class="person_img" src="@/assets/img/bigdata/person.png" alt="" />
<img class="car_img" src="@/assets/img/bigdata/car.png" alt="" /> -->
</div>
- <div class="block refueling_statis">
+ <div class="block refueling_statis" @click="goToDataAnalysis">
<div class="block_title">
<div>
<span class="blue_text">鍔犳补</span>
@@ -163,7 +164,7 @@
</div>
</div>
</div>
- <div class="block vehicle_type_distribution">
+ <div class="block vehicle_type_distribution" @click="goToCarInfo">
<div class="block_title">
<div>
<span class="blue_text">杞﹀瀷</span>
@@ -183,11 +184,11 @@
</div>
</div>
</div>
- <div class="block monthly_sales_statis">
+ <div class="block monthly_sales_statis" @click="goToSales">
<div class="block_title">
<div>
- <span class="blue_text">閿�鍞�</span>
- <span>瓒嬪娍</span>
+ <span class="blue_text">鏈堝害閿�鍞�</span>
+ <span>缁熻</span>
</div>
</div>
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
@@ -234,6 +235,9 @@
salesStatData: {}, //閿�鍞秼鍔挎暟鎹�
updateDataTimer: null,
localInfo: {},
+ prospectChangePercent: 0, //娼滃湪瀹㈡埛鍙樺寲鐧惧垎姣�
+ generalCustomerChangePercent: 0, //涓�鑸鎴峰彉鍖栫櫨鍒嗘瘮
+ loyalCustomerChangePercent: 0, //蹇犲疄瀹㈡埛鍙樺寲鐧惧垎姣�
}
},
created() {
@@ -243,6 +247,7 @@
}, 1000)
this.localInfo = JSON.parse(localStorage.getItem('localInfo'))
document.title = this.localInfo.operationViewName
+ this.generateRandomChangePercents()
},
mounted() {
this.initData()
@@ -259,6 +264,11 @@
})
},
methods: {
+ generateRandomChangePercents() {
+ this.prospectChangePercent = 20
+ this.generalCustomerChangePercent = 12
+ this.loyalCustomerChangePercent = 16
+ },
initData() {
this.getOverviewData()
this.getCustomerStatData()
@@ -271,11 +281,27 @@
goAlarmPage() {
window.location.href = window.location.origin + '/analysisScreen/alarmBigdata'
},
+ goToDataAnalysis(target) {
+ const scrollTarget = target === 'oilCount' ? 'oil-count-card' : 'traffic-flow-card'
+ localStorage.setItem('scrollToTarget', scrollTarget)
+ if (target === 'oilCount') {
+ localStorage.setItem('trendAnalysisType', '1')
+ }
+ window.location.href = window.location.origin + '/data/DataReport'
+ },
+ goToCarInfo() {
+ window.location.href = window.location.origin + '/data/carInfo'
+ },
+ goToSales() {
+ window.location.href = window.location.origin + '/data/sales'
+ },
//鑾峰彇杩愯惀姒傚喌鏁版嵁
getOverviewData() {
getAction('/jyz/operationData/overview', {}).then((res) => {
+ console.log('杩愯惀姒傚喌鏁版嵁')
console.log(res)
this.overviewData = res.result
+
this.setTurnInRateChart()
this.setRefuelingRateChart()
})
@@ -1367,6 +1393,10 @@
text-align: center;
font-size: 40px;
color: #fff;
+ .blue-text {
+ color: #5a81f9;
+ }
+
}
.tab_page {
display: flex;
@@ -1668,6 +1698,10 @@
margin-right: 4px;
}
}
+ .change_ct_red {
+ border: 1px solid #9f5e5e;
+ background: #7a3131;
+ }
.info_foot_icon {
margin-top: -3vh;
}
--
Gitblit v1.8.0