0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

【web】 首页设备状态改为健康度

Browse Source
dev
Wangxin 8 months ago
parent 5124226565
commit a33951bc42
2 changed files with 63 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 47
      ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
  2. 22
      ALOps_sys_fe/alops-ui/src/views/index.vue

47
ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
Unescape View File

@ -7,7 +7,7 @@
<el-col> <el-col>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="安装日期"> <el-form-item label="安装日期">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="设备名称" prop="name"> <el-form-item label="设备名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
@ -17,8 +17,13 @@
<el-option v-for="dict in dict.type.device_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in dict.type.device_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="安装楼层" prop="floor">
<el-select v-model="queryParams.floor" placeholder="安装楼层" clearable style="width: 240px">
<el-option v-for="dict in dict.type.floor_data" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="安装位置" prop="location"> <el-form-item label="安装位置" prop="location">
<el-input v-model="queryParams.phonenumber" placeholder="请输入安装位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.location" placeholder="请输入安装位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@ -56,14 +61,15 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="带外管理IP" align="center" key="ip" prop="ip" width="120" /> <el-table-column label="带外管理IP" align="center" key="ip" prop="ip" width="120" />
<el-table-column label="安装楼层" align="center" key="floor" prop="floor" width="120" />
<el-table-column label="安装位置" align="center" key="location" prop="location" width="120" /> <el-table-column label="安装位置" align="center" key="location" prop="location" width="120" />
<el-table-column label="安装时间" align="center" prop="installDate" width="160"> <el-table-column label="安装时间" align="center" prop="installDate" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.installDate) }}</span> <span>{{ parseTime(scope.row.installDate) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备厂商" align="center" key="manufacture" prop="manufacture" width="120" /> <el-table-column label="设备厂商" align="center" key="manufacture" prop="manufacture" width="120" />
<el-table-column label="品牌型号" align="center" key="brand" prop="brand" width="120" />
<el-table-column label="设备供应商" align="center" key="supplierName" prop="supplierName" width="120" /> <el-table-column label="设备供应商" align="center" key="supplierName" prop="supplierName" width="120" />
<el-table-column label="设备管理员" align="center" key="inCharge" prop="inCharge" width="120" /> <el-table-column label="设备管理员" align="center" key="inCharge" prop="inCharge" width="120" />
<el-table-column label="预计年限" align="center" key="lifeCycle" prop="lifeCycle" width="120" /> <el-table-column label="预计年限" align="center" key="lifeCycle" prop="lifeCycle" width="120" />
@ -161,6 +167,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item label="品牌型号" prop="brand">
<el-input v-model="form.brand" placeholder="请输入品牌型号" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="设备供应商" prop="supplierId"> <el-form-item label="设备供应商" prop="supplierId">
<el-select <el-select
@ -181,6 +192,23 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item label="安装日期" prop="installDate">
<el-date-picker
v-model="form.installDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装楼层" prop="floor">
<el-select v-model="form.floor" placeholder="安装楼层" clearable style="width: 240px">
<el-option v-for="dict in dict.type.floor_data" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="安装位置" prop="location"> <el-form-item label="安装位置" prop="location">
<el-input v-model="form.location" placeholder="请输入安装位置" maxlength="30" /> <el-input v-model="form.location" placeholder="请输入安装位置" maxlength="30" />
@ -249,7 +277,7 @@ import "splitpanes/dist/splitpanes.css"
export default { export default {
name: "User", name: "User",
dicts: ['device_disable', 'sys_user_sex', 'warning_level'], dicts: ['device_disable', 'sys_user_sex', 'warning_level', 'floor_data'],
components: { Treeselect, Splitpanes, Pane }, components: { Treeselect, Splitpanes, Pane },
data() { data() {
return { return {
@ -346,6 +374,15 @@ export default {
supplierId: [ supplierId: [
{ required: true, message: "设备供应商不能为空", trigger: "blur" }, { required: true, message: "设备供应商不能为空", trigger: "blur" },
], ],
brand: [
{ required: true, message: "品牌型号不能为空", trigger: "blur" }
],
installDate: [
{ required: true, message: "安装日期不能为空", trigger: "blur" }
],
floor: [
{ required: true, message: "安装楼层不能为空", trigger: "blur" }
],
location: [ location: [
{ required: true, message: "安装位置不能为空", trigger: "blur" } { required: true, message: "安装位置不能为空", trigger: "blur" }
], ],
@ -459,7 +496,7 @@ export default {
name: undefined, name: undefined,
nickName: undefined, nickName: undefined,
password: undefined, password: undefined,
phonenumber: undefined, location: undefined,
email: undefined, email: undefined,
sex: undefined, sex: undefined,
status: "0", status: "0",

22
ALOps_sys_fe/alops-ui/src/views/index.vue
Unescape View File

@ -21,7 +21,11 @@
@click="showDeviceDetail(device)"> @click="showDeviceDetail(device)">
<div :class="['device-status', `status-${device.status || 'normal'}`]"></div> <div :class="['device-status', `status-${device.status || 'normal'}`]"></div>
<div class="device-name">{{ device.equManuName || device.name || '未知设备' }}</div> <div class="device-name">{{ device.equManuName || device.name || '未知设备' }}</div>
<div class="device-value">{{ device.cpuUtilization || 0 }}%</div> <div class="device-value">
<span :class="['health-icon', `health-${Number(device.health||0)}`]">
{{ device.health == 1?'健康':device.health == 2?'良好':device.health == 3?'一般':device.health == 4?'需维护':'未知' }}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1426,6 +1430,22 @@ export default {
font-weight: bold; font-weight: bold;
font-size: clamp(0.8rem, 1vw, 1rem); font-size: clamp(0.8rem, 1vw, 1rem);
} }
.health-1{
color: #4CAF50;
}
.health-2{
color: #FF9800;
}
.health-3{
color: #F44336;
}
.health-4{
color: #FFEB3B;
}
.health-0{
color: #9E9E9E;
}
/* 楼宇容器样式 */ /* 楼宇容器样式 */
.building-container { .building-container {

Write Preview
Loading…
Cancel
Save