|
|
<template>
|
|
|
<div class="data-screen" ref="dataScreen">
|
|
|
<!-- 背景 -->
|
|
|
<div class="screen-background"></div>
|
|
|
|
|
|
<!-- 标题 -->
|
|
|
<div class="screen-header">
|
|
|
<img src="../../assets/jsc/jsc-title.png" alt="" />
|
|
|
</div>
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
|
<div class="screen-content">
|
|
|
<!-- 左侧区域 -->
|
|
|
<div class="left-section">
|
|
|
<!-- 校友数据卡片 -->
|
|
|
<div class="data-cards-container warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="data-card alumni-card">
|
|
|
<div class="card-icon">
|
|
|
<div class="icon-pyramid">
|
|
|
<img src="../../assets/jsc/icon1.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
<div class="card-label">校友总数</div>
|
|
|
<div class="card-value">{{ schoolmate_total }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-card yearly-card">
|
|
|
<div class="card-icon">
|
|
|
<div class="icon-pyramid blue">
|
|
|
<img src="../../assets/jsc/icon2.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
<div class="card-label">2025年校友数</div>
|
|
|
<div class="card-value">{{ schoolmate_year }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 课堂分类饼图 -->
|
|
|
<div class="chart-container warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="chart-title"><span>课堂分类</span></div>
|
|
|
<div class="pie-chart" ref="pieChart"></div>
|
|
|
<div class="chart-legend">
|
|
|
<div v-for="item in pieData" :key="item.name" class="legend-item">
|
|
|
<span class="legend-color" :style="{ backgroundColor: item.color }"></span>
|
|
|
<span class="legend-text">{{ item.name }} {{ item.percentage }}%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 中间地图区域 -->
|
|
|
<div class="center-section warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="map-container">
|
|
|
<div class="map-title">
|
|
|
<span>苏州地区校友分布</span>
|
|
|
</div>
|
|
|
<div class="map-tabs">
|
|
|
<!-- <div class="tab active">苏州</div>
|
|
|
<div class="tab">全国</div> -->
|
|
|
</div>
|
|
|
<div class="map-chart" ref="mapChart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧区域 -->
|
|
|
<div class="right-section">
|
|
|
<!-- 企业数据卡片 -->
|
|
|
<div class="enterprise-cards">
|
|
|
<!-- 第一行：开课场次和开课天数 -->
|
|
|
<div class="enterprise-card warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="card-content-wrapper">
|
|
|
<div class="card-icon-3d">
|
|
|
<img src="../../assets/jsc/icon7.png" alt="">
|
|
|
</div>
|
|
|
<div class="card-info">
|
|
|
<div class="card-desc">开课场次</div>
|
|
|
<div class="card-number">{{course_total}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="enterprise-card warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="card-content-wrapper">
|
|
|
<div class="card-icon-3d">
|
|
|
<img src="../../assets/jsc/icon8.png" alt="">
|
|
|
</div>
|
|
|
<div class="card-info">
|
|
|
<div class="card-desc">开课天数</div>
|
|
|
<div class="card-number">{{course_day_total}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第二行：当年开课场次和当年开课天数 -->
|
|
|
<div class="enterprise-card warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="card-content-wrapper">
|
|
|
<div class="card-icon-3d">
|
|
|
<img src="../../assets/jsc/icon7.png" alt="">
|
|
|
</div>
|
|
|
<div class="card-info">
|
|
|
<div class="card-desc">{{currentYear}}</div>
|
|
|
<div class="card-desc">开课场次</div>
|
|
|
<div class="card-number">{{course_year_total}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="enterprise-card warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="card-content-wrapper">
|
|
|
<div class="card-icon-3d">
|
|
|
<img src="../../assets/jsc/icon8.png" alt="">
|
|
|
</div>
|
|
|
<div class="card-info">
|
|
|
<div class="card-desc">{{currentYear}}</div>
|
|
|
<div class="card-desc">开课天数</div>
|
|
|
<div class="card-number">{{course_year_day_total}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 校友企业所属领域 -->
|
|
|
<div class="field-chart-container warehouse-table">
|
|
|
<!-- 四个角的三角形 -->
|
|
|
<div class="corner top-left"></div>
|
|
|
<div class="corner top-right"></div>
|
|
|
<div class="corner bottom-left"></div>
|
|
|
<div class="corner bottom-right"></div>
|
|
|
<div class="chart-title" style="padding: 2.5vh 0;margin-bottom:0">校友企业所属领域</div>
|
|
|
<div class="field-chart-custom">
|
|
|
<div v-for="(item, index) in fieldData" :key="item.name" class="chart-item">
|
|
|
<div class="item-left">
|
|
|
<div class="number-circle" :style="{ backgroundColor: item.color }">
|
|
|
{{ index + 1 }}
|
|
|
</div>
|
|
|
<span class="item-name">{{ item.name }}</span>
|
|
|
</div>
|
|
|
<div class="item-right">
|
|
|
<div class="bar-container">
|
|
|
<div
|
|
|
class="bar"
|
|
|
:style="{
|
|
|
width: (item.value / fieldData[0].value * 100) + '%',
|
|
|
background: `linear-gradient(90deg, ${item.color}40, ${item.color})`
|
|
|
}"
|
|
|
></div>
|
|
|
</div>
|
|
|
<span class="item-value">{{ item.value }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
import {
|
|
|
home
|
|
|
} from "@/api/homeChart.js"
|
|
|
import szMapData from './szmap.json'
|
|
|
export default {
|
|
|
name: 'JSCDataScreen',
|
|
|
data() {
|
|
|
return {
|
|
|
// 校友数据
|
|
|
schoolmate_total: 0,
|
|
|
schoolmate_year: 0,
|
|
|
|
|
|
// 饼图数据
|
|
|
colorList:['#FFB020','#FF6B47','#4299FF','#FF6B9D','#00E5CC','#1890FF','#52C41A','#9254DE','#52C41A','#FFB020','#FF6B47','#4299FF','#FF6B9D','#00E5CC','#1890FF','#52C41A','#9254DE','#52C41A'],
|
|
|
pieData: [],
|
|
|
|
|
|
// 地图数据
|
|
|
mapData: [],
|
|
|
company_market:0,
|
|
|
company_fund:0,
|
|
|
valuation:0,
|
|
|
// 课程统计数据
|
|
|
course_total: 0,
|
|
|
course_day_total: 0,
|
|
|
course_year_total: 0,
|
|
|
course_year_day_total: 0,
|
|
|
// 当前年份
|
|
|
currentYear: new Date().getFullYear(),
|
|
|
// 领域数据（按值从高到低排序）
|
|
|
fieldData: []
|
|
|
}
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
this.$store.dispatch('app/closeSideBar', {
|
|
|
withoutAnimation: false
|
|
|
})
|
|
|
this.getHomeChart()
|
|
|
// this.initCharts()
|
|
|
this.handleResize()
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
window.removeEventListener('resize', this.handleResize)
|
|
|
if (this.pieChartInstance) this.pieChartInstance.dispose()
|
|
|
if (this.mapChartInstance) this.mapChartInstance.dispose()
|
|
|
// fieldChartInstance 不再需要，因为使用 CSS 实现
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
// 获取数据
|
|
|
async getHomeChart() {
|
|
|
const res = await home()
|
|
|
console.log('API返回数据:', res) // 调试用
|
|
|
|
|
|
// 校友人数
|
|
|
this.schoolmate_total = res.schoolmate.schoolmate_total
|
|
|
this.schoolmate_year = res.schoolmate.schoolmate_year
|
|
|
// 课堂分类
|
|
|
const total = res.courseTypes.reduce((sum, item) => {
|
|
|
// 处理不存在year_total或非数字的情况，转为数字后累加
|
|
|
const yearTotal = Number(item.course_signs_total ?? 0);
|
|
|
return sum + yearTotal;
|
|
|
}, 0);
|
|
|
res.courseTypes.map((item,index)=>{
|
|
|
const yearTotal = Number(item.course_signs_total ?? 0);
|
|
|
// 避免总和为0时的除以0错误
|
|
|
const ratio = total === 0 ? 0 : (yearTotal / total);
|
|
|
this.pieData.push(
|
|
|
{
|
|
|
name: item.name,
|
|
|
value: item.course_signs_total?item.course_signs_total:0,
|
|
|
color: this.colorList[index],
|
|
|
percentage: Number(ratio * 100).toFixed(2)
|
|
|
}
|
|
|
)
|
|
|
})
|
|
|
// 苏州地图
|
|
|
res.suzhou.map(item=>{
|
|
|
this.mapData.push({
|
|
|
name: item.company_area,
|
|
|
value: item.company_total
|
|
|
})
|
|
|
})
|
|
|
// 企业估值
|
|
|
this.company_market = res.company.company_market
|
|
|
this.company_fund = res.company.company_fund
|
|
|
this.valuation = res.company.valuation
|
|
|
|
|
|
// 课程统计 - 从 res.company 获取数据
|
|
|
this.course_total = res.company.course_total || 0
|
|
|
this.course_day_total = res.company.course_day_total || 0
|
|
|
this.course_year_total = res.company.course_total_year || 0
|
|
|
this.course_year_day_total = res.company.course_day_total_year || 0
|
|
|
|
|
|
// 所属领域
|
|
|
res.industryTotal.sort((a, b) => b.total - a.total).map((item,index)=>{
|
|
|
this.fieldData.push({
|
|
|
name:item.industry,
|
|
|
value:item.total,
|
|
|
color:this.colorList[index]
|
|
|
})
|
|
|
})
|
|
|
|
|
|
this.initCharts()
|
|
|
},
|
|
|
// 初始化图表
|
|
|
initCharts() {
|
|
|
this.$nextTick(() => {
|
|
|
this.initPieChart()
|
|
|
this.initMapChart()
|
|
|
// fieldChart 现在使用 CSS 实现，不需要初始化
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 初始化饼图
|
|
|
initPieChart() {
|
|
|
this.pieChartInstance = echarts.init(this.$refs.pieChart)
|
|
|
|
|
|
const option = {
|
|
|
backgroundColor: 'rgba(14, 87, 180, 0.1)',
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{b}: {c}人 ({d}%)',
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
borderColor: '#3b82f6',
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
name: '课堂分类',
|
|
|
type: 'pie',
|
|
|
radius: ['15%', '75%'],
|
|
|
center: ['50%', '50%'],
|
|
|
roseType: 'area',
|
|
|
data: this.pieData.map(item => ({
|
|
|
name: item.name,
|
|
|
value: item.value,
|
|
|
itemStyle: {
|
|
|
color: item.color,
|
|
|
borderRadius: 5,
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
|
}
|
|
|
})),
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'outside',
|
|
|
formatter: function(params) {
|
|
|
return params.name + '\n' + params.value + '人'
|
|
|
},
|
|
|
fontSize: 12,
|
|
|
fontWeight: 'bold',
|
|
|
color: '#ffffff',
|
|
|
lineHeight: 16
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: true,
|
|
|
length: 15,
|
|
|
length2: 10,
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
|
width: 2
|
|
|
}
|
|
|
},
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 20,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowOffsetY: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
},
|
|
|
label: {
|
|
|
fontSize: 14
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
}
|
|
|
|
|
|
this.pieChartInstance.setOption(option)
|
|
|
},
|
|
|
|
|
|
// 初始化地图
|
|
|
initMapChart() {
|
|
|
this.mapChartInstance = echarts.init(this.$refs.mapChart)
|
|
|
|
|
|
// 注册苏州地图数据
|
|
|
echarts.registerMap('suzhou', szMapData)
|
|
|
|
|
|
// 调试：检查工业园区
|
|
|
const industrialPark = szMapData.features.find(f => f.properties.name === '工业园区')
|
|
|
console.log('工业园区地图数据:', industrialPark ? '存在' : '不存在')
|
|
|
|
|
|
const industrialParkData = this.mapData.find(d => d.name === '工业园区')
|
|
|
console.log('工业园区数据:', industrialParkData)
|
|
|
|
|
|
const option = {
|
|
|
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: function(params) {
|
|
|
if (params.data) {
|
|
|
return `${params.name}: ${params.data.value || 0}位校友`
|
|
|
}
|
|
|
return `${params.name}: 0位校友`
|
|
|
},
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
borderColor: '#3b82f6',
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
visualMap: {
|
|
|
min: 0,
|
|
|
max: Math.max(...this.mapData.map(item => item.value)),
|
|
|
inRange: {
|
|
|
color: ['#e0f2ff', '#75c2f6', '#3b82f6', '#1d4ed8']
|
|
|
},
|
|
|
show: false
|
|
|
},
|
|
|
series: [{
|
|
|
name: '校友分布',
|
|
|
type: 'map',
|
|
|
map: 'suzhou',
|
|
|
roam: false,
|
|
|
zlevel: 1,
|
|
|
zoom: 0.95,
|
|
|
center: [120.65, 31.32],
|
|
|
data: this.mapData.map(item => ({
|
|
|
name: item.name,
|
|
|
value: item.value,
|
|
|
itemStyle: item.name === '工业园区' ? {
|
|
|
borderColor: 'red',
|
|
|
borderWidth: 2,
|
|
|
areaColor: 'rgba(255, 0, 0, 0.3)'
|
|
|
} : undefined
|
|
|
})),
|
|
|
itemStyle: {
|
|
|
borderColor: '#ffffff',
|
|
|
borderWidth: 2,
|
|
|
shadowBlur: 4,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.4)',
|
|
|
shadowOffsetX: 1,
|
|
|
shadowOffsetY: 1
|
|
|
},
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
areaColor: 'rgba(59, 130, 246, 0.5)',
|
|
|
borderColor: 'transparent',
|
|
|
borderWidth: 5,
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: 'rgba(59, 130, 246, 0.5)'
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'outside',
|
|
|
color: '#333',
|
|
|
fontSize: 11,
|
|
|
fontWeight: 'bold',
|
|
|
padding: [6, 12],
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
borderRadius: 15,
|
|
|
borderColor: '#1ea8f9',
|
|
|
borderWidth: 2,
|
|
|
shadowBlur: 8,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
formatter: function(params) {
|
|
|
return params.name + ': ' + (params.value || 0) + '人'
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: true,
|
|
|
length: 20,
|
|
|
length2: 15,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
|
width: 2,
|
|
|
type: 'solid'
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
}
|
|
|
|
|
|
this.mapChartInstance.setOption(option)
|
|
|
},
|
|
|
|
|
|
// 领域图表现在使用 CSS 实现，不需要 ECharts 初始化
|
|
|
|
|
|
// 响应式处理
|
|
|
handleResize() {
|
|
|
this.$nextTick(() => {
|
|
|
if (this.pieChartInstance) this.pieChartInstance.resize()
|
|
|
if (this.mapChartInstance) this.mapChartInstance.resize()
|
|
|
// fieldChart 使用 CSS 实现，不需要 resize
|
|
|
})
|
|
|
},
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.data-screen {
|
|
|
position: relative;
|
|
|
width: calc(100vw - 54px);
|
|
|
height: 100vh;
|
|
|
background: url("../../assets/jsc/bg.png") no-repeat left top;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
overflow: scroll;
|
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.screen-header {
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
width: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.screen-content {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 10vh);
|
|
|
padding: 2vh 2vw;
|
|
|
gap: 2vw;
|
|
|
}
|
|
|
|
|
|
/* 左侧区域 */
|
|
|
.left-section {
|
|
|
flex: 0 0 25%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 2vh;
|
|
|
}
|
|
|
|
|
|
.data-cards-container {
|
|
|
flex: 0 0 35%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
gap: 1.5vw;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
|
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
|
border-radius: 8px;
|
|
|
padding: 2vh 1.5vw;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.data-card {
|
|
|
flex: 1;
|
|
|
background: transparent;
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
padding: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.card-icon {
|
|
|
margin-right: 0;
|
|
|
margin-bottom: 1vh;
|
|
|
}
|
|
|
|
|
|
.icon-pyramid {
|
|
|
width: 3vw;
|
|
|
height: 3vw;
|
|
|
min-width: 133px;
|
|
|
min-height: 133px;
|
|
|
position: relative;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.card-label {
|
|
|
color: #fff;
|
|
|
font-size: 1.2vw;
|
|
|
margin-bottom: 0.5vh;
|
|
|
min-font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.card-value {
|
|
|
color: #dc9c61;
|
|
|
font-size: 2.5vw;
|
|
|
font-weight: bold;
|
|
|
text-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
|
|
|
min-font-size: 24px;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
flex: 1;
|
|
|
max-height: 60vh;
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
|
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
|
border-radius: 8px;
|
|
|
padding: 1.5vh 1vw;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.chart-title {
|
|
|
color: #93ccfd;
|
|
|
font-size: 1.2vw;
|
|
|
text-align: center;
|
|
|
margin-bottom: 1vh;
|
|
|
min-font-size: 14px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.chart-title span {
|
|
|
font-size: 1.2vw;
|
|
|
margin-bottom: 2.5vh;
|
|
|
min-font-size: 14px;
|
|
|
padding: 2.5vh 0;
|
|
|
display: inline-block;
|
|
|
width: 80%;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
|
|
|
/* 移除原来的border-bottom */
|
|
|
border-bottom: none;
|
|
|
|
|
|
/* 使用伪元素创建更漂亮的横线 */
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,
|
|
|
transparent 0%,
|
|
|
#8edbef 20%,
|
|
|
#8edbef 50%,
|
|
|
#8edbef 80%,
|
|
|
transparent 100%);
|
|
|
border-radius: 1px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pie-chart {
|
|
|
height: 20vh;
|
|
|
min-height: 200px;
|
|
|
}
|
|
|
|
|
|
.chart-legend {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 0.5vh;
|
|
|
margin-top: 1vh;
|
|
|
}
|
|
|
|
|
|
.legend-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 0.8vw;
|
|
|
color: #35d4dd;
|
|
|
min-font-size: 10px;
|
|
|
}
|
|
|
|
|
|
.legend-color {
|
|
|
width: 0.8vw;
|
|
|
height: 0.8vw;
|
|
|
min-width: 8px;
|
|
|
min-height: 8px;
|
|
|
border-radius: 2px;
|
|
|
margin-right: 0.5vw;
|
|
|
}
|
|
|
|
|
|
/* 中间区域 */
|
|
|
.center-section {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 2vh 1.5vw;
|
|
|
position: relative;
|
|
|
|
|
|
/* 增强立体效果 */
|
|
|
background: linear-gradient(135deg,
|
|
|
rgba(14, 87, 180, 0.1) 0%,
|
|
|
rgba(109, 205, 230, 0.05) 50%,
|
|
|
rgba(14, 87, 180, 0.1) 100%);
|
|
|
border-radius: 12px;
|
|
|
|
|
|
/* 多层阴影创造立体感 */
|
|
|
box-shadow:
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
|
|
|
0 8px 32px rgba(14, 87, 180, 0.3),
|
|
|
0 4px 16px rgba(109, 205, 230, 0.2),
|
|
|
0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
/* 边框渐变 */
|
|
|
border: 1px solid;
|
|
|
border-image: linear-gradient(135deg,
|
|
|
rgba(109, 205, 230, 0.6),
|
|
|
rgba(14, 87, 180, 0.8),
|
|
|
rgba(109, 205, 230, 0.6)) 1;
|
|
|
|
|
|
/* 内部光晕 */
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
background: radial-gradient(
|
|
|
circle at 30% 20%,
|
|
|
rgba(109, 205, 230, 0.1) 0%,
|
|
|
transparent 50%
|
|
|
);
|
|
|
border-radius: 12px;
|
|
|
pointer-events: none;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.map-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 1.5vh 1vw;
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
|
|
|
/* 内部容器立体效果 */
|
|
|
// background: linear-gradient(135deg,
|
|
|
// rgba(255, 255, 255, 0.05) 0%,
|
|
|
// rgba(109, 205, 230, 0.02) 50%,
|
|
|
// rgba(255, 255, 255, 0.05) 100%);
|
|
|
// border-radius: 8px;
|
|
|
|
|
|
// /* 内部阴影 */
|
|
|
// box-shadow:
|
|
|
// inset 0 2px 4px rgba(255, 255, 255, 0.1),
|
|
|
// inset 0 -2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
// /* 边框高光 */
|
|
|
// border: 1px solid rgba(109, 205, 230, 0.3);
|
|
|
|
|
|
/* 内部光晕效果 */
|
|
|
// &::after {
|
|
|
// content: '';
|
|
|
// position: absolute;
|
|
|
// top: 2px;
|
|
|
// left: 2px;
|
|
|
// right: 2px;
|
|
|
// bottom: 2px;
|
|
|
// background: linear-gradient(45deg,
|
|
|
// transparent 0%,
|
|
|
// rgba(109, 205, 230, 0.05) 50%,
|
|
|
// transparent 100%);
|
|
|
// border-radius: 6px;
|
|
|
// pointer-events: none;
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
.map-title {
|
|
|
color: #93ccfd;
|
|
|
font-size: 1.2vw;
|
|
|
text-align: center;
|
|
|
margin-bottom: 1.5vh;
|
|
|
min-font-size: 14px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
z-index: 4;
|
|
|
|
|
|
span {
|
|
|
font-size: 1.2vw;
|
|
|
padding: 1.5vh 0;
|
|
|
display: inline-block;
|
|
|
width: 80%;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
|
|
|
/* 移除原来的border-bottom */
|
|
|
border-bottom: none;
|
|
|
|
|
|
/* 使用伪元素创建更漂亮的横线 */
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,
|
|
|
transparent 0%,
|
|
|
#8edbef 20%,
|
|
|
#8edbef 50%,
|
|
|
#8edbef 80%,
|
|
|
transparent 100%);
|
|
|
border-radius: 1px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.map-tabs {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 2vh;
|
|
|
}
|
|
|
|
|
|
.tab {
|
|
|
padding: 1vh 2vw;
|
|
|
margin: 0 0.5vw;
|
|
|
background: rgba(59, 130, 246, 0.2);
|
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
|
border-radius: 20px;
|
|
|
color: #94a3b8;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
font-size: 1vw;
|
|
|
min-font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.tab.active {
|
|
|
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
|
|
color: #ffffff;
|
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
|
|
}
|
|
|
|
|
|
.map-chart {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 6vh);
|
|
|
min-height: 400px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
|
|
|
/* 地图内容立体效果 */
|
|
|
// &::before {
|
|
|
// content: '';
|
|
|
// position: absolute;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
// right: 0;
|
|
|
// bottom: 0;
|
|
|
// background: radial-gradient(
|
|
|
// circle at 30% 20%,
|
|
|
// rgba(109, 205, 230, 0.08) 0%,
|
|
|
// transparent 60%
|
|
|
// );
|
|
|
// border-radius: 6px;
|
|
|
// pointer-events: none;
|
|
|
// z-index: 1;
|
|
|
// }
|
|
|
|
|
|
/* 地图内容立体阴影 */
|
|
|
// &::after {
|
|
|
// content: '';
|
|
|
// position: absolute;
|
|
|
// top: 1px;
|
|
|
// left: 1px;
|
|
|
// right: 1px;
|
|
|
// bottom: 1px;
|
|
|
// background: linear-gradient(135deg,
|
|
|
// rgba(255, 255, 255, 0.03) 0%,
|
|
|
// transparent 50%,
|
|
|
// rgba(0, 0, 0, 0.03) 100%);
|
|
|
// border-radius: 4px;
|
|
|
// pointer-events: none;
|
|
|
// z-index: 2;
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
/* 右侧区域 */
|
|
|
.right-section {
|
|
|
flex: 0 0 25%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 2vh;
|
|
|
}
|
|
|
|
|
|
.enterprise-cards {
|
|
|
flex: 0 0 35%;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
grid-template-rows: 1fr 1fr;
|
|
|
gap: 2vh 2vw;
|
|
|
align-items: stretch;
|
|
|
justify-content: center;
|
|
|
height: 100%;
|
|
|
min-height: 220px;
|
|
|
}
|
|
|
|
|
|
.enterprise-cards .enterprise-card {
|
|
|
background: transparent;
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
padding: 2vh 1.5vw;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
height: 100%;
|
|
|
min-height: 90px;
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.enterprise-card .card-content-wrapper {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 1vw;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.card-icon-3d {
|
|
|
width: 60px;
|
|
|
height: 40px;
|
|
|
border-radius: 4px;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.blue-cube {
|
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
|
|
}
|
|
|
|
|
|
.purple-cube {
|
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
|
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
|
|
|
}
|
|
|
|
|
|
.pink-cube {
|
|
|
background: linear-gradient(135deg, #ec4899, #db2777);
|
|
|
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
|
|
|
}
|
|
|
|
|
|
.card-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
flex-grow: 1;
|
|
|
justify-content: center;
|
|
|
min-width: 0;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.card-number {
|
|
|
color: #dc9c61;
|
|
|
font-size: 2.5vw;
|
|
|
font-weight: bold;
|
|
|
text-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
|
|
|
margin-bottom: 0.5vh;
|
|
|
min-font-size: 18px;
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.card-desc {
|
|
|
color: #fff;
|
|
|
font-size: 0.9vw;
|
|
|
min-font-size: 11px;
|
|
|
line-height: 1.3;
|
|
|
white-space: nowrap;
|
|
|
margin-bottom: 0.5vh;
|
|
|
}
|
|
|
|
|
|
.field-chart-container {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
|
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
|
border-radius: 8px;
|
|
|
padding: 1.5vh 1vw;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.field-chart {
|
|
|
height: calc(100% - 4vh);
|
|
|
min-height: 300px;
|
|
|
}
|
|
|
|
|
|
.field-chart-custom {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 4vh);
|
|
|
min-height: 300px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 2.5vh;
|
|
|
padding: 1vh 0;
|
|
|
}
|
|
|
|
|
|
.chart-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
.item-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 1vw;
|
|
|
min-width: 0;
|
|
|
flex: 0 0 40%;
|
|
|
}
|
|
|
|
|
|
.number-circle {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: #fff;
|
|
|
font-size: 10px;
|
|
|
font-weight: bold;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.item-name {
|
|
|
color: #fff;
|
|
|
font-size: 13px;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.item-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 1vw;
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.bar-container {
|
|
|
flex: 1;
|
|
|
height: 12px;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.bar {
|
|
|
height: 100%;
|
|
|
border-radius: 4px;
|
|
|
transition: width 0.8s ease;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
.item-value {
|
|
|
color: #fff;
|
|
|
font-size: 11px;
|
|
|
font-weight: bold;
|
|
|
min-width: 30px;
|
|
|
text-align: right;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.warehouse-table {
|
|
|
position: relative;
|
|
|
border: 1px solid #0e57b4;
|
|
|
box-shadow: inset 0 0 10px -2px #6dcde6;
|
|
|
border-radius: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 四角三角形基础样式 */
|
|
|
.corner {
|
|
|
position: absolute;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border-style: solid;
|
|
|
z-index: 10;
|
|
|
border: none;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
/* 确保显示在表格内容上方 */
|
|
|
}
|
|
|
|
|
|
/* 左上角 */
|
|
|
.top-left {
|
|
|
top: -1px;
|
|
|
left: -1px;
|
|
|
border-left: 2px solid #6dcde6;
|
|
|
border-top: 2px solid #6dcde6;
|
|
|
}
|
|
|
|
|
|
/* 右上角 */
|
|
|
.top-right {
|
|
|
top: -1px;
|
|
|
right: -1px;
|
|
|
border-right: 2px solid #6dcde6;
|
|
|
border-top: 2px solid #6dcde6;
|
|
|
}
|
|
|
|
|
|
/* 左下角 */
|
|
|
.bottom-left {
|
|
|
bottom: -1px;
|
|
|
left: -1px;
|
|
|
border-left: 2px solid #6dcde6;
|
|
|
border-bottom: 2px solid #6dcde6;
|
|
|
}
|
|
|
|
|
|
/* 右下角 */
|
|
|
.bottom-right {
|
|
|
bottom: -1px;
|
|
|
right: -1px;
|
|
|
border-right: 2px solid #6dcde6;
|
|
|
border-bottom: 2px solid #6dcde6;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 1440px) {
|
|
|
.header-title {
|
|
|
font-size: 36px;
|
|
|
}
|
|
|
|
|
|
.card-label {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
.card-value {
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
|
|
|
.chart-title {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.tab {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.card-number {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
.card-desc {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1024px) {
|
|
|
.screen-content {
|
|
|
flex-direction: column;
|
|
|
gap: 2vh;
|
|
|
}
|
|
|
|
|
|
.left-section,
|
|
|
.right-section {
|
|
|
flex: none;
|
|
|
}
|
|
|
|
|
|
.center-section {
|
|
|
flex: none;
|
|
|
height: 50vh;
|
|
|
}
|
|
|
|
|
|
.data-cards-container {
|
|
|
flex-direction: column;
|
|
|
gap: 1.5vh;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
