panbaolin/SourceTermAnalysisSystem_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据分析，时间最后一刻的数据

Browse Source
This commit is contained in:
冯少康 2026-08-04 09:28:33 +08:00
parent 3e32e1a383
commit aaab4fc984
1 changed files with 220 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

372
src/pages/sjfx/one/index.vue
View File

@ -1,27 +1,34 @@
<script setup lang='ts'> <script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'; import type { FormInstance, FormRules } from "element-plus";
import { Search } from '@element-plus/icons-vue'; import { Search } from "@element-plus/icons-vue";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ElMessage } from 'element-plus'; import { ElMessage } from "element-plus";
import { ref } from 'vue'; import { ref } from "vue";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import JulianDate from '@/gis/common/clock/JulianData/JulianDate'; import JulianDate from "@/gis/common/clock/JulianData/JulianDate";
import { initMap2D } from '@/gis/ol/map'; import { initMap2D } from "@/gis/ol/map";
import { removeClockOnTickEvent, setAnimationTime, setClockOnTickEvent, setcurrentTime, setMultiplier, setShouldAnimate } from '@/gis/ol/olClock'; import {
import { SjfxPointHandle } from '@/gis/ol/olSJFX'; removeClockOnTickEvent,
import MapRightMenuEvent from '@/layout/Container/mapRightMenu.vue'; setAnimationTime,
import { getSampleMonitor } from '@/utils/axios/sjfx'; setClockOnTickEvent,
setcurrentTime,
setMultiplier,
setShouldAnimate,
} from "@/gis/ol/olClock";
import { SjfxPointHandle } from "@/gis/ol/olSJFX";
import MapRightMenuEvent from "@/layout/Container/mapRightMenu.vue";
import { getSampleMonitor } from "@/utils/axios/sjfx";
const { t } = useI18n(); const { t } = useI18n();
// gis地图功能实例存储 // gis地图功能实例存储
const sjfxPointHandle = ref<SjfxPointHandle | null>(null); const sjfxPointHandle = ref<SjfxPointHandle | null>(null);
const sampleTypeList = ref<any>([ const sampleTypeList = ref<any>([
{ label: '颗粒物', value: 'P' }, { label: "颗粒物", value: "P" },
{ label: '惰性气体', value: 'B' }, { label: "惰性气体", value: "B" },
]); ]);
const dataSourceList = ref<any>([ const dataSourceList = ref<any>([
{ label: '自动处理', value: '1' }, { label: "自动处理", value: "1" },
{ label: '交互分析', value: '2' }, { label: "交互分析", value: "2" },
]); ]);
const form = ref<any>({ const form = ref<any>({
// sampleType: 'P', // sampleType: 'P',
@ -32,16 +39,26 @@ const form = ref<any>({
}); });
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const rules = reactive<FormRules<any>>({ const rules = reactive<FormRules<any>>({
sampleType: [{ required: true, message: '请选择样品类型', trigger: 'change' }], sampleType: [
dataSource: [{ required: true, message: '请选择数据来源', trigger: 'change' }], { required: true, message: "请选择样品类型", trigger: "change" },
createTime: [{ required: true, message: '请选择创建时间范围', trigger: 'change', validator: (rule, value, callback) => { ],
if (!value || value.length === 0) { dataSource: [
callback(new Error('请选择创建时间范围')); { required: true, message: "请选择数据来源", trigger: "change" },
} ],
else { createTime: [
callback(); {
} required: true,
} }], message: "请选择创建时间范围",
trigger: "change",
validator: (rule, value, callback) => {
if (!value || value.length === 0) {
callback(new Error("请选择创建时间范围"));
} else {
callback();
}
},
},
],
}); });
interface TimeListData { interface TimeListData {
@ -55,7 +72,7 @@ interface StationBaseData {
lon: string; lon: string;
lat: string; lat: string;
} }
const searchResultBaseData = ref<StationBaseData[]>([]); const searchResultBaseData = ref<StationBaseData[]>([]);
// 滑块数据 // 滑块数据
const sliderValue = ref(0); const sliderValue = ref(0);
@ -63,39 +80,35 @@ const sliderStart = ref<dayjs.Dayjs | null>(null);
const sliderEnd = ref<dayjs.Dayjs | null>(null); const sliderEnd = ref<dayjs.Dayjs | null>(null);
const sliderMarks = computed(() => { const sliderMarks = computed(() => {
const obj: Record<number, string> = {}; const obj: Record<number, string> = {};
if (!sliderStart.value || !sliderEnd.value) if (!sliderStart.value || !sliderEnd.value) return obj;
return obj;
const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0); const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
// 计算刻度间隔：总天数越多，间隔越大（确保最多显示10个刻度，避免重叠） // 计算刻度间隔：总天数越多，间隔越大（确保最多显示10个刻度，避免重叠）
const interval = Math.max(Math.ceil(totalDays / 10), 1); // 最小间隔为1 const interval = Math.max(Math.ceil(totalDays / 10), 1); // 最小间隔为1
for (let i = 0; i <= totalDays; i++) { for (let i = 0; i <= totalDays; i++) {
// 只显示间隔倍数的刻度（如i=0,3,6...） // 只显示间隔倍数的刻度（如i=0,3,6...）
if (i % interval === 0) { if (i % interval === 0) {
const date = sliderStart.value.add(i, 'day'); const date = sliderStart.value.add(i, "day");
obj[i] = date.format('MM-DD'); // 简化日期格式（只显示月-日，节省空间） obj[i] = date.format("MM-DD"); // 简化日期格式（只显示月-日，节省空间）
} }
} }
return obj; return obj;
}); });
const sliderMax = computed(() => { const sliderMax = computed(() => {
if (!sliderStart.value || !sliderEnd.value) if (!sliderStart.value || !sliderEnd.value) return 0;
return 0; return Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
return Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0);
}); });
// 6. 滑块变化回调 // 6. 滑块变化回调
function handleChange(value: number) { function handleChange(value: number) {
const currentTime = sliderStart.value?.add(value, 'day'); const currentTime = sliderStart.value?.add(value, "day");
setcurrentTime(currentTime?.valueOf()); setcurrentTime(currentTime?.valueOf());
console.log('当前选中：', sliderMarks.value[value]);
} }
function setTime(val: any[]) { function setTime(val: any[]) {
form.value.startDate = val[0]; form.value.startDate = val[0];
form.value.endDate = val[1]; form.value.endDate = val[1];
console.log(val);
} }
// 其他代码保持不变... // 其他代码保持不变...
@ -103,37 +116,43 @@ const currentPickervalue = ref<Date | null>(null); // 明确类型为Date或null
const showCalendar = ref(false); // 控制日历显示隐藏 const showCalendar = ref(false); // 控制日历显示隐藏
const showSilder = ref(false); // 控制时间轴显示隐藏 const showSilder = ref(false); // 控制时间轴显示隐藏
const playFalg = ref<boolean>(false); const playFalg = ref<boolean>(false);
const flagMaxRunHandle = ref<boolean>(false);//判断是否已经到了最大值 const flagMaxRunHandle = ref<boolean>(false); //判断是否已经到了最大值
const checkBoxList = ref([{ const checkBoxList = ref([
isCheck: true, {
label: '级别1', isCheck: true,
color: '#1569c7', label: "级别1",
isMargin: true, color: "#1569c7",
key: 'level1', isMargin: true,
}, { key: "level1",
isCheck: true, },
label: '级别2', {
color: '#008000', isCheck: true,
isMargin: true, label: "级别2",
key: 'level2', color: "#008000",
}, { isMargin: true,
isCheck: true, key: "level2",
label: '级别3', },
color: '#ffff00', {
key: 'level3', isCheck: true,
}, { label: "级别3",
isCheck: true, color: "#ffff00",
label: '级别4', key: "level3",
color: '#ff9933', },
isMargin: true, {
key: 'level4', isCheck: true,
}, { label: "级别4",
isCheck: true, color: "#ff9933",
label: '级别5', isMargin: true,
color: '#ff0000', key: "level4",
key: 'level5', },
}]); {
isCheck: true,
label: "级别5",
color: "#ff0000",
key: "level5",
},
]);
// 禁用逻辑 // 禁用逻辑
function disableDateRange(date: Date) { function disableDateRange(date: Date) {
@ -163,12 +182,10 @@ function disableDateRange(date: Date) {
// 获取搜索数据 // 获取搜索数据
function getData() { function getData() {
const formEl = formRef.value; const formEl = formRef.value;
if (!formEl) if (!formEl) return;
return;
formEl.validate((valid, fields) => { formEl.validate((valid, fields) => {
if (valid) { if (valid) {
getSampleMonitor(form.value, (res) => { getSampleMonitor(form.value, (res) => {
console.log(res, '样品监测结果数据');
// 显示日历 // 显示日历
if (res.result.stationInfo.length) { if (res.result.stationInfo.length) {
showCalendar.value = true; showCalendar.value = true;
@ -181,12 +198,11 @@ function getData() {
// 基础数据赋值（原有逻辑保留） // 基础数据赋值（原有逻辑保留）
searchResultBaseData.value = res.result.stationInfo; searchResultBaseData.value = res.result.stationInfo;
searchResultTimeListData.value = res.result.sampleMonitorResultList; searchResultTimeListData.value = res.result.sampleMonitorResultList;
initStationLevelCount.value = res.result.stationLevelCount initStationLevelCount.value = res.result.stationLevelCount;
initPointSt() initPointSt();
} } else {
else {
ElMessage({ ElMessage({
type: 'error', type: "error",
message: `未查询到数据，请重试！`, message: `未查询到数据，请重试！`,
}); });
} }
@ -196,8 +212,8 @@ function getData() {
} }
// 初始化赋值上图 // 初始化赋值上图
function initPointSt(){ function initPointSt() {
const currentList = initStationLevelCount.value||[]; const currentList = initStationLevelCount.value || [];
const data: any = []; const data: any = [];
currentList.forEach((item: any) => { currentList.forEach((item: any) => {
const find = searchResultBaseData.value.find((v) => { const find = searchResultBaseData.value.find((v) => {
@ -209,11 +225,15 @@ function initPointSt(){
longitude: find.lon, longitude: find.lon,
latitude: find.lat, latitude: find.lat,
label: find.stationCode, label: find.stationCode,
level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {}, level: item.categoryCount
? JSON.parse(JSON.stringify(item.categoryCount))
: {},
}); });
} }
}); });
const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key); const noCheckData = checkBoxList.value
.filter((item: any) => !item.isCheck)
.map((item: any) => item.key);
data.forEach((item: any) => { data.forEach((item: any) => {
Object.keys(item.level).forEach((levelKey) => { Object.keys(item.level).forEach((levelKey) => {
// 如果该键在未勾选列表中，则删除 // 如果该键在未勾选列表中，则删除
@ -223,8 +243,6 @@ function initPointSt(){
}); });
}); });
console.log(data);
sjfxPointHandle.value?.addPoints(data); sjfxPointHandle.value?.addPoints(data);
} }
@ -260,12 +278,17 @@ function resetHandle() {
playFalg.value = false; playFalg.value = false;
showSilder.value = false; showSilder.value = false;
flagMaxRunHandle.value = false;
setShouldAnimate(false); setShouldAnimate(false);
} }
// 根据选中值获取当前的数据 // 根据选中值获取当前的数据
function getTimeDataFromDate(date: string) { function getTimeDataFromDate(date: string) {
console.log(date,"222222") const ymd = sliderEnd.value.format("YYYY-MM-DD");
if (date == ymd && !flagMaxRunHandle.value) {
flagMaxRunHandle.value = true;
}
const currentList = searchResultTimeListData.value[date]; const currentList = searchResultTimeListData.value[date];
const data: any = []; const data: any = [];
currentList.forEach((item: any) => { currentList.forEach((item: any) => {
@ -278,11 +301,15 @@ function getTimeDataFromDate(date: string) {
longitude: find.lon, longitude: find.lon,
latitude: find.lat, latitude: find.lat,
label: find.stationCode, label: find.stationCode,
level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {}, level: item.categoryCount
? JSON.parse(JSON.stringify(item.categoryCount))
: {},
}); });
} }
}); });
const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key); const noCheckData = checkBoxList.value
.filter((item: any) => !item.isCheck)
.map((item: any) => item.key);
data.forEach((item: any) => { data.forEach((item: any) => {
Object.keys(item.level).forEach((levelKey) => { Object.keys(item.level).forEach((levelKey) => {
// 如果该键在未勾选列表中，则删除 // 如果该键在未勾选列表中，则删除
@ -292,16 +319,20 @@ function getTimeDataFromDate(date: string) {
}); });
}); });
console.log(data);
sjfxPointHandle.value?.addPoints(data); sjfxPointHandle.value?.addPoints(data);
if (flagMaxRunHandle.value) {
playFalg.value = false;
// showSilder.value = false;
setShouldAnimate(false);
}
} }
// 关闭日历 // 关闭日历
function closeCalendar() { function closeCalendar() {
showCalendar.value = false; showCalendar.value = false;
EventBusTool.getEventBus().publish('mapRightMenuUIEvent', { EventBusTool.getEventBus().publish("mapRightMenuUIEvent", {
key: 'calendar', key: "calendar",
falg: false, falg: false,
}); });
// sjfxPointHandle.value?.clearPoints(); // sjfxPointHandle.value?.clearPoints();
@ -309,43 +340,28 @@ function closeCalendar() {
// 监听选中值变化 // 监听选中值变化
watch(currentPickervalue, (newDate) => { watch(currentPickervalue, (newDate) => {
console.log(newDate);
if (newDate) { if (newDate) {
const date = dayjs(newDate); const date = dayjs(newDate);
const ymd = date.format('YYYY-MM-DD'); const ymd = date.format("YYYY-MM-DD");
// 计算当前日期对应滑块的位置（距离 start 的天数差） // 计算当前日期对应滑块的位置（距离 start 的天数差）
const sliderVal = Math.max(date.diff(sliderStart.value, 'day'), 0); const sliderVal = Math.max(date.diff(sliderStart.value, "day"), 0);
// 同步滑块值（避免超出 max） // 同步滑块值（避免超出 max）
sliderValue.value = Math.min(sliderVal, sliderMax.value); sliderValue.value = Math.min(sliderVal, sliderMax.value);
getTimeDataFromDate(ymd);
console.log(sliderVal,sliderValue.value,sliderMax.value,"12121") } else {
console.log("取消了日期选中");
if((sliderVal==sliderMax.value&&!flagMaxRunHandle)){
flagMaxRunHandle.value = true;
getTimeDataFromDate(ymd);
}else if(sliderVal!=sliderMax.value){
getTimeDataFromDate(ymd);
}else{
playFalg.value = false;
// showSilder.value = false;
setShouldAnimate(false);
}
}
else {
console.log('取消了日期选中');
} }
}); });
onMounted(() => { onMounted(() => {
// 初始化二维地图实例 // 初始化二维地图实例
initMap2D('sjfxOlContainer'); initMap2D("sjfxOlContainer");
sjfxPointHandle.value = new SjfxPointHandle(); sjfxPointHandle.value = new SjfxPointHandle();
nextTick(() => { nextTick(() => {
// 注册业务帧回调函数 // 注册业务帧回调函数
setClockOnTickEvent({ setClockOnTickEvent({
key: '数据分析', key: "数据分析",
callback(timeClock: any) { callback(timeClock: any) {
if (timeClock.shouldAnimate) { if (timeClock.shouldAnimate) {
const timestamp = JulianDate.toDate(timeClock.currentTime); const timestamp = JulianDate.toDate(timeClock.currentTime);
@ -354,9 +370,7 @@ onMounted(() => {
}, },
}); });
EventBusTool.getEventBus().subscribe("sjfxCalendarEvent", (res: any) => {
EventBusTool.getEventBus().subscribe('sjfxCalendarEvent', (res: any) => {
showCalendar.value = res.falg; showCalendar.value = res.falg;
}); });
}); });
@ -364,24 +378,39 @@ onMounted(() => {
// 组件即将销毁时执行清理 // 组件即将销毁时执行清理
onUnmounted(() => { onUnmounted(() => {
removeClockOnTickEvent('数据分析'); removeClockOnTickEvent("数据分析");
}); });
</script> </script>
<template> <template>
<div class="sjfx-one-content"> <div class="sjfx-one-content">
<div class="head"> <div class="head">
<el-form ref="formRef" :model="form" label-width="100px" class="queryForm" :rules="rules"> <el-form
ref="formRef"
:model="form"
label-width="100px"
class="queryForm"
:rules="rules"
>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="6"> <el-col :span="6">
<el-form-item :label="t('sampleType')" prop="sampleType"> <el-form-item :label="t('sampleType')" prop="sampleType">
<el-select <el-select
v-model="form.sampleType" :placeholder="t('pleaseSelect')" style="width: 160px;" v-model="form.sampleType"
:placeholder="t('pleaseSelect')"
style="width: 160px"
popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;" popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
> >
<el-option <el-option
v-for="item in sampleTypeList" :key="item.value" v-for="item in sampleTypeList"
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value" :key="item.value"
style="
background-color: transparent;
height: 30px;
color: #fff;
"
:label="item.label"
:value="item.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -399,12 +428,21 @@ onUnmounted(() => {
<el-col :span="6"> <el-col :span="6">
<el-form-item :label="t('dataSource')" prop="dataSource"> <el-form-item :label="t('dataSource')" prop="dataSource">
<el-select <el-select
v-model="form.dataSource" :placeholder="t('pleaseSelect')" style="width: 160px;" v-model="form.dataSource"
:placeholder="t('pleaseSelect')"
style="width: 160px"
popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;" popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
> >
<el-option <el-option
v-for="item in dataSourceList" :key="item.value" v-for="item in dataSourceList"
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value" :key="item.value"
style="
background-color: transparent;
height: 30px;
color: #fff;
"
:label="item.label"
:value="item.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -413,16 +451,23 @@ onUnmounted(() => {
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="t('createTime')" prop="createTime"> <el-form-item :label="t('createTime')" prop="createTime">
<el-date-picker <el-date-picker
v-model="form.createTime" unlink-panels type="daterange" :default-time="new Date()" v-model="form.createTime"
range-separator="--" :start-placeholder="t('startDate')" :end-placeholder="t('endDate')" unlink-panels
value-format="YYYY-MM-DD" style="width: 100%;" @change="setTime" type="daterange"
:default-time="new Date()"
range-separator="--"
:start-placeholder="t('startDate')"
:end-placeholder="t('endDate')"
value-format="YYYY-MM-DD"
style="width: 100%"
@change="setTime"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item> <el-form-item>
<el-button :icon="Search" @click="getData"> <el-button :icon="Search" @click="getData">
{{ t('refresh') }} {{ t("refresh") }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -435,49 +480,46 @@ onUnmounted(() => {
<!-- 日历卡片，通过showCalendar控制显示 --> <!-- 日历卡片，通过showCalendar控制显示 -->
<div v-if="showCalendar" class="card-calendar"> <div v-if="showCalendar" class="card-calendar">
<div class="calendarHeader"> <div class="calendarHeader">
<div class="text"> <div class="text">日历</div>
日历
</div>
<div class="icon" @click="closeCalendar"> <div class="icon" @click="closeCalendar">
<SvgIcon name="drawer_header" width="20" height="20" /> <SvgIcon name="drawer_header" width="20" height="20" />
</div> </div>
</div> </div>
<div class="calendarContent"> <div class="calendarContent">
<el-date-picker-panel <el-date-picker-panel
v-model="currentPickervalue" :border="false" class="pickerTime" v-model="currentPickervalue"
:border="false"
class="pickerTime"
:disabled-date="disableDateRange" :disabled-date="disableDateRange"
/> />
<div class="checkBoxGroup"> <div class="checkBoxGroup">
<el-checkbox <el-checkbox
v-for="(v, i) in checkBoxList" :key="i" v-model="v.isCheck" :label="v.label" size="large" v-for="(v, i) in checkBoxList"
:style="{ marginRight: v.isMargin ? '55px' : '0' }" :data-color="v.color" :key="i"
v-model="v.isCheck"
:label="v.label"
size="large"
:style="{ marginRight: v.isMargin ? '55px' : '0' }"
:data-color="v.color"
/> />
</div> </div>
<div class="btnGruop"> <div class="btnGruop">
<div class="runBtn" @click="runHandle" v-if="!showSilder"> <div class="runBtn" @click="runHandle" v-if="!showSilder">运行</div>
运行
</div>
<div class="runBtn" @click="playAnimation()" v-else-if="!playFalg"> <div class="runBtn" @click="playAnimation()" v-else-if="!playFalg">
播放 播放
</div> </div>
<div class="runBtn" @click="playAnimation()" v-else-if="playFalg"> <div class="runBtn" @click="playAnimation()" v-else-if="playFalg">
暂停 暂停
</div> </div>
<div class="resetBtn" @click="resetHandle"> <div class="resetBtn" @click="resetHandle">重置</div>
重置
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="showCalendar" class="levelLegend"> <div v-if="showCalendar" class="levelLegend">
<div class="text"> <div class="text">级别</div>
级别
</div>
<div class="legendItem"> <div class="legendItem">
<div class="color" :style="{ backgroundColor: '#fff' }" /> <div class="color" :style="{ backgroundColor: '#fff' }" />
<div class="label"> <div class="label">无</div>
无
</div>
</div> </div>
<div v-for="(v, i) in checkBoxList" :key="i" class="legendItem"> <div v-for="(v, i) in checkBoxList" :key="i" class="legendItem">
<div class="color" :style="{ backgroundColor: v.color }" /> <div class="color" :style="{ backgroundColor: v.color }" />
@ -489,14 +531,20 @@ onUnmounted(() => {
<div v-if="showSilder" class="sliderDom"> <div v-if="showSilder" class="sliderDom">
<div class="icon" @click="playAnimation()"> <div class="icon" @click="playAnimation()">
<SvgIcon <SvgIcon
:name="!playFalg ? 'playAnimation' : 'zanting'" :title="!playFalg ? '播放' : '暂停'" width="34" :name="!playFalg ? 'playAnimation' : 'zanting'"
:title="!playFalg ? '播放' : '暂停'"
width="34"
height="34" height="34"
/> />
</div> </div>
<div class="slider"> <div class="slider">
<el-slider <el-slider
v-model="sliderValue" :style="{ width: '52vw' }" :show-tooltip="false" :max="sliderMax" v-model="sliderValue"
:marks="sliderMarks" @input="handleChange" :style="{ width: '52vw' }"
:show-tooltip="false"
:max="sliderMax"
:marks="sliderMarks"
@input="handleChange"
/> />
</div> </div>
</div> </div>
@ -686,27 +734,47 @@ onUnmounted(() => {
color: #fff !important; color: #fff !important;
} }
:deep(.el-checkbox[data-color='#1569c7'] .el-checkbox__input.is-checked .el-checkbox__inner) { :deep(
.el-checkbox[data-color="#1569c7"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #1569c7; background-color: #1569c7;
border-color: #1569c7; border-color: #1569c7;
} }
:deep(.el-checkbox[data-color='#008000'] .el-checkbox__input.is-checked .el-checkbox__inner) { :deep(
.el-checkbox[data-color="#008000"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #008000; background-color: #008000;
border-color: #008000; border-color: #008000;
} }
:deep(.el-checkbox[data-color='#ffff00'] .el-checkbox__input.is-checked .el-checkbox__inner) { :deep(
.el-checkbox[data-color="#ffff00"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ffff00; background-color: #ffff00;
border-color: #ffff00; border-color: #ffff00;
} }
:deep(.el-checkbox[data-color='#ff9933'] .el-checkbox__input.is-checked .el-checkbox__inner) { :deep(
.el-checkbox[data-color="#ff9933"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ff9933; background-color: #ff9933;
border-color: #ff9933; border-color: #ff9933;
} }
:deep(.el-checkbox[data-color='#ff0000'] .el-checkbox__input.is-checked .el-checkbox__inner) { :deep(
.el-checkbox[data-color="#ff0000"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ff0000; background-color: #ff0000;
border-color: #ff0000; border-color: #ff0000;
} }