manager/my-bigScreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-01 21:28:05 +08:00
parent ee9569953d
commit 78e52da94f
49 changed files with 2478 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
screen-vue/src/views/screen/Erp/components/ChartV01.vue Normal file
View File

@@ -0,0 +1,296 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">余额结构分析</span>
<span class="total-amount">合计：¥{{ formatAmount(totalAmount) }}</span>
</div>
<div class="pie-chart-container" ref="chartRef"></div>
</div>
<teleport to="body">
<div v-if="modalVisible" class="modal-overlay" @click.self="closeModal">
<div class="modal-content">
<IndexV01
:account-data="selectedAccountData"
@close="closeModal"
/>
</div>
</div>
</teleport>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getErpAccountList } from '@/api/bizApi'
import IndexV01 from './detail/indexV01.vue'
const vList = ref([])
const totalAmount = ref(0)
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
const modalVisible = ref(false)
const selectedAccountData = ref({})
const formatAmount = (amount) => {
return Number(amount).toFixed(2)
}
async function getList() {
try {
const res = await getErpAccountList()
vList.value = res || []
calculateTotalAmount(vList.value)
initPieChart()
} catch (error) {
console.error('获取余额数据失败:', error)
vList.value = []
totalAmount.value = 0
}
}
function calculateTotalAmount(data) {
if (!Array.isArray(data)) {
totalAmount.value = 0
return
}
totalAmount.value = data.reduce((sum, item) => {
const value = Number(item.currentBalance) || 0
return sum + value
}, 0)
}
const closeModal = () => {
modalVisible.value = false
selectedAccountData.value = {}
}
const initPieChart = () => {
const el = chartRef.value
if (!el) return
if (chartInstance) {
chartInstance.dispose()
}
chartInstance = echarts.init(el)
const pieData = vList.value.map(item => ({
name: item.accountName || '未知账户',
value: (Number(item.currentBalance) || 0) / 10000,
originalValue: Number(item.currentBalance) || 0,
rawData: item
})).filter(item => item.value > 0)
const colorList = [
'#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
'#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
'#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
]
const option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70', fontSize: 12 },
padding: [10, 15],
borderRadius: 6,
formatter: function(params) {
return `账户：${params.name}<br/>余额：${Number(params.data.originalValue).toFixed(2)}元<br/>占比：${params.percent.toFixed(2)}%`
}
},
legend: {
orient: 'horizontal',
top: '10%',
left: 'center',
textStyle: { fontSize: 11, color: '#e0e6ff' },
itemWidth: 12,
itemHeight: 12,
itemGap: 10,
pageIconColor: '#409EFF',
pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
pageButtonItemGap: 6,
pageButtonGap: 10,
type: 'scroll'
},
series: [
{
name: '余额',
type: 'pie',
radius: ['30%', '55%'],
center: ['50%', '65%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 4,
borderColor: 'rgba(15, 52, 96, 0.9)',
borderWidth: 1
},
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#e0e6ff',
formatter: function(params) {
return `${params.name} ${Number(params.value).toFixed(2)}万元 (${params.percent.toFixed(2)}%)`
},
overflow: 'truncate',
ellipsis: '...',
distance: 8
},
labelLine: {
show: true,
length: 12,
length2: 8,
lineStyle: { color: '#e0e6ff', width: 1 },
smooth: 0.2,
minTurnAngle: 45
},
data: pieData,
color: colorList
}
]
}
chartInstance.setOption(option)
chartInstance.on('click', (params) => {
selectedAccountData.value = {
name: params.name,
originalValue: params.data.originalValue,
value: params.data.value,
percent: params.percent,
rawData: params.data.rawData
}
modalVisible.value = true
})
chartInstance.on('legendselectchanged', (params) => {
const selectedNames = Object.keys(params.selected).filter(name => params.selected[name])
const selectedData = vList.value.filter(item => {
const accountName = item.accountName || '未知账户'
return selectedNames.includes(accountName)
})
calculateTotalAmount(selectedData)
})
}
onMounted(async () => {
await getList()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
justify-content: space-between;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.total-amount {
font-size: 14px;
color: #e0e6ff;
font-weight: 500;
}
.pie-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
margin: 0;
padding: 0;
}
:global(.modal-overlay) {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
:global(.modal-content) {
width: 90vw;
height: 90vh;
max-width: 1400px;
max-height: 800px;
background: transparent !important;
border: none !important;
border-radius: 8px;
overflow: hidden;
box-shadow: none !important;
}
:deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important;
color: #0a3b70 !important;
border-radius: 6px !important;
}
:deep(.echarts-legend-scroll) {
background-color: transparent !important;
}
:deep(.echarts-legend-scroll-text) {
color: #e0e6ff !important;
font-size: 11px !important;
}
:deep(.echarts-legend-scroll-button) {
border-color: #1a508b !important;
}
:deep(.echarts-legend-scroll-button-icon) {
color: #409EFF !important;
}
:deep(.ec-label) {
z-index: 9999 !important;
white-space: nowrap !important;
font-size: 10px !important;
color: #e0e6ff !important;
}
:deep(.ec-label-line) {
stroke: #e0e6ff !important;
stroke-width: 1px !important;
}
</style>

236
screen-vue/src/views/screen/Erp/components/ChartV02.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">年度收支分析</span>
</div>
<div class="bar-line-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => {
chartInstance?.resize()
}
async function getList() {
try {
const params = {
itemCode: 'ERP_YEARPMOM_M001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
function initChart() {
const el = chartRef.value
if (!el) return
if (!chartInstance) {
chartInstance = echarts.init(el)
}
const xData = vList.value.map(item => item.xaxis || '')
const index01Yuan = vList.value.map(item => item.index01 || 0)
const index02Yuan = vList.value.map(item => item.index02 || 0)
const index03 = vList.value.map(item => item.index03 || 0)
const index04 = vList.value.map(item => item.index04 || 0)
const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6,
formatter: params => {
const idx = params[0].dataIndex
return `
<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</div>
<table style="width:100%;border-collapse:collapse;text-align:center">
<tr>
<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">收入(元)</td>
<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">支出(元)</td>
<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">利润率(%)</td>
<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">占比(%)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF;padding:4px">${index01Yuan[idx]}</td>
<td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
<td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
<td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
</tr>
</table>`
}
},
legend: {
top: '10',
left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '利润率', '占比']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData,
axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true
}],
yAxis: [
{
type: 'value',
name: '金额 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
},
{
type: 'value',
name: '比率 (%)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin',
max: 'dataMax',
scale: true
}
],
series: [
{
name: '收入',
type: 'bar',
yAxisIndex: 0,
data: index01Wan,
barWidth: '10%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset:0, color:'#85E868' },
{ offset:1, color:'#67C23A' }
]),
borderRadius: [8,8,0,0]
},
label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
},
{
name: '支出',
type: 'bar',
yAxisIndex: 0,
data: index02Wan,
barWidth: '10%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset:0, color:'#FF8A8A' },
{ offset:1, color:'#F56C6C' }
]),
borderRadius: [8,8,0,0]
},
label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
},
{
name: '利润率',
type: 'line',
yAxisIndex: 1,
data: index03,
smooth: true,
lineStyle: { width:1.5, color:'#FCC367' },
symbol: 'circle',
symbolSize: 5,
label: { show:true, position:'outside', fontSize:10, color:'#FCC367', formatter:'{c}', offset:[0,-5] },
areaStyle: {
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset:0, color:'rgba(252,195,103,0.3)' },
{ offset:1, color:'rgba(252,195,103,0)' }
])
}
},
{
name: '占比',
type: 'line',
yAxisIndex: 1,
data: index04,
smooth: true,
lineStyle: { width:1.5, color:'#409EFF' },
symbol: 'circle',
symbolSize: 5,
label: { show:true, position:'outside', fontSize:10, color:'#409EFF', formatter:'{c}', offset:[0,-5] },
areaStyle: {
color: new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset:0, color:'rgba(64,158,255,0.3)' },
{ offset:1, color:'rgba(64,158,255,0)' }
])
}
}
]
}
chartInstance.setOption(option, true)
}
onMounted(async () => {
await getList()
initChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
chartInstance?.dispose()
chartInstance = null
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.bar-line-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
</style>

283
screen-vue/src/views/screen/Erp/components/ChartV03.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">账户收支分析</span>
</div>
<div class="bar-line-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
})
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_ACCOUNT_Y001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
function initChart() {
const el = chartRef.value
if (!el) return
if (!chartInstance) {
chartInstance = echarts.init(el)
}
const baseOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6
},
legend: {
top: '10',
left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '净利润']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
fontSize: 11,
interval: 0,
color: '#b4c7e7'
},
axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true
}
],
yAxis: [
{
type: 'value',
name: '金额 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
},
{
type: 'value',
name: '净利润 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin',
max: 'dataMax',
scale: true
}
],
series: [
{
name: '收入',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#85E868' },
{ offset: 1, color: '#67C23A' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '支出',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF8A8A' },
{ offset: 1, color: '#F56C6C' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '净利润',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#409EFF' },
symbol: 'circle',
symbolSize: 5,
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#409EFF',
formatter: '{c}',
offset: [0, -5]
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
}
]
}
if (vList.value.length > 0) {
const xData = vList.value.map(item => {
const xaxis = item.xaxis || ''
return xaxis;
})
const index01Yuan = vList.value.map(item => item.index01 || 0)
const index02Yuan = vList.value.map(item => item.index02 || 0)
const index03Yuan = vList.value.map(item => item.index03 || 0)
const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
const index03Wan = index03Yuan.map(val => (val / 10000).toFixed(2))
baseOption.tooltip.formatter = function (params) {
const title = params[0].axisValue
const idx = params[0].dataIndex
const incomeVal = index01Yuan[idx]
const expenseVal = index02Yuan[idx]
const netProfitVal = index03Yuan[idx]
return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
<table style="width:100%; border-collapse:collapse; text-align:center">
<tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${netProfitVal}</td>
</tr>
</table>
`
}
baseOption.xAxis[0].data = xData
baseOption.series[0].data = index01Wan
baseOption.series[1].data = index02Wan
baseOption.series[2].data = index03Wan
}
chartInstance.setOption(baseOption, true)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
nextTick(() => initChart())
}, { deep: true })
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.bar-line-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
</style>

224
screen-vue/src/views/screen/Erp/components/ChartV04.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">支出结构分析</span>
</div>
<div class="pie-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
})
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_CATEGORY_Y001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error('获取支出数据失败:', error)
vList.value = []
}
}
const initPieChart = () => {
const el = chartRef.value
if (!el) return
if (chartInstance) {
chartInstance.dispose()
}
chartInstance = echarts.init(el)
const pieData = vList.value.map(item => {
const originalValue = item.index01 || 0
const wanValue = (originalValue / 10000).toFixed(2)
return {
name: item.xaxis || '未知分类',
value: Number(wanValue),
originalValue: originalValue
}
}).filter(item => item.value > 0)
const colorList = [
'#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
'#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
'#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
]
const option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70', fontSize: 12 },
padding: [10, 15],
borderRadius: 6,
formatter: function(params) {
return `分类：${params.name}<br/>支出：${params.data.originalValue}元<br/>占比：${params.percent.toFixed(1)}%`
}
},
legend: {
orient: 'horizontal',
top: '10%',
left: 'center',
textStyle: { fontSize: 11, color: '#e0e6ff' },
itemWidth: 12,
itemHeight: 12,
itemGap: 10,
pageIconColor: '#409EFF',
pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
pageButtonItemGap: 6,
pageButtonGap: 10,
type: 'scroll'
},
series: [
{
name: '支出',
type: 'pie',
radius: ['30%', '55%'],
center: ['50%', '65%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 4,
borderColor: 'rgba(15, 52, 96, 0.9)',
borderWidth: 1
},
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#e0e6ff',
formatter: '{b} {c}万元 ({d}%)',
overflow: 'truncate',
ellipsis: '...',
distance: 8
},
labelLine: {
show: true,
length: 12,
length2: 8,
lineStyle: { color: '#e0e6ff', width: 1 },
smooth: 0.2,
minTurnAngle: 45
},
data: pieData,
color: colorList
}
]
}
chartInstance.setOption(option)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
initPieChart()
}, { deep: true })
onMounted(() => {
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.pie-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
margin: 0;
padding: 0;
}
:deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important;
color: #0a3b70 !important;
border-radius: 6px !important;
}
:deep(.echarts-legend-scroll) {
background-color: transparent !important;
}
:deep(.echarts-legend-scroll-text) {
color: #e0e6ff !important;
font-size: 11px !important;
}
:deep(.echarts-legend-scroll-button) {
border-color: #1a508b !important;
}
:deep(.echarts-legend-scroll-button-icon) {
color: #409EFF !important;
}
:deep(.ec-label) {
z-index: 9999 !important;
white-space: nowrap !important;
font-size: 10px !important;
color: #e0e6ff !important;
}
:deep(.ec-label-line) {
stroke: #e0e6ff !important;
stroke-width: 1px !important;
}
</style>

224
screen-vue/src/views/screen/Erp/components/ChartV05.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">收入来源分析</span>
</div>
<div class="pie-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
})
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_CATEGORY_Y002',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error('获取收入数据失败:', error)
vList.value = []
}
}
const initPieChart = () => {
const el = chartRef.value
if (!el) return
if (chartInstance) {
chartInstance.dispose()
}
chartInstance = echarts.init(el)
const pieData = vList.value.map(item => {
const originalValue = item.index01 || 0
const wanValue = (originalValue / 10000).toFixed(2)
return {
name: item.xaxis || '未知分类',
value: Number(wanValue),
originalValue: originalValue
}
}).filter(item => item.value > 0)
const colorList = [
'#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
'#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
'#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
]
const option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70', fontSize: 12 },
padding: [10, 15],
borderRadius: 6,
formatter: function(params) {
return `分类：${params.name}<br/>收入：${params.data.originalValue}元<br/>占比：${params.percent.toFixed(1)}%`
}
},
legend: {
orient: 'horizontal',
top: '10%',
left: 'center',
textStyle: { fontSize: 11, color: '#e0e6ff' },
itemWidth: 12,
itemHeight: 12,
itemGap: 10,
pageIconColor: '#409EFF',
pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
pageButtonItemGap: 6,
pageButtonGap: 10,
type: 'scroll'
},
series: [
{
name: '收入',
type: 'pie',
radius: ['30%', '55%'],
center: ['50%', '65%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 4,
borderColor: 'rgba(15, 52, 96, 0.9)',
borderWidth: 1
},
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#e0e6ff',
formatter: '{b} {c}万元 ({d}%)',
overflow: 'truncate',
ellipsis: '...',
distance: 8
},
labelLine: {
show: true,
length: 12,
length2: 8,
lineStyle: { color: '#e0e6ff', width: 1 },
smooth: 0.2,
minTurnAngle: 45
},
data: pieData,
color: colorList
}
]
}
chartInstance.setOption(option)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
initPieChart()
}, { deep: true })
onMounted(() => {
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.pie-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
margin: 0;
padding: 0;
}
:deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important;
color: #0a3b70 !important;
border-radius: 6px !important;
}
:deep(.echarts-legend-scroll) {
background-color: transparent !important;
}
:deep(.echarts-legend-scroll-text) {
color: #e0e6ff !important;
font-size: 11px !important;
}
:deep(.echarts-legend-scroll-button) {
border-color: #1a508b !important;
}
:deep(.echarts-legend-scroll-button-icon) {
color: #409EFF !important;
}
:deep(.ec-label) {
z-index: 9999 !important;
white-space: nowrap !important;
font-size: 10px !important;
color: #e0e6ff !important;
}
:deep(.ec-label-line) {
stroke: #e0e6ff !important;
stroke-width: 1px !important;
}
</style>

314
screen-vue/src/views/screen/Erp/components/ChartV06.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">月度收支分析</span>
</div>
<div class="bar-line-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
});
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_YEARPSAV_M001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
function initChart() {
const el = chartRef.value
if (!el) return
if (!chartInstance) {
chartInstance = echarts.init(el)
}
const baseOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6
},
legend: {
top: '10',
left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '利润率', '净利润']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
fontSize: 11,
interval: 0,
color: '#b4c7e7'
},
axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true
}
],
yAxis: [
{
type: 'value',
name: '金额 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
},
{
type: 'value',
name: '利润率 (%)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin',
max: 'dataMax',
scale: true
}
],
series: [
{
name: '收入',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#85E868' },
{ offset: 1, color: '#67C23A' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '支出',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF8A8A' },
{ offset: 1, color: '#F56C6C' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '利润率',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#409EFF' },
symbol: 'circle',
symbolSize: 5,
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#409EFF',
formatter: '{c}',
offset: [0, -5]
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '净利润',
type: 'line',
yAxisIndex: 0,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#FF9D28' },
symbol: 'circle',
symbolSize: 5,
label: {
show: true,
fontSize: 10,
color: '#FF9D28',
formatter: '{c}'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 157, 40, 0.3)' },
{ offset: 1, color: 'rgba(255, 157, 40, 0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
}
]
}
if (vList.value.length > 0) {
const xData = vList.value.map(item => {
const xaxis = item.xaxis || ''
return xaxis.includes('月') ? xaxis : `${xaxis}月`;
})
const index01Yuan = vList.value.map(item => item.index01 || 0)
const index02Yuan = vList.value.map(item => item.index02 || 0)
const index03 = vList.value.map(item => item.index03 || 0)
const index04Yuan = vList.value.map(item => item.index04 || 0)
const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
const index04Wan = index04Yuan.map(val => (val / 10000).toFixed(2))
baseOption.tooltip.formatter = function (params) {
const title = params[0].axisValue
const idx = params[0].dataIndex
const incomeVal = index01Yuan[idx]
const expenseVal = index02Yuan[idx]
const rateVal = index03[idx]
const profitVal = index04Yuan[idx]
return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
<table style="width:100%; border-collapse:collapse; text-align:center">
<tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">利润率(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${rateVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${profitVal}</td>
</tr>
</table>
`
}
baseOption.xAxis[0].data = xData
baseOption.series[0].data = index01Wan
baseOption.series[1].data = index02Wan
baseOption.series[2].data = index03
baseOption.series[3].data = index04Wan
}
chartInstance.setOption(baseOption, true)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
nextTick(() => initChart())
}, { deep: true })
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.bar-line-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
</style>

204
screen-vue/src/views/screen/Erp/components/ChartV07.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">支出排名分析</span>
</div>
<div class="rank-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
})
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_YEARRANK_Y001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
const initRankChart = () => {
const el = chartRef.value
if (!el) return
if (chartInstance) {
chartInstance.dispose()
}
chartInstance = echarts.init(el)
const sortedList = [...vList.value]
.sort((a, b) => Number(b.index01 || 0) - Number(a.index01 || 0))
.slice(0, 10)
const yData = sortedList.map((item, index) => `${index + 1}. ${item.xaxis || '未知'}`)
const valueData = sortedList.map(item => Number((Number(item.index01 || 0) / 10000).toFixed(2)) || 0)
const percentData = sortedList.map(item => Number(Number(item.index02 || 0).toFixed(2)) || 0)
const originalData = sortedList.map(item => Number(item.index01 || 0))
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6,
formatter: params => {
const idx = params[0].dataIndex
const name = params[0].name
const amount = originalData[idx]
const rate = percentData[idx]
return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${name}</div>
<table style="width:100%; border-collapse:collapse; text-align:center">
<tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">占比(%)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF; padding:4px">${amount}</td>
<td style="border:1px solid #409EFF; padding:4px">${rate}</td>
</tr>
</table>
`
}
},
legend: {
show: false
},
grid: {
left: '5%',
right: '15%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'value',
axisLabel: { fontSize: 11, color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
}
],
yAxis: [
{
type: 'category',
data: yData,
axisLabel: { fontSize: 11, color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
inverse: true
}
],
series: [
{
name: '支出',
type: 'bar',
barWidth: '12%',
data: valueData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#409EFF' },
{ offset: 0, color: '#409EFF' },
{ offset: 1, color: '#1890FF' }
])
},
label: {
show: true,
position: 'right',
fontSize: 10,
color: '#e0e6ff',
formatter: params => `${params.value} 万元 (${percentData[params.dataIndex]}%)`
}
}
]
}
chartInstance.setOption(option)
}
watch(() => props.formParams, () => {
getList()
}, { deep: true, immediate: true })
watch(vList, () => {
initRankChart()
}, { deep: true })
onMounted(() => {
initRankChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.rank-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
:deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important;
color: #0a3b70 !important;
border-radius: 6px !important;
}
</style>

282
screen-vue/src/views/screen/Erp/components/ChartV08.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">季度收支分析</span>
</div>
<div class="bar-line-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
});
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_YEARQUAR_Y001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
function initChart() {
const el = chartRef.value
if (!el) return
if (!chartInstance) {
chartInstance = echarts.init(el)
}
const baseOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6
},
legend: {
top: '10',
left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '占比']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
fontSize: 11,
interval: 0,
color: '#b4c7e7'
},
axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true
}
],
yAxis: [
{
type: 'value',
name: '金额 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
},
{
type: 'value',
name: '占比 (%)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin',
max: 'dataMax',
scale: true
}
],
series: [
{
name: '收入',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#85E868' },
{ offset: 1, color: '#67C23A' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '支出',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF8A8A' },
{ offset: 1, color: '#F56C6C' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
},
{
name: '占比',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#409EFF' },
symbol: 'circle',
symbolSize: 5,
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#409EFF',
formatter: '{c}',
offset: [0, -5]
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
}
]
}
if (vList.value.length > 0) {
const xData = vList.value.map(item => {
const xaxis = item.xaxis || ''
return xaxis;
})
const index01Yuan = vList.value.map(item => item.index01 || 0)
const index02Yuan = vList.value.map(item => item.index02 || 0)
const index03 = vList.value.map(item => item.index03 || 0)
const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
baseOption.tooltip.formatter = function (params) {
const title = params[0].axisValue
const idx = params[0].dataIndex
const incomeVal = index01Yuan[idx]
const expenseVal = index02Yuan[idx]
const rateVal = index03[idx]
return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
<table style="width:100%; border-collapse:collapse; text-align:center">
<tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">占比(%)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
<td style="border:1px solid #409EFF; padding:4px">${rateVal}</td>
</tr>
</table>
`
}
baseOption.xAxis[0].data = xData
baseOption.series[0].data = index01Wan
baseOption.series[1].data = index02Wan
baseOption.series[2].data = index03
}
chartInstance.setOption(baseOption, true)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
nextTick(() => initChart())
}, { deep: true })
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.bar-line-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
</style>

412
screen-vue/src/views/screen/Erp/components/ChartV09.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<div class="chart-card">
<div class="chart-card-header">
<span class="chart-card-title">环比收支分析</span>
</div>
<div class="bar-line-chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getItemInfoList } from '@/api/bizApi'
const props = defineProps({
formParams: {
type: Object,
default: () => ({})
}
});
const vList = ref([])
const chartRef = ref(null)
let chartInstance = null
const resizeHandler = () => chartInstance?.resize()
async function getList() {
try {
const params = {
...props.formParams,
itemCode: 'ERP_YEARDATA_M001',
}
const res = await getItemInfoList(params)
vList.value = res || []
} catch (error) {
console.error(error)
vList.value = []
}
}
function initChart() {
const el = chartRef.value
if (!el) return
if (chartInstance) {
chartInstance.dispose()
}
chartInstance = echarts.init(el)
const baseOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: 'rgba(145, 200, 255, 0.9)',
borderColor: '#409EFF',
borderWidth: 1,
textStyle: { color: '#0a3b70' },
padding: [8, 12],
borderRadius: 6
},
legend: {
top: '10',
left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '占比', '上月收入', '上月支出', '收入环比', '支出环比', '本月净利润']
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
fontSize: 11,
interval: 0,
color: '#b4c7e7'
},
axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true
}
],
yAxis: [
{
type: 'value',
name: '金额 (万元)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
},
{
type: 'value',
name: '占比/环比 (%)',
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin',
max: 'dataMax',
scale: true
}
],
series: [
{
name: '收入',
type: 'line',
yAxisIndex: 0,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#67C23A' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
{ offset: 1, color: 'rgba(103, 194, 58, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '支出',
type: 'line',
yAxisIndex: 0,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#F56C6C' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
{ offset: 1, color: 'rgba(245, 108, 108, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '占比',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#409EFF' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '上月收入',
type: 'line',
yAxisIndex: 0,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#36CFc9' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
{ offset: 1, color: 'rgba(54, 207, 201, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '上月支出',
type: 'line',
yAxisIndex: 0,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#E6A23C' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
{ offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '收入环比',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#722ED1' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
{ offset: 1, color: 'rgba(114, 46, 209, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '支出环比',
type: 'line',
yAxisIndex: 1,
data: [],
smooth: true,
lineStyle: { width: 1.5, color: '#EB2F96' },
symbol: 'circle',
symbolSize: 5,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(235, 47, 150, 0.3)' },
{ offset: 1, color: 'rgba(235, 47, 150, 0.0)' }
])
},
emphasis: {
lineStyle: { width: 2 },
symbolSize: 7
}
},
{
name: '本月净利润',
type: 'bar',
yAxisIndex: 0,
data: [],
barWidth: '12%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF9D28' },
{ offset: 1, color: '#FAAD14' }
]),
borderRadius: [8, 8, 0, 0]
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#fff',
formatter: '{c}'
}
}
]
}
if (vList.value.length > 0) {
const xData = vList.value.map(item => {
const xaxis = item.xaxis || ''
return xaxis.includes('月') ? xaxis : `${xaxis}月`;
})
const incomeYuan = vList.value.map(item => Number(item.index01 || 0))
const expenseYuan = vList.value.map(item => Number(item.index02 || 0))
const rate = vList.value.map(item => Number(item.index03 || 0).toFixed(2))
const lastMonthIncomeYuan = vList.value.map(item => Number(item.index04 || 0))
const lastMonthExpenseYuan = vList.value.map(item => Number(item.index05 || 0))
const netProfitYuan = vList.value.map(item => (Number(item.index01 || 0) - Number(item.index02 || 0)).toFixed(2))
const incomeRingRatio = vList.value.map((item, idx) => {
const lastVal = lastMonthIncomeYuan[idx]
const currVal = incomeYuan[idx] || 0
return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2)
})
const expenseRingRatio = vList.value.map((item, idx) => {
const lastVal = lastMonthExpenseYuan[idx]
const currVal = expenseYuan[idx] || 0
return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2)
})
const incomeWan = incomeYuan.map(val => (val / 10000).toFixed(2))
const expenseWan = expenseYuan.map(val => (val / 10000).toFixed(2))
const lastMonthIncomeWan = lastMonthIncomeYuan.map(val => (val / 10000).toFixed(2))
const lastMonthExpenseWan = lastMonthExpenseYuan.map(val => (val / 10000).toFixed(2))
const netProfitWan = netProfitYuan.map(val => (val / 10000).toFixed(2))
baseOption.tooltip.formatter = function (params) {
const title = params[0].axisValue
const idx = params[0].dataIndex
return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
<table style="width:100%; border-collapse:collapse; text-align:center">
<tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入环比(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出环比(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">占比(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
</tr>
<tr>
<td style="border:1px solid #409EFF; padding:4px">${incomeYuan[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${expenseYuan[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${lastMonthIncomeYuan[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${lastMonthExpenseYuan[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${incomeRingRatio[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${expenseRingRatio[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${rate[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${netProfitYuan[idx]}</td>
</tr>
</table>
`
}
baseOption.xAxis[0].data = xData
baseOption.series[0].data = incomeWan
baseOption.series[1].data = expenseWan
baseOption.series[2].data = rate
baseOption.series[3].data = lastMonthIncomeWan
baseOption.series[4].data = lastMonthExpenseWan
baseOption.series[5].data = incomeRingRatio
baseOption.series[6].data = expenseRingRatio
baseOption.series[7].data = netProfitWan
}
chartInstance.setOption(baseOption, true)
}
watch(
() => props.formParams,
() => {
getList()
},
{ deep: true, immediate: true }
)
watch(vList, () => {
nextTick(() => initChart())
}, { deep: true })
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped>
.chart-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-card-header {
height: 40px;
line-height: 40px;
padding: 0 16px;
background-color: rgba(26, 80, 139, 0.5);
border-bottom: 1px solid #1a508b;
display: flex;
align-items: center;
}
.chart-card-title {
font-size: 16px;
font-weight: 600;
color: #409EFF;
letter-spacing: 0.5px;
}
.bar-line-chart-container {
flex: 1;
width: 100%;
height: calc(100% - 40px);
}
:deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important;
color: #0a3b70 !important;
border-radius: 6px !important;
white-space: nowrap !important;
max-width: none !important;
}
</style>

508
screen-vue/src/views/screen/Erp/components/detail/indexV01.vue Normal file
View File

@@ -0,0 +1,508 @@
<template>
<div class="detail-container">
<div class="detail-header">
<h3>{{ accountData.name }}详情</h3>
<button class="close-btn" @click="handleClose">×</button>
</div>
<div class="split-line"></div>
<div class="detail-body">
<el-form :model="searchForm" class="search-form">
<div class="form-items-wrapper">
<el-form-item label="交易名称：" class="form-item">
<el-input
v-model="searchForm.flowName"
placeholder="请输入交易名称"
clearable
/>
</el-form-item>
<el-form-item label="交易类型：" class="form-item">
<el-select
v-model="searchForm.transactionType"
placeholder="请选择交易类型"
clearable
class="custom-select"
teleport="body"
popper-class="theme-select-popper"
:popper-append-to-body="true"
@change="getTranTypes"
>
<el-option label="收入" value="2" />
<el-option label="支出" value="1" />
</el-select>
</el-form-item>
<el-form-item label="交易分类：" class="form-item">
<el-select
v-model="searchForm.categoryId"
placeholder="请选择交易分类"
clearable
class="custom-select"
teleport="body"
popper-class="theme-select-popper"
:popper-append-to-body="true"
>
<el-option
v-for="item in tranTypes"
:key="item.categoryId"
:label="item.categoryName"
:value="item.categoryId"
/>
</el-select>
</el-form-item>
</div>
<el-form-item class="form-btn-group">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="default" @click="handleReset" class="reset-btn">重置</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
stripe
style="width: 100%"
empty-text="暂无相关交易数据"
class="data-table"
v-loading="loading"
:header-cell-style="{
background: 'rgba(10, 30, 60, 0.8)',
color: '#a0cfff',
border: 'none',
borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
}"
:row-style="{
background: 'transparent',
color: '#a0cfff',
border: 'none'
}"
:cell-style="{
border: 'none',
borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
}"
>
<el-table-column prop="flowId" label="交易编号" />
<el-table-column prop="flowName" label="交易名称" />
<el-table-column prop="categoryName" label="交易分类" />
<el-table-column prop="tranType" label="交易类型" />
<el-table-column prop="amount" label="交易金额">
<template #default="scope">
¥{{ scope.row.amount }}
</template>
</el-table-column>
<el-table-column prop="remark" label="交易备注" />
<el-table-column prop="transactionTime" label="交易时间" />
</el-table>
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[20,50,99]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="custom-pagination"
teleport="body"
popper-class="theme-pagination-popper"
:popper-append-to-body="true"
/>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getErpCategoryList, getErpTransactionFlowList } from '@/api/bizApi'
const props = defineProps({
accountData: {
type: Object,
default: () => ({})
}
})
const emit = defineEmits(['close'])
const handleClose = () => emit('close')
const tranTypes = ref();
const loading = ref(false);
const searchForm = reactive({
flowName: '',
transactionType: '',
categoryId: '',
})
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSearch = () => {
getList();
}
const handleReset = () => {
Object.assign(searchForm, {
flowName: '',
transactionType: '',
categoryId: '',
})
currentPage.value = 1;
getList();
}
const handleSizeChange = (val) => {
pageSize.value = val;
getList();
}
const handleCurrentChange = (val) => {
currentPage.value = val;
getList();
}
async function getTranTypes(){
try {
const params = {
categoryType: searchForm.transactionType,
}
const res = await getErpCategoryList(params);
tranTypes.value = res || [];
} catch (error) {
console.error('获取数据失败:', error);
tranTypes.value = [];
}
}
async function getList() {
try {
const reqParmas = {
... searchForm,
pageNum: currentPage.value, // 当前页
pageSize: pageSize.value, // 每页条数
accountId: props.accountData.rawData?.accountId || '',
}
const res = await getErpTransactionFlowList(reqParmas);
total.value = res.total;
tableData.value = res.list || [];
} catch (error) {
console.error('获取数据失败:', error);
tableData.value = [];
}
}
onMounted(async () => {
await getList();
await getTranTypes();
})
</script>
<style scoped>
.detail-container {
width: 100%;
height: 100%;
padding: 12px;
color: #e0e6ff;
background: url('@/assets/images/border.png') no-repeat center center;
background-size: 100% 100%;
background-color: transparent !important;
border: none !important;
box-sizing: border-box;
position: relative;
z-index: 10001;
}
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.detail-header h3 {
margin: 0;
color: #409EFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-size: 18px;
}
.close-btn {
background: transparent;
border: none;
font-size: 24px;
color: #e0e6ff;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
z-index: 10002;
}
.close-btn:hover {
color: #409EFF;
}
.split-line {
height: 1px;
background-color: #409EFF;
opacity: 0.6;
margin-bottom: 16px;
}
.detail-body {
width: 100%;
height: calc(100% - 80px);
border: 1px solid #409EFF;
border-radius: 6px;
padding: 16px;
background-color: rgba(10, 30, 60, 0.2);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 16px;
overflow: visible;
position: relative;
z-index: 10001;
}
.search-form {
display: flex;
align-items: center;
width: 100%;
padding-bottom: 16px;
border-bottom: 1px solid rgba(64, 158, 255, 0.3);
flex-wrap: wrap;
position: relative;
z-index: 10001;
}
.form-items-wrapper {
display: flex;
flex: 1;
gap: 20px;
min-width: 0;
flex-wrap: wrap;
}
.form-item {
flex: 1;
margin-bottom: 0 !important;
min-width: 180px;
}
.date-range-item {
min-width: 280px !important;
}
.form-btn-group {
margin-left: 20px;
margin-bottom: 0 !important;
flex-shrink: 0;
display: flex;
gap: 10px;
}
.data-table {
flex: 1;
overflow: auto;
position: relative;
z-index: 10001;
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 10px;
border-top: 1px solid rgba(64, 158, 255, 0.2);
background-color: rgba(10, 30, 60, 0.2);
flex-shrink: 0;
position: relative;
z-index: 10001;
}
:deep(.el-form-item__label) {
color: #e0e6ff !important;
font-size: 14px;
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-date-editor__wrapper) {
background-color: rgba(0, 0, 0, 0.2) !important;
border: 1px solid #409EFF !important;
box-shadow: none !important;
width: 100% !important;
position: relative;
z-index: 10001;
}
:deep(.el-input__inner),
:deep(.el-select__inner),
:deep(.el-date-editor input) {
color: #e0e6ff !important;
background-color: transparent !important;
}
:deep(.el-input__placeholder),
:deep(.el-date-editor__placeholder) {
color: rgba(224, 230, 255, 0.6) !important;
}
:deep(.custom-pagination) {
--el-pagination-text-color: #e0e6ff;
--el-pagination-button-color: #e0e6ff;
--el-pagination-button-hover-color: #409EFF;
--el-pagination-button-active-color: #409EFF;
--el-pagination-border-color: #409EFF;
--el-pagination-bg-color: rgba(10, 30, 60, 0.2) !important;
z-index: 10001;
}
:deep(.el-pagination button) {
background-color: rgba(0, 0, 0, 0.2) !important;
border-color: #409EFF !important;
color: #e0e6ff !important;
}
:deep(.el-pagination .el-pager li) {
color: #e0e6ff !important;
}
:deep(.el-pagination .el-pager li.active) {
color: #409EFF !important;
font-weight: bold;
}
:deep(.el-table) {
--el-table-text-color: #a0cfff;
--el-table-header-text-color: #a0cfff;
--el-table-row-hover-bg-color: rgba(64, 158, 255, 0.2);
--el-table-border-color: transparent !important;
--el-table-stripe-row-bg-color: rgba(10, 30, 60, 0.3);
background-color: transparent !important;
border: none !important;
z-index: 10001;
}
:deep(.el-table th) {
border: none !important;
border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
background-color: rgba(10, 30, 60, 0.8) !important;
color: #a0cfff !important;
}
:deep(.el-table td) {
border: none !important;
border-bottom: 1px solid rgba(64, 158, 255, 0.2) !important;
background-color: transparent !important;
color: #a0cfff !important;
}
:deep(.el-table--striped .el-table__row--striped td) {
background-color: rgba(10, 30, 60, 0.3) !important;
border-bottom-color: rgba(64, 158, 255, 0.2) !important;
}
:deep(.el-table__row:hover > td) {
background-color: rgba(64, 158, 255, 0.2) !important;
border-bottom-color: rgba(64, 158, 255, 0.3) !important;
}
:deep(.el-table tr:last-child td) {
border-bottom: none !important;
}
:deep(.el-table-empty-text) {
color: #a0cfff !important;
background-color: transparent !important;
}
:deep(.el-button) {
--el-button-text-color: #e0e6ff !important;
--el-button-border-color: #409EFF !important;
--el-button-hover-text-color: #fff !important;
--el-button-hover-border-color: #409EFF !important;
--el-button-hover-bg-color: rgba(64, 158, 255, 0.2) !important;
height: 32px;
padding: 0 16px;
z-index: 10001;
}
:deep(.el-button--primary) {
--el-button-text-color: #fff !important;
--el-button-bg-color: rgba(64, 158, 255, 0.8) !important;
--el-button-border-color: #409EFF !important;
--el-button-hover-bg-color: #409EFF !important;
}
:deep(.reset-btn) {
background-color: rgba(0, 0, 0, 0.2) !important;
border-color: #409EFF !important;
color: #e0e6ff !important;
}
:deep(.reset-btn:hover) {
background-color: rgba(64, 158, 255, 0.2) !important;
color: #fff !important;
}
:deep(.el-loading-mask) {
background-color: rgba(10, 30, 60, 0.8) !important;
z-index: 10002;
}
:deep(.el-table__loading-wrapper) {
background-color: transparent !important;
}
:deep(.el-loading-spinner .path) {
stroke: #409EFF !important;
}
:deep(.el-loading-text) {
color: #a0cfff !important;
}
.detail-body::-webkit-scrollbar,
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.detail-body::-webkit-scrollbar-track {
background: rgba(10, 30, 60, 0.1);
border-radius: 3px;
}
.detail-body::-webkit-scrollbar-thumb {
background: rgba(64, 158, 255, 0.5);
border-radius: 3px;
}
</style>
<style>
.theme-select-popper {
background-color: rgba(10, 30, 60, 0.95) !important;
border: 1px solid #409EFF !important;
color: #e0e6ff !important;
z-index: 99999 !important;
pointer-events: auto !important;
position: fixed !important;
}
.theme-select-popper .el-select-dropdown__item {
color: #e0e6ff !important;
background-color: transparent !important;
padding: 6px 12px !important;
}
.theme-select-popper .el-select-dropdown__item:hover {
background-color: rgba(64, 158, 255, 0.2) !important;
color: #fff !important;
}
.theme-select-popper .el-select-dropdown__item.selected {
background-color: rgba(64, 158, 255, 0.5) !important;
color: #fff !important;
}
.theme-pagination-popper {
background-color: rgba(10, 30, 60, 0.95) !important;
border: 1px solid #409EFF !important;
color: #e0e6ff !important;
z-index: 99999 !important;
pointer-events: auto !important;
position: fixed !important;
}
.theme-pagination-popper .el-pagination__sizes-option {
color: #e0e6ff !important;
background-color: transparent !important;
}
.theme-pagination-popper .el-pagination__sizes-option:hover {
background-color: rgba(64, 158, 255, 0.2) !important;
color: #fff !important;
}
.modal-overlay {
pointer-events: auto !important;
}
.modal-overlay .modal-content {
pointer-events: auto !important;
}
</style>