00:00
哈喽,各位小伙伴们大家好,那么我们刚刚把销售组件这里的静态组件啊,已经给它完成了。当然啊,接下来呢,咱们要把其他的GS业务逻辑呢去给他完成。那首先说啊,先看一下子这个配分栏。比如说当老师选中的是销售额,那对于图表当中左侧这个标题啊,它显示的是销售额。那以及这里啊,它也显示的是销售额排名。那如果老师点击的是访问量,那你会发现。图表左侧的标题啊,变为访问量,以及这里的标题也是变为访问量。当然这里的数据呢,也进行了切换,对吧,当然这些数据呢,咱们呢,最后呢,再进行处理。那集咱看一下这那这里呢,有相应的这样的一个日历,可以有开始的日期和结束的日期。
01:04
对吧,那咱们呢,可以看一下,比如说你点击今日,那这里呢,就是显示显示今天的日子。那如果你点击的是本周,那这里呢,展示的就是本周的时间。那如果点击的是本月,那就是本月的时间头和尾嘛,对吧,以及本年。那所以说接下来呢,咱们要把这相应的业务啊给他完成。那回到咱们这里。那咱们呢,先完成这个keep分栏的这样的一个业务,比如说老师点击销售额,那这里和这里展示销售额。那如果我点击的是访问量,那这里和这里啊,应该展示的是访问量。那所以说对于table分栏,你点击的时候,这个数据是要收集。对吧,那所以说回到咱们的组建当中。
02:04
咱们呢,去找一下咱们的头部这配分栏。对吧,那咱们的其实啊,现在已经完成了数据的收集。对吧,那咱们呢,可以看一下子咱们的开发者工具,找到咱们的这个,呃,Cel组件看这。对吧,我点击的是访问量,那是不是收集的就是访问量,我点击的是这个销售额,是不是就是销售额,当然啊,咱们收集的数据啊,最好呢,别是汉字,咱呢给它转化成英文对吧?比如说这个叫做sell销售嘛,访问量咱们叫visit。对吧,V。那当然,那你现在收集的数据啊,就应该是这个英文了,那咱们呢,也是测试一下看这。对吧,啊好了,那咱们的得一点一点的来了,那也就是说默认应该是销售,那也就是。
03:06
对吧,那咱们的一点点来,那首先说你得琢磨了,那我现在点击的是这个访问量,那你页面当中这儿和这就应该显示的是访问量,那我点击销售额,那这儿和这儿展示的是不是应该就是销售额。对吧,其实这里好做对吧,因为这里呢,是右侧这里的一个文本。咱们可以看一下不就这了,对吧,那这个咱们可以怎么做呢?可以去计算一下子这个属性对吧,Computed comp computed。比如说老师能计算出一个新的属性,比如说叫做title。对吧,那这个老师呢,给他格式化一下子,那这个呢,是咱们的计算属性之哎标题。那就比如说啊,那咱们这呢,得有返回值return。
04:04
那如果你这点active name,如果它等等于,那应该返回的是字符串叫做销售额,那否则呢,那否则就应该是什么呀,是咱们的那个叫做访问量。对吧,访问量,那也就是说当你点击table栏的时候,它的数据会发生变化,每一次都会计算出一个title,要么是销售额,要么是访问量,那当然那这个数值呢,就可以在咱们的右侧的这个区域啊销售额对吧,给他替换替换为什么呢?Title。那咱们呢,可以保存一下,刷新一下去看一下子,如果访问量,你看是不是就访问量,如果是销售额,那是不是销售额。对吧,那接下来呢,就是咱们的这个图表左上角这个标题。那咱们呢,得看一下子,咱们图表的这个左上角这个标题啊,是在哪写的呢?是在market当中书写的,这不在这儿。
05:06
那也就是说,这里的这个值不应该是一个死的值了?对不?而且呢,你还要注意一件事,什么事呢?Monkey,它只是执行一次。对不就哪怕你这块写上这点title,你看老师比如说这给你替换一下子,就这我给你加上这个这点title,他也白扯。你看嘛,因为monkey它只是执行一次,虽然你的值发生变化了,但是monkey它只执行一次啊。所以说你在这里去搞咱们的这个。告诉咱们这个标题它指定是不行的,因为他只会执行几次,只会执行一次。对不,那所以说这玩意儿怎么办呢?这玩意儿很简单,你看啊咱们呢,可以怎么办呢?监听这个属性值的变化,比如说监听这个active或者监听title都可以,你看吗。
06:03
只要它的值发生变化的时候,那我重新去调用这个set option的方法,重新赋予它一个新的标题。所以说这块怎么办呢?咱们可以这么玩,咱们呢给它来一个叫做监听属性,比如说叫做watch。比如说你监听谁呢?监听title或者是active都可以。对吧,当它的值发生变化的时候,咱们可以打一个123,你看当它的值发生变化的时候,它会再次执行监听。对吧,那咱们就可以怎么办呢?就可以拿到呃,一叉的实力,让他再次调用set option赋予一个新的标题就行了。当然,你现在这里的E叉实力啊,是一个局部变量,它只能在monkey当中使用。那所以说啊,咱们呢,可以把一叉的实力啊,挂载到咱们组建实力的身上。
07:00
那你说这块呢,咱给他换一个写法,叫做this点什么,那这也一样,This点什么?对吧,那么当开头的值发生变化的时候,咱们的一叉的实例可以再次设置咱们的配置数据。也就是这。对吧,那这块呢,老师呢,写一下子就是重新。哎,重新修改咱们的这个图表的配置的数据,那就是this点啊my chance.set option。那么我只是覆盖它的标题,那就是title,对吧,它的test为什么呢,这点title。那这样呢,咱们呢,就可以完成图表当中这个标题的切换。对,不但这里呢,要注意一件事,Set option老师是调用了几次呢?调用了两次。对吧,那如果说有新的值,OK,新的值会替换老的值,那如果没有,那还是用以前的值。
08:06
所以说这里呢,要注意一件事,就是咱们的这个图表的配置的数据。对吧,可以再次修改。对吧,那么如果如果有新的数值,那你就用新的数值,那没有呢,没有其他没有新的数值还是用以前的。对吧,那所以说咱们不就完成了这里的相应的业务了吗。对吧,好了,那接下来咱们去完成这里。那这里啊,老师点击今日,那开始时间跟结束时间就应该是呃,今天。本周,那就是这周的周一到周日,本月,那就是这个月的第一天到最后一天,本年就是今年的第一天和最后一天。对不?当然呢,咱们呢,先不去完成这件事儿,咱们先完成一件事,什么事呢?就是收集这个日历的数据。
09:07
对吧,因为它有一个起始的时间跟结束的时间,那所以说咱们看一下子怎么去收集,咱们先找一下element UI怎么去收集这个日历的这样的一个时间。那咱们呢,去找到相应的这个组件,那咱们搜索一下的对吧,搜索一下。行,那咱们找一下子,找一下子这个date,这不这。对吧,那咱们来看一下它相应的API。看他能不能收集数据,应该是可以的,我记得是可以的,我搞model对吧,那类型是什么?是可以是数组,为什么是数组的,你琢磨琢磨它是不是有起始跟结数。对吧,那所以说啊,咱们呢,可以去收集这个日历的数据。找到这对吧,这咱给他来一个吧,叫做VG model,那这个老师呢,给他来个date。
10:05
对吧,那当然date咱们没有,那这块咱做一下笔记,这个是收集日历的数据,先把收集数据先给他搞定date。对吧,人要是个数组,那咱们先看一下子能不能收集到。对吧,随便点俩时间。对吧,那咱们的回到咱们的style组件当中,可不可以收集到,可以,但是他收集到这个时间呢,看着怪怪的,对吧,2021年是多少月18号对吧,多少月的13号。对吧,这玩意儿挺难看的,对吧,所以说呢,咱们的去可以去怎么可以去改变咱们,呃,收集这个数据的格式。它的其中呢,有一个属性,咱们找一下子。哎,叫做什么什么format啊,咱们找一下叫做value format可选的绑定值的类型,因为咱们现在进行数据双向双向绑定嘛,他们可以获取到,呃,就是你要求的格式的值叫value form。
11:09
它的格式呢,你可以看一下它。年,YYY4个Y小写的月。对吧,可以是一个M是两个M,就是前面有没有零对吧,以及日应该是day,所以说啊,那咱们的获取的数据的格式啊,咱们呢,可以调一下,因为它这个格式看着比较恶心。所以说咱们找到咱们的这个value format,就这。咱们去修改一下子收集到这个数据的格式,当然找到咱们的date。找一下这儿对吧。那他呢,咱们想要的是小写的年月和什么呀,和日。那咱们呢,当然这块跑偏了对吧,当然那咱们呢,还是得测试一下子,你收集到的数据是不是你想要的格式。
12:00
对吧,这是带有年月日的,那咱们呢,还是测试一定要记住多加测试。对吧,当然这块的宽度可能不够宽,咱们一会儿调一下样式,对吧?啊当然你看嘛,11月12日,12看不见了,八也看不见了,那所以说啊,咱们呢,去调一下咱们这个date的这个宽度,找一下date。这有个类名叫date,这吧,那咱给他来个傻子数吧。二黑虎,对吧?那咱们先看一下能不能收集到相应的数据,就是开始的时间跟结束的时间。对吧,这是可以。那接下来呢,你点击今日本周本月本年,那你无非替换这两个值,因为它数据上要绑定了嘛,那不就显示了。对吧,那所以说啊,你看咱们可以试一下子看这。比如说你点击的是今日,那咱来一个at click,那比如说咱们就叫做set。对,不,但是咱们现在没有这个方法,那可以回到底下,咱们呢,去写一个methods老师,先把没用的先给它得上这。
13:09
对吧。那这个呢,是叫做Saturday啊,就是今天啊,本本本天。对吧,哎,本贴那举个例子啊,你看比如说老师随便来一个数字cost,比如说咱们就叫做day吧。为什么呢?比如先写死,比如说1991年,哎十月。11日。对吧,那咱们呢,可以给它来一个,比如说叫Z点倍,它是个数组,而且数据双要绑定了,你看比如说老师传入两个day。对吧,开始跟结束都是本天,那你看当老师一点的时候,是不是就是这个值。当然你这里呢,你不能写此,那假如说今天是2021年10月11日,那明天就是12日,你这块不能写死。所以说怎么获取相关日期呢,那咱们呢,可以用一些插件。
14:03
这个插件呢,你可以用moment或者这个这个也挺好用的,叫d.JS啊,就是这个d.JS也挺好用的。对吧,还有那个叫moment都可以,那所以说这里呢,老师呢,就搞一下咱们去安装一下子,安装一下这个DGS。哎,当然市场当中利用moment moment应该听过,对吧,它也挺多的,当然咱们这里边呢,用一下b.DS吧。因此的杠杠,Save咱们的day JS。那老师呢,先带着你们先安装一下,那咱们一点点来先看怎么获取本篇。对不?那当然你需要引入,对不?Importt,这个叫day GS for谁呢?DG,当然如果对于DS玩的不溜的同学,可以看一下它相应的文档啊,这个没什么难度,你看比如说咱们的获取本天,那也就说DGS是一个函数。
15:04
对不,哎,打点for。对吧,就是你的,呃,编码格式,比如说YYY年,还有这个月,还有这个日和moment很像。对吧,那咱们先看一下子,是不是就是本天对吧,就今天,那咱们可以看一下。对吧,2021年11月23日就是本天。对不,所以说这样是可以获取到什么,获取到你今天啊是哪号,这样就可以展示了。那以及本周怎么去获取,本周,那当然咱们这里面呢,也得绑定个事件了,就这。叫site啊,这个写下click。对吧,这个叫做S的本周那就叫week吧,对吧,当然咱们目前呢,没有这个方法,那咱们呢,回到底下这那这个呢,就是本周。对吧,哎,本周that week。
16:01
那这里面怎么获取到本周呢?那这里面呢,咱们去看一下人家相应的这样的一个手册啊在哪呢?在这个取值这里。找一下关于周的,那咱们的得去找找对吧,本周日期看有没有。对吧,呃,这个是一到31,应该是这个月找哪天对吧,这不就周嘛,对吧,零到六,那零到六就是呃,星期日到星期呃六对吧,那大概咱知道看这。比如说获取本周第一天,那咱来一个count star等于什么呢?Day GS打点谁呢?打点我看他这个方法叫啥来着,叫做day。对吧,比如说一,那代表了啥,是星期一本周的,呃,星期一对吧,第2FORMAT。那这个呢,是YYY,呃,Y还有这个月还有这个日对吧,那当然呢,还有一个是什么呢?就是呃,这是周一,还有什么呢,周日,本周的周日,那就是几啊七呗。
17:07
对不,当然咱们得得测试啊,你这玩意儿你不可能,你说是就是咱们还是得打印一下子你看啊。本周本周的周一呢,是22号。对吧,周日是28 22~28,那咱们看一下。Council dialog。还有这个N。那咱们呢,去打印一下子这个相应的数值,你看一下子对不对啊,当然你用原生的那那个,呃,对的,内置构造函数也可以。对吧,这不22~28嘛,对吧,当然咱们用一些插件更方便一些,那所以说咱们这里呢,搞就好搞了,这点谁呀,这点date。对吧,它应该是一个数组,那有就是star和谁啊和这个嗯。对吧,那咱们呢,可以去看一下的,走你本周。
18:00
对吧,这是没问题,以及本月。那这里啊,咱们呢,给他再搞一个这啊at click。那这个呢,咱们就要Mo吧,NTH。当然咱们的也没有这个方法,那回到底下呢,你还是得搞一个。对吧,那这个呢是本月。本月呢,这里呢,老师呢,就不再带着你们看API了,如果说你想看API,可以看看它的这个文档,这玩意没啥难度,好吧,Star它等于什么呢?DGS对吧?第2STAR of这个月,呃,起始的第一天。对吧,第2FORMAT。那这个呢,是YYY。年,还有这个月,还有这个日,这个是本月的第一天,当然有star呢,就一定有end本月的最后一天。那咱也给他拿过来。那这个呢,咱们也叫了,什么呢?叫做end。
19:01
对吧,哎,这个叫做end。这是本月的最后一天,那应该是end of。对吧,那当然,那这个数组里面的东西呢,还是一样的。那咱们呢,保存一下,刷新去看一下,本月应该是11月1号到30号。对吧,那以及还有什么呢?相应的本年本年也是star和end of。那这块呢,咱呢也给他搞一个I click。对吧,那这个呢,叫做set year对吧,那当然啊,咱们的这呢,其实你给他拷贝一份就行了,Can c。这个呢,咱给他拿过来CTRLV,当然这个是本。本年,那当然这里呢,应该叫做year。对吧,那当然是本年的第一天夜。和本年的最后一天,那这也给它换成year。对吧,那这样不就完事了,咱们呢可以刷新,可以去看一下,当然你这里的做法呢,你可以采用内置的构造函数这个date对吧,或者moment,或者用老师这个date啊都可以。
20:10
对吧,那这样的一个功能不就实现了,对吧。
我来说两句