Skip to content

D
DC-TOM
Commit 5d435893 authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

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

parents 1965f46c 19159cb8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2119 additions and 499 deletions
src/request/api/dashboard.js
View file @ 5d435893
......@@ -19,3 +19,10 @@ export function getExceptionMonitor() {
method: "get",
});
}
export function getDusterAlarm() {
return request({
url: "/api/home/duster/alarm",
method: "get",
});
}
src/request/api/dustOverview.js
View file @ 5d435893
......@@ -7,15 +7,87 @@ export function getDusterLeakNum() {
}
export function getHealthPercent() {
return request({
url: "/getHealthPercent",
method: "get",
});
}
export function getCloseLoopNum() {
return request({
url: "/getCloseLoopNum",
method: "get",
});
}
export function getProductionLine() {
return request({
url: "/transaction/getProductionLine",
method: "get",
});
}
export function getDusterList(params) {
return request({
url: "/getDusterList",
method: "get",
params,
});
}
export function getVisDusterList(params) {
return request({
url: "/getHealthPercent",
url: "/queryVisDusterList",
method: "get",
params,
});
}
export function postAddDuster(params) {
return request({
url: "/addDuster",
method: "post",
data: params,
});
}
export function postUpdateDuster(params) {
return request({
url: "/updateDuster",
method: "post",
data: params,
});
}
export function getCompartAllocation(params) {
return request({
url: "/queryCompartAllocation",
method: "get",
params,
});
}
export function postAddCompartAllocation(params) {
return request({
url: "/addCompartAllocation",
method: "post",
data: params,
});
}
export function postAddValveInfo(params) {
return request({
url: "/addValveInfo",
method: "post",
data: params,
});
}
export function getCloseLoopNum() {
export function getValveAllocation(params) {
return request({
url: "/getCloseLoopNum",
url: "/queryValveAllocation",
method: "get",
params,
});
}
\ No newline at end of file
src/router/index.js
View file @ 5d435893
......@@ -2,15 +2,17 @@ import { createWebHistory, createRouter } from 'vue-router'
import Dashboard from '../views/dashboard/index.vue'
import DustOverview from '../views/dustOverview/index.vue'
import AboutView from '../views/AboutView.vue'
import AboutView from '../views/AboutView/AboutView.vue'
import CollectorList from '../views/collectorList/collectorList.vue'
import User from '../views/user.vue'
import Layout from '../layout/index.vue'
import Login from '../views/login/index.vue'
import equipmentManagement from '../views/equipmentManagement/index.vue'
import suspendManagement from '../views/equipmentManagement/suspendManagement/suspendManagement.vue'
import dustMonitoring from '../views/dustMonitoring/index.vue'
import bagMonitoring from '../views/dustMonitoring/bag-monitoring.vue'
import myAgency from '@/views/closeManage/myAgency.vue';
import myDone from '@/views/closeManage/myDone.vue';
const routes = [
......@@ -31,8 +33,19 @@ const routes = [
},
{
path: '/device-management',
component: equipmentManagement,
meta: { title: '设备管理' },
children: [
{
path: '/management/device-management',
component: equipmentManagement,
meta: { title: '设备管理' },
},
{
path: '/management/suspend-management',
component: suspendManagement,
meta: { title: '挂起设备管理' },
},
]
},
{
path: '/monitor',
......
src/views/AboutView.vue deleted 100644 → 0
View file @ 1965f46c
<template>
<div>about</div>
</template>
\ No newline at end of file
src/views/AboutView/AboutView.vue 0 → 100644
View file @ 5d435893
<template>
<div class="page-container collectorList">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称">
<el-input
v-model="formInline.eventName"
placeholder="请输入事件名称"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="发生位置">
<el-input
v-model="formInline.position"
placeholder="请输入发生位置"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="除尘器名称">
<el-input
v-model="formInline.deviceName"
placeholder="请输入除尘器名称"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="formInline.type" style="width: 200px">
<el-option
v-for="i in dustList.list"
:key="i"
:label="`${i.deviceName}`"
:value="i.deviceNo"
/>
</el-select>
</el-form-item>
<el-form-item label="告警时间">
<el-date-picker
v-model="formInline.date"
type="datetimerange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
:teleported="false"
/>
</el-form-item>
<el-form-item>
<el-button type="default" class="default-btn" @click="onSubmit"
>重置</el-button
>
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
<el-button
type="success"
style="width: 140px"
class="add-btn"
@click="openRound()"
>挂起设备</el-button
>
</el-form-item>
<br />
<el-form-item>
<el-radio-group v-model="formInline.warnType">
<el-radio value="1">挂起期间告警</el-radio>
<el-radio value="2">非挂起期间告警</el-radio>
<el-radio value="3">全部告警</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<div class="table-box">
<common-table
:data="tableData.list"
:columns="tableColumns"
:default-page-size="10"
@pagination-change="handlePaginationChange"
:pagination-texts="{
total: '共',
sizeChange: '条/页',
prev: '前一页',
next: '后一页',
jumper: '跳至',
}"
>
<template #index="{ $index }">
{{ getIndex($index) }}
</template>
<!-- <template #deviceName="{ row }">
<span class="health-score" @dblclick="openDialog(row.deviceName)">{{
row.deviceName
}}</span>
</template> -->
<!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span>
<span class="edit-btn" @click="handleEdit(row)">编辑</span>
</template> -->
</common-table>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const formInline = ref({
eventName: "",
deviceName: "",
position: "",
type: "",
date: "",
warnType: "3",
});
const currentPage = ref(1);
const pageSize = ref(10);
const tableColumns = ref([
{
prop: "index",
label: "序号",
width: "5%",
},
{
prop: "deviceName",
label: "事件名称",
width: "9%",
},
{
prop: "compart",
label: "发生位置",
width: "9%",
},
{
prop: "position",
label: "设备类型",
width: "9%",
},
{
prop: "changeDateRemind",
label: "告警指标",
width: "9%",
},
{
prop: "changeDate",
label: "监测值",
width: "9%",
},
{
prop: "changePeo",
label: "告警时间",
width: "9%",
},
{
prop: "ownerdeviceName",
label: "是否挂起期间告警",
width: "9%",
},
{
prop: "lastAlarmTime",
label: "操作",
width: "10%",
},
]);
const tableData = reactive({
list: [
{
deviceName: "1#除尘器",
compart: "1234567890",
position: "转炉",
changeDateRemind: "xx",
changeDate: "xx",
changePeo: "xx",
ownerdeviceName: "xx",
lastAlarmTime: "xx",
changeRound: "xx",
},
],
});
const dustList = reactive({
list: [],
});
const getDustList = () => {
dustList.list = [
{
deviceName: "1#除尘器",
deviceNo: "11111",
},
{
deviceName: "2#除尘器",
deviceNo: "22222",
},
{
deviceName: "3#除尘器",
deviceNo: "333333",
},
];
};
getDustList();
const getIndex = (index) => {
return (currentPage.value - 1) * pageSize.value + index + 1;
};
const handlePaginationChange = (pagination) => {
currentPage.value = pagination.currentPage;
pageSize.value = pagination.pageSize;
console.log("分页变化", pagination);
};
const onSubmit = () => {
console.log("submit!", formInline.value);
};
const openRound = () => {
router.push({ path: "/management/suspend-management" });
};
onMounted(async () => {});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.collectorList {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
:deep(.el-input--small) {
width: 100%;
}
.content-box {
margin-top: 24px;
.search {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-box {
width: 100%;
height: calc(100vh - 400px);
}
}
.default-btn {
width: 85px;
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
cursor: pointer;
display: block;
width: 100%;
}
.status-matrix {
width: fit-content;
display: flex;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
.matrix-row {
display: flex;
gap: 6px;
justify-content: flex-start;
}
.status-dot {
width: 14px;
height: 14px;
border-radius: 50%;
&:hover {
cursor: pointer;
transform: scale(1.2);
}
}
.status-normal {
background-color: #67c23a; // 绿色
}
.status-warning {
background-color: #e6a23c; // 橙色
}
.status-error {
background-color: #f56c6c; // 红色
}
}
.view-btn {
margin-right: 8px;
}
.dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
:deep(.el-dialog__body) {
padding: 20px;
}
.distribution-table {
margin-top: 20px;
border-top: 1px solid #ebeef5;
padding-top: 20px;
}
.table-title {
font-size: 14px;
color: #2182a0;
margin-bottom: 16px;
font-weight: 500;
}
:deep(.el-input-number.el-input-number--small) {
width: 130px;
}
:deep(.distribution-table .el-table--border .el-table__cell) {
border-right: 1px solid #ebeef5 !important;
}
.valve-setting {
.setting-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
.input-group {
display: flex;
align-items: center;
gap: 8px;
span {
white-space: nowrap;
color: #606266;
}
}
}
}
.valve-distribution-grid {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: #f5f7fa;
border-radius: 4px;
.valve-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.valve-cell {
width: 41px;
background: white;
padding: 4px;
border-radius: 4px;
text-align: center;
border: 1px solid #dcdfe6;
.cell-index {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
}
.cell-value {
:deep(.el-input-number) {
width: 100px;
}
}
}
}
.readonly-value {
font-size: 14px;
color: #606266;
line-height: 32px;
padding: 0 12px;
}
.distribution-warning {
display: inline-block;
font-size: 13px;
margin-left: 12px;
padding: 2px 8px;
border-radius: 4px;
&.warning-more {
color: #e6a23c;
background-color: #fdf6ec;
}
&.warning-less {
color: #f56c6c;
background-color: #fef0f0;
}
}
}
</style>
src/views/closeManage/myAgency.vue
View file @ 5d435893
This diff is collapsed.
src/views/closeManage/myDone.vue
View file @ 5d435893
This diff is collapsed.
src/views/collectorList/collectorList.vue
View file @ 5d435893
......@@ -7,7 +7,7 @@
<el-input
v-model="formInline.deviceName"
placeholder="请输入仓室名称"
style="width: 200px"
style="width: 180px"
clearable
/>
</el-form-item>
......@@ -15,7 +15,7 @@
<el-input
v-model="formInline.deviceName"
placeholder="请输入除尘器名称"
style="width: 200px"
style="width: 180px"
clearable
/>
</el-form-item>
......@@ -36,7 +36,11 @@
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
<el-button type="success" class="add-btn" @click="openDialog()"
<el-button
type="success"
style="width: 140px"
class="add-btn"
@click="openDialog()"
>更换周期分析</el-button
>
</el-form-item>
......
src/views/dashboard/components/map-svg.vue
View file @ 5d435893
......@@ -59,48 +59,65 @@
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import * as echarts from "echarts";
import { getLineOption } from "@/utils/chart";
// 定义坐标点位数据
const spots = ref([
{
id:1,
no: "wp001",
x: 41,
y: 22,
name: "4#除尘器",
status: 0,
description: ["无异常"],
},
{
id:2,
no: "wp001",
x: 45,
y: 70,
name: "站点B",
status: 0,
description: ["运行正常"],
},
{
id:3,
no: "wp001",
x: 77,
y: 36,
name: "3#除尘器",
status: 1,
description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
const props = defineProps({
mapList: {
type: Array,
default: () => [],
},
{
id:4,
no: "wp001",
x: 50,
y: 65,
name: "2#除尘器",
status: 1,
description: ["除尘器脉冲阀故障或者提升阀故障"],
});
watch(
() => props.mapList,
() => {
initMap();
},
{ deep: true }
);
// 定义坐标点位数据
const spots = ref([
// {
// id:1,
// no: "wp001",
// x: 41,
// y: 22,
// name: "4#除尘器",
// status: 0,
// description: ["无异常"],
// },
// {
// id:2,
// no: "wp001",
// x: 45,
// y: 70,
// name: "站点B",
// status: 0,
// description: ["运行正常"],
// },
// {
// id:3,
// no: "wp001",
// x: 77,
// y: 36,
// name: "3#除尘器",
// status: 1,
// description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
// },
// {
// id:4,
// no: "wp001",
// x: 50,
// y: 65,
// name: "2#除尘器",
// status: 1,
// description: ["除尘器脉冲阀故障或者提升阀故障"],
// },
]);
const activeSpot = ref(null);
......@@ -160,7 +177,14 @@ const getStatusText = (status) => {
return statusMap[status] || status;
};
onMounted(() => {});
const initMap = () => {
console.log(props.mapList, 'props.mapList')
spots.value = props.mapList || [];
}
onMounted(() => {
initMap();
});
onBeforeUnmount(() => {
clearTimer();
......
src/views/dashboard/index.vue
View file @ 5d435893
......@@ -28,14 +28,14 @@
</div>
<div class="map-box">
<map-svg></map-svg>
<map-svg :mapList="mapList"></map-svg>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { getHealthOverview, getHealthStatistic, getExceptionMonitor } from "@/request/api/dashboard";
import { getHealthOverview, getHealthStatistic, getExceptionMonitor, getDusterAlarm } from "@/request/api/dashboard";
import { useRoute, useRouter } from "vue-router";
import msgItem from "./components/msg-item.vue";
import chartLine from "./components/chart-line.vue";
......@@ -58,6 +58,7 @@ const router = useRouter();
const msgList = ref([
]);
const mapList = ref([]);
const customColorMethod = (percentage) => {
if (percentage < 60) {
......@@ -76,69 +77,33 @@ const healthOverview = () => {
pulseValve.value = Number(res.data.pulseValve.split('%')[0])
poppetValve.value = Number(res.data.poppetValve.split('%')[0])
})
// const res = {
// "data": {
// "average": "20%",
// "bag": "10%",
// "pulseValve": "20%",
// "poppetValve": "30%"
// },
// msg: "访问成功",
// success: true,
// code: 1
// }
}
const healthStatistic = () => {
getHealthStatistic().then(res => {
chartData.value = res.data;
})
// const res = {
// "data": [
// {
// "date": "2025-05-01",
// "healthDegree": "75"
// },
// {
// "date": "2025-05-02",
// "healthDegree": "68"
// }
// ],
// "msg": "访问成功",
// "success": true,
// code: 1,
// };
};
const exceptionMonitor = () => {
getExceptionMonitor().then(res => {
msgList.value = res.data;
})
// const res = {
// "data": [
// {
// "date": "2025-05-01 10:00",
// "dusterName": "3#除尘器",
// "message": "三仓室存在轻重泄露"
// },
// {
// "date": "2025-05-01 10:00",
// "dusterName": "3#除尘器",
// "message": "三仓室存在轻重泄露"
// }
// ],
// msg: "访问成功",
// success: true,
// code: 1
// }
// msgList.value = res.data;
}
const handleDusterAlarm = () => {
getDusterAlarm().then(res => {
mapList.value = res.data;
})
}
onMounted(async () => {
healthOverview();
healthStatistic();
exceptionMonitor();
handleDusterAlarm();
});
onBeforeUnmount(() => { });
......
src/views/dustOverview/index.vue
View file @ 5d435893
This diff is collapsed.
src/views/equipmentManagement/suspendManagement/suspendManagement.vue 0 → 100644
View file @ 5d435893
<template>
<div class="page-container collectorList">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="项目名称">
<el-select v-model="formInline.name" style="width: 200px">
<el-option
v-for="i in nameList.list"
:key="i"
:label="`${i.label}`"
:value="i.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类别">
<el-select v-model="formInline.type" style="width: 200px">
<el-option
v-for="i in typeList.list"
:key="i"
:label="`${i.label}`"
:value="i.value"
/>
</el-select>
</el-form-item>
<el-form-item label="原因分类">
<el-select v-model="formInline.reason" style="width: 200px">
<el-option
v-for="i in reasonList.list"
:key="i"
:label="`${i.label}`"
:value="i.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="default" class="default-btn" @click="onSubmit"
>重置</el-button
>
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
<div class="table-box">
<common-table
:data="tableData.list"
:columns="tableColumns"
:default-page-size="10"
@pagination-change="handlePaginationChange"
:pagination-texts="{
total: '共',
sizeChange: '条/页',
prev: '前一页',
next: '后一页',
jumper: '跳至',
}"
>
<template #index="{ $index }">
{{ getIndex($index) }}
</template>
<template #deviceName="{ row }">
<span class="health-score" @dblclick="openDialog(row.deviceName)">{{
row.deviceName
}}</span>
</template>
<!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span>
<span class="edit-btn" @click="handleEdit(row)">编辑</span>
</template> -->
</common-table>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
const formInline = ref({
eventName: "",
deviceName: "",
position: "",
type: "",
date: "",
warnType: "3",
});
const currentPage = ref(1);
const pageSize = ref(10);
const tableColumns = ref([
{
prop: "index",
label: "序号",
width: "5%",
},
{
prop: "deviceName",
label: "项目名称",
width: "7%",
},
{
prop: "compart",
label: "设备编号",
width: "7%",
},
{
prop: "position",
label: "设备类型",
width: "7%",
},
{
prop: "changeDateRemind",
label: "设备名称",
width: "7%",
},
{
prop: "changeDate",
label: "设备信号编号",
width: "7%",
},
{
prop: "changePeo",
label: "设备所在位置",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "挂起开始时间",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "结束时间",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "原因分类",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "原因描述",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "创建时间",
width: "7%",
},
{
prop: "ownerdeviceName",
label: "创建人",
width: "7%",
},
{
prop: "lastAlarmTime",
label: "操作",
width: "8%",
},
]);
const tableData = reactive({
list: [
{
deviceName: "1#除尘器",
compart: "1234567890",
position: "转炉",
changeDateRemind: "xx",
changeDate: "xx",
changePeo: "xx",
ownerdeviceName: "xx",
lastAlarmTime: "xx",
changeRound: "xx",
},
],
});
const nameList = reactive({
list: [],
});
const getNameList = () => {
nameList.list = [
{
label: "1#除尘器",
value: "11111",
},
{
label: "2#除尘器",
value: "22222",
},
{
label: "3#除尘器",
value: "333333",
},
];
};
const typeList = reactive({
list: [],
});
const getTypeList = () => {
typeList.list = [
{
label: "1#除尘器",
value: "11111",
},
{
label: "2#除尘器",
value: "22222",
},
{
label: "3#除尘器",
value: "333333",
},
];
};
const reasonList = reactive({
list: [],
});
const getReasonList = () => {
reasonList.list = [
{
label: "1#除尘器",
value: "11111",
},
{
label: "2#除尘器",
value: "22222",
},
{
label: "3#除尘器",
value: "333333",
},
];
};
const getIndex = (index) => {
return (currentPage.value - 1) * pageSize.value + index + 1;
};
const handlePaginationChange = (pagination) => {
currentPage.value = pagination.currentPage;
pageSize.value = pagination.pageSize;
console.log("分页变化", pagination);
};
const onSubmit = () => {
console.log("submit!", formInline.value);
};
onMounted(async () => {
getNameList();
getTypeList();
getReasonList();
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.collectorList {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
:deep(.el-input--small) {
width: 100%;
}
.content-box {
margin-top: 24px;
.search {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-box {
width: 100%;
height: calc(100vh - 400px);
}
}
.default-btn {
width: 85px;
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
cursor: pointer;
display: block;
width: 100%;
}
.status-matrix {
width: fit-content;
display: flex;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
.matrix-row {
display: flex;
gap: 6px;
justify-content: flex-start;
}
.status-dot {
width: 14px;
height: 14px;
border-radius: 50%;
&:hover {
cursor: pointer;
transform: scale(1.2);
}
}
.status-normal {
background-color: #67c23a; // 绿色
}
.status-warning {
background-color: #e6a23c; // 橙色
}
.status-error {
background-color: #f56c6c; // 红色
}
}
.view-btn {
margin-right: 8px;
}
.dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
:deep(.el-dialog__body) {
padding: 20px;
}
.distribution-table {
margin-top: 20px;
border-top: 1px solid #ebeef5;
padding-top: 20px;
}
.table-title {
font-size: 14px;
color: #2182a0;
margin-bottom: 16px;
font-weight: 500;
}
:deep(.el-input-number.el-input-number--small) {
width: 130px;
}
:deep(.distribution-table .el-table--border .el-table__cell) {
border-right: 1px solid #ebeef5 !important;
}
.valve-setting {
.setting-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
.input-group {
display: flex;
align-items: center;
gap: 8px;
span {
white-space: nowrap;
color: #606266;
}
}
}
}
.valve-distribution-grid {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: #f5f7fa;
border-radius: 4px;
.valve-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.valve-cell {
width: 41px;
background: white;
padding: 4px;
border-radius: 4px;
text-align: center;
border: 1px solid #dcdfe6;
.cell-index {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
}
.cell-value {
:deep(.el-input-number) {
width: 100px;
}
}
}
}
.readonly-value {
font-size: 14px;
color: #606266;
line-height: 32px;
padding: 0 12px;
}
.distribution-warning {
display: inline-block;
font-size: 13px;
margin-left: 12px;
padding: 2px 8px;
border-radius: 4px;
&.warning-more {
color: #e6a23c;
background-color: #fdf6ec;
}
&.warning-less {
color: #f56c6c;
background-color: #fef0f0;
}
}
}
</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