<!-- 实时监测 -->
|
|
<script>
|
import axiosInstanceInstance from '../utils/request.js';
|
// 异步组件
|
const DashBoard = defineAsyncComponent(() =>
|
import('../sfc/DashboardChart.vue')
|
);
|
export default {
|
components: {
|
DashBoard
|
},
|
data() {
|
return {
|
totalData: [],
|
// 保存设置
|
save: false,
|
// 默认打开的折叠面板
|
activeNames: '1',
|
// 实时更新间隔 60秒
|
timeInterval: 60000,
|
// 外部设备
|
outside: {
|
// 搜索
|
searchText: '',
|
isall: false,
|
isLoading: false,
|
// 设备信息表的数据
|
shopnames: [],
|
// 当前展示的多选框组值
|
displayedShopnames: [],
|
// 当前页
|
currentPage: 1,
|
// 每页显示的数量
|
pageSize: 5,
|
// 是否已加载完所有数据
|
allDataLoaded: false,
|
// 是否全选
|
checkAll: false,
|
isIndeterminate: false,
|
// 已选择店铺
|
checkedShops: [],
|
//返回选择的所有店铺的数据
|
realTimeData: []
|
},
|
|
// 内部设备
|
inner: {
|
searchText: '',
|
isall: false,
|
isLoading: false,
|
// 内部接口返回的所有数据
|
getData: [],
|
// 选中的店铺对应全部字段信息
|
inFumeValue: [],
|
// 所有店铺名字
|
shopnames: [],
|
// 当前展示的多选框组值
|
displayedShopnames: [],
|
// 当前页
|
currentPage: 1,
|
// 每页显示的数量
|
pageSize: 2,
|
// 是否已加载完所有数据
|
allDataLoaded: false,
|
// 是否全选
|
checkAll: false,
|
isIndeterminate: false,
|
// 已选择店铺
|
checkedShops: []
|
}
|
|
// chartInstance: []
|
// // 内部设备
|
// devices: []
|
};
|
},
|
watch: {
|
// 'outside.checkedShops'(){
|
// this.saveOutsideData()
|
// console.log('111');
|
// }
|
},
|
methods: {
|
//获取所有店铺名字
|
getDeviceInfo() {
|
// 获取所有外部设备的店铺名称
|
axiosInstanceInstance.get('/fume/device').then((result) => {
|
result.data.data.forEach((item) => {
|
this.outside.shopnames.push(item.diName);
|
});
|
this.outside.displayedShopnames = this.outside.shopnames.slice(
|
0,
|
this.outside.pageSize
|
);
|
if (this.outside.shopnames.length <= this.outside.pageSize) {
|
this.outside.allDataLoaded = true;
|
}
|
});
|
//从内部接口获取实时数据的所有店铺名称
|
axiosInstanceInstance
|
.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);
|
});
|
this.inner.displayedShopnames = this.inner.shopnames.slice(
|
0,
|
this.inner.pageSize
|
);
|
if (this.inner.shopnames.length <= this.inner.pageSize) {
|
this.inner.allDataLoaded = true;
|
}
|
});
|
},
|
loadMore() {
|
this.outside.isLoading = true;
|
setTimeout(() => {
|
const startIndex = this.outside.currentPage * this.outside.pageSize;
|
const endIndex = startIndex + this.outside.pageSize;
|
this.outside.displayedShopnames =
|
this.outside.displayedShopnames.concat(
|
this.outside.shopnames.slice(startIndex, endIndex)
|
);
|
this.outside.currentPage++;
|
if (
|
this.outside.displayedShopnames.length ===
|
this.outside.shopnames.length
|
) {
|
this.outside.allDataLoaded = true;
|
this.outside.isall = true;
|
}
|
this.outside.isLoading = false;
|
}, 100);
|
},
|
loadMoreInner() {
|
this.inner.isLoading = true;
|
setTimeout(() => {
|
const startIndex = this.inner.currentPage * this.inner.pageSize;
|
const endIndex = startIndex + this.inner.pageSize;
|
this.inner.displayedShopnames = this.inner.displayedShopnames.concat(
|
this.inner.shopnames.slice(startIndex, endIndex)
|
);
|
this.inner.currentPage++;
|
if (
|
this.inner.displayedShopnames.length === this.inner.shopnames.length
|
) {
|
this.inner.allDataLoaded = true;
|
this.inner.isall = true;
|
}
|
this.inner.isLoading = false;
|
}, 100);
|
},
|
// 过滤数据
|
filterData(keyword) {
|
return this.outside.shopnames.filter((item) => item.includes(keyword));
|
},
|
|
// 处理搜索
|
handleSearch() {
|
if (this.outside.searchText != '') {
|
this.outside.displayedShopnames = this.filterData(
|
this.outside.searchText
|
);
|
this.outside.currentPage = 1; // 重置页码
|
this.outside.allDataLoaded =
|
this.outside.displayedShopnames === this.outside.shopnames.length;
|
} else {
|
// 加载默认数量的
|
this.outside.displayedShopnames = this.outside.shopnames.slice(
|
0,
|
this.outside.pageSize
|
);
|
if (this.outside.shopnames.length <= this.outside.pageSize) {
|
this.outside.allDataLoaded.value = true;
|
}
|
this.outside.checkedShops = [];
|
}
|
},
|
|
// 处理搜索
|
handleSearchInner() {
|
if (this.inner.searchText != '') {
|
this.inner.displayedShopnames = this.filterData(this.inner.searchText);
|
this.inner.currentPage = 1; // 重置页码
|
this.inner.allDataLoaded =
|
this.inner.displayedShopnames === this.inner.shopnames.length;
|
} else {
|
// 加载默认数量的
|
this.inner.displayedShopnames = this.inner.shopnames.slice(
|
0,
|
this.inner.pageSize
|
);
|
if (this.inner.shopnames.length <= this.inner.pageSize) {
|
this.inner.allDataLoaded.value = true;
|
}
|
this.inner.checkedShops = [];
|
}
|
},
|
// 外部设备全选
|
handleCheckAllChangeOutside(val) {
|
this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
|
this.outside.isIndeterminate = false;
|
},
|
handleCheckedCitiesChangOutside(value) {
|
const checkedCount = value.length;
|
this.outside.checkAll =
|
checkedCount === this.outside.displayedShopnames.length;
|
this.outside.isIndeterminate =
|
checkedCount > 0 &&
|
checkedCount < this.outside.displayedShopnames.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;
|
}
|
axiosInstanceInstance
|
.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);
|
}
|
|
// 合并
|
setTimeout(() => {
|
// 试点设备排在前面
|
this.totalData = [
|
...this.inner.inFumeValue,
|
...this.outside.realTimeData
|
];
|
console.log('总选数据', this.totalData);
|
console.log('长度为：', this.totalData.length);
|
}, 200);
|
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);
|
}
|
},
|
mounted() {
|
// 获取所有店铺名字
|
this.getDeviceInfo();
|
// 优先展示浏览器缓存中的
|
// this.getOutsideData()
|
}
|
};
|
</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 style="margin-left: 10px">监控配置</h2>
|
</el-tooltip>
|
</template>
|
|
<el-card shadow="always" class="form-card">
|
<h1>监测点配置</h1>
|
<br />
|
<el-form label-width="120px">
|
<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.displayedShopnames"
|
:key="shop"
|
:label="shop"
|
>{{ shop }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<div class="input-search">
|
<el-input
|
type="text"
|
v-model="inner.searchText"
|
placeholder="搜索店铺名称"
|
@input="handleSearchInner"
|
/>
|
</div>
|
|
<div>
|
<el-button
|
type="primary"
|
v-if="!inner.allDataLoaded && !inner.isLoading && !inner.isall"
|
@click="loadMoreInner"
|
>加载更多</el-button
|
>
|
<el-button
|
type="primary"
|
loading
|
v-if="!inner.allDataLoaded && inner.isLoading"
|
@click="loadMoreInner"
|
>加载更多</el-button
|
>
|
<div>已选择试点设备数量为：{{ inner.checkedShops.length }}</div>
|
</div>
|
<br />
|
<hr />
|
<br />
|
|
<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.displayedShopnames"
|
:key="shop"
|
:label="shop"
|
>{{ shop }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
|
<div class="input-search">
|
<el-input
|
type="text"
|
v-model="outside.searchText"
|
placeholder="搜索店铺名称"
|
@input="handleSearch"
|
/>
|
</div>
|
|
<div>
|
<el-button
|
type="primary"
|
v-if="
|
!outside.allDataLoaded && !outside.isLoading && !outside.isall
|
"
|
@click="loadMore"
|
>加载更多</el-button
|
>
|
<el-button
|
type="primary"
|
loading
|
v-if="!outside.allDataLoaded && outside.isLoading"
|
@click="loadMore"
|
>加载更多</el-button
|
>
|
<div>已选择其他设备数量为：{{ outside.checkedShops.length }}</div>
|
</div>
|
<!-- <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" style="margin-left: 10px">
|
设置
|
</el-button>
|
</el-tooltip>
|
<el-switch
|
v-model="save"
|
class="save-switch"
|
active-text="保存设置"
|
inactive-text="不保存设置"
|
>
|
</el-switch>
|
</div>
|
|
<div>
|
<el-row :gutter="20">
|
<el-col
|
:span="6"
|
v-for="(device, index) in totalData"
|
:key="device.mvStatCode"
|
>
|
<!-- 内部设备 -->
|
<el-card v-if="index < inner.inFumeValue.length" height="1900px">
|
<template #header>
|
<div class="card-header">{{ device.siteName }}
|
<img src="@/assets/inner_device.jpg" class="icon-inner"/>
|
</div>
|
|
</template>
|
<div class="report-time-text">数据发布时间：{{ device.time }}</div>
|
<DashBoard :data="device.value"></DashBoard>
|
<div >设备编号：{{ device.mnCode }}</div>
|
<!-- <hr class="divider-margin" /> -->
|
<div class="horizontal-line"></div>
|
|
<div class="status" :class="{ exceed: device.value > 1 }">
|
{{ device.value >= 1 ? '超标' : '' }}
|
</div>
|
<br />
|
<br />
|
<br />
|
</el-card>
|
<!-- 外部设备 -->
|
<el-card v-else>
|
<template #header>
|
<div class="card-header">
|
{{ device.diName }}
|
</div>
|
</template>
|
<div class="report-time-text">数据发布时间：{{ device.mvDataTime }}</div>
|
<DashBoard :data="device.mvFumeConcentration2"></DashBoard>
|
|
<div class="imag-container">
|
<img src="@/assets/wind.jpg" class="image"/>
|
<span class="chart-below-text"> 风机电流(A)：{{ device.mvFanElectricity }} </span>
|
|
<span class="chart-below-text2">
|
<img src="@/assets/purifier.jpg" class="image"/>
|
净化器电流(A)：{{ device.mvPurifierElectricity }}
|
</span>
|
</div>
|
<div class="horizontal-line"></div>
|
<!-- <hr class="divider-margin" /> -->
|
|
<div>设备编号：{{ device.mvStatCode }}</div>
|
<div class="horizontal-line"></div>
|
<!-- <hr class="divider-margin" /> -->
|
<div>设备供应商：{{ device.diSupplier }}</div>
|
<div
|
class="status"
|
:class="{ exceed: device.mvFumeConcentration2 >= 1 }"
|
>
|
{{ device.mvFumeConcentration2 >= 1 ? '超标' : '' }}
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
|
.time-interval {
|
display: flex;
|
justify-content: right;
|
font-size: 16px;
|
}
|
.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;
|
border-radius: 15px;
|
margin-left: 5px;
|
}
|
.card-header {
|
// display: flex;
|
// align-items: center;
|
// position: center;
|
text-align: center;
|
position: relative;
|
}
|
.card-header-item {
|
display: flex;
|
text-align: right;
|
}
|
|
.outside-leble {
|
margin-top: 10px;
|
}
|
.inner-leble {
|
margin-top: 10px;
|
}
|
// 分割线
|
.line-marign {
|
margin: 20px 0;
|
}
|
.el-dialog {
|
width: 700px;
|
}
|
.dashBorder-area {
|
margin-left: 10px;
|
}
|
.dashboard {
|
margin-bottom: 20px;
|
border: #1de01d;
|
}
|
.chart-below-text2{
|
float: right;
|
}
|
.image {
|
height: 18px;
|
}
|
.icon-inner {
|
position: relative;
|
top: -20px;
|
right: -115px;
|
width: 50px;
|
height: 50px;
|
}
|
.dashboard-title {
|
font-size: 20px;
|
text-align: center;
|
padding: 10px 0;
|
background-color: #f5f7fa;
|
}
|
|
.report-time-text {
|
font-size: 12px;
|
color: #999999;
|
}
|
|
|
|
|
/* 超标 文字效果*/
|
.status {
|
font-size: 18px;
|
color: #ff4d4f;
|
font-weight: bold;
|
margin-top: 5px;
|
}
|
|
.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: 10px 0px;
|
border: 1px solid gray;
|
}
|
|
.el-input {
|
width: calc(100% / 6);
|
// margin-left: 70px;
|
}
|
// .input-search {
|
// display: flex;
|
// justify-content: left;
|
// }
|
.save-switch {
|
margin-top: 20px;
|
margin-left: 20px;
|
}
|
:deep() .el-card_body {
|
padding: 0px;
|
margin: 0px;
|
}
|
.horizontal-line {
|
position: relative;
|
height: 1px;
|
margin: 10px 0px;
|
}
|
.horizontal-line::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 1px;
|
background-color: rgb(221, 217, 217);
|
}
|
</style>
|
