<script lang="ts">
export default {
    name: "equipment",
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { Search } from '@element-plus/icons-vue';
import { getDeviceSignalTree, querySignalDataById, workpage, getHistoricalCurve } from "@/api/datasurvey/index";
import { useUserStore } from '@/store/modules/user';
import Page from '@/components/Pagination/page.vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
const userStore = useUserStore();
//左侧树形控件
interface Tree {
    [x: string]: any;
    label: string;
    children?: Tree[];
}
const signaform = ref({
    signalName: '',
    stationCode: userStore.stationCode,

})
const defaultProps = {
    children: "children",
    label: "name"
};
const treedata: any = ref([]);
const treeRef = ref();
const treeloading = ref(true)
const currentNodeKey = ref("")
const signaId = ref('')
//获取左侧树
const signName = ref('')
function getTreeData() {
    treeloading.value = true
    getDeviceSignalTree(signaform.value).then((res: any) => {
        if (res.code == 0) {
            treedata.value = res.data
            signaId.value = res.data[0].children[0].children[0].children[0].children[0].id
            signName.value = res.data[0].children[0].children[0].children[0].children[0].name
            nextTick(() => {
                treeRef.value?.setCurrentKey(signaId.value);
            });
            getsignadata()
            gettabledata()
            getechartdata()
        }
        treeloading.value = false
    })
}
function handleNodeClick(data: any, node: any) {
    if (data.children.length > 0) {
        node.isCurrent = false
        currentNodeKey.value = ""
        nextTick(() => {
            currentNodeKey.value = signaId.value
        })
    } else {
        console.log(data)
        signaId.value = data.id
        signName.value = data.name
        getsignadata()
        gettabledata()
        getechartdata()
    }
}
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const detaall: any = ref([])
const tableform = ref({
    size: 10,
    current: 1,
    startDate: '',
    endDate: '',
    signalId: '',
})
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 signaldata: any = ref({})
const dignaloading = ref(false)
function getsignadata() {
    dignaloading.value = true
    querySignalDataById({ signalId: signaId.value }).then((res: any) => {
        if (res.data) {
            signaldata.value = res.data
        } else {
            signaldata.value = {}
        }
        dignaloading.value = false
    })
}
function gettabledata() {
    if (detaall.value) {
        tableform.value.startDate = formatDate(detaall.value[0])
        tableform.value.endDate = formatDate(detaall.value[1])
    } else {
        tableform.value.startDate = ''
        tableform.value.endDate = ''
    }
    tableform.value.signalId = signaId.value
    loading.value = true
    workpage(tableform.value).then((res: any) => {
        tableData.value = res.data.records
        tableform.value.size = res.data.size
        tableform.value.current = res.data.current
        total.value = res.data.total
        loading.value = false

    })
}
function formatDate(isoString: any) {
    const date = new Date(isoString);

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
//折线图数据
const echartdata: any = ref({})
function getechartdata() {
    getHistoricalCurve({ signalId: signaId.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
    })
}
onMounted(() => {
    gettoday()
})
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')
    detaall.value[0] = startTime
    detaall.value[1] = endTime
    getTreeData()
}
</script>

<template>
    <div class="faulttemplate-box">
        <aside id="silderLeft">
            <div class="displayflex" style="margin: 10px 0px 5px 0px;padding-left: 8px;height: 30px;">
                <img src="@/assets/navigation/ty_bq.png" />
                <div class="title">数据列表</div>
            </div>
            <el-input v-model="signaform.signalName" style="width: 240px" placeholder="请输入信号名称" :suffix-icon="Search"
                @change="getTreeData()" />
            <el-scrollbar height="calc(80vh)" style="width:99%;">
                <el-tree-v2 v-loading="treeloading" style="width: 100%;" :data="treedata" :props="defaultProps"
                    :height="800" ref="treeRef" node-key="id" :current-node-key="currentNodeKey"
                    :highlight-current="true" @node-click="handleNodeClick" />
            </el-scrollbar>
        </aside>
        <section class="silderRight1">
            <div class="right_top">
                <div class="top_left">
                    <div class="title_right">
                        <img src="@/assets/navigation/ty_bq.png" alt="">
                        <div>信号信息</div>
                    </div>
                    <div class="text_top">

                        <div class="text_top_content" v-loading="dignaloading">
                            <div class="content_one">
                                <div class="content_one_title">信号编号</div>
                                <div class="content_one_text">{{ signaldata.signalCode }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">信号名称</div>
                                <div class="content_one_text">{{ signaldata.signalName }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">信号类型</div>
                                <div class="content_one_text">{{ signaldata.signalType }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">信号单位</div>
                                <div class="content_one_text">{{ signaldata.signalUnit }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">正常范围</div>
                                <div class="content_one_text">{{ signaldata.normalRange }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">遥控遥调类型</div>
                                <div class="content_one_text">{{ signaldata.ykytType }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">设备名称</div>
                                <div class="content_one_text">{{ signaldata.deviceName }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">设备型号</div>
                                <div class="content_one_text">{{ signaldata.deviceModel }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">协议类型</div>
                                <div class="content_one_text">{{ signaldata.protocol }}</div>
                            </div>
                            <div class="content_one">
                                <div class="content_one_title">采集频率</div>
                                <div class="content_one_text">{{ signaldata.frequency }}</div>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="top_left">
                    <div class="title_right">
                        <img src="@/assets/navigation/ty_bq.png" alt="">
                        <div>监测数据</div>
                    </div>
                    <div class="cont_top">
                        <div class="cont_top_left">
                            <el-date-picker v-model="detaall" type="datetimerange" start-placeholder="开始时间"
                                end-placeholder="结束时间" @change="gettabledata" />
                            <el-button style="margin-left: 10px;" @click="gettabledata"
                                value-format="YYYY-MM-DD HH:mm:ss" class="searchButton">搜索</el-button>
                        </div>
                        <div class="cont_top_right"> <el-button class="searchButton">导出</el-button></div>
                    </div>
                    <div class="cont_bottom">
                        <el-table v-loading="loading" :data="tableData" style="width: 100%;height: calc(33vh);
                            overflow: auto;;margin-bottom: 15px;" row-key="id" default-expand-all
                            :row-class-name="tableRowClassName"
                            :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                            <el-table-column type="index" label="序号" width="50px" align="center" />
                            <el-table-column label="采集时间" prop="startTime"  align="center"></el-table-column>
                            <el-table-column label="监测数值" prop="value" align="center"></el-table-column>
                            <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                        </el-table>
                        <Page :total="total" v-model:size="tableform.size" v-model:current="tableform.current"
                            @pagination="gettabledata()">
                        </Page>
                    </div>
                </div>
            </div>
            <div class="right_bottom">
                <div class="title_right">
                    <img src="@/assets/navigation/ty_bq.png" alt="">
                    <div>历史曲线</div>
                </div>
                <div id="deviceEachers" :style="{ width: '100%', height: '90%' }"></div>
            </div>
        </section>
    </div>
</template>

<style scoped lang="scss">
.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    padding: 5px 20px;

    // background-color: #f2f4f9;
    .silderRight1 {
        flex: 1;
        width: 100%;
        height: calc(90vh);
        overflow: auto;
        background-color: rgba(255, 255, 255, 0);
        border-radius: 3px;
        padding: 0px 15px 15px 15px;
        padding-bottom: 0px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;


        // margin-left: 15px;
        // background: #17212e;
        .right_top {
            width: 100%;
            height: 487px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .top_left {
                width: 787px;
                height: 488px;
                background: url(@/assets/navigation/sbjc_488.png);
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 20px;


                .text_top {
                    width: 100%;
                    margin-top:30px ;

                    .text_top_title {
                        display: flex;
                        align-items: center;
                        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
                        font-weight: 700;
                        font-style: normal;
                        font-size: 16px;
                        color: #00CCFF;
                        padding: 20px 0px;

                        div {
                            width: 3px;
                            height: 12px;
                            background: #00ffff;
                            margin-right: 5px;
                        }

                    }

                    .text_top_content {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        border-bottom: 1px solid #00397c;
                        border-right: 1px solid #00397c;

                        .content_one {
                            width: 50%;
                            display: flex;
                            align-items: center;
                            .content_one_title {
                                width: 114px;
                                height: 50px;
                                text-align: center;
                                line-height: 50px;
                                border-top: 1px solid #00397c;
                                border-left: 1px solid #00397c;
                                background-color: #002562;
                                font-size: 14px;
                                color: #B5D7FF;
                            }

                            .content_one_text {
                                width: 267px;
                                height: 50px;
                                text-align: center;
                                line-height: 50px;
                                border-top: 1px solid #00397c;
                                border-left: 1px solid #00397c;
                                font-size: 14px;
                                color: #B5D7FF;
                            }
                        }
                    }
                }

                .cont_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 20px 0px;

                    .cont_top_left {
                        width: 60%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            }


        }

        .right_bottom {
            box-sizing: border-box;
            padding: 20px;
            margin-top: 15px;
            width: 100%;
            height: calc(36vh);
            background: url(@/assets/navigation/sbjc_485.png);
            background-size: 100% 100%;
        }

        .title_right {
            width: 100%;
            display: flex;
            align-items: center;

            // padding-bottom: 10px;
            div {
                font-size: 18px;
                font-weight: bold;
                color: #fff;
                margin-left: 5px;
            }
        }

    }

}

:deep(.el-tree-node.is-current>.el-tree-node__content) {
    width: 100%;
    height: 40px;
    // color: #fff !important;
}

:deep(.el-tree-node__content) {
    width: 100% !important;
    height: 40px !important;
    margin: auto !important;
}

.el-message-box {
    width: 300px !important;
}

:deep(.el-form-item__label) {
    width: 105px !important;
}

:deep(.el-tooltip__trigger) {
    width: 100%;
}

.displayflex {
    display: flex;
    align-items: center;
    // margin-top:15px;

    .title {
        margin-left: 5px;
        text-decoration: none !important;
        font-family: "阿里妈妈数黑体 Bold";
        font-weight: 700;
        font-style: normal;
        font-size: 16px !important;
        color: rgb(255, 255, 255);
        line-height: 12px;
    }

}

:deep(.el-tree) {
    background-color: #ffffff00 !important;
    --el-tree-node-hover-bg-color: #0099ff09;
}

#silderLeft {
    width: 260px;
    box-sizing: border-box;
    // background: #ffffff00;
    border-radius: 3px;
    position: relative;
    background: url(@/assets/navigation/ty_260x988.png);
    background-size: 100% 100%;
    padding: 0px 10px;

    &:hover {
        .moveBtn {
            opacity: 1;
        }
    }
}

:deep(.el-table__inner-wrapper::before) {
    background-color: #0099ff00;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
    border: none;
}





:deep(.el-input__wrapper) {
    background-color: rgba(19, 26, 37, 0);
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    box-shadow: 0 0 0 1px #009bff inset;
}

:deep(.el-select) {
    --el-select-input-focus-border-color: #009bff !important;
}

:deep(.el-tree-node__label) {
    white-space: pre-wrap;
}
</style>
