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 @@ ...@@ -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 @ 6024505a
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,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/layout/index.vue
View file @ 6024505a
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
@toggleClick="toggleSideBar" @toggleClick="toggleSideBar"
:is-active="sidebar" :is-active="sidebar"
/> />
<h3>DC-TOM管理平台</h3> <h3>E-Core / DC-TOM 管理平台</h3>
<div class="go-tom" @click="goTom">EcoTOM 三流合一</div> <div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div>
<div class="right-block"> <div class="right-block">
<el-dropdown class="right-menu-item" trigger="click"> <el-dropdown class="right-menu-item" trigger="click">
<div class="user-info"> <div class="user-info">
...@@ -90,6 +90,9 @@ export default { ...@@ -90,6 +90,9 @@ export default {
const route = useRoute(); const route = useRoute();
const breadcrumbList = ref([]); const breadcrumbList = ref([]);
const currentDomain = window.location.hostname;
// 获取当前路由的面包屑数据 // 获取当前路由的面包屑数据
const getBreadcrumbData = () => { const getBreadcrumbData = () => {
breadcrumbList.value = []; breadcrumbList.value = [];
...@@ -151,6 +154,7 @@ export default { ...@@ -151,6 +154,7 @@ export default {
sidebar, sidebar,
toggleSideBar, toggleSideBar,
goTom, goTom,
currentDomain,
}; };
}, },
created() {}, created() {},
......
src/utils/chart.js
View file @ 6024505a
import * as echarts from "echarts"; import * as echarts from "echarts";
// 设置图表主题颜色 // 设置图表主题颜色
const chartColors = { const chartColors = {
background: '#181d21', background: '#181d21',
textColor: '#8a9199', textColor: '#8a9199',
axisLineColor: '#2a2f33', axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33', splitLineColor: '#2a2f33',
blue: '#4e7bfa', blue: '#4e7bfa',
teal: '#36f1cd', teal: '#36f1cd',
green: '#36f1cd', green: '#36f1cd',
yellow: '#f5b83d', yellow: '#f5b83d',
red: '#ff4d4d', red: '#ff4d4d',
purple: '#6366f1' purple: '#6366f1'
}; };
// 通用图表配置 // 通用图表配置
const commonConfig = { const commonConfig = {
backgroundColor: chartColors.background, backgroundColor: chartColors.background,
textStyle: { textStyle: {
color: chartColors.textColor color: chartColors.textColor
}, },
legend: { legend: {
icon: 'circle', icon: 'circle',
textStyle: { textStyle: {
color: chartColors.textColor color: chartColors.textColor
} }
}, },
xAxis: { xAxis: {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: chartColors.axisLineColor color: chartColors.axisLineColor
} }
}, },
axisLabel: { axisLabel: {
color: chartColors.textColor color: chartColors.textColor
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: chartColors.splitLineColor, color: chartColors.splitLineColor,
type: 'dashed' type: 'dashed'
} }
} }
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: chartColors.axisLineColor color: chartColors.axisLineColor
} }
}, },
axisLabel: { axisLabel: {
color: chartColors.textColor color: chartColors.textColor
}, },
nameTextStyle: { nameTextStyle: {
color: chartColors.textColor color: chartColors.textColor
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: chartColors.splitLineColor, color: chartColors.splitLineColor,
type: 'dashed' type: 'dashed'
} }
} }
}, },
tooltip: { tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)', backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33', borderColor: '#2a2f33',
textStyle: { textStyle: {
color: '#fff' color: '#fff'
} }
} }
}; };
export const getLineOption = (xData = [], seriesData = []) => ({ export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)', backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33', borderColor: '#2a2f33',
textStyle: { textStyle: {
color: '#fff' color: '#fff'
} }
}, },
grid: { grid: {
left: "3%", left: "3%",
right: "4%", right: "4%",
...@@ -252,11 +252,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -252,11 +252,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
symbol: 'circle', symbol: 'circle',
symbolSize: 0, symbolSize: 0,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: chartColors.teal color: chartColors.teal
}, },
itemStyle: { itemStyle: {
color: chartColors.teal color: chartColors.teal
}, },
areaStyle: { areaStyle: {
color: { color: {
...@@ -283,14 +283,29 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -283,14 +283,29 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
], ],
}); });
export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数", unit = '') => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)', backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.1)', borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 2, borderWidth: 2,
textStyle: { 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: { grid: {
...@@ -312,6 +327,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康 ...@@ -312,6 +327,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
}, },
xAxis: { xAxis: {
type: "category", type: "category",
name: "天",
nameTextStyle: {
color: '#909399',
fontSize: 12,
},
axisTick: { axisTick: {
show: false, show: false,
}, },
...@@ -327,6 +347,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康 ...@@ -327,6 +347,11 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: unit,
nameTextStyle: {
color: '#909399',
fontSize: 12,
},
axisLabel: { axisLabel: {
color: "#909399", color: "#909399",
}, },
...@@ -359,14 +384,73 @@ export const getGaugeOption = (option) => { ...@@ -359,14 +384,73 @@ export const getGaugeOption = (option) => {
radius: "90%", radius: "90%",
min: option.min || 0, min: option.min || 0,
max: option.max || 100, max: option.max || 100,
splitNumber: 8, splitNumber: 5,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 30, width: 20,
color: [ color: [
[0.2, "#fd666d"], [
[0.8, "#48cd4d"], 0,
[1, "#fd666d"], 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) => { ...@@ -376,7 +460,7 @@ export const getGaugeOption = (option) => {
} }
}, },
axisTick: { axisTick: {
distance: -30, distance: -20,
length: 10, length: 10,
lineStyle: { lineStyle: {
color: "#909399", color: "#909399",
...@@ -384,13 +468,13 @@ export const getGaugeOption = (option) => { ...@@ -384,13 +468,13 @@ export const getGaugeOption = (option) => {
}, },
}, },
splitLine: { splitLine: {
distance: -30, distance: -20,
length: 38, length: 24,
lineStyle: { lineStyle: {
color: '#909399', color: '#909399',
width: 2 width: 2
}, },
}, },
axisLabel: { axisLabel: {
color: '#909399', 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> <template>
<<<<<<< HEAD
<div class="dust-box" data-testid="dust-monitoring-container"> <div class="dust-box" data-testid="dust-monitoring-container">
<div class="top-box" data-testid="dust-monitoring-filters"> <div class="top-box" data-testid="dust-monitoring-filters">
<el-form <el-form
...@@ -36,6 +37,21 @@ ...@@ -36,6 +37,21 @@
:disabled-date="disabledFn" :disabled-date="disabledFn"
data-testid="dust-monitoring-date-picker" 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-item>
</el-form> </el-form>
</div> </div>
...@@ -46,12 +62,17 @@ ...@@ -46,12 +62,17 @@
<div :id="'chart' + index" class="chart-item"></div> <div :id="'chart' + index" class="chart-item"></div>
</div> </div>
</div> </div>
<<<<<<< HEAD
<div class="warn-info" data-testid="dust-monitoring-warnings"> <div class="warn-info" data-testid="dust-monitoring-warnings">
<warnCom <warnCom
title="告警" title="告警"
:listInfo="warnInfoList" :listInfo="warnInfoList"
@jumpPage="toWarnDetail" @jumpPage="toWarnDetail"
></warnCom> ></warnCom>
=======
<div class="warn-info">
<warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom>
>>>>>>> ba8db0cce650168320137278b5c55009744aec8e
</div> </div>
</div> </div>
<div class="right-box" data-testid="dust-monitoring-info-section"> <div class="right-box" data-testid="dust-monitoring-info-section">
...@@ -65,9 +86,9 @@ ...@@ -65,9 +86,9 @@
<div class="dust-info" data-testid="dust-monitoring-info-grid"> <div class="dust-info" data-testid="dust-monitoring-info-grid">
<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>
...@@ -78,22 +99,13 @@ ...@@ -78,22 +99,13 @@
</div> </div>
<div class="position-info" data-testid="dust-monitoring-status-matrix"> <div class="position-info" data-testid="dust-monitoring-status-matrix">
<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">
...@@ -120,12 +132,17 @@ ...@@ -120,12 +132,17 @@
</div> </div>
</div> </div>
</div> </div>
<<<<<<< HEAD
<div class="warn-info" data-testid="dust-monitoring-closed-loops"> <div class="warn-info" data-testid="dust-monitoring-closed-loops">
<warnCom <warnCom
title="闭环" title="闭环"
:listInfo="closedLoopInfoList" :listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail" @jumpPage="toCircleDetail"
></warnCom> ></warnCom>
=======
<div class="warn-info">
<warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom>
>>>>>>> ba8db0cce650168320137278b5c55009744aec8e
</div> </div>
</div> </div>
</div> </div>
...@@ -141,6 +158,7 @@ import moment from "moment"; ...@@ -141,6 +158,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({
...@@ -172,33 +190,19 @@ const disabledFn = (current) => { ...@@ -172,33 +190,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([]);
...@@ -293,7 +297,7 @@ const dustInfo = reactive([ ...@@ -293,7 +297,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",
...@@ -309,84 +313,11 @@ const dustInfo = reactive([ ...@@ -309,84 +313,11 @@ const dustInfo = reactive([
key: "pulseDetectorNum", 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 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);
...@@ -425,7 +356,7 @@ const getHealthIndex = () => { ...@@ -425,7 +356,7 @@ const getHealthIndex = () => {
xData.push(item.time); xData.push(item.time);
seriesData.push(item.healthIndex); seriesData.push(item.healthIndex);
}); });
const option = getLineOption2(xData, seriesData, "健康度指数（%）"); const option = getLineOption2(xData, seriesData, "除尘器健康度指数", "%");
initChart(chartData[0], option, "chart0"); initChart(chartData[0], option, "chart0");
} }
}); });
...@@ -450,7 +381,7 @@ const getPressure = () => { ...@@ -450,7 +381,7 @@ const getPressure = () => {
xData.push(item.time); xData.push(item.time);
seriesData.push(item.pressureDiff); seriesData.push(item.pressureDiff);
}); });
const option = getLineOption2(xData, seriesData, "压力差（kpa）"); const option = getLineOption2(xData, seriesData, "压力差", "kPa");
initChart(chartData[1], option, "chart1"); initChart(chartData[1], option, "chart1");
} }
}); });
...@@ -475,7 +406,7 @@ const getEnergy = () => { ...@@ -475,7 +406,7 @@ const getEnergy = () => {
xData.push(item.time); xData.push(item.time);
seriesData.push(item.energyConsumption); seriesData.push(item.energyConsumption);
}); });
const option = getLineOption2(xData, seriesData, "能耗（kwh）"); const option = getLineOption2(xData, seriesData, "能耗", "kW·h");
initChart(chartData[2], option, "chart2"); initChart(chartData[2], option, "chart2");
} }
}); });
...@@ -499,6 +430,32 @@ const getDustDetail = () => { ...@@ -499,6 +430,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) {
...@@ -520,82 +477,82 @@ const getDustDetail = () => { ...@@ -520,82 +477,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: "压差", 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);
} }
: "", : "",
}) })
); );
...@@ -603,10 +560,10 @@ const getDustDetail = () => { ...@@ -603,10 +560,10 @@ const getDustDetail = () => {
indicatorTwoInstance, indicatorTwoInstance,
"indicatorTwo", "indicatorTwo",
getGaugeOption({ getGaugeOption({
value: parseInt(dustInfo[1].value), value: parseFloat(dustInfo[1].value),
chartName: "粉尘浓度", chartName: "排口浓度" + '(' + dustInfo[1].unit + ')',
min: 5, min: 0,
max: 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);
}, },
...@@ -678,29 +635,28 @@ const resizeFun = () => { ...@@ -678,29 +635,28 @@ const resizeFun = () => {
onMounted(() => { onMounted(() => {
getDusterNameEnum(); getDusterNameEnum();
window.addEventListener("resize", resizeFun); window.addEventListener("resize", resizeFun);
refeshFun();
getAllMouseEvent();
// 启动实时监测
startRealTimeMonitoring();
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", resizeFun); window.removeEventListener("resize", resizeFun);
cancelAllMouseEvent();
chartRemoveEvent(); chartRemoveEvent();
// 停止实时监测
stopRealTimeMonitoring();
}); });
watch( watch(
() => form.dusterNo, () => form.dusterNo,
() => { () => {
getHealthIndex(); startRealTimeMonitoring();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
} }
); );
watch( watch(
() => form.dateValue, () => form.dateValue,
() => { () => {
getHealthIndex(); startRealTimeMonitoring();
getPressure();
getEnergy();
getDustDetail();
getAlarmInfo();
} }
); );
const dusterName = computed(() => { const dusterName = computed(() => {
...@@ -716,9 +672,78 @@ const handleStatusDotClick = () => { ...@@ -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> </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);
...@@ -730,11 +755,13 @@ $borderColor: #3a3f45; ...@@ -730,11 +755,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;
...@@ -745,8 +772,10 @@ $borderColor: #3a3f45; ...@@ -745,8 +772,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);
...@@ -754,9 +783,11 @@ $borderColor: #3a3f45; ...@@ -754,9 +783,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%;
...@@ -766,14 +797,17 @@ $borderColor: #3a3f45; ...@@ -766,14 +797,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%;
...@@ -787,11 +821,13 @@ $borderColor: #3a3f45; ...@@ -787,11 +821,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%;
...@@ -805,6 +841,7 @@ $borderColor: #3a3f45; ...@@ -805,6 +841,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;
...@@ -814,6 +851,7 @@ $borderColor: #3a3f45; ...@@ -814,6 +851,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;
...@@ -823,6 +861,7 @@ $borderColor: #3a3f45; ...@@ -823,6 +861,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);
...@@ -837,24 +876,29 @@ $borderColor: #3a3f45; ...@@ -837,24 +876,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;
...@@ -862,17 +906,20 @@ $borderColor: #3a3f45; ...@@ -862,17 +906,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;
...@@ -880,28 +927,96 @@ $borderColor: #3a3f45; ...@@ -880,28 +927,96 @@ $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 10px 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: #67c23a; // 绿色 background-color: rgb(103, 194, 58); // 绿色
animation: pulse-glow1 2s ease-in-out infinite;
} }
.status-warning { .status-warning {
background-color: #e6a23c; // 橙色 background-color: rgb(230, 162, 60); // 橙色
animation: pulse-glow2 2s ease-in-out infinite;
} }
.status-error { .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 { .other-info {
padding: 20px; padding: 20px;
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;
...@@ -910,6 +1025,7 @@ $borderColor: #3a3f45; ...@@ -910,6 +1025,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;
...@@ -917,26 +1033,31 @@ $borderColor: #3a3f45; ...@@ -917,26 +1033,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;
...@@ -945,17 +1066,20 @@ $borderColor: #3a3f45; ...@@ -945,17 +1066,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;
......
src/views/intermediate/index.vue
View file @ 6024505a
...@@ -24,10 +24,10 @@ const iframeRef = ref(null); ...@@ -24,10 +24,10 @@ const iframeRef = ref(null);
const url = computed(() => { const url = computed(() => {
const currentDomain = window.location.hostname; const currentDomain = window.location.hostname;
if (currentDomain.includes('screen.bmetech.com')) { 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 // 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 { ...@@ -1082,7 +1082,7 @@ export default {
) )
.then((result) => { .then((result) => {
localStorage.setItem("menuList", JSON.stringify(result.data)); localStorage.setItem("menuList", JSON.stringify(result.data));
this.$router.push('/dashboard'); this.$router.push('/monitor');
}) })
.catch((e) => { .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