01/06-01/07 第一周
- 办理入职，配置环境，阅读项目代码。
- 调研项目所用的新框架和组件库
1.Formily Alibaba 阿里巴巴同意前端表单解决方案
2.openLayers 地图组件
3.Vue3的新特性：Composition API
4.tsx
5.typeScript
6.vite
周总结
刚入职适应新环境，自研项目给公司自己封装一套组件库，技术都是新技术，要尽快学习上手，适应上班节奏，拓宽技术视野。
01/10-01/14 第二周
- 组件filePreview增加图片旋转缩放功能，增加缩略图预览功能。 过程遇到问题
-
没有考虑组件复用问题，前端主管说应该把缩放旋转功能抽离出来封装成组件（但是个人没有想到有还会有什么转件会用到该功能，觉得拆不拆离都可以）第一次封装思路错误，只是单独抽离出来功能，这样组件间耦合度有些高，没有将图片作为dom结构传给抽离出的组件。
-
封装uniapp组件--Tag 参照其他开源组件库的封装组件，理清封装组件的思路，一天基本完成。文档说明下周做。
周总结
- 思路更正，少去操作dom，刚开始思路是拿到图片dom结构操作对应的style，但是应该是写字段，通过字段动态去更改style和class，这个都工作一年了，应该早就把思路转变过来了，要反思。
- 对于vue3+tsx的语法非常不熟悉，相关资料较少，花费时间较长。后续找到有总结较好的文档参考。参考文档
- 补充一些语法：
- 动态绑定多个class：
class={[upDownFlag.value ? '' : 'down', 'upDown']}
- 动态绑定单个class：
class={upDownFlag.value ? 'unshow' : ''}
- 动态绑定多个style：
style: { transform: `scale(${zoomSize.value}) rotate(${rotateDeg.value}deg)` }
- 动态绑定单个style：
style={`margin-bottom: ${fieldsGroupRef.value.length - 1 === groupIndex ? 0 : 24}px;`}
- slot除了参考文档以外的用法：
<FileOperation>
<img src={item.url} class="preview-img" /> //直接使用组件标签包裹住dom节点
</FileOperation>
- cloneVNode的语法（Vue.js官方文档没给说明）：
{cloneVNode(slots.default?.()[0], { //使用cloneVNode和slots语法，slot.default是个数组形式
style: { transform: `scale(${zoomSize.value}) rotate(${rotateDeg.value}deg)` },
})}
- img缩小后图片展示样式奇怪问题，可以使用object-fit属性，如果是图片作为背景图放在div中可以使用background-size属性。
- vue2有时候静态图片引入会显示不出来，是因为图片可能会被vue转成base64格式。使用require。Vue3和tsx中使用import引入，之后使用src={'引入组件的名字'}。
- 代码提交时，注意提交流程的规范，不要提交与本次无关的内容。
- 先写代码结构，再调css样式，样式命名规范可以参考Bem规范，注意scss中&的位置，熟悉scss语法，可以在less文件中定义全局变量。
- 抽离组件的思路多思考多问。
01/17-01/21 第三周
- 封装tag组件
- 封装search组件
- 封装swiper轮播图组件
过程遇到问题
封装组件遇到问题没有那么多，主要是因为有参考其他已经成熟的组件库的源代码。
周总结
1.理清了封装组件的基本思路，但是自己如果不参考他人去封装肯定会遗漏很多属性。了解了一些组件的最基本的结构。
2.看尤大大的博客，vue3马上要变成vue的默认版本了，最近也是体会到了setup语法糖的方便之处，还是要在工作中和课外多学习vue3的相关内容。
3.了解到了一些scss的相关语法，例如！default表示的是给变量设置默认值，如果后续没有再对该变量进行设置的的话，就保持默认值不变。
4.健康方面，注意身体，这周三感冒了之后，上班好难受，起不来，头疼还迷糊。
01/24-01/28 第四周
- 封装badge组件
- 封装tab组件
- 封装fab组件
过程遇到问题
1.封装tab组件时先开始参考uView组件库，因为结合了一些动画然后代码就看不懂了。之后参考的firstUI组件库，使用默认的scroll-to-view的思路去实现。
2.scroll-view隐藏滚动条问题。
3.关于flex属性的问题，有在总结文章。
周总结
1.组件库项目完成的差不多了，年后要使用封装好的组件去做一下uniapp页面了。
2.深入了解了flex属性的问题。
3.封装组件不能照搬人家的思路，要有自己的见解在里面。
4.周四周五有点浮躁哈哈，要放假了。第一个不回家的年，大家都新年快乐啊。虎虎生威。
02/07-02/11 第五周
- 解决封装fab组件剩余问题
- 开始画新项目的静态页面，完成了一个画面
过程遇到问题：
1.在动态改变悬浮按钮展开菜单的点击状态时，一直无法使用watch监听到数组中某个对象的active属性的变化，使用deep属性也不行，后来发现在更改item的active状态时，不是直接使用item.active = !item.active这种形式，而是使用e.xxx.active = !e.xxx.active，这样的写法无法监听到属性的变化，所以样式也不会动态改变。暂时没弄明白监听不到变化的原因，但是以后注意不再这么去写。
2.在做静态画面的时候引发的思考，为什么没flex布局只有align-self的属性，没有justify-self的属性？？？页面布局方式是三个块级元素并列显示，前两个靠左侧，中间间隔5px,最后一个在最右侧，最初想的是整体使用display：flex,justify-content:flex-start,此时三个块级元素会从画面左边开始挨到一起，之后的想法是将最后一个块级元素单独设置成flex-end，但是发现flex竟然没有justify-self属性，觉得很奇怪，因为毕竟有着align-self属性,之后这个问题有空会去研究下。之后使用其他方式完成此处布局，就将整体设置成justify-content:space-between,之后设置中间块级元素的margin-right属性设置为auto就可。
3.动态修改组件样式问题（在css中定义变量），目前在写文章总结。
周总结
1.节后的第一周上班，有点浑浑噩噩的感觉，但是还好前三天基本没人，也没新活分给我。所以还是很轻松的，虽然被一个问题卡住了一天半的时间。
2.估计接下来两周的活还是画画面，没有太大难度，但是要细致，尽量不漏掉或者写错样式。
3.春节期间没有学习，之后要慢慢开始回复学习的状态了。
02/14-02/18 第六周
- 完成四个静态页面的开发
遇到问题：
1.电脑硬盘坏了，找人来修，花了1.5天。
2.后来平均进度一天开发一个画面。
周总结
1.目前还是在画静态画面，因为有几个涉及表单的画面，目前组件库还没封装好，暂时先不用做，预计下周开发。
2.使用了多条件三目运算符，以前只用过单条件，就是嵌套的形式，很容易。
3.计算滚动区域面积时候，应该用100vh，而不是100%。
4.找了一套vue3视频看了一下，不是很好，还需要再换一套。
02/21-02/25 第七周
- 完成四个静态页面的开发
周总结
本周没遇到什么实质性问题，依旧是画静态画面，没什么过多要记录的问题。
02/28-03/04 第八周
- 熟悉整体项目的所有流程
- 开发静态可视化画面
遇到问题：
1.echart使用不熟悉，遇到很多问题，觉得官方文档写的也不是很清晰，属性很多，找起来很麻烦
2.可视化页面第一部分：文字倒影问题，网上说使用webkit-box-reflect属性，自己尝试之后发现无效果，周末在看一下。
3.可视化页面第二部分：数据表示的长条的长度暂时是写死的，后面需要设计个小小的算法动态计算。
4.第四部分的饼图，设计稿太小，引导线只能在数据的中心，导致只能缩小中间的饼。
5.第五部分的柱状图和折线图的混合，难点在于柱状图是3d效果的，需要在平面上实现3d效果。思路是使用三部分拼接起来实现。分别为前面，右边和上边，展示出立体效果。
配置柱状图的代码如下：
series: [
// 左边区域
{
name: '完成任务',
data: data,
type: 'bar',
barWidth: 10,
barGap: 200,
barCategoryGap: 200,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
10,
1,
0,
0,
[
{
offset: 0,
color: 'rgba(11, 93, 255, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(22, 182, 255, 1)', // 100% 处的颜色
},
],
false,
),
},
},
// barGap: 0
},
// 右边区域
{
name: '完成任务',
// type: 'pictorialBar',
type: 'bar',
barWidth: 6,
// symbol: 'path://M150 50 L130 130 L170 130 Z',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: 'rgba(0, 149, 255, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(108, 217, 255, 1)', // 100% 处的颜色
},
],
false,
),
},
},
barGap: 0,
data: data,
},
// 上边区域
{
name: '完成任务',
type: 'pictorialBar',
itemStyle: {
color: 'rgba(2, 130, 211, 1)',
},
symbol: 'path://M 50,0 l 70,20 z',
// symbol: 'path://M 0,0 l 80,0 l -20,40 l -80,0 z',
symbolSize: ['15', '10'],
symbolOffset: ['-1', '-2'], // 左右 ，上下
symbolRotate: 0,
symbolPosition: 'end',
data: data,
z: 3,
},
// 折线
{
data: data1,
name: '发布任务',
type: 'line',
yAxisIndex: 1,
symbolSize: 6, // 拐点圆大小
lineStyle: {
normal: {
color: '#ffca69',
width: 2,
},
},
itemStyle: {
borderWidth: 2,
borderColor: '#EE6666',
color: 'yellow',
},
},
],
- 可视化页面的第5部分是要完成一个地区的地图展示，踩了很多坑。 步骤是首先去阿里的一个网站上面，找到对应地图生成对应genJson文件下载到项目中。引入。
之后完成地图的开发，开发完之后需要在上面加入一些自定义图片和文字，很坑，我最初用的是
renderItem函数去自动生成，但是发现其中计算图片位置的api不能用，在官网中是使用api.crood方法，我在项目中使用就会报错,打印出来之后发现确实api上面没有crood方法。后来看了一下源码，估计是源码文件不同，官网上面对应的是，echart.min.js文件，本地不是，所以暂时不使用这个方法。因为项目中是固定八个点，所以做了一个位置数组给写死了，图片就能呆在地图上对应位置了，但是又出了一个问题！！！（可恶）加入图片后，悬浮效果就出了问题，感觉图片不止我给他设置得那么大，后面还有一个图层，导致光标都已经移出地图了，还是出tooltip。。。研究了好久也不知道怎么改，准备换个方法了，在里面加入散点图，把散点图的点变成图片。目前还在做。
7.可视化画面整体，想要做自适应，leader说让我做成vw和vh的形式，后来我发现有一个问题就是，如果对应分辨率变化，虽然可以画面填充满，但是画面整体会变形，变得很奇怪，最后做法是按照设计稿预设宽度和高度，所有的布局也都按照px去做，最后在整个画面的最外层套上一个盒子，通过计算比例，使用transfrom：scale()的属性将画面进行相对比例的变化。代码如下
//主页 引入对应ts文件
setup() {
// 适配处理
const { appRef, calcRate, windowDraw } = redraw();
// 生命周期
onMounted(() => {
// todo 屏幕适应
windowDraw();
calcRate();
});
return {
appRef,
};
},
//ts文件
import { ref } from 'vue';
export default function redraw() {
// * 指向最外层容器
const appRef = ref();
// * 定时函数
const timer = ref(0);
// * 默认缩放值
const scale = {
width: '1440',
height: '810',
};
// * 设计稿尺寸（px）
const baseWidth = 1440;
const baseHeight = 810;
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
const calcRate = () => {
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
if (appRef.value) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5);
scale.height = (window.innerHeight / baseHeight).toFixed(5);
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
} else {
// 表示更高
scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5);
scale.width = (window.innerWidth / baseWidth).toFixed(5);
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
}
}
};
const resize = () => {
clearTimeout(timer.value);
timer.value = setTimeout(() => {
calcRate();
}, 200);
};
// 改变窗口大小重新绘制
const windowDraw = () => {
window.addEventListener('resize', resize);
};
return {
appRef,
calcRate,
windowDraw,
};
}
周总结
- 本周整体上来讲还是忙碌的，也加了几天班，项目还没完全理解透彻，权限路由那里还是没看。
- 可视化大屏展示数据也是第一次做，收获很多。第一次使用echart画图，也是还没完全熟悉，但是已经比刚开始好很多了。
- 地图踩了很多坑，但也都是经验吧，我们leader他说他还没做过地图，反正都是宝贵的经验，继续努力积累。
- 下周是优化细节，加上动态展示数据，希望能把这个页面做的尽量完美，接近设计稿！
03/07-03/11 第九周
- 可视化大屏画面动态展示
- 三部分图标的tooltip
- 图标数据长度算法
- 优化细节展示
根据取得的接口传入不同数据，切换展示画面。处理了很多数据以及他们的格式。
遇到的问题：
1.异步问题，在setup语法糖里面，整体的流程是同步的，所以获取不到props异步传入来的属性，需要使用watch,观察到变化后再进行数据处理，注意：props的属性写法是，watch(()=>props.xxx,(newval,oldval)=>{ }),需要放在函数里面返回，不然可能会丢失响应式。观察不到变化。
2.tooltip自定义格式需要使用formatter返回html代码片段。
3.一个新的思路，滚动使用复制dom的方式实现的，给其中代码添加事件时候只有一半的dom可以触发。解决方法：使用事件代理，给外层父级div绑定事件，然后给每个dom节点自定义属性（vue的方法 data-xx:xx)之后使用e.target.dataset的方式取出，就可以处理对应事件了。
还未解决问题：
1.echart 设置了y轴的分割线之后和x轴的轴线之后，x轴线如果设置了透明度，y轴的0刻度的分隔线也会显示出来。
2. svg path画一个平行四边形。
周总结
1.本周完成了动态切换数据，了解了项目的接口调用流程，对之后开发很有帮助。
2.echart很不错，可以实现各种效果，现在自己也快入门了，很多属性也知道怎么用了。属性很全，有时候会漏看。还是要仔细阅读官方文档才能实现各种效果。
3.课后学习也在稳步进行中，继续加油，好好看看vue3，以及完成项目开发。增加项目经验。
03/14-03/18 第十周
- 立体柱状体封顶问题，使用svg画一个平行四边形
- 柱状图x轴轴线和y轴第一条分隔线重叠问题
- 轮播图加入预览功能
- 动态数据柱状图混合折线图，柱状图和折线图各自都是对应轴线的问题，比如轴线显示0-50，柱状图的柱子以自身数据为基准，对应的是0-1，导致柱状图数据才10，折线图30，柱状图的高度就超过了折线图。
- 加入年份显示对应数据
- 动态展示地图部分数据
解决方案：
1.第一个问题是因为画图的时候一直参照示例写的小写l这样代表的是相对坐标，不是绝对坐标，所以画不出正确图形，改成L之后再用一套坐标系里面就可以画出来了。
2.思路要学会变通，设计稿里面x轴轴线给的是白色，透明度0.25，所以后面的线就透出来了，只要把透明度改成1.换成对应的灰色就好了。
3.使用uni自带的api，在click里面触发。对于props的属性应该使用computed方法。
4.计算出折线图的最大最小值，让柱状图的基线最大值和最小值按照折线图的来，关于数据太小出现小数点的问题，将minInterval属性设置为1就好了。
周总结
1.收获几点，可以看一下解决方案，思路要开阔，学会变通。
2.包括一些a标签之类的，不能只记得click事件绑定。
3.这周要把教程的vue3新特性看完。
03/21-03/25 第十一周
本周主要是完成了bug的修正。
1.echart在退出画面之后在下次进入渲染两边的问题（本地环境无问题）。
2.地图chart点击图标也要出现tooltip的问题。
3.tooltip文字过长加省略号。
4.连续请求两次请求过快时，监听不到第二次请求数据的变化。
5.一些样式问题。
6.分离时间选择器和日期选择的逻辑关系。
7.完成了转正述职报告的ppt。
解决方案：
1.在unMounted阶段时候将echart卸载。
2.在时间选择器关闭的时候才发起请求，不是两个都有值就发请求，那样会发送两次请求（对应第四条）
周总结
1.一些问题要提前想好，问清楚，比如文字过长后显示成什么样，多问下业务，很多地方测试说不对，但是自己压根不知道这个需求。
2.在本地打包后可以提前看正式环境上大概什么样，可以调试只有正式环境上面出现的问题。
3.逻辑关系要想好，请求两次显然是不合理的。
4.继续学习vue3项目。准备转正答辩。
03/28-04/02 第十二周
六天班的一周
- 无缝滚动组件鼠标滚动功能的封装，了解了无缝滚动的原理
- 转正答辩，对于准备的答的不错，对于即兴发挥的做的不好。我还是更适合做有准备的工作。
- 大屏画面，这次做起来更加得心应手了，没有太多得问题
- 配置项目，上传git。
- 发票报销下次一定要弄好！
- 假期快乐！ ......持续更新
