Skip to content

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

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

parent 6e727fa0
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 67 deletions
src/utils/chart.js
View file @ b3077000
import { color } from "echarts"; import * as echarts from "echarts";
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
export const getLineOption = (xData = [], seriesData = []) => ({ export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -129,13 +199,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({ ...@@ -129,13 +199,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { ...commonConfig.tooltip,
type: "line",
lineStyle: {
color: "#909399",
width: 1,
},
},
}, },
grid: { grid: {
left: "20", left: "20",
...@@ -148,13 +212,8 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -148,13 +212,8 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisLabel: { axisLabel: {
color: "#909399", color: chartColors.textColor,
fontSize: 12, fontSize: 12,
interval: "auto", interval: "auto",
rotate: 0, rotate: 0,
...@@ -162,9 +221,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -162,9 +221,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
return value.split(' ')[1]; return value.split(' ')[1];
} }
}, },
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisTick: { axisTick: {
show: false, show: false,
}, },
data: xData, data: xData,
}, },
yAxis: { yAxis: {
...@@ -173,28 +239,24 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -173,28 +239,24 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
// max: 600, // max: 600,
// interval: 200, // interval: 200,
axisLabel: { axisLabel: {
color: "#909399",
formatter: "{value}", formatter: "{value}",
...commonConfig.yAxis.axisLabel
}, },
splitLine: { ...commonConfig.yAxis
lineStyle: {
color: "#3a3f45",
type: "dashed",
},
},
}, },
series: [ series: [
{ {
name: "监测值", name: "监测值",
type: "line", type: "line",
smooth: false, smooth: true,
symbol: "none", symbol: 'circle',
sampling: "average", symbolSize: 0,
itemStyle: {
color: "#7B68EE",
},
lineStyle: { lineStyle: {
width: 1, width: 2,
color: chartColors.teal
},
itemStyle: {
color: chartColors.teal
}, },
areaStyle: { areaStyle: {
color: { color: {
...@@ -206,15 +268,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -206,15 +268,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "rgba(123, 104, 238, 0.4)", color: "rgba(54, 241, 205, 0.8)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(123, 104, 238, 0.1)", color: "rgba(54, 241, 205, 0)",
}, },
], ],
}, },
}, },
data: seriesData, data: seriesData,
}, },
], ],
......
src/views/dustMonitoring/bag-monitoring.vue
View file @ b3077000
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="page-container bag-monitoring-container"> <div class="page-container bag-monitoring-container">
<div class="header"> <div class="header">
<div class="select-container"> <div class="select-container">
<span>检测仪器</span> <span class="select-label">检测仪器</span>
<el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange"> <el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange">
<el-option <el-option
v-for="item in deviceList" v-for="item in deviceList"
...@@ -70,7 +70,8 @@ ...@@ -70,7 +70,8 @@
<div class="time-controls"> <div class="time-controls">
<div class="time-desc"> <div class="time-desc">
<span class="icon"></span> <span class="icon"></span>
当前实时信号：{{ currentData.compartNo }}仓 / {{ currentData.row }}排 <span class="time-desc-text">当前实时信号：</span>
<span class="time-desc-value">{{ currentData.compartNo }}仓 / {{ currentData.row }}排</span>
</div> </div>
<div> <div>
<el-button @click="navigateBackward"> <el-button @click="navigateBackward">
...@@ -556,6 +557,7 @@ onBeforeUnmount(() => { ...@@ -556,6 +557,7 @@ onBeforeUnmount(() => {
box-sizing: border-box; box-sizing: border-box;
// overflow-x: hidden; // overflow-x: hidden;
position: relative; position: relative;
background-color: #181d21;
.header { .header {
position: relative; position: relative;
...@@ -572,10 +574,13 @@ onBeforeUnmount(() => { ...@@ -572,10 +574,13 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 99; z-index: 99;
.select-label {
color: #909399 !important;
font-size: 14px;
}
span { span {
display: block; display: block;
width: 110px; width: 80px;
margin-right: 10px; margin-right: 10px;
} }
...@@ -590,14 +595,14 @@ onBeforeUnmount(() => { ...@@ -590,14 +595,14 @@ onBeforeUnmount(() => {
.title { .title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2182a0; color: var(--success);
} }
} }
.chart-container { .chart-container {
width: 100%; width: 100%;
height: calc(100% - 350px); height: calc(100% - 350px);
background-color: #fff; background-color: #000;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -614,7 +619,7 @@ onBeforeUnmount(() => { ...@@ -614,7 +619,7 @@ onBeforeUnmount(() => {
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
background-color: #f5f7fa; background-color: #000;
border-radius: 4px; border-radius: 4px;
} }
} }
...@@ -644,13 +649,16 @@ onBeforeUnmount(() => { ...@@ -644,13 +649,16 @@ onBeforeUnmount(() => {
position: absolute; position: absolute;
width: 25px; width: 25px;
height: 30px; height: 30px;
background: #fff; background: #232a31;
top: 1px; top: 0px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
.el-icon {
color: var(--success) !important;
}
} }
.collapsed-icon { .collapsed-icon {
...@@ -662,9 +670,9 @@ onBeforeUnmount(() => { ...@@ -662,9 +670,9 @@ onBeforeUnmount(() => {
.data-box { .data-box {
padding: 10px; padding: 10px;
background-color: rgba(255, 255, 255, 0.9); background-color: #232a31;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ebeef5; border: 1px solid #3a3f45;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 10px; margin-bottom: 10px;
...@@ -686,7 +694,7 @@ onBeforeUnmount(() => { ...@@ -686,7 +694,7 @@ onBeforeUnmount(() => {
} }
.data-table { .data-table {
background-color: #fff; background-color: #181d21;
border-radius: 4px; border-radius: 4px;
padding: 10px 0; padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -697,15 +705,20 @@ onBeforeUnmount(() => { ...@@ -697,15 +705,20 @@ onBeforeUnmount(() => {
th, th,
td { td {
border: 1px solid #ebeef5; border: 1px solid #434343;
text-align: center; text-align: center;
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;
font-weight: 400;
}
td {
color: #afafaf;
} }
th { th {
background-color: #f5f7fa; background-color: #181d21;
color: #606266; color: #bababd;
font-weight: 600;
} }
.error { .error {
...@@ -713,7 +726,7 @@ onBeforeUnmount(() => { ...@@ -713,7 +726,7 @@ onBeforeUnmount(() => {
} }
.highlight { .highlight {
background-color: #fcf8e3; background-color: #181d21;
position: relative; position: relative;
&::after { &::after {
...@@ -730,8 +743,9 @@ onBeforeUnmount(() => { ...@@ -730,8 +743,9 @@ onBeforeUnmount(() => {
} }
} }
.online-style { .online-style {
background-color: rgba(33, 130, 160, 1); color: var(--accent);
color: #fff; font-weight: 600;
background-color: #58595a;
} }
} }
...@@ -742,13 +756,28 @@ onBeforeUnmount(() => { ...@@ -742,13 +756,28 @@ onBeforeUnmount(() => {
justify-content: space-between; justify-content: space-between;
.el-button { .el-button {
background-color: #2182a0; border-color: var(--accent);
border-color: #2182a0; color: var(--accent);
color: #fff; background-color: #181d21;
&:hover { &:hover {
background-color: #1a6980; border-color: var(--accent);
border-color: #1a6980; color: var(--accent);
}
.el-icon {
color: var(--accent) !important;
}
}
:deep(.el-input__wrapper) {
background-color: #181d21;
box-shadow: 0 0 0 1px var(--accent) inset;
color: var(--accent);
&:hover {
box-shadow: 0 0 0 1px var(--accent) inset;
color: var(--accent);
}
.el-input__inner {
color: var(--accent);
} }
} }
...@@ -765,6 +794,10 @@ onBeforeUnmount(() => { ...@@ -765,6 +794,10 @@ onBeforeUnmount(() => {
border-radius: 50%; border-radius: 50%;
margin-right: 5px; margin-right: 5px;
} }
.time-desc-value {
color: #fff;
font-weight: 600;
}
} }
.time-label, .time-label,
.time-unit { .time-unit {
......
src/views/dustMonitoring/components/warn.vue
View file @ b3077000
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
</div> </div>
<div class="content"> <div class="content">
<div class="item" v-for="item in listInfo" :key="item"> <div class="item" v-for="item in listInfo" :key="item">
<img src="@/assets/icons/notice.png" alt="" />{{ item }} <span class="msg-icon"></span>
{{ item }}
</div> </div>
</div> </div>
</template> </template>
...@@ -30,12 +31,15 @@ const toDetail = () => { ...@@ -30,12 +31,15 @@ const toDetail = () => {
height: 20px; height: 20px;
.warn-title { .warn-title {
font-weight: bold; font-weight: bold;
color: rgb(217, 10, 10); color: var(--warning);
} }
.jump-icon { .jump-icon {
font-weight: bold; font-weight: bold;
color: #018796; color: #909399;
cursor: pointer; cursor: pointer;
&:hover {
color: #fff;
}
} }
} }
.content { .content {
...@@ -54,13 +58,16 @@ const toDetail = () => { ...@@ -54,13 +58,16 @@ const toDetail = () => {
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px, box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px,
rgba(0, 0, 0, 0.15) 0px 2px 4px 0px; rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
font-size: 14px; font-size: 14px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #fff; color: #fff;
background-color: #232a31; .msg-icon {
border-radius: 4px; display: inline-block;
img { width: 15px;
width: 20px; height: 15px;
height: auto; background-color: var(--danger);
margin-right: 10px; border-radius: 50%;
margin-right: 6px;
} }
} }
} }
......
src/views/dustMonitoring/index.vue
View file @ b3077000
...@@ -761,10 +761,12 @@ $borderColor: #3a3f45; ...@@ -761,10 +761,12 @@ $borderColor: #3a3f45;
.value { .value {
color: #fff; color: #fff;
font-size: 14px;
} }
.unit { .unit {
color: #909399; color: #909399;
font-size: 12px;
} }
.right-box { .right-box {
...@@ -793,7 +795,7 @@ $borderColor: #3a3f45; ...@@ -793,7 +795,7 @@ $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);
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px 20px 0 20px;
box-sizing: border-box; box-sizing: border-box;
background: #181d21; background: #181d21;
position: relative; position: relative;
...@@ -827,6 +829,7 @@ $borderColor: #3a3f45; ...@@ -827,6 +829,7 @@ $borderColor: #3a3f45;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 600;
justify-content: space-between; justify-content: space-between;
.label { .label {
color: #909399; color: #909399;
...@@ -838,14 +841,14 @@ $borderColor: #3a3f45; ...@@ -838,14 +841,14 @@ $borderColor: #3a3f45;
justify-content: space-between; justify-content: space-between;
.indicator-item { .indicator-item {
width: 50%; width: 50%;
height: 200px; 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: 40px 20px 20px 20px; padding: 10px 20px 20px 20px;
.left, .left,
.right { .right {
padding: 5px; padding: 5px;
...@@ -853,6 +856,12 @@ $borderColor: #3a3f45; ...@@ -853,6 +856,12 @@ $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 {
background-color: #232a31;
border-radius: 6px;
padding: 10px;
box-sizing: border-box;
}
.part { .part {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -864,6 +873,11 @@ $borderColor: #3a3f45; ...@@ -864,6 +873,11 @@ $borderColor: #3a3f45;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.2);
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
}
} }
.point::after { .point::after {
content: ""; content: "";
...@@ -886,16 +900,22 @@ $borderColor: #3a3f45; ...@@ -886,16 +900,22 @@ $borderColor: #3a3f45;
padding: 20px; padding: 20px;
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;
display: flex; display: flex;
align-items: center; align-items: normal;
justify-content: space-between; justify-content: space-between;
font-size: 14px;
gap: 10px; gap: 10px;
&-item { &-item {
padding: 10px; padding: 10px;
height: 70px; min-height: 70px;
background: #232a31; background: #232a31;
border-radius: 6px; border-radius: 6px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
p:nth-child(2) {
font-size: 14px;
font-weight: 600;
color: #fff;
}
} }
&-item::-webkit-scrollbar { &-item::-webkit-scrollbar {
width: 0; width: 0;
......
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