disaster/src/view/InfoDialoges.vue

<template>
    <!-- 所有弹出框 -->
    <div class="l_Dialog tuiy">
        <!-- 灾害类型 -->
        <el-dialog v-model="dialogVisible" width="482" align-center :modal="false" :close-on-click-modal="false"
            draggable class="dialog_class bgcolor">
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 :id="titleId" :class="titleClass">灾害类型</h4>

                </div>
            </template>
            <div class="my_content">
                <el-radio-group v-model="classradio1" class="radio-group">
                    <el-radio label="Fire">火灾</el-radio>
                    <el-radio label="Water">突水</el-radio>
                    <!-- <el-radio label="9">瓦斯爆炸</el-radio> -->
                </el-radio-group>
            </div>

            <template #footer>
                <div class="dialog-footer class_footer l_btn ">
                    <div class="footerbtn">
                        <div class="borderimg"><el-button @click="dialogVisible = false">取消</el-button></div>
                    </div>
                    <div class="footerbtn">
                        <div class="borderimg"><el-button @click="classclick(); dialogVisible= false;">
                                确定
                            </el-button></div>
                    </div>
                </div>
            </template>
        </el-dialog>
        <!--火灾 事故列表 -->
        <el-dialog v-model="dialog.dialogVisible_fire" width="600" :modal="false" :close-on-click-modal="false"
            draggable class="dialog_class bgcolor tablefocus">

            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 :id="titleId" :class="titleClass"> 事故列表</h4>

                </div>
            </template>
            <div class="my_content1 bgcolor  tablefocus scoperadio ">
                <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
                    element-loading-background="rgba(0, 10, 0, 0.1)" :row-class-name="tableRowClassName"
                    :header-cell-style="{ 'background': ' #375A88' }" @select="projectsSelectionSelect">
                    <el-table-column width="50">

                        <template #default="scope">
                            <el-radio v-model="scoperadio" :label="scope.row.aid"
                                @change="getRadioRow(scope.row)"></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="50" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column prop="name" label="来源" width="120" />
                    <el-table-column prop="time" label="时间" width="180" />
                </el-table>
                <div class="demo-pagination-block pagination">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" small background
                        layout="prev, total,pager, next, jumpe," :total="parseInt(total)" class="mt-4"
                        @current-change="handleCurrentChange2" />
                </div>
                <div class="dialog-footer footer_div l_btn">
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="addsg('1');">添加</el-button></div>
                    </div>
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="addsg('2')">
                                修改
                            </el-button></div>
                    </div>
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="dialog.dialogsgdelect = true">
                                删除
                            </el-button></div>
                    </div>
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="accident()">
                                确定
                            </el-button></div>
                    </div>
                </div>

            </div>

            <div class="ddd" v-show="dialog.dialogForm">
                <div class="header_l">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 class="tianjia"> {{ shigtext }}</h4>
                    <div class="closeimg" @click="dialog.dialogForm = false"><el-image :src="closeimg" fit="contain"
                            style="margin-top: -10px;"></el-image></div>
                    <div class="ddd_div" style="display: flex;">
                        <div class="demo-input-suffix firsttitle magintop">
                            <el-form-item label="事故名称">
                                <el-input v-model="formull.name" class="w-50 m-2" :placeholder="placeholder" />
                            </el-form-item>
                            <div class="l_btn class_btn" style="width: auto;">

                                <div class="footerbtn">
                                    <div class="borderimg"><el-button @click="sgadd()">
                                            确定
                                        </el-button></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <el-dialog v-model="dialog.dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">

                <template #header="{ titleId, titleClass }">
                    <div class="my-header ">
                        <el-image :src="icon" fit="contain"></el-image>
                        <h4 :id="titleId" :class="titleClass">删除</h4>

                    </div>
                </template>
                <h4 class="delecttitle"> 是否确认删除<span class="spanclad">{{ idobj.name }}</span></h4>
                <div class="dialog-footer footer_div l_btn">
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="dialog.dialogsgdelect = false">取消</el-button></div>
                    </div>
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="sgdelect(); dialog.dialogsgdelect = false">
                                确定
                            </el-button></div>
                    </div>
                </div>
            </el-dialog>
        </el-dialog>
        <!--火灾左侧栏-->
        <div class="common-layout" style="margin: 0;" v-show="leftcoll.collfire">
            <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg  leftbgimg">
                <div class="demo-collapse">
                    <el-collapse v-model="coolactiveName" accordion>
                        <el-collapse-item name="1">

                            <template #title>
                                <el-icon class="iconimg Frame2" fit="contain"></el-icon>
                                火灾<el-icon class="header-icon">
                                </el-icon>
                            </template>
                            <div class="asides_content">
                                <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
                                    <div class="l_padding " style="padding:20px 20px 20px 24px; ">
                                        <div class="line selecwidth">
                                            <el-form-item label="污染物选择:">
                                                <!-- <el-select v-model="options.coid" multiple filterable allow-create
                                                    default-first-option :reserve-keyword="false" value-key="code"
                                                    @change="selectchange($event)" placeholder="请选择">
                                                    <el-option v-for="item in options" :key="item.coid"
                                                        :label="item.code" :value="item" />
                                                </el-select> -->
                                                <el-select v-model="value" multiple filterable allow-create
                                                    default-first-option :reserve-keyword="false" value-key="code"
                                                    @change="selectchange($event)" placeholder="请选择">
                                                    <el-option v-for="item in options" :key="item.coid"
                                                        :label="item.code" :value="item" />
                                                </el-select> 
                                            </el-form-item>
                                        </div>
                                        <ul>
                                            <li>
                                                <div class="demo-datetime-picker">
                                                    <span class="inputtext_1">选择时间</span>
                                                    <div class="block">
                                                        <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
                                                            placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
                                                            @change="timeclick()" />
                                                    </div>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">时间步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">空间步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
                                                    <span class="righttext">m</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">模拟时长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">输出步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">交互步长</span>
                                                <div class="inputkuang"> <el-input
                                                        v-model="tuiyanobj.interactionstep" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="asdis_btn">
                                        <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
                                        <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
                                    </div>

                                    <div class=" logs">
                                        <div class="logs_pading">
                                            <h4>模拟日志</h4>
                                            <div class="footerTextBox">
                                                <el-input class="footerText" type="textarea" id="textarea_id"
                                                    v-model="rizhi.logs"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                </el-form>

                            </div>

                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-aside>
        </div>
        <!-- 突水 -->
        <div class="common-layout" style="margin: 0;" v-show="leftcoll.collwater">
            <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg  leftbgimg">
                <div class="demo-collapse">
                    <el-collapse v-model="coolactiveName" accordion>
                        <el-collapse-item name="1">

                            <template #title>
                                <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                                突水<el-icon class="header-icon">
                                </el-icon>
                            </template>
                            <div class="asides_content">
                                <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
                                    <div class="l_padding " style="padding:20px 20px 20px 24px; ">
                                        <ul>
                                            <li>
                                                <div class="demo-datetime-picker">
                                                    <span class="inputtext_1">选择时间</span>
                                                    <div class="block">
                                                        <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
                                                            placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
                                                            value-format="YYYY-MM-DD HH:mm:ss" @change="timeclick()" />
                                                    </div>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">时间步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">空间步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
                                                    <span class="righttext">m</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">模拟时长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">输出步长</span>
                                                <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                            <li><span class="inputtext_1">交互步长</span>
                                                <div class="inputkuang"> <el-input
                                                        v-model="tuiyanobj.interactionstep" />
                                                    <span class="righttext">s</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="asdis_btn">
                                        <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
                                        <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
                                    </div>

                                    <div class=" logs">
                                        <div class="logs_pading">
                                            <h4>模拟日志</h4>
                                            <div class="footerTextBox">
                                                <el-input class="footerText" type="textarea" id="textarea_id"
                                                    v-model="rizhi.logs"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                </el-form>

                            </div>

                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-aside>
        </div>
    </div>
</template>
<!-- timestampToTime -->

<script setup>
import { computed, ref, onMounted, reactive, toRef } from "vue";
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
import icon from "@/assets/img/icon.png";
import Frame2 from "@/assets/img/Frame2.png";
import t1 from "@/assets/img/t1.png";
import t2 from "@/assets/img/t2.png";
import t3 from "@/assets/img/t3.png";
import t4 from "@/assets/img/t4.png";
import mitts from "@/utils/Bus"
import closeimg from "@/assets/img/colse.png";
import { timestampToTime } from '@/js/lindex.js'
import { vtkmodel } from "@/control/vtkModel.js";
const changeModel= ()=>  {
  vtkmodel.clearJgAddMode();
  vtkmodel.renderWindow.render();
}
let placeholder=ref('某次某事件火灾事故');
let emit = defineEmits(['headerclick', 'childfun', 'moxingclick','handleSelect'])
const props = defineProps({
    addselect: {
        type: Function,
        required: true,

    },
    headerobj: {
        type: Object,
    }

});
let startlog=ref('0');
let shigtext = ref('');
let websock = ref(null);
let times = ref({
    lockReconnect: false, //是否真正建立连接
    timeout: 28 * 1000, //30秒一次心跳
    timeoutObj: null, //心跳倒计时
    serverTimeout0bj: null, //
    timeoutnum: null, //断开重连倒计时
})
let zqname = ref({});
let shiguobj = ref({
    source: '自荐',
    type: '预演',
    sid: '-1'
})
let sgdata = ref({});
let formull = ref({
    source: '',
    name: ''
})
let idobj = ref({
    sgaid: "",
    name: "",
    time: ""
})
const value1 = ref('')
let loading = ref(true)
let aid = ref();
let firepid = ref("");
let firesid = ref("");
const currentPage4 = ref(1);
const pageSize4 = ref(3)
let total = ref(1);
const dialogVisible = ref(true);
const classradio = ref();
let classradio1 = ref('Fire');
const leftcoll = ref({
    collfire: false,
    collwater: false,
});
const monitor = ref(false);
const dialog = ref({
    dialogVisible_fire: false,
    jianced: true,
    monitor: false,
    dialogForm: false,
    dialogsgdelect: false,
})
let tuiyanobj = ref({
    value: [''],
    pickertime: '24-03-06 00:00:00',
    acctime: '2024-03-06 00:00:00',
    dt: '',
    dx: '',
    reportstep: '',
    interactionstep: '',
    totaltime: '',
    coids: '',
    cocodes: ''

})
let tuiyanobj2 = ref({
    value: ['SO2'],
    pickertime: '',
    acctime: '2024-03-06 00:00:00',
    dt: '0.1',
    dx: '10',
    reportstep: '60',
    interactionstep: '3600',
    totaltime: '3600',
    coids: '1',
    cocodes: 'CO2'

})
let tuiyanobj3 = ref({
    value: ['SO2'],
    pickertime: '',
    acctime: '2024-03-06 00:00:00',
    dt: '5',
    dx: '5',
    reportstep: '60',
    interactionstep: '3600',
    totaltime: '3600',
    coids: '1',
    cocodes: 'CO2'

})
let tableobj = ref({});
let coolactiveName = ref(["1", "2"]);
let newlog = ref("");
let rizhi = ref({
    top: "50px",
    logs: '',
    left: "90px"
});
let formLabelWidth5 = ref('130px');
const formInline = ref({
    user: '11',
    region: 'shanghai',
    date: '',

})
const value = ref([])
const options = ref([])
let arrvalue=ref([]);
let scoperadio = ref(1);
// 推演结果
const customColor = ref('#409eff')
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
const tableData = ref([]);
const tableData2 = [
    {

        date: '站点1',
        name: '2',
        address: '10',
    },
    {
        date: '站点1',
        name: '2',
        address: '10',
    },
    {
        date: '站点1',
        name: '2',
        address: '10',
    },
    {
        date: '站点1',
        name: '2',
        address: '10',
    },

]
const handleCurrentChange = ({ row, rowIndex }) => {
    // console.log(row);
}
// aid获取

// 类型选择
const classclick = () => {
   
    scoperadio.value="";
    dialog.value.dialogVisible_fire = true;
    classradio.value = classradio1.value;
    props.addselect();
    getdata();
 
}
// 事故确定列表
const accident = () => {
    if (idobj.value.name == '') {
        ElMessage.error('请选择项目')
    } else {
          rizhi.value.logs='';
          newlog.value ='';
        emit('headerclick', sgdata.value);
        dialog.value.dialogVisible_fire = false;
        emit('childfun');
        emit('moxingclick', true);
        pollute();
        emit('handleSelect', '1');

    }
    fetchFileContent();

}
const accident2 = (key) => {
    if (key == '3') {
        if (classradio.value== "Fire") {
            leftcoll.value.collfire = true;
        } else if (classradio.value== "Water") {
            leftcoll.value.collwater = true;
        } else {

        }
        rewu();
    } else {
        leftcoll.value.collfire = false;
          leftcoll.value.collwater = false;
    }

}
//事故添加列表
const sgadd = () => {
    const params = {
        transCode: 'D00002',
        source: shiguobj.value.source,
        type: shiguobj.value.type,
        name: formull.value.name,
        stype: classradio.value,
        sid: shiguobj.value.sid,
        aid: aid.value
    }
    request(params)
        .then((res) => {
            dialog.value.dialogForm = false;
            getdata();
            scoperadio.value = null;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
// 事故列表的选择
const getRadioRow = (val) => {

    sgdata.value = (val);
    console.log(tableobj.value)
    formull.value.name = val.name;
    aid.value = val.aid;
    idobj.value.name = val.name;
    idobj.value.time = val.time;
}
function handleCurrentChange2(val) {
    currentPage4.value = val;
    getdata();
}
// 事故添加按钮
const addsg = (val) => {
    if (val == '1') {
        shigtext.value = '事故添加';
        aid.value = 0;
        formull.value.name = '';
    } else if (val == '2') {
        shigtext.value = '事故修改';
        formull.value.name = idobj.value.name
    }
    dialog.value.dialogForm = true;
}
// 事故删除
const sgdelect = () => {
    const params = {
        transCode: 'D000016',
        aid: aid.value,

    }
    request(params)
        .then((res) => {
            getdata();
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
        })
        .catch((err) => {
            loading.value = false;
            ElMessage.error(err.returnMsg)
        })

}
//事故获取列表
const getdata = () => {
    if(classradio.value== "Fire"){
        placeholder.value='某次某事件火灾事故'
    } else if (classradio.value== "Water") {
        placeholder.value='某次某事件突水事故'
    }else{
    }
    const params = {
        transCode: 'D00003',
        count: pageSize4.value,
        page: currentPage4.value,
        aid: aid.value,
        stype: classradio.value,
    }
    request(params)
        .then((res) => {
            loading.value = false;
            tableData.value = res.rows;
            total.value = res.total;

        })
        .catch((err) => {
            loading.value = false;
            ElMessage.error(err.returnMsg)
        })

}
// 污染物的查询
const pollute = () => {
    value.value=[];
    const params = {
        transCode: 'D10013',
    }
    request(params)
        .then((res) => {
            options.value = res.rows;
         // value.value= res.rows[0].code.split(',');
        //    tuiyanobj2.value.coids=res.rows[0].coid;
        //    tuiyanobj2.value.value= value.value;
           value.value.push(res.rows[0]);
        // tuiyanobj2.value.cocodes =res.rows[0].code;
        // tuiyanobj2.value.coids=res.rows[0].coid;

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//任务求解任务信息
const rewu=()=>{
  
     arrvalue.value=[];

    const params = {
        transCode: 'D10017',
        aid:aid.value,
    }
    request(params)
        .then((res) => {
            arrvalue.value=res.cocodes.split(',');
            tuiyanobj.value=res;
            tuiyanobj.value.pickertime=res.acctime;
            console.log(tuiyanobj.value.acctime)
            console.log(options.value.length);
            value.value=arrvalue.value;   
            value.value=[];
            for (let i = 0; i <options.value.length; i++){
              console.log(options.value[i])
              for (let j = 0; j < arrvalue.value.length; j++){
            if(options.value[i].code==arrvalue.value[j]){
                value.value.push(options.value[i]);
            }
              }
           }
      
        })
        .catch((err) => {
           // ElMessage.error(err.returnMsg)
           addinitial();
        })
      
}
//默认时间
const inititimeDefaultal = () => {
    var date = new Date();
    var timeStamp = Date.parse(date)
    var s1 = timestampToTime(timeStamp);
    return s1;
}

// 初始数据
const initial = () => {
  
    addinitial();

}
const addinitial=()=>{
    if (classradio.value == "Fire") {
        tuiyanobj2.value.pickertime = inititimeDefaultal();
        tuiyanobj2.value.acctime = inititimeDefaultal();
        tuiyanobj2.value.cocodes = options.value[0].code;
        tuiyanobj2.value.coids=options.value[0].coid;
        console.log(value.value);
        tuiyanobj.value = tuiyanobj2.value;
        console.log(tuiyanobj2.value);
    } else {

        tuiyanobj3.value.pickertime = inititimeDefaultal();
        tuiyanobj3.value.acctime = inititimeDefaultal();
        tuiyanobj.value = tuiyanobj3.value;
    }
}
function zdtimechange() {


}
const timeclick = () => {

    var timeStamp = Date.parse(tuiyanobj.value.pickertime)
    tuiyanobj.value.acctime = timestampToTime(timeStamp);
}
//  下拉多选
const selectchange = (val) => {
    console.log(val);
    let arr1 = [];
    let arr2 = [];
    for (let i = 0; i <= val.length - 1; i++) {
        console.log(val[i])
        arr1.push(val[i].coid);
        arr2.push(val[i].code);
    }
    tuiyanobj.value.coids = arr1.join(',');
    tuiyanobj.value.cocodes = arr2.join(',');
}
//推演的开始计算
const calculate = () => {
    rizhi.value.logs='';
    newlog.value ='';
    const params = {
        transCode: 'D00008',
        aid: aid.value,
        acctime: tuiyanobj.value.acctime,
        dt: tuiyanobj.value.dt,
        dx: tuiyanobj.value.dx,
        reportstep: tuiyanobj.value.reportstep,
        interactionstep: tuiyanobj.value.interactionstep,
        totaltime: tuiyanobj.value.totaltime,
        coids: tuiyanobj.value.coids,
        cocodes: tuiyanobj.value.cocodes,
    }

    request(params)
        .then((res) => {
          //  initWebSocket();
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
const projectsSelectionSelect = () => {
}
// 日志获取
function getthislog(val) {

    if (val.includes("msg=heartCheck")) {
    } else {
        newlog.value = newlog.value + "\n" + val;
        rizhi.value.logs = newlog.value;
    }
        let textarea = document.getElementById("textarea_id");
        textarea.scrollTop = textarea.scrollHeight;
   
}
// 历史日志
async function fetchFileContent() {
    const params = {
        transCode: "D000015",
        aid: aid.value
    };
    await request(params)
        .then((res) => {
            if (res.returnCode == "000000000") {
                initWebSocket();
                  getthislog(res.logs);
            } else {
                ElMessage({
                    message: res.returnMsg,
                    type: "error",
                });
            }
        })
        .catch((err) => { });
}
// 日志
function initWebSocket() {
    //初始化weosocket
    // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
    const wsurl = import.meta.env.VITE_WEBSOCKET_URL + aid.value
    console.log(wsurl);
    websock = new WebSocket(wsurl);
    websock.onopen = websocketonopen;
    websock.onmessage = websocketonmessage;
    websock.onerror = websocketonerror;
    websock.onclose = websocketclose;
}

// Websoket连接成功事件
const websocketonopen = (res) => {
 console.log("WebSocket连接成功", res);
    start();
};
// Websoket接收消息事件
const websocketonmessage = (res) => {
 //   console.log("数据", res);
    //  console.log(res.data);
    getthislog(res.data);

    reset();
};
// Websoket连接错误事件
const websocketonerror = (res) => {
    console.log("连接错误", res);
    websock.value.close();
    reconnect();
};
// Websoket断开事件
const websocketclose = (res) => {
    console.log("断开连接", res);
};
// 创建 websocket 的实例

// 心跳包
const reconnect = () => {
    if (times.value.lockReconnect) return;
    times.value.lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
    times.value.timeoutnum = setTimeout(function () {
        //新连接
        initWebSocket();
        times.value.lockReconnect = false;
    }, 10000);
}
const reset = () => {
    //重置心跳
    clearTimeout(times.value.timeoutObj);
    clearTimeout(times.value.serverTimeoutObj);
    start();
}
const start = () => {
    //开启心跳
    times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
    times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
    times.value.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (websock.readyState == 1) {
            //如果连接正常
            websock.send("heartCheck");
        } else {
            //否则重连
            console.log(111111)
            reconnect();
        }
        times.value.serverTimeoutObj = setTimeout(function () {
            // 超时关闭
            websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        }, times.value.timeout);
    }, times.value.timeout);
}
// 组件被销毁之前，清空 sock 对象
onBeforeUnmount(() => {
    // 关闭连接
    websocketclose;
    // 销毁 websocket 实例对象
    websock.value = null;
    rizhi.logs='';

});

onMounted(() => {

   // dialogVisible.value=true;
});

defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel});
</script>

<style lang="scss" scoped>
.jc_padding {
    padding: 18px 10px;
}

.line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    box-sizing: border-box;
}

.L_aside {
    .iconimg {
        width: 37px;
        height: 36px;
        margin: 0 7px 0 24px;
    }

    .Frame2 {
        background-image: url(../assets/img/Frame2.png);
        background-size: 100%;
        background-position: center;
    }

    .Frame3 {
        background-image: url(../assets/img/Frame3.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .el-collapse,
    .el-collapse-item__header {
        border: none;

        ul li {
            text-align: left;
        }

        .inputkuang {
            height: 30px;
            width: 100%;
            background: rgba(13, 22, 57, 0.4);
            position: relative;

            .righttext {
                display: inline-block;
                position: absolute;
                right: 10px;
                top: 3px;
                color: rgba($color: #FFFFFF, $alpha: 0.8);
            }
        }

        .inputtext_1 {
            font-weight: 400;
            font-size: 13px;
            color: #FFFFFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 13px 0 7px 0;
            display: inline-block;

        }
    }
}

.ddd {
    margin-top: 20px;

    .ddd_div {
        padding: 20px 0;
        position: relative;
    }

    .class_btn {
        position: absolute;
        right: 0;
        top: 21px;
    }

}

.header_l {
    line-height: 10px;
    // height: 40px;
    text-align: left;
    padding: 0 20px;
    // border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;

    .el-image {
        padding: 10px 10px 0 0;
    }

    h4 {
        font-weight: bold;
        font-size: 12px;
        color: #68ADFF;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.tianjia {
    display: inline-block;
}

.el-dialog__title {
    display: inline-block;
}

.bgcolor {
    // width: 482px;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.dialog_class {
    .my-header {
        line-height: 10px;
        height: 40px;
        text-align: left;
        padding: 0 20px;
        border-bottom: 1px solid;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
        border-radius: 0px 0px 0px 0px;

        .el-image {
            padding: 10px 10px 0 0;
        }

        h4 {
            font-weight: bold;
            font-size: 12px;
            color: #68ADFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .my_content {
        width: 100%;
        height: 90px;
        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
        border-radius: 0px 0px 0px 0px;
        position: relative;

        .radio-group {
            display: flex;
            justify-content: center;

            .el-radio {
                flex: 1;
                justify-content: center;
                font-weight: bold;
                font-size: 12px;
                color: #FFFFFF;
                line-height: 14px;

            }

        }
    }

    .el-dialog__footer {
        position: absolute;
        bottom: 17px;
        display: flex;

        .footerbtn {
            flex: 1;
            text-align: center;
        }
    }
}

.my_content1 {
    .el-table .cell {
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF !important;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

}

.l_btn .borderimg {
    width: 109px;
    height: 30px;
    background: rgba(104, 173, 255, 0.3);
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    /* border: 1px solid rgba(31, 107, 255, 1); */
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;

    border-radius: 4px;
    display: flex;
    display: inline-block;
    box-sizing: border-box;
}

.borderimg {
    width: 109px;
    height: 30px;
    background: rgba(104, 173, 255, 0.3);
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    /* border: 1px solid rgba(31, 107, 255, 1); */
    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    border-radius: 4px;
    display: flex;
    display: inline-block;
    box-sizing: border-box
}

.el-table,
.el-table thead th {
    background-color: rgba(13, 22, 57, 0.96) !important;
}

.L_aside {
    height: calc(100vh - 70px);
    position: absolute;
    top: 70px;
    overflow: hidden;
}

.asides_content {

    //     background: rgba(13,22,57,0.4);
    // box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    // border-radius: 0px 0px 0px 0px;
    // border: 1px solid;
    // border-image: linear-gradient(359deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
    .el-form-item__label {
        color: #FFFFFF !important;
    }
}

.asdis_btn {
    display: flex;
    margin-top: 9px;

    .btn {
        flex: 1;
        width: 145px;
        height: 54px;
        background-image: url(../assets/img/Rectangle5.png);
        background-repeat: no-repeat;
        line-height: 54px;

        .spantext {
            font-weight: bold;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            text-transform: none;

        }
    }
}

.logs {
    margin-top: 25px;
    border-radius: 0px 0px 0px 0px;
    border-top: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);

    h4 {
        padding: 10px 0;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.logs_pading {
    padding: 13px 20px 23px 24px;
}

.newtime {
    height: 112px;
    padding: 38px;
    font-weight: bold;
    font-size: 20px;
    color: #FF0F0F;
    line-height: 23px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.animation_s {
    padding: 25px;
}

.tanniu ul {
    margin-top: 40px;
    display: flex;

    li {
        flex: 1;
        text-align: center;

        p {
            text-align: center;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 14px;
            font-style: normal;
            text-transform: none;
        }
    }
}

.jiancedian {
    width: 371px;
    position: absolute;
    right: 0;
    top: 70px;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}
</style>

<style>
/* //.bgcolor */
.bgcolor {
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
}

.dialog_class {
    background-color: rgba(13, 22, 57, 0.96) !important;
    width: 482px;



}

.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
    padding: 0 !important;
    margin: 0 !important;
}

.el-dialog {
    --el-dialog-padding-primary: 0px !important;
}

.el-dialog__headerbtn {
    position: absolute;
    top: 2px !important;
    right: 0;
    padding: 0;
    width: 40px !important;
    height: 40px !important;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: var(--el-message-close-size, 16px);
}

.el-icon {
    color: #68ADFF !important;
}

.l_btn .borderimg {
    width: 109px;
    height: 30px;
    background: rgba(104, 173, 255, 0.3);
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    /* border: 1px solid rgba(31, 107, 255, 1); */
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;

    border-radius: 4px;
    display: flex;
    display: inline-block;
    box-sizing: border-box;
}

.l_btn .el-button {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    color: #fff;
    background: rgba(104, 173, 255, 0.3);
    border: 1px solid rgba(31, 107, 255, 1);
}

.class_footer {
    position: absolute;
    bottom: 17px;
}

.footer_div {
    height: 90px;
    padding: 30px 0;
}

.l_btn {
    width: 100%;

    bottom: 17px;
    display: flex;
    border-radius: 4px;

}

.el-table .el-table__cell {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
}

/* .el-table tr,.el-table th.el-table__cell{
            background-color: rgba(13, 22, 57, 0.96) !important;
        } */
.el-table__row {
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
    border-radius: 0px 0px 0px 0px;
    border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.oddRow {
    background-color: rgba(104, 173, 255, 0.20) !important;
}

.evenRow {
    background-color: rgba(13, 22, 57, 0.96) !important;
}

.my_content1 .el-table .cell {
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF !important;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
    height: 0 !important;
    background-color: rgba(red, green, blue, 0) !important;
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: rgba(104, 173, 255, 0) !important;
}

.el-button:focus,
.el-button:hover {
    background: rgba(104, 173, 255, 1) !important;
    font-weight: bold;
    color: #000 !important;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.el-input__wrapper {

    height: 30px;
    background: rgba(104, 173, 255, 0.3) !important;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.selecwidth .el-input__wrapper {
    height: auto !important;
}

.selecwidth .el-select__tags {
    max-width: 200px !important;
}

.ddd_div .el-input__inner {
    border: none;
    /* background: rgba(104,173,255,0.3); */

}

.ddd_div .el-form-item__label {
    color: #fff !important;
}

.ddd_div .demo-input-suffix {
    width: 100%;
}

.ddd .el-form-item {
    width: 72% ;
}

/* .el-input__inner::placeholder {
			color: #fff !important;
		} */
.flex1 {
    flex: 1;
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #fff !important;
    background: #fff !important;
}

.el-radio__inner {
    border: 2px solid #fff !important;
    background-color: rgba(104, 173, 255, 0) !important;
    border: 1px solid #68ADFF;
}

.asideg .el-collapse-item__header {
    height: 50px !important;
    width: 100%;

    background-position: left;
    border: none !important;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 18px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.leftbgimg .el-collapse-item__header {
    background-image: url(../assets/img/Group10.png) !important;
}

.asideg1 .jc_header {
    width: 100%;
    height: 52px;
    line-height: 69px;
    background-image: url(../assets/img/Group24.png) !important;
    background-repeat: no-repeat;
    background-position: center;

}

.jc_tile {
    padding-left: 20px;
}

.he_pading {
    padding: 19px 14px 0 31px;
}

.asideg1 .el-form-item__label {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.asideg .el-collapse {
    --el-collapse-header-bg-color: none !important;
}

.asideg .el-collapse-item__arrow {
    margin: 0 8px 0 auto;
    font-weight: 800;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

.el-collapse-item__content {
    background: rgba(13, 22, 57, 0.2);
}

.asideg .el-input__wrapper {
    background: rgba(104, 173, 255, 0) !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

.asideg .el-input__inner {
    color: rgba(255, 15, 15, 1);
    font-weight: 400;
    font-size: 16px;
}

.el-collapse {
    --el-collapse-header-bg-color: rgba(104, 173, 255, 0) !important;
    --el-collapse-header-text-color: var(--el-text-color-primary);
    --el-collapse-header-font-size: 13px;
    --el-collapse-content-text-color: rgba(104, 173, 255, 0) !important;
    --el-collapse-content-bg-color: rgba(104, 173, 255, 0) !important;
}

.asideg .el-collapse-item__content {
    height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0 !important;
}

.asideg .el-collapse-item__wrap {

    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 4px 4px 4px 4px;
    border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

#textarea_id {
    color: #fff;
    font-size: 12px;
    height: 226px;
    background: rgba(104, 173, 255, 0) !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

.asides_content .el-form-item__label {
    color: #FFFFFF !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 33px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.el-form-item {
    width: 100%;
}

.el-select__wrapper {
    background-color: rgba(104, 173, 255, 0) !important;
}

.el-select__wrapper.is-hovering:not(.is-focused),
.el-select__wrapper {
    box-shadow: none !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

/* Webkit内核浏览器（Chrome、Safari等）*/
::-webkit-scrollbar {
    width: 4px;
    /* 设置滚动条宽度 */
    background-color: #161A2A;
    /* 设置滚动条背景颜色 */
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    /* 设置滑块边角半径 */
    background-color: rgba(31, 107, 255, 1);
    /* 设置滑块背景颜色 */
}

/* 滑块在hover状态时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 设置滑块在hover状态下的背景颜色 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background-color: rgba(104, 173, 255, 0.4)
        /* 设置滚动条轨道背景颜色 */
}

.result .el-tabs__item {
    padding: 17px !important;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.el-tabs--card>.el-tabs__header,
.el-tabs--card>.el-tabs__header,
.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none !important;
}

.el-tabs {
    --el-tabs-header-height: 70px !important;
}

.result .el-tabs__item {
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    line-height: 23px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.result .is-active {
    height: 70px;
    background: radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
    border-radius: 0px 0px 0px 0px;
    border: 2px solid;
    color: rgba(255, 15, 15, 1) !important;
    border-left: 1px solid rgba(16, 92, 240, 1);
    border-right: 1px solid rgba(18, 48, 102, 1);
    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
}

.result .el-tabs__item:hover {
    color: rgba(255, 15, 15, 1);
    cursor: pointer;
}

.result .el-tabs__header {
    padding: 0 !important;
    margin: 0 !important;
}

.result .el-tabs__content {
    border: 1px solid;
    color: rgba(255, 15, 15, 1) !important;
    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    position: relative;
}

.result .el-tabs__content {
    width: 275px;
}

.el-slider__button {
    height: 10px;
    width: 10px;

}

.color1 {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.jc_padding .el-table tr {
    height: 40px;
    background-color: none;


}

.jc_padding .el-table .cell {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.tianjia .el-dialog__body {
    padding: 20px !important;
}

.tianjia .el-form-item__label {
    color: #fff;

}

.tianjia .el-input__inner {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    padding: 20px 0;
    height: 30px;
    line-height: 47px;
}

.ddd_div .el-input__inner {
    color: #fff;
}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.pagination .el-pagination__total {
    color: #fff;
}

.el-pagination.is-background .btn-next.is-disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev.is-disabled,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .el-pager li.is-disabled,
.el-pagination.is-background .el-pager li:disabled {
    background: rgba(104, 173, 255, 0.3) !important;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

.delecttitle {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.scoperadio .el-radio__label {
    display: none;
}

.el-select__input {
    font-size: 12px;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tuiy .asideg .el-input__inner {
    font-size: 14px !important;
}
.spantext{
    cursor: pointer;
}
</style>