yaowanxin
8 小时以前 c0207243208de40cf191e18e3e4326993c4d72d7
Merge remote-tracking branch 'origin/dev' into dev
已修改1个文件
289 ■■■■■ 文件已修改
src/views/reportAnalysis/dataDashboard/index.vue 289 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/reportAnalysis/dataDashboard/index.vue
@@ -876,206 +876,6 @@
  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')
@@ -1242,7 +1042,8 @@
<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;
@@ -1280,18 +1081,6 @@
  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;
@@ -1332,7 +1121,7 @@
  display: flex;
  gap: 30px;
  padding: 0 30px;
  height: calc(100vh - 120px);
  height: calc(100% - 120px);
  overflow: hidden;
}
@@ -1413,21 +1202,12 @@
    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 {
@@ -1667,9 +1447,6 @@
    font-size: 20px;
    color: #FFFFFE;
}
.data-statistics {
  flex: 1;
}
.financial-header {
    background-image: url("@/assets/BI/caiwufenxiback@2x.png");
    background-size: 100% 100%;
@@ -1683,66 +1460,6 @@
    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;
}
/* 自定义单选按钮组样式 */