空境界

<template>
    <div>

        <div class="mask full-page">
            <div class="mask-background"> </div>
            <div class="mask-slot">
                <slot />
            </div>
        </div>
    </div>

</template>

<template>
    <div class="animated fadeIn">

        <div class="flex-right">

            <date-picker
                :format="datetime.FormatDate"
                :title-format="datetime.FormatDate"
                :placeholder="_('w_DateSelectDates')"
                :range="true"
                :clearable="false"
                type="date"
                class="col-md-3"
                v-model="inputDatum.dateRange"
                @input="updateDateRange"

            >
                <template v-slot:sidebar="{ emit }">
                    <div style="text-align: left">
                        <button class="mx-btn mx-btn-text col-md-12" @click="selectToday(emit)">Today</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectYesterday(emit)">Yesterday</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLast7days(emit)">Last 7 days</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisWeek(emit)">This Week</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLastWeek(emit)">Last Week'</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisMonth(emit)">This Month</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectLastMonth(emit)">Last Month</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ1(emit)">Q1</button>
                        
                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ2(emit)">Q2</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ3(emit)">Q3</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectQ4(emit)">Q4</button>

                        <button class="mx-btn mx-btn-text col-md-12" @click="selectThisYear(emit)">This Year</button>
                    </div>
                </template>
            </date-picker>
        </div>
    </div>
</template>

最近轉職的培訓班真的越來越多，再來整理一波，主要是介紹付費的為主，免費的其實就是那些，可以參考介紹 轉職課程整理1

<template>
   <div>
      <b-col cols="6">
         <b-button
            variant="primary"
            @click="pdfExport"
         >
            <i class="fa fa-file-pdf-o"></i>
            &nbsp;
            Export PDF
         </b-button>
      </b-col>
   </div>
</template>

<template>
   <div>
      <p class="title-date" v-if="isTitle">Select Dates</p>
      <vue-ctk-date-time-picker
         :no-label="true"
         :range="true"
         :custom-shortcuts="shortcuts"
         formatted="YYYY/MM/DD"
         format="YYYy/MM/DD"
         disabled-dates="disabledDates"
         v-model="date"
         @is-hidden="validateDate"
         @validate="validateDate"
         id="range"
      >

      </vue-ctk-date-time-picker>
   </div>
</template>

歌好聽，劇好看，必推薦

1.取消縮進檢查、編輯器配置：
File > Settings >
Editor > Code Style >
取消Indents Detection和EditorConfig勾選

          interface IEnteredExitedSubtotal {
          Hour: number;
          Today: number;
          Total: number;
          TotalInTimeSection: number;
         }

         interface IInsideSubtotal {
          Total: number;
         }

         interface CameraData {
          Channel: number;
          EnteredSubtotal: IEnteredExitedSubtotal;
          ExitedSubtotal: IEnteredExitedSubtotal;
          InsideSubtotal: IInsideSubtotal;
          RuleName: string;
          UTC: number;
         }


         let data = `summary.Channel=123
summary.EnteredSubtotal.Hour=22
summary.EnteredSubtotal.Today=60
summary.EnteredSubtotal.Total=1769
summary.EnteredSubtotal.TotalInTimeSection=60
summary.ExitedSubtotal.Hour=19
summary.ExitedSubtotal.Today=52
summary.ExitedSubtotal.Total=1705
summary.ExitedSubtotal.TotalInTimeSection=52
summary.InsideSubtotal.Total=324
summary.RuleName=NumberStat
summary.UTC=1565870249`;

歌好聽！！

電影好看！！

CP可口好吃！！

台灣何時會上映阿？？

    // 注意：回傳值都為string格式，如果要日期格式，
        請使用 new Date(this.getDateCount);

    // 格式化日期
    formatDate(dateArg: any): string {
        const date = new Date(dateArg);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const formatMonth = month < 10 ? `0${month}` : month;
        const formatDay = day < 10 ? `0${day}` : day;

        return `${year}-${formatMonth}-${formatDay}`

// set Date to 00:00:00
DateToZero(value: Date): Date {
    let date = new Date(value.getTime());
    date.setHours(0, 0, 0, 0);
    return date;
}

// 小時
for (let i = 0; i < 25; i++) {
    const tempHour =
        i === 24 ? "00" : i < 10 ? "0" + i.toString() : i.toString();
    const tempValue =
        tempHour + ":00" + (i < 12 || i > 23 ? " am" : " pm");
    const tempObject = { value: i.toString(), text: tempValue };
    this.dayRanges.hours.push(tempObject);
}

// 分鐘
for (let i = 0; i < 60; i++) {
    const tempMinute =
        i === 60 ? "00" : i < 10 ? "0" + i.toString() : i.toString();
    const tempObject = { value: i.toString(), text: tempMinute };
    this.dayRanges.minutes.push(tempObject);
}

連動式下選單，分三部份

1. templeate

2. 資料結構

3. function

不使用套件

驗證網址：https://www.regextester.com/22

const ipRegex = 
/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)
{3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;

const portRegex = 
/^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|
65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;