时光淡然

原创 macos （M2芯片）搭建flutter环境

安装的flutter版本3.13.4、电脑上没有安装过android studio、安装过brew

原创 uni-app app端.m3u8类型流的播放

app端通过web-view，实现.m3u8l类型的视频流播放

原创 uni-app之app上传pdf类型文件

实现功能：上传只能上传一个，如果文件列表有值点击上传进行toast提示，不再出现选择文件弹框，只获取数据，展示的文件列表使用uview的u-cell-group。可以使用这个插件，验证过可以上传pdf；具体使用可以去看文档。就是还是会出现相机，这个可能需要自己解决下。在app端不支持非媒体文件上传；通过阅读官方文档发现，

原创 uview，u-input组件在明密文切换时app不生效

uview，u-input组件，密码在明密文切换时app不生效

原创 uni-app动态修改导航栏标题

⚠️可能会出现在网页中切换标题正常，但是在真机中没有效果，通过查看官网看到这么一句话。执行，所以即使数据是上一个页面传递过来的，也不会影响标题的展示。动态修改标题名称，数据可能是从上一个页面传递过来的，直接在。通过借助两个页面周期函数，可以实现动态修改导航栏标题。中进行设置标题，⚠️onReady中没有接收的参数。页面周期中去获取上一个页面传递的参数，然后对。第一步，我们可以在data中定义一个变量。对导航栏标题进行修改，直接使用就可以。进行赋值，方便我们接下来的使用。上一个页面传递的参数。

原创 unview DatetimePicker 选择器数据回显

数据回显，正常情况下在mounted声明周期中就进行重新赋值应该就可以实现，但是在uni-app中，没有效果，需要使用页面声明周期函数。

原创 uni-app A页面向B页面传递数组

可以参考官方文档 https://uniapp.dcloud.net.cn/api/router.html#navigateto。A页面 主要是用encodeURIComponent 编码。B页面 decodeURIComponent 解码。

原创 Electron的使用

electron的使用

原创 微前端，qiankun的简单搭建

以react项目为基座的qiankun搭建

原创 echarts-环形，图例的文字样式

echarts环形图例文字样式以及环形中心total的文字样式

原创 echarts-自定义-性能分析图

效果图：option配置function renderItem(params: any, api: any) { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = api.size([0, 1])[1];

原创 echarts-datazoom的使用

原创 echarts仪表盘和圆形结合

效果图注意： 使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。效果代码var option = { series: [ { type: "gauge", center: ["50%", "50%"], radius: "80%", startAngle: 190, endAngle: -10,

原创 echarts图表-折柱混合

效果图数据结构const nrwData = [ { label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 }, { label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 }, { label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },

原创 柱状图-堆叠柱状图

效果图this.state.workChartList的数据结构const workChartList = [ { name: "居民热线", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] }, { name: "日常调度类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] }, { name: "调度预警类", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8,

原创 react使用echarts-gl实现3D环形图

效果图需要下载echarts、echarts-gl、版本实现代码import * as echarts from "echarts";import React from "react";import "echarts-gl";import "./index.less";const optionData = [{ name: "明漏水量", value: 15623,}, { name: "水箱水池的渗漏和溢流水量", value: 12356,}, { name:

原创 echarts实现渐变环形

echarts实现渐变环形var option = { title: { text: "达标", x: "center", y: "center", textStyle: { fontWeight: "normal", color: "#29EEF3", fontSize: "14", }, }, polar: {

原创 JS表单提交后禁止页面刷新的方法

使用return false不生效，禁止页面刷新的方法

原创 正则：判断密码由大小写字母、数字、特殊字符两种以上组成

正则：判断密码由大小写字母、数字、特殊字符两种以上组成newPw是字符串 //1.匹配数字 var rgx1 = new RegExp("[0-9]"); //2.大写字母 var rgx2 = new RegExp("[A-Z]"); //3.小写字母 var rgx3 = new RegExp("[a-z]"); //4.特殊字符;

原创 前端使用CryptoJS v3.1.2进行AES加密

在项目中引用的依赖cipher-core.js，core-min.js，pad-zeropadding.js，aes.js下载地址：https://github.com/brix/crypto-js/tree/develop/src前端的AES加密const key = CryptoJS.enc.Utf8.parse("1234567890000000");//密钥，前后端需要保持一致const iv = CryptoJS.enc.Utf8.parse("1234567890000000");//一

原创 echarts实现词云

注意：echarts在使用echarts-wordcloud时，会出现一个版本问题，echarts5版本以下的需要下载echarts-wordcloud1.0版本，echarts5及以上的下载echarts-wordcloud2.0版本这个是通过js进行实现的需要引入两个文件,echarts的版本是5以下的，echarts-wordcloud用的是1.2的下载地址：词云2.0版本： https://github.com/ecomfe/echarts-wordcloud词云1.2版本：https://

原创 jquery实现表格列拖动

jquery实现表格列拖动引入插件插件地址http://www.bacubacu.com/colresizable/#samples在不同电脑屏幕大小下，列表列宽都可以缩放，不影响其他列。允许调整的列溢出父容器。代码：var table = this.container.find("table.resizableTable"); table.colResizable({ resizeMode:'overflow' })小结：使用bootstrap实现时，

原创 echart的数据为空的处理

参考链接：https://blog.csdn.net/qq_33601443/article/details/105197137?utm_term=echarts%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA%E6%98%BE%E7%A4%BA&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-3-105197137&spm=3001.4430

原创 antd实现动态表头，以及表格的合并

antd实现动态表头，以及表格的合并拿到的数据结构const data=[ { "Month": "202101", "WMeterType": "--", "Cycle": "1", "UserCount": 44342, "subsets": [ {

原创 echarts图例显示百分比

echar图例显示百分比主要代码全部代码secondChart = () => { //datas的数据是接口拿到的数据 const { texture } = this.state; const datas = texture; var option = { color: [ "#3774e5", "#4ea9d9", "#b041ef", "#a25fea", "#

原创 git本地仓库关联已经存在的远程仓库中遇到的问题

git本地仓库关联已经存在的远程仓库出现错误。fatal: remote origin already exists.（远程来源已经存在）解决：先使用git remote -v查看远程库的信息使用git remote rm origin，删除关联的origin的远程库再次关联远程仓库git remote add origin 远程仓库的地址执行git push -u origin main出现错误：error: RPC failed; curl 28 OpenSSL SSL_read: Con

原创 echart实现折线图

效果图代码：var mess = ["00:00", "03：00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "24:00"]; var mess3 = preData; var mess4 = curData; var option = { legend: { show: true, itemWidth: 20, itemHeight: 10,

原创 echart实现立体的柱状图

效果图：代码：var xData3 = ["6", "7", "8", "9","10","11"]; var data3 = [1209, 1715, 2408, 1308, 1308, 1145]; var data5 = [4000, 4000, 4000, 4000, 4000,4000]; var option = { tooltip: { trigger: "axis", show: false, },

原创 iframe使用possMessage的简单通信

1，父页面调用子页面的方法（1）对父页面中嵌入的iframe，写上id（2）向子页面发送信息主要代码：const iframe = document.getElementById("iframeFaq").contentWindow; iframe.postMessage({ data: "hideproviderWater"}, "*");（3）子页面进行接收（和父页面接收子页面一样）调用子页面的方法是根据父页面传递不同的值，进行判断，选择需要调用的方法；2，子页面向父页面传值主要

原创 echart在随页面的大小进行缩放时，解决有时会溢出的问题

echart有时在页面缩放的时候，会发生溢出情况，给它的父元素添加上overflow:hidden，可能就会解决问题，如果还有的话，可以对自身添加上overflow:hidden，或许能解决；我的是通过给父元素和本身都进行了设置，解决了页面缩放，排版不会变。没给父元素添加overflow:hidden，有的时候就是这样的添加之后还有一种是，如果只给父元素添加，问题不能解决，需要给本身也添加上。这个是页面结构这个是设置的样式效果图如果只给父元素添加的话，会出现，下面这种情况。

原创 在react-nactive项目中运行时，报错error Failed to install the app

在react-nactive项目中运行时，报错error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:ins

原创 如何让echart环形，在中间位置显示数据

如何让echart环形，在中间位置显示数据效果图：在显示环形的基础上添加以下代码：也即是在图表配置项中添加。注意：会发现并没有效果，这个只是写的是显示在环形的位置，并没有让数据显示；还需要再data中进行设置，这个很关键这个必须要写，不然的话，没有数据显示，显示的格式就是第二张图上的formatter中的内容。完整的代码 YearPatrolChartOption2 = () => { const sldata = [ { name: "未完成计划", valu

原创 如何让echart铺满设置的尺寸

如何让echart铺满设置的尺寸在使用echart进行自适应时，给echart设置了100%，但是echart图表的大小并没有铺满100%；样式的话，我是使用less，在页面渲染的时候，即使设置了尺寸，但会有一定的延迟，拿到的echart尺寸并是不我想要的；可以通过让echart延迟显示，达到想要的效果；提供一个容器 constructor(props) { super(props); this.state = { loading: true, ty

原创 在多个项目中使用git提交代码时，遇到冲突，如何解决

在使用git push origin master提交代码时出现冲突在多项目中，遇到了冲突，需要先去拉取更新代码，保证其他人更新过的项目与自己所下载的一致，然后再去把自己的提交代码。由于自己负责的项目和其他人负责的不一样，如果自己不清楚咋样修改的话，建议去问一问。我是使用GitHubDesktop软件进行提交的，具体代码的话，可以搜搜。...

原创 iframe在其它浏览器可以显示，谷歌浏览器中无法显示问题

iframe在谷歌浏览器中无法显示问题在页面中嵌入iframe，下面就是我所嵌入的iframe如果需要传入参数，可以使用模板字符串的形式。src写的地址单独在谷歌浏览器是可以访问到html页面内容，但在项目中，嵌入的iframe就是不能显示，通过查找发现是由于谷歌浏览器升级后影响的。使用下面的方法解决了我的问题Chrome 中打开 chrome://flags/#same-site-by-default-cookies 和 chrome://flags/#cookies-without-sam

原创 使用flex布局，实现子盒子之间的间隔固定，子盒子可以随着父盒子的大小进行调整

实现子盒子在父盒子中间隔相等的排列效果图就是上面这样的，就是每个子盒子的间隔是固定的，盒子的大小是可以根据父元素的大小进行调整的。父元素设置的代码 height: calc(100% - 58px);//高度是根据自己的需要进行设置 width: 100%;//宽度是根据自己的需要进行设置 margin-top: 23.2px; padding-left: 24px;//设置的是margin好像不影响 padding-right: 24px;//这个设置的是mar

原创 使用echart，使饼图并排显示，使图例组件并排显示

在第一次使用echart时，可以去echrt官网查看自己需要的类型。如果是一个新手的话，去官方文档还是很有用的，会知道大致的概念。我需要完成的是，把三个饼图排列在一行。我之前是使用的是flex布局，发现对我来说不是很好操作。在用的时候，使用就是的简单的浮动，我们需要对引入echart的div上设置固定的宽和高。在react中引入echart的代码:class S extends React.Component{constructor() { super(); this.echar

原创 父元素设置透明度，不影响子元素

给父元素设置不透明度，并且不会影响子元素需要实现的样式，如果对父元素使用background: #000; opacity: 0.6;会发现子元素也会有影响，即使我们对子元素设置opacity: 1，这时，我们需要使用background: rgba(0,0,0,0.6)就可以实现我们的要求...

原创 使用antd3.x版本实现选择年份，并设置默认年份

在使用antd3.x的时候，需要用到只选择年份的选择器，会遇到的很多问题，点击可以查看这个文档，可能会对你有所帮助。下面的代码的实现部分import React, { Component } from 'react';import { DatePicker } from 'antd';export default class extends Component { state = { isopen: false, time: null } // 弹出日历和关闭日历的回

原创 JS中的join()，split()方法

JS中的join()方法var stringArray=["this","is","baidu"]; // 方法join()是可以让数组的值拼接成字符串 // 如果直接使用join不写参数的话结果直接是 console.log(stringArray.join());//this,is,baidu // 写一个空串，没有空格 console.log(stringArray.join(""))//thisisbaidu //带有空格结果就是带有空格的形式