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