<!-- 实时监测 -->
|
|
<script>
|
import axiosInstance from '../utils/request.js';
|
// 异步组件
|
const DashBoard = defineAsyncComponent(() =>
|
import('../sfc/DashboardChart.vue')
|
)
|
export default {
|
components:{
|
DashBoard
|
},
|
data() {
|
return {
|
// 默认打开的折叠面板
|
activeNames:'1',
|
// isShow:false,
|
// 要展示的仪表盘数量
|
// totalCharts: 0,
|
// 实时更新间隔 3秒
|
timeInterval:60000,
|
// 外部设备
|
outside: {
|
// 设备信息表的数据
|
shopnames: [],
|
checkAll: false,
|
isIndeterminate: false,
|
// 已选择店铺
|
checkedShops: [],
|
|
//返回选择的所有店铺的数据
|
realTimeData: []
|
},
|
|
// 内部设备
|
inner: {
|
// 内部接口返回的所有数据
|
getData:[],
|
// 选中的店铺对应全部字段信息
|
inFumeValue:[],
|
// 店铺名字
|
shopnames: [],
|
checkAll: false,
|
isIndeterminate: false,
|
// 已选择店铺
|
checkedShops: []
|
},
|
|
// chartInstance: []
|
// // 内部设备
|
// devices: []
|
};
|
},
|
methods: {
|
//获取所有店铺名字
|
getDeviceInfo() {
|
// 获取外部设备的店铺名称
|
axiosInstance.get('/fume/device').then((result) => {
|
result.data.data.forEach((item) => {
|
this.outside.shopnames.push(item.diName);
|
});
|
});
|
|
//从内部接口获取实时数据的所有店铺名称
|
axiosInstance
|
.get('https://fyami.com.cn/device/min/value/real_time', {
|
params: { page: 1, per_page: 20 }
|
})
|
.then((result) => {
|
// 保存内部接口获取的所有信息
|
this.getData = result.data.data
|
result.data.data.forEach((item) => {
|
|
this.inner.shopnames.push(item.siteName);
|
});
|
});
|
},
|
// 外部设备全选
|
handleCheckAllChangeOutside(val) {
|
this.outside.checkedShops = val ? this.outside.shopnames : [];
|
this.outside.isIndeterminate = false;
|
},
|
handleCheckedCitiesChangOutside(value) {
|
const checkedCount = value.length;
|
this.outside.checkAll = checkedCount === this.outside.shopnames.length;
|
this.outside.isIndeterminate =
|
checkedCount > 0 && checkedCount < this.outside.shopnames.length;
|
},
|
|
// 内部设备全选
|
handleCheckAllChangeInner(val) {
|
this.inner.checkedShops = val ? this.inner.shopnames : [];
|
this.inner.isIndeterminate = false;
|
},
|
handleCheckedCitiesChangeInner(value) {
|
const checkedCount = value.length;
|
this.inner.checkAll = checkedCount === this.inner.shopnames.length;
|
this.inner.isIndeterminate =
|
checkedCount > 0 && checkedCount < this.inner.shopnames.length;
|
},
|
|
// 判断一个数组是否包含该元素
|
hasElement(array, element) {
|
return array.includes(element);
|
},
|
|
|
//根据所选店铺求请并渲染仪表盘
|
request() {
|
if(this.outside.checkedShops.length!=0){
|
let temp = this.outside.checkedShops.join();
|
let params = {};
|
if (this.outside.checkedShops.length != 0) {
|
params['shops'] = temp;
|
}
|
axiosInstance.get('/fume/lastest', { params: params }).then((result) => {
|
this.outside.realTimeData = result.data.data;
|
console.log('66', this.outside.realTimeData);
|
// console.log('长度为：',this.outside.realTimeData.length);
|
// 渲染折线图
|
// this.updateCharts();
|
});
|
}
|
|
// 选择了内部设备
|
if(this.inner.checkedShops.length!=0){
|
// 清空数据
|
this.inner.inFumeValue=[]
|
this.getData.forEach(item=>{
|
let itemOne = item.siteName
|
// 拿到选中的店铺对应的浓度值
|
if(this.hasElement(this.inner.checkedShops,itemOne)){
|
this.inner.inFumeValue.push(item)
|
}
|
})
|
console.log(this.inner.inFumeValue);
|
}
|
console.log('调用了');
|
},
|
|
// 点击按钮触发
|
show() {
|
// 当取消选择时，防止图形还保留在页面。
|
if(this.outside.checkedShops.length==0){
|
this.outside.realTimeData = []
|
}
|
if(this.inner.checkedShops.length == 0){
|
this.inner.inFumeValue = []
|
}
|
// 根据所选的店铺请求数据
|
this.request();
|
setInterval(() => {
|
this.request();
|
}, this.timeInterval);
|
// 得到要展示的仪表盘数量
|
// this.totalCharts =
|
// this.outside.checkedShops.length + this.inner.checkedShops.length;
|
}
|
},
|
mounted() {
|
// 获取所有店铺名字
|
this.getDeviceInfo();
|
}
|
}
|
</script>
|
|
|
<template>
|
|
<div>
|
<el-collapse v-model="activeNames" >
|
<el-collapse-item name="1">
|
<template #title>
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
content="点击可折叠"
|
placement="right-start"
|
>
|
<h2>选择某个设备的实时数据：</h2>
|
</el-tooltip>
|
</template>
|
<el-card shadow="always" class="form-card">
|
<el-form label-width="120px">
|
<el-form-item label="外部设备">
|
<el-checkbox
|
v-model="outside.checkAll"
|
:indeterminate="outside.isIndeterminate"
|
@change="handleCheckAllChangeOutside"
|
>全选</el-checkbox
|
>
|
<el-checkbox-group
|
v-model="outside.checkedShops"
|
@change="handleCheckedCitiesChangOutside"
|
>
|
<el-checkbox
|
v-for="shop in outside.shopnames"
|
:key="shop"
|
:label="shop"
|
>{{ shop }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item>
|
<div>已选择外部设备数量为：{{outside.checkedShops.length}}</div>
|
</el-form-item>
|
|
|
<el-form-item label="内部设备">
|
<el-checkbox
|
v-model="inner.checkAll"
|
:indeterminate="inner.isIndeterminate"
|
@change="handleCheckAllChangeInner"
|
>全选</el-checkbox
|
>
|
<el-checkbox-group
|
v-model="inner.checkedShops"
|
@change="handleCheckedCitiesChangeInner"
|
class="inner-checkbox-group"
|
>
|
|
<el-checkbox v-for="shop in inner.shopnames" :key="shop" :label="shop"
|
>{{ shop }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item>
|
<div>已选择内部设备数量为：{{inner.checkedShops.length}}</div>
|
</el-form-item>
|
<el-form-item >
|
|
<div class="time-interval">
|
实时更新间隔为：{{timeInterval/1000}}秒
|
</div>
|
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
|
|
<div>
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
content="点击展示实时数据"
|
placement="top-start"
|
>
|
<el-button type="success" @click="show"> 展示 </el-button>
|
</el-tooltip>
|
</div>
|
|
|
<!-- 仪表盘 -->
|
<!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode">
|
<div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div>
|
</div> -->
|
<h3 v-show="outside.realTimeData.length" class="outside-leble">外部设备：</h3>
|
<div v-if="outside.realTimeData">
|
<el-row :gutter="20">
|
<el-col :span="6" v-for="device in outside.realTimeData" :key="device.mvStatCode">
|
<el-card>
|
<template #header>
|
<div class="card-header">{{ device.diName }}</div>
|
</template>
|
<DashBoard :data="device.mvFumeConcentration2"></DashBoard>
|
<div>设备编号：{{ device.mvStatCode }}</div>
|
<hr class="divider-margin"/>
|
<divr class="data">风机电流(A)：{{ device.mvFanElectricity}} </divr>
|
<hr class="divider-margin">
|
<div class="data">净化器电流(A)：{{ device.mvPurifierElectricity}}</div>
|
<hr class="divider-margin"/>
|
<div>产生时间:{{ device.mvDataTime }}</div>
|
<div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '超标' : '' }}</div>
|
<!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '未超标' : '' }}</div> -->
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
|
<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/>
|
<h3 v-show="inner.inFumeValue.length">内部设备：</h3>
|
<div v-if="inner.inFumeValue">
|
<el-row :gutter="20">
|
<el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode">
|
<el-card>
|
<template #header>
|
<div class="card-header">{{ device.siteName }}</div>
|
</template>
|
<DashBoard :data="device.value"></DashBoard>
|
<div>设备编号：{{ device.mnCode }}</div>
|
<hr class="divider-margin"/>
|
<div>产生时间:{{ device.time }}</div>
|
<div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '超标' : '' }}</div>
|
<!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '未超标' : '' }}</div> -->
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
.form-card {
|
margin: 20px 10px;
|
// width: 96%;
|
border:1px solid #ebeef5;
|
border-radius: 4px;
|
}
|
.inner-checkbox-group {
|
margin-left: 15px;
|
}
|
.el-card {
|
margin-bottom: 10px;
|
}
|
.card-header {
|
// display: flex;
|
// align-items: center;
|
// position: center;
|
text-align: center;
|
}
|
.outside-leble {
|
margin-top: 10px;
|
}
|
// 分割线
|
.line-marign {
|
margin: 20px 0;
|
}
|
.el-dialog {
|
width: 700px;
|
}
|
.dashboard {
|
margin-bottom: 20px;
|
border: #1de01d;
|
}
|
|
.dashboard-title {
|
font-size: 20px;
|
text-align: center;
|
padding: 10px 0;
|
background-color: #f5f7fa;
|
}
|
|
.echarts {
|
height: 300px;
|
}
|
|
/* 超标 文字效果*/
|
.status {
|
font-size: 18px;
|
color: #ff4d4f;
|
font-weight: bold;
|
}
|
|
.exceed {
|
color: #ff4d4f;
|
}
|
|
/* 未超标 */
|
.status1 {
|
font-size: 18px;
|
color: #1de01d;
|
font-weight: bold;
|
}
|
|
.exceed1 {
|
color: #1de01d;
|
}
|
.blank {
|
height: 200px;
|
}
|
|
// 按钮
|
.el-button {
|
margin-top: 20px;
|
}
|
// 分割线上下距离
|
.divider-margin {
|
margin: 3px 0px ;
|
}
|
</style>
|
