修改中建四局（双碳管理页面）下拉框文字居中
This commit is contained in:
yjl
parent
12327ec2c1
commit
fe363dbad8
@ -5,44 +5,38 @@
|
||||
<span @click="change(1)" :class="number == 1 ? 'newStyle' : 'btn_anniu'">零碳展厅</span>
|
||||
</div>
|
||||
<div class="right3">
|
||||
<div class="dropDown" v-show="0 === number">
|
||||
<!-- <el-select >
|
||||
<div class="dropDown" v-show="0 === number">
|
||||
<!-- <el-select >
|
||||
<el-option
|
||||
v-for="(item,index) in devList"
|
||||
:key="index"
|
||||
@click="realTimeMonitor(item)">
|
||||
</el-option>
|
||||
</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>
|
||||
<el-popover placement="bottom" width="70" trigger="click">
|
||||
<ul class="devList">
|
||||
<li
|
||||
style=" text-align:center"
|
||||
: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">
|
||||
<!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
|
||||
<videoPhoto class="video"></videoPhoto>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -54,10 +48,10 @@ import {
|
||||
environmentDevList,
|
||||
selectNewEnvironmentAlarmListApi,
|
||||
getRealTimeDustNoiseDataApi,
|
||||
getAirQualityStatisticsApi,sprayDevListApi,
|
||||
selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
|
||||
sprayDevListApi,
|
||||
selectDustNoiseDataApi,
|
||||
sprayOperateDataApi
|
||||
} from "@/assets/js/api/environmentManage";
|
||||
} from '@/assets/js/api/environmentManage'
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
components: {
|
||||
@ -65,12 +59,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
number: 0,
|
||||
devList: [],
|
||||
currentDevDetail: {},
|
||||
sprayDevList:[],
|
||||
alarmList: [],
|
||||
sprayDevList: [],
|
||||
alarmList: [],
|
||||
onlineDevNum: 0,
|
||||
offlineDevNum: 0,
|
||||
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
||||
@ -91,8 +84,8 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDevList()
|
||||
created() {
|
||||
this.getDevList()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
@ -105,69 +98,64 @@ export default {
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
|
||||
//获取环境设备列表--环境监测实时数据--下拉
|
||||
//获取环境设备列表--环境监测实时数据--下拉
|
||||
getDevList() {
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
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();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//近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();
|
||||
})
|
||||
},
|
||||
//获取报警列表
|
||||
|
||||
//近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) => {
|
||||
projectSn: this.projectSn
|
||||
}
|
||||
selectNewEnvironmentAlarmListApi(data).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.alarmList = res.result;
|
||||
this.alarmList = res.result
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
sprayOperate(deviceId,operateType){
|
||||
sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
|
||||
this.sprayDevList=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
|
||||
});
|
||||
getSprayDevList() {
|
||||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
this.sprayDevList = res.result
|
||||
})
|
||||
},
|
||||
/** 查询 */
|
||||
handleQuery() {
|
||||
@ -177,9 +165,9 @@ export default {
|
||||
},
|
||||
// // 切换设备
|
||||
realTimeMonitor(value) {
|
||||
this.currentDevDetail = value;
|
||||
this.getRealTimeDustNoiseData();
|
||||
this.selectDustNoiseData();
|
||||
this.currentDevDetail = value
|
||||
this.getRealTimeDustNoiseData()
|
||||
this.selectDustNoiseData()
|
||||
// if (this.realTimeDustNoiseDataTime) {
|
||||
// clearInterval(this.realTimeDustNoiseDataTime)
|
||||
// }
|
||||
@ -194,26 +182,26 @@ export default {
|
||||
|
||||
// this.selectDustNoiseData(); 近24H
|
||||
},
|
||||
//近24小时数据
|
||||
//近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;
|
||||
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,
|
||||
searchDate: time,
|
||||
projectSn: this.projectSn,
|
||||
deviceId: this.currentDevDetail.deviceId
|
||||
}
|
||||
selectDustNoiseDataApi(data).then(res=>{
|
||||
selectDustNoiseDataApi(data).then(res => {
|
||||
// console.log(res)
|
||||
this.dustData_24=res.result
|
||||
this.createdEcharts2();
|
||||
this.dustData_24 = res.result
|
||||
this.createdEcharts2()
|
||||
})
|
||||
},
|
||||
//获取环境设备详情数据
|
||||
@ -225,7 +213,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 {
|
||||
@ -569,33 +557,34 @@ export default {
|
||||
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;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
li {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
&.active,
|
||||
&:hover {
|
||||
color: rgba(6, 248, 179, 0.8);
|
||||
|
||||
li {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
&.active,
|
||||
&:hover {
|
||||
color: rgba(6, 248, 179, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user