GongWei_的博客

原创 js Number类型常用数据操作方法汇总

常用一些数字类型操作方法

原创 uniapp 如何使用echarts 以及解决tooltip自定义不生效；dataZoom报错问题

uniapp如何使用echarts并且如何自定义tooltip，以及echarts层级太高怎么办

原创 详解uniapp开发h5页面在微信浏览器跳转外链，ios按底部返回键，需要刷新页面数据的问题

处理ios 点击微信浏览器返回键刷新页面的问题

原创 jq封装树形下拉选择框组件

jq封装树形下拉选择框组件

原创 【css】七夕程序员的浪漫，3d旋转相册

【css】七夕程序员的浪漫，3d旋转相册。

原创 element Upload上传多张图片后，如何进行增加 删除操作并将编辑后的图片数组传参

编辑信息时，因为后端返的图片数组，和Upload的api回调fileList数组不相同，导致在删除图片后，不知道自己删的具体是那一张图以至于删除不了图片 只能新增，后面采用了下面方法解决这个问题<el-upload list-type="picture-card" :action="action" :file-list="userForm.hyfile" :before-remove="beforehyRemove" :before-upload="handlehySu

原创 JS 将对象数组a中不包含数组b里的元素的项去除

案例一：后台侧边栏菜单权限控制var a = [ { name: "aa", children: [{ name: "aa1" }, { name: "aa2" }] }, { name: "bb", children: [{ name: "bb1" }, { name: "bb2" }] }, { name: "cc", children: [{ name: "cc1" }, { name: "cc2" }] }, { name: "dd"

原创 JS: 两个对象数组,筛选出数组一不包含数组二的元素

var a=[{uid:"1"},{uid:"2"},{uid:"3"}]var b=[{uid:"1"},{uid:"3"}]目标：["2"]//方法filterArr(arr1, arr2) { var uid1=[] var uid2=[] for(var i in arr1){ uid1.push( arr1[i].uid) } for(var i in arr2){ uid2.push( arr2[

原创 将对象数组中的所有对象合并为一个对象

let channelTabList = [ {1: '推荐'}, {2: '最新'}, {3: '快赚'}, {4: '高额'}]let lists = channelTabList.reduce((acc,value)=>{ return {...acc,...value}})lists = {1: "推荐", 2: "最新", 3: "快赚", 4: "高额"}扩展:将二维数组变成一维数组let arr = [[0, 1], [

原创 将一个对象数组合并为带子集children的树形结构

var arr=[ { banci: "09:00-21:00", nowday: "5月18日", shiftName: "白班", sid: "21381668786929665", }, { banci: "21:00-09:00", nowday: "5月18日", shiftName: "晚班", sid: "2138166878692

原创 echarts报错： Can‘t get DOM width or height. Please check dom.clientWidth and dom.c

具体报错：echarts.js?a670:2220 Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.出现问题的场景：我是在tab分页中需要插入echarts柱形图，默认开始是设备oee报表这个分页。报错

原创 vue中在echarts里设置的定时器清除不掉问题

在动态图里，往往需要用到定时器去动态渲染数据，我的需求是：当x轴类目过多的时候，就让它自动滚动，这个时候需要用到定时器去动态的控制dataZoom里endValue的值，this.barInter = setInterval(() => { // 每次向后滚动一个，最后一个从头开始。 // console.log(this.xNum) if (option.dataZoom[0].endValue >= option.series[0].data

原创 css自定义滚动条样式

很多时候为了页面更美观，需要自定义滚动条的样式，//.select-list-item是有滚动条盒子的class名 设置了overflow-y:auto才有的滚动条.select-list-item::-webkit-scrollbar { /*滚动条的宽度*/ width: 5px; } .select-list-item::-webkit-scrollbar-thumb { /*滚动条里面小方块样式设置*/ border-radius: 10px; -web

原创 让echarts 柱形图x轴的刻度显示在柱形中间,刻度和标签对齐

关键点：xAixs.axisTick.alignWithLabel:truexAxis: { type: "category", //类名轴 data: [ "3月1日", "3月2日", "3月3日", "3月4日", "3月5日", "3月6日", "3月7日", ], .

原创 实现echarts数据堆叠柱状图，并自定义每个类目柱形的颜色

关键点：series.stack: “”, 同个类目轴上系列配置相同的stack值可以堆叠放置。具体实现series: [ { name: "绿灯", type: "bar", stack: "total", emphasis: { focus: "series", }, data: [95, 90, 80, 6.

原创 echarts x轴长度不够时导致文本显示不全，让标签文本倾斜展示

关键点：xAxis.axisLabel.interval:0 强制显示所有标签、 xAxis.axisLabel.rotate:旋转角度 xAxis: { type: "category", //类名轴 data: [ "待人", "中途调模", "换料", "待料", "设备故障", "换款", .

原创 echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图

关键点：series.type: “pictorialBar”,<div class="cl-top-content" id="deviceOee" style="width:500px;height:200px"></div>mounted() { this.barChart(); },//设备OEE barChart() { let myChart = this.$echarts.init(document.getElementById.

原创 自定义echarts x轴 y轴每个刻度的文本颜色

关键点：yAxis.axisLabel.textStyle.color、xAxis.axisLabel.textStyle.color具体实现yAxis: [ { type: "category", show: true, inverse: false, data: ["80%以上", "50%-80%", "50%以下"], axisLine: {//刻度线显.

原创 echarts自定义每个柱形颜色不一样

关键点 smeries-bar.itemStyle 设置图形样式series: [{ type: "bar", itemStyle: { normal: { // barBorderRadius: [4, 4, 4, 4], color: function (params) { var colorlist = ["#81D3F8", "#FF6600", "#FF004D".

原创 vue 点击遮罩层功能区以外的地方关闭遮罩层

点击红色框外的遮罩层区域关闭遮罩层方法一：关键点：@click=“close($event)” ref=“msk”<div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close($event)"> <div class="popup-content" ref="msk"> <img class="coupon-page" :src="popup.couponpage.

原创 vue弹出遮罩层弹窗后禁止底部页面滑动

方法一：在遮罩层标签上添加@touchmove.prevent方法二：遮罩层显示时把下方的父盒子css设置为固定定位宽100%高100vh 超出隐藏.content{ width:100%; height:100vh; overflow:hidden}

原创 Vue 后端返回的时间戳如何解析为“yyyy-mm-dd hh:mm:ss“格式

方法一：js函数里var d=new Date(res.data.list[0].createTime);//res.data.list[0].createTime后端返的时间var time=d.toLocaleDateString()方法二：行内 <el-table-column align="center" width="180" label="创建时间"><template slot-scope="scope"> {{ new Date(.

原创 解决cover-view组件 不能设置文本超出显示省略号bug

//需求是最大显示32个字，超出显示省略号<cover-view class="ke_context" style="white-space: normal;">{{tex.length>32 ? tex.slice(0,31)+'...': tex}}</cover-view>data(){ return{ tex:"健康你我他健康你我他健康你我他健康你我他健康你我他健康你我他我知道你喜欢" }}扩展，正常设置超出文本显示省略号如下，但是cover-vie.

原创 【Git】如何修改gitlab的项目标签

原创 【Git】如何修改gitlab的项目描述

1、找到settings 设置2、点击general,修改项目描述并保存

原创 【Git】创建git分支并将代码提交到该分支

1、查看所有分支git branch2、创建本地分支git branch gw //gw就是我要创建的分支名3、切换到创建的分支git checkout gw第2步第3步也可以合并成一步，指令为git checkout -b gw //创建并切换到分支，扩展：如果是-d 则是删除本地分支4、 将新分支推送到gitgit push origin gw提交代码5、将本地全部文件添加到暂存区git add .6、将暂存区内容添加到本地仓库中git commit -m

原创 【Git】将分支代码拉取到本地修改后如何上传到git分支

上篇有说到如何将分支的代码拉取到本地，这篇介绍当拉取到本地的分支代码修改后如何提交到git分支要注意的是：如果是多人合作，推送之前最好先更新一遍代码，因为可能别人更新过该分支，防止覆盖别人更新后的代码。讲最新的分支代码拉取到本地后，再进行提交指令git pull origin dev如果只是单纯的提交修改后的分支代码到git分支则进行以下步骤就行1、查看文件状态git status2、添加全部文件到暂存区git add .3、将暂存区内容添加到本地仓库中git commit -m

原创 【Git】多人合作时如何将Git分支代码拉取到本地

1、新建文件夹，并用Git Bash Here打开2、初始化git init3、关联远程库git remote add origin 远程仓库地址4、查看分支git branch5、同步远程服务器上的数据到本地git fetch origin dev //dev是远程仓库的分支名6、切换分支git checkout -b dev origin/dev7、将分支内容拉取到本地git pull origin dev...

原创 uniapp+vant 实现抖音短视频分类切换播放

功能点： 上下滑动切换视频；tab标签切换分类<template> <view class="app"> <view class="header"> <view class="back"></view> <van-tabs v-model="activeName" @click="onClick" style="width: 60%;background: rgba(255,255,255,0);"> &..

原创 Vue 将监听函数addEventListener获取到的值 赋值给其他变量为undefined

先看看bug可以看到这里我们想把监听函数获取到的 duration push进file这个数组里，结果因为事件监听后执行（先打印出579行file的值，再打印出573行 duration的值），导致file里的duration为undefined解决办法：方法一：使用 setTimeout 异步处理successVideo: function (response, file, fileList) { this.file = []; for (let i = 0; i &l

原创 vue element-upload上传视频或音频获取视频时长

做这步操作主要是后端要求传视频的时长duration这个字段，获取方法第一种：<el-upload class="upload-demo" :multiple="multiple" :before-upload="getVideoToken" action="http://up-z2.qiniu.com" :on-success="successVideo" :data="up

原创 Vue前端如何与后端进行数据交互

1、安装npm install axios --save2、在main.js文件引入import Axios from 'axios';//后台交互Vue.prototype.$http=Axios//defaults 设置全局默认路径Axios.defaults.baseURL="/bigData"3、使用//第一种this.$http.post('/index/customer/').then(function(res) { // console.log('这是返回的客户数据')

原创 Vue如何播放视频，以及播放 m3u8格式的视频流

1、安装npm install vue-video-player --save2、引入在main.js文件里全局引入import VideoPlayer from 'vue-video-player'//引入视频播放插件require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)在单页面文件里 局部引入import { videoPlay

原创 Vue如何使用element-UI

1、安装npm install element-ui -S2、在main.js文件引入import ElementUI from 'element-ui';//引入ui框架import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3、使用根据官网 element-UI官网文档 就可以使用ui组件如：<el-row> <el-button>默认按钮</el-button>

原创 Vue如何使用echarts插件，以及简单的 柱形图 折线图 饼图 多列柱形图案例

1、安装npm install echarts --save2、引入全局引入在main.js文件引入import echarts from 'echarts'Vue.prototype.$echarts = echarts按需引入// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入柱状图图表，图表后缀都为 Chartimport { BarChart

原创 【vue】后端返回一个文件流（blob对象）时，如何将其下载下来

关键要点：responseType: “blob”,this.$axios({ url: "/api/device/deviceInfo/createDeviceInfoByExcel", method: "post", headers: { "Content-Type": "multipart/form-data", token: localStorage.getItem("token"), },

原创 2、【上传文件】vue+iview如何上传文件并携带请求头和参数实现批量导入数据？

<template> <div class="app"> <Upload ref="upload" action="/api/device/deviceInfo/createDeviceInfoByExcel"//接口地址 :headers="{//请求头 token: token, 'Content-Type': 'multipart/form-data', }" ...

原创 1、【Vue上传文件】当接口Content-Type为multipart/form-data时，如何上传文件到后端并现实批量上传

<input type="file" id="people-export" ref="inputer" @change="fileUpload" />//方法：fileUpload(event) { console.log(event); let file = event.target.files;//一个文件流 let formData = new FormData(); formData.append("file", file[0]);.

原创 Vue中对象如何新增、修改、删除、筛选属性key值

1、新增属性以及修改value值方法：this.$set(this.obj,‘key’,value)或var vm = new Vue({…})vm.set(this.obj, “key”, value)var demo={a:"1",b:"2"}this.$set(demo,"c","3")console.log(demo)//{a:"1",b:"2",c:"3"}//如果对象中存在该key值，那么就不是新增属性，而是修改该key值的value值this.$set(demo,"c","4

原创 localStorage如何存取数组、对象

localStorage存取数组和对象不像存取字符串那样，需要序列化和反序列化rolePower=["a","b","c"]存：localStorage.setItem('rolePower',JSON.stringify(rolePower))取：JSON.parse(localStorage.getItem("rolePower"))var userNews={id: "aa", userId: "1234", loginName: "test", name: "测试", orgId: "10