Skip to content

Z
zhxf_vue
Commit 80fc6d2e authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 6dc3fe88
Show whitespace changes
Inline Side-by-side
Showing with 365 additions and 12 deletions
src/layout/header-aside/components/components/menu-item/index.vue
View file @ 80fc6d2e
...@@ -23,20 +23,20 @@ export default { ...@@ -23,20 +23,20 @@ export default {
menu: { menu: {
type: Object, type: Object,
required: false, required: false,
default: () => {}, default: () => {}
}, }
}, },
data() { data() {
return { return {
uniqueId: uniqueId('d2-menu-empty-'), uniqueId: uniqueId('d2-menu-empty-')
} }
}, },
methods: { methods: {
handleMenuClick() { handleMenuClick() {
//点击菜单时重新刷新页面 //点击菜单时重新刷新页面
//this.reload() //this.reload()
}, }
}, }
} }
</script> </script>
<style> <style>
......
src/layout/header-aside/components/menu-header/index.vue
View file @ 80fc6d2e
...@@ -50,7 +50,8 @@ export default { ...@@ -50,7 +50,8 @@ export default {
currentTranslateX: 0, //移动宽度 currentTranslateX: 0, //移动宽度
throttledCheckScroll: null, throttledCheckScroll: null,
menuWidth: 0, //(每个)菜单栏的宽度 menuWidth: 0, //(每个)菜单栏的宽度
menuLength: 0 //菜单个数 menuLength: 0, //菜单个数
list: ['/monitor', '/scene', '/fire', '/patrol', '/stats', '/eq']
} }
}, },
watch: { watch: {
...@@ -70,6 +71,10 @@ export default { ...@@ -70,6 +71,10 @@ export default {
}, },
methods: { methods: {
handleMenuSelect(index) { handleMenuSelect(index) {
// console.log(index)
if (this.list.indexOf(index) > -1) {
return this.$message.warning('临时菜单')
}
this.header.forEach(res => { this.header.forEach(res => {
if (res.path === index) { if (res.path === index) {
if (res.list && res.list.length) { if (res.list && res.list.length) {
......
src/main.js
View file @ 80fc6d2e
...@@ -46,6 +46,9 @@ import { preventReClick } from '@/util/plugins' ...@@ -46,6 +46,9 @@ import { preventReClick } from '@/util/plugins'
import toastRegistry from './components/toast/index' import toastRegistry from './components/toast/index'
import ElementUI from 'element-ui' //element-ui的全部组件 import ElementUI from 'element-ui' //element-ui的全部组件
import cardWarp from '@/pages/components/cardWarp.vue'
Vue.component('cardWarp', cardWarp)
// import 'element-ui/lib/theme-chalk/index.css' // import 'element-ui/lib/theme-chalk/index.css'
Vue.use(toastRegistry)//element-ui的css Vue.use(toastRegistry)//element-ui的css
Vue.use(ElementUI) //使用elementUI Vue.use(ElementUI) //使用elementUI
......
src/pages/components/cardWarp.vue 0 → 100644
View file @ 80fc6d2e
<template lang='pug'>
.card-warp
.card-header(
:style="{ height, 'line-height': height, background: bgcolor }"
)
span.card-title {{ title }}
div(style="margin-left: 20px;color:#3A648A;")
slot(name="left")
span(style='font-size:12px;')
slot(name="right")
.card-content
slot(name="content")
</template>
<script>
export default {
name: 'card-warp',
props: {
title: {
type: String,
default: '数据统计'
},
height: {
type: String,
default: '74px'
},
bgcolor: {
type: String,
default: '#f2faff'
}
}
}
</script>
<style lang="scss" scoped>
.card-warp {
width: 100%;
// height: 100%;
border: 1px solid #ececec;
.card-header {
display: flex;
justify-content: space-between;
padding: 0 10px;
border-bottom: 1px solid #ececec;
.card-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
// font-weight: 600;
}
}
.card-content {
margin: 20px;
}
}
</style>
src/pages/ol/kanban/index.vue
View file @ 80fc6d2e
<template> <template lang='pug'>
<div> el-container(style="padding: 0px; height: 77.6vh")
看板 el-header(
</div> style="height: 42px; line-height: 42px; border: 1px solid rgba(195, 195, 195, 1); background: #f4f4f4"
)
span.title-bold
el-select(v-model="roomId", size="mini")
el-option(label="c区1房间", value="11")
el-option(label="c区2房间", value="22")
el-main.box_main
el-row(:gutter="20")
el-col(
:span="3 * item.list.length",
v-for="(item, index) in dataList",
:key="index",
style="margin-bottom: 20px"
)
card-warp(:title="item.name", height="35px")
div(slot="content")
el-row(typr="flex", justify="center", :gutter="20")
el-col(:span="24 / item.list.length", v-for="child in item.list")
card-warp(
:title="child.leftName",
height="35px",
bgcolor="#f5f5f5"
)
div(slot="right")
| {{ child.rightName }}
div(slot="content")
.content_warp
div(:class="child.type")
div.value(:style="{color:child.over?'red':'#10cc2e'}") {{ child.value }}
.scope {{ child.scope }}
</template> </template>
<script> <script>
export default { export default {
data() {
return {
roomId: '11',
dataList: [
{
name: '喷淋系统',
list: [
{
leftName: '喷淋系统',
rightName: '水流压力',
type: 'slyl',
value: '0.319mp',
scope: '参考值：0.2~0.8mp'
},
{
leftName: '喷淋系统',
rightName: '泵房温度',
type: 'wd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水位高度',
type: 'swgd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水流流量',
type: 'slll',
value: '22.5℃',
scope: '参考值：0.0~50℃'
}
]
},
{
name: '喷淋系统',
list: [
{
leftName: '喷淋系统',
rightName: '二氧化碳',
type: 'co2',
value: '0.319mp',
scope: '参考值：0.2~0.8mp'
},
{
leftName: '喷淋系统',
rightName: '一氧化碳',
type: 'co',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '湿度',
type: 'sd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '风速',
type: 'fs',
value: '22.5℃',
scope: '参考值：0.0~50℃'
}
]
},
{
name: '喷淋系统',
list: [
{
leftName: '喷淋系统',
rightName: '风压',
type: 'fy',
value: '0.319mp',
scope: '参考值：0.2~0.8mp'
},
{
leftName: '喷淋系统',
rightName: '泵房温度',
type: 'wd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水位高度',
type: 'swgd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水位高度',
type: 'swgd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
}
]
},
{
name: '喷淋系统',
list: [
{
leftName: '喷淋系统',
rightName: '水流压力',
type: 'slyl',
value: '0.319mp',
scope: '参考值：0.2~0.8mp'
},
{
leftName: '喷淋系统',
rightName: '泵房温度',
type: 'wdh',
value: '60.5℃',
over: true,
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水位高度',
type: 'swgd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
},
{
leftName: '喷淋系统',
rightName: '水位高度',
type: 'swgd',
value: '22.5℃',
scope: '参考值：0.0~50℃'
}
]
} }
]
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content_warp {
display: flex;
flex-direction: column;
align-items: center;
.value {
margin: 5px;
}
.scope {
color: #a0a0a0;
font-size: 13px;
}
.co2 {
width: 100px;
height: 75px;
background: url("~@/assets/images/imgs/co2.png") no-repeat;
background-size: 100% 100%;
}
.co2h {
width: 100px;
height: 75px;
background: url("~@/assets/images/imgs/co2h.png") no-repeat;
background-size: 100% 100%;
}
.co {
width: 73px;
height: 75px;
background: url("~@/assets/images/imgs/co.png") no-repeat;
background-size: 100% 100%;
}
.coh {
width: 73px;
height: 75px;
background: url("~@/assets/images/imgs/coh.png") no-repeat;
background-size: 100% 100%;
}
.swgd {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/swgd.png") no-repeat;
background-size: 100% 100%;
}
.swgdh {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/swgdh.png") no-repeat;
background-size: 100% 100%;
}
.wd {
width: 57px;
height: 75px;
background: url("~@/assets/images/imgs/wd.png") no-repeat;
background-size: 100% 100%;
}
.wdh {
width: 57px;
height: 75px;
background: url("~@/assets/images/imgs/wdh.png") no-repeat;
background-size: 100% 100%;
}
.slll {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/slll.png") no-repeat;
background-size: 100% 100%;
}
.slllh {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/slllh.png") no-repeat;
background-size: 100% 100%;
}
.slyl {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/slyl.png") no-repeat;
background-size: 100% 100%;
}
.slylh {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/slylh.png") no-repeat;
background-size: 100% 100%;
}
.sd {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/sd.png") no-repeat;
background-size: 100% 100%;
}
.sdh {
width: 65px;
height: 75px;
background: url("~@/assets/images/imgs/sdh.png") no-repeat;
background-size: 100% 100%;
}
.fs {
width: 61px;
height: 75px;
background: url("~@/assets/images/imgs/fs.png") no-repeat;
background-size: 100% 100%;
}
.fsh {
width: 61px;
height: 75px;
background: url("~@/assets/images/imgs/fsh.png") no-repeat;
background-size: 100% 100%;
}
.fy {
width: 72px;
height: 75px;
background: url("~@/assets/images/imgs/fy.png") no-repeat;
background-size: 100% 100%;
}
.fyh {
width: 72px;
height: 75px;
background: url("~@/assets/images/imgs/fyh.png") no-repeat;
background-size: 100% 100%;
}
}
</style> </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