Skip to content

D
DC-TOM
Commit 1ed6fc0b authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

Merge branch 'dev' of http://app.bmetech.com/liuzhaohui/dctomproject into dev

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