MaritimeExpo/ExpeditionTask/weather_index.vue

<template>
  <div class="content">
    <div class="head">
      <h1>短周期气象预报监控平台</h1>
      <div class="weather"><span id="showTime" style="color: red;">大风预警：预计持续1h5级大风，不建议作业</span></div>
    </div>
    <!-- Left Column -->
    <div class="left">
      <!-- Air Pressure -->
      <div class="air">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
        <!-- <div class="air-title title numfont">滚转率</div> -->
        <div class="temperature">
          <div class="tem-hum-title">温度</div>
          <div class="tem-hum-chart">
            <img src="@/assets/imgs/wendu1.png" style="height: 90%;margin-top: 5px;">
          </div>
          <div class="tem-val">
            <!-- <span class="indoor">{{ temperatures[0] }}℃</span> -->
            <span class="outdoor">25℃</span>
          </div>
        </div>
        <div class="humidity">
          <div class="tem-hum-title">湿度</div>
          <div class="tem-hum-chart">
            <img src="@/assets/imgs/wendu2.png" style="height: 90%;margin-top: 5px;">
          </div>
          <div class="hum-val">
            <!-- <span class="indoor">{{ humidities[0] }}%</span> -->
            <span class="outdoor">60%</span>
          </div>
        </div>
      </div>

      <!-- Temperature and Humidity -->
      <div class="tem-hum">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
        <div class="temperature">
          <div class="tem-hum-title">实时风</div>
          <div class="tem-hum-chart" id="temChart"></div>
          <div class="tem-val">
            <span class="indoor">风力：9.72m/s</span>
            <span class="outdoor">风向：279Deg</span>
          </div>
        </div>
        <div class="humidity">
          <div class="tem-hum-title">气压</div>
          <div class="tem-hum-chart" id="humChart"></div>
          <div class="hum-val">
            <!-- <span class="indoor">{{ humidities[0] }}%</span> -->
            <span class="outdoor">{{ humidities[0] }}hpa</span>
          </div>
        </div>
      </div>

      <!-- Temperature Chart -->
      <div class="information">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container" style="border-right: 1px solid #018F9C;">

            <div class="speed-value" style="margin-top: 20%;">0.35 </div>
            <div class="speed-label">流速（m/s）</div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container" style="border-right: 1px solid #018F9C;">

            <div class="speed-value" style="margin-top: 20%;">150</div>
            <div class="speed-label">流向（°）</div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container">

            <div class="speed-value" style="margin-top: 20%;">1000</div>
            <div class="speed-label">能见度（m）</div>
          </div>
        </div>

      </div>
      <div class="information" style="margin-top: 20px;">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container" style="border-right: 1px solid #018F9C;">

            <div class="speed-value" style="margin-top: 20%;">3.03</div>
            <div class="speed-label">浪高（m）</div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container" style="border-right: 1px solid #018F9C;">

            <div class="speed-value" style="margin-top: 20%;">140</div>
            <div class="speed-label">浪向（°）</div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;float: left;">
          <div class="container">

            <div class="speed-value" style="margin-top: 20%;">1000</div>
            <div class="speed-label">云底高（m）</div>
          </div>
        </div>

      </div>

    </div>

    <!-- Middle Column -->
    <div class="middle">
      <!-- <div class="headTitle">火箭遥测</div> -->

      <!-- Map -->
      <div class="chinaMap" style="color: white;">
        <div class="circle0"></div>
        <div id="btn" v-show="showBackButton" @click="backToChina">
          <div style="position: relative;">
            <div class="btn0"></div>
            <div class="btn1"></div>
            <div class="btn2"></div>
          </div>
        </div>
        <div class="mapBox">
          <!-- <div ref="map" style="width: 100%; height: 100%;"></div> -->

          <div class="information" style="width: 49%;float: left;">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container" style="border-right: 1px solid #018F9C;">

                <div class="speed-value">20</div>
                <div class="speed-label">综合云量（%）</div>
              </div>
            </div>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container" style="border-right: 1px solid #018F9C;">

                <div class="speed-value">2</div>
                <div class="speed-label">可见光云量（%）</div>
              </div>
            </div>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container">

                <div class="speed-value">5</div>
                <div class="speed-label">红外云量（%）</div>
              </div>
            </div>

          </div>
          <div class="information" style="width: 49%;float: left;margin-left: 1%;">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container" style="border-right: 1px solid #018F9C;">

                <div class="speed-value">7.05</div>
                <div class="speed-label">降水量（mm）</div>
              </div>
            </div>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container" style="border-right: 1px solid #018F9C;">

                <div class="speed-value">7.92</div>
                <div class="speed-label">实时雨量（mm）</div>
              </div>
            </div>
            <div style="width: 33%;height: 100%;float: left;">
              <div class="container">

                <div class="speed-value">300</div>
                <div class="speed-label">太阳辐射（W/m²）</div>
              </div>
            </div>

          </div>
          <img src="@/assets/imgs/rader_bg.png" style="width: 100%;height: 84%;">
        </div>
        <div class="circle1"></div>
      </div>

      <!-- <div class="lineRun"></div> -->
    </div>

  </div>
</template>

<script>

export default {
  name: 'WeatherDashboard',
  data() {
    return {
      currentDateTime: "", // 获取当前日期，并转为字符串格式
      relativePressure: 18,
      absolutePressure: 40,
      temperatures: [22, 33],
      temperatures2: [0, 50],
      humidities: [1008, 33],
      humidities2: [0, 50],
      temperatureChartData: [
        ['2025/1/24', 23, 28, 23, 28],
        ['2025/1/25', 21, 24, 21, 24],
        ['2025/1/26', 28, 24, 28, 24],
        ['2025/1/27', 21, 24, 21, 24],
        ['2025/1/28', 27, 21, 27, 21],
        ['2025/1/29', 20, 23, 20, 23],
        ['2025/1/30', 22, 27, 22, 27],
        ['2025/1/31', 23, 28, 23, 28],
        ['2025/2/1', 22, 24, 22, 24],
        ['2025/2/2', 26, 24, 26, 24],
        ['2025/2/3', 21, 24, 21, 24],
        ['2025/2/4', 29, 22, 29, 22],
        ['2025/2/5', 24, 33, 24, 33],
        ['2025/2/6', 23, 29, 27, 29],
        ['2025/2/7', 30, 27, 30, 27],
        ['2025/2/8', 21, 32, 21, 32],
        ['2025/2/9', 31, 24, 31, 24],
        ['2025/2/10', 27, 24, 27, 24],
        ['2025/2/11', 22, 34, 22, 34],
        ['2025/2/12', 20, 22, 20, 22],
        ['2025/2/13', 21, 24, 21, 24],
        ['2025/2/14', 25, 33, 25, 33]
      ],
      temperatureChartData2: [
        ['2025/1/24', 23, 28, 23, 28],
        ['2025/1/25', 21, 24, 21, 24],
        ['2025/1/26', 28, 24, 28, 24],
        ['2025/1/27', 21, 24, 21, 24],
        ['2025/1/28', 27, 21, 27, 21],
        ['2025/1/29', 20, 23, 20, 23],
        ['2025/1/30', 22, 27, 22, 27],
        ['2025/1/31', 23, 28, 23, 28],
        ['2025/2/1', 22, 24, 22, 24],
        ['2025/2/2', 26, 24, 26, 24],
        ['2025/2/3', 21, 24, 21, 24],
        ['2025/2/4', 29, 22, 29, 22],
        ['2025/2/5', 24, 33, 24, 33],
        ['2025/2/6', 23, 29, 27, 29],
        ['2025/2/7', 30, 27, 30, 27],
        ['2025/2/8', 21, 32, 21, 32],
        ['2025/2/9', 31, 24, 31, 24],
        ['2025/2/10', 27, 24, 27, 24],
        ['2025/2/11', 22, 34, 22, 34],
        ['2025/2/12', 20, 22, 20, 22],
        ['2025/2/13', 21, 24, 21, 24],
        ['2025/2/14', 25, 33, 25, 33]
      ],
      geoData: [
        { name: '成都', value: [103.9526, 30.7617] },
        { name: '金华', value: [120.0037, 29.1028] },
        { name: '上海', value: [121.4648, 31.2891] },
        { name: '梁平', value: [107.8109, 30.6810] },
        { name: '简阳', value: [104.5525, 30.4179] }
      ],
      showBackButton: false,
      siteInfo: {
        area: 'LP-COUNTY',
        date: '2017-08-06',
        id: '1921210001',
        days: 70
      },
      indoorTemp: 70,
      dewPoint: 21,
      windChill: 21,
      heatNumber: 21,
      windData: {
        value: [2.8, 5.3, 7.1, 5.4, 10.6, 8.5, 5.1, 2.1, 2.9, 4.0, 9.4, 6.3, 3.5, 0.9, 1, 0.9],
        name: '2016'
      },
      currentWind: 23,
      highestWind: 46,
      currentGust: 28,
      highestGust: 43,
      rainfallData: {
        daily: { current: 23, highest: 46, percentage: 80 },
        weekly: { current: 28, highest: 43, percentage: 60 },
        monthly: { current: 23, highest: 46, percentage: 30 },
        annual: { current: 28, highest: 43, percentage: 20 }
      },
      charts: {
        temChart: null,
        humChart: null,
        temChart2: null,
        humChart2: null,
        tempKChart: null,
        tempKChart2: null,
        humKChart: null,
        mapChart: null,
        windChart: null
      },
      // 基础参数
      launchTime: 0,
      highedata: 0,
      speeddata: 0,
      Cabindata: 0.1,

      // 新增参数
      acceleration: 0,
      rollRate: 0,
      rollAngle: 0,

      // 变化趋势
      hightTrend: 0,
      speedTrend: 0,
      pressureTrend: 0,

      // 状态标志
      isLaunching: false,
      isMaxQ: false,
      prevSpeed: 0,
      prevHeight: 0,
      prevPressure: 0.1,

      // 事件序列
      eventStack: [
        { time: 0, type: 'ignition' },
        { time: 12, type: 'pitchOver' },
        { time: 60, type: 'transonic' },
        { time: 60, type: 'maxQ' },
        { time: 80, type: 'reduceThrust' },
        { time: 180, type: 'stageSep' },
        { time: 220, type: 'secondIgnition' },
        { time: 500, type: 'orbit' }
      ]
    }
  },
  computed: {
    // G力计算
    gForce() {
      return this.acceleration / 9.8
    },
    // G力显示样式
    gForceStyle() {
      if (this.gForce > 4) return { color: '#ff0000', fontWeight: 'bold' }
      if (this.gForce > 2) return { color: '#ff6600' }
      return { color: '#ffffff' }
    },
    // 滚转显示样式
    rollStyle() {
      const rate = Math.abs(this.rollRate)
      if (rate > 5) return { color: '#ff3366', animation: 'pulse 0.5s infinite' }
      if (rate > 2) return { color: '#ff9933' }
      return { color: '#66ccff' }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
      this.setupIntervals();
      this.initRainfallCharts();
      this.updateCurrentDateTime();

      // 添加窗口resize事件监听
      window.addEventListener('resize', this.handleResize);
    })
    // 每秒更新一次时间
    setInterval(() => {
      this.updateCurrentDateTime();
    }, 1000);
    this.startLaunch();
  },
  beforeDestroy() {
    // 清除图表实例
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose();
    });

    // 清除定时器
    clearInterval(this.tempHumInterval);
    clearInterval(this.windInterval);

    // 移除resize事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 添加resize处理方法
    handleResize() {
      // 重绘所有图表
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.resize();
      });
    },

    // 启动发射程序
    startLaunch() {
      let _that = this;
      _that.isLaunching = true
      const simulationInterval = setInterval(() => {
        if (this.launchTime >= 500) {
          clearInterval(simulationInterval)
          _that.isLaunching = false
          return
        }

        _that.launchTime++
        _that.updateParameters()
        // _that.checkEvents()
      }, 100) // 100ms更新一次，更流畅
    },

    // 更新所有参数
    updateParameters() {
      // 保存前值用于计算趋势
      this.prevHeight = this.highedata
      this.prevSpeed = this.speeddata
      this.prevPressure = this.Cabindata

      // 计算新值
      this.highedata = this.calcHeight().toFixed(2);
      this.speeddata = this.calcVelocity().toFixed(2)
      this.Cabindata = this.calcCabinPressure().toFixed(2)

      // 计算趋势值 (1秒变化量)
      this.hightTrend = (this.highedata - this.prevHeight) * 10
      this.speedTrend = (this.speeddata - this.prevSpeed) * 10
      this.pressureTrend = (this.Cabindata - this.prevPressure) * 10

      // 计算加速度 (速度变化率)
      this.acceleration = this.speedTrend

      // 计算滚转率 (动态模型)
      this.calcRollDynamics()
    },

    // 高度计算模型
    calcHeight() {
      const t = this.launchTime
      if (t < 12) return 0.05 * t * t          // 垂直上升
      if (t < 60) return 7.2 + 0.8 * (t - 12)      // 重力转弯
      if (t < 180) return 80 + (t - 60) * 0.9      // 大气层外
      return 200 + 40 * Math.log(t / 180)          // 轨道段
    },

    // 速度计算模型
    calcVelocity() {
      const t = this.launchTime
      if (t < 12) return 20 * t                // 初始加速
      if (t < 60) return 240 + 15 * (t - 12)       // 跨音速前
      if (t < 80) return 960 + 6 * (t - 60)        // Max-Q减速
      if (t < 180) return 1080 + 8 * (t - 80)      // 二级加速
      return 1800 + 6000 * (1 - Math.exp(-0.015 * (t - 180))) // 轨道插入
    },

    // 舱压计算模型
    calcCabinPressure() {
      const t = this.launchTime
      if (t < 10) return 0.1 + t * 0.09
      if (t < 60) return 1.0 - (t - 10) * 0.002
      if (t < 180) return 0.8 + 0.1 * Math.sin(t / 5)
      return 0.3 + 0.05 * Math.sin(t / 10)
    },

    // 滚转动力学模型
    calcRollDynamics() {
      const t = this.launchTime

      // 基础滚转率模型
      if (t < 12) {
        this.rollRate = 0 // 起飞阶段不滚转
      }
      else if (t < 25) {
        this.rollRate = 1.5 * (1 - Math.exp(-0.5 * (t - 12))) // 滚转启动
      }
      else if (t < 60) {
        this.rollRate = 1.5 - 0.02 * (t - 25) // 稳定滚转
      }
      else if (t < 180) {
        this.rollRate = 0.5 + 0.3 * Math.sin(t / 15) // 小幅调整
      }
      else {
        this.rollRate = 0.1 * Math.sin(t / 20) // 轨道微调
      }

      // 叠加事件影响
      if (this.isMaxQ) {
        this.rollRate += 0.5 * Math.sin(t) // Max-Q时湍流影响
      }

      // 积分得到滚转角
      this.rollAngle += this.rollRate * 0.1 // 0.1s时间步长
      this.rollAngle = this.rollAngle % 360
    },
    // 事件处理
    handleEvent(type) {
      switch (type) {
        case 'ignition':
          this.acceleration = 20 // 初始推力
          break

        case 'pitchOver':
          this.rollRate = 1.2 // 开始滚转
          break

        case 'transonic':
          this.shakeControl()
          break

        case 'maxQ':
          this.isMaxQ = true
          this.acceleration *= 0.7 // 降低推力
          break

        case 'reduceThrust':
          this.isMaxQ = false
          this.acceleration = 8 // 维持推力
          break

        case 'stageSep':
          this.Cabindata *= 0.6
          this.rollRate = 2.5 // 分离扰动
          break

        case 'secondIgnition':
          this.acceleration = 12
          this.rollRate = 0.8
          break

        case 'orbit':
          this.acceleration = 0
          this.rollRate = 0.05
          break
      }
    },
    updateCurrentDateTime() {
      const now = new Date();
      this.currentDateTime = now.toLocaleString(); // 或者使用 now.toLocaleTimeString() 获取时间部分
    },
    initCharts() {
      // Temperature Gauge
      this.charts.temChart = this.$echarts.init(document.getElementById('temChart'))
      //this.charts.temChart = echarts.init(this.$refs.temChart);
      const temOption = {
        // 提示框配置
        tooltip: {
          formatter: '{a}<br/>当前：{c}℃'  // 格式化提示内容，显示系列名称和当前值
        },

        // 仪表盘系列配置（多个同心圆组成复合仪表盘）
        series: [
          // 第1个系列：最内层红色圆环（装饰用）
          {
            type: 'gauge',  // 类型为仪表盘
            center: ['50%', '60%'],  // 中心位置（水平50%，垂直60%）
            radius: '30%',  // 半径占容器30%
            min: 0,  // 最小值
            max: 10,  // 最大值
            startAngle: 270,  // 起始角度（12点钟方向为0度）
            endAngle: -89.99999,  // 结束角度（形成270度的圆弧）
            splitNumber: 10,  // 分割段数
            axisLine: {
              lineStyle: {
                color: [[1, '#ff4500']],  // 轴线颜色（红色）
                width: 0,  // 轴线宽度（0表示不显示）
                shadowColor: '#fff',  // 阴影颜色
                shadowBlur: 10  // 阴影模糊大小
              }
            },
            axisLabel: { show: false },  // 不显示刻度标签
            axisTick: {
              length: 4,  // 刻度线长度
              lineStyle: { color: 'rgba(176,204,53,.5)' }  // 刻度线颜色（半透明绿色）
            },
            splitLine: { show: false },  // 不显示分割线
            pointer: {
              width: 0,  // 指针宽度（0表示不显示）
              shadowColor: '#fff',  // 指针阴影颜色
              shadowBlur: 5  // 指针阴影模糊大小
            },
            detail: { show: false }  // 不显示详情
          },

          // 第2个系列：中层灰色圆环（装饰用）
          {
            name: '转速',  // 系列名称
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '60%',  // 半径比内层大
            min: 0,
            max: 10,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [[1, '#037592']],  // 轴线颜色（深灰色）
                width: 8,  // 轴线宽度
                shadowBlur: 10  // 阴影模糊
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: '',
                color: 'rgba(30,144,255,0)',  // 透明颜色（不显示）
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 2,  // 刻度线长度
              lineStyle: { color: 'auto' }  // 自动颜色
            },
            splitLine: {
              length: 0,  // 分割线长度（0表示不显示）
              lineStyle: {
                width: 0,
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            pointer: {
              width: 0,  // 不显示指针
              shadowColor: '#fff',
              shadowBlur: 5
            },
            detail: { show: false }  // 不显示详情
          },

          // 第3个系列：最外层（主仪表盘，显示红色指针）
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '100%',  // 最大半径（占满容器）
            min: 0,
            max: 360,
            name: '室内',  // 系列名称（用于提示框显示）
            axisLine: {
              lineStyle: {
                color: [[1, '#55D0D4']],  // 轴线颜色（浅灰色）
                width: 1  // 轴线宽度
              }
            },
            itemStyle: {
              normal: {
                color: '#FF0000'  // 数据项颜色（红色）
              }
            },
            axisTick: { length: 3 },  // 刻度线长度
            axisLabel: {
              textStyle: {
                fontWeight: 'bolder',  // 加粗字体
                fontSize: 10,  // 字体大小
                fontFamily: 'numfont'  // 特殊字体
              }
            },
            splitLine: {
              length: 5,  // 分割线长度
              lineStyle: { width: 1 }  // 分割线宽度
            },
            pointer: {
              width: 3,  // 指针宽度
              length: '90%',  // 指针长度（相对半径）
              itemStyle: {
                color: '#FF0000'  // 指针颜色（红色）
              }
            },
            detail: { show: false },  // 不显示详情
            data: [{ value: this.temperatures[0] }]  // 绑定温度数据（数组第一个值）
          }
          // 注：已移除原先的第4个系列（室外温度指针）
        ]
      };
      this.charts.temChart.setOption(temOption);


      const humOptions = {
        // 提示框配置
        tooltip: {
          formatter: '{a}<br/>当前：{c}℃'  // 格式化提示内容，显示系列名称和当前值
        },

        // 仪表盘系列配置（多个同心圆组成复合仪表盘）
        series: [
          // 第1个系列：最内层红色圆环（装饰用）
          {
            type: 'gauge',  // 类型为仪表盘
            center: ['50%', '60%'],  // 中心位置（水平50%，垂直60%）
            radius: '30%',  // 半径占容器30%
            min: 0,  // 最小值
            max: 10,  // 最大值
            startAngle: 270,  // 起始角度（12点钟方向为0度）
            endAngle: -89.99999,  // 结束角度（形成270度的圆弧）
            splitNumber: 10,  // 分割段数
            axisLine: {
              lineStyle: {
                color: [[1, '#ff4500']],  // 轴线颜色（红色）
                width: 0,  // 轴线宽度（0表示不显示）
                shadowColor: '#fff',  // 阴影颜色
                shadowBlur: 10  // 阴影模糊大小
              }
            },
            axisLabel: { show: false },  // 不显示刻度标签
            axisTick: {
              length: 4,  // 刻度线长度
              lineStyle: { color: 'rgba(176,204,53,.5)' }  // 刻度线颜色（半透明绿色）
            },
            splitLine: { show: false },  // 不显示分割线
            pointer: {
              width: 0,  // 指针宽度（0表示不显示）
              shadowColor: '#fff',  // 指针阴影颜色
              shadowBlur: 5  // 指针阴影模糊大小
            },
            detail: { show: false }  // 不显示详情
          },

          // 第2个系列：中层灰色圆环（装饰用）
          {
            name: '转速',  // 系列名称
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '60%',  // 半径比内层大
            min: 0,
            max: 10,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [[1, '#037592']],  // 轴线颜色（深灰色）
                width: 8,  // 轴线宽度
                shadowBlur: 10  // 阴影模糊
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: '',
                color: 'rgba(30,144,255,0)',  // 透明颜色（不显示）
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 2,  // 刻度线长度
              lineStyle: { color: 'auto' }  // 自动颜色
            },
            splitLine: {
              length: 0,  // 分割线长度（0表示不显示）
              lineStyle: {
                width: 0,
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            pointer: {
              width: 0,  // 不显示指针
              shadowColor: '#fff',
              shadowBlur: 5
            },
            detail: { show: false }  // 不显示详情
          },

          // 第3个系列：最外层（主仪表盘，显示红色指针）
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '100%',  // 最大半径（占满容器）
            min: 0,
            max: 2000,
            name: '室内',  // 系列名称（用于提示框显示）
            axisLine: {
              lineStyle: {
                color: [[1, '#55D0D4']],  // 轴线颜色（浅灰色）
                width: 1  // 轴线宽度
              }
            },
            itemStyle: {
              normal: {
                color: '#55D0D4'  // 数据项颜色（红色）
              }
            },
            axisTick: { length: 3 },  // 刻度线长度
            axisLabel: {
              textStyle: {
                fontWeight: 'bolder',  // 加粗字体
                fontSize: 10,  // 字体大小
                fontFamily: 'numfont'  // 特殊字体
              }
            },
            splitLine: {
              length: 5,  // 分割线长度
              lineStyle: { width: 1 }  // 分割线宽度
            },
            pointer: {
              width: 3,  // 指针宽度
              length: '90%',  // 指针长度（相对半径）
              itemStyle: {
                color: '#FF0000'  // 指针颜色（红色）
              }
            },
            detail: { show: false },  // 不显示详情
            data: [{ value: 1008 }]  // 绑定温度数据（数组第一个值）
          }
          // 注：已移除原先的第4个系列（室外温度指针）
        ]
      };
      // Humidity Gauge
      this.charts.humChart = this.$echarts.init(document.getElementById('humChart'))
      //this.charts.humChart = echarts.init(this.$refs.humChart);
      const humOption = JSON.parse(JSON.stringify(humOptions));
      humOption.tooltip.formatter = '{a}<br/>当前：{c}%';
      humOption.series[2].data[0].value = this.humidities[0];
      // humOption.series[3].data[0].value = this.humidities[1];
      this.charts.humChart.setOption(humOptions);


    },
    // 生成火箭发射模拟数据
    generateLaunchData() {
      const data = [];
      const events = [
        { time: 0, name: '点火' },
        { time: 60, name: '跨音速' },
        { time: 60, name: '最大动压(Max-Q)' },
        { time: 180, name: '一级分离' },
        { time: 500, name: '卫星入轨' }
      ];

      // 生成高度和速度曲线函数
      const getHeight = (t) => {
        if (t <= 60) return 0.02222 * t * t;       // 初期二次增长
        if (t <= 180) return 80 + (t - 60) * 1.0; // 中期线性增长
        return 200 + 50 * Math.log(t / 180);        // 后期对数增长
      };

      const getVelocity = (t) => {
        if (t <= 60) return 20 * t;               // 初期线性增长
        if (t <= 180) return 1200 + 10.8333 * (t - 60); // 中期增速减缓
        return 2500 + 5300 * (1 - Math.exp(-0.02 * (t - 180))); // 后期渐近逼近
      };

      // 生成500秒数据（每秒一个点）
      for (let t = 0; t <= 500; t++) {
        data.push({
          time: t,
          height: getHeight(t),
          speed: getVelocity(t)
        });
      }

      return { data, events };
    },
    // 获取图表配置
    getLaunchChartOption() {
      const { data, events } = this.generateLaunchData();

      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          formatter: params => {
            let res = `时间：${params[0].axisValue}秒<br>`;
            params.forEach(p => {
              res += `${p.seriesName}：${p.value}${p.seriesId === 'speed' ? 'm/s' : '公里'}<br>`;
            });
            //res += '事件：' + (events.find(e => e.time == params[0].axisValue)?.name || '无');
            return res;
          }
        },
        legend: {
          data: ['高度'],
          textStyle: { color: '#fff' },
          top: 10
        },
        xAxis: {
          type: 'category',
          name: '时间 (秒)',
          data: data.map(d => d.time),
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: [
          {
            type: 'value',
            name: '高度 (公里)',
            axisLine: { lineStyle: { color: '#4fd2dd' } },
            splitLine: { show: false }
          },
          // {
          //   type: 'value',
          //   name: '速度 (m/s)',
          //   axisLine: { lineStyle: { color: '#ff6a6a' } },
          //   splitLine: { show: false }
          // }
        ],
        grid: [{ right: "13%" }],
        dataZoom: [{ type: 'inside', start: 0, end: 100 }],
        series: [
          {
            name: '高度',
            type: 'line',
            yAxisIndex: 0,
            data: data.map(d => d.height),
            smooth: true,
            itemStyle: { color: '#4fd2dd' },
            markPoint: {
              data: events.map(e => ({
                name: e.name,
                coord: [e.time, data[e.time].height],
                symbolSize: 20,
                label: { show: true, formatter: e.name.split(' ')[0] }
              }))
            }
          },
          // {
          //   name: '速度',
          //   type: 'line',
          //   yAxisIndex: 1,
          //   data: data.map(d => d.speed),
          //   smooth: true,
          //   itemStyle: { color: '#ff6a6a' },
          //   markLine: {
          //     data: [{ type: 'max', name: '最大速度' }]
          //   }
          // }
        ]
      };
    },
    getLaunchChartOption2() {
      const { data, events } = this.generateLaunchData();

      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          formatter: params => {
            let res = `时间：${params[0].axisValue}秒<br>`;
            params.forEach(p => {
              res += `${p.seriesName}：${p.value}${p.seriesId === 'speed' ? 'm/s' : '公里'}<br>`;
            });
            res += '事件：' + (events.find(e => e.time == params[0].axisValue)?.name || '无');
            return res;
          }
        },
        legend: {
          data: ['速度'],
          textStyle: { color: '#fff' },
          top: 10
        },
        xAxis: {
          type: 'category',
          name: '时间 (秒)',
          data: data.map(d => d.time),
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: [
          // {
          //   type: 'value',
          //   name: '高度 (公里)',
          //   axisLine: { lineStyle: { color: '#4fd2dd' } },
          //   splitLine: { show: false }
          // },
          {
            type: 'value',
            name: '速度 (m/s)',
            axisLine: { lineStyle: { color: '#ff6a6a' } },
            splitLine: { show: false }
          }
        ],
        grid: [{ right: "13%" }],
        dataZoom: [{ type: 'inside', start: 0, end: 100 }],
        series: [
          // {
          //   name: '高度',
          //   type: 'line',
          //   yAxisIndex: 0,
          //   data: data.map(d => d.height),
          //   smooth: true,
          //   itemStyle: { color: '#4fd2dd' },
          //   markPoint: {
          //     data: events.map(e => ({
          //       name: e.name,
          //       coord: [e.time, data[e.time].height],
          //       symbolSize: 20,
          //       label: { show: true, formatter: e.name.split(' ')[0] }
          //     }))
          //   }
          // },
          {
            name: '速度',
            type: 'line',
            yAxisIndex: 0,
            data: data.map(d => d.speed),
            smooth: true,
            itemStyle: { color: '#ff6a6a' },
            markLine: {
              data: [{ type: 'max', name: '最大速度' }]
            }
          }
        ]
      };
    },
    getKChartOption(title, unit) {
      const data0 = this.splitData(this.temperatureChartData);
      return {
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, width: 2 },
        legend: { data: ['高度'], top: 10, textStyle: { color: '#fff' } },
        xAxis: {
          type: 'category',
          data: data0.categoryData,
          boundaryGap: false,
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
          scale: true,
          splitNumber: 4,
          axisLine: { lineStyle: { color: '#fff' } },
          splitLine: { show: true, lineStyle: { color: '#fff' } },
          axisTick: { show: false },
          axisLabel: { formatter: `{value}${unit}` }
        },
        dataZoom: [{ type: 'inside', start: 50, end: 100 }],
        grid: [{ right: "10%" }],
        series: [
          // {
          //   type: 'candlestick',
          //   name: '日K',
          //   data: data0.values,
          //   barWidth: '15%',
          //   itemStyle: {
          //     normal: {
          //       color: 'red',
          //       color0: '#B0CC35',
          //       borderColor: 'red',
          //       borderColor0: '#B0CC35'
          //     }
          //   }
          // },
          {
            name: '高度',
            type: 'line',
            data: this.calculateMA(5, data0.values),
            smooth: true
          },
          // {
          //   name: '速度',
          //   type: 'line',
          //   data: this.calculateMA(10, data0.values),
          //   smooth: true,
          //   itemStyle: { normal: { color: '#B0CC35' } }
          // }
        ]
      };
    },
    getKChartOption2(title, unit) {
      const data0 = this.splitData(this.temperatureChartData2);
      return {
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, width: 2 },
        legend: { data: ['速度'], top: 10, textStyle: { color: '#fff' } },
        xAxis: {
          type: 'category',
          data: data0.categoryData,
          boundaryGap: false,
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
          scale: true,
          splitNumber: 4,
          axisLine: { lineStyle: { color: '#fff' } },
          splitLine: { show: true, lineStyle: { color: '#fff' } },
          axisTick: { show: false },
          axisLabel: { formatter: `{value}${unit}` }
        },
        dataZoom: [{ type: 'inside', start: 50, end: 100 }],
        //grid: [{ height: '60%', top: 25 }],
        series: [

          {
            name: '速度',
            type: 'line',
            data: this.calculateMA(10, data0.values),
            smooth: true,
            itemStyle: { normal: { color: '#B0CC35' } }
          },
        ]
      };
    },
    getMapOption() {
      const series = this.geoData.map(item => ({
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { brushType: 'stroke' },
        symbolSize: 10,
        itemStyle: { normal: { color: '#B0CC35' } },
        data: [item],
        tooltip: { formatter: '{b}观测点' }
      }));

      return {
        tooltip: { trigger: 'item', formatter: '{b}' },
        geo: {
          map: 'china',
          itemStyle: {
            normal: {
              areaColor: 'rgba(0,0,0,1)',
              borderColor: 'rgb(176,203,37)'
            },
            emphasis: {
              areaColor: 'rgba(176,203,37,.8)'
            }
          },
          selectedMode: 'single',
          roam: true,
          silent: false,
          label: {
            emphasis: {
              show: true,
              textStyle: { color: '#B0CC35' }
            }
          }
        },
        series: series
      };
    },

    splitData(rawData) {
      const categoryData = [];
      const values = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return { categoryData, values };
    },

    calculateMA(dayCount, data) {
      const result = [];
      for (let i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += data[i - j][1];
        }
        result.push((sum / dayCount).toFixed(2));
      }
      return result;
    },

    setupIntervals() {
      // Temperature and humidity updates
      setInterval(() => {
        this.temperatures = [279
          // Math.round(Math.random() * 0)
          //Math.round(Math.random() * 7.5)
        ];
        this.humidities = [1008
          // Math.round(Math.random() * 600)
          //Math.round(Math.random() * 100)
        ];

        // Update gauge charts
        if (this.charts.temChart) {
          const option = this.charts.temChart.getOption();
          option.series[2].data[0].value = this.temperatures[0];
          //option.series[3].data[0].value = this.temperatures[1];
          this.charts.temChart.setOption(option);
        }

        if (this.charts.humChart) {
          const option = this.charts.humChart.getOption();
          option.series[2].data[0].value = this.humidities[0];
          //option.series[3].data[0].value = this.humidities[1];
          this.charts.humChart.setOption(option);
        }

      }, 1000);

      // Wind speed updates
      setInterval(() => {
        this.currentWind = (12 + Math.random() * 5).toFixed(1);
        this.currentGust = (2 + Math.random() * 5).toFixed(1);
      }, 2000);
    },

    initRainfallCharts() {
      // Implement WaterPolo or similar for rainfall charts
      // This would need the WaterPolo implementation
    },

    backToChina() {
      this.showBackButton = false;
      const option = this.charts.mapChart.getOption();
      option.geo.map = 'china';
      this.charts.mapChart.setOption(option);
    },

    handleRegionSelect(param) {
      const areaName = param.batch[0].name;
      const areaData = [
        { name: '北京', selected: false, jsonname: 'beijing' },
        // ... other regions
      ];

      const selectedArea = areaData.find(area => area.name === areaName);
      if (selectedArea) {
        this.showBackButton = true;
        //this.loadRegionMap(selectedArea.jsonname);
      }
    },

    loadRegionMap(jsonName) {
      //   import(`@/geojson/${jsonName}.json`).then(data => {
      //     echarts.registerMap(jsonName, data.default);
      //     const option = this.charts.mapChart.getOption();
      //     option.geo.map = jsonName;
      //     this.charts.mapChart.setOption(option);
      //   });
    }
  },

  // beforeDestroy() {
  //   // Clean up charts
  //   Object.values(this.charts).forEach(chart => {
  //     if (chart) chart.dispose();
  //   });

  //   // Clean up intervals
  //   clearInterval(this.tempHumInterval);
  //   clearInterval(this.windInterval);
  // }
}
</script>

<style scoped>
/* Add your CSS styles here */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  /* line-height: 30px; */
  height: 100%;

}

.speed-label {

  margin-top: 15px;
}

.speed-value {
  font-size: 18px;
  color: #ffeb7b;
  padding: 5px 0;
  /* font-family: electronicFont; */
  font-weight: bold;
  margin-top: 15%;
}

/* Add any additional component-specific styles */
.windFan {
  animation: rotate linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  min-width: 1280px;
  margin: 0;
  background: url('~@/assets/imgs/bg.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  padding: 3%;

}

.content {

  height: 100%;
  width: 100%;
  min-width: 1280px;
  margin: 0;
  background: #000d4a url(~@/assets/tymb/images/bg.jpg) center top;
  /* background: url('~@/assets/imgs/bg.png') no-repeat; */
  background-size: 100% 100%;
  overflow: hidden;
  /* padding: 3%; */
}

@font-face {
  font-family: "numfont";
  src: url('~@/assets/fonts/num.otf') format('truetype');
}

.numfont {
  font-family: "numfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.left {
  float: left;
  width: 30%;
  height: 100%;
}

/*closed*/
#btn {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 52px;
  height: 52px;
  z-index: 9999999;
  cursor: pointer;
}

#btn>div {
  width: 52px;
  height: 52px;
  position: relative;
}

.btn0 {
  position: absolute;
  width: 52px;
  height: 52px;
  background: url("~@/assets/imgs/close0.png") no-repeat;
  background-size: 100%;
  animation: clockwise 3s linear infinite;
}

.btn1 {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: 9px;
  background: url("~@/assets/imgs/close1.png") no-repeat;
  background-size: 100%;
}

.btn2 {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 16px;
  background: url("~@/assets/imgs/close2.png") no-repeat;
  background-size: 100%;
  animation: anticlockwise 3s linear infinite;
}

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

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

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

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

/*air*/
.air {
  height: 25%;
  border: 1px solid rgba(25, 186, 139, .17);
  /* padding: 0 .1rem .7rem .20rem; */
  background: rgba(255, 255, 255, .04) url(~@/assets/tymb/images/line.png);
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 10px auto;

}

/*四个角*/
.topL {
  width: 20px;
  height: 20px;
  border-top-width: 2px;
  border-top-color: #26c6f0;
  border-top-style: solid;
  border-left-width: 2px;
  border-left-color: #26c6f0;
  border-left-style: solid;
  position: absolute;
  top: -2px;
  left: -2px
}

.topR {
  width: 20px;
  height: 20px;
  border-top-width: 2px;
  border-top-color: #26c6f0;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-color: #26c6f0;
  border-right-style: solid;
  position: absolute;
  top: -2px;
  right: -2px
}

.bottomL {
  width: 20px;
  height: 20px;
  border-bottom-width: 2px;
  border-bottom-color: #26c6f0;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-color: #26c6f0;
  border-left-style: solid;
  position: absolute;
  bottom: -2px;
  left: -2px
}

.bottomR {
  width: 20px;
  height: 20px;
  border-bottom-width: 2px;
  border-bottom-color: #26c6f0;
  border-bottom-style: solid;
  border-right-width: 2px;
  border-right-color: #26c6f0;
  border-right-style: solid;
  position: absolute;
  bottom: -2px;
  right: -2px
}

/* .air:before, .boxfoot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
}
.air:before, .air:after {
    position: absolute;
    width: .1rem;
    height: .1rem;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
} */
.title {
  /* background: url("~@/assets/imgs/line.png") no-repeat top; */
  background-size: 90%;
  height: 12%;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding-top: 1%;
  font-weight: bold;
  line-height: 40px;
}

.air-relative,
.air-absolutely {
  height: 20%;
  position: relative;
  margin: 40px 20px;
}



.air-val {
  float: left;
  color: white;
  height: 100%;
  line-height: 100%;
  width: 15%;
}

.air-val div {
  width: 60%;
  height: 100%;
  float: left;
  margin-left: 1%;
  margin-top: 4%;
}

.air-val div p {
  margin: 0 5%;
}

.unit {
  width: 15%;
  float: right;
  margin-right: 5%;
  color: white;
  height: 100%;
  font-family: numfont;
  line-height: 200%;
  text-align: right;
}

.gray {
  border-bottom: 1px solid #25201E;
}

.gray,
.light {
  height: 100%;
  width: 70%;
  position: absolute;
  left: 15%;
}

.gray span,
.light span {
  display: block;
  width: 2%;
  height: 90%;
  float: left;
}

.air-relative .gray span {
  background: url("~@/assets/imgs/bartop1.png") no-repeat;
  background-size: auto 100%;
}

.air-relative .light span {
  background: url("~@/assets/imgs/bartop0.png") no-repeat;
  background-size: auto 100%;
}

.air-absolutely .gray span {
  background: url("~@/assets/imgs/barfoot1.png") no-repeat;
  background-size: auto 100%;
}

.air-absolutely .light span {
  background: url("~@/assets/imgs/barfoot0.png") no-repeat;
  background-size: auto 100%;
}

.air-icon {
  display: block;
  width: 20%;
  height: 90%;
  float: left;

}

.air-relative .air-icon {
  background: url("~@/assets/imgs/bartop0.png") no-repeat;
  background-size: auto 100%;
}

.air-absolutely .air-icon {
  background: url("~@/assets/imgs/barfoot0.png") no-repeat;
  background-size: auto 100%;
}

.hpa-rel,
.hpa-abs {
  font-size: 30px;
}

.air-val .hpa-nam {
  margin-top: 20%;
}

.hpa-nam {
  font-size: 12px;
}

/*tem-hum*/
.tem-hum {
  height: 30%;
  background: rgba(255, 255, 255, .04) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFNCAYAAADYVrylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA2LTE2VDEyOjExOjIyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2FiODZlMi0yNDIxLTRl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
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 20px auto;
}

.temperature,
.humidity {
  float: left;
  width: 50%;
  height: 100%;
  /* background: url("~@/assets/imgs/leftline.png") no-repeat left; */
  background-size: auto 100%;
}

.tem-hum-title {
  /* background: #B0CC35; */
  width: 60%;
  margin-left: 25%;
  height: 10%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 160%;
  color: #fff;
}

.tem-hum-chart {
  width: 80%;
  height: 80%;
  margin: 0 auto;
}

.tem-val,
.hum-val {
  width: 70%;
  /* margin-left: 25%; */
  height: 10%;
  font-size: 11px;
  font-weight: bold;
  margin: 0 auto;
}

.indoor,
.outdoor {
  display: inline-block;
  color: white;
  text-indent: 8px;
  margin-left: 8px;
}

.indoor {
  border-left: 4px solid #B0CC35;
}

.outdoor {
  border-left: 4px solid red;
}

/*temp-k*/
.temp-k {
  height: 38%;
  background: rgba(255, 255, 255, .04) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFNCAYAAADYVrylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA2LTE2VDEyOjExOjIyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2FiODZlMi0yNDIxLTRl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
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 20px auto;
}

#tempKChart {
  height: 87%;
}

.dity-k {
  height: 21%;
}

#dityKChart {
  height: 87%;
}

/*map*/
.middle {
  float: left;
  width: 70%;
  height: 100%;
}

.chinaMap {
  /* margin-top: 3%; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 999999;
  position: relative;
}

.mapBox {
  /* background: url("~@/assets/imgs/wrapper.png") no-repeat center; */
  background-size: 100% 100%;
  width: 99%;
  margin: 0 auto;
  height: 91%;
}

#map {
  width: 100%;
  height: 100%;
}

.lineRun {
  width: 100%;
  height: 80px;
  background: url("~@/assets/imgs/animate.png") no-repeat bottom;
  background-size: 100%;
}

.headTitle {
  font-family: numfont;
  color: #B0CC35;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

/*right*/
.right {
  float: left;
  width: 30%;
  height: 100%;
  box-sizing: border-box;
  /* padding-right: 5%; */
}

.information {
  width: 100%;
  height: 15%;
  color: #fff;
  border: 1px solid rgba(25, 186, 139, .17);
  background: rgba(255, 255, 255, .04) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFNCAYAAADYVrylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA2LTE2VDEyOjExOjIyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2FiODZlMi0yNDIxLTRl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
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 10px auto;
}

.baseInfo,
.temData {
  width: 45%;
  height: 100%;
  float: left;
  background: url("~@/assets/imgs/verticalline.png") no-repeat left;
  background-size: auto 100%;
  padding-left: 5%;
}

.infoTitle {
  font-size: 10px;
  color: #AEA7A3;
  margin-top: 0;
}

.area {
  font-family: numfont;
  font-size: 30px;
  color: #B0CC35;
  margin: 0 0 12px 0;
}

.days {
  font-family: numfont;
  color: #B0CC35;
  font-size: 25px;
}

.date {
  display: inline-block;
  text-indent: 29px;
}

.idNum {
  display: inline-block;
  text-indent: 50px;
}

.temTitle {
  color: red;
  font-size: 18px;
  margin: 0;
}

.indoorTem {
  font-family: numfont;
  color: red;
  font-size: 30px;
  margin: 0 0 15px 0;
}

.temperatureN {
  font-size: 60px;
  display: inline-block;
  margin-right: 15px;
}

.point span {
  display: inline-block;

  margin-right: 80px;
}

.wind {
  width: 100%;
  height: 10%;
  margin-top: 3%;
  color: #fff;
  border: 1px solid rgba(25, 186, 139, .17);
  background: rgba(255, 255, 255, .04) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFNCAYAAADYVrylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA2LTE2VDEyOjExOjIyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2FiODZlMi0yNDIxLTRl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
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 10px auto;
}

#windChart {
  width: 45%;
  margin-left: 5%;
  float: left;
  height: 100%;
}

.windData {
  width: 45%;
  float: left;
  height: 100%;
}

.windSpeed,
.gust {
  width: 94%;
  height: 50%;
  float: right;
  background: url("~@/assets/imgs/line1.png") no-repeat center;
  background-size: 100%;
  overflow: hidden;
}

.windTitle {
  background: #B0CC35;
  width: 60%;
  margin-top: 5%;
  margin-left: 35%;
  height: 14%;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 160%;
}

.windBox {
  width: 100%;
  height: 80%;
  color: #ACA5A1;
}

.windBox>div {
  margin-top: 2%;
  height: 98%;
  float: left;
}

.windBox div p {
  font-size: 12px;
  margin: 5px 0;
}

.windWrap {
  width: 76%;
  height: 80%;
  margin: 20% 12%;
  background: url("~@/assets/imgs/wind0.png") no-repeat;
  background-size: 100%;
  overflow: hidden;
}

.windFan {
  width: 60%;
  margin: 20%;
}

.currentSpeed,
.highestSpeed {
  font-family: numfont;
  color: #B0CC35;
  font-size: 30px;
}

.windSpeed .windFan {
  animation: speed 600ms linear infinite;
}

.gust .windFan {
  animation: speed 400ms linear infinite;
}

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

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

/*rain*/
.air-title {
  height: 5%;
}

.rainfall {
  width: 100%;
  height: 30%;
  background: rgba(255, 255, 255, .04) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFNCAYAAADYVrylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA2LTE2VDEyOjExOjIyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNi0xN1QxODo0OTozOSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2FiODZlMi0yNDIxLTRl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
  background-size: 100% auto;
  position: relative;
  z-index: 10;
  width: 94%;
  margin: 20px auto;
}

.rainfall .windData {
  margin-left: 2.5%;
}

.head {
  height: 80px;
  background: url(~@/assets/tymb/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  z-index: 100;
  color: #fff;
}

.head h1 {
  color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 60px;
}

.weather {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 60px;
}
</style>