Skip to content

D
DC-TOM
Commit 71f6d491 authored by liuyangyang's avatar liuyangyang
Browse files
Options

屏幕编号添加

parent d2bf561f
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 89 deletions
package-lock.json
View file @ 71f6d491
......@@ -1701,8 +1701,9 @@
},
"node_modules/gsap": {
"version": "3.13.0",
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
"integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
"integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
"license": "Standard 'no charge' license: https://gsap.com/standard-license."
},
"node_modules/has-symbols": {
"version": "1.1.0",
......@@ -3460,7 +3461,7 @@
},
"gsap": {
"version": "3.13.0",
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
"integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
},
"has-symbols": {
......
src/style.css
View file @ 71f6d491
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--bg-primary: #101418;
--bg-secondary: #181d21;
--text-primary: #ffffff;
--text-secondary: #8a9199;
--accent: #36f1cd;
--success: #36f1cd;
--warning: #f5b83d;
--danger: #ff4d4d;
--chart-blue: #4e7bfa;
--chart-teal: #36f1cd;
--chart-green: #36f1cd;
--chart-yellow: #f5b83d;
--border-color: #131619;
--panel-bg: #181d21;
--header-bg: #131619;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--bg-primary: #101418;
--bg-secondary: #181d21;
--text-primary: #ffffff;
--text-secondary: #8a9199;
--accent: #36f1cd;
--success: #36f1cd;
--warning: #f5b83d;
--danger: #ff4d4d;
--chart-blue: #4e7bfa;
--chart-teal: #36f1cd;
--chart-green: #36f1cd;
--chart-yellow: #f5b83d;
--border-color: #131619;
--panel-bg: #181d21;
--header-bg: #131619;
}
* {
......@@ -40,17 +40,19 @@
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 1rem;
box-sizing: border-box;
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
.page-container,.my-agency,.equipment-management {
width: 100%;
background: #181d21 !important;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.10);
padding: 1rem;
box-sizing: border-box;
.page-container,
.my-agency,
.equipment-management {
width: 100%;
background: #181d21 !important;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 1rem;
box-sizing: border-box;
}
.view-btn {
......@@ -62,43 +64,63 @@
}
.el-button--primary {
background-color: #2182a0 !important;
border-color: #2182a0 !important;
background-color: #2182a0 !important;
border-color: #2182a0 !important;
}
.login-container .el-form-item {
background: transparent !important;
border: unset !important;
background: transparent !important;
border: unset !important;
}
.login-container .el-input__wrapper {
background: #181d21 !important;
border-radius: 4px !important;
background: #181d21 !important;
border-radius: 4px !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: black !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s;
-webkit-text-fill-color: black !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s;
}
.el-menu {
border-right: unset !important;
.el-menu {
border-right: unset !important;
}
.el-menu-item .is-active{
background: transparent !important;
.el-menu-item .is-active {
background: transparent !important;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #ccc !important;
padding-left: 4px;
color: #ccc !important;
padding-left: 4px;
}
.el-progress-bar__outer {
background-color: #4e4e4e;
}
\ No newline at end of file
background-color: #4e4e4e;
}
.watermark {
position: fixed;
bottom: 40px;
right: 40px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(1px);
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
font-weight: bold;
color: rgba(255, 255, 255, 0.6);
z-index: 999;
pointer-events: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
src/views/dashboard/index.vue
View file @ 71f6d491
......@@ -3,30 +3,54 @@
<div class="header" data-testid="dashboard-header">
<div class="msg-box" data-testid="dashboard-msg-box">
<div class="title">AI智能监测</div>
<msg-item :msgList="msgList" data-testid="dashboard-msg-item"></msg-item>
<msg-item
:msgList="msgList"
data-testid="dashboard-msg-item"
></msg-item>
</div>
<div class="indicators-box" data-testid="dashboard-indicators-box">
<div class="title">综合健康度</div>
<div class="indicators-num" :style="{ color: customColorMethod(average) }" data-testid="dashboard-health-score">{{ average }}%</div>
<div
class="indicators-num"
:style="{ color: customColorMethod(average) }"
data-testid="dashboard-health-score"
>
{{ average }}%
</div>
<div>
<div class="indicators-item">布袋健康度</div>
<el-progress :percentage="bag" :color="customColorMethod" data-testid="dashboard-bag-progress" />
<el-progress
:percentage="bag"
:color="customColorMethod"
data-testid="dashboard-bag-progress"
/>
</div>
<div>
<div class="indicators-item">脉冲阀健康度</div>
<el-progress :percentage="pulseValve" :color="customColorMethod" data-testid="dashboard-pulse-valve-progress" />
<el-progress
:percentage="pulseValve"
:color="customColorMethod"
data-testid="dashboard-pulse-valve-progress"
/>
</div>
<div>
<div class="indicators-item">提升阀健康度</div>
<el-progress :percentage="poppetValve" :color="customColorMethod" data-testid="dashboard-poppet-valve-progress" />
<el-progress
:percentage="poppetValve"
:color="customColorMethod"
data-testid="dashboard-poppet-valve-progress"
/>
</div>
</div>
<div class="line-box" data-testid="dashboard-chart-box">
<div class="title">健康度指数</div>
<chart-line :chartData="chartData" data-testid="dashboard-chart-line"></chart-line>
<chart-line
:chartData="chartData"
data-testid="dashboard-chart-line"
></chart-line>
</div>
</div>
<div class="watermark">5</div>
<div class="map-box" data-testid="dashboard-map-box">
<map-svg :mapList="mapList" data-testid="dashboard-map-svg"></map-svg>
</div>
......@@ -35,7 +59,12 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { getHealthOverview, getHealthStatistic, getExceptionMonitor, getDusterAlarm } from "@/request/api/dashboard";
import {
getHealthOverview,
getHealthStatistic,
getExceptionMonitor,
getDusterAlarm,
} from "@/request/api/dashboard";
import msgItem from "./components/msg-item.vue";
import chartLine from "./components/chart-line.vue";
import mapSvg from "./components/map-svg.vue";
......@@ -51,10 +80,9 @@ const customColors = [
{ color: "#08c733", percentage: 100 },
];
const chartData = ref(null)
const chartData = ref(null);
const msgList = ref([
]);
const msgList = ref([]);
const mapList = ref([]);
const customColorMethod = (percentage) => {
......@@ -68,33 +96,31 @@ const customColorMethod = (percentage) => {
};
const healthOverview = () => {
getHealthOverview().then(res => {
average.value = Number(res.data.average.split('%')[0])
bag.value = Number(res.data.bag.split('%')[0])
pulseValve.value = Number(res.data.pulseValve.split('%')[0])
poppetValve.value = Number(res.data.poppetValve.split('%')[0])
})
}
getHealthOverview().then((res) => {
average.value = Number(res.data.average.split("%")[0]);
bag.value = Number(res.data.bag.split("%")[0]);
pulseValve.value = Number(res.data.pulseValve.split("%")[0]);
poppetValve.value = Number(res.data.poppetValve.split("%")[0]);
});
};
const healthStatistic = () => {
getHealthStatistic().then(res => {
getHealthStatistic().then((res) => {
chartData.value = res.data;
})
});
};
const exceptionMonitor = () => {
getExceptionMonitor().then(res => {
getExceptionMonitor().then((res) => {
msgList.value = res.data;
})
}
});
};
const handleDusterAlarm = () => {
getDusterAlarm().then(res => {
getDusterAlarm().then((res) => {
mapList.value = res.data;
})
}
});
};
onMounted(async () => {
healthOverview();
......@@ -103,7 +129,7 @@ onMounted(async () => {
handleDusterAlarm();
});
onBeforeUnmount(() => { });
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
......@@ -123,7 +149,7 @@ onBeforeUnmount(() => { });
justify-content: space-between;
height: 15rem;
&>div {
& > div {
background: #181d21;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
......@@ -134,7 +160,7 @@ onBeforeUnmount(() => { });
.title {
font-size: 18px;
font-weight: normal;
color: #CCC;
color: #ccc;
line-height: 22px;
margin-bottom: 10px;
}
......
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