Browse Source
Merge branch 'refs/heads/lihui/feature-20250915101448-现金管理' into milestone-20250913-现金管理
Merge branch 'refs/heads/lihui/feature-20250915101448-现金管理' into milestone-20250913-现金管理
# Conflicts: # src/components/workspace/GoldGraph.vuelihuilin/feature-20250923114949-现金^2
lihui
1 week ago
5 changed files with 248 additions and 52 deletions
-
5src/components/workspace/CashManagement.vue
-
210src/components/workspace/CashManagementMarkets.vue
-
74src/components/workspace/GoldGraph.vue
-
7src/components/workspace/GoldGraphMarkets.vue
-
4src/components/workspace/GoldManagement.vue
@ -0,0 +1,210 @@ |
|||
<!--各地区的现金管理情况--> |
|||
<template> |
|||
|
|||
<div class="cash-management"> |
|||
<div class="cash-title"> |
|||
<div class="text1"> 现金管理 |
|||
<span class="text1-update-time">最后更新时间：{{ |
|||
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据' |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="text2"><span class="text2-income">总营收：{{ cashData.totalIncome }}</span></div> |
|||
|
|||
|
|||
<div class="chart-container"> |
|||
<!-- 左侧数据列表 --> |
|||
<div class="market-data"> |
|||
<div v-for="market in cashData.markets" :key="market.name" class="market-item"> |
|||
<span class="market-name">{{ market.name }}:</span> |
|||
<span class="market-value">{{ market.value.toLocaleString() }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 图表区域 --> |
|||
<div ref="chartRef" class="chart"></div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import * as echarts from 'echarts' |
|||
import {ref, onMounted} from 'vue' |
|||
|
|||
// 模拟数据 |
|||
const cashData = ref({ |
|||
updateTime: '2025-09-24 12:00:00', |
|||
totalIncome: 1200000, |
|||
markets: [ |
|||
{name: '北京', value: 450000}, |
|||
{name: '上海', value: 300000}, |
|||
{name: '广州', value: 200000}, |
|||
{name: '深圳', value: 150000}, |
|||
{name: '其他', value: 100000} |
|||
] |
|||
}) |
|||
|
|||
const chartRef = ref(null) |
|||
let chartInstance = null |
|||
|
|||
const renderChart = () => { |
|||
if (!chartInstance && chartRef.value) { |
|||
chartInstance = echarts.init(chartRef.value) |
|||
} |
|||
const option = { |
|||
tooltip: {trigger: 'item'}, |
|||
legend: { |
|||
bottom: 5, // 增加底部距离的 |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
{ |
|||
label: {show: false}, |
|||
|
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
data: cashData.value.markets, |
|||
center: ['60%', '45%'] //图表靠右一点 |
|||
} |
|||
] |
|||
} |
|||
chartInstance.setOption(option) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
renderChart() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 背景卡片大小 */ |
|||
.cash-management { |
|||
margin: 10px 5px; |
|||
width: 100%; |
|||
height: 50vh; |
|||
flex-shrink: 0; |
|||
border-radius: 8px; |
|||
background: #E7F4FD; |
|||
box-shadow: 0 2px 2px 0 #00000040; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* |
|||
.cash-card { |
|||
width: 100%; |
|||
} |
|||
|
|||
.chart { |
|||
width: 100%; |
|||
height: 200px; |
|||
} */ |
|||
|
|||
|
|||
.cash-title { |
|||
width: 100%; |
|||
height: 5vh; |
|||
flex-shrink: 0; |
|||
border-radius: 8px; |
|||
background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%); |
|||
box-shadow: 0 2px 2px 0 #00152940; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.text1 { |
|||
color: #040a2d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 28px; |
|||
font-style: normal; |
|||
font-weight: 900; |
|||
line-height: 31.79px; |
|||
} |
|||
|
|||
.text1-update-time { |
|||
width: 100%; |
|||
height: 26px; |
|||
flex-shrink: 0; |
|||
color: #040a2d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 20px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 31.79px; |
|||
} |
|||
|
|||
/* 总收入的渐变框 */ |
|||
.text2 { |
|||
margin: 13px; |
|||
width: 95%; |
|||
height: 48px; |
|||
flex-shrink: 0; |
|||
border-radius: 8px; |
|||
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%); |
|||
box-shadow: 0 2px 2px 0 #00152940; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* 总收入字体 */ |
|||
.text2-income { |
|||
width: 215px; |
|||
height: 26px; |
|||
flex-shrink: 0; |
|||
color: #040a2d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 20px; |
|||
font-style: normal; |
|||
font-weight: 900; |
|||
line-height: 31.79px; |
|||
} |
|||
|
|||
/* 图表容器 */ |
|||
.chart-container { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 10px; |
|||
} |
|||
|
|||
/* 左侧数据列表，使用您指定的样式 */ |
|||
.market-data { |
|||
display: flex; |
|||
width: 179px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 12px; |
|||
padding: 10px; |
|||
margin-left: 80px; |
|||
} |
|||
|
|||
.market-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
font-family: "PingFang SC"; |
|||
font-size: 16px; |
|||
color: #040a2d; |
|||
} |
|||
|
|||
.market-name { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.market-value { |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 图表样式 */ |
|||
.chart { |
|||
flex: 1; |
|||
height: 300px; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue