237 lines
8.6 KiB
Vue
237 lines
8.6 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]"
|
|
@update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
|
|
:label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
|
|
v-model="RowsColumns[0]" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]"
|
|
@update:model-value="update_row_col(1, model[1])" :options="options" :dense="true" :options-dense="true"
|
|
:label="$t('wall col')" /> </div><q-checkbox @update:model-value="send_off(1)"
|
|
v-model="RowsColumns[1]" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[2]"
|
|
@update:model-value="update_row_col(2, model[2])" :options="line_width_options" :dense="true" :options-dense="true"
|
|
:label="$t('line width')" /> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row" style="min-height: 40px;">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm">
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("line color") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input v-model="color[0]" :rules="['anyColor']">
|
|
<template v-slot:append>
|
|
<q-icon name="colorize" class="cursor-pointer" @click="index = 0">
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
<q-color v-model="color[0]" @change="submit" />
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row" style="min-height: 40px;">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm">
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("background color") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input v-model="color[1]" :rules="['anyColor']">
|
|
<template v-slot:append>
|
|
<q-icon name="colorize" class="cursor-pointer" @click="index = 1">
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
<q-color v-model="color[1]" @change="submit" />
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row" style="min-height: 40px;">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 q-pt-sm">
|
|
<q-item>
|
|
<q-item-section avatar class="head_1">
|
|
{{ $t("center circle color") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input v-model="color[2]" :rules="['anyColor']">
|
|
<template v-slot:append>
|
|
<q-icon name="colorize" class="cursor-pointer" @click="index = 2">
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
<q-color v-model="color[2]" @change="submit" />
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col-2"><q-checkbox class="q-pt-md" @update:model-value="send_off(2)" v-model="RowsColumns[2]" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.border {
|
|
border: 1px solid;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
|
import { defineComponent, ref, reactive, onBeforeUnmount } from "vue";
|
|
import { useStore } from "src/store";
|
|
import { useI18n } from "vue-i18n";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { json } from "body-parser";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentGridSettings",
|
|
components: {
|
|
vue3ResizeDrag
|
|
},
|
|
setup() {
|
|
let set = GlobalData.getInstance().getCurrentClient();
|
|
let $store = useStore();
|
|
let $t = useI18n();
|
|
const RowsColumns = reactive([false, false, false, false]);
|
|
const index = ref(0);
|
|
const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
|
|
let model = reactive([20, 40, 20]);
|
|
let options = ref([10, 20, 30, 40, 50, 60 ,80]);
|
|
let line_width_options = ref([2,4,6,8,10, 20, 30, 40, 50]);
|
|
const submit = () => {
|
|
switch (index.value) {
|
|
case 0:
|
|
set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
|
|
break;
|
|
case 1:
|
|
set?.SetBlendingOption("blending_grids_background_color", color[index.value]);
|
|
break;
|
|
case 2:
|
|
set?.SetBlendingOption("blending_grids_ellipse_line_color",color[index.value]);
|
|
break;
|
|
case 3:
|
|
//set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
const update_row_col = (type: number, value: number) => {
|
|
switch (type) {
|
|
case 0:
|
|
set?.SetBlendingOption("blending_grids_row", value + "");
|
|
break;
|
|
case 1:
|
|
set?.SetBlendingOption("blending_grids_column", value + "");
|
|
break;
|
|
case 2:
|
|
set?.SetBlendingOption("blending_grids_line_width", value + "");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
const send_off = (type: number) => {
|
|
setTimeout(() => {
|
|
switch (type) {
|
|
case 0:
|
|
set?.SetBlendingOption("blending_grids_show_row", RowsColumns[type] + "");
|
|
break;
|
|
case 1:
|
|
if (!RowsColumns[1]) RowsColumns[2] = false; RowsColumns[3] = false
|
|
set?.SetBlendingOption("blending_grids_show_column", RowsColumns[type] + "");
|
|
break;
|
|
case 2:
|
|
set?.SetBlendingOption("blending_grids_show_ellipse", RowsColumns[type] + "");
|
|
break;
|
|
case 3:
|
|
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, 100);
|
|
}
|
|
const use_server_config = () => {
|
|
let server_conf = JSON.parse($store.state.fusion_configuration).options
|
|
model[0] = server_conf.blending_grids_row ?? 20;
|
|
model[1] = server_conf.blending_grids_column ?? 40;
|
|
model[2] = server_conf.blending_grids_line_width ?? 6;
|
|
color[0] = server_conf.blending_grids_line_color ?? "#ffffff"
|
|
color[1] = server_conf.blending_grids_background_color ?? "#7f7f7f"
|
|
color[2] = server_conf.blending_grids_ellipse_line_color ?? "#0000ff"
|
|
RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
|
|
RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
|
|
RowsColumns[2] = server_conf.blending_grids_show_ellipse === "false" ? false : true
|
|
}
|
|
use_server_config()
|
|
|
|
onBeforeUnmount(() => {
|
|
set_sessionStorage()
|
|
});
|
|
const set_sessionStorage = () => {
|
|
let tmp = { RowsColumns: RowsColumns, color: color, model: model }
|
|
sessionStorage.GridSettings = JSON.stringify(tmp)
|
|
}
|
|
const get_sessionStorage = () => {
|
|
let tmp = JSON.parse(sessionStorage.GridSettings)
|
|
for (let index = 0; index < tmp.RowsColumns.length; index++) {
|
|
RowsColumns[index] = tmp.RowsColumns[index];
|
|
}
|
|
for (let index = 0; index < tmp.color.length; index++) {
|
|
color[index] = tmp.color[index];
|
|
}
|
|
for (let index = 0; index < tmp.model.length; index++) {
|
|
model[index] = tmp.model[index];
|
|
}
|
|
}
|
|
if (sessionStorage.GridSettings) get_sessionStorage()
|
|
return {
|
|
line_width_options,
|
|
model,
|
|
options,
|
|
submit,
|
|
RowsColumns,
|
|
index,
|
|
color,
|
|
update_row_col,
|
|
send_off
|
|
};
|
|
},
|
|
});
|
|
</script>
|