本系列纯粹为本人利用上班之余，先利用figma设计介面，并使用几种前端语言製作帮助上班效率的工具，语言包括html、css、javascript、Vue、scss(看css的排版不爽所以学来用)，接下来会一一记录开发工具的各种事件，但理所当然地会将一些公司不可对外公布的资讯资料做打马处理。

发想

最原始的查询介面简单来说就是没有介面，纯粹把所有资料以文字在浏览器上列印出来，并且查询方法是在网址更改需要查询的零件编号，难以区分各项资料内容之外也极度难以操作，并且在此期间在学习Vue框架，想要将所学以实际案例展现。

需求与介面设计

以往在使用的习惯都是以编号搜寻并排列，例如以日期先后、数量多寡排列顺序
输入端即设计为输入编号、选择排列目标以及查询按钮

在共同资料库已经建置完成的情况下，一次查询所得到的每一笔资料非常完整但不一定是我所需要的，必须要先清洗有需求的资料。
有需求的资料内容为:
1.厂区 2.产线 3.产品 4.种类 5.编号
6.日期 7.不良数 8.良数 9.OUT 10.总数
其中1~5为共同资料(基本都会是相同的)

所以在捞取并清洗资料后的呈现会设计成同厂区、同产线、同产品、同种类、同编号在不同日期的不良数、良数、OUT数与总数的列表

介面就这样?

对，就这样，不然还要多华丽。