chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-05-16 12:31:26 +08:00
parent 308b825869
commit e2950c6046
3 changed files with 206 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

117
src/views/energySaving.vue
View File

@ -63,7 +63,7 @@ const { color } = require("echarts")
{{ item.name }}
</div>
</div>
<div class="equipmentWarnList">
<div class="equipmentWarnList" id="equipmentWarnList">
<div
class="warnList"
v-for="(item, index) in warnList"
@ -320,34 +320,62 @@ export default {
],
equipmentBtnAc: "", //点击预警
warnList: [
// {
// id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
// {
// id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
// {
// id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
// {
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
{
id: "1",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "2",
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "3",
icon: require("../assets/images/jieNengImg/warnWhite.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
], //故障数组
sunList: [
{
@ -418,7 +446,7 @@ export default {
this.getQOQ()
this.getYOY()
// window.createMqtt = this.createMqtt();
this.autoScroll(67, 50, 0, document.getElementById('equipmentWarnList'))
},
watch: {
alarmFirstLevel(val) {
@ -1114,6 +1142,35 @@ export default {
closeEquipmentShow() {
this.equipmentShow = false;
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
console.log(element.scrollHeight);
let interval
let step = 1
element.scrollTop = 0
function start() {
interval = setInterval(scrolling, speed)
element.scrollTop += step
}
function scrolling() {
if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
// element.scrollTop += step
step = 1
element.scrollTop = 0
} else {
if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\
step *= -1 // 转换方向
}
clearInterval(interval)
setTimeout(start, delay)
}
}
if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
setTimeout(start, delay)
}
}
},
components: {},
};

89
src/views/index.vue
View File

@ -5,31 +5,18 @@
<div class="title">智慧法庭</div>
<div class="wisdomContent">
<div class="wisdomTop">
<div
class="wisdomData"
v-for="(item, index) in wisdomList"
:key="index"
>
<div class="wisdomData" v-for="(item, index) in wisdomList" :key="index">
<div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
<div
:class="houseList[index]"
style="
width: 100%;
height: 100%;
color: #fff;
font-size: 0.7rem;
"
style="width: 100%; height: 100%; color: #fff; font-size: 0.7rem"
>
{{ item.count }}
</div>
</div>
</div>
<div class="wisdomBottom">
<div
class="wisdomCount"
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div class="wisdomCount" v-for="(item, index) in wisdomMonArr" :key="index">
<div style="width: 100%; font-size: 0.6rem">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
@ -64,12 +51,8 @@
<span>{{ item.name }}</span>
</div>
</div>
<div class="warnList">
<div
class="warnListContent"
v-for="(item, index) in warnList"
:key="index"
>
<div class="warnList" id="warnList">
<div class="warnListContent" v-for="(item, index) in warnList" :key="index" id="warnListContent">
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -185,7 +168,7 @@
<div class="selectChange1">
<el-date-picker
v-model="value1"
v-if= "yearShow"
v-if="yearShow"
align="right"
type="year"
value-format="yyyy"
@ -195,7 +178,7 @@
</el-date-picker>
<el-date-picker
v-model="value2"
v-if= "monthShow"
v-if="monthShow"
type="month"
value-format="yyyyMM"
placeholder="选择月"
@ -204,7 +187,7 @@
</el-date-picker>
<el-date-picker
v-model="value3"
v-if= "dateShow"
v-if="dateShow"
type="date"
placeholder="选择日"
value-format="yyyyMMdd"
@ -412,6 +395,20 @@ export default {
cause: "<空调设备>发生事故",
risk: "三级",
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: "三级",
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: "三级",
},
], //报警数组
selectValue: {
value: "79",
@ -512,6 +509,7 @@ export default {
// this.cameraList = camera;
// }, 1000);
this.warnSelect(0);
this.autoScroll(67, 50, 0, document.getElementById('warnList'))
},
watch: {
alarmAllLevel(val) {
@ -1640,7 +1638,36 @@ export default {
break;
}
},
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
console.log(element.scrollHeight);
let interval
let step = 1
element.scrollTop = 0
function start() {
interval = setInterval(scrolling, speed)
element.scrollTop += step
}
function scrolling() {
if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
// element.scrollTop += step
step = 1
element.scrollTop = 0
} else {
if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\
step *= -1 // 转换方向
}
clearInterval(interval)
setTimeout(start, delay)
}
}
if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
setTimeout(start, delay)
}
}
},
components: {
camera,
cameraBig,
@ -1813,6 +1840,7 @@ export default {
}
.warnList {
height: calc(100% - 31%);
// height:480px;
width: 100%;
background: url(../assets/images/warnDottedLine.png) no-repeat;
background-size: 100% 100%;
@ -2003,7 +2031,8 @@ export default {
position: absolute;
top: 22%;
right: 35%;
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 134px;
}
/deep/ .el-select {
@ -2041,8 +2070,8 @@ export default {
height: 100%;
width: 25px;
text-align: center;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
line-height: 22px;
}
/deep/ .el-input--suffix .el-input__inner {
@ -2138,5 +2167,3 @@ export default {
}
}
</style>