<script lang="ts">
export default {
    name: "selfcheck",//系统主机自检
};
</script>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, } from 'vue'
import Page from '@/components/Pagination/page.vue'
import { useUserStore } from '@/store/modules/user';
import {  getWeatherLogList } from "@/api/home";
import {  getWeatherLogPage} from "@/api/environmentalMonitoring";
import { getDeviceByType } from "@/api/device";
const userStore = useUserStore();
const tableData = ref([])
const treeloading = ref(false)
const total = ref()
//控制行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}

//环境设备获取
const environment_params = ref({
    current:1,
    size:10,
    startDate:'',
    endDate:'',
    patroldeviceName:'',
    stationId:userStore.stationId,
})
const hutotal:any = ref('')
const environment_data = ref([])
// const treeloading = ref(false)
function getEnvironment() {
   
    if(tableData.value){
        environment_params.value.startDate = tableData.value[0]
        environment_params.value.endDate = tableData.value[1]
    }else{
        environment_params.value.startDate = ''
        environment_params.value.endDate = ''
    }
    getWeatherLogPage(environment_params.value).then((res: any) => {
        environment_data.value = res.data.records
        environment_params.value.size = res.data.size
        environment_params.value.current = res.data.current
        hutotal.value = res.data.total
    })
}
function environmentReset(){
    if( tableData.value){
        tableData.value.length = 0
    }
    environment_params.value.patroldeviceName = ''
    getEnvironment() 
}

// 环境WebSocket
const environment = ref()
const environmentInfo:any = ref({
  temperature: "",
  humidity: "",
  rainfall: "",
  windSpeed: "",
  windDirection: "",
  pressure: ""
})
const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/vibe_run_data_' + userStore.userId);
function setupWebSocket() {

ws1.onopen = () => {

};
ws1.onerror = (error: any) => {
};
ws1.onmessage = (e: any) => {
  
  if (e.data != 0) {
    environment.value = JSON.parse(e.data)
    if (environment.value.type == 1) {
      environmentInfo.value.temperature = environment.value.value
    }
    if (environment.value.type == 2) {
      environmentInfo.value.humidity = environment.value.value
    }
    if (environment.value.type == 3) {
      environmentInfo.value.windSpeed = environment.value.value
    }
    if (environment.value.type == 4) {
      environmentInfo.value.rainfall = environment.value.value
    }
    if (environment.value.type == 5) {
      environmentInfo.value.windDirection = environment.value.value
    }
    if (environment.value.type == 6) {
      environmentInfo.value.pressure = environment.value.value
    }
    if (environment.value.type == 7) {
      environmentInfo.value.oxygen = environment.value.value
    }
    if (environment.value.type == 8) {
      environmentInfo.value.sf6 = environment.value.value
    }
  }
}
ws1.onclose = () => {
};

}
function getInit() {
  let params = {
    stationId: userStore.stationId
  }
  getWeatherLogList(params).then((res: any) => {

    environmentInfo.value = res.data
    if (!res.data.temperature ) {
      environmentInfo.value.temperature = "无"
    }
    if (!res.data.humidity ) {
      environmentInfo.value.humidity = "无"
    }
    if (!res.data.rainfall ) {
      environmentInfo.value.rainfall = "无"
    }
    if (!res.data.windSpeed ) {
      environmentInfo.value.windSpeed = "无"
    }
    if (!res.data.windDirection ) {
      environmentInfo.value.windDirection = "无"
    }
    if (!res.data.pressure) {
      environmentInfo.value.pressure = "无"
    }
    if (!res.data.oxygen) {
      environmentInfo.value.oxygen = "无"
    }
    if (!res.data.sf6) {
      environmentInfo.value.sf6  = "无"
    }
  })
 
}
onMounted(() => { 
  getInit()
  setupWebSocket()
  getEnvironment()
  gettype()
});
onBeforeUnmount(() => {
  if (ws1 != null) {
    ws1.close()
  }
})
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
const EquipmentType= ref([])
function gettype(){
    getDeviceByType({ dictcode: 'EnvironmentType' }).then((res: any) => {
        EquipmentType.value = res.data
    })
}

</script>

<template>
    <div class="all_box">
                <div class="img_box">
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj1.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">空气温度</div>
                            <div class="img_text2">{{ environmentInfo.temperature }}<span class="img_unit"> ℃</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj2.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">空气湿度</div>
                            <div class="img_text2">{{ environmentInfo.humidity }} <span class="img_unit"> RH</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj3.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">降雨量</div>
                            <div class="img_text2">{{ environmentInfo.rainfall }} <span class="img_unit"> mm</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj4.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">风速</div>
                            <div class="img_text2">{{ environmentInfo.windSpeed }} <span class="img_unit"> 级</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj5.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">风向</div>
                            <div class="img_text2">{{ environmentInfo.windDirection }} </div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj6.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">气压</div>
                            <div class="img_text2">{{ environmentInfo.pressure }} <span class="img_unit"> hpa</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj7.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">氧气</div>
                            <div class="img_text2">{{ environmentInfo.oxygen }} <span class="img_unit"> %</span></div>
                        </div>
                    </div>
                    <div class="img_box_one">
                        <div><img src="@/assets/navigation/hjjc_sj8.png" alt=""></div> 
                        <div class="img_box_nei">
                            <div class="img_text1">SF6</div>
                            <div class="img_text2">{{ environmentInfo.sf6  }} <span class="img_unit"> %</span></div>
                        </div>
                    </div>

                </div>
                <div class="environment_table">
                    <div class="table-title">
                        <div class="table_left">
                            <div class="screenHomepage">
                                <el-input v-model="environment_params.patroldeviceName" placeholder="请输入设备名称" clearable @change="getEnvironment()"
                                    style="margin-right:15px ;width: 200px;" />
                                <el-date-picker class="screenHomepage" popper-class="elDatePicker" @change="getEnvironment()" 
                                    style="width: 300px; margin-right: 10px;" v-model="tableData" type="daterange" 
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
                            </div>
                            <el-button class="searchButton" @click="getEnvironment()">搜索</el-button>
                            <el-button class="searchButton" @click="environmentReset()">重置</el-button>
                        </div>
                    </div>
                    <el-table :data="environment_data" :row-class-name="tableRowClassName" class="PatrolMonitoring"
                        v-loading="treeloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
                        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(56vh); overflow: auto "
                        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
                        <el-table-column type="index" label="序号" width="80px" align="center" />
                        <el-table-column property="patroldeviceCode" label="设备编号" align="center"  />
                        <el-table-column property="patroldeviceName" label="设备名称" align="center"  />
                        <el-table-column property="type" label="环境 类型" align="center">
                            <template #default="scope">
                                <span>{{ currency(EquipmentType, scope.row.type) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="taskName" label="监测数值" align="center">
                            <template #default="scope">
                            <div v-if="scope.row.value">{{ scope.row.value }}{{scope.row.unit}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column property="time" label="监测时间" align="center"  />
                    </el-table>
                    <div style="width:100%;display:flex;align-items:center;margin-top:10px;">
                        <Page style="margin:0 auto ;" :total="hutotal" v-model:size="environment_params.size" :jumper="'hide'"
                            v-model:current="environment_params.current" @pagination="getEnvironment()"></Page>
                    </div>
                </div>
    </div>
</template>
<style scoped lang="scss">
.all_box {
    width: 100%;
    padding: 15px;
    height: calc(91vh);
    box-sizing: border-box;

}

.img_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0px;

    .img_box_one {
        width: 220px;
        height: 150px;
        background: url(@/assets/navigation/hjjc_sjbj.png) ;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .img_box_nei {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 10px;
           
            .img_text1 {
                font-family: '微软雅黑';
                font-weight: 400;
                font-style: normal;
                font-size: 18px;
                color: #FFFFFF;
            }

            .img_text2 {
                font-family: '钉钉进步体 Bold', '钉钉进步体';
                font-weight: 700;
                font-size: 36px;
                color: #00ffff;

                .img_unit {
                    font-family: '钉钉进步体 Bold', '钉钉进步体';
                    font-weight: 700;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.298039215686275);
                }
            }
        }
    }
}

.environment_table {
    width: 1881px;
    height: calc(69vh);
    background: url(@/assets/navigation/hjjc_BK.png) ;
    background-size: 100% 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 15px;

    .table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .table_left {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    }
}
.environment_table1{
    height: calc(83vh);
    background: url(@/assets/station_2/hjjc_9.png) no-repeat;
    margin-top:20px;
}

</style>
