<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, getDeviceWorkData } from "@/api/home";
import { getWeatherLogPage, getdeviceworkdata } from "@/api/environmentalMonitoring";
import { getDeviceByType } from "@/api/device";
import { getHistoricalCurve } from "@/api/datasurvey/index";
import dayjs from 'dayjs'
import * as echarts from 'echarts'
const userStore = useUserStore();
const tableData: any = 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: any = 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() {
    treeloading.value = true

    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 = ''
    }
    environment_params.value.signalId = signalId.value
    getdeviceworkdata(environment_params.value).then((res: any) => {
        treeloading.value = false
        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() {
    // environmentInfo
    if (tableData.value) {
        tableData.value.length = 0
    }
    signalId.value = environmentInfo.value[0].signalId
    tabs.value = 0
    // getEnvironment()
    gettoday()
}

// 环境WebSocket
const environment = ref()
const environmentInfo: any = ref([])
// 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
    }
    getDeviceWorkData(params).then((res: any) => {
        environmentInfo.value = res.data
        signalId.value = res.data[0].signalId

    })

}
onMounted(() => {
    gettoday()
    getInit()

});
// 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: any = ref([])
function gettype() {
    getDeviceByType({ dictcode: 'system' }).then((res: any) => {
        // debugger
        EquipmentType.value = res.data

        getEnvironment()
        getechartdata()
    })
}
const tabs = ref(0)
const signalId = ref('')
function getscenetable(index: any, signalId1: any) {
    tabs.value = index
    signalId.value = signalId1
    getEnvironment()
    getechartdata()
}
function gettoday() {
    // 获取今天0点
    let startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
    // 获取当前时间
    let endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    tableData.value[0] = startTime
    tableData.value[1] = endTime
    gettype()
}
const echartdata: any = ref({})
function getechartdata() {
    getHistoricalCurve({ signalId: signalId.value }).then((res: any) => {
        echartdata.value = res.data
        drawEchart()
    })
    function drawEchart() {
        let myChart = echarts.init(document.getElementById("deviceEachers") as HTMLDivElement);
        myChart.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Step Start', 'Step Middle', 'Step End']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: echartdata.value.xAxis,
            yAxis: echartdata.value.yAxis,
            series: echartdata.value.series
        })
    }
}
</script>

<template>
    <div class="all_box">
        <div class="img_box">
            <div :class="tabs == index ? 'img_box_one1' : 'img_box_one'" v-for="(item, index) in environmentInfo"
                @click="getscenetable(index, item.signalId)">
                <div><img :src="`/environment/${item.itemcode}.png`" alt=""></div>
                <div class="img_box_nei">
                    <div class="img_text1">{{ item.dictname }}</div>
                    <div v-if="item.value != '无'" class="img_text2">{{ item.dictname == '风向' ? item.value :
                        Number(item.value).toFixed(2) }}<span class="img_unit"> {{ item.unit }}</span></div>
                    <div v-else class="img_text2">{{ item.value }}</div>
                </div>
            </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <div class="environment_table">
                <div class="table-title">
                    <div class="table_left">
                        <div class="screenHomepage">
                            <el-date-picker class="screenHomepage" popper-class="elDatePicker"
                                @change="getEnvironment()" style="width: 400px; margin-right: 10px;" v-model="tableData"
                                type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
                        </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" 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="signalName" label="气象参数名称" align="center" />
                    <el-table-column property="startTime" label="采集时间" align="center" />
                    <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>
                <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 class="environment_table">
                <div id="deviceEachers" :style="{ width: '100%', height: '90%' }"></div>
            </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_one1 {
        width: 220px;
        height: 150px;
        background: url(@/assets/navigation/hjjc_sjbj.png);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #00ffff2f;
        border: #00ffff 1px solid;
        cursor: pointer;

        .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: 24px;
                color: #00ffff;

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

    .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;
        cursor: pointer;

        .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: 24px;
                color: #00ffff;

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

.environment_table {
    width: 935px;
    height: calc(69vh);
    background: url(@/assets/navigation/sbjc_488.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;
        }

    }
}
</style>
