修改 模块数据页面样式

src/views/govern/device/control/index.vue

@@ -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)
 }
 //模版下载

src/views/govern/device/control/moduleData.vue

@@ -1,7 +1,38 @@
 <template>
     <!-- 运行 运行(中断) 运行(故障) 离线 -->
-    <div :style="height" style="overflow-y: auto">
+    <div :style="height" style="overflow-y: auto" v-loading="loading">
-        <el-collapse v-model="activeNames" 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) {
+.container {
-    font-size: 16px;
+    margin: 10px 10px 0 10px;
-    font-weight: 600;
+    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;
-    align-items: center;
+    flex-direction: column;
-    .header-icon {
+    height: 100%;
-        font-size: 20px;
+}
+
+@media (min-width: 768px) {
+    .tabs-container {
+        flex-direction: row;
     }
 }
-:deep(.el-empty__image) {
+
-    height: 120px;
+.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;
+    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;
+}
+
+.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>