450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template>
|
||
<view class="service-area-overview">
|
||
<!-- 标题 -->
|
||
<view class="section-title">服务区概况</view>
|
||
|
||
<!-- 服务区类型统计 - 第一行 -->
|
||
<view class="metrics-row">
|
||
<view class="metric-card full-width">
|
||
<text class="metric-value" style="color: #56BCE6;">{{ serviceData.ServerpartTotalCount || 0 }}</text>
|
||
<text class="metric-label">管理站点/座</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区类型统计 - 第二行 -->
|
||
<view class="metrics-row">
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #56BCE6;">{{ serviceData.serviceAllTotal || 0 }}</text>
|
||
<text class="metric-label">服务区/座</text>
|
||
</view>
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #ef5a0d;">{{ serviceData.ParkingServiceCount || 0 }}</text>
|
||
<text class="metric-label">停车区/座</text>
|
||
</view>
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #1aba80;">{{ serviceData.WaterStationCount || 0 }}</text>
|
||
<text class="metric-label">加水站/座</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区类型统计 - 第三行 -->
|
||
<view class="metrics-row">
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #f41a09;">{{ serviceData.ViewingDeckCount || 0 }}</text>
|
||
<text class="metric-label">观景台/座</text>
|
||
</view>
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #b5ebf7;">{{ serviceData.RestAreaCount || 0 }}</text>
|
||
<text class="metric-label">休息区/座</text>
|
||
</view>
|
||
<view class="metric-card">
|
||
<text class="metric-value" style="color: #757575;">{{ serviceData.ClosedCount || 0 }}</text>
|
||
<text class="metric-label">关停/座</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设备设施分布图 -->
|
||
<view class="chart-title">设备设施</view>
|
||
<view class="chart-section">
|
||
<view class="chart-container">
|
||
<!-- 图表加载效果 -->
|
||
<ChartLoading v-if="!hasFacilityData" text="数据加载中..." />
|
||
<!-- 实际图表 -->
|
||
<QiunDataCharts v-else type="column" :opts="facilityChartOpts" :chartData="facilityChartData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="facilityChart" tooltipFormat="facilityChartData" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务承载状态 -->
|
||
<view class="load-section">
|
||
<view class="section-title">服务承载</view>
|
||
<view class="load-cards">
|
||
<view class="load-card busy">
|
||
<view class="load-icon">🔥</view>
|
||
<view class="load-content">
|
||
<text class="load-title">繁忙</text>
|
||
<view class="load-value">
|
||
<text class="load-number">{{ loadData.busy }}</text>
|
||
<text class="load-unit">座</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="load-card idle">
|
||
<view class="load-icon">😊</view>
|
||
<view class="load-content">
|
||
<text class="load-title">空闲</text>
|
||
<view class="load-value">
|
||
<text class="load-number">{{ loadData.idle }}</text>
|
||
<text class="load-unit">座</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区类型分布饼图 -->
|
||
<view class="chart-title">服务区类型分布</view>
|
||
<view class="chart-section">
|
||
<view class="chart-container">
|
||
<!-- 图表加载效果 -->
|
||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||
<!-- 实际饼图 -->
|
||
<QiunDataCharts v-else type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
import ChartLoading from './ChartLoading.vue'
|
||
import request from "@/util/index.js";
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts,
|
||
ChartLoading
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
serviceData: {
|
||
ServerpartTotalCount: 0, // 管理站点
|
||
serviceAllTotal: 0, // 服务区
|
||
ParkingServiceCount: 0, // 停车区
|
||
WaterStationCount: 0, // 加水站
|
||
ViewingDeckCount: 0, // 观景台
|
||
RestAreaCount: 0, // 休息区
|
||
ClosedCount: 0, // 关停
|
||
REFUELINGGUNTotal: 0, // 加油站
|
||
ChargingStationTotal: 0, // 充电桩
|
||
HASPILOTLOUNGETotal: 0, // 司机之家
|
||
NursingRoomTotal: 0, // 母婴室
|
||
URECOUNTTotal: 0, // 尿素
|
||
WaterCount: 0 // 加水
|
||
},
|
||
loadData: {
|
||
busy: 0,
|
||
idle: 0
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 判断设施数据是否已加载
|
||
hasFacilityData() {
|
||
return this.serviceData.REFUELINGGUNTotal > 0 ||
|
||
this.serviceData.ChargingStationTotal > 0 ||
|
||
this.serviceData.HASPILOTLOUNGETotal > 0 ||
|
||
this.serviceData.NursingRoomTotal > 0 ||
|
||
this.serviceData.URECOUNTTotal > 0 ||
|
||
this.serviceData.WaterCount > 0;
|
||
},
|
||
|
||
// 判断饼图数据是否已加载
|
||
hasPieData() {
|
||
return this.serviceData.serviceAllTotal > 0 ||
|
||
this.serviceData.ParkingServiceCount > 0 ||
|
||
this.serviceData.WaterStationCount > 0 ||
|
||
this.serviceData.ViewingDeckCount > 0 ||
|
||
this.serviceData.RestAreaCount > 0 ||
|
||
this.serviceData.ClosedCount > 0;
|
||
},
|
||
|
||
// 设备设施数据
|
||
facilityChartData() {
|
||
return {
|
||
categories: ['加油站', '充电桩', '司机之家', '母婴室', '尿素', '加水'],
|
||
series: [{
|
||
name: '设施数量',
|
||
data: [
|
||
this.serviceData.REFUELINGGUNTotal,
|
||
this.serviceData.ChargingStationTotal,
|
||
this.serviceData.HASPILOTLOUNGETotal,
|
||
this.serviceData.NursingRoomTotal,
|
||
this.serviceData.URECOUNTTotal,
|
||
this.serviceData.WaterCount
|
||
]
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 设备设施图表配置
|
||
facilityChartOpts() {
|
||
return {
|
||
color: ['#1890FF', '#52C41A', '#FAAD14', '#F5222D', '#722ED1', '#13C2C2'],
|
||
padding: [15, 15, 0, 15],
|
||
dataLabel: true,
|
||
legend: {
|
||
show: true
|
||
},
|
||
xAxis: {
|
||
itemCount: 6,
|
||
scrollShow: false,
|
||
fontSize: 12
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
showTitle: true,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
title: '设施数量(个)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: -5,
|
||
titleOffsetX: 0,
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 10,
|
||
barBorderCircle: true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 服务区类型饼图数据
|
||
areaTypePieData() {
|
||
return {
|
||
series: [{
|
||
data: [
|
||
{ name: '服务区', value: this.serviceData.serviceAllTotal },
|
||
{ name: '停车区', value: this.serviceData.ParkingServiceCount },
|
||
{ name: '加水站', value: this.serviceData.WaterStationCount },
|
||
{ name: '观景台', value: this.serviceData.ViewingDeckCount },
|
||
{ name: '休息区', value: this.serviceData.RestAreaCount },
|
||
{ name: '关停', value: this.serviceData.ClosedCount }
|
||
].filter(item => item.value > 0)
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 服务区类型饼图配置
|
||
areaTypePieOpts() {
|
||
return {
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: true,
|
||
position: 'right',
|
||
float: 'center',
|
||
padding: 5,
|
||
margin: 10
|
||
},
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
labelWidth: 0,
|
||
border: true,
|
||
borderWidth: 0, // 设置边框宽度为0，消除扇形间隔
|
||
borderColor: '#FFFFFF' // 边框颜色设为白色
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.handleGetData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取服务区数据
|
||
async handleGetData() {
|
||
this.isLoading = true
|
||
// 获取服务区基础设施汇总数据
|
||
await this.handleGetServerpartServiceSummary()
|
||
// 获取服务区繁忙度数据
|
||
await this.handleGetCurBusyRank()
|
||
this.isLoading = false
|
||
},
|
||
|
||
// 获取服务区基础设施汇总数据
|
||
async handleGetServerpartServiceSummary() {
|
||
const req = {
|
||
ProvinceCode: "530000",
|
||
type: "encryption"
|
||
}
|
||
const data = await request.$apiPost('CommercialApi/BaseInfo/GetServerpartServiceSummary', req)
|
||
|
||
if (data && data.Result_Data) {
|
||
const resultData = data.Result_Data
|
||
this.serviceData = {
|
||
ServerpartTotalCount: resultData.ServerpartTotalCount || 0,
|
||
serviceAllTotal: resultData.ServerpartCount || 0,
|
||
ParkingServiceCount: resultData.ParkingServiceCount || 0,
|
||
WaterStationCount: resultData.WaterStationCount || 0,
|
||
ViewingDeckCount: resultData.ViewingDeckCount || 0,
|
||
RestAreaCount: resultData.RestAreaCount || 0,
|
||
ClosedCount: resultData.ClosedCountCount || 0,
|
||
REFUELINGGUNTotal: resultData.GasStationCount || 0,
|
||
ChargingStationTotal: resultData.ChargeStationCount || 0,
|
||
HASPILOTLOUNGETotal: resultData.DriverRoomCount || 0,
|
||
NursingRoomTotal: resultData.NursingRoomCount || 0,
|
||
URECOUNTTotal: resultData.UreaCount || 0,
|
||
WaterCount: resultData.WaterCount || 0
|
||
}
|
||
}
|
||
},
|
||
|
||
// 获取服务区繁忙度数据
|
||
async handleGetCurBusyRank() {
|
||
const req = {
|
||
ProvinceCode: '530000',
|
||
ServerpartId: "",
|
||
DataType: '1',
|
||
type: "encryption"
|
||
}
|
||
const busyData = await request.$apiPost('CommercialApi/BigData/GetCurBusyRank', req)
|
||
|
||
if (busyData && busyData.Result_Data && busyData.Result_Data.OtherData) {
|
||
const otherData = busyData.Result_Data.OtherData
|
||
this.loadData = {
|
||
busy: otherData.value || 0,
|
||
idle: otherData.data || 0
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
async handleUpdatePie() {
|
||
this.handleGetData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.metrics-row {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.metric-card {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-card.full-width {
|
||
width: 100%;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
display: block;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.chart-section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 24rpx 0;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.load-section {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.load-cards {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.load-card {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 24rpx;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.load-card.busy {
|
||
background: linear-gradient(135deg, #F87D75, #FF4D4F);
|
||
}
|
||
|
||
.load-card.idle {
|
||
background: linear-gradient(135deg, #75F8EE, #13C2C2);
|
||
}
|
||
|
||
.load-icon {
|
||
font-size: 48rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.load-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.load-title {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
margin-bottom: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.load-value {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.load-number {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.load-unit {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
</style> |