Skip to content

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

feat(*): 除尘器监控样式主题修改

parent ee53da0e
Hide whitespace changes
Inline Side-by-side
Showing with 475 additions and 99 deletions
src/layout/index.vue
View file @ 5a77e1a8
...@@ -239,12 +239,13 @@ export default { ...@@ -239,12 +239,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding: 1.25rem 1.25rem 2rem; padding: 1.25rem 1.25rem 2rem;
background: #e7eef5; background: #000;
} }
} }
.extend { .extend {
width: calc(100% - 63px); width: calc(100% - 63px);
} }
} }
</style> </style>
<style> <style>
......
src/main.js
View file @ 5a77e1a8
import { createApp } from "vue"; import { createApp } from "vue";
import "./style.css"; import "./style.css";
import "./theme.scss";
import App from "./App.vue"; import App from "./App.vue";
import { router } from "./router"; import { router } from "./router";
import "@/router/routePermission.js"; import "@/router/routePermission.js";
......
src/style.css
View file @ 5a77e1a8
: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;
}
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.page-container { .page-container {
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13,15,18,0.10); box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 1rem; padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
.view-btn { .view-btn {
color: #2182a0 !important; color: #2182a0 !important;
} }
.edit-btn { .edit-btn {
color: #2182a0 !important; color: #2182a0 !important;
} }
.el-button--primary { .el-button--primary {
background-color: #2182a0 !important; background-color: #2182a0 !important;
border-color: #2182a0 !important; border-color: #2182a0 !important;
} }
\ No newline at end of file
src/theme.scss 0 → 100644
View file @ 5a77e1a8
.el-form-item__label {
font-size: 14px;
color: #909399 !important;
}
.el-select {
width: 230px;
.el-select__placeholder {
color: #d9dbdc !important;
}
.el-select__wrapper {
background-color: var(--bg-secondary) !important;
box-shadow: 0 0 0 1px #2a2a2a inset !important;
}
.el-input {
background-color: var(--bg-secondary);
input {
color: #d9dbdc;
background-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
}
}
.el-select-dropdown {
background-color: var(--bg-secondary);
border: none;
.el-select-dropdown__item {
color: #d9dbdc;
&.selected {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
}
.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before {
background: var(--bg-secondary) !important;
border: 1px solid var(--bg-secondary) !important;
}
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.el-select-dropdown__item {
color: #d9dbdc;
&.selected {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1);
}
.el-popper__arrow {
background-color: #253a67 !important;
}
.el-range-editor {
background-color: var(--bg-secondary) !important;
border-color: var(--bg-secondary) !important;
.el-range__icon {
display: none !important;
}
.el-range-input {
color: #d9dbdc !important;
background-color: transparent !important;
font-size: 15px !important;
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
}
.el-range-separator {
color: rgba(255, 255, 255, 0.7) !important;
}
}
.el-icon {
color: rgba(255, 255, 255, 0.7) !important;
}
.el-date-editor.el-input__wrapper {
box-shadow: 0 0 0 1px #2a2a2a inset !important;
}
.el-popper.is-light {
border: 1px solid #181d21 !important;
}
.date-picker-popper {
border: 1px solid #181d21 !important;
box-shadow: #181d21 !important;
.el-date-editor {
background: #00000040;
box-shadow: 0 0 0 2px #181d21 inset !important;
}
.el-input__wrapper {
box-shadow: 0 0 0 1px #535252 inset !important;
}
.el-date-range-picker__time-header {
border-bottom: 1px solid #8a9199 !important;
}
.el-picker-panel {
color: #d9dbdc !important;
}
.el-picker-panel__body {
background: #181d21;
}
.el-date-range-picker__content.is-left {
border-right: 1px solid #181d21 !important;
}
.el-date-table th {
border-bottom: 1px solid #181d21 !important;
}
.el-date-table th {
color: #d9dbdc !important;
}
.el-date-table td.in-range .el-date-table-cell {
background-color: #181d21 !important;
}
.el-date-editor .el-range__icon,
.el-date-editor .el-range-separator,
.el-date-editor .el-range-input {
color: #d9dbdc !important;
font-size: 14px !important;
}
.el-picker-panel__footer {
background-color: #181d21 !important;
border-top-color: #181d21 !important;
}
.el-input__wrapper {
background-color: #181d21 !important;
}
.el-button.is-text {
color: #d9dbdc !important;
}
.el-button.is-plain {
color: #4e7bfa !important;
background-color: rgba(78, 123, 250, 0.2) !important;
border-color: #4e7bfa !important;
}
.el-button.is-text:not(.is-disabled):hover {
background-color: #9b9a9a !important;
}
.el-select__wrapper {
background-color: #181d21 !important;
}
.el-input__inner {
color: #d9dbdc !important;
}
.el-picker-panel .el-time-panel {
background-color: #181d21 !important;
border-color: #181d21 !important;
}
.el-time-panel__footer {
border-color: #181d21 !important;
}
.el-time-spinner__item.is-active:not(.is-disabled) {
color: #d9dbdc !important;
}
.el-select-dropdown {
background-color: #181d21 !important;
}
.el-select-dropdown__item {
color: #d9dbdc !important;
}
.el-select-dropdown__item .is-hovering {
color: #181d21 !important;
}
.date-picker-popper .el-picker-panel__body {
background-color: #181d21 !important;
}
}
\ No newline at end of file
src/utils/chart.js
View file @ 5a77e1a8
...@@ -3,7 +3,13 @@ import { color } from "echarts"; ...@@ -3,7 +3,13 @@ import { color } from "echarts";
export const getLineOption = (xData = [], seriesData = []) => ({ export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}, },
grid: { grid: {
left: "3%", left: "3%",
right: "4%", right: "4%",
...@@ -18,6 +24,9 @@ export const getLineOption = (xData = [], seriesData = []) => ({ ...@@ -18,6 +24,9 @@ export const getLineOption = (xData = [], seriesData = []) => ({
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
itemGap: 10, itemGap: 10,
textStyle: {
color: '#fff'
}
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -26,22 +35,22 @@ export const getLineOption = (xData = [], seriesData = []) => ({ ...@@ -26,22 +35,22 @@ export const getLineOption = (xData = [], seriesData = []) => ({
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
data: xData, data: xData,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
type: "dashed", type: "dashed",
}, },
}, },
...@@ -74,6 +83,9 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({ ...@@ -74,6 +83,9 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
itemWidth: 20, itemWidth: 20,
itemHeight: 10, itemHeight: 10,
itemGap: 10, itemGap: 10,
textStyle: {
color: '#fff'
}
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -82,22 +94,22 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({ ...@@ -82,22 +94,22 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
data: xData, data: xData,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
type: "dashed", type: "dashed",
}, },
}, },
...@@ -120,7 +132,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -120,7 +132,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
axisPointer: { axisPointer: {
type: "line", type: "line",
lineStyle: { lineStyle: {
color: "#6E7079", color: "#909399",
width: 1, width: 1,
}, },
}, },
...@@ -138,11 +150,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -138,11 +150,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
fontSize: 12, fontSize: 12,
interval: "auto", interval: "auto",
rotate: 0, rotate: 0,
...@@ -161,12 +173,12 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -161,12 +173,12 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
// max: 600, // max: 600,
// interval: 200, // interval: 200,
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
formatter: "{value}", formatter: "{value}",
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
type: "dashed", type: "dashed",
}, },
}, },
...@@ -211,8 +223,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -211,8 +223,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { backgroundColor: 'rgba(24, 29, 33, 0.9)',
// type: "none" borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 2,
textStyle: {
color: '#fff'
} }
}, },
grid: { grid: {
...@@ -228,6 +243,9 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康 ...@@ -228,6 +243,9 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
itemGap: 10, itemGap: 10,
textStyle: {
color: '#fff'
}
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -236,22 +254,22 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康 ...@@ -236,22 +254,22 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
data: xData, data: xData,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "rgba(0,0,0,0.6)", color: "#909399",
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#E9ECF2", color: "#3a3f45",
type: "dashed", type: "dashed",
}, },
}, },
...@@ -298,7 +316,7 @@ export const getGaugeOption = (option) => { ...@@ -298,7 +316,7 @@ export const getGaugeOption = (option) => {
distance: -30, distance: -30,
length: 10, length: 10,
lineStyle: { lineStyle: {
color: "#fff", color: "#909399",
width: 2, width: 2,
}, },
}, },
...@@ -306,13 +324,13 @@ export const getGaugeOption = (option) => { ...@@ -306,13 +324,13 @@ export const getGaugeOption = (option) => {
distance: -30, distance: -30,
length: 38, length: 38,
lineStyle: { lineStyle: {
color: '#fff', color: '#909399',
width: 2 width: 2
}, },
}, },
axisLabel: { axisLabel: {
color: 'inherit', color: '#909399',
fontSize: 10, fontSize: 10,
distance: 30, distance: 30,
rotate: "tangential", rotate: "tangential",
...@@ -322,6 +340,7 @@ export const getGaugeOption = (option) => { ...@@ -322,6 +340,7 @@ export const getGaugeOption = (option) => {
offsetCenter: [0, "70%"], offsetCenter: [0, "70%"],
fontSize: 14, fontSize: 14,
fontWeight: "bolder", fontWeight: "bolder",
color: "#fff"
}, },
detail: { detail: {
fontSize: 20, fontSize: 20,
...@@ -330,7 +349,7 @@ export const getGaugeOption = (option) => { ...@@ -330,7 +349,7 @@ export const getGaugeOption = (option) => {
formatter: function (value) { formatter: function (value) {
return value; return value;
}, },
color: "inherit", color: "#fff",
}, },
data: [ data: [
{ {
......
src/views/dustMonitoring/components/healthyProgress.vue
View file @ 5a77e1a8
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- 方形进度条 --> <!-- 方形进度条 -->
<div class="healthy-progress"> <div class="healthy-progress">
<div <div
class="h-8 bg-slate-800/60 rounded overflow-hidden border border-slate-700 healthy-progress-bar" class="h-8 rounded overflow-hidden border healthy-progress-bar"
:class="borderColor" :class="borderColor"
> >
<div <div
...@@ -87,15 +87,15 @@ onMounted(() => { ...@@ -87,15 +87,15 @@ onMounted(() => {
<style scoped> <style scoped>
.box-color-60 { .box-color-60 {
background-color: #fff; background-color: #181d21;
border-color: rgba(255, 106, 106, 1); border-color: rgba(255, 106, 106, 1);
} }
.box-color-90 { .box-color-90 {
background-color: #fff; background-color: #181d21;
border-color: rgba(245, 199, 1, 1); border-color: rgba(245, 199, 1, 1);
} }
.box-color-default { .box-color-default {
background-color: #fff; background-color: #181d21;
border-color: rgba(8, 199, 51, 1); border-color: rgba(8, 199, 51, 1);
} }
.healthy-text-position { .healthy-text-position {
...@@ -105,6 +105,7 @@ onMounted(() => { ...@@ -105,6 +105,7 @@ onMounted(() => {
left: 0; left: 0;
transform: translateY(-50%); transform: translateY(-50%);
padding-left: 10px; padding-left: 10px;
color: #fff;
} }
.healthy-progress { .healthy-progress {
height: calc(100%); height: calc(100%);
...@@ -121,7 +122,7 @@ onMounted(() => { ...@@ -121,7 +122,7 @@ onMounted(() => {
rgba(255, 106, 106, 1), rgba(255, 106, 106, 1),
rgba(255, 106, 106, 1) 10px, rgba(255, 106, 106, 1) 10px,
rgba(255, 106, 106, 1) 15px, rgba(255, 106, 106, 1) 15px,
rgba(255, 255, 255, 0.1) 20px rgba(255, 106, 106, 0.3) 20px
); );
background-size: 28px 28px; background-size: 28px 28px;
} }
...@@ -131,7 +132,7 @@ onMounted(() => { ...@@ -131,7 +132,7 @@ onMounted(() => {
rgba(245, 199, 1, 1), rgba(245, 199, 1, 1),
rgba(245, 199, 1, 1) 10px, rgba(245, 199, 1, 1) 10px,
rgba(245, 199, 1, 1) 15px, rgba(245, 199, 1, 1) 15px,
rgba(255, 255, 255, 0.1) 20px rgba(245, 199, 1, 0.3) 20px
); );
background-size: 28px 28px; background-size: 28px 28px;
} }
...@@ -141,7 +142,7 @@ onMounted(() => { ...@@ -141,7 +142,7 @@ onMounted(() => {
rgba(8, 199, 51, 1), rgba(8, 199, 51, 1),
rgba(8, 199, 51, 1) 10px, rgba(8, 199, 51, 1) 10px,
rgba(8, 199, 51, 1) 15px, rgba(8, 199, 51, 1) 15px,
rgba(8, 199, 51, 0.1) 20px rgba(8, 199, 51, 0.3) 20px
); );
background-size: 28px 28px; background-size: 28px 28px;
} }
......
src/views/dustMonitoring/components/warn.vue
View file @ 5a77e1a8
...@@ -51,10 +51,12 @@ const toDetail = () => { ...@@ -51,10 +51,12 @@ const toDetail = () => {
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
padding: 4px 0px 4px 2px; padding: 4px 0px 4px 2px;
box-shadow: rgba(53, 58, 62, 0.04) 0px 1px 10px 0px, box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px,
rgba(53, 58, 62, 0.04) 0px 2px 4px 0px; rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
font-size: 14px; font-size: 14px;
color: #333; color: #fff;
background-color: #232a31;
border-radius: 4px;
img { img {
width: 20px; width: 20px;
height: auto; height: auto;
...@@ -65,7 +67,7 @@ const toDetail = () => { ...@@ -65,7 +67,7 @@ const toDetail = () => {
.content::-webkit-scrollbar { .content::-webkit-scrollbar {
width: 0px; width: 0px;
background-color: rgba(13, 15, 18, 0.1); background-color: rgba(58, 63, 69, 0.5);
} }
.layout1 { .layout1 {
......
src/views/dustMonitoring/index.vue
View file @ 5a77e1a8
...@@ -25,9 +25,11 @@ ...@@ -25,9 +25,11 @@
<el-form-item label="分析时间"> <el-form-item label="分析时间">
<el-date-picker <el-date-picker
v-model="form.dateValue" v-model="form.dateValue"
type="daterange" type="datetimerange"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
style="width: 450px"
popper-class="date-picker-popper"
@calendar-change="calendarChange" @calendar-change="calendarChange"
@visible-change="visibleChange" @visible-change="visibleChange"
:disabled-date="disabledFn" :disabled-date="disabledFn"
...@@ -62,8 +64,8 @@ ...@@ -62,8 +64,8 @@
<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 >{{ item.value }} <span class="unit">({{ item.unit }})</span
>） >
</span> </span>
</div> </div>
<div></div> <div></div>
...@@ -209,7 +211,7 @@ const chartLinkageFun = (target) => { ...@@ -209,7 +211,7 @@ const chartLinkageFun = (target) => {
item.off("showTip"); item.off("showTip");
item.off("globalout"); item.off("globalout");
item.on("globalout", function () { item.on("globalout", function () {
instanceList.forEach((item_, index) => { instanceList.forEach((item_) => {
item_.dispatchAction({ item_.dispatchAction({
type: "hideTip", type: "hideTip",
}); });
...@@ -284,24 +286,24 @@ const dustInfo = reactive([ ...@@ -284,24 +286,24 @@ const dustInfo = reactive([
{ {
label: "压差", label: "压差",
value: "0.0", value: "0.0",
unit: "", unit: "kPa",
key: "pressureDiff", key: "pressureDiff",
unitKey: "pressureDiffUnit", unitKey: "pressureDiffUnit",
}, },
{ {
label: "粉尘浓度", label: "粉尘浓度",
value: "0.0", value: "0.0",
unit: "", unit: "mg/m³",
key: "dustConcentration", key: "dustConcentration",
unitKey: "dustConcentrationUnit", unitKey: "dustConcentrationUnit",
}, },
{ label: "电磁阀数量", value: "0.0", unit: "", key: "valveNum" }, { label: "电磁阀数量", value: "0.0", unit: "个", key: "valveNum" },
{ label: "仓室数量", value: "0.0", unit: "", key: "compartNum" }, { label: "仓室数量", value: "0.0", unit: "个", key: "compartNum" },
{ label: "布袋检测仪数量", value: "0.0", unit: "", key: "bagDetectorNum" }, { label: "布袋检测仪数量", value: "0.0", unit: "个", key: "bagDetectorNum" },
{ {
label: "脉冲检测仪数量", label: "脉冲检测仪数量",
value: "0.0", value: "0.0",
unit: "", unit: "个",
key: "pulseDetectorNum", key: "pulseDetectorNum",
}, },
]); ]);
...@@ -714,7 +716,7 @@ const handleStatusDotClick = () => { ...@@ -714,7 +716,7 @@ const handleStatusDotClick = () => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$borderColor: #bbbdc391; $borderColor: #3a3f45;
.dust-box { .dust-box {
width: 100%; width: 100%;
height: calc(100% - 14px); height: calc(100% - 14px);
...@@ -724,24 +726,28 @@ $borderColor: #bbbdc391; ...@@ -724,24 +726,28 @@ $borderColor: #bbbdc391;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// background-color: #181d21;
color: #909399;
} }
.top-box { .top-box {
width: 100%;
padding-top: 18px; padding-top: 18px;
padding-left: 10px; padding-left: 10px;
background: #fff; box-sizing: border-box;
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(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(13, 15, 18, 0.1); border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
width: 100%; width: 100%;
height: 63vh; height: 63vh;
background: #fff; background: #181d21;
.chart-box { .chart-box {
width: 100%; width: 100%;
height: 31%; height: 31%;
...@@ -752,6 +758,15 @@ $borderColor: #bbbdc391; ...@@ -752,6 +758,15 @@ $borderColor: #bbbdc391;
} }
} }
} }
.value {
color: #fff;
}
.unit {
color: #909399;
}
.right-box { .right-box {
width: 50%; width: 50%;
...@@ -759,9 +774,9 @@ $borderColor: #bbbdc391; ...@@ -759,9 +774,9 @@ $borderColor: #bbbdc391;
width: 100%; width: 100%;
height: 5vh; height: 5vh;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
background: #fff; background: #181d21;
padding: 1%; padding: 1%;
box-sizing: border-box; box-sizing: border-box;
.battery { .battery {
...@@ -774,13 +789,13 @@ $borderColor: #bbbdc391; ...@@ -774,13 +789,13 @@ $borderColor: #bbbdc391;
width: 100%; width: 100%;
height: calc(58vh - 10px); height: calc(58vh - 10px);
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #181d21;
position: relative; position: relative;
.dust-title { .dust-title {
text-align: center; text-align: center;
...@@ -789,10 +804,11 @@ $borderColor: #bbbdc391; ...@@ -789,10 +804,11 @@ $borderColor: #bbbdc391;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid $borderColor; border-bottom: 1px solid $borderColor;
width: 100%; width: 100%;
color: #fff;
} }
.dust-info { .dust-info {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #e7eef5; background: #232a31;
border-radius: 8px; border-radius: 8px;
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
...@@ -805,7 +821,7 @@ $borderColor: #bbbdc391; ...@@ -805,7 +821,7 @@ $borderColor: #bbbdc391;
box-sizing: border-box; box-sizing: border-box;
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
background: white; background: #181d21;
border-radius: 6px; border-radius: 6px;
height: 35px; height: 35px;
font-size: 14px; font-size: 14px;
...@@ -813,7 +829,7 @@ $borderColor: #bbbdc391; ...@@ -813,7 +829,7 @@ $borderColor: #bbbdc391;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.label { .label {
color: #4e5058; color: #909399;
} }
} }
.indicator-box { .indicator-box {
...@@ -835,10 +851,7 @@ $borderColor: #bbbdc391; ...@@ -835,10 +851,7 @@ $borderColor: #bbbdc391;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
// box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842); box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px
0px;
// box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
} }
.part { .part {
display: flex; display: flex;
...@@ -879,7 +892,7 @@ $borderColor: #bbbdc391; ...@@ -879,7 +892,7 @@ $borderColor: #bbbdc391;
&-item { &-item {
padding: 10px; padding: 10px;
height: 70px; height: 70px;
background: #e7eef5; background: #232a31;
border-radius: 6px; border-radius: 6px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
...@@ -888,24 +901,23 @@ $borderColor: #bbbdc391; ...@@ -888,24 +901,23 @@ $borderColor: #bbbdc391;
width: 0; width: 0;
} }
.label { .label {
color: #4e5058; color: #909399;
}
.value {
} }
} }
} }
.part2::-webkit-scrollbar { .part2::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: rgba(13, 15, 18, 0.1); background-color: rgba(58, 63, 69, 0.5);
} }
} }
.warn-info { .warn-info {
margin-top: 20px; margin-top: 20px;
height: 17vh; height: 17vh;
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(0, 0, 0, 0.2);
padding: 10px 30px; padding: 10px 30px;
background: #fff; background: #181d21;
} }
.layout1 { .layout1 {
display: flex; display: flex;
......
src/views/dustOverview/index.vue
View file @ 5a77e1a8
...@@ -525,6 +525,7 @@ onBeforeUnmount(() => {}); ...@@ -525,6 +525,7 @@ onBeforeUnmount(() => {});
width: 100%; width: 100%;
height: calc(100% - 14px); height: calc(100% - 14px);
box-sizing: border-box; box-sizing: border-box;
background-color: #181d21;
.header { .header {
display: flex; display: flex;
...@@ -535,10 +536,10 @@ onBeforeUnmount(() => {}); ...@@ -535,10 +536,10 @@ onBeforeUnmount(() => {});
flex: 1; flex: 1;
max-width: 420px; max-width: 420px;
height: 130px; height: 130px;
background-color: #fff; background-color: rgba(255, 255, 255, 0.07);
border: 1.5px solid #e8e8e8; border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 1.33px 16px 0px rgba(83, 100, 170, 0.1); box-shadow: 0px 1.33px 16px 0px rgba(0, 0, 0, 0.2);
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
...@@ -554,7 +555,7 @@ onBeforeUnmount(() => {}); ...@@ -554,7 +555,7 @@ onBeforeUnmount(() => {});
width: 100%; width: 100%;
span { span {
color: rgba(36, 48, 71, 0.75); color: #909399;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
...@@ -562,7 +563,7 @@ onBeforeUnmount(() => {}); ...@@ -562,7 +563,7 @@ onBeforeUnmount(() => {});
} }
.content { .content {
color: #273849; color: #fff;
line-height: 30px; line-height: 30px;
font-size: 42px; font-size: 42px;
font-weight: 600; font-weight: 600;
...@@ -584,15 +585,77 @@ onBeforeUnmount(() => {}); ...@@ -584,15 +585,77 @@ onBeforeUnmount(() => {});
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
:deep(.el-form-item__label) {
color: #fff;
}
:deep(.el-input__inner),
:deep(.el-select__input) {
background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
:deep(.el-select-dropdown__item) {
color: #fff;
}
:deep(.el-select-dropdown) {
background-color: #242a30;
border-color: #2c3136;
}
} }
.table-box { .table-box {
width: 100%; width: 100%;
height: calc(100vh - 400px); height: calc(100vh - 400px);
:deep(.el-table) {
background-color: #181d21;
color: #fff;
th.el-table__cell {
background-color: #242a30;
color: #fff;
border-bottom: 1px solid #2c3136;
}
td.el-table__cell {
background-color: #181d21;
border-bottom: 1px solid #2c3136;
}
.el-table__header-wrapper,
.el-table__body-wrapper {
background-color: #181d21;
}
}
:deep(.el-pagination) {
background-color: #181d21;
color: #909399;
.el-pagination__total,
.el-pagination__jump,
.btn-prev,
.btn-next {
color: #909399;
}
.el-input__inner {
background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
}
} }
} }
.default-btn { .default-btn {
width: 85px; width: 85px;
background-color: #242a30;
border-color: #2c3136;
color: #fff;
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
...@@ -601,6 +664,8 @@ onBeforeUnmount(() => {}); ...@@ -601,6 +664,8 @@ onBeforeUnmount(() => {});
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
background-color: #67c23a;
border-color: #67c23a;
} }
.health-score { .health-score {
...@@ -619,10 +684,10 @@ onBeforeUnmount(() => {}); ...@@ -619,10 +684,10 @@ onBeforeUnmount(() => {});
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 6px; gap: 6px;
border: 1px solid #e4e7ed; border: 1px solid #2c3136;
border-radius: 4px; border-radius: 4px;
background-color: #ffffff; background-color: #242a30;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
.matrix-row { .matrix-row {
display: flex; display: flex;
...@@ -656,9 +721,11 @@ onBeforeUnmount(() => {}); ...@@ -656,9 +721,11 @@ onBeforeUnmount(() => {});
.view-btn { .view-btn {
margin-right: 8px; margin-right: 8px;
cursor: pointer; cursor: pointer;
color: #409EFF;
} }
.edit-btn { .edit-btn {
cursor: pointer; cursor: pointer;
color: #409EFF;
} }
.dialog-footer { .dialog-footer {
...@@ -667,8 +734,28 @@ onBeforeUnmount(() => {}); ...@@ -667,8 +734,28 @@ onBeforeUnmount(() => {});
gap: 12px; gap: 12px;
} }
:deep(.el-dialog__body) { :deep(.el-dialog) {
padding: 20px; background-color: #242a30;
.el-dialog__title {
color: #fff;
}
.el-dialog__body {
padding: 20px;
color: #909399;
}
.el-form-item__label {
color: #fff;
}
.el-input__inner,
.el-textarea__inner {
background-color: #181d21;
border-color: #2c3136;
color: #fff;
}
} }
.distribution-table { .distribution-table {
...@@ -716,7 +803,7 @@ onBeforeUnmount(() => {}); ...@@ -716,7 +803,7 @@ onBeforeUnmount(() => {});
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
background: #f5f7fa; background: #242a30;
border-radius: 4px; border-radius: 4px;
.valve-row { .valve-row {
...@@ -727,11 +814,11 @@ onBeforeUnmount(() => {}); ...@@ -727,11 +814,11 @@ onBeforeUnmount(() => {});
.valve-cell { .valve-cell {
width: 41px; width: 41px;
background: white; background: #181d21;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
border: 1px solid #dcdfe6; border: 1px solid #2c3136;
.cell-index { .cell-index {
font-size: 12px; font-size: 12px;
...@@ -742,6 +829,12 @@ onBeforeUnmount(() => {}); ...@@ -742,6 +829,12 @@ onBeforeUnmount(() => {});
.cell-value { .cell-value {
:deep(.el-input-number) { :deep(.el-input-number) {
width: 100px; width: 100px;
.el-input__inner {
background-color: #181d21;
border-color: #2c3136;
color: #fff;
}
} }
} }
} }
...@@ -749,7 +842,7 @@ onBeforeUnmount(() => {}); ...@@ -749,7 +842,7 @@ onBeforeUnmount(() => {});
.readonly-value { .readonly-value {
font-size: 14px; font-size: 14px;
color: #606266; color: #909399;
line-height: 32px; line-height: 32px;
padding: 0 12px; padding: 0 12px;
} }
...@@ -763,12 +856,12 @@ onBeforeUnmount(() => {}); ...@@ -763,12 +856,12 @@ onBeforeUnmount(() => {});
&.warning-more { &.warning-more {
color: #e6a23c; color: #e6a23c;
background-color: #fdf6ec; background-color: rgba(230, 162, 60, 0.2);
} }
&.warning-less { &.warning-less {
color: #f56c6c; color: #f56c6c;
background-color: #fef0f0; background-color: rgba(245, 108, 108, 0.2);
} }
} }
} }
...@@ -780,6 +873,30 @@ onBeforeUnmount(() => {}); ...@@ -780,6 +873,30 @@ onBeforeUnmount(() => {});
.el-table__header th { .el-table__header th {
user-select: none; user-select: none;
background-color: #242a30 !important;
color: #fff !important;
border-bottom: 1px solid #2c3136 !important;
}
.el-table__row {
background-color: #181d21 !important;
td {
border-bottom: 1px solid #2c3136 !important;
color: #fff;
}
&:hover > td {
background-color: #242a30 !important;
}
}
.el-table__empty-block {
background-color: #181d21;
.el-table__empty-text {
color: #909399;
}
} }
} }
</style> </style>
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