qp_onemap_ui/src/views/skmh/index.vue

<template>
  <div class="dashboard-container">
    <!-- 顶部横幅 -->

    <!-- <div class="server_title">
      <el-image
        style="width: 50%; height: calc(100vh - 120px)"
        src="static/images/wgn_title.png"
        fit="cover"
      />
      <div class="server_title_text">
        <div class="server_title_text_title">时空门户</div>
        <div class="server_title_text_content">
          时空门户子系统为用户提供信息概览、导航入口及交互功能，帮助用户快速了解和使用平台服务。系统统计访问量（累计和日均）、用户使用时长及活跃时段；展示平台功能、核心能力及操作演示视频；统计并展示服务总数、分类占比及新上线服务；同时统计各委办平台的注册用户信息及用户总数。
        </div>
      </div>
    </div> -->

    <!-- 顶部横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="banner-title">时空门户</h1>
        <p class="banner-description">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时空门户子系统为用户提供信息概览、导航入口及交互功能，帮助用户快速了解和使用平台服务。系统统计访问量（累计和日均）、用户使用时长及活跃时段；展示平台功能、核心能力及操作演示视频；统计并展示服务总数、分类占比及新上线服务；同时统计各委办平台的注册用户信息及用户总数。
        </p>
        <!-- <div>
          <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
        </div> -->
      </div>
    </div>
   
    <div class="server_list_box">
      <div class="server_list_box_table">
        <div
          v-for="(item, index) in dataList[0].data"
          :key="item.index"
          class="server_list_box_table_item"
          :id="item.index + 'list'"
        >
          <div class="server_list_box_table_item_content">
            <div class="server_list_box_table_item_content_title">{{ item.title }}</div>
            <div class="server_list_box_table_item_content_text">{{ item.text }}</div>
            <div class="server_list_box_table_item_content_button_box">
              <div v-if="index < 3"
                class="server_list_box_table_item_content_button_box_item"
                @click.stop="handleOpenPage(item)"
              >
                进入系统
              </div>
              <div v-else
                class="server_list_box_table_item_content_button_box_expect"
              >
                敬请期待
              </div>
            </div>
          </div>
          <div class="server_list_box_table_item_image">
            <el-image
              style="width: 690px; height: 410px"
              :src="item.picture"
              fit="cover"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 平台数据统计 -->
    <!-- <div class="stats-section">
      <div class="overview-header">
        <h2>平台数据统计</h2>
      </div>
      <div class="stats-grid">
        <div class="stat-card card-1">
          <div class="stat-label">平台服务总数
              <el-image
              style="width: 20px; height: 20px"
              src="static/images/skmh-1.png"
              fit="cover"
            />
          </div>
          <div class="stat-number"><NumberScroll :value="countData.total.service" :duration="2000" /></div>
          <div class="stat-label">较上月增长{{countData.grown}}%</div>
        </div>
        <div class="stat-card card-2">
          <div class="stat-label">新上线服务统计
            <el-image
              style="width: 20px; height: 20px"
              src="static/images/skmh-2.png"
              fit="cover"
            />
          </div>
          <div class="stat-number"><NumberScroll :value="countData.curMonth.service" :duration="2000" /></div>
          <div class="stat-label">本月新增服务</div>
        </div>
        <div class="stat-card card-3">
          <div class="stat-label">注册用户总数
            <el-image
              style="width: 20px; height: 20px"
              src="static/images/skmh-3.png"
              fit="cover"
            />
          </div>
          <div class="stat-number"><NumberScroll :value="countData.total.username" :duration="2000" /></div>
          <div class="stat-label">本周新增{{countData.curWeek.username}}人</div>
        </div>
      </div>
    </div> -->

    <!-- 数据概览 -->
    <!-- <div class="data-overview">
      <div class="overview-header">
        <h2>数据概览</h2>
      </div>
       <div class="time-section">
        <div class="time-card">
          <div class="time-content">
            <div style="">
              <el-date-picker
                class="el-date-picker"
                v-model="fromTime.date"
                :clearable="false"
                type="daterange"
                range-separator="到"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                 @change="changeTime"
                
              />
            </div>
            <div class="button-row">
              <el-button type="primary" @click="handleType(7)">最近7天</el-button>
              <el-button type="primary" @click="handleType(30)">最近30天</el-button>
              <el-button type="primary" @click="handleType(90)">最近90天</el-button>
              <el-button type="primary" @click="handleType(365)">最近1年</el-button>
          </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="charts-grid"> -->
        <!-- 访问量统计柱状图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">访问量统计</div>
          <div ref="deviceChart" class="chart-container"></div>
        </div> -->
        <!-- 服务分类占比饼图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">服务分类占比</div>
          <div ref="statusChart" class="chart-container"></div>
        </div> -->
        <!-- 用户活跃度分析折线图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">用户活跃度分析</div>
          <div ref="activityChart" class="chart-container"></div>
        </div> -->
        <!-- 数据量柱状图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">数据量</div>
          <div ref="dataVolumeChart" class="chart-container"></div>
        </div> -->
      <!-- </div>
    </div> -->

    <!-- 设备综合分析比较 -->
    <!-- <div class="comparison-section">
      <div class="chart-card full-width">
        <div class="chart-title">用户分布</div>
        <el-table :data="tableData" style="width: 100%;"
          height="530"
          :header-cell-style="headerCellStyle"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          stripe
          border>
          <el-table-column prop="unit" label="委办单位" />
          <el-table-column prop="user" label="用户数量" />
          <el-table-column prop="active" label="活跃天数" />
          <el-table-column prop="count" label="服务使用量" />
        </el-table>
      </div>
    </div> -->

    <!-- 功能演示 -->
    <!-- <div class="demo-section">
      <div class="overview-header">
        <h2>功能演示</h2>
      </div>
      <div class="demo-grid">
        <div class="demo-card" v-for="item in applications" :key="item.id">
          <div class="demo-thumbnail" :style="{ backgroundImage: 'url(' + item.backImg + ')',backgroundSize: 'cover' }">
            <div class="play-btn" @click="openVideo(item)">▶</div>
          </div>
          <div class="demo-title">
            <div class="demo-label">{{item.title}}</div>
            <div class="demo-text">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div> -->

    <div>
      <el-dialog
        v-model="centerDialogVisible"
        title="预览"
        width="60%"
        center
        :before-close="closeDialog"
      >
        <video :src="videoUrl" controls style="width: 100%" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { ElNotification } from "element-plus";
import appCenter from "@/api/appCenter";
import { countUserList,coutService,totalCountGroupByTime,countUserDataByAutoTime } from "@/api/count";
import moment from "moment";
import NumberScroll from '@/components/AppVue/numberScroll.vue'
export default {
  name: 'SpatialTemporalPortal',
  components: {
    NumberScroll
  },
  data() {
    return {
      deviceChart: null,
      statusChart: null,
      activityChart: null,
      dataVolumeChart: null,
      comparisonChart: null,
      centerDialogVisible: false,
      videoUrl: "",
      imageUrl: "static/images/wgn_title.png",
      dataList:systemConfig.examplelist,
      countData:{
        total:{
          service:0,
          username:0,
        },
        curWeek:{
          service:0,
          username:0,
        },
        curMonth:{
          service:0,
          username:0,
        },
        lastMonth:{
          service:0,
          username:0,
        },
        grown:0,
      },
      fromTime:{
        date:[new Date(new Date().setMonth(new Date().getMonth() - 1)),new Date()],// 默认显示最近一个月
      },
      tableData:[],
      applications:[],
    }
  },
  computed: {
    headerCellStyle() {
      return {
        backgroundColor: "rgba(24, 144, 255, 0.25)",
        color: "#0071e3",
        fontWeight: "bold",
        borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
        padding: "12px 8px",
      };
    },
    rowStyle() {
      return {
        // 调整行背景色为更浅的黑色，增加透明度
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
        transition: "all 0.3s ease",
      };
    },
    cellStyle() {
      return {
        color: "#e0e0e0",
        padding: "12px 8px",
        borderRight: "1px solid rgba(255, 255, 255, 0.05)",
      };
    },
  },
  mounted() {
    // this.initData()
    // window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    // window.removeEventListener('resize', this.handleResize)
    // this.destroyCharts()
  },
  methods: {
    initData(){
      this.getTimeRange();
      this.getCountUserDataByAutoTime();
      this.getDmsDataList();
    },
    getTimeRange(){
      this.getTotalCountGroupByTime();
      this.getCountUserList();
      this.getCoutService();
    },
    openVideo(param) {
      console.log(param)
      this.videoUrl = param.url;
      this.centerDialogVisible = true;
    },
    closeDialog() {
      this.videoUrl = "";
      this.centerDialogVisible = false;
    },
    handleOpenPage(item){
      if(item.url){
        window.open(item.url, '_blank');
      }else{
        ElNotification.success({
            title: "提示",
            message: "暂未开放服务",
            offset: 80,
          });
      }
      
    },
    getDmsDataList() {
      let requestParams = {
        columnId: systemConfig.columnIds[2], // 应用中心栏目id（示范应用）
        states: 0,
        orderBy: JSON.stringify([{"field":"update_time","orderByType":2}]),
        pageSize: 9999,
        page: 0,
      };
      this.applications = [];
      appCenter.getDmsDataList(requestParams).then((res) => {
        if (res.code === 200) {
          this.applications = res.content.data.map((item) => ({
            ...item,
            status:
              item.status === 0
                ? "待审核"
                : item.status === 1
                ? "待发布"
                : item.status === 2
                ? "未完成"
                : "已完成",
            createTime: moment(item.create_time).format("YYYY-MM-DD HH:mm:ss"),
            backImg: systemConfig.dmsDataProxy + item.c_picture,
            url: item.c_url,
          }));
        }
      });
    },
    getCountUserDataByAutoTime(){
      let param = JSON.stringify([
        {
          name: "total",
          start: '2000-01-01 00:00:00', // 从2000年1月1日开始
          end: moment(new Date()).format("YYYY-MM-DD 23:59:59") // 到当前一天结束时间
        },
        {
          name: "curWeek",
          start: moment().weekday(1).format("YYYY-MM-DD 00:00:00"), //本周一00:00:00
          end: moment(new Date()).format("YYYY-MM-DD 23:59:59") // 到当前一天结束时间
        },
        {
          name: "curMonth",
          start: moment().startOf('month').format('YYYY-MM-DD 00:00:00'), //本月1日00:00:00
          end: moment(new Date()).format("YYYY-MM-DD 23:59:59") // 到当前一天结束时间
        },
        {
          name: "lastMonth",
          start: moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00'), //上月1日00:00:00
          end:  moment().subtract(1, 'month').endOf('month').format("YYYY-MM-DD 23:59:59") //上月最后一天23:59:59
        },
      ])
      // console.log(param)
      countUserDataByAutoTime(param).then(res => {
        // console.log(res)
        this.countData = res;
        this.countData.grown = (res.curMonth.service/res.lastMonth.service)*100;
        this.countData.grown = this.countData.grown.toFixed(2)
      })
    },
    getTotalCountGroupByTime(){
      let start = this.fromTime.date[0], end = this.fromTime.date[1];
      start = moment(start).format("YYYY-MM-DD 00:00:00");
      end = moment(end).format("YYYY-MM-DD 23:59:59");
      totalCountGroupByTime(start,end).then(res => {
        this.drawLineChart(res)
      })
    },
    drawLineChart(data){
      let that = this;
      let times = []
      let values = []
      data.sort((a, b) => a.time - b.time)
      data.forEach((item,index) => {
        times.push(moment(item.time).format("YYYY-MM-DD"))
        values.push(item.count)
      })
      // 基于准备好的dom，初始化echarts实例
      let lineChart = echarts.init(this.$refs.deviceChart)
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          },
          formatter: function (params) {
            let str = '';
            params.forEach(item => {
              str += `${item.name} <br/> ${item.seriesName}: ${item.value}次<br/>`;
            });
            return str;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: times,
          axisLabel: {
            color: '#a3b6c7',
            formatter: function (params) {
              let str = '';
              let arr = params.split("-")
              str = `${arr[1]}/${arr[2]}`
              return str;
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
          
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: "访问次数",
            type: 'line',
            data: values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1E90FF' },
                { offset: 1, color: '#00BFFF' }
              ])
            }
          }
        ]
      }
      // 绘制图表
      lineChart.setOption(option);
      that.deviceChart = lineChart;
    },
    getCoutService(){
        let start = this.fromTime.date[0], end = this.fromTime.date[1];
        start = moment(start).format("YYYY-MM-DD 00:00:00");
        end = moment(end).format("YYYY-MM-DD 23:59:59");
        coutService(new Date(start),new Date(end)).then(res => {
          // console.log('[ res ] >', res)
          let arr = [];
          if(res !=  undefined){
            res.sort((a, b) => b.count - a.count)
            res.forEach(item => {
              // let str = { value: item.count, name: item.service_name, itemStyle: { color: '#52C41A' } }
              let str = { value: item.count, name: item.service_name }
              arr.push(str)
            })
          }
          this.initStatusChart(arr)
        })
    },
    getCountUserList(){
      let that = this
      let start = this.fromTime.date[0], end = this.fromTime.date[1];
      start = moment(start).format("YYYY-MM-DD 00:00:00");
      end = moment(end).format("YYYY-MM-DD 23:59:59");
      countUserList(start,end).then(res => {
        res.sort((a, b) => b.count - a.count)
        that.tableData = res;
      })
    },
    handleType(param){
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - (param - 1))
      console.log(start,end)
      this.fromTime.date = [start,end];
      this.getTimeRange();
    },
    changeTime(v){
      this.fromTime.date=v
      this.getTimeRange();
    },
    
    initDeviceChart() {
      this.deviceChart = echarts.init(this.$refs.deviceChart)
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'horizontal',
          // bottom: 0,
          top:0,
          textStyle: {
            color: '#a3b6c7'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1E90FF' },
                { offset: 1, color: '#00BFFF' }
              ])
            }
          }
        ]
      }
      this.deviceChart.setOption(option)
    },
    
    initStatusChart(seriesData) {
      this.statusChart = echarts.init(this.$refs.statusChart)
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          textStyle: {
            color: '#a3b6c7'
          }
        },
        series: [
          {
            name: '服务分类占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#0A192F',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      }
      this.statusChart.setOption(option)
    },
    
    initActivityChart() {
      this.activityChart = echarts.init(this.$refs.activityChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '活跃度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230]
          }
        ]
      }
      this.activityChart.setOption(option)
    },
    
    initDataVolumeChart() {
      this.dataVolumeChart = echarts.init(this.$refs.dataVolumeChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [1200, 2000, 1500, 800, 700, 1100, 1300],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: '#FF7F50'
            }
          }
        ]
      }
      this.dataVolumeChart.setOption(option)
    },
    
    initComparisonChart() {
      this.comparisonChart = echarts.init(this.$refs.comparisonChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: ['设备A', '设备B', '设备C'],
          textStyle: {
            color: '#a3b6c7'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '设备A',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: '设备B',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#52C41A'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(82, 196, 26, 0.6)' },
                { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
              ])
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: '设备C',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#FF7F50'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 127, 80, 0.6)' },
                { offset: 1, color: 'rgba(255, 127, 80, 0.1)' }
              ])
            },
            data: [150, 232, 201, 154, 190, 330]
          }
        ]
      }
      this.comparisonChart.setOption(option)
    },
    
    handleResize() {
      if (this.deviceChart) this.deviceChart.resize()
      if (this.statusChart) this.statusChart.resize()
      if (this.activityChart) this.activityChart.resize()
      if (this.dataVolumeChart) this.dataVolumeChart.resize()
      if (this.comparisonChart) this.comparisonChart.resize()
    },
    
    destroyCharts() {
      if (this.deviceChart) {
        this.deviceChart.dispose()
        this.deviceChart = null
      }
      if (this.statusChart) {
        this.statusChart.dispose()
        this.statusChart = null
      }
      if (this.activityChart) {
        this.activityChart.dispose()
        this.activityChart = null
      }
      if (this.dataVolumeChart) {
        this.dataVolumeChart.dispose()
        this.dataVolumeChart = null
      }
      if (this.comparisonChart) {
        this.comparisonChart.dispose()
        this.comparisonChart = null
      }
    }
  }
}
</script>

<style lang="less" scoped>

/* 顶部横幅样式 */
.banner {
  width: 100%;
  // height: calc(100vh - 120px);
  height: 552px;
  background: url('@static/images/skmh/bg.png');
  background-size: cover;
  display: flex;
  justify-content: right;
  align-items: start;
  position: relative;
  overflow: hidden;

  .banner-content {
    position: relative;
    z-index: 2;
    text-align: right;
    max-width: 500px;
    padding: 0 10%;
    justify-content: right;
    display: grid;
    padding-top: 100px;
  }

  .banner-title {
    font-size: 56px;
    font-weight: bold;
    // letter-spacing: 0.5rem;
    // margin-bottom: 20px;
    color: #ffffff;
    text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .banner-description {
    font-size: 16px;
    // line-height: 1.8; 
    margin: 20px 0px;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
  }

  .enter-button {
    padding: 12px 36px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #1890ff;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: #40a9ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    }
  }
}

/* 确保你的自定义样式优先级更高 */
.el-date-picker {
    /* 重置为期望的样式 */
    color: initial !important; /* 使用 !important 来确保优先级 */
    background-color: white !important; /* 确保背景色正确 */
}
.dashboard-container {
  // background-color: #0A192F;
  // min-height: 100vh;
  // color: #fff;

  width: 100%;
  min-height: 100vh;
  background-color: #01012f;
  color: #ffffff;
  overflow-x: hidden;
}

.server_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.server_title_text {
  width: calc(100vw - 824px);
  height: calc(100vh - 120px);
  background-color: #1c2631;
  color: #fff;
  padding: 0 160px 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  &_title {
    font-size: 64px;
    font-weight: bold;
    // letter-spacing: 0.5rem;
  }
  &_content {
    margin-top: 77px;
    font-size: 22px;
  }
}

/* 平台数据统计 */
.stats-section {
  padding: 40px 10%;
  margin-top: 100px;
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
  }
  
  .stats-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    
    .stat-card {
      width: 400px;
      height: 150px;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .stat-number {
        font-size: 36px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #fff;
      }
      
      .stat-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        width: 100%;
        justify-content: space-between;
        display: flex;
      }
    }
    
    .card-1 {
      background: linear-gradient(135deg, #3B82F6 0%, #4F46E5 100%);
    }
    
    .card-2 {
      background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
    }
    
    .card-3 {
      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
    }
  }
}

/* 数据概览 */
.data-overview {
  padding: 0 10% 40px;
  
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
    
    .time-tabs {
      display: flex;
      gap: 20px;
      
      .tab {
        padding: 8px 16px;
        cursor: pointer;
        color: #a3b6c7;
        border-radius: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          color: #409eff;
        }
        
        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
  
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    
    .chart-card {
      background-color: rgba(30, 41, 59, 0.6);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      
      .chart-title {
        font-size: 18px;
        color: #fff;
        margin-bottom: 20px;
        text-align: left;
      }
      
      .chart-container {
        height: 300px;
        width: 100%;
      }
    }
  }
}
// 时间筛选
.time-section{
  padding: 0 0px 10px;
  .time-card {
    // background-color: rgba(30, 41, 59, 0.6);
    // border-radius: 12px;
    padding: 10px;
    // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  .time-content{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}


/* 设备综合分析比较 */
.comparison-section {
  padding: 0 10% 40px;
  
  .chart-card {
    background-color: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    &.full-width {
      max-width: 100%;
    }
    
    .chart-title {
      font-size: 18px;
      color: #fff;
      margin-bottom: 20px;
      text-align: left;
    }
    
    .chart-container {
      height: 400px;
      width: 100%;
    }
  }
}

/* 功能演示 */
.demo-section {
  padding: 0 10% 100px;
  
 .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
  }
  
  .demo-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    
    .demo-card {
      width: 350px;
      background-color: rgba(30, 41, 59, 0.6);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
       &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
        border-color: rgba(24, 144, 255, 0.6);
      }
      
      .demo-thumbnail {
        height: 200px;
        background-color: #1E90FF;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .play-btn {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.8);
          color: #1E90FF;
          font-size: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #fff;
            transform: scale(1.1);
          }
        }
      }
      
      .demo-title {
        padding: 15px;
        color: #fff;
        text-align: left;
      }
      .demo-label {
        font-size: 16px;
        color: #fff;
        padding-bottom: 10px;
        text-align: left;
      }
      .demo-text {
        font-size: 12px;
        color: #fff;
        text-align: left;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    padding-right: 5%;
    
    .banner-content {
      h1 {
        font-size: 32px;
      }
    }
  }
  
  .stats-section {
    .stats-grid {
      gap: 20px;
      
      .stat-card {
        width: 100%;
        max-width: 300px;
      }
    }
  }
  
  .data-overview {
    .overview-header {
      flex-direction: column;
      gap: 20px;
      
      h2 {
        text-align: center;
      }
    }
    
    .charts-grid {
      grid-template-columns: 1fr;
      
      .chart-card {
        .chart-container {
          height: 250px;
        }
      }
    }
  }
  
  .comparison-section {
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .demo-section {
    .demo-grid {
      gap: 20px;
      
      .demo-card {
        width: 100%;
        max-width: 350px;
      }
    }
  }
}
// 美化表格行悬停效果
:deep(.el-table__body tr:hover > td) {
  background-color: rgba(24, 144, 255, 0.1) !important;
}

// 美化表格边框
:deep(.el-table__inner-wrapper) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table__cell) {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

:deep(.el-table__row) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

// 调整奇偶行背景色，使其更明亮
:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

// 调整表格主体背景色
:deep(.el-table__body) {
  background-color: rgba(0, 0, 0, 0.05);
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background-color: rgba(255, 255, 255, 0.02);
}

.server_list_box {
  width: 100vw;
  background-color: #00002e;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  position: relative;
  padding-bottom: 100px;
  &_menu {
    position: absolute;
    top: 100px;
    left: 10px;
    z-index: 1;
  }
  &_title {
    margin: 100px 0;
    font-size: 35px;
    font-weight: bold;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background-image: linear-gradient(to right, #1d88f0, #00bfff);
    }
  }
  &_search {
    // margin-top: 100px;
    font-size: 25px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: -webkit-fill-available;
    justify-content: center;
    .input-with-select {
      background: #08224a;
    }
  }
  &_table {
    // margin-top: 50px;
    width: 100vw;
    &_item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 50px 0;

      &:nth-child(odd) {
        flex-direction: row;
      }
      &:nth-child(even) {
        flex-direction: row-reverse;
      }
      &_content {
        width: 760px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &_title {
          font-size: 35px;
          font-weight: bold;
          color: #fff;
          text-align: left;
          width: 100%;
        }
        &_text {
          margin-top: 35px;
          font-size: 18px;
          text-align: left;
          width: 100%;
        }
        &_button_box {
          display: flex;
          // justify-content: space-evenly;
          text-align: left;
          width: 100%;
          &_item {
            margin-top: 35px;
            font-size: 20px;
            // letter-spacing: 0.2rem;
            // color: #4095e5;
            // border: 1px solid #4095e5;
            background: linear-gradient(97.31deg, #1586FF 12.71%, #0E5AF4 91.55%);
            color: #fff;
            border-radius: 10px;
            padding: 10px 36px;
            cursor: pointer;
            &:hover {
              // background-color: #077ae6;
               background: linear-gradient(97.31deg, #067cfa 12.71%, #0047d4 91.55%);
              color: #fff;
            }
          }
          &_expect {
            margin-top: 35px;
            font-size: 20px;
            // letter-spacing: 0.2rem;
            // color: #4095e5;
            // border: 1px solid #4095e5;
            background: linear-gradient(97.31deg, #2f2f30 12.71%, #202020 91.55%);
            color: #ccc;
            border-radius: 10px;
            padding: 10px 36px;
            cursor: pointer;
            &:hover {
              // background-color: #077ae6;
               background: linear-gradient(97.31deg, #424242 12.71%, #212122 91.55%);
              color: #ccc;
            }
          }
        }
      }
      &_image {
        width: 690px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        overflow: hidden;
      }
    }
  }
}
</style>