w-web-perm 1.0.48 → 1.0.49

package/src/components/LayoutContentStaInfor.vue

@@ -0,0 +1,536 @@
+<template>
+    <div
+        style="height:100%;"
+        v-domresize
+        @domresize="resizePanel"
+        :changeLang="changeLang"
+    >
+
+        <div
+            style="height:100%; background:#f9fafb; overflow-y:auto;"
+            v-if="!firstLoading && !errMsg"
+        >
+
+            <div style="padding:20px 30px;">
+
+                <!-- 頁面標題 -->
+                <div class="mb-8">
+                    <div style="font-size:1.5rem; font-weight:600;">{{$t('mmStaInfor')}}</div>
+                </div>
+
+                <div class="space-y-8">
+
+                    <!-- 事件發生頻率區塊 -->
+                    <div>
+                        <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-200">
+                            <div class="pb-2 flex items-center font-semibold text-gray-700">
+                                <WIcon :icon="mdiChartBoxOutline" :size="24" :color="'currentColor'" :colorHover="'currentColor'" class="text-purple-600 mr-2"></WIcon>
+                                <span class="text-lg">{{$t('staEventTitle')}}</span>
+                            </div>
+                            <!-- 控制區: 事件多選 checklist + 全選/清除 + 全部加總 + 時間分組 -->
+                            <div class="staCtrl">
+
+                                <!-- 事件多選 checklist -->
+                                <div class="staEventSel" v-if="allEvents.length > 0">
+                                    <span class="text-sm font-medium text-gray-700 mr-2">{{$t('staSelectEvents')}}</span>
+                                    <div class="staEventList">
+                                        <label
+                                            v-for="ev in allEvents"
+                                            :key="ev"
+                                            class="staEventItem"
+                                        >
+                                            <input type="checkbox" :value="ev" v-model="selectedEvents" @change="updateChartsDebounce" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
+                                            <span class="ml-1 text-sm text-gray-900">{{ev}}</span>
+                                        </label>
+                                    </div>
+                                    <div class="staEventBtns">
+                                        <button type="button" @click="selectAllEvents" class="staBtn">{{$t('staSelectAll')}}</button>
+                                        <button type="button" @click="clearEvents" class="staBtn">{{$t('staClear')}}</button>
+                                    </div>
+                                </div>
+
+                                <!-- 全部加總 + 時間分組 -->
+                                <div class="staCtrlRight">
+                                    <div class="flex items-center">
+                                        <input id="staShowTotal" type="checkbox" v-model="showTotal" @change="updateChartsDebounce" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
+                                        <label for="staShowTotal" class="ml-2 text-sm font-medium text-gray-900">{{$t('staTotal')}}</label>
+                                    </div>
+                                    <select v-model="timeInterval" @change="changeTimeInterval" class="border rounded px-2 py-1 text-sm">
+                                        <option value="hr">{{$t('staTimeHr')}}</option>
+                                        <option value="day">{{$t('staTimeDay')}}</option>
+                                    </select>
+                                </div>
+
+                            </div>
+
+                            <WEchartsVueDyn
+                                style="width:100%; height:300px;"
+                                :options="optEvent"
+                                v-if="optEvent"
+                            ></WEchartsVueDyn>
+
+                            <div
+                                style="padding:0px; font-size:0.8rem; color:#777;"
+                                v-else
+                            >
+                                {{$t('staNoData')}}
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <!-- 事件統計表區塊 -->
+                    <div>
+                        <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-200">
+                            <div class="pb-2 flex items-center font-semibold text-gray-700">
+                                <WIcon :icon="mdiTableLarge" :size="24" :color="'currentColor'" :colorHover="'currentColor'" class="text-purple-600 mr-2"></WIcon>
+                                <span class="text-lg">{{$t('staTableTitle')}}</span>
+                            </div>
+
+                            <div v-if="eventTable.length > 0" class="overflow-x-auto relative shadow-md mt-2">
+                                <table class="w-full text-sm text-left text-gray-500 border-collapse">
+                                    <thead class="text-xs text-gray-700 bg-gray-50">
+                                        <tr>
+                                            <th scope="col" class="py-3 px-6 border border-solid border-gray-200">{{$t('staColEvent')}}</th>
+                                            <th scope="col" class="py-3 px-6 border border-solid border-gray-200">{{$t('staColLast1Day')}}</th>
+                                            <th scope="col" class="py-3 px-6 border border-solid border-gray-200">{{$t('staColLast8Hour')}}</th>
+                                            <th scope="col" class="py-3 px-6 border border-solid border-gray-200">{{$t('staColLast4Hour')}}</th>
+                                            <th scope="col" class="py-3 px-6 border border-solid border-gray-200">{{$t('staColLast1Hour')}}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="(row, index) in displayEventTable" :key="index" class="hover:bg-gray-50 transition-colors">
+                                            <td class="py-4 px-6 border border-solid border-gray-200">{{ row.event }}</td>
+                                            <td class="py-4 px-6 border border-solid border-gray-200">{{ formatNumber(row.last1Day) }}</td>
+                                            <td class="py-4 px-6 border border-solid border-gray-200">{{ formatNumber(row.last8Hour) }}</td>
+                                            <td class="py-4 px-6 border border-solid border-gray-200">{{ formatNumber(row.last4Hour) }}</td>
+                                            <td class="py-4 px-6 border border-solid border-gray-200">{{ formatNumber(row.last1Hour) }}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+
+                            <div
+                                style="padding:0px; font-size:0.8rem; color:#777;"
+                                v-else
+                            >
+                                {{$t('staNoData')}}
+                            </div>
+
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+        <template v-else>
+            <div
+                style="padding:10px 15px; font-size:0.8rem;"
+                v-if="firstLoading"
+            >
+                {{$t('waitingData')}}
+            </div>
+            <div
+                style="padding:10px 15px; font-size:0.8rem;"
+                v-if="errMsg"
+            >
+                {{errMsg}}
+            </div>
+        </template>
+
+    </div>
+</template>
+
+<script>
+import ot from 'dayjs'
+import get from 'lodash-es/get.js'
+import map from 'lodash-es/map.js'
+import size from 'lodash-es/size.js'
+import keys from 'lodash-es/keys.js'
+import union from 'lodash-es/union.js'
+import omit from 'lodash-es/omit.js'
+import sortBy from 'lodash-es/sortBy.js'
+import reverse from 'lodash-es/reverse.js'
+import debounce from 'wsemi/src/debounce.mjs'
+import isearr from 'wsemi/src/isearr.mjs'
+import WEchartsVueDyn from 'w-component-vue/src/components/WEchartsVueDyn.vue'
+import { mdiChartBoxOutline, mdiTableLarge } from '@mdi/js/mdi.js'
+import WIcon from 'w-component-vue/src/components/WIcon.vue'
+
+
+export default {
+    components: {
+        WEchartsVueDyn,
+        WIcon,
+    },
+    props: {
+        drawer: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function() {
+        return {
+
+            mdiChartBoxOutline,
+            mdiTableLarge,
+
+            dbc: debounce(300),
+
+            panelWidth: 100,
+            panelHeight: 100,
+
+            firstLoading: true,
+            errMsg: '',
+
+            timeLength: 7,
+            timeInterval: 'hr',
+
+            selectedEvents: [],
+            showTotal: false,
+
+            freqEvent: [],
+
+            optEvent: null,
+
+            eventTable: [],
+
+        }
+    },
+    mounted: function() {
+        // console.log('mounted')
+
+        let vo = this
+
+        //firstLoading, errMsg
+        vo.firstLoading = true
+        vo.errMsg = ''
+
+        //getAndRelaData
+        vo.getAndRelaData()
+            .catch((err) => {
+                console.log(err)
+                vo.errMsg = vo.$t('getDataError')
+            })
+            .finally(() => {
+                vo.firstLoading = false
+            })
+
+    },
+    computed: {
+
+        lang: function() {
+            let vo = this
+            return get(vo, `$store.state.lang`, '')
+        },
+
+        changeLang: function() {
+            let vo = this
+            let lang = vo.lang
+            vo.updateChartsDebounce(lang)
+            return ''
+        },
+
+        //allEvents: 從 freqEvent 各桶 data 取 event 名 union (排除 count), 排序
+        allEvents: function() {
+            let vo = this
+            let evs = []
+            map(vo.freqEvent, (entry) => {
+                let evNames = keys(omit(get(entry, 'data', {}), 'count'))
+                evs = union(evs, evNames)
+            })
+            return evs.sort()
+        },
+
+        //displayEventTable: 後端已依 last1Day 降序, 前端保險再 sortBy last1Day desc
+        displayEventTable: function() {
+            let vo = this
+            return reverse(sortBy(vo.eventTable.slice(), 'last1Day'))
+        },
+
+    },
+    methods: {
+
+        resizePanel: function(msg) {
+            // console.log('methods resizePanel', msg)
+
+            let vo = this
+
+            //panelWidth, panelHeight
+            vo.panelWidth = msg.snew.offsetWidth
+            vo.panelHeight = msg.snew.offsetHeight
+
+        },
+
+        genOpt: function(title, arr, keysPick) {
+            let vo = this
+
+            //check
+            if (size(arr) === 0) {
+                return null
+            }
+
+            //keysPick to array
+            if (!isearr(keysPick)) {
+                keysPick = [keysPick]
+            }
+
+            //colors
+            let colors = [
+                '#3b82f6', // blue-500
+                '#ef4444', // red-500
+                '#10b981', // emerald-500
+                '#f97316', // orange-500
+                '#8b5cf6', // violet-500
+                '#6366f1', // indigo-500
+                '#eab308', // yellow-500
+                '#ec4899', // pink-500
+                '#14b8a6', // teal-500
+                '#a855f7', // purple-500
+            ]
+            function getColor(k) {
+                return colors[k % colors.length]
+            }
+
+            //getName: count 系列顯示為「全部」, 其餘 event 名照原字串
+            let getName = (valueKey) => {
+                if (valueKey === 'count') {
+                    return vo.$t('staTotal')
+                }
+                return valueKey
+            }
+
+            //series: 折線圖, 每個 keysPick 一條系列, 缺值補 0
+            let series = map(keysPick, (valueKey, k) => {
+                let name = getName(valueKey)
+                let color = getColor(k)
+                return {
+                    name,
+                    type: 'line',
+                    smooth: true,
+                    data: map(arr, item => get(item, `data.${valueKey}`, 0)),
+                    itemStyle: {
+                        color,
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                }
+            })
+
+            //formatX: hr 顯示 MM/DD HH:mm, day 顯示 MM/DD
+            let formatX = 'MM/DD'
+            if (vo.timeInterval === 'hr') {
+                formatX = 'MM/DD\nHH:mm'
+            }
+
+            //opt
+            let opt = {
+                title: {
+                    text: title,
+                    show: false, // 不顯示標題，由組件的HTML提供
+                },
+                tooltip: {
+                    trigger: 'axis',
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    show: true,
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: map(arr, item => ot(item.time).format(formatX)),
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series,
+            }
+            return opt
+        },
+
+        grStaEvent: async function() {
+            let vo = this
+
+            //getStaEvent
+            await vo.$fapi.getStaEvent(vo.timeLength, vo.timeInterval)
+                .then((res) => {
+                    // console.log('getStaEvent(freqEvent)', res)
+                    vo.freqEvent = res
+                    //首次資料載入後 selectedEvents 為空 → 預設全選
+                    if (size(vo.selectedEvents) === 0) {
+                        vo.selectedEvents = vo.allEvents.slice()
+                    }
+                    vo.updateCharts()
+                })
+                .catch((err) => {
+                    console.log('getStaEvent catch', err)
+                    throw err
+                })
+
+        },
+
+        grStaEventTable: async function() {
+            let vo = this
+
+            //getStaEventTable
+            await vo.$fapi.getStaEventTable()
+                .then((res) => {
+                    // console.log('getStaEventTable(eventTable)', res)
+                    vo.eventTable = res
+                })
+                .catch((err) => {
+                    console.log('getStaEventTable catch', err)
+                    throw err
+                })
+
+        },
+
+        getAndRelaData: async function() {
+            let vo = this
+
+            //grStaEvent
+            await vo.grStaEvent()
+
+            //grStaEventTable
+            await vo.grStaEventTable()
+
+        },
+
+        updateCharts: function() {
+            let vo = this
+
+            //ksEvent: showTotal 時前置 count 加總線, 其後接所選各 event (各一條系列)
+            let ksEvent = [
+                ...(vo.showTotal ? ['count'] : []),
+                ...vo.selectedEvents,
+            ]
+
+            //optEvent
+            vo.optEvent = vo.genOpt(vo.$t('staEventTitle'), vo.freqEvent, ksEvent)
+
+        },
+
+        updateChartsDebounce: function() {
+            let vo = this
+            vo.dbc(() => {
+                vo.updateCharts()
+            })
+        },
+
+        selectAllEvents: function() {
+            let vo = this
+            vo.selectedEvents = vo.allEvents.slice()
+            vo.updateChartsDebounce()
+        },
+
+        clearEvents: function() {
+            let vo = this
+            vo.selectedEvents = []
+            vo.updateChartsDebounce()
+        },
+
+        formatNumber: function(num) {
+            if (num === null || num === undefined) {
+                return 0
+            }
+            return num.toLocaleString()
+        },
+
+        changeTimeInterval: function() {
+            let vo = this
+
+            //切換時間分組須重新向後端取數據 (hr/day 對應不同 time 粒度)
+            vo.firstLoading = true
+            vo.errMsg = ''
+            vo.getAndRelaData()
+                .catch((err) => {
+                    console.log(err)
+                    vo.errMsg = vo.$t('getDataError')
+                })
+                .finally(() => {
+                    vo.firstLoading = false
+                })
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+/* === Tailwind utility (非響應式) 同名定義: LayoutContentStaInfor; 由實際 Tailwind v3 產生規則抽出, 與 CDN 逐字一致 === */
+.bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
+.bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); }
+.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
+.border { border-width: 1px; }
+.border-collapse { border-collapse: collapse; }
+.border-solid { border-style: solid; }
+.border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); }
+.border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); }
+.flex { display: flex; }
+.focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.h-4 { height: 1rem; }
+.hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); }
+.items-center { align-items: center; }
+.justify-end { justify-content: flex-end; }
+.mb-8 { margin-bottom: 2rem; }
+.ml-2 { margin-left: 0.5rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mt-2 { margin-top: 0.5rem; }
+.overflow-x-auto { overflow-x: auto; }
+.p-5 { padding: 1.25rem; }
+.pb-2 { padding-bottom: 0.5rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.relative { position: relative; }
+.rounded { border-radius: 0.25rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
+.space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); }
+.space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); }
+.text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); }
+.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
+.text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); }
+.text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }
+.text-left { text-align: left; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-purple-600 { --tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity, 1)); }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.w-4 { width: 1rem; }
+.w-full { width: 100%; }
+
+/* === 控制區 (事件多選 checklist + 全部加總 + 時間分組), RWD flex-wrap === */
+.staCtrl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; }
+.staEventSel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
+.staEventList { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
+.staEventItem { display: inline-flex; align-items: center; cursor: pointer; }
+.staEventBtns { display: inline-flex; align-items: center; gap: 6px; }
+.staBtn { font-size: 0.8rem; color: rgb(37 99 235); border: 1px solid rgb(209 213 219); border-radius: 0.25rem; padding: 2px 8px; background: #fff; cursor: pointer; }
+.staBtn:hover { background: rgb(243 244 246); }
+.staCtrlRight { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
+.mr-2 { margin-right: 0.5rem; }
+.ml-1 { margin-left: 0.25rem; }
+</style>

package/src/components/LayoutContentTargets.vue

@@ -39,6 +39,7 @@
 
             <!-- 功能區 -->
             <div
+                data-fmid="targets-toolbar"
                 style="padding:5px; border-top:1px solid #ddd; display:flex; align-items:center;"
                 _v-if="showIsEditable || isEditable"
             >
@@ -185,6 +186,7 @@
                         :iconColor="'#eee'"
                         :iconColorHover="'#fff'"
                         :shadow="false"
+                        :promiseUnlock="true"
                         @click="saveTargets"
                     ></WButtonCircle>
 
@@ -822,20 +824,28 @@ export default {
 
         },
 
-        saveTargets: function() {
-            // console.log('method saveTargets')
+        saveTargets: function(msg) {
 
             let vo = this
 
-            async function core() {
-                let errTemp = null
+            //第一行立刻釋放按鈕視覺鎖
+            msg.pm.resolve()
 
-                //show loading
-                vo.$ui.updateLoading(true)
+            //fire-and-forget, 不 await
+            vo.doSaveTargets()
 
-                //check
+        },
+
+        doSaveTargets: function() {
+            // console.log('method doSaveTargets')
+
+            let vo = this
+
+            async function core() {
+
+                //1) 同步檢測 (在開 loading 之前)
                 if (isestr(vo.isError)) {
-                    vo.$alert(`${vo.isError}`, { type: 'error' })
+                    await vo.$dg.showCheckYes(`${vo.isError}`)
                     return
                 }
 
@@ -844,35 +854,34 @@ export default {
 
                 //check
                 if (size(rows) === 0) {
-                    vo.$alert(`${vo.$t('targetAddEmpty')}`, { type: 'error' })
+                    await vo.$dg.showCheckYes(`${vo.$t('targetAddEmpty')}`)
                     return
                 }
 
-                //updateTargets
+                //2) 確定打 API 才開 loading
+                vo.$ui.updateLoading(true)
+
+                //3) updateTargets, 各自 catch + 旗標短路
+                let okSave = false
                 await vo.$fapi.updateTargets(rows)
-                    .catch((err) => {
-                        errTemp = err
+                    .then(() => { okSave = true })
+                    .catch(async (err) => {
+                        vo.$ui.updateLoading(false) //showCheckYes 前關 loading（modal 阻斷期間避免 loading 疊在底下）
+                        await vo.$dg.showCheckYes(`${vo.$t('targetSaveTargetsFail')}: ${vo.$tErr(err)}`)
                     })
-
-                //check
-                if (errTemp !== null) {
-                    vo.$alert(`${vo.$t('targetSaveTargetsFail')}: ${errTemp}`, { type: 'error' })
-                    return
-                }
+                if (!okSave) return
 
                 //isModified
                 vo.isModified = false
 
-                //alert
-                vo.$alert(vo.$t('targetSaveTargetsSuccess'))
+                //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
+                vo.$ui.updateLoading(false)
+                await vo.$dg.showCheckYes(vo.$t('targetSaveTargetsSuccess'), { type: 'success' })
 
             }
 
             //core
             core()
-                // .then((res) => {
-                //     console.log('then', res)
-                // })
                 .catch((err) => {
                     console.log('catch', err)
                     vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })