前端组件的问题 如何在一个组件组件添加form

看到一个十分炫酷的前端组件 打算作为网页登入页面背景
组件链接为:http://www.yyyweb.com/demo/webgl-clouds/
想在这个中间加一个form 悬浮中间 但是不会加~~~请大神解惑
图片说明

0

2个回答

absolute定位的div浮动到canvas上就行了,div里面放form表单

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>HTML5 云朵效果</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
    <style type="text/css">
        body {
            background-color: #326696;
            margin: 0px;
            overflow: hidden;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            font-weight: bold;
            text-align: center;
        }

        a {
            color: #0078ff;
        }
        #loginForm{width:300px;height:200px;border:solid 1px #000;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-100px}
    </style>
</head>
<body>
    <form id="loginForm"><input type="text" />,,,其他输入项目</form>
    <script type="text/javascript" src="http://www.yyyweb.com/demo/webgl-clouds/assets/three.min.js"></script>
    <script type="text/javascript" src="http://www.yyyweb.com/demo/webgl-clouds/assets/Detector.js"></script>
    <script id="vs" type="x-shader/x-vertex">

        varying vec2 vUv;

        void main() {

        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }

    </script>

    <script id="fs" type="x-shader/x-fragment">

        uniform sampler2D map;

        uniform vec3 fogColor;
        uniform float fogNear;
        uniform float fogFar;

        varying vec2 vUv;

        void main() {

        float depth = gl_FragCoord.z / gl_FragCoord.w;
        float fogFactor = smoothstep( fogNear, fogFar, depth );

        gl_FragColor = texture2D( map, vUv );
        gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
        gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );

        }

    </script>

    <script type="text/javascript">

        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var container;
        var camera, scene, renderer;
        var mesh, geometry, material;

        var mouseX = 0, mouseY = 0;
        var start_time = Date.now();

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            // Bg gradient

            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = window.innerHeight;

            var context = canvas.getContext('2d');

            var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, "#1e4877");
            gradient.addColorStop(0.5, "#4584b4");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
            container.style.backgroundSize = '32px 100%';

            //

            camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
            camera.position.z = 6000;

            scene = new THREE.Scene();

            geometry = new THREE.Geometry();

            var texture = THREE.ImageUtils.loadTexture('cloud10.png', null, animate);
            texture.magFilter = THREE.LinearMipMapLinearFilter;
            texture.minFilter = THREE.LinearMipMapLinearFilter;

            var fog = new THREE.Fog(0x4584b4, -100, 3000);

            material = new THREE.ShaderMaterial({

                uniforms: {

                    "map": { type: "t", value: texture },
                    "fogColor": { type: "c", value: fog.color },
                    "fogNear": { type: "f", value: fog.near },
                    "fogFar": { type: "f", value: fog.far },

                },
                vertexShader: document.getElementById('vs').textContent,
                fragmentShader: document.getElementById('fs').textContent,
                depthWrite: false,
                depthTest: false,
                transparent: true

            });

            var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));

            for (var i = 0; i < 8000; i++) {

                plane.position.x = Math.random() * 1000 - 500;
                plane.position.y = -Math.random() * Math.random() * 200 - 15;
                plane.position.z = i;
                plane.rotation.z = Math.random() * Math.PI;
                plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

                THREE.GeometryUtils.merge(geometry, plane);

            }

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            mesh = new THREE.Mesh(geometry, material);
            mesh.position.z = -8000;
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({ antialias: false });
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);

            document.addEventListener('mousemove', onDocumentMouseMove, false);
            window.addEventListener('resize', onWindowResize, false);

        }

        function onDocumentMouseMove(event) {

            mouseX = (event.clientX - windowHalfX) * 0.25;
            mouseY = (event.clientY - windowHalfY) * 0.15;

        }

        function onWindowResize(event) {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            position = ((Date.now() - start_time) * 0.03) % 8000;

            camera.position.x += (mouseX - camera.position.x) * 0.01;
            camera.position.y += (-mouseY - camera.position.y) * 0.01;
            camera.position.z = -position + 8000;

            renderer.render(scene, camera);

        }

    </script>
    <script src="http://www.yyyweb.com/demo/common/jquery.min.js"></script>
</body>
</html>

var texture = THREE.ImageUtils.loadTexture('cloud10.png', null, animate);
注意替换这个地址为你网站的

0
qq_27836205
Jordan裔 万分感谢
2 年多之前 回复

这是利用html5的webgl/canvas画出来的,核心代码是

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container;
            var camera, scene, renderer;
            var mesh, geometry, material;

            var mouseX = 0, mouseY = 0;
            var start_time = Date.now();

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                // Bg gradient

                var canvas = document.createElement( 'canvas' );
                canvas.width = 32;
                canvas.height = window.innerHeight;

                var context = canvas.getContext( '2d' );

                var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
                gradient.addColorStop(0, "#1e4877");
                gradient.addColorStop(0.5, "#4584b4");

                context.fillStyle = gradient;
                context.fillRect(0, 0, canvas.width, canvas.height);

                container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
                container.style.backgroundSize = '32px 100%';

                //

                camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
                camera.position.z = 6000;

                scene = new THREE.Scene();

                geometry = new THREE.Geometry();

                var texture = THREE.ImageUtils.loadTexture( 'cloud10.png', null, animate );
                texture.magFilter = THREE.LinearMipMapLinearFilter;
                texture.minFilter = THREE.LinearMipMapLinearFilter;

                var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

                material = new THREE.ShaderMaterial( {

                    uniforms: {

                        "map": { type: "t", value: texture },
                        "fogColor" : { type: "c", value: fog.color },
                        "fogNear" : { type: "f", value: fog.near },
                        "fogFar" : { type: "f", value: fog.far },

                    },
                    vertexShader: document.getElementById( 'vs' ).textContent,
                    fragmentShader: document.getElementById( 'fs' ).textContent,
                    depthWrite: false,
                    depthTest: false,
                    transparent: true

                } );

                var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );

                for ( var i = 0; i < 8000; i++ ) {

                    plane.position.x = Math.random() * 1000 - 500;
                    plane.position.y = - Math.random() * Math.random() * 200 - 15;
                    plane.position.z = i;
                    plane.rotation.z = Math.random() * Math.PI;
                    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

                    THREE.GeometryUtils.merge( geometry, plane );

                }

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                mesh = new THREE.Mesh( geometry, material );
                mesh.position.z = - 8000;
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer( { antialias: false } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onDocumentMouseMove( event ) {

                mouseX = ( event.clientX - windowHalfX ) * 0.25;
                mouseY = ( event.clientY - windowHalfY ) * 0.15;

            }

            function onWindowResize( event ) {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;

                camera.position.x += ( mouseX - camera.position.x ) * 0.01;
                camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
                camera.position.z = - position + 8000;

                renderer.render( scene, camera );

            }

0
qq_27836205
Jordan裔 这个源码有 但是我想在这个中间加上我写的form页面 作为登入页面 怎么加进去啊
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
在组件上使用 v-model
自定义事件也可以用于创建支持` v-model` 的自定义输入组件。
react antd form组件的使用
import { Form } from 'antd'class add extends Component{    render(){        const { getFieldDecorator } = this.props.form            return(&amp;lt;div&amp;gt;            &amp;lt;Form&amp;gt;&amp;lt;FormItem&amp;gt;&amp;lt;/Form...
一个完全独立的、简洁的jquery前端分页组件,用到动态添加页内样式的方法哦。
以前一直没有动态往页面添加过可被调用样式类,今天为了封装的独立性(只有js文件),尝试了一下,竟然能行,因此记录下来,已备后用
vue 使用iview的表单组件
1、重置表单数据的时候,可以使用resetFields()方法,需要注意的是:nn      a、必须添加prop属性nn      b、prop属性的值不能与v-model的值相同nn  nn2、设置表单项的初始化值,直接在初始化data中赋值nn ...
Vue中在组件内部实现一个双向数据绑定
Vue中在组件内部实现一个双向数据绑定nimport Vue from 'vue'nnconst component = {n props: ['value'],n template: `n &amp;lt;div&amp;gt;n &amp;lt;input type=&quot;text&quot; @input=&quot;handleInput&quot; :value=&quot;value&quot;&amp;gt;n &amp;lt;/div&amp;gt;n ..
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用。nn  组件的源码    https://github.com/haozhaohang/ant-design
向form中添加组件元素
困扰了我一下午,问题终于解决了....n问题描述:用的jQuery UI的对话框,在里面用到了上传文件这个,之前一直都是像绿色文本标注的那样,form中写个隐藏域,然后将对话框内的中的val传递过去,text传递到hidden中是没有问题的,但file传递给hidden老是出现问题,百思不得姐...n这是jQuery一个很特殊的地方,我的demandDialog明明是在form中的,可调用了j
【React】添加新组件
环境准备n安装create-react-appn通过安装create-react-app,我们可以在本地创建前端应用。nnpm install -g create-react-appnn紧接着我们可以创建一个项目:ncreate-react-app first_react_appncd first_react_appnnpm startnn基于组件开发应用n这是React开发的首要思想。组件是什...
Vue组件配置
Vue 组件调用配置,如何在父组件配置资源,子组件接收父组件的配置;
react.js + dva antd组件操作验证在同一个页面验证多个表单form
n n n 功能需求:点击增加按钮 可以增加一个from表单 ,每个form表单的操作控制整体form渲染nnnnnn外部渲染 nnnnnn问题难点:点击删除按钮  删除某个表单时,表单内容不会重新渲染 1解决方式 :组件清空  from表单,动态生成表单项   this.props.form.resetFields() ;// resetFields()   清空初...
如何在Delphi下安装Ehlib组件
如何在Delphi下安装Ehlib组件如何在Delphi下安装Ehlib组件
使用BorderLayout布局管理器将组件进行布局
//这段代码主要是展示如何使用BorderLayout布局管理器将组件进行布局rnpackage test3;rnimport javax.swing.*;rnimport java.awt.*;rnpublic class test3rn{rn    static final int WIDTH=300;rn    static final int HEIGHT=200;rn    public
通过代码给物体添加组件
//添加n GameObject obj = new GameObject(&quot;cube&quot;);n obj.AddComponent&amp;lt;Rigidbody&amp;gt;();nn //Tip 添加的组件也可以是脚本n //销毁nn Destroy(obj.GetComponent&amp;lt;Rigidbody&amp;gt;())...
Django学习之Forms组件一
1&amp;gt;概念nndjango框架提供了一个Form类,来进行web开发中的表单提交数据的处理工作。nn form组件的2大功能:n       1 对用户提交的内容进行验证(from表单/Ajax,显示错误信息)n       2 保留用户上次输入的信息n                  -- 可以生成html标签nn先看一下创建一个Form表单实现校验功能的基本语法,如下,nn自定义的类要继...
【spring系列】之3:Import快速给容器中添加组件
给容器注册bean的几种方式:nn1.包扫描:ComponentScan+bean注解(@Controller,@Service,@Repository,@Component,Bean):nn2.条件注入:@Conditional按条件选择注入nn3.@Import快速给容器中导入一个组件nn4.FactoryBean注册nn nn@Import提供三种方式注册bean到容器中,nnImport直...
extjs6.2各种表单组件的使用
html页面代码:&amp;lt;div id=&quot;a&quot;&amp;gt;&amp;lt;/div&amp;gt;nnjs端代码:nnnn还有一个下拉列表没放进去,我在网上找一个类似的,可以参考下:nnnn至于php文件我就不上传了。都是接收参数处理参数的内容。...
在标签选项卡中添加基本组件
package test3;rn//这段程序代码主要是在上例的基础上,在每个标签选项卡中添加基本组件rnimport javax.swing.*;rnimport java.awt.*;rnpublic class test3rn{rn public static void main(String[] args)rn {rn  tryrn{//显示外观风格rnUIManager.setLookAn
关于antd表单组件遇见的问题
公司在用antd+mobx做表单时遇见一些问题,自己解决并记录下来n业务需求nn点击新增按钮时,弹出一个嵌入Form的Modal,填写完毕后验证表单n点击编辑按钮时,弹出上一个Modal,并将以前的填写信息回显上去nnn遇见的问题n问题1、表单验证后错误信息已经打印到控制台上,但页面中并没有显示错误信息n分析过程:nn填写表单时触发onFieldsChange将变化的value存放到store中n...
React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题
React 项目中同一个页面使用多个Form表单,如果直接在Render中使用多个Forn,在提交某一个表单时会同时触发其他表单的提交事件,因此可以使用函数式的方法return出Form组件,然后再Render中引用,从而使页面上的Form相互独立nnn代码如下:nnimport React, { Component } from 'react';nnimport { Form, Button,...
如何写一个前端组件-以bootstrap-tab为例
介绍本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,以下是实现效果:原生的Bootstrap-tab组件主要有html,css组成,开发者使用时,需要写很多代码,不易于使用,对bootstrap-tab封装后,可以更方便地使用,同时提供关闭、增加tab页、指定当前选中页、即使加载等功能,这样组件可以适配更多的场景。原生bootstrap-tab组件使用可参考https://
小程序map组件添加input等form表单
n代码地址:https://github.com/HeadmasterTan/miniprogram-map-formn如果帮到你的话别忘了给个 Star 噢 ♥nn背景nn因为现在小程序的map、video、canvas、camera···等组件的层级非常高,而且cover-view还不支持内嵌input等form表单元素,所以就做了个取巧的方案nn延伸nn虽然这个只是针对map组件写的demo...
extjs动态添加或删除控件
背景:extjs 3.4rn需求:添加或删除textarearn代码:rnrnvar i =0;rnrnthis.addButton= new Ext.Panel({rnrnlayout:'hbox',rnrnborder:false,rnrnscope:this,rnrnitems:[{rnxtype:'button',rntext:'增加',rnhandler:function(){rnrnv
Bootstrap日期和时间表单组件datetimepicker的使用
1:把项目下载到本地:n下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/n2:提取文件n把datetimepicker.min.css文件放到自己项目的css文件夹中n把datetimepicker.min.js文件放到自己项目的js文件夹中n3:引入到自己项目中n在需要用到该组件的html页面头部  n在需要用到该组件的
关于redux-form和其他组件配合使用的一些坑
1.0,若不用immutableJS会有严重的性能问题n首先redux-form最坑的是name的值一边,connect下面的所有组件都会渲染一次
react.js 怎样在函数(方法)里重定向到某一组件
n n n 1.首先安装 react-router-domnnpm install --save react-router-domnn2.在组件里引入 withRouternimport {withRouter} from &quot;react-router-dom&quot;;n...nexport default withRouter(NavHeader);nn3.方法里通过thi...
基于Vue构造器创建Form组件的通用解决方案
在前端平常的业务中,无论是官网、展示页还是后台运营系统都离不开表单,它承载了大部分的数据采集工作。所以如何更好地实现它,是平常工作中的一个重要问题。n在应用Vue框架去开发业务时,会将页面上每个独立的可视/可交互区域拆分为一个组件,再通过多个组件的自由组合来组成新的页面。例如n&amp;lt;template&amp;gt;n &amp;lt;header&amp;gt;&amp;lt;/header&amp;gt;n ...n &amp;lt;...
创建第一个Angular组件!!!
创建英雄列表组件nn使用 Angular CLI 创建一个名为 heroes 的心组件nnng generate component heroesnnCLI创建了一个新的文件夹 src/app/heroes/, 并生成了三个文件nnHeroesComponent的类文件如下:nnnimport { Component, OnInit } from '@angular/core';nn@Compon...
React复合组件
1、组合实例:rnvar Avatar =React.createClass({rn  render: function() {rn    return (rn      rn        rn        rn      rn    );rn  }rn});rn rnvar ProfilePic =React.createClass({rn  render: function() {rn  
表单中涉及到的日期控件以及日期时间控件遇到的坑。
日期之间的转换遇到很多个坑,想总结一下,方便以后的查看。n先查看一下单子中涉及到的时间设置:nnn这两个字段分别是我要在后台获取的字段,我后台获取完之后经过一系列的转换,最终要把他们转换成时间戳,最后要以字符推送到第三方!n由于这两个字段是在重复表中,当获取一个字段的时候,这个字段是在一个List中,而我要先把他们一个一个的遍历出来,n然后一个一个的转换!代码如下:
web前端组件开发 之 弹窗组件实现
widget 抽象类首先抽象出弹窗组件的一些共有属性和方法。widget抽象类中 定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性:this.boundingBox = null; // 弹窗组件最外层容器n在widget抽象类中,提供4个接口,具体实现留给子类去实现。 n4个接口具体功能如下: //接口,添加DOM节点n renderUI: function(
Vue注册组件的3种方式
第一种方式 extend:nvue.js中这样写:nvar com1 = Vue.extend({n template:'&lt;h3&gt;这是第一种方式&lt;/h3&gt;'n});nVue.component("myCom1",com1);nn注:myCom1是采用的驼峰命名方式,所以html中这样写:n&lt;my-com1&gt;&lt;/my-com1&gt;nn注:如果不采用驼...
ant Form 表单作为子组件
 子组件中代码:nnnclass FormName extends React.Component {n constructor(props) {super(props); }n render() {n const { getFieldDecorator } = this.props.form;n const formItemLayout = {n ...
如何实现一个组件封装?
问题网址 : http://bbs.daxiangclass.com/?thread-271.htmnnjs前端组件的封装方法nnn定义一个类n类中增加一个方法nbody中定义一个dom节点n脚本中把dom节点和类定义结合起来 , 实现特定的组件功能nnnvue组件封装nnn建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑n然后在引用得组件中 用import引入组件 n通过com...
如何在C++ Builder 6.0 中安装组件.doc
如何在C++ Builder 6.0 中安装组件.doc 如何在C++ Builder 6.0 中安装组件.doc
如何制作Vuejs组件,并且在项目中使用
如何制作VueJS的组件,并且在项目中使用第一步:搭建一个JS的框架,这里我习惯使用AMD规范define(function(require, exports, module){} n然后可以在项目里面引入需要的类库,或者JS文件,例如define(function(require, exports, module){n var $ = window._$ = require("lib_cmd
组件方式开发 Web App全站-7-图表组件-柱状图组件开发
为了照顾后面的数值不跟随柱形移动。所以柱形是一个div定义宽和高;然后里面一个div添加背景,然后宽度逐渐增加 n雷达图 n n底图层:网格背景+伞骨图(核心关键:多边形顶点坐标计算) n 1. 计算一个圆周上的坐标(计算多边形的顶点坐标 n 2. 已知:圆心坐标(a,b),半径 r;角度deg. n 3. rad = ( 2*Math.PI / 360) * (360 / 边数) * i(第几个)
VUE将公用组件写成全局组件并在各组件中引用详解
n n n 先简单看一下项目的目录:nnnnnnnvue项目目录.pngnn然后在src/components目录下新建一个存放全局的文件夹:这里为loading,然后新建一个loading.vue和index.js。(src下应该也是可以的,在main.js下引用时候写对相对路径就可以了,今天由于时间问题就不做验证了,有时间了会写一个来这里给个准确答复)nloadi...
ext总对form表单items的结构动态添加/删除
在工作中有这样一个需求:  rn显示访问记录情况(包括访问状态,  最后访问时间等信息 ),  初始时items只有8个控件,  当多一条数据就需要动态的添rn加一个控件,因为每次查询都对items结构进行了修改, 为了不影响下次查询的显示结果,  需要回复items的结构到初始rn状态 ,这时候就需要删除多余控件,rnrnrn操作中遇到的问题:  rn添加成功, 删除控件, 仍然在页面显示删除的
网页端&小程序的前端note:组件的显示或隐藏(附带控制样式)
刚开始写小程序时,百度输入隐藏view,得到的大多数解决方案都是在class中增加具有隐藏属性的类选择器hide,实际上,除了遮罩层我都不这样写了 n因为这样写,wxml的class代码太多了,如图nn&amp;amp;amp;amp;amp;amp;amp;lt;text class=&amp;amp;amp;amp;amp;amp;quot;goodsop-num {{item.goodsNum&amp;amp;amp;amp;amp;amp;amp;gt;0?'':'hide'}}&amp;amp;a
react实现表单组件
1、首先,引入js必不可少rn    rn    rn    rn2、废话少说,直接贴代码(注:这里把单选框和复选框定义成了两个子组件,子组件会调用父组件的方法)rnrnrnrn    react表单事件rn    rnrnrn    rn    rn       var FormApp=React.createClass({rn            getInitialState:functi
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 大数据基础组件 大数据运维基础组件