设备监控-实时数据顶部按钮组改为便携式设备所有tab显示

2024-08-23 08:51:36 +08:00
parent 0a590c2862
commit f879cdaf09
5 changed files with 85 additions and 65 deletions
--- a/src/components/tree/govern/pointTree.vue
+++ b/src/components/tree/govern/pointTree.vue
@@ -1,5 +1,5 @@
 <template>
-    <Tree ref="treRef" :width="width" :data="tree" />
+    <Tree ref="treRef" :width="width" :data="tree" @changePointType="changePointType" />
 </template>

 <script lang="ts" setup>
@@ -10,13 +10,15 @@ import { useConfig } from '@/stores/config'
 defineOptions({
    name: 'govern/deviceTree'
 })
-const emit = defineEmits(['init', 'checkChange'])
+const emit = defineEmits(['init', 'checkChange', 'pointTypeChange'])
 const config = useConfig()
 const tree = ref()
 const treRef = ref()
-const width=ref('')
+const width = ref('')
+const changePointType = (val: any, obj: any) => {
+    emit('pointTypeChange', val, obj)
+}
 getLineTree().then(res => {
-    console.log(res.data, '设备监控666')
    let arr1: any[] = []
    let arr2: any[] = []
    //治理设备
@@ -30,10 +32,12 @@ getLineTree().then(res => {
                    item2.color = config.getColorVal('elementUiPrimary')
                    item2.children.forEach((item3: any) => {
                        item3.icon = 'el-icon-Platform'
-                          item3.color = item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
+                        item3.color =
+                            item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                        item3.children.forEach((item4: any) => {
                            item4.icon = 'el-icon-Platform'
-                            item4.color = item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
+                            item4.color =
+                                item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                            // item4.color = '#e26257 !important'
                            arr1.push(item4)
                        })
@@ -44,11 +48,9 @@ getLineTree().then(res => {
            item.children.forEach((item: any) => {
                item.icon = 'el-icon-Platform'
                item.color = config.getColorVal('elementUiPrimary')
-                console.log(item.comFlag,"88888");
                item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                item.children.forEach((item2: any) => {
-                item2.icon = 'el-icon-Platform'
-                console.log(item2.comFlag,"88888");
+                    item2.icon = 'el-icon-Platform'
                    item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                    arr2.push(item2)
                })
@@ -74,7 +76,7 @@ getLineTree().then(res => {
        //         level: 2,
        //         ...arr2[0]
        //     })
-        // } 
+        // }
        else {
            emit('init')
        }
--- a/src/components/tree/point.vue
+++ b/src/components/tree/point.vue
@@ -31,9 +31,8 @@
                    v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
                />
            </div>
-
            <el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
-                <el-collapse-item title="治理设备" :name="0">
+                <el-collapse-item title="治理设备" name="0">
                    <el-tree
                        style="height: calc(100vh - 350px); overflow: auto"
                        ref="treeRef1"
@@ -58,7 +57,7 @@
                        </template>
                    </el-tree>
                </el-collapse-item>
-                <el-collapse-item title="便携式设备" :name="1">
+                <el-collapse-item title="便携式设备" name="1">
                    <el-tree
                        style="height: calc(100vh - 270px); overflow: auto"
                        ref="treeRef2"
@@ -91,12 +90,12 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch } from 'vue'
+import { ref, watch, defineEmits } from 'vue'
 import { useRoute } from 'vue-router'
 defineOptions({
    name: 'govern/tree'
 })
-
+const emit = defineEmits(['changePointType'])
 interface Props {
    width?: string
    canExpand?: boolean
@@ -112,10 +111,9 @@ const props = withDefaults(defineProps<Props>(), {
 })

 const route = useRoute()
-console.log(route, '6666677788889')
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
-const activeName = ref(0)
+const activeName = ref('0')
 const filterText = ref('')
 const defaultProps = {
    label: 'name',
@@ -149,7 +147,7 @@ watch(
 )

 watch(filterText, val => {
-    if (activeName.value == 0) {
+    if (activeName.value == '0') {
        treeRef1.value!.filter(val)
    } else {
        treeRef2.value!.filter(val)
@@ -172,17 +170,22 @@ const changeDevice = (val: any) => {
            arr2.push(item2)
        })
    })
-    if (val == 0) {
-        arr2.map(item => {
+    if (val == '0') {
+        arr2.map((item: any) => {
            item.checked = false
        })
-        treeRef1.value.setCurrentKey(arr1[0]?.id)
+        treeRef1?.value.setCurrentKey(arr1[0]?.id)
+        emit('changePointType', activeName.value, arr1[0])
    } else {
-        arr1.map(item => {
+        arr1.map((item: any) => {
            item.checked = false
        })
-        treeRef2.value.setCurrentKey(arr2[0]?.id)
+        treeRef2?.value.setCurrentKey(arr2[0]?.id)
+        emit('changePointType', activeName.value, arr2[0])
    }
+    // if(activeName.value){
+    //    emit('changePointType', activeName.value)
+    // }
 }
 const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
--- a/src/views/govern/device/control/analysisList/index.vue
+++ b/src/views/govern/device/control/analysisList/index.vue
@@ -1,9 +1,6 @@
 <!-- 解析列表 -->
 <template>
    <el-dialog v-model="dialogVisible" title="解析列表" width="70%" draggable @closed="close">
-        <!-- <div class="header_btn">
-            <el-button type="primary" size="small" @click="handleBack" :icon="ArrowLeft">返回</el-button>
-        </div> -->
        <TableHeader date-picker></TableHeader>
        <Table ref="tableRef" />
        <template #footer>
@@ -15,16 +12,19 @@
    </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, provide } from 'vue'
+import { ref, onMounted, provide, watch, onBeforeUnmount } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
 const emit = defineEmits(['back'])
 const dialogVisible = ref(false)
+const height = ref(0)
+height.value = window.innerHeight < 1080 ? 180 : 400
+
 const tableStore: any = new TableStore({
    url: '/cs-device-boot/portableOfflLog/queryPage',
-    publicHeight: 210,
+    publicHeight: height.value,
    method: 'POST',
    column: [
        // { width: '60', type: 'checkbox', fixed: 'left' },
@@ -76,8 +76,28 @@ const open = () => {
 const close = () => {
    dialogVisible.value = false
 }
-const initTable = () => {}
-onMounted(() => {})
+const updateViewportHeight = async () => {
+    // height.value = window.innerHeight;
+    height.value = window.innerHeight < 1080 ? 180 : 400
+    tableStore.table.publicHeight = height.value
+    await tableStore.index()
+}
+
+onMounted(() => {
+    updateViewportHeight() // 初始化视口高度
+    window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateViewportHeight) // 移除监听
+})
 defineExpose({ open })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep .el-dialog_body {
+    overflow-y: hidden !important;
+    .analysisTable {
+        height: 400px !important;
+    }
+}
+</style>
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -5,40 +5,20 @@
        v-loading="loading"
        style="position: relative"
    >
-        <PointTree @node-click="nodeClick" @init="nodeClick"></PointTree>
+        <PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
        <div class="device-control-right" v-if="deviceData">
            <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                <template #extra>
-                    <el-button
-                        v-if="dataSet.indexOf('_realtimedata') != -1"
-                        size="small"
-                        type="primary"
-                        @click="handleDownLoadTemplate"
-                    >
+                    <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleDownLoadTemplate">
                        模版下载
                    </el-button>
-                    <el-button
-                        v-if="dataSet.indexOf('_realtimedata') != -1"
-                        size="small"
-                        type="primary"
-                        @click="handleImport"
-                    >
+                    <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleImport">
                        离线数据导入
                    </el-button>
-                    <el-button
-                        v-if="dataSet.indexOf('_realtimedata') != -1"
-                        size="small"
-                        type="primary"
-                        @click="handleaddDevice"
-                    >
+                    <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleaddDevice">
                        设备补招
                    </el-button>
-                    <el-button
-                        v-if="dataSet.indexOf('_realtimedata') != -1"
-                        size="small"
-                        type="primary"
-                        @click="handleAnalysisList"
-                    >
+                    <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleAnalysisList">
                        解析列表
                    </el-button>
                </template>
@@ -100,7 +80,16 @@
                        <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
                    </el-form-item>
                </el-form>
-                <div style="height: calc(100vh - 300px)" v-if="tableData.length == 0" v-loading="tableLoading"></div>
+                <div
+                    style="height: calc(100vh - 300px)"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1 &&
+                        tableData.length == 0
+                    "
+                    v-loading="tableLoading"
+                ></div>
                <div
                    style="overflow: auto"
                    :style="{ height: tableHeight }"
@@ -416,6 +405,12 @@ const nodeClick = async (e: anyObj) => {
        loading.value = false
    }
 }
+//治理设备和便携式设备切换判断
+const deviceType = ref('0')
+const pointTypeChange = (val: any, obj: any) => {
+    deviceType.value = val
+    nodeClick(obj)
+}
 const realTimeRef: any = ref()
 const intRealTime = async (val: any) => {
    await getTabsDataByType(val).then(res => {
--- a/src/views/govern/device/control/tabs/realtime.vue
+++ b/src/views/govern/device/control/tabs/realtime.vue
@@ -20,7 +20,7 @@
                <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
            </div>
        </div>
-        <div class="view_bot"  v-loading="loading">
+        <div class="view_bot" v-loading="loading">
            <div class="view_bot_tables">
                <!-- 表格数据 -->
                <div v-if="tableData.length != 0">
@@ -75,10 +75,10 @@
                                <div class="tbody">
                                    <div class="tbody_cell" v-for="(vv, key) in item" :key="key">
                                        {{
-                                            tableData.find(item => {
+                                            tableData.find((item: any) => {
                                                return item.anotherName == vv.showName && item.phase == vv.phase
                                            })?.statisticalData
-                                                ? tableData.find(item => {
+                                                ? tableData.find((item: any) => {
                                                      return item.anotherName == vv.showName && item.phase == vv.phase
                                                  })?.statisticalData
                                                : '/'
@@ -317,7 +317,7 @@ const initRadioCharts = () => {
                            }
                        },
                        {
-                            value:70,
+                            value: 70,
                            name: 'B相',
                            itemStyle: {
                                color: '#DAA521'
@@ -448,7 +448,7 @@ const getTableData = (list: any) => {
            })?.statisticalData
        })
        if (index < 4) {
-            columnsDataTop.value.push(item)
+            columnsDataTop.value.push(item) 
        }
        if (index >= 4) {
            columnsDataBot.value.push(item)
@@ -582,8 +582,8 @@ onMounted(() => {
        height: auto;
        display: flex;
        justify-content: space-between;
-        border: 1px solid #eee;
-        padding: 10px;
+        //border: 1px solid #eee;
+        // padding: 10px;
        .view_top_left,
        .view_top_right {
            width: 30%;
@@ -650,7 +650,7 @@ onMounted(() => {
        .table_info {
            width: 100%;
            height: 120px;
-            border: 1px solid #eee;
+            // border: 1px solid #eee;
            border-bottom: 2px solid #eee;
            margin-bottom: 20px;
            display: flex;