Merge branch 'dev-yjl' into 'shenzhen-dev'
修改中建四局（双碳管理页面）实时数据设备渲染、预警列表 See merge request !49
This commit is contained in:
yjlHub
commit
f99591021b
@ -6,17 +6,35 @@
|
||||
</div>
|
||||
<div class="right3">
|
||||
<div class="dropDown" v-show="0 === number">
|
||||
|
||||
<el-select v-model="Equipment" >
|
||||
<!-- <el-select >
|
||||
<el-option
|
||||
v-for="(item,index) in devList"
|
||||
:key="index"
|
||||
@click="realTimeMonitor(item)"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@click="realTimeMonitor(item)">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
</el-select> -->
|
||||
<el-popover placement="bottom" width="70" trigger="click">
|
||||
<ul class="devList">
|
||||
<li
|
||||
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
|
||||
v-for="(item, index) in devList"
|
||||
:key="index"
|
||||
@click="realTimeMonitor(item)"
|
||||
>
|
||||
{{ item.deviceName }}
|
||||
</li>
|
||||
</ul>
|
||||
<p class="greenBtn selectDev" slot="reference">
|
||||
<img
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
:class="'arrow' + item"
|
||||
class="arrow"
|
||||
/>
|
||||
{{ currentDevDetail.deviceName }}
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</p>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
|
||||
<div class="right4" v-show="1 === number">
|
||||
@ -32,8 +50,14 @@
|
||||
<script>
|
||||
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
|
||||
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
|
||||
import { environmentDevList } from '@/assets/js/api/environmentManage'
|
||||
import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
|
||||
import {
|
||||
environmentDevList,
|
||||
selectNewEnvironmentAlarmListApi,
|
||||
getRealTimeDustNoiseDataApi,
|
||||
getAirQualityStatisticsApi,sprayDevListApi,
|
||||
selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
|
||||
sprayOperateDataApi
|
||||
} from "@/assets/js/api/environmentManage";
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
components: {
|
||||
@ -41,26 +65,12 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options:
|
||||
[
|
||||
{
|
||||
value: '设备一',
|
||||
label: '设备一'
|
||||
},
|
||||
{
|
||||
value: '设备二',
|
||||
label: '设备二'
|
||||
},
|
||||
{
|
||||
value: '设备三',
|
||||
label: '设备三'
|
||||
},
|
||||
|
||||
],
|
||||
Equipment: '设备一',
|
||||
|
||||
number: 0,
|
||||
devList: [],
|
||||
currentDevDetail: {},
|
||||
sprayDevList:[],
|
||||
alarmList: [],
|
||||
onlineDevNum: 0,
|
||||
offlineDevNum: 0,
|
||||
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
||||
@ -81,43 +91,83 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDevList()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.createCenterChart()
|
||||
this.getRealTimeDustNoiseData()
|
||||
this.realTimeMonitor()
|
||||
// this.getDevList()
|
||||
// this.$nextTick(() => {
|
||||
// this.getDevList();
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
|
||||
//获取环境设备列表--环境监测实时数据--下拉
|
||||
getDevList() {
|
||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
|
||||
console.log('列表', result)
|
||||
this.devList = result.result
|
||||
console.log(this.devList)
|
||||
if (result.result.length > 0) {
|
||||
this.currentDevDetail = result.result[0]
|
||||
console.log('环境下拉列表进来了吗--------');
|
||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
||||
(result) => {
|
||||
console.log('环境监测下拉列表', result)
|
||||
this.devList = result.result;
|
||||
if(result.result.length>0){
|
||||
this.currentDevDetail = result.result[0];
|
||||
// this.getRealTimeDustNoiseData();
|
||||
// this.selectDustNoiseData();
|
||||
}else{
|
||||
// this.createCenterChart();
|
||||
}
|
||||
|
||||
this.$emit('custClick', this.currentDevDetail)
|
||||
|
||||
this.offlineDevNum = 0
|
||||
this.onlineDevNum = 0
|
||||
this.devList.forEach(element => {
|
||||
if (element.isClosed == 2) {
|
||||
this.offlineDevNum++
|
||||
} else {
|
||||
this.onlineDevNum++
|
||||
}
|
||||
})
|
||||
this.getRealTimeDustNoiseData()
|
||||
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
||||
// this.getRealTimeDustNoiseData();
|
||||
// },5000)
|
||||
// this.selectDustNoiseData(); 近24H
|
||||
} else {
|
||||
// this.createCenterChart();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//近24小时数据
|
||||
selectDustNoiseData() {
|
||||
var now = new Date();
|
||||
var yy = now.getFullYear(); //年
|
||||
var mm = now.getMonth() + 1; //月
|
||||
var dd = now.getDate(); //日
|
||||
var time = yy + "-";
|
||||
if (mm < 10) time += "0";
|
||||
time += mm + "-";
|
||||
if (dd < 10) time += "0";
|
||||
time += dd;
|
||||
let data = {
|
||||
searchDate:time,
|
||||
projectSn:this.projectSn,
|
||||
deviceId: this.currentDevDetail.deviceId,
|
||||
}
|
||||
selectDustNoiseDataApi(data).then(res=>{
|
||||
// console.log(res)
|
||||
this.dustData_24=res.result
|
||||
this.createdEcharts2();
|
||||
})
|
||||
},
|
||||
//获取报警列表
|
||||
getAlarmList() {
|
||||
let data = {
|
||||
projectSn: this.projectSn,
|
||||
};
|
||||
selectNewEnvironmentAlarmListApi(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.alarmList = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
sprayOperate(deviceId,operateType){
|
||||
sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
|
||||
this.sprayDevList=res.result
|
||||
});
|
||||
},
|
||||
getSprayDevList(){
|
||||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
|
||||
this.sprayDevList=res.result
|
||||
});
|
||||
},
|
||||
/** 查询 */
|
||||
handleQuery() {
|
||||
@ -127,19 +177,44 @@ export default {
|
||||
},
|
||||
// // 切换设备
|
||||
realTimeMonitor(value) {
|
||||
if (this.realTimeDustNoiseDataTime) {
|
||||
clearInterval(this.realTimeDustNoiseDataTime)
|
||||
}
|
||||
console.log('id换了吗', value)
|
||||
this.currentDevDetail = value
|
||||
this.currentDevDetail = value;
|
||||
this.getRealTimeDustNoiseData();
|
||||
this.selectDustNoiseData();
|
||||
// if (this.realTimeDustNoiseDataTime) {
|
||||
// clearInterval(this.realTimeDustNoiseDataTime)
|
||||
// }
|
||||
// console.log('id换了吗', value)
|
||||
// this.currentDevDetail = value
|
||||
|
||||
this.getRealTimeDustNoiseData()
|
||||
// this.getRealTimeDustNoiseData()
|
||||
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
||||
// this.getRealTimeDustNoiseData();
|
||||
// },5000)
|
||||
// this.getRealTimeDustNoiseData();
|
||||
|
||||
// this.selectDustNoiseData(); 近24H
|
||||
},
|
||||
//近24小时数据
|
||||
selectDustNoiseData() {
|
||||
var now = new Date();
|
||||
var yy = now.getFullYear(); //年
|
||||
var mm = now.getMonth() + 1; //月
|
||||
var dd = now.getDate(); //日
|
||||
var time = yy + "-";
|
||||
if (mm < 10) time += "0";
|
||||
time += mm + "-";
|
||||
if (dd < 10) time += "0";
|
||||
time += dd;
|
||||
let data = {
|
||||
searchDate:time,
|
||||
projectSn:this.projectSn,
|
||||
deviceId: this.currentDevDetail.deviceId,
|
||||
}
|
||||
selectDustNoiseDataApi(data).then(res=>{
|
||||
// console.log(res)
|
||||
this.dustData_24=res.result
|
||||
this.createdEcharts2();
|
||||
})
|
||||
},
|
||||
//获取环境设备详情数据
|
||||
getRealTimeDustNoiseData() {
|
||||
@ -150,7 +225,7 @@ export default {
|
||||
console.log(data)
|
||||
getRealTimeDustNoiseDataApi(data).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log('获取环境设备详情数据',res.result)
|
||||
console.log('获取环境设备详情数据------',res.result)
|
||||
if (res.result != null) {
|
||||
this.plantCap = res.result
|
||||
} else {
|
||||
@ -487,27 +562,31 @@ export default {
|
||||
margin-right: 40px;
|
||||
margin-top: -20px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #305c6d;
|
||||
background-image: url(../assets/images/common/bg_sby.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: 8px;
|
||||
::v-deep .el-select{
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background-color: #3e7c86;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
// ::v-deep .el-select{
|
||||
// width: 100px;
|
||||
// height: 20px;
|
||||
// }
|
||||
// ::v-deep .el-input__inner {
|
||||
// background-color: #3e7c86;
|
||||
// color: #fff;
|
||||
// }
|
||||
// ::v-deep .el-select__caret {
|
||||
// color: #fff;
|
||||
// }
|
||||
}
|
||||
.devList {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
li {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="containerBox">
|
||||
<div class="dataBoardContent">
|
||||
<vue-scroll>
|
||||
<table class="greenTable">
|
||||
<table class="greenTable" v-if="sprayDevList.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>设备名称</th>
|
||||
@ -14,21 +14,25 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in 8" :key="i">
|
||||
<td>一号设备</td>
|
||||
<tr v-for="(item, index) in sprayDevList" :key="index">
|
||||
<td>{{ item.deviceName }}</td>
|
||||
<td>离线</td>
|
||||
<td>pm2.5</td>
|
||||
<td>0.1μg/m³</td>
|
||||
<td>2次</td>
|
||||
<td>1次</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else style="margin-top:60px; height: 70%;text-align: center">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
<!-- <div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
|
||||
<img src="@/assets/images/noData3.png" alt srcset />
|
||||
<p>
|
||||
暂无数据
|
||||
{{$t('message.dataBoard.nodata')}} -->
|
||||
<!-- </p> -->
|
||||
<!-- </p> -->
|
||||
<!-- </div> -->
|
||||
</vue-scroll>
|
||||
</div>
|
||||
@ -37,11 +41,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "../components/Card.vue";
|
||||
import {
|
||||
environmentDevList,
|
||||
selectNewEnvironmentAlarmListApi,
|
||||
getRealTimeDustNoiseDataApi,
|
||||
getAirQualityStatisticsApi,
|
||||
sprayDevListApi,
|
||||
selectDustNoiseDataApi,
|
||||
getWeatherDataApi,
|
||||
getCurrentDayAirQualityApi,
|
||||
sprayOperateDataApi
|
||||
} from '@/assets/js/api/environmentManage'
|
||||
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
alarmList: [],
|
||||
sprayDevList: [],
|
||||
// alarmList: [
|
||||
// {
|
||||
// deviceName: "一号设备",
|
||||
@ -71,9 +89,39 @@ export default {
|
||||
// ],
|
||||
|
||||
value: true
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAlarmList()
|
||||
this.getSprayDevList()
|
||||
this.sprayOperate()
|
||||
console.log('合并列表数据', dataListNew)
|
||||
},
|
||||
methods: {
|
||||
sprayOperate(deviceId, operateType) {
|
||||
sprayOperateDataApi({ projectSn: this.$store.state.projectSn, operateType: operateType, deviceId: deviceId }).then(res => {
|
||||
this.sprayDevList = res.result
|
||||
})
|
||||
},
|
||||
getSprayDevList() {
|
||||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
this.sprayDevList = res.result
|
||||
})
|
||||
},
|
||||
//获取报警列表
|
||||
getAlarmList() {
|
||||
let data = {
|
||||
projectSn: this.projectSn
|
||||
}
|
||||
selectNewEnvironmentAlarmListApi(data).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.alarmList = res.result
|
||||
console.log('报警列表----', this.alarmList)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -88,13 +136,13 @@ export default {
|
||||
}
|
||||
.greenTable {
|
||||
th {
|
||||
color:#72bdc9;
|
||||
color: #72bdc9;
|
||||
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
|
||||
line-height: 35px;
|
||||
//opacity: 0.8;
|
||||
}
|
||||
td {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
@ -107,7 +155,7 @@ export default {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.alarmType::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 3px;
|
||||
@ -125,7 +173,7 @@ export default {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.unAlarm::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 3px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user