Skip to content

H
honghu
Commit a59c51cf authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

大屏开发

parent d0b6e4e1
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 59 deletions
src/api/bigscreen/index.js
View file @ a59c51cf
......@@ -10,10 +10,18 @@ export function getWeather(params) {
})
}
// 边坡
export function huanjingList() {
// 气象、污水、温水
export function huanjingList(query) {
return request({
url: '/system/enviData/getByType?monitorType='+query,
method: 'get',
})
}
// 边坡沉降监测
export function bianpoChenJiangList(query) {
return request({
url: '/system/enviData/getByType',
url: '/system/data/getNowData',
method: 'get',
})
}
......
src/views/bigscreen/index.vue
View file @ a59c51cf
......@@ -156,18 +156,17 @@
<div class="in-box">
<div class="tit-bg"></div>
<h3 class="el-icon-s-unfold">环境监测气象站</h3>
<div class="cpintro1" >
</div>
<div class="km-thead col02d upop scrollListTitle">
<div>设备名称</div>
<div>报警时间</div>
<div>报警级别</div>
<div>监测项</div>
<div>监测值</div>
<div>监测时间</div>
</div>
<vue-seamless-scroll :data="listData" class="warp">
<vue-seamless-scroll :data="listData4huanjing" class="warp">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="title" v-text="item.title"></span>
<span class="date" v-text="item.date"></span>
<li v-for="(item, index) in listData4huanjing" :key="index">
<span class="title qixiangspan" v-text="item.items"></span>
<span class="title qixiangspan" v-text="item.evalue"></span>
<span class="date qixiangspan" v-text="item.time"></span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -178,9 +177,23 @@
<div class="layerWd1">
<div class="in-box">
<div class="tit-bg"></div>
<h3 class="el-icon-s-unfold">环境监测</h3>
<indexenvi :air="navActv"></indexenvi>
<indexwater :air="navActv"></indexwater>
<h3 class="el-icon-s-unfold">沉降监测GNSS</h3>
<div class="km-thead col02d upop scrollListTitle4Gnss">
<div>边坡监测点</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<vue-seamless-scroll :data="listData4gnss" class="warp">
<ul class="item">
<li v-for="(item, index) in listData4gnss" :key="index">
<span class="title gnsspan" v-text="item.sensorname"></span>
<span class="title gnsspan" v-text="item.dispX"></span>
<span class="date gnsspan" v-text="item.dispY"></span>
<span class="date gnsspan" v-text="item.dispH"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
......@@ -188,7 +201,7 @@
<div class="layerWd1">
<div class="in-box">
<div class="tit-bg"></div>
<h3 class="el-icon-s-unfold">储量管理</h3>
<h3 class="el-icon-s-unfold">排水口污水水质</h3>
<div class="first-cl first-cl1">
<div class="cl1bg"></div>
<div class="cl1left">
......@@ -242,7 +255,7 @@
<div class="layerWd1">
<div class="in-box">
<div class="tit-bg"></div>
<h3 class="el-icon-s-unfold">气象情况</h3>
<h3 class="el-icon-s-unfold">温泉水质</h3>
<div id="weather1" class="weather">
<div class="rt1-info">
<p>接口暂停服务</p>
......@@ -295,15 +308,15 @@
</div>
</div>
</div>
<div class="d0 d-3">
<!-- <div class="d0 d-3">
<div class="layerWd1">
<div class="in-box">
<div class="tit-bg"></div>
<h3 class="el-icon-s-unfold">视频监控</h3>
<h3 class="el-icon-s-unfold">降雨量</h3>
<div class="indexjiankong" @click="jiankong('all')"></div>
</div>
</div>
</div>
</div> -->
</div>
</div>
<div class="d_ d_0" :class="{ actv: navActv === 1 }">
......@@ -954,7 +967,9 @@ import {
indexReserves,
isNewAlarm,
newAlarmList,
huanjingList
huanjingList,
bianpoChenJiangList
} from "@/api/bigscreen/index.js";
import { getComVideo } from "@/api/company.js";
import "echarts-liquidfill"; // 引入水球图的组件
......@@ -980,36 +995,10 @@ export default {
data() {
return {
// 2024-5-25 dabao
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}],
listData4huanjing: [],
listData4gnss: [],
listData4wushui: [],
listData4wenshui: [],
playUrl: "",
comIntroShow: false,
newAlarmListData: [],
......@@ -1383,7 +1372,8 @@ export default {
this.nowWaterData();
this.indexCl();
this.getHuanjingList()
this.getJianCeList()
this.getBianpoChenJiangList()
});
this.chartConfig = {
......@@ -1422,13 +1412,27 @@ export default {
},
},
methods: {
getHuanjingList(){
debugger
huanjingList()
getBianpoChenJiangList(){
bianpoChenJiangList().then((res) => {
this.listData4gnss = res.data || []
})
},
getJianCeList(){
// 40322034 气象站
// 40281845 污水水质
// 40281855 温泉水质
// 40306684 自动化运
huanjingList('40322034') //
.then((res) => {
console.log(res, "环境监测");
if (res.code === 200) {
}
this.listData4huanjing = res.data || []
})
huanjingList('40281845') //
.then((res) => {
this.listData4wushui = res.data || []
})
huanjingList('40281855') //
.then((res) => {
this.listData4wenshui = res.data || []
})
},
......@@ -6050,10 +6054,33 @@ body .el-dialog__body {
height: 40px;
font-size: 18px;
font-weight: bold;
div{
width: 30%;
text-align: center;
&:last-child{
width: 40%;
}
}
}
.scrollListTitle4Gnss{
display: flex;
justify-content: space-around;
align-items: center;
height: 40px;
font-size: 18px;
font-weight: bold;
div{
width: 20%;
text-align: center;
&:first-child{
width: 40%;
}
}
}
.warp {
height: 270px;
width: 360px;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
......@@ -6070,6 +6097,22 @@ body .el-dialog__body {
font-size: 15px;
color: #bff7ff;
}
.qixiangspan{
display: inline-block;
width: 30%;
text-align: center;
&:last-child{
width: 40%;
}
}
.gnsspan{
display: inline-block;
text-align: center;
width: 20%;
&:first-child{
width: 40%;
}
}
}
}
</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