Skip to content

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

feat(*): 添加cypress测试流程

parents effe56e8 ba8db0cc
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 302 deletions
package-lock.json
View file @ 6024505a
......@@ -13,6 +13,7 @@
"crypto-js": "^4.2.0",
"echarts": "^5.6.0",
"element-plus": "^2.9.10",
"gsap": "^3.13.0",
"js-cookie": "^3.0.5",
"moment": "^2.30.1",
"nprogress": "^0.2.0",
......@@ -1698,6 +1699,11 @@
"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": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
......@@ -3452,6 +3458,11 @@
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
"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": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
......
src/layout/index.vue
View file @ 6024505a
......@@ -10,8 +10,8 @@
@toggleClick="toggleSideBar"
:is-active="sidebar"
/>
<h3>DC-TOM管理平台</h3>
<div class="go-tom" @click="goTom">EcoTOM 三流合一</div>
<h3>E-Core / DC-TOM 管理平台</h3>
<div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div>
<div class="right-block">
<el-dropdown class="right-menu-item" trigger="click">
<div class="user-info">
......@@ -90,6 +90,9 @@ export default {
const route = useRoute();
const breadcrumbList = ref([]);
const currentDomain = window.location.hostname;
// 获取当前路由的面包屑数据
const getBreadcrumbData = () => {
breadcrumbList.value = [];
......@@ -151,6 +154,7 @@ export default {
sidebar,
toggleSideBar,
goTom,
currentDomain,
};
},
created() {},
......
src/utils/chart.js
View file @ 6024505a
import * as echarts from "echarts";
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
color: '#fff'
}
},
grid: {
left: "3%",
right: "4%",
......@@ -252,11 +252,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
symbol: 'circle',
symbolSize: 0,
lineStyle: {
width: 2,
color: chartColors.teal
width: 2,
color: chartColors.teal
},
itemStyle: {
color: chartColors.teal
color: chartColors.teal
},
areaStyle: {
color: {
......@@ -283,14 +283,29 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
],
});
export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({
export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数", unit = '') => ({
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 2,
textStyle: {
color: '#fff'
color: '#fff'
},
formatter: function (params) {
// 展示保留圆点
const icon = '<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #399DFA; margin-right: 5px;"></span>';
return `第${params[0].name}天<br/> ${icon} ${params[0].seriesName}: ${params[0].value} ${unit}`;
}
},
// 添加子标题
title: {
text: legendDesc === '除尘器健康度指数' ? '根据除尘器日维度告警数据计算' : '',
right: "20",
top: "0%",
textStyle: {
color: '#909399',
fontSize: 12,
}
},
grid: {
......@@ -312,6 +327,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
},
xAxis: {
type: "category",
name: "天",
nameTextStyle: {
color: '#909399',
fontSize: 12,
},
axisTick: {
show: false,
},
......@@ -327,6 +347,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
},
yAxis: {
type: "value",
name: unit,
nameTextStyle: {
color: '#909399',
fontSize: 12,
},
axisLabel: {
color: "#909399",
},
......@@ -359,14 +384,73 @@ export const getGaugeOption = (option) => {
radius: "90%",
min: option.min || 0,
max: option.max || 100,
splitNumber: 8,
splitNumber: 5,
axisLine: {
lineStyle: {
width: 30,
width: 20,
color: [
[0.2, "#fd666d"],
[0.8, "#48cd4d"],
[1, "#fd666d"],
[
0,
new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 1,
color: "#13d2a9", // 0% 处的颜色
},
{
offset: 0,
color: "#13d2a9", // 100% 处的颜色
},
],
false
),
],
[
0.4,
new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 1,
color: "#13d2a9", // 0% 处的颜色
},
{
offset: 0,
color: "#9ad8c9", // 100% 处的颜色
},
],
false
),
],
[
1,
new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#9ad8c9", // 0% 处的颜色
},
{
offset: 0,
color: "#dadb1b", // 100% 处的颜色
},
],
false
),
],
],
},
},
......@@ -376,7 +460,7 @@ export const getGaugeOption = (option) => {
}
},
axisTick: {
distance: -30,
distance: -20,
length: 10,
lineStyle: {
color: "#909399",
......@@ -384,13 +468,13 @@ export const getGaugeOption = (option) => {
},
},
splitLine: {
distance: -30,
length: 38,
distance: -20,
length: 24,
lineStyle: {
color: '#909399',
width: 2
},
},
axisLabel: {
color: '#909399',
......
src/views/dustMonitoring/components/gsapNumber.vue 0 → 100644
View file @ 6024505a
<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 @ 6024505a
<template>
<<<<<<< HEAD
<div class="dust-box" data-testid="dust-monitoring-container">
<div class="top-box" data-testid="dust-monitoring-filters">
<el-form
......@@ -36,6 +37,21 @@
:disabled-date="disabledFn"
data-testid="dust-monitoring-date-picker"
/>
=======
<div class="dust-box" ref="dustBox">
<div class="top-box">
<el-form :model="form" label-width="auto" :inline="true" class="demo-form-inline">
<el-form-item label="除尘器名称">
<el-select v-model="form.dusterNo" placeholder="请选择除尘器" 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-form-item>
<el-form-item label="分析时间">
<el-date-picker v-model="form.dateValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
style="width: 450px" popper-class="date-picker-popper" @calendar-change="calendarChange"
@visible-change="visibleChange" :disabled-date="disabledFn" />
>>>>>>> ba8db0cce650168320137278b5c55009744aec8e
</el-form-item>
</el-form>
</div>
......@@ -46,12 +62,17 @@
<div :id="'chart' + index" class="chart-item"></div>
</div>
</div>
<<<<<<< HEAD
<div class="warn-info" data-testid="dust-monitoring-warnings">
<warnCom
title="告警"
:listInfo="warnInfoList"
@jumpPage="toWarnDetail"
></warnCom>
=======
<div class="warn-info">
<warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom>
>>>>>>> ba8db0cce650168320137278b5c55009744aec8e
</div>
</div>
<div class="right-box" data-testid="dust-monitoring-info-section">
......@@ -65,9 +86,9 @@
<div class="dust-info" data-testid="dust-monitoring-info-grid">
<div class="info-item" v-for="item in dustInfo" :key="item.label">
<span class="label">{{ item.label }}</span>
<span class="value"
>{{ item.value }} <span class="unit">({{ item.unit }})</span
>
<span class="value">
<gsapNumber :value="item.value" :animationType="'count'" :animationInterval="10000" />
<span class="unit">({{ item.unit }})</span>
</span>
</div>
<div></div>
......@@ -78,22 +99,13 @@
</div>
<div class="position-info" data-testid="dust-monitoring-status-matrix">
<div class="left" v-if="detailObj.compartHealthList.length > 0">
<div
class="part"
v-for="(list, index) in detailObj.compartHealthList"
:key="index"
>
<div
class="point"
: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 class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index">
<div class="point" :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 class="right">
......@@ -120,12 +132,17 @@
</div>
</div>
</div>
<<<<<<< HEAD
<div class="warn-info" data-testid="dust-monitoring-closed-loops">
<warnCom
title="闭环"
:listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail"
></warnCom>
=======
<div class="warn-info">
<warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom>
>>>>>>> ba8db0cce650168320137278b5c55009744aec8e
</div>
</div>
</div>
......@@ -141,6 +158,7 @@ import moment from "moment";
import warnCom from "./components/warn.vue";
import healthyCom from "./components/healthyProgress.vue";
import { getLineOption2, getGaugeOption } from "@/utils/chart";
import gsapNumber from "./components/gsapNumber.vue";
const userStore = useUsersStore();
const form = reactive({
......@@ -172,33 +190,19 @@ const disabledFn = (current) => {
let cur = new Date(current).getTime();
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 route = useRoute();
const chartInstance = reactive({});
const chartData = reactive([{}, {}, {}]);
const initChart = (instance, option, domEl) => {
if (instance && instance.dispose) {
instance.dispose();
// 检查是否已经存在该dom的实例，如果存在则清除
if (chartInstance[domEl]) {
chartInstance[domEl].dispose();
}
instance = echarts.init(document.getElementById(domEl));
instance.setOption(option);
chartInstance[domEl] = instance;
// 创建新的echarts实例
const newInstance = echarts.init(document.getElementById(domEl));
newInstance.setOption(option);
chartInstance[domEl] = newInstance;
chartLinkageFun();
};
let instanceList = reactive([]);
......@@ -293,7 +297,7 @@ const dustInfo = reactive([
unitKey: "pressureDiffUnit",
},
{
label: "粉尘浓度",
label: "排口浓度",
value: "0.0",
unit: "mg/m³",
key: "dustConcentration",
......@@ -309,84 +313,11 @@ const dustInfo = reactive([
key: "pulseDetectorNum",
},
]);
const option2 = {
series: [
{
type: "gauge",
startAngle: 260,
endAngle: 300,
center: ["50%", "75%"],
radius: "90%",
min: 0,
max: 1,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 3,
color: [
[0.25, "#FF6E76"],
[0.8, "#67c23a"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
length: "12%",
width: 20,
offsetCenter: [0, "-60%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 0,
lineStyle: {
color: "auto",
width: 2,
},
},
splitLine: {
length: 0,
lineStyle: {
color: "auto",
width: 5,
},
},
axisLabel: {
color: "#464646",
fontSize: 20,
distance: -60,
rotate: "tangential",
show: false,
},
title: {
offsetCenter: [0, "50%"],
fontSize: 12,
},
detail: {
fontSize: 20,
offsetCenter: [0, 0],
valueAnimation: true,
formatter: function (value) {
return Math.round(value * 100) + "";
},
color: "inherit",
},
data: [
{
value: 0.7,
name: "压差",
},
],
},
],
};
const indicatorOneInstance = ref();
const indicatorTwoInstance = ref();
const indicatorFun = (target, domId, option) => {
if (target.value && target.dispose) {
target.value.dispose();
if (target.value) {
target.value.clear();
}
target.value = echarts.init(document.getElementById(domId));
target.value.setOption(option);
......@@ -425,7 +356,7 @@ const getHealthIndex = () => {
xData.push(item.time);
seriesData.push(item.healthIndex);
});
const option = getLineOption2(xData, seriesData, "健康度指数（%）");
const option = getLineOption2(xData, seriesData, "除尘器健康度指数", "%");
initChart(chartData[0], option, "chart0");
}
});
......@@ -450,7 +381,7 @@ const getPressure = () => {
xData.push(item.time);
seriesData.push(item.pressureDiff);
});
const option = getLineOption2(xData, seriesData, "压力差（kpa）");
const option = getLineOption2(xData, seriesData, "压力差", "kPa");
initChart(chartData[1], option, "chart1");
}
});
......@@ -475,7 +406,7 @@ const getEnergy = () => {
xData.push(item.time);
seriesData.push(item.energyConsumption);
});
const option = getLineOption2(xData, seriesData, "能耗（kwh）");
const option = getLineOption2(xData, seriesData, "能耗", "kW·h");
initChart(chartData[2], option, "chart2");
}
});
......@@ -499,6 +430,32 @@ const getDustDetail = () => {
startTime: moment(form.dateValue[0]).format("YYYY-MM-DD") + " 00:00:00",
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)
.then((res) => {
if (res && res.data) {
......@@ -520,82 +477,82 @@ const getDustDetail = () => {
detailObj.faultCompart = (res.data && res.data.faultCompart) || "";
detailObj.compartHealthList = (res.data &&
res.data.compartHealthList) || [
[
{
compartNo: "1",
healthStatus: 1,
sort: 1,
},
{
compartNo: "2",
healthStatus: 1,
sort: 2,
},
{
compartNo: null,
healthStatus: 1,
sort: 3,
},
{
compartNo: null,
healthStatus: 1,
sort: 4,
},
{
compartNo: null,
healthStatus: 1,
sort: 5,
},
{
compartNo: null,
healthStatus: 1,
sort: 6,
},
{
compartNo: null,
healthStatus: 1,
sort: 7,
},
{
compartNo: null,
healthStatus: 1,
sort: 8,
},
{
compartNo: null,
healthStatus: 1,
sort: 9,
},
{
compartNo: null,
healthStatus: 1,
sort: 10,
},
{
compartNo: null,
healthStatus: 1,
sort: 11,
},
{
compartNo: null,
healthStatus: 1,
sort: 12,
},
],
];
[
{
compartNo: "1",
healthStatus: 1,
sort: 1,
},
{
compartNo: "2",
healthStatus: 1,
sort: 2,
},
{
compartNo: null,
healthStatus: 1,
sort: 3,
},
{
compartNo: null,
healthStatus: 1,
sort: 4,
},
{
compartNo: null,
healthStatus: 1,
sort: 5,
},
{
compartNo: null,
healthStatus: 1,
sort: 6,
},
{
compartNo: null,
healthStatus: 1,
sort: 7,
},
{
compartNo: null,
healthStatus: 1,
sort: 8,
},
{
compartNo: null,
healthStatus: 1,
sort: 9,
},
{
compartNo: null,
healthStatus: 1,
sort: 10,
},
{
compartNo: null,
healthStatus: 1,
sort: 11,
},
{
compartNo: null,
healthStatus: 1,
sort: 12,
},
],
];
indicatorFun(
indicatorOneInstance,
"indicatorOne",
getGaugeOption({
value: dustInfo[0].value.toFixed(2),
chartName: "压差",
chartName: "压差" + '(' + dustInfo[0].unit + ')',
min: parseInt(res.data.pressureDiffLow),
max: parseInt(res.data.pressureDiffHigh),
formatter:
parseInt(res.data.pressureDiffHigh) > 10
? function (value) {
return parseInt(value);
}
return parseInt(value);
}
: "",
})
);
......@@ -603,10 +560,10 @@ const getDustDetail = () => {
indicatorTwoInstance,
"indicatorTwo",
getGaugeOption({
value: parseInt(dustInfo[1].value),
chartName: "粉尘浓度",
min: 5,
max: 50,
value: parseFloat(dustInfo[1].value),
chartName: "排口浓度" + '(' + dustInfo[1].unit + ')',
min: 0,
max: parseInt(dustInfo[1].value) > 50 ? Math.ceil(parseFloat(dustInfo[1].value) / 10) * 10 : 10,
formatter: function (value) {
return parseInt(value);
},
......@@ -678,29 +635,28 @@ const resizeFun = () => {
onMounted(() => {
getDusterNameEnum();
window.addEventListener("resize", resizeFun);
refeshFun();
getAllMouseEvent();
// 启动实时监测
startRealTimeMonitoring();
});
onUnmounted(() => {
window.removeEventListener("resize", resizeFun);
cancelAllMouseEvent();
chartRemoveEvent();
// 停止实时监测
stopRealTimeMonitoring();
});
watch(
() => form.dusterNo,
() => {
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
startRealTimeMonitoring();
}
);
watch(
() => form.dateValue,
() => {
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
startRealTimeMonitoring();
}
);
const dusterName = computed(() => {
......@@ -716,9 +672,78 @@ const handleStatusDotClick = () => {
},
});
};
// 定时刷新页面数据请求 30分钟一次。
const refreshData = () => {
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
}
let refreshTimer = null;
const refeshFun = () => {
if (refreshTimer) {
clearInterval(refreshTimer);
}
refreshTimer = setTimeout(() => {
refreshData();
refeshFun()
}, 1000 * 60 * 30);
}
// 实时监测数据变化 - 每秒轮询 getDustDetail
let realTimeTimer = null;
const startRealTimeMonitoring = () => {
if (realTimeTimer) {
clearInterval(realTimeTimer);
cancelAllMouseEvent();
chartRemoveEvent();
}
// 默认先触发一次
getDustDetail();
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
realTimeTimer = setInterval(() => {
getDustDetail();
getHealthIndex();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
}, 10000);
}
const stopRealTimeMonitoring = () => {
if (realTimeTimer) {
clearInterval(realTimeTimer);
realTimeTimer = null;
}
}
const dustBox = ref(null);
// 获取鼠标所有事件
const getAllMouseEvent = () => {
dustBox.value.addEventListener("mousemove", cancelRefreshEvent)
dustBox.value.addEventListener("mousedown", cancelRefreshEvent)
}
const cancelRefreshEvent = () => {
clearTimeout(refreshTimer);
refeshFun();
}
// 取消鼠标事件
const cancelAllMouseEvent = () => {
clearTimeout(refreshTimer);
if (dustBox.value) {
dustBox.value.removeEventListener("mousemove", cancelRefreshEvent)
dustBox.value.removeEventListener("mousedown", cancelRefreshEvent)
}
}
</script>
<style lang="scss" scoped>
$borderColor: #3a3f45;
.dust-box {
width: 100%;
height: calc(100% - 14px);
......@@ -730,11 +755,13 @@ $borderColor: #3a3f45;
flex-direction: column;
// background-color: #181d21;
color: #909399;
&::-webkit-scrollbar {
width: 2px;
background-color: rgba(58, 63, 69, 0.5);
}
}
.top-box {
width: 100%;
padding-top: 18px;
......@@ -745,8 +772,10 @@ $borderColor: #3a3f45;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.left-box {
width: 50%;
.part1 {
border-radius: 6px;
border: 1px solid rgba(58, 63, 69, 0.5);
......@@ -754,9 +783,11 @@ $borderColor: #3a3f45;
width: 100%;
height: 63vh;
background: #181d21;
.chart-box {
width: 100%;
height: 31%;
.chart-item {
width: 100%;
height: 100%;
......@@ -766,14 +797,17 @@ $borderColor: #3a3f45;
}
.value {
color: #fff;
font-size: 14px;
}
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.unit {
color: #909399;
font-size: 12px;
}
.unit {
color: #909399;
font-size: 12px;
}
.right-box {
width: 50%;
......@@ -787,11 +821,13 @@ $borderColor: #3a3f45;
background: #181d21;
padding: 1%;
box-sizing: border-box;
.battery {
width: 100%;
height: calc(100%);
}
}
.part2 {
margin-top: 10px;
width: 100%;
......@@ -805,6 +841,7 @@ $borderColor: #3a3f45;
box-sizing: border-box;
background: #181d21;
position: relative;
.dust-title {
text-align: center;
font-size: 20px;
......@@ -814,6 +851,7 @@ $borderColor: #3a3f45;
width: 100%;
color: #fff;
}
.dust-info {
padding: 0.5rem 1rem;
background: #232a31;
......@@ -823,6 +861,7 @@ $borderColor: #3a3f45;
flex-wrap: wrap;
gap: 0 10px;
}
.info-item {
padding: 3px 0;
width: calc(50% - 5px);
......@@ -837,24 +876,29 @@ $borderColor: #3a3f45;
align-items: center;
font-weight: 600;
justify-content: space-between;
.label {
color: #909399;
}
}
.indicator-box {
display: flex;
align-items: center;
justify-content: space-between;
.indicator-item {
width: 50%;
height: 180px;
}
}
.position-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px 20px 20px;
.left,
.right {
padding: 5px;
......@@ -862,17 +906,20 @@ $borderColor: #3a3f45;
flex-wrap: wrap;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
}
.left {
background-color: #232a31;
border-radius: 6px;
padding: 10px;
box-sizing: border-box;
}
.part {
display: flex;
align-items: center;
justify-content: space-around;
}
.point {
width: 20px;
margin: 10px;
......@@ -880,28 +927,96 @@ $borderColor: #3a3f45;
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.2);
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.5);
}
}
.point::after {
content: "";
display: block;
padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
padding-bottom: 100%;
/* 9/16 * 100% = 56.25% */
}
.status-normal {
background-color: #67c23a; // 绿色
background-color: rgb(103, 194, 58); // 绿色
animation: pulse-glow1 2s ease-in-out infinite;
}
.status-warning {
background-color: #e6a23c; // 橙色
background-color: rgb(230, 162, 60); // 橙色
animation: pulse-glow2 2s ease-in-out infinite;
}
.status-error {
background-color: #f56c6c; // 红色
background-color: rgb(245, 108, 108); // 红色
animation: pulse-glow3 2s ease-in-out infinite;
}
@keyframes pulse-glow1 {
0% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1);
}
50% {
box-shadow: 0 0 20px rgba(103, 194, 58, 0.8),
0 0 10px rgba(103, 194, 58, 0.6),
0 0 20px rgba(103, 194, 58, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(103, 194, 58, 0.3),
0 0 10px rgba(103, 194, 58, 0.2),
0 0 20px rgba(103, 194, 58, 0.1);
}
}
@keyframes pulse-glow2 {
0% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1);
}
50% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.8),
0 0 10px rgba(230, 162, 60, 0.6),
0 0 20px rgba(230, 162, 60, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(230, 162, 60, 0.3),
0 0 10px rgba(230, 162, 60, 0.2),
0 0 20px rgba(230, 162, 60, 0.1);
}
}
@keyframes pulse-glow3 {
0% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1);
}
50% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.8),
0 0 10px rgba(245, 108, 108, 0.6),
0 0 20px rgba(245, 108, 108, 0.4);
}
100% {
box-shadow: 0 0 0px rgba(245, 108, 108, 0.3),
0 0 10px rgba(245, 108, 108, 0.2),
0 0 20px rgba(245, 108, 108, 0.1);
}
}
}
.other-info {
padding: 20px;
border-top: 1px solid $borderColor;
......@@ -910,6 +1025,7 @@ $borderColor: #3a3f45;
justify-content: space-between;
font-size: 14px;
gap: 10px;
&-item {
padding: 10px;
min-height: 70px;
......@@ -917,26 +1033,31 @@ $borderColor: #3a3f45;
border-radius: 6px;
flex: 1;
overflow-y: auto;
p:nth-child(2) {
font-size: 14px;
font-weight: 600;
color: #fff;
}
}
&-item::-webkit-scrollbar {
width: 0;
}
.label {
color: #909399;
}
}
}
.part2::-webkit-scrollbar {
width: 2px;
background-color: rgba(58, 63, 69, 0.5);
}
}
.warn-info {
margin-top: 20px;
height: 17vh;
......@@ -945,17 +1066,20 @@ $borderColor: #3a3f45;
padding: 10px 30px;
background: #181d21;
}
.layout1 {
display: flex;
justify-content: space-between;
gap: 16px;
flex: 1;
}
.layout2 {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.layout3 {
display: flex;
align-items: center;
......
src/views/intermediate/index.vue
View file @ 6024505a
......@@ -24,10 +24,10 @@ const iframeRef = ref(null);
const url = computed(() => {
const currentDomain = window.location.hostname;
if (currentDomain.includes('screen.bmetech.com')) {
return `https://screen.bmetech.com/steelmakingScreen/#/robotNew`;
return `http://screen.bmetech.com/steelmakingScreen/#/robotNew`;
}
// Default URL or alternative URL for other domains
return `http://172.16.20.227/admin/ecoTom/#/robotNew`;
return `http://172.16.20.199/admin/ecoTom/#/robotNew`;
});
......
src/views/login/index.vue
View file @ 6024505a
......@@ -1082,7 +1082,7 @@ export default {
)
.then((result) => {
localStorage.setItem("menuList", JSON.stringify(result.data));
this.$router.push('/dashboard');
this.$router.push('/monitor');
})
.catch((e) => {
});
......
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