Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 模块数据页面样式

Browse Source
This commit is contained in:
guanj
2025-07-08 10:47:04 +08:00
parent 7fabcb7f0f
commit e1851f7ebb
2 changed files with 132 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/govern/device/control/index.vue
View File

@@ -559,7 +559,17 @@ import { useDictData } from '@/stores/dictData'
import { useRouter } from 'vue-router'
import TableHeader from '@/components/table/header/index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { Histogram, TrendCharts, DataLine, DataAnalysis, Odometer, Monitor, Timer, Back ,Refresh} from '@element-plus/icons-vue'
import {
Histogram,
TrendCharts,
DataLine,
DataAnalysis,
Odometer,
Monitor,
Timer,
Back,
Refresh
} from '@element-plus/icons-vue'
import analysisList from './analysisList/index.vue'
import mqtt from 'mqtt'
defineOptions({
@@ -583,7 +593,7 @@ const tableHeightBox = mainHeight(330).height
const searchValue = ref('')
const TrendList = ref({})
const oddAndEven = ref('1')
const datePickerRef = ref('1')
const datePickerRef = ref()
const oddAndEvenFlag = ref(false)
const formInline = reactive({
searchValue: '',
@@ -1257,7 +1267,13 @@ const handleClick = async (tab?: any) => {
}
//模块数据
if (dataSet.value.includes('_moduleData')) {
;(await datePickerRef.value) && datePickerRef.value?.setInterval(5)
setTimeout(() => {
if ((tab && tab.props) != undefined) {
datePickerRef.value && datePickerRef.value?.setInterval(5)
}
}, 0)
let obj = {
// devId: deviceId.value, //e.id
lineId: lineId.value, //e.pid
@@ -1351,7 +1367,6 @@ const handleClick = async (tab?: any) => {
}
// 刷新状态
const refreshTheState = () => {
moduleDataRef.value.getModule(deviceData.value.ndid)
}
//模版下载

125
src/views/govern/device/control/moduleData.vue
View File

@@ -1,7 +1,38 @@
<template>
<!-- 运行 运行(中断) 运行(故障) 离线 -->
<div :style="height" style="overflow-y: auto">
<el-collapse v-model="activeNames" v-loading="loading">
<div :style="height" style="overflow-y: auto" v-loading="loading">
<div class="container">
<div class="tabs-container">
<!-- 左侧标签头 -->
<div class="tab-list" :style="echartHeight" style="overflow-y: auto">
<button
v-for="(item, index) in list"
:key="index"
:class="{ 'tab-button active': activeTab === index, 'tab-button': activeTab !== index }"
@click="changeTab(index)"
>
<span>{{ item.moduleName }}</span>
<el-tag
class="ml10"
:type="item.moduleState == '离线' ? 'danger' : 'success'"
size="small"
effect="dark"
>
{{ item.moduleState }}
</el-tag>
</button>
</div>
<!-- 右侧内容区域 -->
<div class="tab-content-container flex-1" :key="activeTab">
<div :style="echartHeight">
<MyEchart :options="echartList.options" v-if="echartList.dataList != null" />
<el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
</div>
</div>
</div>
</div>
<!-- <el-collapse v-model="activeNames" v-loading="loading">
<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
<template #title>
<div class="header">
@@ -21,7 +52,7 @@
<el-empty description="暂无数据" style="height: 130px" v-else></el-empty>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse> -->
</div>
</template>
<script setup lang="ts">
@@ -31,13 +62,17 @@ import { WarnTriangleFilled } from '@element-plus/icons-vue'
import { getModuleState } from '@/api/cs-device-boot/EquipmentDelivery'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { ElMessage } from 'element-plus'
const activeNames = ref([0, 1, 2, 3])
import { chain } from 'lodash'
const list: any = ref([])
const loading = ref(false)
const height = ref(mainHeight(290))
const echartHeight = ref(mainHeight(292))
const echartHeight = ref(mainHeight(302))
const activeTab = ref(0)
const echartList: any = ref({})
const setData = (data: any) => {
echartHeight.value = mainHeight(292 + data.length * 49, data.length)
activeTab.value = 0
// echartHeight.value = mainHeight(292 + data.length * 49, data.length)
data.forEach((item: any) => {
// console.log('🚀 ~ setData ~ data:', data)
if (item.dataList == null) return
@@ -180,7 +215,9 @@ const setData = (data: any) => {
}
}
})
list.value = data
echartList.value = list.value[activeTab.value]
}
const getModule = async (id: string) => {
loading.value = true
@@ -197,20 +234,82 @@ const getModule = async (id: string) => {
})
loading.value = false
}
const changeTab = (e: any) => {
echartList.value = list.value[e]
activeTab.value = e
}
defineExpose({ setData, getModule })
</script>
<style lang="scss" scoped>
:deep(.header) {
font-size: 16px;
font-weight: 600;
.container {
margin: 10px 10px 0 10px;
background-color: white;
border-radius: 0.5rem;
// box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.tabs-container {
display: flex;
flex-direction: column;
height: 100%;
}
@media (min-width: 768px) {
.tabs-container {
flex-direction: row;
}
}
.tab-list {
width: 100%;
border-bottom: 1px solid #e2e8f0;
background-color: #f8fafc;
}
@media (min-width: 768px) {
.tab-list {
width: 140px;
border-right: 1px solid #e2e8f0;
border-bottom: none;
}
}
.tab-button {
display: flex;
align-items: center;
.header-icon {
font-size: 20px;
width: 100%;
padding: 15px 20px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
color: #64748b;
border-right: 4px solid transparent;
transition: all 0.2s ease;
}
.tab-button:hover {
background-color: #f1f5f9;
color: #475569;
}
:deep(.el-empty__image) {
height: 120px;
.tab-button.active {
background-color: #e2e8f0;
color: #000;
border-right-color: var(--el-color-primary);
font-weight: 700;
}
.tab-button i {
width: 1.25rem;
margin-right: 0.75rem;
}
.tab-content-container {
flex: 1;
}
</style>