修改监控页面样式、添加修改提升机与四向车执行队列
This commit is contained in:
猫猫guowen
@@ -1,86 +1,95 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in Sagv" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
<div class="group-section">
|
||||
<div class="group-title">四向车</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in Sagv" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl2" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in SSJ" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl2" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-title">输送机</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in SSJ" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl1" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in TSJ" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl1" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-title">提升机</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="dev in TSJ" :key="dev.id" :span="12">
|
||||
<el-card shadow="always" class="device-card">
|
||||
<div slot="header" class="card-header gradient">
|
||||
<span class="device-title">{{ dev.name }}</span>
|
||||
<div class="header-tags">
|
||||
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
|
||||
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl3" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="card-body">
|
||||
<el-col :span="16">
|
||||
<el-row class="data-grid">
|
||||
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
|
||||
<span class="data-label">{{ item.label }}</span>
|
||||
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
|
||||
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" class="image-wrap">
|
||||
<el-image :src="imageUrl3" fit="contain" class="device-image" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -196,12 +205,25 @@ export default {
|
||||
this.Sagv = srgvRows.map(it => ({ id: it.deviceId || it.guid || it.id, name: it.deviceName || it.name, kind: 'srgv', raw: it }))
|
||||
this.SSJ = ssjRows.map(it => ({ id: it.id || it.deviceCode, name: it.name, kind: 'ssj', raw: it }))
|
||||
this.TSJ = tsjRows.map(it => ({ id: it.id, name: it.name, kind: 'tsj', raw: it }))
|
||||
console.log(srgvRows)
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.group-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.group-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, rgba(16,108,123,0.12), rgba(255,255,255,0));
|
||||
color: #106c7b;
|
||||
}
|
||||
.device-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
|
||||
Reference in New Issue
Block a user