2022-01-24 16:06:16 +08:00
|
|
|
|
<template>
|
2022-01-25 19:41:28 +08:00
|
|
|
|
<q-dialog
|
|
|
|
|
|
persistent
|
|
|
|
|
|
v-model="show_dialog"
|
|
|
|
|
|
@before-hide="resetData"
|
|
|
|
|
|
@keydown="
|
|
|
|
|
|
(evt) => {
|
2022-03-19 16:29:53 +08:00
|
|
|
|
if (!loading && evt.keyCode == 27) {
|
2022-01-25 19:41:28 +08:00
|
|
|
|
show_dialog = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
|
|
|
|
|
<q-form @submit="onSubmit">
|
|
|
|
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-auto text-h6">
|
|
|
|
|
|
{{ $t("clock") }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<q-space />
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
:loading="loading"
|
|
|
|
|
|
flat
|
|
|
|
|
|
round
|
|
|
|
|
|
icon="close"
|
|
|
|
|
|
color="red"
|
|
|
|
|
|
v-close-popup
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-tooltip>
|
|
|
|
|
|
{{ $t("close") }}
|
|
|
|
|
|
</q-tooltip>
|
|
|
|
|
|
</q-btn>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</q-card-section>
|
|
|
|
|
|
|
|
|
|
|
|
<q-separator />
|
|
|
|
|
|
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-card-section style="max-height: 68vh; width: 55vw" class="scroll">
|
2022-01-24 16:06:16 +08:00
|
|
|
|
<q-list>
|
|
|
|
|
|
<q-item v-if="false">
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("font name") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-input v-model="clock_entity.font_name" />
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
<q-item>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("clock type") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-select
|
|
|
|
|
|
v-model="clock_entity.type"
|
|
|
|
|
|
:options="[
|
|
|
|
|
|
{
|
|
|
|
|
|
label: $t('normal clock'),
|
|
|
|
|
|
value: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: $t('analog clock'),
|
|
|
|
|
|
value: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
]"
|
|
|
|
|
|
emit-value
|
|
|
|
|
|
map-options
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-select>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("font size") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
2022-05-25 16:52:05 +08:00
|
|
|
|
<q-input
|
|
|
|
|
|
v-model="clock_entity.font_size"
|
|
|
|
|
|
type="number"
|
|
|
|
|
|
lazy-rules
|
|
|
|
|
|
:rules="[
|
|
|
|
|
|
(val) =>
|
|
|
|
|
|
(val && val.toString().length > 0) ||
|
|
|
|
|
|
$t('Please type something'),
|
|
|
|
|
|
]"
|
2022-05-26 18:14:52 +08:00
|
|
|
|
>
|
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
|
<span>pt</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</q-input>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item>
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section class="q-mr-md">
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("font color") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-input
|
|
|
|
|
|
v-model="clock_entity.font_color"
|
|
|
|
|
|
:rules="['anyColor']"
|
|
|
|
|
|
>
|
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
|
<q-icon name="colorize" class="cursor-pointer">
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color v-model="clock_entity.font_color" />
|
|
|
|
|
|
</q-popup-proxy>
|
|
|
|
|
|
</q-icon>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</q-input>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("background color") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-input
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
v-model="clock_entity.background_color"
|
|
|
|
|
|
:rules="['anyColor']"
|
|
|
|
|
|
>
|
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
|
<q-icon name="colorize" class="cursor-pointer">
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color v-model="clock_entity.background_color" />
|
|
|
|
|
|
</q-popup-proxy>
|
|
|
|
|
|
</q-icon>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</q-input>
|
2022-05-19 11:35:58 +08:00
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{ $t("only normal clock support") }}</q-tooltip
|
|
|
|
|
|
>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
<q-item>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("date format") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-select
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
v-model="clock_entity.date_format"
|
|
|
|
|
|
:options="date_format_options"
|
|
|
|
|
|
emit-value
|
|
|
|
|
|
map-options
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-select>
|
2022-05-19 11:35:58 +08:00
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{ $t("only normal clock support") }}</q-tooltip
|
|
|
|
|
|
>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
|
2022-01-24 16:06:16 +08:00
|
|
|
|
<q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_1">
|
|
|
|
|
|
{{ $t("time format") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-select
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
v-model="clock_entity.time_format"
|
|
|
|
|
|
:options="time_format_options"
|
|
|
|
|
|
emit-value
|
|
|
|
|
|
map-options
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-select>
|
2022-05-19 11:35:58 +08:00
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{ $t("only normal clock support") }}</q-tooltip
|
|
|
|
|
|
>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
<q-item>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-item>
|
|
|
|
|
|
<q-item-section avatar class="head_2">
|
|
|
|
|
|
{{ $t("text") }}
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-input
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="
|
|
|
|
|
|
clock_entity.type == 0 && clock_entity.multiple_lines
|
|
|
|
|
|
"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
v-model="clock_entity.text"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
</q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
2022-05-19 11:35:58 +08:00
|
|
|
|
<q-tooltip
|
|
|
|
|
|
v-if="clock_entity.type == 0 && clock_entity.multiple_lines"
|
|
|
|
|
|
>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
{{
|
|
|
|
|
|
$t(
|
|
|
|
|
|
"the current property is only valid for single-line displays"
|
|
|
|
|
|
)
|
|
|
|
|
|
}}</q-tooltip
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
<q-item>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
<q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-checkbox
|
|
|
|
|
|
left-label
|
|
|
|
|
|
v-model="clock_entity.show_date"
|
|
|
|
|
|
:label="$t('date')"
|
|
|
|
|
|
/>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-checkbox
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
left-label
|
|
|
|
|
|
v-model="clock_entity.show_time"
|
|
|
|
|
|
:label="$t('time')"
|
2022-05-19 11:35:58 +08:00
|
|
|
|
>
|
|
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{ $t("only normal clock support time hiding") }}</q-tooltip
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-checkbox>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-checkbox
|
|
|
|
|
|
left-label
|
|
|
|
|
|
v-model="clock_entity.show_week"
|
|
|
|
|
|
:label="$t('week')"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
<q-checkbox
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-01-24 16:06:16 +08:00
|
|
|
|
v-model="clock_entity.background_transparent"
|
|
|
|
|
|
left-label
|
|
|
|
|
|
:label="$t('background transparent')"
|
2022-05-19 11:35:58 +08:00
|
|
|
|
>
|
|
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{ $t("only normal clock support") }}</q-tooltip
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-checkbox>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-checkbox
|
2022-05-19 11:35:58 +08:00
|
|
|
|
:disable="clock_entity.type == 2"
|
2022-05-18 18:41:42 +08:00
|
|
|
|
left-label
|
|
|
|
|
|
v-model="clock_entity.multiple_lines"
|
|
|
|
|
|
:label="$t('multiple lines')"
|
2022-05-19 11:35:58 +08:00
|
|
|
|
>
|
|
|
|
|
|
<q-tooltip v-if="clock_entity.type == 2">
|
|
|
|
|
|
{{
|
|
|
|
|
|
$t("only normal clock support multiple lines")
|
|
|
|
|
|
}}</q-tooltip
|
|
|
|
|
|
>
|
|
|
|
|
|
</q-checkbox>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-checkbox
|
|
|
|
|
|
v-model="clock_entity.bold"
|
|
|
|
|
|
left-label
|
|
|
|
|
|
:label="$t('font bold')"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</q-item-section>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-item>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<div class="q-mt-xs" v-if="clock_entity.type == 2">
|
|
|
|
|
|
<q-separator class="q-mb-md" />
|
|
|
|
|
|
<q-item>
|
2022-05-28 18:51:46 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
flat
|
|
|
|
|
|
no-caps
|
|
|
|
|
|
class="fit"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
'background-color': clock_entity.analog_second_color,
|
|
|
|
|
|
color:
|
|
|
|
|
|
getForegroundColor(clock_entity.analog_second_color) +
|
|
|
|
|
|
' !important',
|
|
|
|
|
|
}"
|
|
|
|
|
|
:label="$t('hour mark color')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color
|
|
|
|
|
|
v-model="clock_entity.analog_second_color"
|
|
|
|
|
|
/> </q-popup-proxy></q-btn
|
|
|
|
|
|
></q-item-section>
|
2022-05-18 18:41:42 +08:00
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
flat
|
|
|
|
|
|
no-caps
|
|
|
|
|
|
class="fit"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
'background-color':
|
|
|
|
|
|
clock_entity.analog_hour_pointer_color,
|
|
|
|
|
|
color:
|
|
|
|
|
|
getForegroundColor(
|
|
|
|
|
|
clock_entity.analog_hour_pointer_color
|
|
|
|
|
|
) + ' !important',
|
|
|
|
|
|
}"
|
|
|
|
|
|
:label="$t('hour pointer color')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color
|
|
|
|
|
|
v-model="clock_entity.analog_hour_pointer_color"
|
|
|
|
|
|
/> </q-popup-proxy></q-btn
|
|
|
|
|
|
></q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
flat
|
|
|
|
|
|
no-caps
|
|
|
|
|
|
class="fit"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
'background-color': clock_entity.analog_minute_color,
|
|
|
|
|
|
color:
|
|
|
|
|
|
getForegroundColor(clock_entity.analog_minute_color) +
|
|
|
|
|
|
' !important',
|
|
|
|
|
|
}"
|
|
|
|
|
|
:label="$t('minute mark color')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color
|
|
|
|
|
|
v-model="clock_entity.analog_minute_color"
|
|
|
|
|
|
/> </q-popup-proxy
|
|
|
|
|
|
></q-btn>
|
|
|
|
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
flat
|
|
|
|
|
|
no-caps
|
|
|
|
|
|
class="fit"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
'background-color':
|
|
|
|
|
|
clock_entity.analog_minute_pointer_color,
|
|
|
|
|
|
color:
|
|
|
|
|
|
getForegroundColor(
|
|
|
|
|
|
clock_entity.analog_minute_pointer_color
|
|
|
|
|
|
) + ' !important',
|
|
|
|
|
|
}"
|
|
|
|
|
|
:label="$t('minute pointer color')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color
|
|
|
|
|
|
v-model="clock_entity.analog_minute_pointer_color"
|
|
|
|
|
|
/> </q-popup-proxy></q-btn
|
|
|
|
|
|
></q-item-section>
|
|
|
|
|
|
<q-item-section>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
flat
|
|
|
|
|
|
no-caps
|
|
|
|
|
|
class="fit"
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
'background-color':
|
|
|
|
|
|
clock_entity.analog_second_pointer_color,
|
|
|
|
|
|
color:
|
|
|
|
|
|
getForegroundColor(
|
|
|
|
|
|
clock_entity.analog_second_pointer_color
|
|
|
|
|
|
) + ' !important',
|
|
|
|
|
|
}"
|
|
|
|
|
|
:label="$t('second pointer color')"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-popup-proxy
|
|
|
|
|
|
cover
|
|
|
|
|
|
transition-show="scale"
|
|
|
|
|
|
transition-hide="scale"
|
|
|
|
|
|
>
|
|
|
|
|
|
<q-color
|
|
|
|
|
|
v-model="clock_entity.analog_second_pointer_color"
|
|
|
|
|
|
/> </q-popup-proxy></q-btn
|
|
|
|
|
|
></q-item-section>
|
|
|
|
|
|
</q-item>
|
|
|
|
|
|
</div>
|
2022-01-24 16:06:16 +08:00
|
|
|
|
</q-list>
|
|
|
|
|
|
</q-card-section>
|
|
|
|
|
|
|
|
|
|
|
|
<q-separator />
|
|
|
|
|
|
<q-card-actions>
|
|
|
|
|
|
<q-space />
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
:loading="loading"
|
|
|
|
|
|
flat
|
|
|
|
|
|
:label="$t('close and reset')"
|
|
|
|
|
|
color="primary"
|
|
|
|
|
|
v-close-popup
|
|
|
|
|
|
/>
|
|
|
|
|
|
<q-btn
|
|
|
|
|
|
ref="accept"
|
|
|
|
|
|
flat
|
|
|
|
|
|
:label="$t('close and save')"
|
|
|
|
|
|
:loading="loading"
|
|
|
|
|
|
type="submit"
|
|
|
|
|
|
color="primary"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</q-card-actions>
|
|
|
|
|
|
</q-form>
|
|
|
|
|
|
</q-card>
|
|
|
|
|
|
</q-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.head_1 {
|
2022-05-18 18:41:42 +08:00
|
|
|
|
width: 25%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.head_2 {
|
|
|
|
|
|
width: 12%;
|
2022-01-24 16:06:16 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
import { defineComponent, ref, Ref, watch, computed } from "vue";
|
|
|
|
|
|
import { useStore } from "src/store";
|
|
|
|
|
|
import GlobalData from "src/common/GlobalData";
|
2022-05-18 18:41:42 +08:00
|
|
|
|
import { useQuasar, date as DateHelper } from "quasar";
|
2022-01-24 16:06:16 +08:00
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
|
|
import ClockWindowParamEntity from "src/entities/ClockWindowParamEntity";
|
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
|
name: "ComponentClockSignalSourceDialog",
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
|
|
|
|
|
|
setup() {
|
|
|
|
|
|
let $store = useStore();
|
|
|
|
|
|
let $q = useQuasar();
|
|
|
|
|
|
let $t = useI18n();
|
|
|
|
|
|
|
2022-05-18 18:41:42 +08:00
|
|
|
|
const now = Date.now();
|
|
|
|
|
|
const date_format_options = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: DateHelper.formatDate(now, "YYYY/MM/DD"),
|
|
|
|
|
|
value: "yyyy/MM/dd",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: DateHelper.formatDate(now, "YYYY-MM-DD"),
|
|
|
|
|
|
value: "yyyy-MM-dd",
|
|
|
|
|
|
},
|
2022-05-28 17:51:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
label: DateHelper.formatDate(now, "YYYY年MM月DD日"),
|
|
|
|
|
|
value: "yyyy年MM月dd日",
|
|
|
|
|
|
},
|
2022-05-18 18:41:42 +08:00
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
const time_format_options = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: DateHelper.formatDate(now, "HH:mm:ss"),
|
|
|
|
|
|
value: "hh:mm:ss",
|
|
|
|
|
|
},
|
2022-05-28 17:51:54 +08:00
|
|
|
|
{
|
|
|
|
|
|
label: DateHelper.formatDate(now, "HH时mm分ss秒"),
|
|
|
|
|
|
value: "hh时mm分ss秒",
|
|
|
|
|
|
},
|
2022-05-18 18:41:42 +08:00
|
|
|
|
]);
|
|
|
|
|
|
|
2022-01-24 16:06:16 +08:00
|
|
|
|
let show_dialog = ref(false);
|
|
|
|
|
|
let loading = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
let clock_entity: Ref<ClockWindowParamEntity> = ref(
|
|
|
|
|
|
new ClockWindowParamEntity()
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
let _resolove: any = null;
|
|
|
|
|
|
|
|
|
|
|
|
const initialize_properties = (json: string) => {
|
|
|
|
|
|
if (json) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const temp = JSON.parse(json);
|
2022-05-25 16:52:05 +08:00
|
|
|
|
|
|
|
|
|
|
for (const item of Object.keys(clock_entity.value)) {
|
|
|
|
|
|
if (typeof temp[item] != "undefined") {
|
|
|
|
|
|
(<any>clock_entity.value)[item] = temp[item];
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-01-24 16:06:16 +08:00
|
|
|
|
} catch {}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
show_dialog,
|
|
|
|
|
|
loading,
|
|
|
|
|
|
clock_entity,
|
2022-05-18 18:41:42 +08:00
|
|
|
|
date_format_options,
|
|
|
|
|
|
time_format_options,
|
|
|
|
|
|
|
2022-01-24 16:06:16 +08:00
|
|
|
|
showDialogAsync(options: any) {
|
|
|
|
|
|
if (_resolove) {
|
|
|
|
|
|
_resolove();
|
|
|
|
|
|
_resolove = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
show_dialog.value = true;
|
|
|
|
|
|
initialize_properties(options);
|
|
|
|
|
|
|
|
|
|
|
|
return new Promise((resolove) => {
|
|
|
|
|
|
_resolove = resolove;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
resetData() {
|
|
|
|
|
|
loading.value = false;
|
|
|
|
|
|
if (_resolove) {
|
|
|
|
|
|
_resolove();
|
|
|
|
|
|
_resolove = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
async onSubmit() {
|
|
|
|
|
|
loading.value = true;
|
|
|
|
|
|
try {
|
|
|
|
|
|
if (_resolove) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
clock_entity.value.font_size = parseInt(
|
|
|
|
|
|
clock_entity.value.font_size.toString()
|
|
|
|
|
|
);
|
|
|
|
|
|
_resolove(JSON.stringify(clock_entity.value));
|
|
|
|
|
|
} catch {
|
2022-06-27 16:51:10 +08:00
|
|
|
|
_resolove(null);
|
2022-01-24 16:06:16 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
show_dialog.value = false;
|
|
|
|
|
|
} catch {}
|
|
|
|
|
|
loading.value = false;
|
|
|
|
|
|
},
|
2022-05-18 18:41:42 +08:00
|
|
|
|
getForegroundColor(color: string) {
|
|
|
|
|
|
// rgbToHex(0, 51, 255) => "#0033ff"
|
|
|
|
|
|
function rgbToHex(r: any, g: any, b: any) {
|
|
|
|
|
|
return (
|
|
|
|
|
|
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//hexToRgb("#0033ff") => {r: 0, g: 51, b: 255}
|
|
|
|
|
|
//hexToRgb("#0033ff").g => 51
|
|
|
|
|
|
function hexToRgb(hex: any) {
|
|
|
|
|
|
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
|
|
|
|
|
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
|
|
|
|
|
hex = hex.replace(
|
|
|
|
|
|
shorthandRegex,
|
|
|
|
|
|
function (m: any, r: any, g: any, b: any) {
|
|
|
|
|
|
return r + r + g + g + b + b;
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
|
|
|
|
return result
|
|
|
|
|
|
? {
|
|
|
|
|
|
r: parseInt(result[1], 16),
|
|
|
|
|
|
g: parseInt(result[2], 16),
|
|
|
|
|
|
b: parseInt(result[3], 16),
|
|
|
|
|
|
}
|
|
|
|
|
|
: null;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114
|
|
|
|
|
|
function getGrayLevelFromRgb(r: any, g: any, b: any) {
|
|
|
|
|
|
return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// getGrayLevel('#167df0') => 0.4208352941176471
|
|
|
|
|
|
function getGrayLevel(hex: any) {
|
|
|
|
|
|
var rgb = hexToRgb(hex);
|
|
|
|
|
|
if (rgb) {
|
|
|
|
|
|
return getGrayLevelFromRgb(rgb.r, rgb.g, rgb.b);
|
|
|
|
|
|
}
|
|
|
|
|
|
return "#000000";
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function getColor(background_color: any) {
|
|
|
|
|
|
var grayLevel = getGrayLevel(background_color);
|
|
|
|
|
|
return grayLevel > 0.5 ? "#000000b3" : "#fff";
|
|
|
|
|
|
}
|
|
|
|
|
|
return getColor(color ?? "#000000");
|
|
|
|
|
|
},
|
2022-01-24 16:06:16 +08:00
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
