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