Skip to content

D
DC-TOM
Commit d5e2c6c8 authored by Cai Wei's avatar Cai Wei
Browse files
Options

feat(*): 添加动画效果

parent 2efabdd5
Hide whitespace changes
Inline Side-by-side
Showing with 567 additions and 192 deletions
package-lock.json
View file @ d5e2c6c8
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"element-plus": "^2.9.10", "element-plus": "^2.9.10",
"gsap": "^3.13.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"moment": "^2.30.1", "moment": "^2.30.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
...@@ -1698,6 +1699,11 @@ ...@@ -1698,6 +1699,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/gsap": {
"version": "3.13.0",
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
"integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
},
"node_modules/has-symbols": { "node_modules/has-symbols": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz", "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
...@@ -3452,6 +3458,11 @@ ...@@ -3452,6 +3458,11 @@
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==" "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
}, },
"gsap": {
"version": "3.13.0",
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
"integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
},
"has-symbols": { "has-symbols": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz", "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
......
package.json
View file @ d5e2c6c8
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"element-plus": "^2.9.10", "element-plus": "^2.9.10",
"gsap": "^3.13.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"moment": "^2.30.1", "moment": "^2.30.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
......
src/views/dustMonitoring/components/gsapNumber.vue 0 → 100644
View file @ d5e2c6c8
<template>
<div class="gsap-number-container">
<div :class="['value', colorClass]" ref="numberElement">{{ isStringMode ? stringValue : displayValue }}</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch, defineProps, defineEmits, onUnmounted, computed } from 'vue';
import gsap from 'gsap';
const props = defineProps({
// 要显示的目标数字或字符串
value: {
type: [Number, String],
required: true,
default: 0
},
// 数字的初始值
startValue: {
type: Number,
default: 0
},
// 动画持续时间（秒）
duration: {
type: Number,
default: 1
},
// 是否启用颜色变化
enableColorChange: {
type: Boolean,
default: false
},
// 数字的小数位数
decimals: {
type: Number,
default: 0
},
// 数字的前缀
prefix: {
type: String,
default: ''
},
// 数字的后缀
suffix: {
type: String,
default: ''
},
// 是否在组件挂载时自动开始动画
autoStart: {
type: Boolean,
default: true
},
// 动画类型
animationType: {
type: String,
default: 'count', // 'count', 'bounce', 'color'
validator: (value) => ['count', 'bounce', 'color'].includes(value)
},
// 颜色阈值（用于颜色变化）
colorThresholds: {
type: Object,
default: () => ({
low: { value: 30, color: '#e74c3c' }, // 红色
medium: { value: 70, color: '#f39c12' }, // 橙色
high: { value: 100, color: '#36f1cd' } // 绿色
})
},
// 动画触发间隔（毫秒），默认为0表示不自动触发
animationInterval: {
type: Number,
default: 0
}
});
const emit = defineEmits(['animation-complete']);
const displayValue = ref(props.startValue);
const stringValue = ref('');
const numberElement = ref(null);
const colorClass = ref('blue'); // 默认颜色类
const intervalTimer = ref(null);
// 判断是否为字符串模式
const isStringMode = computed(() => typeof props.value === 'string');
// 格式化数字显示
const formatNumber = (num) => {
// 判断传入的值有多少位小数
const numStr = String(num);
const decimalParts = numStr.split('.');
const decimalPlaces = decimalParts.length > 1 ? decimalParts[1].length : 0;
// 使用传入值的小数位数，而不是props.decimals
const formattedNum = parseFloat(num).toFixed(decimalPlaces);
return `${props.prefix}${formattedNum}${props.suffix}`;
};
// 根据值确定颜色
const determineColor = (value) => {
const { low, medium, high } = props.colorThresholds;
if (value <= low.value) return 'red';
if (value <= medium.value) return 'orange';
return 'green';
};
// 执行计数动画
const animateCount = () => {
// 如果是字符串模式，直接设置值并执行弹跳动画
if (isStringMode.value) {
stringValue.value = props.value;
animateBounceForString();
return;
}
const obj = { value: props.startValue };
// 保存目标值的小数位数
const targetValueStr = String(props.value);
const decimalParts = targetValueStr.split('.');
const targetDecimalPlaces = decimalParts.length > 1 ? decimalParts[1].length : 0;
gsap.to(obj, {
value: props.value,
duration: props.duration,
ease: "power2.inOut",
onUpdate: function() {
// 动画过程中使用整数递增
const intValue = Math.floor(obj.value);
displayValue.value = `${props.prefix}${intValue}${props.suffix}`;
if (props.enableColorChange) {
colorClass.value = determineColor(obj.value);
}
},
onComplete: () => {
// 动画完成时显示原始值的完整格式（包含小数）
displayValue.value = formatNumber(props.value);
emit('animation-complete');
}
});
};
// 执行弹跳动画
const animateBounce = () => {
// 如果是字符串模式，使用字符串弹跳动画
if (isStringMode.value) {
stringValue.value = props.value;
animateBounceForString();
return;
}
// 首先更新值
displayValue.value = formatNumber(props.value);
// 然后添加弹跳动画
const tl = gsap.timeline();
tl.from(numberElement.value, {
scale: 0.5,
duration: 0.5,
ease: "back.out(1.7)"
});
tl.to(numberElement.value, {
scale: 1.2,
duration: 0.3,
ease: "power2.inOut"
});
tl.to(numberElement.value, {
scale: 1,
duration: 0.3,
ease: "power2.inOut",
onComplete: () => {
emit('animation-complete');
}
});
};
// 字符串的弹跳动画
const animateBounceForString = () => {
const tl = gsap.timeline();
tl.from(numberElement.value, {
scale: 0.5,
duration: 0.5,
ease: "back.out(1.7)"
});
tl.to(numberElement.value, {
scale: 1.1,
duration: 0.3,
ease: "power2.inOut"
});
tl.to(numberElement.value, {
scale: 1,
duration: 0.3,
ease: "power2.inOut",
onComplete: () => {
emit('animation-complete');
}
});
};
// 执行颜色变化动画
const animateColor = () => {
// 如果是字符串模式，使用字符串弹跳动画
if (isStringMode.value) {
stringValue.value = props.value;
animateBounceForString();
return;
}
// 首先执行计数动画
const obj = { value: props.startValue };
// 确定目标颜色
const targetColor = props.enableColorChange
? props.colorThresholds[determineColor(props.value)].color
: '#36f1cd';
gsap.to(obj, {
value: props.value,
duration: props.duration,
ease: "power2.inOut",
onUpdate: function() {
// 动画过程中使用整数递增
const intValue = Math.floor(obj.value);
displayValue.value = `${props.prefix}${intValue}${props.suffix}`;
},
onComplete: () => {
// 动画完成时显示原始值的完整格式（包含小数）
displayValue.value = formatNumber(props.value);
}
});
// 同时执行颜色变化
gsap.to(numberElement.value, {
color: targetColor,
duration: props.duration,
ease: "power2.inOut",
onComplete: () => {
emit('animation-complete');
}
});
};
// 开始动画
const startAnimation = () => {
switch (props.animationType) {
case 'bounce':
animateBounce();
break;
case 'color':
animateColor();
break;
case 'count':
default:
animateCount();
break;
}
};
// 设置定时器
const setupIntervalTimer = () => {
// 清除之前的定时器
if (intervalTimer.value) {
clearInterval(intervalTimer.value);
intervalTimer.value = null;
}
// 如果设置了有效的间隔时间，则创建新的定时器
if (props.animationInterval > 0) {
intervalTimer.value = setInterval(() => {
startAnimation();
}, props.animationInterval);
}
};
// 监听值变化
watch(() => props.value, (newValue) => {
// 如果是字符串，直接设置值
if (typeof newValue === 'string') {
stringValue.value = newValue;
}
startAnimation();
});
// 监听间隔时间变化
watch(() => props.animationInterval, () => {
setupIntervalTimer();
});
// 组件挂载时
onMounted(() => {
// 如果初始值是字符串，直接设置
if (typeof props.value === 'string') {
stringValue.value = props.value;
}
if (props.autoStart) {
startAnimation();
}
// 设置定时器（如果有指定间隔）
setupIntervalTimer();
});
// 组件卸载时清除定时器
onUnmounted(() => {
if (intervalTimer.value) {
clearInterval(intervalTimer.value);
intervalTimer.value = null;
}
});
</script>
<style scoped>
.gsap-number-container {
width: 100%;
}
.value {
transition: color 0.3s ease;
}
.blue {
color: #fff;
}
.green {
color: #fff;
}
.orange {
color: #fff;
}
.red {
color: #fff;
}
</style>
\ No newline at end of file
src/views/dustMonitoring/index.vue
View file @ d5e2c6c8
<template> <template>
<div class="dust-box" ref="dustBox"> <div class="dust-box" ref="dustBox">
<div class="top-box"> <div class="top-box">
<el-form <el-form :model="form" label-width="auto" :inline="true" class="demo-form-inline">
:model="form"
label-width="auto"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="除尘器名称"> <el-form-item label="除尘器名称">
<el-select <el-select v-model="form.dusterNo" placeholder="请选择除尘器" style="width: 240px" filterable>
v-model="form.dusterNo" <el-option v-for="item in dusterList" :key="item.dusterNo" :label="item.dusterName"
placeholder="请选择除尘器" :value="item.dusterNo"></el-option>
style="width: 240px"
filterable
>
<el-option
v-for="item in dusterList"
:key="item.dusterNo"
:label="item.dusterName"
:value="item.dusterNo"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="分析时间"> <el-form-item label="分析时间">
<el-date-picker <el-date-picker v-model="form.dateValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
v-model="form.dateValue" style="width: 450px" popper-class="date-picker-popper" @calendar-change="calendarChange"
type="datetimerange" @visible-change="visibleChange" :disabled-date="disabledFn" />
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 450px"
popper-class="date-picker-popper"
@calendar-change="calendarChange"
@visible-change="visibleChange"
:disabled-date="disabledFn"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -45,11 +23,7 @@ ...@@ -45,11 +23,7 @@
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info">
<warnCom <warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom>
title="告警"
:listInfo="warnInfoList"
@jumpPage="toWarnDetail"
></warnCom>
</div> </div>
</div> </div>
<div class="right-box"> <div class="right-box">
...@@ -63,9 +37,9 @@ ...@@ -63,9 +37,9 @@
<div class="dust-info"> <div class="dust-info">
<div class="info-item" v-for="item in dustInfo" :key="item.label"> <div class="info-item" v-for="item in dustInfo" :key="item.label">
<span class="label">{{ item.label }}</span> <span class="label">{{ item.label }}</span>
<span class="value" <span class="value">
>{{ item.value }} <span class="unit">({{ item.unit }})</span <gsapNumber :value="item.value" :animationType="'count'" :animationInterval="10000" />
> <span class="unit">({{ item.unit }})</span>
</span> </span>
</div> </div>
<div></div> <div></div>
...@@ -76,22 +50,13 @@ ...@@ -76,22 +50,13 @@
</div> </div>
<div class="position-info"> <div class="position-info">
<div class="left" v-if="detailObj.compartHealthList.length > 0"> <div class="left" v-if="detailObj.compartHealthList.length > 0">
<div <div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index">
class="part" <div class="point" :class="{
v-for="(list, index) in detailObj.compartHealthList" 'status-normal': item.healthStatus === 1,
:key="index" 'status-error': item.healthStatus === 2,
> 'status-warning': item.healthStatus === 3,
<div }" v-for="item in detailObj.compartHealthList[index]" :key="item" @click="handleStatusDotClick()">
class="point" </div>
:class="{
'status-normal': item.healthStatus === 1,
'status-error': item.healthStatus === 2,
'status-warning': item.healthStatus === 3,
}"
v-for="item in detailObj.compartHealthList[index]"
:key="item"
@click="handleStatusDotClick()"
></div>
</div> </div>
</div> </div>
<!-- <div class="right"> <!-- <div class="right">
...@@ -119,11 +84,7 @@ ...@@ -119,11 +84,7 @@
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info">
<warnCom <warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom>
title="闭环"
:listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail"
></warnCom>
</div> </div>
</div> </div>
</div> </div>
...@@ -139,6 +100,7 @@ import moment from "moment"; ...@@ -139,6 +100,7 @@ import moment from "moment";
import warnCom from "./components/warn.vue"; import warnCom from "./components/warn.vue";
import healthyCom from "./components/healthyProgress.vue"; import healthyCom from "./components/healthyProgress.vue";
import { getLineOption2, getGaugeOption } from "@/utils/chart"; import { getLineOption2, getGaugeOption } from "@/utils/chart";
import gsapNumber from "./components/gsapNumber.vue";
const userStore = useUsersStore(); const userStore = useUsersStore();
const form = reactive({ const form = reactive({
...@@ -170,33 +132,19 @@ const disabledFn = (current) => { ...@@ -170,33 +132,19 @@ const disabledFn = (current) => {
let cur = new Date(current).getTime(); let cur = new Date(current).getTime();
return cur < range[0] || cur > range[1]; return cur < range[0] || cur > range[1];
}; };
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
},
],
};
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const chartInstance = reactive({}); const chartInstance = reactive({});
const chartData = reactive([{}, {}, {}]); const chartData = reactive([{}, {}, {}]);
const initChart = (instance, option, domEl) => { const initChart = (instance, option, domEl) => {
if (instance && instance.dispose) { // 检查是否已经存在该dom的实例，如果存在则清除
instance.dispose(); if (chartInstance[domEl]) {
chartInstance[domEl].dispose();
} }
instance = echarts.init(document.getElementById(domEl)); // 创建新的echarts实例
instance.setOption(option); const newInstance = echarts.init(document.getElementById(domEl));
chartInstance[domEl] = instance; newInstance.setOption(option);
chartInstance[domEl] = newInstance;
chartLinkageFun(); chartLinkageFun();
}; };
let instanceList = reactive([]); let instanceList = reactive([]);
...@@ -291,7 +239,7 @@ const dustInfo = reactive([ ...@@ -291,7 +239,7 @@ const dustInfo = reactive([
unitKey: "pressureDiffUnit", unitKey: "pressureDiffUnit",
}, },
{ {
label: "粉尘浓度", label: "排口浓度",
value: "0.0", value: "0.0",
unit: "mg/m³", unit: "mg/m³",
key: "dustConcentration", key: "dustConcentration",
...@@ -310,8 +258,8 @@ const dustInfo = reactive([ ...@@ -310,8 +258,8 @@ const dustInfo = reactive([
const indicatorOneInstance = ref(); const indicatorOneInstance = ref();
const indicatorTwoInstance = ref(); const indicatorTwoInstance = ref();
const indicatorFun = (target, domId, option) => { const indicatorFun = (target, domId, option) => {
if (target.value && target.dispose) { if (target.value) {
target.value.dispose(); target.value.clear();
} }
target.value = echarts.init(document.getElementById(domId)); target.value = echarts.init(document.getElementById(domId));
target.value.setOption(option); target.value.setOption(option);
...@@ -424,6 +372,32 @@ const getDustDetail = () => { ...@@ -424,6 +372,32 @@ const getDustDetail = () => {
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00", startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59", endTime: moment(form.dateValue[1]).format("YYYY-MM-DD") + " 23:59:59",
}; };
dustInfo.value = [
{
label: "压差",
value: "0.0",
unit: "kPa",
key: "pressureDiff",
unitKey: "pressureDiffUnit",
},
{
label: "排口浓度",
value: "0.0",
unit: "mg/m³",
key: "dustConcentration",
unitKey: "dustConcentrationUnit",
},
{ label: "电磁阀数量", value: "0", unit: "个", key: "valveNum" },
{ label: "仓室数量", value: "0", unit: "个", key: "compartNum" },
{ label: "布袋检测仪数量", value: "0", unit: "个", key: "bagDetectorNum" },
{
label: "脉冲检测仪数量",
value: "0",
unit: "个",
key: "pulseDetectorNum",
},
];
getDataFun(url, params) getDataFun(url, params)
.then((res) => { .then((res) => {
if (res && res.data) { if (res && res.data) {
...@@ -445,82 +419,82 @@ const getDustDetail = () => { ...@@ -445,82 +419,82 @@ const getDustDetail = () => {
detailObj.faultCompart = (res.data && res.data.faultCompart) || ""; detailObj.faultCompart = (res.data && res.data.faultCompart) || "";
detailObj.compartHealthList = (res.data && detailObj.compartHealthList = (res.data &&
res.data.compartHealthList) || [ res.data.compartHealthList) || [
[ [
{ {
compartNo: "1", compartNo: "1",
healthStatus: 1, healthStatus: 1,
sort: 1, sort: 1,
}, },
{ {
compartNo: "2", compartNo: "2",
healthStatus: 1, healthStatus: 1,
sort: 2, sort: 2,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 3, sort: 3,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 4, sort: 4,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 5, sort: 5,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 6, sort: 6,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 7, sort: 7,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 8, sort: 8,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 9, sort: 9,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 10, sort: 10,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 11, sort: 11,
}, },
{ {
compartNo: null, compartNo: null,
healthStatus: 1, healthStatus: 1,
sort: 12, sort: 12,
}, },
], ],
]; ];
indicatorFun( indicatorFun(
indicatorOneInstance, indicatorOneInstance,
"indicatorOne", "indicatorOne",
getGaugeOption({ getGaugeOption({
value: dustInfo[0].value.toFixed(2), value: dustInfo[0].value.toFixed(2),
chartName: "压差" + '(' +dustInfo[0].unit + ')', chartName: "压差" + '(' + dustInfo[0].unit + ')',
min: parseInt(res.data.pressureDiffLow), min: parseInt(res.data.pressureDiffLow),
max: parseInt(res.data.pressureDiffHigh), max: parseInt(res.data.pressureDiffHigh),
formatter: formatter:
parseInt(res.data.pressureDiffHigh) > 10 parseInt(res.data.pressureDiffHigh) > 10
? function (value) { ? function (value) {
return parseInt(value); return parseInt(value);
} }
: "", : "",
}) })
); );
...@@ -529,9 +503,9 @@ const getDustDetail = () => { ...@@ -529,9 +503,9 @@ const getDustDetail = () => {
"indicatorTwo", "indicatorTwo",
getGaugeOption({ getGaugeOption({
value: parseFloat(dustInfo[1].value), value: parseFloat(dustInfo[1].value),
chartName: "粉尘浓度" + '(' +dustInfo[1].unit + ')', chartName: "排口浓度" + '(' + dustInfo[1].unit + ')',
min: 5, min: 0,
max: parseInt(dustInfo[1].value) > 50 ? Math.ceil(parseFloat(dustInfo[1].value) / 10) * 10 : 50, max: parseInt(dustInfo[1].value) > 50 ? Math.ceil(parseFloat(dustInfo[1].value) / 10) * 10 : 10,
formatter: function (value) { formatter: function (value) {
return parseInt(value); return parseInt(value);
}, },
...@@ -618,24 +592,12 @@ onUnmounted(() => { ...@@ -618,24 +592,12 @@ onUnmounted(() => {
watch( watch(
() => form.dusterNo, () => form.dusterNo,
() => { () => {
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring(); startRealTimeMonitoring();
} }
); );
watch( watch(
() => form.dateValue, () => form.dateValue,
() => { () => {
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
// 重新启动实时监测
startRealTimeMonitoring(); startRealTimeMonitoring();
} }
); );
...@@ -676,9 +638,23 @@ let realTimeTimer = null; ...@@ -676,9 +638,23 @@ let realTimeTimer = null;
const startRealTimeMonitoring = () => { const startRealTimeMonitoring = () => {
if (realTimeTimer) { if (realTimeTimer) {
clearInterval(realTimeTimer); clearInterval(realTimeTimer);
cancelAllMouseEvent();
chartRemoveEvent();
} }
// 默认先触发一次
getDustDetail();
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
realTimeTimer = setInterval(() => { realTimeTimer = setInterval(() => {
getDustDetail(); getDustDetail();
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
}, 10000); }, 10000);
} }
...@@ -695,8 +671,8 @@ const getAllMouseEvent = () => { ...@@ -695,8 +671,8 @@ const getAllMouseEvent = () => {
dustBox.value.addEventListener("mousedown", cancelRefreshEvent) dustBox.value.addEventListener("mousedown", cancelRefreshEvent)
} }
const cancelRefreshEvent = () => { const cancelRefreshEvent = () => {
clearTimeout(refreshTimer); clearTimeout(refreshTimer);
refeshFun(); refeshFun();
} }
// 取消鼠标事件 // 取消鼠标事件
const cancelAllMouseEvent = () => { const cancelAllMouseEvent = () => {
...@@ -709,6 +685,7 @@ const cancelAllMouseEvent = () => { ...@@ -709,6 +685,7 @@ const cancelAllMouseEvent = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$borderColor: #3a3f45; $borderColor: #3a3f45;
.dust-box { .dust-box {
width: 100%; width: 100%;
height: calc(100% - 14px); height: calc(100% - 14px);
...@@ -720,11 +697,13 @@ $borderColor: #3a3f45; ...@@ -720,11 +697,13 @@ $borderColor: #3a3f45;
flex-direction: column; flex-direction: column;
// background-color: #181d21; // background-color: #181d21;
color: #909399; color: #909399;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: rgba(58, 63, 69, 0.5); background-color: rgba(58, 63, 69, 0.5);
} }
} }
.top-box { .top-box {
width: 100%; width: 100%;
padding-top: 18px; padding-top: 18px;
...@@ -735,8 +714,10 @@ $borderColor: #3a3f45; ...@@ -735,8 +714,10 @@ $borderColor: #3a3f45;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.left-box { .left-box {
width: 50%; width: 50%;
.part1 { .part1 {
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(58, 63, 69, 0.5); border: 1px solid rgba(58, 63, 69, 0.5);
...@@ -744,9 +725,11 @@ $borderColor: #3a3f45; ...@@ -744,9 +725,11 @@ $borderColor: #3a3f45;
width: 100%; width: 100%;
height: 63vh; height: 63vh;
background: #181d21; background: #181d21;
.chart-box { .chart-box {
width: 100%; width: 100%;
height: 31%; height: 31%;
.chart-item { .chart-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -756,14 +739,17 @@ $borderColor: #3a3f45; ...@@ -756,14 +739,17 @@ $borderColor: #3a3f45;
} }
.value { .value {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} display: flex;
align-items: center;
justify-content: center;
}
.unit { .unit {
color: #909399; color: #909399;
font-size: 12px; font-size: 12px;
} }
.right-box { .right-box {
width: 50%; width: 50%;
...@@ -777,11 +763,13 @@ $borderColor: #3a3f45; ...@@ -777,11 +763,13 @@ $borderColor: #3a3f45;
background: #181d21; background: #181d21;
padding: 1%; padding: 1%;
box-sizing: border-box; box-sizing: border-box;
.battery { .battery {
width: 100%; width: 100%;
height: calc(100%); height: calc(100%);
} }
} }
.part2 { .part2 {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
...@@ -795,6 +783,7 @@ $borderColor: #3a3f45; ...@@ -795,6 +783,7 @@ $borderColor: #3a3f45;
box-sizing: border-box; box-sizing: border-box;
background: #181d21; background: #181d21;
position: relative; position: relative;
.dust-title { .dust-title {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
...@@ -804,6 +793,7 @@ $borderColor: #3a3f45; ...@@ -804,6 +793,7 @@ $borderColor: #3a3f45;
width: 100%; width: 100%;
color: #fff; color: #fff;
} }
.dust-info { .dust-info {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #232a31; background: #232a31;
...@@ -813,6 +803,7 @@ $borderColor: #3a3f45; ...@@ -813,6 +803,7 @@ $borderColor: #3a3f45;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0 10px; gap: 0 10px;
} }
.info-item { .info-item {
padding: 3px 0; padding: 3px 0;
width: calc(50% - 5px); width: calc(50% - 5px);
...@@ -827,24 +818,29 @@ $borderColor: #3a3f45; ...@@ -827,24 +818,29 @@ $borderColor: #3a3f45;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
justify-content: space-between; justify-content: space-between;
.label { .label {
color: #909399; color: #909399;
} }
} }
.indicator-box { .indicator-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.indicator-item { .indicator-item {
width: 50%; width: 50%;
height: 180px; height: 180px;
} }
} }
.position-info { .position-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
.left, .left,
.right { .right {
padding: 5px; padding: 5px;
...@@ -852,17 +848,20 @@ $borderColor: #3a3f45; ...@@ -852,17 +848,20 @@ $borderColor: #3a3f45;
flex-wrap: wrap; flex-wrap: wrap;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
} }
.left { .left {
background-color: #232a31; background-color: #232a31;
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.part { .part {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.point { .point {
width: 20px; width: 20px;
margin: 10px; margin: 10px;
...@@ -870,16 +869,20 @@ $borderColor: #3a3f45; ...@@ -870,16 +869,20 @@ $borderColor: #3a3f45;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);
box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.5);
} }
} }
.point::after { .point::after {
content: ""; content: "";
display: block; display: block;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */ padding-bottom: 100%;
/* 9/16 * 100% = 56.25% */
} }
.status-normal { .status-normal {
background-color: rgb(103, 194, 58); // 绿色 background-color: rgb(103, 194, 58); // 绿色
animation: pulse-glow1 2s ease-in-out infinite; animation: pulse-glow1 2s ease-in-out infinite;
...@@ -898,56 +901,64 @@ $borderColor: #3a3f45; ...@@ -898,56 +901,64 @@ $borderColor: #3a3f45;
@keyframes pulse-glow1 { @keyframes pulse-glow1 {
0% { 0% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3), box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2), 0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1); 0 0 20px rgba(103, 194, 58, 0.1);
} }
50% { 50% {
box-shadow: 0 0 20px rgba(103, 194, 58, 0.8), box-shadow: 0 0 20px rgba(103, 194, 58, 0.8),
0 0 10px rgba(103, 194, 58, 0.6), 0 0 10px rgba(103, 194, 58, 0.6),
0 0 20px rgba(103, 194, 58, 0.4); 0 0 20px rgba(103, 194, 58, 0.4);
} }
100% { 100% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3), box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2), 0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1); 0 0 20px rgba(103, 194, 58, 0.1);
} }
} }
@keyframes pulse-glow2 { @keyframes pulse-glow2 {
0% { 0% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3), box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2), 0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1); 0 0 20px rgba(230, 162, 60, 0.1);
} }
50% { 50% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.8), box-shadow: 0 0 0px rgba(230, 162, 60, 0.8),
0 0 10px rgba(230, 162, 60, 0.6), 0 0 10px rgba(230, 162, 60, 0.6),
0 0 20px rgba(230, 162, 60, 0.4); 0 0 20px rgba(230, 162, 60, 0.4);
} }
100% { 100% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3), box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2), 0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1); 0 0 20px rgba(230, 162, 60, 0.1);
} }
} }
@keyframes pulse-glow3 { @keyframes pulse-glow3 {
0% { 0% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3), box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2), 0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1); 0 0 20px rgba(245, 108, 108, 0.1);
} }
50% { 50% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.8), box-shadow: 0 0 0px rgba(245, 108, 108, 0.8),
0 0 10px rgba(245, 108, 108, 0.6), 0 0 10px rgba(245, 108, 108, 0.6),
0 0 20px rgba(245, 108, 108, 0.4); 0 0 20px rgba(245, 108, 108, 0.4);
} }
100% { 100% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3), box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2), 0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1); 0 0 20px rgba(245, 108, 108, 0.1);
} }
} }
} }
.other-info { .other-info {
padding: 20px; padding: 20px;
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;
...@@ -956,6 +967,7 @@ $borderColor: #3a3f45; ...@@ -956,6 +967,7 @@ $borderColor: #3a3f45;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
gap: 10px; gap: 10px;
&-item { &-item {
padding: 10px; padding: 10px;
min-height: 70px; min-height: 70px;
...@@ -963,26 +975,31 @@ $borderColor: #3a3f45; ...@@ -963,26 +975,31 @@ $borderColor: #3a3f45;
border-radius: 6px; border-radius: 6px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
p:nth-child(2) { p:nth-child(2) {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
} }
} }
&-item::-webkit-scrollbar { &-item::-webkit-scrollbar {
width: 0; width: 0;
} }
.label { .label {
color: #909399; color: #909399;
} }
} }
} }
.part2::-webkit-scrollbar { .part2::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: rgba(58, 63, 69, 0.5); background-color: rgba(58, 63, 69, 0.5);
} }
} }
.warn-info { .warn-info {
margin-top: 20px; margin-top: 20px;
height: 17vh; height: 17vh;
...@@ -991,17 +1008,20 @@ $borderColor: #3a3f45; ...@@ -991,17 +1008,20 @@ $borderColor: #3a3f45;
padding: 10px 30px; padding: 10px 30px;
background: #181d21; background: #181d21;
} }
.layout1 { .layout1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
flex: 1; flex: 1;
} }
.layout2 { .layout2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
.layout3 { .layout3 {
display: flex; display: flex;
align-items: center; align-items: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment