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()">
       确定
        </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"> 事故添加</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="某次某事件火灾事故"
        />
     </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-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 } 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'
let emit= defineEmits(['headerclick','childfun','moxingclick'])
const props= defineProps({
    addselect: {
        type: Function,
        required: true,

    },
    headerobj:{
        type: Object,
    }

 });
 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 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 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= () =>{

  dialogVisible.value = false; 
  dialog.value.dialogVisible_fire = true;
  classradio.value=classradio1.value;
  props.addselect();
  getdata();
}
// 事故确定列表
const accident=()=>{
    if(idobj.value.name==''){
        ElMessage.error('请选择项目')
    }else{
    emit('headerclick',sgdata.value);
    dialog.value.dialogVisible_fire=false;
    emit('childfun');
    emit('moxingclick',true);
    pollute();
}
fetchFileContent();
}
const  accident2=()=>{
    if(classradio.value=="Fire"){
        leftcoll.value.collfire=true;

    }else if(classradio.value=="Water"){
        leftcoll.value.collwater=true;
    }

}

//事故添加列表
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();
         
          })
          .catch((err) => {
            ElMessage.error(err.returnMsg)
          })
}
// 事故列表的选择
const getRadioRow=(val)=>{

    sgdata.value=(val)
aid.value=val.aid;
idobj.value.name=val.name;
idobj.value.time=val.time;
}
function handleCurrentChange2(val){ 
    currentPage4.value=val;
    getdata();
}
// 事故添加按钮
const addsg=(val)=>{
    console.log(val);
    if(val=='1'){
    aid.value=0;
   formull.value.name='';
    }else if(val=='2'){
        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=()=>{
    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=()=>{
    const params = {
        transCode: 'D10013',
        }
        request(params)
          .then((res) => { 
            console.log(res)
            options.value=res.rows
          })
          .catch((err) => {
            ElMessage.error(err.returnMsg)
          })
}
//默认时间
const inititimeDefaultal=()=>{
      var date = new Date();
    var timeStamp = Date.parse(date)
  var  s1=timestampToTime(timeStamp );
      return s1;
}

// 初始数据
const initial=()=>{
    if(classradio.value=="Fire"){
        options.value.coid=["CO2"];
        tuiyanobj2.value.pickertime=inititimeDefaultal();
        tuiyanobj2.value.acctime=inititimeDefaultal();
        tuiyanobj.value=tuiyanobj2.value;
        console.log(tuiyanobj.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)=>{
  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=()=>{
    
    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;
        }
        nextTick(() => {
            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() 
    }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);
      socket.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 {
          //否则重连
          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;
    });

onMounted(() => {
});

defineExpose({monitor,accident2,leftcoll,classradio,aid,dialogVisible});
</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: 80%;
}
/* .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;
}
</style>