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 }} {{ item.name }}
</div> </div>
</div> </div>
<div class="equipmentWarnList"> <div class="equipmentWarnList" id="equipmentWarnList">
<div <div
class="warnList" class="warnList"
v-for="(item, index) in warnList" v-for="(item, index) in warnList"
@ -320,34 +320,62 @@ export default {
], ],
equipmentBtnAc: "", //点击预警 equipmentBtnAc: "", //点击预警
warnList: [ warnList: [
// { {
// id: "1", id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"), icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10", time: "2023年03月12日 15:45:10",
// case: "设备故障", case: "设备故障",
// grade: "三级", grade: "三级",
// }, },
// { {
// id: "2", id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"), icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10", time: "2023年03月12日 15:45:10",
// case: "设备故障", case: "设备故障",
// grade: "三级", grade: "三级",
// }, },
// { {
// id: "3", id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.png"), icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10", time: "2023年03月12日 15:45:10",
// case: "设备故障", case: "设备故障",
// grade: "三级", grade: "三级",
// }, },
// { {
// id: "4", id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"), icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10", time: "2023年03月12日 15:45:10",
// case: "设备故障", case: "设备故障",
// grade: "三级", 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: [ sunList: [
{ {
@ -418,7 +446,7 @@ export default {
this.getQOQ() this.getQOQ()
this.getYOY() this.getYOY()
// window.createMqtt = this.createMqtt(); // window.createMqtt = this.createMqtt();
this.autoScroll(67, 50, 0, document.getElementById('equipmentWarnList'))
}, },
watch: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
@ -1114,6 +1142,35 @@ export default {
closeEquipmentShow() { closeEquipmentShow() {
this.equipmentShow = false; 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: {}, components: {},
}; };

211
src/views/index.vue
View File

@ -5,31 +5,18 @@
<div class="title">智慧法庭</div> <div class="title">智慧法庭</div>
<div class="wisdomContent"> <div class="wisdomContent">
<div class="wisdomTop"> <div class="wisdomTop">
<div <div class="wisdomData" v-for="(item, index) in wisdomList" :key="index">
class="wisdomData"
v-for="(item, index) in wisdomList"
:key="index"
>
<div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div> <div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
<div <div
:class="houseList[index]" :class="houseList[index]"
style=" style="width: 100%; height: 100%; color: #fff; font-size: 0.7rem"
width: 100%;
height: 100%;
color: #fff;
font-size: 0.7rem;
"
> >
{{ item.count }} {{ item.count }}
</div> </div>
</div> </div>
</div> </div>
<div class="wisdomBottom"> <div class="wisdomBottom">
<div <div class="wisdomCount" v-for="(item, index) in wisdomMonArr" :key="index">
class="wisdomCount"
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div style="width: 100%; font-size: 0.6rem"> <div style="width: 100%; font-size: 0.6rem">
<span>{{ item.name }}:</span> <span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{ <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
@ -64,12 +51,8 @@
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</div> </div>
<div class="warnList"> <div class="warnList" id="warnList">
<div <div class="warnListContent" v-for="(item, index) in warnList" :key="index" id="warnListContent">
class="warnListContent"
v-for="(item, index) in warnList"
:key="index"
>
<div class="warnArray"> <div class="warnArray">
<span>{{ item.id }}</span> <span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" /> <img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -183,36 +166,36 @@
</el-select> </el-select>
</div> </div>
<div class="selectChange1"> <div class="selectChange1">
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
v-if= "yearShow" v-if="yearShow"
align="right" align="right"
type="year" type="year"
value-format="yyyy" value-format="yyyy"
placeholder="选择年" placeholder="选择年"
@change="selectTime" @change="selectTime"
> >
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value2" v-model="value2"
v-if= "monthShow" v-if="monthShow"
type="month" type="month"
value-format="yyyyMM" value-format="yyyyMM"
placeholder="选择月" placeholder="选择月"
@change="selectTimeMM" @change="selectTimeMM"
> >
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
v-if= "dateShow" v-if="dateShow"
type="date" type="date"
placeholder="选择日" placeholder="选择日"
value-format="yyyyMMdd" value-format="yyyyMMdd"
:picker-options="pickerOptions" :picker-options="pickerOptions"
@change="selectTimeDD" @change="selectTimeDD"
> >
</el-date-picker> </el-date-picker>
</div> </div>
<div class="selectChange"> <div class="selectChange">
<el-select <el-select
v-model="selectValue" v-model="selectValue"
@ -240,14 +223,14 @@
:key="index" :key="index"
@click="changeCamera(item.video)" @click="changeCamera(item.video)"
> --> > -->
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> --> <!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
<!-- <iframe <!-- <iframe
:src="item.video" :src="item.video"
ref="iframeRef" ref="iframeRef"
frameborder="0" frameborder="0"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
></iframe> --> ></iframe> -->
<!-- <camera <!-- <camera
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
:videoUrl="item.video" :videoUrl="item.video"
:id="index" :id="index"
@ -412,6 +395,20 @@ export default {
cause: "<空调设备>发生事故", cause: "<空调设备>发生事故",
risk: "三级", 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: { selectValue: {
value: "79", value: "79",
@ -512,6 +509,7 @@ export default {
// this.cameraList = camera; // this.cameraList = camera;
// }, 1000); // }, 1000);
this.warnSelect(0); this.warnSelect(0);
this.autoScroll(67, 50, 0, document.getElementById('warnList'))
}, },
watch: { watch: {
alarmAllLevel(val) { alarmAllLevel(val) {
@ -519,7 +517,7 @@ export default {
console.log("alarmAllLevel", val); console.log("alarmAllLevel", val);
this.upmqttData(val); this.upmqttData(val);
}, },
alarmFirstLevel(val) { alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel", val); console.log("alarmFirstLevel", val);
@ -542,27 +540,27 @@ export default {
alarmAllLevel(val) { alarmAllLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmAllLevel",val) console.log("alarmAllLevel",val)
this.upmqttData(val) this.upmqttData(val)
}, },
alarmFirstLevel(val) { alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val) console.log("alarmFirstLevel",val)
if(val.length!=0){ if(val.length!=0){
this.upmqttData(val) this.upmqttData(val)
} }
}, },
alarmSecondLevel(val) { alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val) console.log("alarmSecondLevel",val)
this.upmqttData(val) this.upmqttData(val)
}, },
alarmThirdLevel(val) { alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val) console.log("alarmThirdLevel",val)
this.upmqttData(val) this.upmqttData(val)
}, },
}, },
methods: { methods: {
@ -581,7 +579,7 @@ export default {
getHikvision(dataList).then((res) => { getHikvision(dataList).then((res) => {
console.log(res, "============="); console.log(res, "=============");
}).catch(err => { }).catch(err => {
}); });
}, },
selectTime(val){ selectTime(val){
@ -600,7 +598,7 @@ export default {
getAreaList(data).then((res) => { getAreaList(data).then((res) => {
this.energyEcharts(res.data.data); this.energyEcharts(res.data.data);
}).catch(err => { }).catch(err => {
}); });
}else{ }else{
// this.filters.year = "" // this.filters.year = ""
@ -623,7 +621,7 @@ export default {
getAreaList(data).then((res) => { getAreaList(data).then((res) => {
this.energyEcharts(res.data.data); this.energyEcharts(res.data.data);
}).catch(err => { }).catch(err => {
}); });
}else{ }else{
// this.filters.year = "" // this.filters.year = ""
@ -646,7 +644,7 @@ export default {
getAreaList(data).then((res) => { getAreaList(data).then((res) => {
this.energyEcharts(res.data.data); this.energyEcharts(res.data.data);
}).catch(err => { }).catch(err => {
}); });
}else{ }else{
// this.filters.year = "" // this.filters.year = ""
@ -668,7 +666,7 @@ export default {
getHikvision(dataList).then((res) => { getHikvision(dataList).then((res) => {
console.log(res, "============="); console.log(res, "=============");
}).catch(err => { }).catch(err => {
}); });
}, },
//获取视频流 //获取视频流
@ -698,7 +696,7 @@ export default {
this.cameraList[0].video =res.data.result.data.url; this.cameraList[0].video =res.data.result.data.url;
console.log(this.cameraList[0].video,'视频地址'); console.log(this.cameraList[0].video,'视频地址');
}).catch(err => { }).catch(err => {
}); });
let dataList1 = { let dataList1 = {
@ -716,7 +714,7 @@ export default {
// dataList1.data.cameraIndexCode; // dataList1.data.cameraIndexCode;
this.cameraList[1].video =res.data.result.data.url; this.cameraList[1].video =res.data.result.data.url;
}).catch(err => { }).catch(err => {
}); });
let dataList2 = { let dataList2 = {
path: pathUrl, path: pathUrl,
@ -733,7 +731,7 @@ export default {
// dataList2.data.cameraIndexCode; // dataList2.data.cameraIndexCode;
this.cameraList[2].video =res.data.result.data.url; this.cameraList[2].video =res.data.result.data.url;
}).catch(err => { }).catch(err => {
}); });
let dataList3 = { let dataList3 = {
path: pathUrl, path: pathUrl,
@ -750,7 +748,7 @@ export default {
// dataList3.data.cameraIndexCode; // dataList3.data.cameraIndexCode;
this.cameraList[3].video =res.data.result.data.url; this.cameraList[3].video =res.data.result.data.url;
}).catch(err => { }).catch(err => {
}); });
}, },
//获取建筑Id //获取建筑Id
@ -779,7 +777,7 @@ export default {
}; };
}); });
}).catch(err => { }).catch(err => {
}); });
}, },
//智慧节能选择时间 //智慧节能选择时间
@ -804,7 +802,7 @@ export default {
// getAreaList(data).then((res) => { // getAreaList(data).then((res) => {
// this.energyEcharts(res.data.data); // this.energyEcharts(res.data.data);
// }).catch(err => { // }).catch(err => {
// }); // });
// }, // },
selectDataList(val) { selectDataList(val) {
@ -854,7 +852,7 @@ export default {
console.log(res.data.data, "sssssssssssssss"); console.log(res.data.data, "sssssssssssssss");
this.energyEcharts(res.data.data); this.energyEcharts(res.data.data);
}).catch(err => { }).catch(err => {
}); });
}, },
//选中图片 //选中图片
@ -885,7 +883,7 @@ export default {
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params).then((res) => {
this.upWainData(res.data.data); this.upWainData(res.data.data);
}).catch(err => { }).catch(err => {
}); });
} else { } else {
let params = { let params = {
@ -895,7 +893,7 @@ export default {
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params).then((res) => {
this.upWainData(res.data.data); this.upWainData(res.data.data);
}).catch(err => { }).catch(err => {
}); });
} }
}, },
@ -1217,7 +1215,7 @@ export default {
}; };
myChart.setOption(option); myChart.setOption(option);
}).catch(err => { }).catch(err => {
}); });
}, },
maintenanceLeft() { maintenanceLeft() {
@ -1640,7 +1638,36 @@ export default {
break; 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: { components: {
camera, camera,
cameraBig, cameraBig,
@ -1757,8 +1784,8 @@ export default {
} }
} }
.leftThree { .leftThree {
// height: 48%; // height: 48%;
height: 52%; height: 52%;
width: 100%; width: 100%;
.warnListTitle { .warnListTitle {
height: 6%; height: 6%;
@ -1813,12 +1840,13 @@ export default {
} }
.warnList { .warnList {
height: calc(100% - 31%); height: calc(100% - 31%);
// height:480px;
width: 100%; width: 100%;
background: url(../assets/images/warnDottedLine.png) no-repeat; background: url(../assets/images/warnDottedLine.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: auto; overflow: auto;
.warnListContent { .warnListContent {
// height: 27%; // height: 27%;
height: 25%; height: 25%;
width: 100%; width: 100%;
border: 1px dashed #fff; border: 1px dashed #fff;
@ -2003,8 +2031,9 @@ export default {
position: absolute; position: absolute;
top: 22%; top: 22%;
right: 35%; right: 35%;
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner { /deep/ .el-date-editor.el-input,
width: 134px; .el-date-editor.el-input__inner {
width: 134px;
} }
/deep/ .el-select { /deep/ .el-select {
width: 100%; width: 100%;
@ -2038,15 +2067,15 @@ export default {
align-items: center; align-items: center;
} }
/deep/ .el-input__icon { /deep/ .el-input__icon {
height: 100%; height: 100%;
width: 25px; width: 25px;
text-align: center; text-align: center;
-webkit-transition: all .3s; -webkit-transition: all 0.3s;
transition: all .3s; transition: all 0.3s;
line-height: 22px; line-height: 22px;
} }
/deep/ .el-input--suffix .el-input__inner { /deep/ .el-input--suffix .el-input__inner {
padding-right: 18px; padding-right: 18px;
} }
} }
} }
@ -2138,5 +2167,3 @@ export default {
} }
} }
</style> </style>