年度告警区域统计

最新推荐文章于 2024-06-13 23:47:14 发布
最新推荐文章于 2024-06-13 23:47:14 发布
阅读量1.1k 收藏 19
点赞数 14
分类专栏： 数据分析实践 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75642955/article/details/136825922
版权

打开前端Vue项目kongguan_web，创建前端 src/components/WarnStatistice.vue 页面，并使用ECharts插件实现柱状图

  • src/components/WarnStatistice.vue 页面div设计，代码如下：
<template>
    <div>
       <div class="home">
         <div id="map-chart-05"></div>
       </div>
     </div>
</template>
... 略 ...
  • 引入 ECharts插件和Api路由文件，代码如下：
... 略 ...
<script>
  import echarts from "echarts";
  import {getAnnualWarningAreaStatistics} from "../api/user/api.js";
... 略 ...
  • 初始化ECharts，设置title、tooltip、legend、grid，代码如下：
... 略 ... 
  export default {
    name: "Home",
    data() {
      return {
        chart: null,
        geoCoordMap: {},
        charVal:[],
        charValData:[]
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      initChart() {
        
        const option = {
              title: {
                  text: '年度告警区域统计',
                top: 18,
                left: 26,
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {
                  data: ['2011年']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
... 略 ...
  • 设置柱状图的X轴和Y轴，代码如下：
... 略 ... 
              xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  show:false,
              },
              yAxis: {
                  type: 'category',
                  data: this.charVal,
                  show:true,
                  axisLabel:{
                    color:'#bdcad3'
                  },
                  axisTick:{
                    show:false
                  },
                  axisLine:{
                    lineStyle:{
                      color:'#bdcad3'
                    },
                    show:true
                  }
              },
... 略 ...
  • 设置渲染的值，代码如下：
... 略 ... 
              series: [
                  {
                      name: '',
                      type: 'bar',
                      itemStyle:{
                        normal:{
                          color:'#7d93fe'
                        }
                      },
                      barGap:35,
                      barWidth:20,
                      data: this.charValData
                  }
              ]

        };
        this.chart = echarts.init(document.getElementById("map-chart-05"));
        this.chart.setOption(option);
      },
... 略 ...
  • 获取后端数据展示，代码如下：
... 略 ... 
      loadData(){
        getAnnualWarningAreaStatistics().then(data => {
          
          if (data.isSuccess) {
            var res  = data.result;
            for(var i =0;i<res.length;i++){
              this.charVal[i] = res[i]['gjSector'];
              this.charValData[i] = res[i]['gjCount'];
            }
            this.initChart();
          } else {
            this.$message.error("数据获取失败");
          }
        });
        
      }
    }
  };
</script>

<style>
  #map-chart-05 {
    height: 700px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 3px #ebedf2;
  }
</style>
  • src/components/WarnStatistice.vue 页面的完整代码如下：
<template>
    <div>
       <div class="home">
         <div id="map-chart-05"></div>
       </div>
     </div>
</template>

<script>
  import echarts from "echarts";
  import {getAnnualWarningAreaStatistics} from "../api/user/api.js";
  export default {
    name: "Home",
    data() {
      return {
        chart: null,
        geoCoordMap: {},
        charVal:[],
        charValData:[]
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      initChart() {
        const option = {
              title: {
                  text: '年度告警区域统计',
                top: 18,
                left: 26,
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {
                  data: ['2011年']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  show:false,
              },
              yAxis: {
                  type: 'category',
                  data: this.charVal,
                  show:true,
                  axisLabel:{
                    color:'#bdcad3'
                  },
                  axisTick:{
                    show:false
                  },
                  axisLine:{
                    lineStyle:{
                      color:'#bdcad3'
                    },
                    show:true
                  }
              },
              series: [
                  {
                      name: '',
                      type: 'bar',
                      itemStyle:{
                        normal:{
                          color:'#7d93fe'
                        }
                      },
                      barGap:35,
                      barWidth:20,
                      data: this.charValData
                  }
              ]

        };
        this.chart = echarts.init(document.getElementById("map-chart-05"));
        this.chart.setOption(option);
      },
      loadData(){
        getAnnualWarningAreaStatistics().then(data => {

          if (data.isSuccess) {
            var res  = data.result;
            for(var i =0;i<res.length;i++){
              this.charVal[i] = res[i]['gjSector'];
              this.charValData[i] = res[i]['gjCount'];
            }
            this.initChart();
          } else {
            this.$message.error("数据获取失败");
          }
        });
      }
    }
  };
</script>

<style>
  #map-chart-05 {
    height: 700px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #ebedf2;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 3px #ebedf2;
  }
</style>
  • 编写前端路由api/user/api.js，向后端发送get方式的请求，代码如下：
import request from '../../utils/request'

const baseUrl="/api"

//获取年度告警统计信息
export function getAnnualWarningAreaStatistics(data){
  return request({
    url:baseUrl+"/warnFlightHistory/annualWarningAreaStatistics",
    method:"get",
    data:data
  })
}
//获取指挥航空公司架次与延误率占比
export function getFindCompanyDelay(data){
  return request({
    url:baseUrl+"/company/findCompanyDelay",
    method:"get",
    data:data
  })
}
//获取各扇区航班数
export function getSectionVal(data){
  return request({
    url:baseUrl+"/atc/findSectorSortie",
    method:"get",
    data:data
  })
}

2、后端数据获取，打开后端项目BigData-KongGuan

  • 编写关于告警信息的数据操作和存储的实体类com.qrsoft.entity.WarnFlightHistory，内容如下：
package com.qrsoft.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("warnflighthistory_number")
public class WarnFlightHistory implements Serializable {

	@TableId(value = "id",type = IdType.AUTO)
	private Integer id;

	@TableField(value = "gj_type")
	private String gjType;

	@TableField(value = "gj_id")
	private String gjId;

	@TableField(value = "gj_msg_type")
	private String gjMsgType;

	@TableField(value = "gj_track_num1")
	private String gjTrackNum1;

	@TableField(value = "gj_track_num2")
	private String gjTrackNum2;

	@TableField(value = "gj_distinct")
	private String gjDistinct;

	@TableField(value = "gj_radian")
	private String gjRadian;

	@TableField(value = "gj_name")
	private String gjName;

	@TableField(value = "gj_distinct_bz")
	private String gjDistinctBz;

	@TableField(value = "gj_city")
	private String gjCity;

	@TableField(value = "gj_date")
	private String gjDate;

	@TableField(value = "count")
	private Integer count;

	@TableField(value = "gj_sector")
	private String gjSector;

	@TableField(exist = false)
	private String gjCount;

	//告警的两个航班号
	@TableField(exist = false)
	private  String gjACIds;
}
  • 编写BigData-KongGuan/src/main/java/com/qrsoft/mapper/WarnFlightHistoryMapper.java数据访问类：
package com.qrsoft.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.qrsoft.entity.WarnFlightHistory;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.HashMap;
import java.util.List;

@Mapper
public interface WarnFlightHistoryMapper extends BaseMapper<WarnFlightHistory> {
	@Select("SELECT gj_sector,COUNT(*) as gjCount FROM warnflighthistory_number GROUP BY gj_sector ORDER BY sum(count) desc LIMIT 11;")
	List<WarnFlightHistory> annualWarningAreaStatistics();

	@Select("select gj_name,count(*) as gjCount from warnflighthistory_number group by gj_name;")
	List<WarnFlightHistory> annualWarningStatisticsByCategory();

	@Select("select gj_type,gj_id,gj_msg_type,gj_track_num1,gj_track_num2,gj_distinct,gj_radian,gj_name,gj_distinct_bz,gj_city,gj_date,gj_acids,gj_num1_long,gj_num1_lat,gj_num2_long,gj_num2_lat from warntp_number;")
	List<HashMap<String,Object>> findWarnTp();

	@Select("select count(*) from multiradar_number where `ACID` IN (#{acid},#{bcid});")
	Integer getWarn(@Param("acid") String acid, @Param("bcid") String bcid);
}
  • 编写BigData-KongGuan/src/main/java/com/qrsoft/service/WarnFlightHistoryService.java服务接口类：
package com.qrsoft.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.qrsoft.common.Result;
import com.qrsoft.common.ResultConstants;
import com.qrsoft.entity.WarnFlightHistory;
import com.qrsoft.mapper.WarnFlightHistoryMapper;
import org.springframework.stereotype.Service;

import java.util.*;

@Service
public class WarnFlightHistoryService extends ServiceImpl<WarnFlightHistoryMapper, WarnFlightHistory> {

	/**
	 * 年度警告区域统计
	 */
	public Result annualWarningAreaStatistics(){

		List<WarnFlightHistory> warnFlightHistories = baseMapper.annualWarningAreaStatistics();
		return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS,warnFlightHistories);
	}

	/**
	 * 年度警告分类统计
	 */
	public Result annualWarningStatisticsByCategory(){
		List<WarnFlightHistory> warnFlightHistories = baseMapper.annualWarningStatisticsByCategory();
		return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS,warnFlightHistories);
	}


	/**
	 * 管制指令纠错
	 */
	public Result findWarnTp(){
		List<HashMap<String, Object>> result = new ArrayList<>();
		List<HashMap<String, Object>> warnTp = baseMapper.findWarnTp();
		for (HashMap<String,Object> hm :warnTp){
			String gj_acids = (String)hm.get("gj_acids");
			String[] split = gj_acids.split("-");
			System.out.println(split.length);
			if(split.length>=2) {
				Integer warn = baseMapper.getWarn(split[0], split[1]);
				if(warn >=2){
					result.add(hm);
				}
			}
		}
		return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS,result);
	}
}
  • 编写BigData-KongGuan/src/main/java/com/qrsoft/controller/WarnFlightHistoryController.Java控制器类：
package com.qrsoft.controller;

import com.qrsoft.common.Result;
import com.qrsoft.service.WarnFlightHistoryService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Api(tags = "年度统计")
@RestController
@RequestMapping("/api/warnFlightHistory")
public class WarnFlightHistoryController {

	@Autowired
	private WarnFlightHistoryService service;

	/**
	 * 年度警告分类统计
	 */
	@ApiOperation(value = "年度警告分类统计")
	@GetMapping("/annualWarningStatisticsByCategory")
	public Result annualWarningStatisticsByCategory(){
		return service.annualWarningStatisticsByCategory();
	}
	/**
	 * 年度警告区域统计
	 */
	@ApiOperation(value = "年度警告区域统计")
	@GetMapping("/annualWarningAreaStatistics")
	public Result annualWarningAreaStatistics(){
		return service.annualWarningAreaStatistics();
	}

	/**
	 * 管制指令纠错
	 */
	@ApiOperation(value = "管制指令纠错")
	@GetMapping("/findWarnTp")
	public Result findWarnTp(){
		return service.findWarnTp();
	}
}

3、完成前端Index.vue页面，展示“年度告警区域统计”

  • 在src/views/Home/Index.vue页面引入WarnStatistice.vue组件
import WarnStatistice from "../../components/WarnStatistice";
  • 声明组件，代码如下：
components: {AirLine, Section, WarnStatistice, Delay},
  • 展示，代码如下：
<el-row :gutter="30" v-show="isShow('/section/warning')">
      <el-col :span="12" align="center">
        <air-port-count-chart/>
      </el-col>
      <el-col :span="12" align="center">
        <WarnStatistice/>
      </el-col>
</el-row>

注意：在上面代码中【 v-show="isShow('/section/warning')" 】属性的作用是判断当前登录的用户是否有权限显示当前内容，如果当前登录的用户没有权限，则不会显示当前内容，新用户的权限需要到MySQL数据库中进行设置。

这里有两种方式，可以显示当前内容：

1）去掉【 v-show="isShow('/section/warning')" 】属性，即不判断是否有权限显示。

2）需要使用有权限的用户登录才能显示，或到数据库中分配权限。

参照任务“动态航线图”进行设置。

例如我们前面使用的用户admin，该用户没有权限显示，所以使用admin用户登录系统时是不会显示当前内容的，如果要进行权限设置，可以进入MySQL安装节点（node3节点），然后进入数据库，为admin用户授权。

[root@node3 ~]# mysql -uroot -p123456
mysql> use kongguan;

先查看角色表中，“管理员”的ID：

修改sys_auth表，添加一个【/section/warning】权限：

mysql> insert into sys_auth(auth_name,auth_code,menu_url) values('show warning','/section/warning','/section/warning');

修改role_auth表，将权限授权给“管理员”角色：

mysql>insert into role_auth(role_id,auth_id) values(3,197);

  • Index.vue页面的完整代码如下：
<template>
  <div class="index">
    <el-row :gutter="30"  v-show="isShow('/flight/section')">
      <el-col :span="24" align="center">
        <Section/>
      </el-col>
    </el-row>
    <el-row :gutter="30" v-show="isShow('/flight/airline')">
      <el-col :span=24 align="center">
        <AirLine/>
      </el-col>
    </el-row>
    <el-row :gutter="30" v-show="isShow('/section/warning')">
      <el-col :span="12" align="center">
        <air-port-count-chart/>
      </el-col>
      <el-col :span="12" align="center">
        <WarnStatistice/>
      </el-col>
    </el-row>

    <el-row :gutter="30" v-show="isShow('/flight/delay')">
      <el-col :span="16" align="center">
        <Delay/>
      </el-col>
      <el-col :span="8" align="center">
        <year-warning-chart/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import AirLine from "../../components/AirLine";
  import Section from "../../components/Section";
  import WarnStatistice from "../../components/WarnStatistice";
  import Delay from "../../components/Delay";

  import {hasPermission} from "../../utils/permission";

  export default {
    data() {
      return {
      };
    },

    mounted() {
    },
    components: {AirLine, Section, WarnStatistice, Delay},
    methods: {
      isShow(permission){
        return hasPermission(permission);
      }
    }
  };
</script>

<style scoped>
  .index {
    height: 100%;
    overflow: auto;
    padding-left: 44px;
    padding-right: 44px
  }
  .index::-webkit-scrollbar {
    display: none;
  }

  .caseClass {
    background: url('../../assets/images/index-bg.png') no-repeat;
    background-size: cover;
    margin-top: 20px;
    height: 284px;
  }

  .el-button {
    background: transparent;
  }

</style>
  • 确保Hadoop、Spark、Kafka、Redis、MySQL等服务均已经正常启动，如果没有正常启动，请参照前面的安装部署任务，完成这些服务的启动。

例如：查看MySQL是否正常启动。

  • 启动后端项目 BigData-KongGuan

  • 启动前端项目 kongguan_web

  • 页面展示效果如下：

不要em0啦
关注
  • 14
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zabbix 告警统计报表
04-29
zabbix 告警统计报表， 包含邮件发送，zabbix alarm 告警统计
监控告警系统设计草案.docx
01-05
监控告警系统设计草案.docx 监控告警系统设计草案是基于日志进行监控的系统设计，旨在通过规则对日志信息进行过滤，发现问题并通过短信、邮件和企业微信进行告警。该系统设计涵盖了背景知识、需求分析、功能分析、...
华为OMC告警信息整理工具.exe
01-25
华为OMC告警信息整理工具.exe
zabbix告警邮件次数统计脚本
03-09
zabbix 告警次数统计
综合告警管理系统解决方案
02-23
转载：综合告警管理系统解决方案
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 319
在vue.config.js中配置关闭Uncaught runtime errors显示。
前端性能优化：提升网站加载速度的终极指南
喔的嘛呀的博客
06-07 1058
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
vue3如何定义一个组件
Java程序员专栏
06-09 511
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 787
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 295
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Web前端工程师的前景：挑战与机遇并存
asdgftv_niiy的博客
06-09 361
随着互联网的飞速发展和数字化转型的深入推进，Web前端工程师的前景日益广阔且充满挑战。作为互联网技术的核心力量之一，前端工程师的角色越来越重要，但同时也面临着技术更新迅速、市场需求多变等挑战。本文将从四个方面、五个方面、六个方面和七个方面深入剖析Web前端工程师的前景，为读者揭示这一职业领域的机遇与挑战。随着技术的不断进步和应用场景的不断拓展，前端工程师的工作也开始与其他领域进行跨界融合。只有不断提升自己的技术水平和创新能力，才能在激烈的市场竞争中脱颖而出，实现个人价值和社会价值的双赢。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 282
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 264
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
vue基础P7-17
weixin_43883584的博客
06-09 569
{{xxxx}}用在标签体中，也就是<>{{xxx}}</>xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1226
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 533
Vue在表单校验中trigger属性指定何时触发校验规则
前端工程化：基于Vue.js 3.0的设计与实践
weixin_44976692的博客
06-08 4515
本书由程沛权倾力撰写，基于其多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章。从前端工程化的基础开始，到TypeScript的深入学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程，帮助读者在前端工程化领域不断提升实战能力。程沛权，养了三只猫的程序员，热爱烹饪、设计和音乐。在前端领域有多年的开发经验和一线开发团队管理经验。
vue2中如何使用函数式组件
JackZhouMine
06-08 1034
vue 在 render 函数的第二个参数中提供了context，用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象，即 h 的第二个参数。listeners: 组件上监听的事件对象，在组件上监听 ` event-name ` ，listeners 对象就有 ` event-name ` 属性，值为函数，数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数，返回了包含所有插槽的对象。
前端工程化工具系列（十二）—— PostCSS(v8.4.38)：CSS 转换工具
天下布武
06-08 236
是转换 CSS 语法的工具。它提供 API 来对 CSS 文件进行分析和修改它的规则。PostCSS 本身并不能直接使用，主要是使用基于 PostCSS 编写的插件。
prometheus告警
07-22
1. 配置告警规则：在 Prometheus 的配置文件中定义告警规则，这些规则可以基于指标的值、持续时间或其他条件来触发告警。您可以使用 PromQL 查询语言编写这些规则。 2. 启用告警管理器：确保 Prometheus 的告警管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值