|
|
@@ -1,51 +1,63 @@
|
|
|
<template>
|
|
|
- <div class="energy-monitoring card-mode">
|
|
|
- <el-card shadow="never" class="monitoring-card card-mode">
|
|
|
- <!-- 主内容区 -->
|
|
|
- <ele-split-layout
|
|
|
- width="220px"
|
|
|
- allow-collapse
|
|
|
- :right-style="{ overflow: 'hidden' }"
|
|
|
+ <vue-fullscreen v-model="isFullscreen" :exit-on-click-wrapper="false">
|
|
|
+ <div
|
|
|
+ class="energy-monitoring card-mode"
|
|
|
+ :style="{
|
|
|
+ height: isFullscreen ? 'calc(100vh)' : 'calc(100vh - 96px)'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ shadow="never"
|
|
|
+ class="monitoring-card card-mode"
|
|
|
+ :style="{
|
|
|
+ height: isFullscreen ? 'calc(100vh)' : 'calc(100vh - 96px)'
|
|
|
+ }"
|
|
|
>
|
|
|
- <!-- 左侧树形菜单 -->
|
|
|
- <div class="left-sidebar card-mode">
|
|
|
- <el-tabs
|
|
|
- v-model="activeTab"
|
|
|
- type="border-card"
|
|
|
- @tab-click="activeTabChange"
|
|
|
- >
|
|
|
- <el-tab-pane label="设备类型" name="org">
|
|
|
- <el-tree
|
|
|
- :data="orgTreeData"
|
|
|
- :props="treeProps"
|
|
|
- node-key="id"
|
|
|
- highlight-current
|
|
|
- @node-click="handleNodeClick"
|
|
|
- style="height: calc(100vh - 180px)"
|
|
|
- ref="treeRef"
|
|
|
- ></el-tree>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="用能分区" name="energy">
|
|
|
- <el-tree
|
|
|
- :data="treeData"
|
|
|
- :props="treeProps"
|
|
|
- node-key="id"
|
|
|
- default-expand-all
|
|
|
- ref="treeRef1"
|
|
|
- highlight-current
|
|
|
- @node-click="handleNodeClick"
|
|
|
- ></el-tree>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧内容区 -->
|
|
|
- <template v-slot:content>
|
|
|
- <div class="right-content card-mode">
|
|
|
- <!-- 搜索区域 -->
|
|
|
- <div class="search-area card-mode">
|
|
|
- <!-- 设备状态标签 -->
|
|
|
- <!-- <div class="status-tabs">
|
|
|
+ <!-- 主内容区 -->
|
|
|
+ <ele-split-layout
|
|
|
+ width="220px"
|
|
|
+ allow-collapse
|
|
|
+ :right-style="{ overflow: 'hidden' }"
|
|
|
+ >
|
|
|
+ <!-- 左侧树形菜单 -->
|
|
|
+ <div class="left-sidebar card-mode">
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeTab"
|
|
|
+ type="border-card"
|
|
|
+ @tab-click="activeTabChange"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="设备类型" name="org">
|
|
|
+ <el-tree
|
|
|
+ :data="orgTreeData"
|
|
|
+ :props="treeProps"
|
|
|
+ node-key="id"
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ style="height: calc(100vh - 180px)"
|
|
|
+ ref="treeRef"
|
|
|
+ ></el-tree>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="用能分区" name="energy">
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ :props="treeProps"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ ref="treeRef1"
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ ></el-tree>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧内容区 -->
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="right-content card-mode">
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="search-area card-mode">
|
|
|
+ <!-- 设备状态标签 -->
|
|
|
+ <!-- <div class="status-tabs">
|
|
|
<el-radio-group
|
|
|
v-model="statusFilter"
|
|
|
size="small"
|
|
|
@@ -57,105 +69,124 @@
|
|
|
<el-radio-button label="fault">故障</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div> -->
|
|
|
- <!-- 搜索框 -->
|
|
|
- <div class="search-input-wrapper">
|
|
|
- <el-input
|
|
|
- v-model="keyWord"
|
|
|
- placeholder="编码、名称、固资编码"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- clearable
|
|
|
- @keyup.enter.native="handleSearch"
|
|
|
- style="width: 280px"
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class="search-input-wrapper">
|
|
|
+ <el-input
|
|
|
+ v-model="keyWord"
|
|
|
+ placeholder="编码、名称、固资编码"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
+ style="width: 280px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <DeptSelect
|
|
|
+ v-model="postId"
|
|
|
+ placeholder="使用单位"
|
|
|
+ style="width: 280px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-button type="primary" @click="handleSearch"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="fullscreen-btn"
|
|
|
+ @click="isFullscreen = !isFullscreen"
|
|
|
>
|
|
|
- </el-input>
|
|
|
- <DeptSelect
|
|
|
- v-model="postId"
|
|
|
- placeholder="使用单位"
|
|
|
- style="width: 280px"
|
|
|
- @input="selectChange"
|
|
|
- />
|
|
|
-
|
|
|
- <el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
|
- <el-button @click="handleReset">重置</el-button>
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 更新时间 -->
|
|
|
- <div class="update-time">更新时间：{{ updateTime }}</div>
|
|
|
-
|
|
|
- <!-- 卡片视图 -->
|
|
|
- <div class="card-view">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col
|
|
|
- v-for="item in deviceData"
|
|
|
- :key="item.id"
|
|
|
- :xs="24"
|
|
|
- :sm="12"
|
|
|
- :md="8"
|
|
|
- :lg="6"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="device-card"
|
|
|
- :class="{
|
|
|
- 'is-fault': item.status == '3' || item.status == '2'
|
|
|
- }"
|
|
|
- @click="details(item)"
|
|
|
+ <!-- 更新时间 -->
|
|
|
+ <div class="update-time">更新时间：{{ updateTime }}</div>
|
|
|
+
|
|
|
+ <!-- 卡片视图 -->
|
|
|
+ <div
|
|
|
+ class="card-view"
|
|
|
+ :style="{
|
|
|
+ height: isFullscreen
|
|
|
+ ? 'calc(100vh - 155px)'
|
|
|
+ : 'calc(100vh - 240px)'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col
|
|
|
+ v-for="item in deviceData"
|
|
|
+ :key="item.id"
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :md="8"
|
|
|
+ :lg="6"
|
|
|
>
|
|
|
- <div class="card-header">
|
|
|
- <div>{{item.postName|}}</div>
|
|
|
- <div class="card-header-value">
|
|
|
- <div class="device-name">
|
|
|
- {{
|
|
|
- item.name +
|
|
|
- (item.codeNumber ? '-' + item.codeNumber : '')
|
|
|
- }}
|
|
|
- </div>
|
|
|
- <div class="card-actions">
|
|
|
- <el-tag
|
|
|
- :type="getStatusType(item.status, 1)"
|
|
|
- size="small"
|
|
|
- effect="dark"
|
|
|
- class="status-tag"
|
|
|
- >
|
|
|
+ <div
|
|
|
+ class="device-card"
|
|
|
+ :class="{
|
|
|
+ 'is-fault': item.status == '3' || item.status == '2'
|
|
|
+ }"
|
|
|
+ @click="details(item)"
|
|
|
+ >
|
|
|
+ <div class="card-header">
|
|
|
+ <div>{{item.postName|}}</div>
|
|
|
+ <div class="card-header-value">
|
|
|
+ <div class="device-name">
|
|
|
{{
|
|
|
- businessStatus.filter(
|
|
|
- (row) => row.code == item.status
|
|
|
- )[0]?.label
|
|
|
+ item.name +
|
|
|
+ (item.codeNumber ? '-' + item.codeNumber : '')
|
|
|
}}
|
|
|
- </el-tag>
|
|
|
- </div></div
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="card-body">
|
|
|
- <el-tag
|
|
|
- :type="getStatusType(item.networkStatus)"
|
|
|
- size="small"
|
|
|
- effect="dark"
|
|
|
- class="status-tag"
|
|
|
- >
|
|
|
- {{ getStatusText(item.networkStatus) }}
|
|
|
- </el-tag>
|
|
|
- <div class="info-grid">
|
|
|
- <div class="info-row" v-for="iotItem in item.iotList">
|
|
|
- <span class="info-label">{{ iotItem.name }}</span>
|
|
|
- <span class="info-value">{{
|
|
|
- iotItem.dataType.type == 'enum' ||
|
|
|
- iotItem.dataType.type == 'bool'
|
|
|
- ? iotItem.dataType.specs[iotItem.value]
|
|
|
- : iotItem.value +
|
|
|
- ' ' +
|
|
|
- ((iotItem.unit && iotItem.unit) || '')
|
|
|
- }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-actions">
|
|
|
+ <el-tag
|
|
|
+ :type="getStatusType(item.status, 1)"
|
|
|
+ size="small"
|
|
|
+ effect="dark"
|
|
|
+ class="status-tag"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ businessStatus.filter(
|
|
|
+ (row) => row.code == item.status
|
|
|
+ )[0]?.label
|
|
|
+ }}
|
|
|
+ </el-tag>
|
|
|
+ </div></div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <el-tag
|
|
|
+ :type="getStatusType(item.iotList.length ? 1 : 0)"
|
|
|
+ size="small"
|
|
|
+ effect="dark"
|
|
|
+ class="status-tag"
|
|
|
+ >
|
|
|
+ {{ getStatusText(item.iotList.length ? 1 : 0) }}
|
|
|
+ </el-tag>
|
|
|
+ <div class="info-grid">
|
|
|
+ <div class="info-row" v-for="iotItem in item.iotList">
|
|
|
+ <span class="info-label">{{ iotItem.name }}</span>
|
|
|
+ <span class="info-value">{{
|
|
|
+ iotItem.dataType.type == 'enum' ||
|
|
|
+ iotItem.dataType.type == 'bool'
|
|
|
+ ? iotItem.dataType.specs[iotItem.value]
|
|
|
+ : iotItem.value +
|
|
|
+ ' ' +
|
|
|
+ ((iotItem.unit && iotItem.unit) || '')
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="pagination-area">
|
|
|
+ <!-- 分页 -->
|
|
|
+ <!-- <div class="pagination-area">
|
|
|
<el-pagination
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
@@ -165,12 +196,13 @@
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="total"
|
|
|
></el-pagination>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ele-split-layout>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </ele-split-layout>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </vue-fullscreen>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -182,10 +214,11 @@
|
|
|
import { basicAreaPageAPI } from '@/api/factoryModel';
|
|
|
import { businessStatus } from '@/utils/dict/warehouse';
|
|
|
import DeptSelect from '@/components/CommomSelect/dept-select.vue';
|
|
|
+ import { component } from 'vue-fullscreen';
|
|
|
|
|
|
export default {
|
|
|
mixins: [dictMixins, tableColumnsMixin],
|
|
|
- components: { DeptSelect },
|
|
|
+ components: { DeptSelect, VueFullscreen: component },
|
|
|
data() {
|
|
|
return {
|
|
|
// 搜索表单
|
|
|
@@ -214,7 +247,7 @@
|
|
|
pageSize: 10,
|
|
|
total: 0,
|
|
|
areaId: '',
|
|
|
-
|
|
|
+ isFullscreen: false,
|
|
|
cacheKeyUrl: 'ems-energy-monitoring-list',
|
|
|
deviceData: [],
|
|
|
categoryLevelId: '',
|
|
|
@@ -286,8 +319,8 @@
|
|
|
// 加载设备数据（模拟）
|
|
|
loadDeviceData() {
|
|
|
querySubstanceRunningMonitor({
|
|
|
- pageNum: this.pageNum,
|
|
|
- size: this.pageSize,
|
|
|
+ pageNum: 1,
|
|
|
+ size: 9999,
|
|
|
categoryLevelId: this.categoryLevelId,
|
|
|
rootCategoryLevelId: this.rootCategoryLevelId,
|
|
|
areaId: this.areaId,
|
|
|
@@ -427,11 +460,9 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.energy-monitoring {
|
|
|
- min-height: calc(100vh - 96px);
|
|
|
// padding: 15px;
|
|
|
|
|
|
.monitoring-card {
|
|
|
- height: calc(100vh - 96px);
|
|
|
|
|
|
::v-deep .el-card__body {
|
|
|
height: 100%;
|
|
|
@@ -514,7 +545,7 @@
|
|
|
|
|
|
.el-tabs__content {
|
|
|
padding: 10px;
|
|
|
- height: calc(100% - 40px);
|
|
|
+ height: calc(100% - 38px);
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
}
|
|
|
@@ -690,7 +721,7 @@
|
|
|
background: transparent;
|
|
|
border-radius: 12px;
|
|
|
padding: 15px;
|
|
|
- height: calc(100vh - 320px);
|
|
|
+
|
|
|
overflow-y: auto;
|
|
|
padding-right: 10px;
|
|
|
|
|
|
@@ -733,7 +764,7 @@
|
|
|
|
|
|
.card-header {
|
|
|
height: 60px;
|
|
|
- color: rgba(255, 255, 255, 0.9);
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
.card-header-value {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -932,4 +963,28 @@
|
|
|
transform: rotate(10deg);
|
|
|
}
|
|
|
}
|
|
|
+ .fullscreen-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(56, 255, 249, 0.15);
|
|
|
+ border: 1px solid #38fff9;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #38fff9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(56, 255, 249, 0.3);
|
|
|
+ box-shadow: 0 0 10px rgba(56, 255, 249, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
