- 博客(220)
- 资源 (24)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 vue基于高德地图实现城市管网、压力点、区域绘制编辑器
最近在做城市管网项目，项目中需要绘制一些管道路线，压力点位，和区域等，为了满足项目需求，于是基于高德地图实现了一个简单的编辑器。
2024-03-14 18:20:45
316
原创 vue实现H5拖拽可视化编辑器
一款专注可视化呵护哈平台工具，功能强大，高可扩展的HTML5可视化编辑器，致力于提供一套简单易用、高效创新、无限可能的解决方案。技术栈采用vue和typescript开发, 专注研发创新工具。
2023-12-27 09:46:56
1672
1
原创 基于vue3.0实现vr全景编辑器
现在我们基于vue3.0版本开发出了一款沉浸式的编辑器，只需要使用全景相机在现场拍摄全景场景，然后将场景倒入编辑器，通过拖动图标和导航的方式绑定数据，从而实现沉浸式场景可视化。随着社会的不断发现，现实生活中有很多时候会使用到全景现实，比如房地产行业vr看房，汽车行业vr看车之类的，全景可视化真实还原了现场的场景，真正做到沉浸式体验。6、自定义添加网址和富文本标记，点击跳转网址查看富文本内容。2、自定义添加文字标记，绑定文字文本，标识场景设备名称。3、自定义添加场景标记，点击可以切换不同场景视角。
2023-07-27 11:52:53
2772
2
原创 js 也可做屏幕颜色拾取器了
最近在看到一些文章，出了一些新的api接口，可以提供给js做整个电脑屏幕颜色的拾取。差了下兼容性不是很好，但是该版本的浏览器是可以正常使用的。这样对一些设计类的网站或者是需要到屏幕颜色拾取功能的也可以做！
2023-05-12 10:02:23
544
1
原创 css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画，就是鼠标移入后，在对应的文字下方会出现下划线的动画效果，当鼠标移除后，下划线动画会消失，于是想了下该如何去实现这个动画效果。
2023-03-23 14:15:10
580
1
原创 js 策略模式实现大规模表单验证
我们在做页面开发的时候有时候会遇到一些比较多的表单页面，比如个人信息，企业信息，设备信息等，里面都是包含很多的字段，每个字段需要校验的规则其实是不一样的，这样我们在提交表单的时候页面要做校验工能怎么办呢？维护起来是不是很头疼？原理就是将校验的方法抽离出来成为一个公共维护的对象，将对应的规则属性名跟对应数据的属性名相关联在一起，通过校验规则中的type 字段去找到对应检验规则方法，通过校验方法会返回对应的标识，不通过则会给出对应规则配置的错误提示语。整体代码：（ps: 用vue写的组件）
2022-11-25 14:35:14
342
1
原创 js 实现页面隐藏、关闭、刷新给出对应的提示
我们在做项目的时候经常会遇到一些需求，比如在某些页面当点击浏览器刷新 或者关闭的时候会有对应的提示，是否离开或者重新加载此网站。比如csdn写文章的时候就有这个弹窗，这功能就是用onbeforeunload实现的。浏览器切换其他页面或者最小化的时候触发，（ps: 常用于检测考试作弊行为）一般来说，我们希望使用 Page Visibility API，在用户没有看到页面时停止不必要的进程，或者执行一些后台操作。可以下面这几种情况：当用户离开页面时，暂停视频、轮播图或动画。停止一些实时获取数据的API。
2022-10-26 11:30:17
4199
原创 CSS3实现发光按钮效果动画
在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变...
2022-09-01 17:21:23
2257
原创 vue+vuex实现2D可视化图形编辑器
随着物联网的快速发展，人们对物联网设备的数据监控可视化的需求越来越强烈，为了解决企业设备数据监控可视化痛点，当康科技经过不断的努力，研发了一套基于物联网的可视化图形编辑器，用户编辑器可以通过该编辑器实现自定义上传图片，和自己所需的组件图标，通过拖拽，移动等方式编辑对应的可视化图形界面，动态绑定设备数据，实现系统组态数据显示。微信公众号 搜索“当康AIOT”，即可关注我们。6、针对不同的设备类型不同的数据绑定。北方供暖锅炉房可视化。...............
2022-08-30 15:08:59
4838
10
原创 uni-app跨端开发实现APP与H5之间的通讯和交互
最近在研究uni-app跨端开发APP和H5的通讯和交互，比如H5调用APP的方法，APP往H5里面传参，H5往app外面传参。话不多说，上代码！
2022-08-17 14:30:14
2099
1
原创 js 实现16进制与gb2312编码中文互相转化
最近在接触蓝牙与硬件通讯相关的东西，需要解析蓝牙和解析16进制的东西、下面就简单列举一些解析过程中需要的方法，希望能帮助到网友。
2022-08-17 11:28:22
423
3
原创 vue基于threejs实现的3D可视化编辑器
随着5G网络的渐渐普及，物联网在人们的生活中渐渐广泛使用，社会向着越来越智能化的方向发展。当康科技经过不懈努力，研发属于自己的一款3D可视化编辑器，助力企业应用实现3D可视化服务。......
2022-07-16 13:47:44
6878
10
原创 threejs + vue 倒入ade文件实现动画效果
threejs + vue 倒入ade文件实现动画效果<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> <button @click="save">保存</button> <button @cl.
2022-05-20 16:47:05
608
原创 vue + threejs 实现场景环境贴图，模型高光显示效果
<template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> </div> <div> 三维坐标点信息 <!-- <p>{{point3d}}<...
2022-05-19 14:44:40
2493
原创 vue + threejs实现导入blender动画并控制其播放
<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel" @click.stop> <div> <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="i...
2022-04-28 15:06:51
3554
5
原创 vue+threejs 精灵模型Sprite模拟下雨效果
<template><div class="rain-box_wrapper"> <div class="modelsBox_wrapper"></div></div></template><script>import { webglOBJ } from '@/utils/webGL/webGL.js';import TWEEN from '@tweenjs/tween.js';export defa.
2022-04-27 18:20:51
980
原创 vue+threejs 实现鼠标点击三维空间的模型点，相机平滑聚焦到对应的模型。
<template><div class="modelsBox"> <div class="modelsBox_wrapper" v-if="f"></div> <div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx"> <div class="sign" :uuid="v.uuid"...
2022-04-25 15:47:36
6131
4
原创 vue + threejs 给3D模型添加label标签（dom的方式）
webGL.js封装的代码。const THREE = window.THREE;// webGL对象配置export const webglOBJ = { renderDom: null, Scene: null, // 场景 camera: null, // 摄像头 renderer: null, // 渲染器 senceAdd (objList = []) { objList.forEach(v => { webglOBJ.Scene...
2022-04-18 17:13:43
7720
20
原创 vue项目中封装websock并使用
import { randomString } from '@/utils/index.js';import router from '@/router/index.js';// ws配置信息export const webSocket = { ws: null, // ws实例 recTime: 5 * 1000, // 重连刷新时间 webSocketTime: null, // 定时请求发送心跳包id reconnentTime: null, // 唱失败从重连id par.
2022-04-12 16:05:30
1482
原创 vue实现百度地图打点自定义div显示内容
<template><div class="bmap-layout"> <tipsBar/> <div class="unit" v-if="mapType == 'heat'"> <div class="unitItem"> <span class="text">锅炉房：</span> <span class="isNum">{{dataSys.guoLuF...
2022-04-01 20:49:34
3767
原创 vue 实现高德地图搜索地址获取经纬度
<template> <div class="map-search_wrapper" id="bmapSearch"> <div class="header"> 需要查询的地址： <el-tooltip class="item" effect="dark" :content="textTip" placement="top" :value="isshowTip" manual> <el-input .
2022-04-01 20:37:06
3404
13
原创 vue使用G6绘制树形图
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobject.
2022-01-27 16:57:07
1897
1
原创 earthSdk加载3D模型数据显示例子
<template> <div class="earthSdk" id="earthContainer"></div></template><script>export default { data () { return {}; }, mounted () { this.mapInt(); }, methods: { mapInt () { const XE = wi...
2021-08-30 17:11:59
1465
3
原创 vue实现高德地图多边形绘制电子围栏
<template> <div class="index"> <el-button type="primary" @click="drawRectangle">绘制多边形</el-button> <el-button type="primary" @click="editRectangle">编辑多边形</el-button> <el-button type="primary" @click="d...
2021-06-21 23:32:26
4347
24
原创 高德地图3D城市地图实现gps打点可视化数据显示
<template> <div id="amapContainer"></div></template><script>export default { name: 'amap3d', data () { return {}; }, mounted () { this.intAmap(); }, methods: { drawMap (city = '北京市', LngLats) {...
2021-06-20 14:25:42
1813
原创 antv G6实现拓扑树绘制
<template> <div id="antV-G6"></div></template><script>import G6 from '@antv/g6';export default { name: 'G6', mounted () { this.int(); }, methods: { int () { G6.registerNode('card-node', { .
2021-06-19 16:03:18
1109
原创 nginx 使用upstream 模块实现负载均衡
最近在项目开发的时候遇到需要使用集群的配置，需要使用nginx做负载均衡，于是就研究了下如何使用nginx做这块的东西。1、首先准备三台linux服务器做练习
2021-05-28 16:03:15
1022
1
原创 flex实现等分布局和两边固定中间自适应
等分布局：<div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>.main { height: 300px; width:100%; ..
2021-04-01 14:22:00
2617
原创 vue实现百度echart地图省市县点击下钻效果
最新在做项目的时候用到一个地图，这个地图是要离线使用的，之前做过的百度地图用的都是在线版本的，但是如果不连接外网的时候就无法显示了，现在要做的是一个不接外网的东西，然后要在地图上对应的经纬度显示项目点。点击每个城市会显示对应的城市。于是研究了下echart的map地图，实现了下面的效果。代码如下：<template> <div class="echart-bmap_wrapper"> <div class="btn"> <e
2021-03-28 23:25:51
2416
1
原创 javascript封装生成指定日期插件date.js
我们在做项目的时候经常会遇到一些需求，1、比如或者获取当天的结束时间23:59:59，2、当点的开始时间3、最近一周的时间4、本周开始结束的时间5、当月开始结束时间6、当年开始结束时间7、格式化标准时间等等，现在自己花了点时间封装了一个小的插件date.js专门处理这种需求，满足常见的日期处理功能使用。由于本人水平有限，如果有什么写的不对的地方望各位大神多多指点~！github地址：date.js...
2021-01-07 14:16:32
871
1
原创 css两行代码搞定移动端swipper滑动banner效果
刚看了下张大神的博客，又有新发现。原文地址：大侠，请留步，要不过来了解下CSS Scroll Snap？<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
2020-12-15 14:43:50
409
原创 vue封装tab组件
<template> <div class="tab-wrapper" :id="'tab_' + tabType"> <!-- <span class="active-bar" :style="{'top': `${activeIndex * 30}px`}"></span> --> <span class="active-bar" :style="{'top': `${currentIdx * 30}px`}" v-.
2020-12-15 11:20:56
651
原创 nginx配置不缓存某种特定文件
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; defa..
2020-12-08 15:52:36
5142
原创 javascript封装树数据处理插件treejs
我们在做项目的时候经常会遇到管誉组织、部分、分类、等树结构的数据，在数据结构里面算是复杂类型的数据，处理起来会有点麻烦，一般都会使用到递归，最近自己在做项目的时候页遇到类似的需求，于是自己花了点时间封装了一个专门处理树数据的小插件，里面集成了一些常见的树处理方法，可以直接调用使用。代码不到300行，小巧易用，由于本人水平有限，可能写的不是很好，或者有些小bug，欢迎各位在使用过程中遇到问题指正错误，或者有更好的想法都可以留言交流。代码已经上传到gitee上了，有时间或者新的功能我会更新上去。欢迎下载使用。.
2020-12-08 11:12:05
1346
1
原生javascript封住处理树结构数据treejs插件
2020-12-08
html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码
2017-05-25
使用HTML5结合Vuejs开发离线记事本webapp项目源码
2017-05-25
关于ES6解构赋值的问题
2018-08-23
请问网页代码中的一些注释会不会影响SEO，对关键字优化有没有影响等等
2017-08-02
javaScript nextSibling 一直报错。按理来说是这样写的啊。
2016-12-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人