gold-vue/src/components/workspace/GoldGraph.vue

<template>
  <div class="graph">
    <el-card style="width:100%;" class="graph-card">
      <div>
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane :label="t('workbench.coinRecharge')" name="recharge"></el-tab-pane>
          <el-tab-pane :label="t('workbench.coinConsume')" name="consume"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="condition">
        <div class="stats">
          <div v-if="activeTab === 'consume'">{{ t('workbench.total') }} {{ sumConsume / 100 }}</div>&nbsp;&nbsp;
          {{ t('workbench.permanentGold') }}：{{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
          {{ t('workbench.freeGold') }}：{{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
          {{ t('workbench.taskGold') }}：{{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
        </div>
        <div style="display: flex">
          <el-button
              :style="{ backgroundColor: activeTimeRange === 'yes' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'yes' ? 'white' : '#666' }"
              @click="getYes()" size="default">{{ t('workbench.yesterday') }}
          </el-button>
          <el-button
              :style="{ backgroundColor: activeTimeRange === 'today' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'today' ? 'white' : '#666' }"
              @click="getToday()" size="default">{{ t('workbench.today') }}
          </el-button>
          <el-button
              :style="{ backgroundColor: activeTimeRange === 'week' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'week' ? 'white' : '#666' }"
              @click="getWeek()" size="default">{{ t('workbench.thisWeek') }}
          </el-button>
          <el-button
              :style="{ backgroundColor: activeTimeRange === 'month' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'month' ? 'white' : '#666' }"
              @click="getMonth()" size="default">{{ t('workbench.thisMonth') }}
          </el-button>
          <el-button
              :style="{ backgroundColor: activeTimeRange === 'year' ? '#2741DE' : '#E5EBFE', color: activeTimeRange === 'year' ? 'white' : '#666' }"
              @click="getYear()" size="default">{{ t('workbench.thisYear') }}
          </el-button>
        </div>
        <div style="display: flex">
          <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="→"
                          :start-placeholder="t('workbench.startTime')" :end-placeholder="t('workbench.endTime')" format="YYYY-MM-DD HH:mm:ss"
                          style="width:20vw;margin-left:0.5vw;" value-format="YYYY-MM-DD HH:mm:ss"
                          :default-time="defaultTime"
                          :disabled-date="disabledDate" @change="handleDatePickerChange"/>
          <el-button type="primary" size="small" style="margin-left: 0.5vw" @click="getChartData">{{ t('workbench.query') }}</el-button>
        </div>
      </div>

      <div class="graph-content">
        <div ref="chartRef" class="left"
             v-loading="loading"
             element-loading-background="rgba(122, 122, 122, 0)">
          <!--         加上loading动画 图表有点慢-->
        </div>
        <div class="right">
          <el-card class="graph-card-list">
            <div class="card-large">{{ t('workbench.gold') }}{{ activeTab === 'recharge' ? t('workbench.recharge') : t('workbench.consume') }}{{ t('workbench.rank') }}</div>
            <el-select popper-class="mySelectStyle" class="card-select" v-model="selectedType"
                       style="width: 100%; margin-bottom: 15px">
              <el-option :label="t('workbench.allTypes')" value="all"></el-option>
              <el-option :label="t('workbench.permanentGold')" value="permanent"></el-option>
              <el-option :label="t('workbench.freeGold')" value="free"></el-option>
              <el-option :label="t('workbench.taskGold')" value="task"></el-option>
            </el-select>
            <el-table class="card-table" :data="tableData" height="320px">
              <el-table-column prop="rank" :label="t('workbench.rank')" width="60" align="center"></el-table-column>
              <el-table-column prop="market" :label="t('workbench.region')" align="center">
                <template #default="scope">
                  <span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="coinAmount" :label="t('workbench.goldCount')" align="center">
                <template #default="{ row }">
                  {{ row.coinAmount.toLocaleString() }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted, onUnmounted, ref, watch} from 'vue'
import API from '@/util/http'
import {ElMessage} from 'element-plus'
import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc'
import {marketMapping} from "@/utils/marketMap.js";
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

dayjs.extend(utc)

const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
// 加载状态
const loading = ref(true)
// 地区数据
const markets = ref([])
// 图表相关
const dateRange = ref([])
const activeTab = ref('recharge')
const selectedType = ref('all')
const tableData = ref([])
const chartRef = ref(null)
let chartInstance = null
// 图表合计数
const sumRechargePermanent = ref(0)
const sumRechargeFree = ref(0)
const sumRechargeTask = ref(0)
const sumConsumePermanent = ref(0)
const sumConsumeFree = ref(0)
const sumConsumeTask = ref(0)
const sumConsume = ref(0)
// 用户信息
const adminData = ref({})
// 卡片数据相关
const currentGold = ref(0)
const dailyChange = ref(0)
const currentPermanent = ref(0)
const currentFree = ref(0)
const currentFreeJune = ref(0)
const currentFreeDecember = ref(0)
const currentTask = ref(0)
const yearlyRecharge = ref(0)
const yearlyMoney = ref(0)
const recharge = ref(0)
const money = ref(0)
const yearlyReduce = ref(0)
const yearlyConsume = ref(0)
const yearlyRefund = ref(0)
const dailyReduce = ref(0)
const dailyConsume = ref(0)
const dailyRefund = ref(0)
const yearlyRechargeNum = ref(0)
const sumWow = ref(0)
const sumDaily = ref(0)
const rechargeNum = ref(0)
const ydayRechargeNum = ref(0)
const firstRecharge = ref(0)
const length = ref(0)
//  加载状态
const chartLoading = ref(true)

const handleResize = () => {
  if (chartInstance.value) {
    try {
      chartInstance.value.resize()
      console.log('resize一下')
    } catch (error) {
      console.error('图表resize失败:', error)
    }
  }
}
// 初始化图表
const initChart = () => {
  if (!chartInstance && chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    window.addEventListener('resize', handleResize)
  }
}
// 销毁图表
const destroyChart = () => {
  if (chartInstance.value) {
    try {
      chartInstance.value.dispose()
    } catch (error) {
      console.error('图表销毁失败:', error)
    }
    chartInstance.value = null
  }
  window.removeEventListener('resize', handleResize)
}
const formatDate = function (date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 昨天
const getYes = function () {
  const yesterday = dayjs().subtract(1, 'day')
  const startTime = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss')
  const endTime = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss')
  dateRange.value = [startTime, endTime]
  console.log('看看dateRange', dateRange.value)
  activeTimeRange.value = 'yes' // 标记当前激活状态

  getChartData()
}
// 今天
const getToday = function () {
  const today = dayjs()
  const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
  const endTime = today.endOf('day').format('YYYY-MM-DD HH:mm:ss')
  // const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  dateRange.value = [startTime, endTime]
  console.log('看看dateRange', dateRange.value)
  activeTimeRange.value = 'today' // 标记当前激活状态

  getChartData()
}
// 本周
const getWeek = function () {
  const today = dayjs();
  // 获取今天是星期几（0是周日，1是周一，...，6是周六）
  const day = today.day();

  // 计算本周一（如果今天是周一，就取今天；如果是周日，就减6天）
  let monday = today.subtract(day === 0 ? 6 : day - 1, 'day');
  // 计算本周日（如果今天是周日，就取今天；否则就加(7 - day)天）
  let sunday = today.add(day === 0 ? 0 : 7 - day, 'day');

  // 设置时间为起始和结束
  const startTime = monday.startOf('day').format('YYYY-MM-DD HH:mm:ss');
  const endTime = sunday.endOf('day').format('YYYY-MM-DD HH:mm:ss');

  dateRange.value = [startTime, endTime];
  console.log('本周时间范围（周一到周日）：', dateRange.value);
  activeTimeRange.value = 'week';

  getChartData();
};
// 本月
const getMonth = function () {
  const today = dayjs()
  const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss')
  // const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
  const endTime = today.endOf('month').format('YYYY-MM-DD HH:mm:ss')
  dateRange.value = [startTime, endTime]
  console.log('看看dateRange', dateRange.value)
  activeTimeRange.value = 'month' // 标记当前激活状态

  getChartData()
}
// 本年
const getYear = function () {
  const today = dayjs()
  const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss')
  const endTime = today.endOf('year').format('YYYY-MM-DD HH:mm:ss')
  // const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
  dateRange.value = [startTime, endTime]
  console.log('看看dateRange', dateRange.value)
  activeTimeRange.value = 'year' // 标记当前激活状态

  getChartData()
}

// 要加上所有市场的，还有额外计算的(总数 = 永久 + 6月 + 12月 + 免费 + 任务)
const processData = (data) => {
  const summary = {
    currentGold: 0,
    dailyChange: 0,
    currentPermanent: 0,
    currentFreeJune: 0,
    currentFreeDecember: 0,
    currentTask: 0,
    currentFree: 0,
    recharge: 0,
    money: 0,
    yearlyRecharge: 0,
    yearlyMoney: 0,
    consumePermanent: 0,
    consumeFreeJune: 0,
    consumeFreeDecember: 0,
    consumeTask: 0,
    refundPermanent: 0,
    refundFreeJune: 0,
    refundFreeDecember: 0,
    refundTask: 0,
    dailyReduce: 0,
    yearlyConsume: 0,
    yearlyRefund: 0,
    yearlyReduce: 0,
    rechargeNum: 0,
    ydayRechargeNum: 0,
    firstRecharge: 0,
    sumWow: 0,
    sumDaily: 0,
    yearlyRechargeNum: 0
  }

  // 遍历市场
  data.marketCards.forEach(market => {
    for (const i in summary) {
      if (market[i] !== undefined && market[i] !== null) { // 其实还应该卡一个number
        summary[i] += market[i]
      }
    }
  })

  // wow和daily除一下
  length.value = data.markets.length
  console.log(length.value)

  // 计算昨日新增消费和退款
  const yesterdayConsume = summary.consumePermanent + summary.consumeFreeJune + summary.consumeFreeDecember + summary.consumeTask
  const yesterdayRefund = summary.refundPermanent + summary.refundFreeJune + summary.refundFreeDecember + summary.refundTask

  // 更新卡片数据
  currentGold.value = summary.currentGold.toFixed(2)
  dailyChange.value = summary.dailyChange.toFixed(2)
  currentPermanent.value = summary.currentPermanent.toFixed(2)
  currentFree.value = summary.currentFree.toFixed(2)
  currentFreeJune.value = summary.currentFreeJune.toFixed(2)
  currentFreeDecember.value = summary.currentFreeDecember.toFixed(2)
  currentTask.value = summary.currentTask.toFixed(2)

  yearlyRecharge.value = summary.yearlyRecharge.toFixed(2)
  yearlyMoney.value = summary.yearlyMoney.toFixed(2)
  recharge.value = summary.recharge.toFixed(2)
  money.value = summary.money.toFixed(2)

  yearlyReduce.value = summary.yearlyReduce.toFixed(2)
  yearlyConsume.value = summary.yearlyConsume.toFixed(2)
  yearlyRefund.value = summary.yearlyRefund.toFixed(2)
  dailyReduce.value = summary.dailyReduce.toFixed(2)
  dailyConsume.value = yesterdayConsume.toFixed(2)
  dailyRefund.value = yesterdayRefund.toFixed(2)

  yearlyRechargeNum.value = summary.yearlyRechargeNum

  // // 周同比
  // sumWow.value = (marketCards.sumWow / length.value).toFixed(2)
  // // 日环比
  // sumDaily.value = (marketCards.sumDaily / length.value).toFixed(2)

  // rechargeNum.value = summary.rechargeNum
  ydayRechargeNum.value = summary.ydayRechargeNum
  firstRecharge.value = summary.firstRecharge
}

//无法选择的时间
const disabledDate = (time) => {
  const limitDate = new Date(2025, 0, 1);
  return time.getTime() < limitDate.getTime();
}

// 获取市场列表
const getMarkets = async () => {
  console.log("adminData", adminData.value.account)
  try {
    const response = await API({
      url: '/general/adminMarkets',
      data: {
        account: adminData.value.account
      }
    })
    if (Array.isArray(response.data)) {
      // markets.value = response.data.filter(data => data !== "1")
      markets.value = response.data
      console.log('市场列表获取成功:', markets.value)
    } else {
      console.error('获取市场列表失败', response)
      ElMessage.error(t('elmessage.getMarketListFailed'))
    }
  } catch (error) {
    console.error('获取市场列表失败:', error)
    ElMessage.error(t('elmessage.getMarketListFailed'))
  }
}

// 获取图表数据
const getChartData = async () => {
  try {
    // 校验市场数据到底有没有
    if (!markets.value || markets.value.length === 0) {
      await getMarkets()
    }
    // 本年
    if (!dateRange.value || dateRange.value.length === 0) {
      getYear()
    }
    const params = {
      markets: markets.value,
      startDate: dateRange.value[0],
      endDate: dateRange.value[1]
    };


    const response = await API({
      url: '/workbench/getGraph',
      data: params
    })
    console.log('看看params', params)
    if (Array.isArray(response.marketGraphs)) {
      // const filteredGraphs = response.marketGraphs.filter(data => data.market !== "1");
      // 处理图表数据
      processChartData(response.marketGraphs)
      // 处理排名数据
      processRankingData(response.marketGraphs)
    } else {
      console.error('获取图表数据失败:', response)
      ElMessage.error(t('elmessage.getChartDataFailed'))
    }
  } catch (error) {
    console.error('获取图表数据失败:', error)
    ElMessage.error(t('elmessage.getChartDataFailed'))
  }
}
// 处理图表数据
const processChartData = (marketCards) => {
  const chartData = {
    rechargePermanent: [],
    rechargeFree: [],
    rechargeTask: [],
    consumePermanent: [],
    consumeFree: [],
    consumeTask: [],
    sumConsume: []
  }
  // 这是图表的合计数，怎样遍历？？？？？
  const sumRechargePermanent1 = ref(0)
  const sumRechargeFree1 = ref(0)
  const sumRechargeTask1 = ref(0)
  const sumConsumePermanent1 = ref(0)
  const sumConsumeFree1 = ref(0)
  const sumConsumeTask1 = ref(0)
  const sumConsume1 = ref(0)


  marketCards.forEach(market => {
    chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0)
    chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0)
    chartData.rechargeTask.push(market.sumRechargeTask / 100 || 0)
    chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0)
    chartData.consumeFree.push(market.sumConsumeFree / 100 || 0)
    chartData.consumeTask.push(market.sumConsumeTask / 100 || 0)
    chartData.sumConsume.push(market.sumConsume / 100 || 0)

    // 合计数合计数合计数咋算
    sumRechargePermanent1.value += (market.sumRechargePermanent || 0)
    sumRechargeFree1.value += (market.sumRechargeFree || 0)
    //sumRechargeTask1.value += (market.sumRechargeTask || 0)
    sumConsumePermanent1.value += (market.sumConsumePermanent || 0)
    sumConsumeFree1.value += (market.sumConsumeFree || 0)
    sumConsumeTask1.value += (market.sumConsumeTask || 0)
    sumConsume1.value += (market.sumConsume || 0)
  })
  sumRechargePermanent.value = sumRechargePermanent1.value
  sumRechargeFree.value = sumRechargeFree1.value
  sumRechargeTask.value = 0
  sumConsumePermanent.value = sumConsumePermanent1.value
  sumConsumeFree.value = sumConsumeFree1.value
  sumConsumeTask.value = sumConsumeTask1.value
  sumConsume.value = sumConsume1.value

  updateChart(chartData)
}

const processRankingData = (marketCards) => {
  // 每个市场的总金币数
  const rankingData = marketCards.map(market => {
    let coinAmount = 0;
    if (activeTab.value === 'recharge') {
      // 充值排名
      switch (selectedType.value) {
        case 'all':
          coinAmount = (market.sumRechargePermanent / 100 || 0) + (market.sumRechargeFree / 100 || 0) + (market.sumRechargeTask / 100 || 0);
          break;
        case 'permanent':
          coinAmount = market.sumRechargePermanent / 100 || 0;
          break;
        case 'free':
          coinAmount = market.sumRechargeFree / 100 || 0;
          break;
        case 'task':
          coinAmount = market.sumRechargeTask / 100 || 0;
          break;
      }
    } else {
      // 消费排名
      switch (selectedType.value) {
        case 'all':
          coinAmount = (market.sumConsumePermanent / 100 || 0) + (market.sumConsumeFree / 100 || 0) + (market.sumConsumeTask / 100 || 0);
          break;
        case 'permanent':
          coinAmount = market.sumConsumePermanent / 100 || 0;
          break;
        case 'free':
          coinAmount = market.sumConsumeFree / 100 || 0;
          break;
        case 'task':
          coinAmount = market.sumConsumeTask / 100 || 0;
          break;
      }
    }
    return {
      market: market.market,
      coinAmount: coinAmount
    };
  });

  // 按金币数量排序
  rankingData.sort((a, b) => b.coinAmount - a.coinAmount);

  // 排名序号
  tableData.value = rankingData.map((item, index) => ({
    rank: index + 1,
    ...item
  }));
}

watch(selectedType, () => {
  getChartData();
});
// 更新图表
const updateChart = (chartData) => {
  if (!chartInstance) {
    initChart()
  }
  chartLoading.value = true
  try {
    let series = []
    let legend = []

    if (activeTab.value === 'recharge') {
      series = [
        {
          name: t('workbench.permanentGold'),
          type: 'bar',
          stack: 'recharge',
          data: chartData.rechargePermanent,
          itemStyle: {color: '#5470c6'},
          barWidth: 30
        },
        {
          name: t('workbench.freeGold'),
          type: 'bar',
          stack: 'recharge',
          data: chartData.rechargeFree,
          itemStyle: {color: '#91cc75'},
          barWidth: 30
        },
        {
          name: t('workbench.taskGold'),
          type: 'bar',
          stack: 'recharge',
          data: chartData.rechargeTask,
          itemStyle: {color: '#fac858'},
          barWidth: 30
        }
      ]
      legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
    } else {
      series = [
        {
          name: t('workbench.permanentGold'),
          type: 'bar',
          stack: 'consume',
          data: chartData.consumePermanent,
          itemStyle: {color: '#5470c6'},
          barWidth: 30
        },
        {
          name: t('workbench.freeGold'),
          type: 'bar',
          stack: 'consume',
          data: chartData.consumeFree,
          itemStyle: {color: '#91cc75'},
          barWidth: 30
        },
        {
          name: t('workbench.taskGold'),
          type: 'bar',
          stack: 'consume',
          data: chartData.consumeTask,
          itemStyle: {color: '#fac858'},
          barWidth: 30
        }
      ]
      legend = [t('workbench.permanentGold'), t('workbench.freeGold'), t('workbench.taskGold')]
    }

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let result = params[0].name + '<br/>'
          let total = 0;
          params.forEach(param => {
            result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`;
            total += param.value;
          })
          result += `${t('workbench.all')}${activeTab.value === 'recharge' ? t('workbench.recharge') : t('workbench.consume')}: ${total.toLocaleString()}`;
          return result
        }
      },
      legend: {
        data: legend,
        bottom: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: markets.value,
        axisLabel: {
          interval: 0,
          rotate: 0
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: '#000000'
          }
        },
        axisLabel: {
          formatter: function (value) {
            return value.toLocaleString()
          }
        },

      },
      series: series,
      // dataZoom: [
      //   {
      //     type: 'slider',
      //     show: true,
      //     start: 0,
      //     end: 100,
      //     maxSpan: 100,
      //     minSpan: 100,
      //
      //     height: 2,
      //   },
      // ]
    }

    chartInstance.setOption(option)
  } catch (error) {
    console.error('图表更新失败:', error)
    ElMessage.error(t('elmessage.renderChartFailed'))
  } finally {
    setTimeout(() => {
      chartLoading.value = false
    }, 300)
  }
}

// 处理标签切换
const handleTabChange = () => {
  getChartData()
  console.log('标签切换调用图表')
}

const getAdminData = async function () {
  try {
    const result = await API({url: '/admin/userinfo', data: {}})
    adminData.value = result
    console.log('用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}


// 标记当前激活的时间范围按钮
const activeTimeRange = ref('')
// 日期选择器变化时清除按钮激活状态
const handleDatePickerChange = () => {
  activeTimeRange.value = ''
}

onMounted(async () => {
  await getAdminData()
  await getMarkets()
  getYear()
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
})
onUnmounted(() => {
  destroyChart()
})
</script>
<style scoped lang="scss">

/* 整个柱状图的图表样式 */
.graph {
  .condition {
    width: 100%;
    height: 1%;
    display: flex;
    align-items: center;

    .stats {
      display: flex;
      align-items: center;
      width: 35vw;
      font-size: 15px;
    }
  }

  .graph-content {
    flex: 1;
    height: auto;
    display: flex;

    .left {
      width: 70%;
      height: auto;
    }

    .right {
      flex: 1;
      padding: 0.5vw 2vh;
    }
  }
}


.card-item {
  width: 25%;
  height: 28vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0.25vw;
}

.card-title {
  font-weight: bold;
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-large {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin-bottom: 15px;

}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.graph-card {
  background: #F3FAFF;
  box-shadow: 0 0 8px 0 #00000040;
}

.graph-card-list {
  background: #E7F4FD;
  box-shadow: 0 0 8px 0 #00000040;
  padding: 12px;

  .card-select {
    :deep(.el-select__wrapper) {
      background-color: #E7F4FD !important;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25) !important;
      border: none !important;
    }

    :deep(.el-select-dropdown) {
      background-color: #E7F4FD !important;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25) !important;
      border: none !important;
    }
  }

  /* 表格整体背景：把表格容器设为卡片背景 */
  :deep(.el-table) {
    background-color: #E7F4FD !important;
    box-shadow: none !important;
  }

  /* 表头/表体 wrapper 与 table body 单元格 */
  :deep(.el-table__header-wrapper),
  :deep(.el-table__body-wrapper),
  :deep(.el-table__body tr),
  :deep(.el-table__body td) {
    background-color: transparent !important;
  }

  /* 表头 */
  :deep(.el-table__header th) {
    background-color: #E7F4FD !important;
  }

  /* 针对表格 body 中的单元格底部边框 */
  :deep(.el-table__body .el-table__cell) {
    border-bottom: 1px solid #BBC0C9 !important;
  }

}

/* select 列表项 初始颜色 */
.el-select-dropdown__item {
  background: #ffffff;
}

/* select hover状态*/
.el-select-dropdown__item:hover {
  border-radius: 8px;
  margin-left: 2px;
  margin-right: 2px;
  background: #E5EBFE;
  height: 32px;
}

/* 选中状态（针对 is-selected 类） */
.el-select-dropdown__item.is-selected {
  color: #2549E0;
  border-radius: 8px;
}

/* tabs的样式 */
/* 选中 tab 的文字颜色 */
:deep(.el-tabs__item.is-active) {
  color: #2741DE !important;
  font-size: 18px;
  font-weight: bold;
}
</style>