Commit b924036b authored by 张牧越's avatar 张牧越

样式修正

parent e7ffafdc
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</title> </title>
</head> </head>
<body> <body style="min-width: 1300px;">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong> Please enable it to continue.</strong>
......
...@@ -421,7 +421,14 @@ export default { ...@@ -421,7 +421,14 @@ export default {
}; };
chart.setOption(option); chart.setOption(option);
}, },
scrollEnd() {
this.$refs.scroll._cancle();
setTimeout(() => {
this.$ref.scroll._startMove();
}, 3000);
}, },
},
mounted() { mounted() {
this.renderWarningChart(); this.renderWarningChart();
this.renderTodayChart(); this.renderTodayChart();
......
...@@ -151,6 +151,13 @@ ...@@ -151,6 +151,13 @@
<div class="side-area"> <div class="side-area">
<Title text="报警信息"></Title> <Title text="报警信息"></Title>
<ShadowContainer> <ShadowContainer>
<vue-seamless-scroll
:data="warnings"
:class-option="classOption"
class="warp"
@ScrollEnd="scrollEnd"
refs="scroll"
>
<div <div
class="warn-title" class="warn-title"
:style="{ borderColor: '#fff' }" :style="{ borderColor: '#fff' }"
...@@ -160,9 +167,11 @@ ...@@ -160,9 +167,11 @@
<div class="warn-text">{{ warn.text }}</div> <div class="warn-text">{{ warn.text }}</div>
<div class="warn-time">{{ warn.time }}</div> <div class="warn-time">{{ warn.time }}</div>
</div> </div>
</vue-seamless-scroll>
</ShadowContainer> </ShadowContainer>
<Title text="扬尘噪音"></Title> <Title text="扬尘噪音"></Title>
<ShadowContainer> <ShadowContainer>
<div style="height: 590px">
<div <div
class="noise-monitor" class="noise-monitor"
v-for="(monitor, index) in noiseMonitors" v-for="(monitor, index) in noiseMonitors"
...@@ -171,6 +180,7 @@ ...@@ -171,6 +180,7 @@
<img src="@/assets/noise/icon_e_qi@2x.png" alt="" /> <img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
{{ monitor.text }} {{ monitor.text }}
</div> </div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
</div> </div>
...@@ -234,6 +244,9 @@ export default { ...@@ -234,6 +244,9 @@ export default {
{ text: "料仓扬尘监测" }, { text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" }, { text: "料仓扬尘监测" },
], ],
classOption: {
singleHeight: 36,
},
}; };
}, },
methods: { methods: {
...@@ -723,9 +736,6 @@ export default { ...@@ -723,9 +736,6 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 18px; margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
.warn-text { .warn-text {
width: 60%; width: 60%;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -749,4 +759,9 @@ export default { ...@@ -749,4 +759,9 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.warp {
width: 100%;
height: 180px;
overflow: hidden;
}
</style> </style>
\ No newline at end of file
...@@ -492,7 +492,7 @@ export default { ...@@ -492,7 +492,7 @@ export default {
}; };
chart.setOption(option); chart.setOption(option);
}, },
scrollEnd: function () { scrollEnd() {
this.$refs.scroll._cancle(); this.$refs.scroll._cancle();
setTimeout(() => { setTimeout(() => {
this.$ref.scroll._startMove(); this.$ref.scroll._startMove();
......
<template> <template>
<div>test4</div> <div id="supervisory">
<div class="side-area">
<el-input
prefix-icon="el-icon-search"
placeholder="监控点名称"
style="margin-bottom: 20px"
></el-input>
<ShadowContainer>
<el-tree
:data="treeData"
:props="defaultProps"
icon-class="el-icon-arrow-right"
></el-tree>
</ShadowContainer>
</div>
<div></div>
</div>
</template> </template>
<script>
export default {
name: "Supervisory",
data() {
return {
treeData: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1",
},
],
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
#supervisory {
padding: 12px 20px;
display: flex;
justify-content: space-between;
.side-area {
width: 20%;
}
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-tree {
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
</style>
\ No newline at end of file
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