Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
lzp
|
48ebb62226 | 4 months ago |
|
lzp
|
28989fe11f | 4 months ago |
|
lzp
|
413841f7db | 4 months ago |
|
lzp
|
60dee5a31a | 4 months ago |
9 changed files with 132 additions and 63 deletions
@ -1,86 +1,155 @@ |
|||
<template> |
|||
<div style="padding: 16px"> |
|||
<!-- <img src="./welcome.5e305008.png" style="" /> --> |
|||
<div style="padding: 16px;min-height: calc(100vh - 84px);display: flex; justify-content: center;align-items: center;"> |
|||
<div class="div-box"> |
|||
<div class="div-box-title"> 智能粮仓数据监测 </div> |
|||
<div class="div-ul"> |
|||
<div class="div-li"> |
|||
<div> |
|||
<span>温度：</span>22.2℃ |
|||
</div> |
|||
<div> <span>湿度：</span>50% |
|||
</div> |
|||
</div> |
|||
<!-- ON：开启 OFF：关闭 --> |
|||
<div class="div-li"> |
|||
<div> |
|||
<span>CO：</span>5PPM |
|||
</div> |
|||
<div> |
|||
<span>光照：</span>350 |
|||
</div> |
|||
</div> |
|||
<div class="div-li"> |
|||
<div> |
|||
<span>预警：</span> |
|||
<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> |
|||
</el-switch> |
|||
</div> |
|||
<div> |
|||
<span>阈值设定：</span>30 |
|||
<i class="el-icon-edit" style="color: rgb(64, 158, 255);margin-left: 4px;cursor: pointer;" |
|||
@click="handleSettings"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="div-tips"> |
|||
<span>阈值设定：</span>30 <i class="el-icon-edit" style="color: rgb(64, 158, 255);margin-left: 4px;cursor: pointer;" |
|||
@click="handleSettings"></i> |
|||
</div> --> |
|||
</div> |
|||
<!-- 添加或修改公告对话框 --> |
|||
<el-dialog title="阈值设定" :visible.sync="open" width="780px" append-to-body> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|||
|
|||
<el-form-item label="阈值" prop="noticeTitle"> |
|||
<el-input v-model="form.noticeTitle" placeholder="请输入阈值" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="open = false">取 消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { updateNotice } from "@/api/system/notice"; |
|||
export default { |
|||
name: "Index", |
|||
data() { |
|||
return { |
|||
open: false, |
|||
value2: false, |
|||
// 表单参数 |
|||
form: {}, |
|||
// 表单校验 |
|||
rules: { |
|||
noticeTitle: [ |
|||
{ required: true, message: "公告标题不能为空", trigger: "blur" } |
|||
], |
|||
noticeType: [ |
|||
{ required: true, message: "公告类型不能为空", trigger: "change" } |
|||
] |
|||
}, |
|||
// 版本号 |
|||
version: "3.8.9", |
|||
}; |
|||
}, |
|||
methods: { |
|||
goTarget(href) { |
|||
window.open(href, "_blank"); |
|||
// 阈值设定弹窗 |
|||
handleSettings() { |
|||
this.open = true; |
|||
this.form = { |
|||
noticeTitle: "30", |
|||
}; |
|||
// this.$message.success(''); |
|||
}, |
|||
/** 提交按钮 */ |
|||
submitForm: function () { |
|||
this.$refs["form"].validate(valid => { |
|||
if (valid) { |
|||
updateNotice(this.form).then(response => { |
|||
this.$modal.msgSuccess("操作成功"); |
|||
this.open = false; |
|||
this.getList(); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.home { |
|||
blockquote { |
|||
padding: 10px 20px; |
|||
margin: 0 0 20px; |
|||
font-size: 17.5px; |
|||
border-left: 5px solid #eee; |
|||
} |
|||
hr { |
|||
margin-top: 20px; |
|||
margin-bottom: 20px; |
|||
border: 0; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.col-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
ul { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.div-box { |
|||
width: 500px; |
|||
box-sizing: border-box; |
|||
padding: 16px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 10px; |
|||
|
|||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
font-size: 13px; |
|||
color: #676a6c; |
|||
overflow-x: hidden; |
|||
|
|||
ul { |
|||
list-style-type: none; |
|||
.div-box-title { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
text-align: center; |
|||
border-bottom: 1px solid #ccc; |
|||
padding-bottom: 16px; |
|||
} |
|||
} |
|||
|
|||
h4 { |
|||
margin-top: 0px; |
|||
.div-ul { |
|||
.div-li>div:nth-of-type(1) { |
|||
border-right: 1px solid #ccc; |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
h2 { |
|||
margin-top: 10px; |
|||
font-size: 26px; |
|||
font-weight: 100; |
|||
} |
|||
.div-li { |
|||
font-size: 18px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 12px; |
|||
|
|||
p { |
|||
margin-top: 10px; |
|||
div { |
|||
flex: 1; |
|||
align-items: center; |
|||
} |
|||
|
|||
b { |
|||
font-weight: 700; |
|||
span { |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.update-log { |
|||
ol { |
|||
display: block; |
|||
list-style-type: decimal; |
|||
margin-block-start: 1em; |
|||
margin-block-end: 1em; |
|||
margin-inline-start: 0; |
|||
margin-inline-end: 0; |
|||
padding-inline-start: 40px; |
|||
} |
|||
.div-tips { |
|||
font-size: 18px; |
|||
line-height: 22px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
span { |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue