<template>
|
<div>
|
<div>
|
<el-space>
|
<el-text type="info">数据切片</el-text>
|
<el-checkbox-group
|
:model-value="dataSlice"
|
@update:model-value="(e) => emits('update:data-slice', e)"
|
size="default"
|
:min="1"
|
>
|
<el-space>
|
<el-checkbox value="1">溯源</el-checkbox>
|
<el-checkbox value="2">线索</el-checkbox>
|
<el-checkbox value="3">提示</el-checkbox>
|
</el-space>
|
</el-checkbox-group>
|
</el-space>
|
</div>
|
<div>
|
<el-space>
|
<el-text type="info">监测因子</el-text>
|
<el-checkbox-group
|
:model-value="factorType"
|
@update:model-value="(e) => emits('update:factor-type', e)"
|
size="default"
|
:min="1"
|
>
|
<!-- <el-space> -->
|
<el-checkbox
|
v-for="item in factorOptions"
|
:value="item.value"
|
:key="item.label"
|
>
|
{{ item.label }}
|
</el-checkbox>
|
<!-- </el-space> -->
|
</el-checkbox-group>
|
</el-space>
|
</div>
|
<div>
|
<el-space>
|
<el-text type="info">场景类型</el-text>
|
<el-checkbox-group
|
:model-value="sceneType"
|
@update:model-value="(e) => emits('update:scene-type', e)"
|
size="default"
|
:min="1"
|
>
|
<el-space>
|
<el-checkbox
|
v-for="item in sceneOptions"
|
:value="item.value"
|
:key="item.label"
|
>
|
{{ item.label }}
|
</el-checkbox>
|
</el-space>
|
</el-checkbox-group>
|
</el-space>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
/**
|
* 包含追踪信息的数据切片，包括线索、提示和溯源数据
|
* @type {Array}
|
*/
|
dataSlice: Array,
|
/**
|
* 监测因子类型数组
|
* @type {Array}
|
*/
|
factorType: Array,
|
/**
|
* 监测因子的可用选项
|
* @type {Array<{value: string, label: string}>}
|
*/
|
factorOptions: Array,
|
/**
|
* 用于过滤的场景类型数组
|
* @type {Array}
|
*/
|
sceneType: Array,
|
/**
|
* 场景选择的可用选项
|
* @type {Array<{value: string, label: string}>}
|
*/
|
sceneOptions: Array
|
});
|
|
const emits = defineEmits([
|
'update:data-slice',
|
'update:factor-type',
|
'update:scene-type'
|
]);
|
</script>
|
<style scoped>
|
:deep(.el-checkbox) {
|
--el-checkbox-text-color: white;
|
--main-color: #23dad1;
|
--el-checkbox-checked-text-color: var(--main-color);
|
--el-checkbox-checked-input-border-color: var(--main-color);
|
--el-checkbox-checked-bg-color: var(--main-color);
|
--el-checkbox-input-border-color-hover: var(--main-color);
|
|
--el-checkbox-disabled-checked-input-fill: var(--main-color);
|
--el-checkbox-disabled-checked-input-border-color: var(--main-color);
|
--el-checkbox-disabled-checked-icon-color: white;
|
margin-right: 6px;
|
/* height: initial; */
|
}
|
</style>
|
