首页：布局调整

温度管理：加变量筛选
2024-11-20 15:45:12 +08:00 · 2024-11-20 15:45:12 +08:00 · 14d5db21d6
commit 14d5db21d6
parent 8528da0bdd
4 changed files with 252 additions and 35 deletions
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@ -1,20 +1,36 @@
 <template>
    <div class="default-main" ref="HomeHight">
        <el-row style="margin: 0px;">
-            <el-col :md="24" :lg="16" class="col-center" style="padding-right: 10px;">
+            <el-col :md="24" :lg="24" class="col-center" style="padding-right: 10px;">
                <div class="grid-content ep-bg-purple-light">
                    <!--风机矩阵-->
                    <div class="matrix panelBg">
-                        <el-text class="mx-1 homelabel">风机矩阵</el-text>
+                        <div class="homeHeader">
+                            <div class="cardLabel">风机矩阵</div>
+                            <div class="realAlert"
+                                 ref="scrollRef"
+                                 @mouseover.native="clearScroll"
+                                 @mouseleave.native="createScroll">
+                                <p v-for="(item,index) in tableData"
+                                   :key="index"
+                                   @click="open(item)" >
+                                    <span>{{item.deviceCode}}、</span>
+                                    <span>{{item.eventText}}、</span>
+                                    <span>{{item.eventTimeFormate}}</span>
+                                </p>
+<!--                                    <span v-if="tableData.length==0">暂无告警</span>-->
+                            </div>
+                        </div>
+
                        <el-scrollbar>
                            <WindContent :parentData="FanList" @StatusListData="StatusListData"></WindContent>
                        </el-scrollbar>
                    </div>
                </div>
            </el-col>
-            <el-col :md="24" :lg="8" style="padding: 0px">
+<!--            <el-col :md="24" :lg="8" style="padding: 0px">
                <div class="grid-content ep-bg-purple cardContentRight">
-                    <!--实时告警-->
+                    &lt;!&ndash;实时告警&ndash;&gt;
                    <div class="realPart panelBg" style="margin-bottom: 0">
                        <el-text class="mx-1 homelabel">实时告警</el-text>
                        <div class="realAlert"
@ -34,7 +50,7 @@
                        </div>
                    </div>
                </div>
-            </el-col>
+            </el-col>-->
        </el-row>
    </div>
 </template>
@ -322,10 +338,14 @@ const clearScroll = () => {
 const createScroll = () => {
    clearScroll()
    timer =setInterval(() => {
-        scrollRef.value.scrollTop += 1
-        if (scrollRef.value.clientHeight + scrollRef.value.scrollTop == scrollRef.value.scrollHeight) {
-            scrollRef.value.scrollTop = 0
+        scrollRef.value.scrollLeft += 1;
+        if (scrollRef.value.clientWidth + scrollRef.value.scrollLeft == scrollRef.value.scrollWidth) {
+            scrollRef.value.scrollLeft = 0
        }
+        //scrollRef.value.scrollTop += 1
+       /* if (scrollRef.value.clientHeight + scrollRef.value.scrollTop == scrollRef.value.scrollHeight) {
+            scrollRef.value.scrollTop = 0
+        }*/
    }, 30);
 }

@ -356,7 +376,7 @@ const sizeChange = () => {
    if (!rect) return
    computedHeight.powerHeight = rect.height - 630 + 'px'
    computedHeight.alarmHeight = rect.height - 5 + 'px'
-    computedHeight.centerHeight = rect.height - 5 + 'px'
+    computedHeight.centerHeight = rect.height - 0 + 'px'
    if (window.screen.width < 1360) {
        computedHeight.alarmHeight = '300px'
        computedHeight.powerHeight = '200px'
@ -394,7 +414,7 @@ onUnmounted(() => {

 <style scoped lang="scss">
 $marginNum: 10px;
-$labelHeight: 38px;
+$labelHeight: 30px;
@mixin cardDefaultStyle {
    margin-top: $marginNum;
    margin-bottom: $marginNum;
@ -404,13 +424,13 @@ $labelHeight: 38px;
 }
@mixin cardlabel {
    .cardLabel {
-        width: 100%;
+        width: 200px;
        height: $labelHeight;
        font-size: 18px;
        font-weight: 600;
        color: #4e5969;
-        line-height: 38px;
-        padding-left: 10px;
+        line-height: 30px;
+       /* padding-left: 10px;*/
    }
 }
 .default-main {
@ -438,7 +458,7 @@ $labelHeight: 38px;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 600;
-        margin-bottom: 20px;
+        margin-bottom: 10px;
        display: block;
    }
    .grid-content {
@ -447,9 +467,9 @@ $labelHeight: 38px;
        height: 100%;
        .panelBg {
            background-color: #ffffff;
-            padding: 20px;
+            padding: 10px;
            border-radius: 5px;
-            margin-bottom: 20px;
+            margin-bottom: 10px;
        }
        .overview {
            /* @include cardDefaultStyle;
@ -526,6 +546,7 @@ $labelHeight: 38px;
            }
        }
        .matrix {
+            @include cardlabel;
            background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
            background-size: 100% 100%;
           /* min-height: 900px;*/
@ -535,6 +556,19 @@ $labelHeight: 38px;
            .el-scrollbar {
                height: calc(100% - 20px);
            }
+            .homeHeader{
+                display: flex;
+            }
+            .realAlert{
+                overflow: hidden;
+                white-space: nowrap;
+                cursor: pointer;
+                line-height: 30px;
+                p{
+                    padding-right: 30px;
+                    display: inline-block;
+                }
+            }
        }
        .summarize {
            padding: 10px;
--- a/ui/dasadmin/src/views/backend/home/windMatrix.vue
+++ b/ui/dasadmin/src/views/backend/home/windMatrix.vue
@ -1,7 +1,7 @@
 <template>
    <div class="FanList-content">
        <el-row :gutter="10">
-            <el-col :xs="24" :sm="12" :md="12" :lg="8" v-for="(item, index) in props.parentData" style="margin-bottom: 10px">
+            <el-col :xs="24" :sm="12" :md="12" :lg="4" v-for="(item, index) in props.parentData" style="margin-bottom: 5px">
                <div class="grid-content ep-bg-purple" @dblclick="handleDoubleClick(item)">
                    <div class="FanList-panel" :class="item.standard == true ? 'wind-mark' : 'wind-default'">
                        <div class="fanlist-top">
@ -293,7 +293,7 @@ const handleDoubleClick = (row) => {
                }
            }
            .fanlist-text {
-                margin-top: 20px;
+                margin-top: 15px;
                display: flex;
                flex-direction: column;
                .content-number {
@ -309,6 +309,7 @@ const handleDoubleClick = (row) => {
            display: flex;
            justify-content: end;
            height: 24px;
+            margin-top: -7px;
            .tag-panel {
                border-radius: 0 0 8px 0;
                line-height: 20px;
@ -329,4 +330,14 @@ const handleDoubleClick = (row) => {
        }
    }
 }
+
+@media screen and (max-width: 1280px) {
+    .FanList-content {
+        .FanList-panel {
+            .fanlist-text {
+                margin-top: 10px !important;
+            }
+        }
+    }
+}
 </style>
--- a/ui/dasadmin/src/views/backend/realData/index.vue
+++ b/ui/dasadmin/src/views/backend/realData/index.vue
@ -87,7 +87,7 @@
        <div class="realConter">
            <div class="header">
                <el-button type="primary" :icon="Crop" class="defaultBtn" @click="openMeasure">测点选择</el-button>
-                <el-button style="color: rgb(0, 100, 170);;" :icon="Download" class="defaultBtn" @click="downFun(tableColumn,tableData)">数据导出</el-button>
+                <el-button style="color: rgb(0, 100, 170);" :icon="Download" class="defaultBtn" @click="downFun(tableColumn,tableData)">数据导出</el-button>
                <div class="selectPart">
                    <span>自动更新：</span>
                    <el-switch
--- a/ui/dasadmin/src/views/backend/temperature/index.vue
+++ b/ui/dasadmin/src/views/backend/temperature/index.vue
@ -1,5 +1,58 @@
 <template>
    <div class="temperature">
+        <el-dialog v-model="visible" title="选择变量" width="700" :before-close="handleClose">
+            <div class="dialogContent">
+                <div class="PitchPart">
+                    <el-row :gutter="20">
+                        <div class="Pitchitem" v-for="item in subSystemDataList">
+                            <el-checkbox-group v-model="checkList">
+                                <el-checkbox v-model:value=item.measPointCode v-model:label=item.measPointName />
+                            </el-checkbox-group>
+
+                        </div>
+                    </el-row>
+                </div>
+            </div>
+<!--            <el-row :gutter="20">
+                <el-col :span="12">
+                    <div class="transferLeft">
+                        <el-main class="mainPart">
+                            <el-table class="tablePart"
+                                      ref="RealtableRef"
+                                      :data="modalTbleData"
+                                      @selectionChange="selectTable"
+                                      :row-key="getRowKey">
+                                &lt;!&ndash;                                <el-table-column type="selection" width="55" :reserve-selection="true"/>&ndash;&gt;
+                                <el-table-column type="selection" width="55"/>
+                                <el-table-column prop="porder" label="序号" width="60" />
+                                <el-table-column prop="attributeCode" sortable label="名称" />
+                                <el-table-column prop="attributeName" sortable label="描述" />
+                            </el-table>
+                            <div class="mainFooter" style="display: flex; justify-content: left">
+                                <el-pagination
+                                    v-model:current-page="currentPage"
+                                    v-model:page-size="currentPageSize"
+                                    :total="pageTotal"
+                                    :page-sizes="pagePagination"
+                                    background
+                                    :pager-count="7"
+                                    @size-change="handleSizeChange"
+                                    @current-change="handleCurrentChange"
+                                    layout="prev, pager, next, jumper,sizes,total"
+                                ></el-pagination>
+                            </div>
+                        </el-main>
+                    </div>
+                </el-col>
+            </el-row>-->
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="sureBtn">保存</el-button>
+                    <el-button @click="visible = false">取消</el-button>
+
+                </div>
+            </template>
+        </el-dialog>
        <el-container class="containerPart">
            <el-aside class="defaultAside">
                <el-main class="treeMain">
@ -15,6 +68,7 @@
                </el-main>
            </el-aside>
            <el-container class="defaultMainContainer">
+                <el-button style="color: rgb(0, 100, 170);" class="defaultBtn" @click="openMeasure">选择变量</el-button>
                <div class="temperature-chart" ref="temperatureChartRef"></div>
            </el-container>
        </el-container>
@ -26,7 +80,8 @@ import {nextTick, onActivated, onMounted, onUnmounted, reactive, ref} from 'vue'
 import {equipList,getTemperatureLimitByDeviceId,getsnapshotData} from "/@/api/backend/temperature/request.ts";
 import * as echarts from "echarts";
 import {useEventListener } from '@vueuse/core'
-import {dayjs} from "element-plus";
+import { ElMessage} from "element-plus";
+import {getModelAttributeList} from "/@/api/backend/realData/request";
 const defaultProps = {
    children: 'children',
    label: 'name'
@ -50,14 +105,14 @@ const deviceQuery = (data: any) => {
        nextTick(() => {
            deviceId.value=res.data[0]?.id
            equipTreeRef.value?.setCurrentKey(deviceData.value[0].children[0].id!, true)
-            getChartData({id:deviceId.value})
+            getChartData({deviceId:deviceId.value,attributes:[]})
        })
    })
 }
 const handleNodeClick = (data: any) => {
    deviceId.value=data.id
    state.charts.temperatureChart.clear()
-    getChartData({id:deviceId.value})
+    getChartData({id:deviceId.value,attributes:[]})
 }

 const state: {
@ -86,7 +141,7 @@ const inittemperatureChar = () => {
    const option = {
        grid: {
            show:true,
-            top: 50,
+            top: 0,
            right: 23,
            bottom: 10,
            left: 25,
@ -94,12 +149,6 @@ const inittemperatureChar = () => {
            borderColor:'transparent',
            backgroundColor:'rgba(254,55,49,0.20)'
        },
-        // tooltip: {
-        //     trigger: 'axis',
-        //     axisPointer: {
-        //         type: 'shadow',
-        //     },
-        // },
        xAxis: {
            type: 'value',
            interval: 10,
@ -147,7 +196,7 @@ const inittemperatureChar = () => {
                        color: '#4E5969',
                    },
                },
-                axisTick: { show: true },
+                axisTick: { show: false },
                splitLine: {
                    interval: 50,
                    lineStyle: {
@ -230,9 +279,86 @@ const inittemperatureChar = () => {
    temperatureChart.setOption(option)
    state.charts.temperatureChart = temperatureChart
 }
-const attributesCode:any[]=[]
+
+const currentPage = ref(1)
+const currentPageSize = ref(20)
+const pageTotal = ref(0)
+const pagePagination = ref([20, 50, 100])
+const modalTbleData=ref<any[]>([])
+
+const visible = ref(false)
+
+const checkList=ref([])
+const selectcheck=ref([])
+const openMeasure=() =>{
+    visible.value=true
+    variableList()
+}
+const subSystemDataList=ref([])
+const variableList = () =>{
+    const data={
+        deviceId:deviceId.value,
+        attributes:[]
+    }
+    getTemperatureLimitByDeviceId(data).then((res) => {
+        if (res.code=='200') {
+            subSystemDataList.value=res.data.map((item) => {
+                return {
+                    measPointName:item.measPointName,
+                    measPointCode: item.measPointCode
+                }
+            })
+            // selectcheck.value=res.data.map((item) => {
+            //     return item.measPointCode
+            // })
+
+        }
+    })
+}
+const queryListData = reactive({
+    pageSize: 20,
+    pageNum: 1,
+    iotModelId: '',
+    attributeType: '138'
+})
+
+
+const modelAttributeList=(data: any) =>{
+    getModelAttributeList(data).then((res) => {
+        if (res.code == 200) {
+            modalTbleData.value = res.rows
+            pageTotal.value = res.total;
+
+        } else {
+            ElMessage.error({
+                message: res.msg,
+                type: 'error',
+            })
+        }
+    })
+}
+
+const handleSizeChange = (val: number) => {
+    queryListData.pageSize = val
+    modelAttributeList(queryListData)
+}
+const handleCurrentChange = (val: number) => {
+    queryListData.pageNum = val
+    modelAttributeList(queryListData)
+}
+const handleClose = (done: () => void) => {
+    visible.value = false
+}
+
+const sureBtn = () => {
+    visible.value = false
+    selectcheck.value=checkList.value
+    getChartData({deviceId:deviceId.value,attributes:selectcheck.value})
+}
+
+let attributesCode:any[]=[]
 const getChartData = (data: any) => {
-    console.log(JSON.stringify(data))
+    //console.log(JSON.stringify(data))
    getTemperatureLimitByDeviceId(data).then((res) => {
        if (res.code=='200') {
            temperatureData.name=[]
@ -241,6 +367,7 @@ const getChartData = (data: any) => {
            temperatureData.limit1Low=[]
            temperatureData.limit2High=[]
            temperatureData.limit2Low=[]
+            attributesCode=[]
            res.data.forEach((item,index) => {
                temperatureData.name.push(item.measPointName)
                attributesCode.push(item.measPointCode)
@ -253,7 +380,13 @@ const getChartData = (data: any) => {
                    temperatureData.limit2Low.push(item.limit2Low)
                }
            })
-            getTemperaData([{deviceId:data.id,attributes:attributesCode}])
+            //console.log(JSON.stringify({deviceId:data.id,attributes:attributesCode}))
+            if(!data.attributes.length){
+                getTemperaData([{deviceId:data.deviceId,attributes:attributesCode}])
+            }else{
+                getTemperaData([{deviceId:data.deviceId,attributes:data.attributes}])
+            }
+
        }
    })
 }
@ -308,7 +441,12 @@ let autoUpdateTimer: any = null
 const autoUpdate = () => {
    if (!autoUpdateTimer) {
        autoUpdateTimer = setInterval(() => {
-            getChartData({id:deviceId.value})
+            if(!selectcheck.value.length){
+                getChartData({deviceId:deviceId.value,attributes:[]})
+            }else{
+                getChartData({deviceId:deviceId.value,attributes:selectcheck.value})
+            }
+
        }, 2000)
    }
 }
@ -339,9 +477,37 @@ onUnmounted(() => {
 </script>

 <style scoped lang="scss">
+$paginationHeight: 32px;
 .temperature{
    width: 100%;
    height: 100%;
+    .el-dialog{
+        .dialogContent {
+            max-height: 500px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            .PitchPart {
+                .Pitchitem {
+                    line-height: 30px;
+                    display: flex;
+                    justify-content: space-between;
+                    margin-left: 15px;
+                    width: 320px;
+                }
+            }
+        }
+        .mainPart{
+            height: 500px;
+            overflow: hidden;
+            .tablePart{
+                height: calc(100% - $paginationHeight);
+            }
+            .mainFooter{
+                margin-top: 10px;
+            }
+        }
+
+    }
    .containerPart {
        height: 100%;
        .defaultAside {
@ -352,9 +518,15 @@ onUnmounted(() => {
        .defaultMainContainer{
            width: calc(100% - 260px);
            height: 100%;
+            .el-button{
+                height: 40px;
+                margin: 20px 0 20px 20px;
+                width: 100px;
+            }
+            flex-direction: column;
            .temperature-chart{
                width: 100%;
-                height: calc(100% - 50px);
+                height: calc(100% - 70px);
            }
        }
    }