首页：布局调整

温度管理：加变量筛选

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
+        scrollRef.value.scrollLeft += 1;
-        if (scrollRef.value.clientHeight + scrollRef.value.scrollTop == scrollRef.value.scrollHeight) {
+        if (scrollRef.value.clientWidth + scrollRef.value.scrollLeft == scrollRef.value.scrollWidth) {
-            scrollRef.value.scrollTop = 0
+            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;
+        line-height: 30px;
-        padding-left: 10px;
+       /* 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;

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>

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

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);
             }
         }
     }