Merge remote-tracking branch 'origin/dev' into dev
| | |
| | | updateTime() |
| | | timer.value = setInterval(updateTime, 1000) |
| | | } |
| | | |
| | | // 客户饼图 |
| | | const initCustomerPieChart = () => { |
| | | if (!customerPieChartRef.value) return |
| | | const chart = echarts.init(customerPieChartRef.value) |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: '{a} <br/>{b}: {c} ({d}%)' |
| | | }, |
| | | series: [{ |
| | | name: '客户分布', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | center: ['50%', '50%'], |
| | | data: [ |
| | | { value: 25, name: '潜在客户', itemStyle: { color: '#00d4ff' } }, |
| | | { value: 25, name: '意向客户', itemStyle: { color: '#0099ff' } }, |
| | | { value: 25, name: '签约客户', itemStyle: { color: '#6666ff' } }, |
| | | { value: 25, name: '流失客户', itemStyle: { color: '#ffcc00' } } |
| | | ], |
| | | label: { |
| | | show: false |
| | | } |
| | | }] |
| | | } |
| | | chart.setOption(option) |
| | | charts.value.push(chart) |
| | | } |
| | | |
| | | // 销售柱状图 |
| | | const initSalesBarChart = () => { |
| | | if (!salesBarChartRef.value) return |
| | | const chart = echarts.init(salesBarChartRef.value) |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['6/9', '6/10', '6/11', '6/12', '6/13'], |
| | | axisLine: { lineStyle: { color: '#333' } }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: '#333' } } |
| | | }, |
| | | series: [{ |
| | | data: [150, 200, 180, 220, 190], |
| | | type: 'bar', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: 'rgba(0,164,237,0)' }, |
| | | { offset: 1, color: '#4EE4FF' } |
| | | ]) |
| | | } |
| | | }] |
| | | } |
| | | chart.setOption(option) |
| | | charts.value.push(chart) |
| | | } |
| | | |
| | | // 数据统计横向柱状图 |
| | | const initDataBarChart = () => { |
| | | if (!dataBarChartRef.value) return |
| | | const chart = echarts.init(dataBarChartRef.value) |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | | top: '10%', |
| | | bottom: '10%' |
| | | }, |
| | | xAxis: { |
| | | type: 'value', |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: '#333' } } |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: ['设计数据', '财务数据', '生产数据', '合同数据'], |
| | | axisLine: { lineStyle: { color: '#333' } }, |
| | | axisLabel: { color: '#B8C8E0' } |
| | | }, |
| | | series: [{ |
| | | data: [80, 100, 120, 90], |
| | | type: 'bar', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
| | | { offset: 0, color: 'rgba(0,164,237,0)' }, |
| | | { offset: 1, color: '#4EE4FF' } |
| | | ]) |
| | | } |
| | | }] |
| | | } |
| | | chart.setOption(option) |
| | | charts.value.push(chart) |
| | | } |
| | | |
| | | // 财务分析面积图 |
| | | const initFinancialAreaChart = () => { |
| | | if (!financialAreaChartRef.value) return |
| | | const chart = echarts.init(financialAreaChartRef.value) |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | | top: '10%', |
| | | bottom: '20%' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['6/9', '6/10', '6/11', '6/12', '6/13'], |
| | | axisLine: { lineStyle: { color: '#333' } }, |
| | | axisLabel: { color: '#B8C8E0' } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: '#333' } } |
| | | }, |
| | | series: [{ |
| | | data: [150, 180, 200, 170, 190], |
| | | type: 'line', |
| | | areaStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: 'rgba(0, 212, 255, 0.3)' }, |
| | | { offset: 1, color: 'rgba(0, 212, 255, 0.1)' } |
| | | ]) |
| | | }, |
| | | lineStyle: { color: '#00d4ff' }, |
| | | itemStyle: { color: '#00d4ff' } |
| | | }] |
| | | } |
| | | chart.setOption(option) |
| | | charts.value.push(chart) |
| | | } |
| | | |
| | | // 实时数据折线图 |
| | | const initRealtimeLineChart = () => { |
| | | if (!realtimeLineChartRef.value) return |
| | | const chart = echarts.init(realtimeLineChartRef.value) |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | | top: '10%', |
| | | bottom: '20%' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['6/9', '6/10', '6/11', '6/12', '6/13'], |
| | | axisLine: { lineStyle: { color: '#333' } }, |
| | | axisLabel: { color: '#B8C8E0' } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: '#333' } } |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '数据1', |
| | | data: [120, 140, 160, 130, 150], |
| | | type: 'line', |
| | | lineStyle: { color: '#00d4ff' }, |
| | | itemStyle: { color: '#00d4ff' } |
| | | }, |
| | | { |
| | | name: '数据2', |
| | | data: [100, 120, 140, 110, 130], |
| | | type: 'line', |
| | | lineStyle: { color: '#0099ff' }, |
| | | itemStyle: { color: '#0099ff' } |
| | | } |
| | | ] |
| | | } |
| | | chart.setOption(option) |
| | | charts.value.push(chart) |
| | | } |
| | | |
| | | // 全屏功能实现 - 针对data-dashboard元素 |
| | | const toggleFullscreen = () => { |
| | | const element = document.querySelector('.data-dashboard') |
| | |
| | | <style scoped> |
| | | .data-dashboard { |
| | | position: relative; |
| | | width: 100vw; |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | background-image: url("@/assets/BI/backImage@2x.png"); |
| | | background-size: cover; |
| | |
| | | z-index: 9999; |
| | | } |
| | | |
| | | /* 全屏状态下的内容区域适配 */ |
| | | .data-dashboard:fullscreen .dashboard-content { |
| | | height: calc(100vh - 120px); |
| | | } |
| | | |
| | | .data-dashboard:-webkit-full-screen .dashboard-content { |
| | | height: calc(100vh - 120px); |
| | | } |
| | | |
| | | .data-dashboard:-ms-fullscreen .dashboard-content { |
| | | height: calc(100vh - 120px); |
| | | } |
| | | |
| | | .dashboard-header { |
| | | position: relative; |
| | |
| | | display: flex; |
| | | gap: 30px; |
| | | padding: 0 30px; |
| | | height: calc(100vh - 120px); |
| | | height: calc(100% - 120px); |
| | | overflow: hidden; |
| | | } |
| | | |
| | |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | } |
| | | .panel-item { |
| | | background: rgba(0, 20, 60, 0.8); |
| | | border: 1px solid rgba(0, 212, 255, 0.3); |
| | | border-radius: 12px; |
| | | padding: 30px; |
| | | backdrop-filter: blur(10px); |
| | | min-height: 200px; |
| | | } |
| | | |
| | | .panel-header { |
| | | background-image: url("@/assets/BI/kehuhetongback@2x.png"); |
| | | background-size: 100% 100%; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | height: 36px; |
| | | } |
| | | |
| | | .panel-title { |
| | |
| | | font-size: 20px; |
| | | color: #FFFFFE; |
| | | } |
| | | .data-statistics { |
| | | flex: 1; |
| | | } |
| | | .financial-header { |
| | | background-image: url("@/assets/BI/caiwufenxiback@2x.png"); |
| | | background-size: 100% 100%; |
| | |
| | | color: #D9ECFF; |
| | | padding-left: 46px; |
| | | line-height: 36px; |
| | | } |
| | | .data-legend { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .legend-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .legend-color { |
| | | width: 12px; |
| | | height: 12px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .legend-text { |
| | | font-size: 12px; |
| | | color: #999; |
| | | } |
| | | |
| | | .horizontal-bar-chart { |
| | | height: 150px; |
| | | } |
| | | |
| | | .financial-analysis, |
| | | .realtime-analysis { |
| | | flex: 1; |
| | | } |
| | | |
| | | .financial-tabs, |
| | | .realtime-tabs { |
| | | display: flex; |
| | | gap: 16px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .tab { |
| | | padding: 12px 24px; |
| | | background: rgba(0, 0, 0, 0.3); |
| | | border: 1px solid rgba(0, 212, 255, 0.3); |
| | | border-radius: 6px; |
| | | color: #999; |
| | | cursor: pointer; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .tab.active { |
| | | background: rgba(0, 212, 255, 0.2); |
| | | color: #00d4ff; |
| | | border-color: #00d4ff; |
| | | } |
| | | |
| | | .area-chart, |
| | | .line-chart { |
| | | height: 150px; |
| | | } |
| | | |
| | | /* 自定义单选按钮组样式 */ |