RealTransPage.vue

<template>
    <div class="home-contianer">
        <CfgSupply v-model="autoColBoxShow" @onChangeDialog="onChangeDialog" :titleData="titleData" :height="500" :width="950" :deviceType="3" :title="title" :cfgType="cfgType"/>
        <el-card class="card-contianer">
            <div class="div-header">
                <template v-for="item in arrPercent" :key="item.text">
                    <el-tooltip effect="dark" :content="item.tips" placement="top-start"></el-tooltip>
                    <div class=" div-percent" :style="{backgroundImage: `url(${item.back})`}">
                        <el-progress :style="{color: item.color}" define-back-color="blue" width="60" type="circle" :percentage="item.data" :color="item.color">
                            <template #default="{ percentage }">
                                <span style="font-weight: bold; font-size: 9pt;">{{ percentage }}%</span>
                            </template>
                        </el-progress>
                        <div style="text-align: center; padding-top:3px; font-size: 10pt;" >
                            <el-image :src="item.icon" style="height: 25px; padding-top:2px"/>
                            <div :style="{color: item.forColor}" style="font-weight: bold;">{{ item.text }}</div>
                        </div>
                    </div>
                </template>
                <div class="div-button">
                    <el-row :gutter="20" >
                        <el-col >
                            <el-button @click="searchBoxShow = !searchBoxShow" type="primary" icon="Search">搜&nbsp;&nbsp;索</el-button>
                        </el-col>
                        <el-col >
                            <el-button type="primary">故障统计</el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" >
                        <el-col >
                            <el-button type="primary" icon="refresh-right" :loading="isLoading" @click="getFilterData">刷&nbsp;&nbsp;新</el-button>
                        </el-col>
                        <el-col >
                            <el-button type="primary" @click="autoColBoxShow = !autoColBoxShow">自定义列</el-button>
                        </el-col>
                    </el-row>
    
                </div>
            </div>
        </el-card>
        <div class="search-box" v-show="searchBoxShow">
            <div style="width: 400px; float:left">
                <label>离线时间（分）：</label>
                <el-input style="width: 80px;" v-model="offlineTime" type="number" min="30" max="300"> </el-input>
            </div>
            <div style="float:left">
                <label>刷新间隔（秒）：</label>
                <el-input style="width: 80px;" v-model="refreshTime" type="number" min="30" max="300"> </el-input>
            </div>
            <div style=" position: absolute; right: 120px; bottom: 10px;">
                <el-button  type="primary" plain @click="saveInfo">
                <i class="el-icon-search" />保存
                </el-button>
                <el-button  type="primary" plain @click="getFilterData">
                <i class="el-icon-search" />查询
                </el-button>
                <el-button   plain @click="searchBoxShow = !searchBoxShow">
                <i class="el-icon-switch-button" />关闭
                </el-button>
            </div>
        </div>
        <el-card :style="{height: tableHeight}" class="card-table" v-for="item in TablesArray.tables" :key="item">   
            <DataForm @sort="sortMethod" :max-height="{tableHeight}" :parentMethod="getFilterData" :table-height="tableHeight" :sortabletype="true" :sort-map="item.table.sortMap" :dataRows="item.table.dataRows" :dataTables="item.table.tableData" :alarm="item.table.alarm" :isLoading="isLoading"></DataForm>
        </el-card>
        <el-footer style="height: 40px;">
            <div style="float: left;">
                <el-config-provider :locale="zhCn">
                    <el-pagination
                    v-model:current-page="Page.page"
                    v-model:page-size="Page.pageSize"
                    :page-sizes="[20, 30,50,100, 200, 300, 400]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Page.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    class="pagination"/> <!-- @change="getFilterData" -->
                </el-config-provider>
            </div>
            <div style="float: right; padding-right: 50px; padding-top: 5px;">
                <label>自动刷新：</label>
                <el-switch
                    v-model="autoRefresh" 
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </div>
        </el-footer>
        
    </div>
    </template>
    
    <style lang="less" scoped>
    .home-contianer {
        width: 100%;
        height: 100%;
        background: #fff;
        overflow: hidden;
    }
    ::v-deep .el-card .el-card__body{
        padding: 5px;
    }
    ::v-deep .el-footer .el-footer__body{
        padding: 5px;
    }
    .card-contianer{
        width: 100%;
    
        .div-header{
            width: 100%; 
            display: flex;
            margin: 5px;
        }
        .div-percent{
            display: flex;
            margin: 3px;
            padding-left: 1px;
            //background-image: url('../../assets/imgs/realPage/trans/fx_dt.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 200px;
            font-size: 8pt;
        }
        .div-button{
            width: 260px;
            text-align: right;
            display: flex;
            margin-left: 10px; 
            margin-right: 10px; 
            height: 70px;
         }
    }
    
    .card-table{
        width: auto;
        //overflow: auto;
        //max-height: 540px;
        padding: 2px;
        ::v-deep .el-card__body{
            padding: 2px;
        }
    } 
    .pagination{
        padding: 0px;
        margin-left: 20px;
        height: 40px;
        //background-color: #8939cf;
        vertical-align: middle;
    }
    
    .search-box {
        background: #fefefe;
        margin-top: 0px;
        border: 1px solid #eae8e8;
        position: absolute;
        z-index: 999;
        //left: 15px;
       // right: 15px;
        padding: 25px 20px;
        padding-bottom: 0;
        border-top: 0;
        box-shadow: 0 7px 18px -12px #bdc0bb;
        width: 100%;
        height: 80px;
      }
    </style>
    
    <script setup>
    import { ref, reactive, onMounted, onUnmounted, provide,computed } from 'vue'
    import DataForm from '../../components/DataForm.vue';
    //import { useRoute } from 'vue-router'
    import { makeTitle } from '../../utils/utils';
    import http from '../../api/http'
    import store from "../../store/index";
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    import { ElMessage } from 'element-plus'
    import CfgSupply from '../../components/CfgSupply.vue';
    
    const tableHeight = ref(500);
    const enterpriseId = store.getters.getEnterpriseId();
    const isLoading = ref(true)
    const searchBoxShow = ref(false) //显示搜索框
    const autoRefresh = ref(false)//自动刷新
    const refreshTime = ref(60)//自动刷新间隔
    const offlineTime = ref(30)
    const titleData = ref([]);//自定义标题
    const autoColBoxShow = ref(false);//显示自定义列
    const title = ref('实时换热站自定义列');
    const cfgType = ref(0);//自定义窗口类型：0实时数据，1曲线，2实时状态

    
    const onChangeDialog = (val) => {
      //  console.log('onclick',val);
        autoColBoxShow.value = false;
        getDataTables();
    }
    
    var Page=reactive({total:1,pageSize:30,page:1})
    
    var supplyOptions=reactive({items:[]});//ref([{label:'全部',value:''}])
    var showSupply= ref([])
    
    var TablesArray = reactive({ tables: new Array() });
    var arrPercent = reactive(new Array({
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/up.png', import.meta.url).href,
        text: "换热站上传率",
        back: '/imgs/realPage/trans/1.png',
        color: "rgb(176 63 63)",
        forColor:"rgb(250 97 97)",
        tips:""
    }, {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test2.png', import.meta.url).href,
        text:'换热站自控率',
        back: '/imgs/realPage/trans/2.png',
        color: "rgb(72 88 180)",
        forColor:"rgb(97 119 250)",
        tips:""
    }, {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test3.png', import.meta.url).href,
        text:'变频器投入率',
        back: '/imgs/realPage/trans/3.png',
        color: "rgb(163 68 174)",
        forColor:"rgb(235 100 251)",
        tips:""
    }, {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test4.png', import.meta.url).href,
        back: '/imgs/realPage/trans/4.png',
        text:'热数据正常比',
        color: "rgb(186 99 68)",
        forColor:"rgb(250 137 97)",
        tips:""
    },
    {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test5.png', import.meta.url).href,
        back: '/imgs/realPage/trans/5.png',
        text:'水数据正常比',
        color: "rgb(0 137 177)",
        forColor:"rgb(98 176 240)",
        tips:""
    },
    {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test6.png', import.meta.url).href,
        back: '/imgs/realPage/trans/6.png',
        text:"电数据正常比",
        color: "rgb(145 164 14)",
        forColor:"rgb(203 230 18)",
        tips:""
    },
    {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test7.png', import.meta.url).href,
        back: '/imgs/realPage/trans/7.png',
        text:'平均阀门开度',
        color: "rgb(51 145 72)",
        forColor:"rgb(68 194 97)",
        tips:""
    },
    {
        data: 0,
        color: 'red',
        icon: new URL('/imgs/realPage/trans/test8.png', import.meta.url).href,
        back: '/imgs/realPage/trans/8.png',
        text:'变频平均频率',
        color: "rgb(134 12 204)",
        forColor:"rgb(162 0 255)",
        tips:""
    }));
    
    
    onMounted(() => {
        setContentHeight();
        window.addEventListener('resize', setContentHeight);
        getDataTables();
        loadInfo()
    })
    onUnmounted(()=>{
        window.removeEventListener('resize', setContentHeight);
    })
    
    ////////////Start: 供热站站下拉框
    const supplyChange = (val)=>{
       // console.log(val)
        if (!val.includes('全选') && val.length === supplyOptions.items.length) {
            showSupply.value.unshift('全选')
        } else if (val.includes('全选') && (val.length - 1) < supplyOptions.items.length) {
            showSupply.value = showSupply.value.filter((item) => {
                return item !== '全选'
            })
        }
    }
    
    const selectAll = () => {
        if (showSupply.value.length<supplyOptions.items.length) {
            showSupply.value = []
            //console.log(supplyOptions.items)
            supplyOptions.items.map((item) => {
                showSupply.value.push(item.value)
            })
            showSupply.value.unshift('全选')
        } else {
            showSupply.value = []
        }
    }
    const removeTag = (val) => {
        if (val === '全选') {
            showSupply.value = []
        }
    }
    //////////////End
    
    function setContentHeight(){
        tableHeight.value = window.innerHeight - 260;
    }
    
    function sortMethod(data){
        
        let sortMap=TablesArray.tables[0].table.sortMap;
        //将被点击的排序字段信息data，注册到sortMap中，key为参数名，value为{prop,order}
        if(sortMap.get(data.prop) && data.order === null){
            
            sortMap.delete(data.prop);
        }else{
            
            sortMap.set(data.prop,{prop:data.prop,order:data.order});
        }
        
        //更新数据
        getFilterData();
        
    }
    getSupplys();
    function getSupplys(){
            
       // console.log("real trans:"+enterpriseId);
        var result = store.getters.getEnterprise();
        if(result){
            result.forEach(element=>{
                //与当前企业id比对，获取当前企业的所有供热站，存入suply
                if(element.enterpriseId=== enterpriseId){
                    if(enterpriseId == "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){

                    }else{
                        element.supplyList.forEach(supply=>{
                            supplyOptions.items.push({label:supply.supplyName,value:supply.supplyId})
                        })
                    }
                    return;
                }
            })
        }
    }
    
    function GetRealBodyParams(){
        //解析查询条件    
        let tmpRows= TablesArray.tables[0].table.dataRows;
        let conditions=new Array();
        //获取排序条件 
        //根据排序和筛选，生成sortList对象和queryTermList对象
        let sortList =new Array();
        let queryTermList=new Array();
        
        let titleobj={};
        let sortMap=TablesArray.tables[0].table.sortMap;
        console.log(sortMap);
        sortMap.forEach((value,key)=>{
            let sortObj={
                sortName: key,
                sortOrder: ""
            }
            switch(value.order){
                case 'ascending':
                    sortObj.sortOrder='asc';
                    break;
                case 'descending':
                    sortObj.sortOrder='desc';
                    break;
                default:
                    sortObj.sortOrder=null;
                    break;
            }
            if(sortObj.sortOrder){
                sortList.push(sortObj)
            }
        })
    
        //获取筛选条件：遍历所有字段，获取筛选项为true的值
        tmpRows.forEach(element => {
            if(element.fixed && element.haveFilter){
                titleobj[''+element.name]=element.filterValue;
            }
            else if(element.haveFilter){
                conditions.push({enName:element.name,value:element.filterValue,type:element.filterType})
            }
        });
        
        conditions.forEach(element=>{
            let query={enName:'',value:'',sqlOperator:-1};
            if(element.type==2){
                query.sqlOperator=2
                query.value=element.value
                query.enName=element.enName
            }else if(element.type==1){
                query.enName=element.enName
                query.value=element.value.substring[2]
                //解析字符串，第一和第二个字符决定操作 < = >=
                let operator=element.value.substring(0,2);
                switch(operator){
                    case '<>':
                        query.sqlOperator=5;
                        break;
                    case '>=':
                        query.sqlOperator=3;
                        break;
                    case '<=':
                        query.sqlOperator=4;
                        break;
                    default:
                        operator=operator[0];
                        query.value=element.value.substring(1);
                        
                        switch(operator){
                            case '>':
                                query.sqlOperator=0;
                                break;
                            case '<':
                                query.sqlOperator=1;
                                break;
                            case '=':
                                query.sqlOperator=2;
                                break;
                            default:
                                //弹窗，提醒筛选条件不正确
                                //或者不处理此筛选条件
                                break;
                        }
                        break;    
                }
            }
            if(query.sqlOperator != -1){
                //若操作数正常，则压入筛选条件队列
                queryTermList.push(query);
            }       
        })
    
        titleobj['enterpriseId']=enterpriseId;
        titleobj['supplyIdList']=showSupply.value;
        console.log(titleobj);
        return {titleobj:titleobj,sortList:sortList,queryTermList:queryTermList,pageIndex:Page.page-1,pageCount:Page.pageSize};
    }
    
    async function getFilterData(){
        searchBoxShow.value = false;
        isLoading.value = true;
        try{
            let tmp=GetRealBodyParams();
            var result = await http.post('/api/transfer/Real',{enterpriseId:tmp.titleobj.enterpriseId,supplyIdList:tmp.titleobj.supplyIdList,transferName:tmp.titleobj.name,nature:tmp.titleobj.nature,energyType:tmp.titleobj.energyType,sortList:tmp.sortList,queryTermList:tmp.queryTermList,pageIndex:tmp.pageIndex,pageCount:tmp.pageCount});
            let data=result.data.realData;
            if(result.status === 4000){
                TablesArray.tables[0].table.tableData=[];
                ElMessage(data);           
                return;
            }
            Page.total=result.data.totalCount;
    
            arrPercent[0].data = result.data.dtuOnlineRate;
            arrPercent[1].data = result.data.controlRate;
            arrPercent[2].data = result.data.inverterRate;
            arrPercent[3].data = result.data.heatRatio;
            arrPercent[4].data = result.data.waterRatio;
            arrPercent[5].data = result.data.elecRatio;
            arrPercent[6].data = result.data.valueOpenAvg;
            arrPercent[7].data = result.data.ferqAvg;
            //根据表头处理数据
            //console.log(data)
            if(TablesArray.tables[0]){
                //console.log(tmpdata)
                TablesArray.tables[0].table.tableData=data;
            }else{
                TablesArray.tables.push({ name: '换热站实时数据', table: {dataRows:[],tableData:data} });
            }
        }
        catch(error){
            console.log(error.message);
        }finally{
            isLoading.value = false;
        }
    }
        
    async function getTitle(){
        var result = await http.post('/api/transfer/Title',enterpriseId);
        titleData.value = result.data.otherList;
        let data=result.data;
        // data.frozenList
        let tmpdata=makeTitle(data)
        tmpdata[1].filterType=1//换热站机组，只要模糊查询
        tmpdata[4].filterText=[{text:'全部',value:''},{text:'民用',value:'民用'},{text:'公建',value:'公建'}]//类型，民用，公建，全部
        tmpdata[5].filterText=[{text:'全部',value:''},{text:'一步节能',value:'一步节能'},{text:'二步节能',value:'二步节能'},{text:'三步节能',value:'三步节能'},{text:'非节能',value:'非节能'}]//节能类型，全部，一步节能，二步节能，三步节能，非节能
        if(TablesArray.tables[0]){
            TablesArray.tables[0].table.dataRows=tmpdata;
            TablesArray.tables[0].table.sortMap=new Map();
    
        }else{          
            TablesArray.tables.push({ name: '换热站实时数据', table: {dataRows:tmpdata,tableData:[],sortMap:new Map()}, alarm:[] });
        }
    }
    
    async function getRealData(){
        try{
            var result = await http.post('/api/transfer/Real',{enterpriseId:enterpriseId,pageIndex:Page.page-1,pageCount:Page.pageSize});
            let data=result.data.realData;
            Page.total=result.data.totalCount;
            //根据表头处理数据
            if(TablesArray.tables[0]){
                //console.log(tmpdata)
                //使用等于号不触发更新，需要修改
                TablesArray.tables[0].table.tableData=data;
                TablesArray.tables[0].table.alarm = result.data.alarmData;
                arrPercent[0].data = result.data.dtuOnlineRate;
                arrPercent[1].data = result.data.controlRate;
                arrPercent[2].data = result.data.inverterRate;
                arrPercent[3].data = result.data.heatRatio;
                arrPercent[4].data = result.data.waterRatio;
                arrPercent[5].data = result.data.elecRatio;
                arrPercent[6].data = result.data.valueOpenAvg;
                arrPercent[7].data = result.data.ferqAvg;
            }else{
                
                TablesArray.tables.push({ name: '换热站实时数据', table: {dataRows:[],tableData:data, alarm: result.data.alarmData} });
            }
        }catch(e){
            console.log(e.message)
        }
        finally{
            isLoading.value = false;
        }
    }
    
    async function getDataTables(){
        isLoading.value = true;
        await getTitle();
        await getRealData();  
    }
    
    setInterval(() => {
        if(autoRefresh.value){
            getFilterData();
        }
    }, refreshTime.value*1000); // 每分钟执行一次


    function saveInfo(){
        localStorage.setItem('offlineTime',offlineTime.value);
        searchBoxShow.value = false;
    }

    function loadInfo(){
        var offtime=localStorage.getItem('offlineTime');
        if(offtime){
            offlineTime.value=offtime;
        }
    }
    
    // 分页大小改变时触发
    const handleSizeChange = (val) => {
        Page.pageSize = val;
        getFilterData();
    };
     
    // 当前页改变时触发
    const handleCurrentChange = (val) => {
        Page.page = val;
        getFilterData();
    };

    //判断是否离线，传入采集时间、离线时间
    function onlineStatus(gatherTime,offlineTime){
        //获取当前时间
        var currentDate=new Date();
        var hour=currentDate.getHours();
        var min=currentDate.getMinutes();
        //开始判定时间
        
    }

    </script>