设备监控优化

hwh

2024-08-30 e9367782f0aba66b787adecd7584b1b23e5fd5bc

 Web/src/views/device/deviceMonitor/index.vue

@@ -8,18 +8,12 @@
                </div>
                <div class="choosefix">
                    <el-select v-model="lineValue" placeholder="请选择">
                        <el-option
                        v-for="item in lineOptions"
                        :key="item.value"
                        :label="item.label"
                        <el-option v-for="item in lineOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="stationValue" placeholder="请选择" style="margin-top: 10px;">
                        <el-option
                        v-for="item in stationOptions"
                        :key="item.value"
                        :label="item.label"
                        <el-option v-for="item in stationOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
@@ -49,7 +43,7 @@
                <div class="lineButtonfix">
                    <el-form label-position="left" label-width="60px">
                        <el-form-item>
                            <el-button type="primary">写入</el-button>
                            <el-button>写入</el-button>
                            <el-button>设置</el-button>
                        </el-form-item>
                    </el-form>
@@ -61,7 +55,9 @@
                <el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id">
                    <div slot="header" class="linefix">
                        <span>{{ deviceInfo.name }}</span>
                        <div :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"></div>
                        <div
                            :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]">
                        </div>
                    </div>
                    <div class="otherValuefix" >
                        <el-form label-position="left" label-width="60px">
@@ -85,7 +81,7 @@
                    <div class="otherButtonfix">
                        <el-form label-position="left">
                            <el-form-item>
                                <el-button type="primary">写入</el-button>
                                <el-button>写入</el-button>
                                <el-button>设置</el-button>
                            </el-form-item>
                        </el-form>
@@ -211,6 +207,7 @@
        height: 40px;
        position: relative;
    }

    .lineStatus{
        position: absolute;
        right: 0;
@@ -227,15 +224,18 @@
        padding: 10px;
        border-bottom: 1px solid rgb(197, 195, 195);
    }

    .box-card {
        width: 280px;
    }

    .lineValuefix{
        width: 100%;
        height: 500px;
        padding: 10px;
        border-bottom: 1px solid rgb(197, 195, 195);
    }

   .lineButtonfix{
        width: 100%;
        height: 50px;
@@ -259,6 +259,7 @@
    .other-box-card {
        box-sizing: border-box;
    }

    .otherButtonfix{
        width: 100%;
        height: 50px;
@@ -267,11 +268,24 @@
        justify-content: center;
        padding: 0;
    }

    .device-status-0{
        background-color: #67C23A;
    }

    .device-status-1{
        background-color: red;
    }
  </style>
  
.box-card,
.other-box-card {
    background: linear-gradient(135deg, #66ccff, #3399ff);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.linefix span {
    color: #fff;
}
</style>