disaster_web3/src/view/components/InfoAnimation.vue

<template>
  <!-- 所有弹出框 -->
  <!-- 推演结果 -->
  <div class="l_Dialog">
    <el-aside width="278px" class="L_aside1 asideg asidegbg leftbgimg" v-show="monitor">
      <div class="result result1">
        <el-tabs
          v-model="resultactiveName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="当前时间" name="first">
            <div class="newtime">{{ newtime }}</div>
          </el-tab-pane>
          <el-tab-pane label="指定时间" name="second">
            <div class="newtime">
              <el-date-picker
                v-model="zdtime"
                type="datetime"
                placeholder="Select date and time"
                @change="zdtimechange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="动画演示" name="third">
            <div class="animation_s">
              <el-slider
                :max="endtime"
                :min="starttime"
                v-model="count"
                @change="sliderchange"
              >
              </el-slider>
              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
              <div class="tanniu">
                <ul>
                  <li>
                    <el-image :src="t1" fit="contain" @click="Prev"></el-image>
                    <p>后退</p>
                  </li>
                  <li>
                    <el-image :src="t2" fit="contain" @click="play(500)"></el-image>
                    <p>播放</p>
                  </li>
                  <li>
                    <el-image :src="t3" fit="contain" @click="suspend"></el-image>
                    <p>暂停</p>
                  </li>
                  <li>
                    <el-image :src="t4" fit="contain" @click="increment"></el-image>
                    <p>快进</p>
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-aside>
    <!-- 监测点 -->
    <!-- 监测点 -->
    <div
      class="demo-collapse jiancedian asideg1 jc_header collapseeion jianstyle"
      v-show="monitor"
    >
      <el-collapse accordion v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <div class="he_pading color1">
              <el-form-item label="物理量:" v-if="props.classradio == 'Fire'">
                <el-select
                  v-model="formInline.region"
                  @change="regionchange($event)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in strResultFormatlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="woter" v-else>
                <span>物理量：</span>
                <span>水位</span>
              </div>
            </div>
          </template>
          <div class="jc_content tablecolor">
            <div class="jc_padding">
              <div class="xian" v-if="props.classradio == 'Fire'">
                <el-table
                  :data="tableData2"
                  style="width: 100%"
                  @current-change="handleCurrentChange"
                  :row-class-name="tableRowClassName"
                  :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
                >
                  <el-table-column prop="name" label="监测点名称" />
                  <el-table-column prop="value" :label="danwei" />
                </el-table>
              </div>
              <div class="xian" v-else>
                <el-table
                  :data="tableData2"
                  style="width: 100%"
                  @current-change="handleCurrentChange"
                  :row-class-name="tableRowClassName"
                  :max-height="tableHeight"
                  :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
                >
                <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
                  <el-table-column prop="name" label="监测点名称" />
                  <el-table-column prop="value" label="水位(m)" />
                  <el-table-column prop="value2" label="流量" />
                </el-table>
              </div>
            </div>
            <div class="jc_header color1">
              <span class="jc_tile">信息展示</span>
            </div>
            <div class="msgval" style="height: 200px">
              <ul>
                <li v-for="(item, i) in msgval" :key="i">
                  <span class="namemgd">{{ item.name }}</span>
                  <span class="namemgd2">{{ item.value }}</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <div class="mgsnoe" style="height: 200px"></div> -->
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onBeforeUnmount, 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 mitts from "@/utils/Bus";
import closeimg from "@/assets/img/colse.png";
import { timestampToTime } from "@/js/lindex.js";
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 { vtkmodel } from "@/control/vtkModel.js";
import { createFireControl } from "@/control/fireControl.js";
import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
let labelval = ref("SOS");
const activeNames = ref(["1"]);
let emit = defineEmits([]);
const props = defineProps({
  classradio: {
    type: String,
    // default: '',
  },
});
let tableHeight = ref(400);
let danwei = ref("");
let newcount = ref(0);
const count = ref(0);
const isstop = ref(false);
const monitor = ref(false);
const strResultFormatlist = ref([]);
let url = ref("http://localhost:8080/?aid=0");
// 推演结果
const resultactiveName = ref("first");
let newtime = ref("");

let starttime = ref(1);
let endtime = ref(60);
let timenum = ref(2);
let aid = ref();
let timing = ref(null);
let timing3 = ref(null);
let timing2 = ref(null);

let arrowtime = ref(null);
let arrowTmp=1;


let jgSelectPointId = ref(0);
const percentage = ref(20);
const customColor = ref("#409eff");
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
};
const formInline = ref({
  region: "Height",
});

const tableData = ref([]);
const tableData2 = ref([
  {
    name: "",
    value: "",
  },
]);
const handleCurrentChange = ({ row, rowIndex }) => {
  console.log(row);
};

const min = ref(0);
const max = ref(1);

const job = ref({
  jid: 0, //	任务ID
  aid: 0, //	事故ID
  starttime: "", //	结束时间
  endtime: "", //	开始时间
  state: "", //	状态
  faildes: "", //	失败原因
  dt: "", //	时间步长
  dx: "", //	空间步长
  reportstep: "", //	输出步长
  interactionstep: "", //	交互步长
  acctime: "", //	事故开始时间
  totaltime: "", //	模拟时长
  coids: "", //	物理属性ID逗号分隔
  cocodes: "", //物理属性code逗号分隔
});
let msgval = ref([]);
//选择结果存储
const selobj = ref([]);
const zdtime = ref("");
const chvals = ref([]);
const cocodes = ref([]);
const cocodeIndex = ref(0);
//监测点Code是否初始化
const cocodeIsInit = ref("false");
//滑块
function sliderchange(val) {
  newcount.value = count.value;
  fcon.step = count.value;
  console.log(count.value);
  // console.log(count.value);
  // vtkScalarRead();
  // getMonitor();
}
//播放
function play(time) {
  isstop.value = true;
  const sleep = (timeout = time) =>
    new Promise((resolve, reject) => {
      setTimeout(resolve, timeout);
    });
  let timer = async (timeout) => {
    while (count.value < endtime.value && isstop.value) {
      if (isstop.value == true) {
        await sleep(time);
        count.value++;
        fcon.step = count.value;
        newcount.value = count.value;
        // vtkScalarRead();
        // getMonitor();
      }
    }
  };
  timer(time);
}
function increment() {
  isstop.value = false;
  if (count.value == endtime.value) {
    return;
  }
  count.value++;
  newcount.value = count.value;
  fcon.step = count.value;
  // vtkScalarRead();
  // getMonitor();
}
//暂停
function suspend() {
  isstop.value = false;
}
//回到上一页
function Prev() {
  isstop.value = false;
  count.value--;
  fcon.step = count.value;
  newcount.value = count.value;
  // vtkScalarRead();
  // getMonitor();
}

function zdtimechange() {
  const zdtimestamp = Date.parse(zdtime.value);
  const zdtimeDate = new Date(zdtimestamp);
  reddate(zdtimeDate);
  // vtkScalarRead();
  // getMonitor();
}
function chengeMonitor() {
  for (let index = 0; index < cocodes.value.length; index++) {
    if (formInline.value.region == cocodes.value[index].cocode) {
      cocodeIndex.value = index + 1;
      break;
    }
  }
  tableData2.value = [];
  if (props.classradio == "Fire") {
    //火
    for (let i = 0; i < chvals.value.length; i++) {
      let chval = chvals.value[i];
      if (cocodeIndex.value == 1) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v1,
        });
      }
      if (cocodeIndex.value == 2) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v2,
        });
      }
      if (cocodeIndex.value == 3) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v3,
        });
      }
      if (cocodeIndex.value == 4) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v4,
        });
      }
      if (cocodeIndex.value == 5) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v5,
        });
      }
      if (cocodeIndex.value == 6) {
        tableData2.value.push({
          name: chval.chcode,
          value: chval.v6,
        });
      }
    }
  } else {
    //水
    for (let i = 0; i < chvals.value.length; i++) {
      let chval = chvals.value[i];

      tableData2.value.push({
        name: chval.chcode,
        value: chval.v1,
        value2: chval.v2,
      });
    }
  }
}
function regionchange(val) {
  // console.log(val)
  let newMap = new Map([
    ["Temperature", "(℃)"],
    ["Pressure", "(kg/s)"],
    ["Pressure", "(kg/s)"],
    ["CO2", "(%)"],
    ["CO2", "(%)"],
    ["H2S", "(%)"],
    ["Flow", "(Pa)"],
    ["Height", "m"],
  ]);
  newMap.forEach((value, key) => {
    // console.log(key, value);
    if (key == val) {
      danwei.value = key + value;
    }
  });
  chengeMonitor();
  vtkShow();
}
// aid获取
const accident5 = (val, key) => {
  aid.value = val;
  resultactiveName.value = "first";
  if (key == "4") {
    cocodeIsInit.value = false;
    //获取任务信息
    readJob();
  } else {
    clearInterval(timing.value);
  }

  //   // fireRead()
};

const fcon = createFireControl();

//监测点数据获取
async function getMonitor() {
  const params = {
    transCode: "D10016",
    aid: aid.value,
    step: fcon.step,
  };
  await request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        chvals.value = res.chvals;
        tableData2.value = [];
        for (let i = 0; i < chvals.value.length; i++) {
          let chval = chvals.value[i];
          tableData2.value.push({
            name: chval.chcode,
            value: chval.v1,
          });
        }
        //监测点类型初始化
        if (!cocodeIsInit.value) {
          // console.log(2222);
          cocodeIsInit.value = true;
          cocodes.value = res.cocodes;
          formInline.value.region = cocodes.value[0].cocode;
          let newMap = new Map([
            ["Temperature", "(℃)"],
            ["Pressure", "(kg/s)"],
            ["Pressure", "(kg/s)"],
            ["CO2", "(%)"],
            ["CO2", "(%)"],
            ["H2S", "(%)"],
            ["Flow", "(Pa)"],
            ["Height", "m"],
          ]);
          newMap.forEach((value, key) => {
            if (key == formInline.value.region) {
              danwei.value = key + value;
            }
          });
          // danwei.value=cocodes.value[0].cocode;
          cocodeIndex.value = 1;
          strResultFormatlist.value = [];
          for (let index = 0; index < cocodes.value.length; index++) {
            const cocode = cocodes.value[index];
            strResultFormatlist.value.push({
              id: index,
              name: cocode.cocode,
              value: cocode.cocode,
            });
          }
        } else {
          chengeMonitor();
        }
      } else {
        ElMessage({
          message: res.returnMsg,
          type: "error",
        });
      }
    })
    .catch((err) => {});
}
//选择结果定时器
function jgSelect() {
  timing2.value = setInterval(() => {
    //定时器
    if (jgSelectPointId.value != vtkmodel.selectJgPointId) {
      //  console.log("pointid",vtkmodel.selectJgPointId);//选择的点数据
      //获取点对应的Scalar
      jgSelectPointId.value = vtkmodel.selectJgPointId;
      selobj.value = [];
      for (const key of fcon.scalar.keys()) {
        selobj.value.push({
          name: key,
          value: fcon.scalar.get(key)[vtkmodel.selectJgPointId],
        });
      }
      // console.log(vtkmodel.selectJgPointId,selobj.value)
      msgval.value = selobj.value;
      console.log(msgval.value);
    }
  }, 1000);
}
function arrowtimeStart(){
  arrowtime.value=setInterval(() => {
    if(!vtkmodel||!vtkmodel.isJg){
      return;
    }
    console.log("arrowtimeStart");
    vtkmodel.clearArrow();
    if(arrowTmp==1){
      for (let index = 0; index < vtkmodel.arrowActors.length; index=index+10) {
       let actor =vtkmodel.arrowActors[index];
        vtkmodel.renderer.addActor(actor);
      };
      vtkmodel.renderWindow.render();
      arrowTmp=2;
    }else{
       for (let index = 3; index < vtkmodel.arrowActors.length; index=index+10) {
        let actor =vtkmodel.arrowActors[index];
        vtkmodel.renderer.addActor(actor);
      };
        vtkmodel.renderWindow.render();
        arrowTmp=1
    }
    
  },1000);
}

//获取任务信息
async function readJob() {


  const params = {
    transCode: "D10017",
    aid: aid.value,
  };
  await request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        //成功
        if(res.state=='1'){
         vtkmodel.clearModeAddJg(); //隐藏模版显示结果
        monitor.value = true;
        job.value = res;
        reddate(new Date());
        getMonitor();
        vtkGridRead();
        jgSelect();
          timehandclick();
        endtime.value= Number(res.totaltime)/Number(res.reportstep);
        console.log( endtime.value);
      }else if(res.state=='-1'){
        ElMessage({
          message: " 求解失败",
          type: 'error',
        });
      }else if(res.state=='0'){
        ElMessage({ message: "求解未完成",  type: 'error',
        });
      }
      } else {
        ElMessage({
          message: res.returnMsg,
          type: "error",
        });
      }
    })
    .catch((err) => {
      if(err.returnMsg=="任务不存在！"){
        monitor.value=false;
        console.log(1111)
        ElMessage({
          message: "未求解",
          type: 'error',
        });
           }
    });
}
//获取当前时间最近的步数 读取文件
//当前时间=开始时间+输出步长*输出次数
function reddate(date) {
  //当前时间
  const timestamp = date.getTime();
  // newtime.value = timestampToTime(timestamp);
  const accstamp = Date.parse(job.value.acctime);
  var timeDifference = parseInt((timestamp - accstamp) / 1000);
  fcon.stepsum = parseInt(job.value.totaltime) / parseInt(job.value.reportstep);
  max.value = fcon.stepsum;
  if (timeDifference < parseInt(job.value.totaltime)) {
    //最长时间范围
    fcon.step = parseInt(timeDifference / parseInt(job.value.reportstep));
  } else {
    fcon.step = fcon.stepsum;
  }
  count.value = fcon.step;
  newcount.value = count.value;
  // console.log(newcount.value);
}

function vtkGridRead() {
  fcon.aid = aid.value;
  fcon
    .initGemetry()
    .then((result) => {
      // console.log(fcon.polydata);
      vtkScalarRead();
   
    })
    .catch((err) => {});
}

//灾情流速文件获取
function velocityRead() {
  return;
  // clearInterval(arrowtime.value);
   fcon
    .getVelocityByStep(fcon.step)
    .then((result) => {
        vtkmodel.addArrow(fcon.velocitys);
        // arrowtimeStart();
    })
    .catch((err) => {
      console.log(err);
    });
}
function vtkScalarRead() {
  fcon
    .getScalrsByStep(fcon.step)
    .then((result) => {
      // console.log(fcon.scalar);
    
      velocityRead() ;
      // vtkShow();
      gjVtkShow();
    })
    .catch((err) => {
      console.log(err);
    });
}
function vtkShow() {
  
  console.log("执行了");
  const scalarBarActor = vtkmodel.scalarBarActor;
  const mapper = vtkmodel.jgMapper;
  const actor = vtkmodel.jgActor;

  // console.log(formInline.value.region);

  if (!fcon.scalar) {
    return;
  }
  const scalarArray = fcon.scalar.get(formInline.value.region);
  if (!scalarArray || !fcon.polydata) {
    return;
  }
  // console.log("scalarArray:", scalarArray);
  const dataArray = vtkDataArray.newInstance({
    name: formInline.value.region,
    size: fcon.polydata.getNumberOfPoints(),
  });
  // console.log(dataArray);
  dataArray.setData(scalarArray);
  fcon.polydata.getPointData().setScalars(dataArray);
  // fcon.polydata.getPointData().setOpacity(dataArray);
  mapper.setInputData(fcon.polydata);
  getMinMax(scalarArray);
  mapper.setScalarRange(
    parseFloat(min.value.toFixed(3)),
    parseFloat(max.value.toFixed(3))
  ); //设置范围
  // actor.setMapper(mapper);
  scalarBarActor.setAxisLabel(formInline.value.region);
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  actor.getProperty().setOpacity(0.5);
  // vtkmodel.renderer.resetCamera();
  vtkmodel.clearModeAddJg();
  vtkmodel.renderWindow.render();
}

//告警数据渲染
function gjVtkShow() {
  fcon.intgjScalar(props.classradio);
  console.log("执行了");
  const scalarBarActor = vtkmodel.gjscalarBarActor;
  const mapper = vtkmodel.gjMapper;
  const actor = vtkmodel.gjActor;
  if (!fcon.scalar) {
    return;
  }
  
  const scalarArray = fcon.gjScalar;
  if (!scalarArray || !fcon.polydata) {
    return;
  }
console.log("告警"+fcon.gjScalar);

  const dataArray = vtkDataArray.newInstance({
    name: "告警",
    size: fcon.polydata.getNumberOfPoints(),
  });

  dataArray.setData(scalarArray);
  fcon.polydata.getPointData().setScalars(dataArray);
  mapper.setInputData(fcon.polydata);
  getMinMax(scalarArray);
  mapper.setScalarRange(
    parseFloat(min.value.toFixed(3)),
    parseFloat(max.value.toFixed(3))
  ); //设置范围
  scalarBarActor.setAxisLabel(formInline.value.region);
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  actor.getProperty().setOpacity(0.5);
  vtkmodel.clearAllShowGj();
  vtkmodel.renderWindow.render();
}
function getMinMax(scalars) {
  // console.log("getMinMax:",scalars);
  min.value = scalars[0];
  max.value = scalars[0];
  for (let index = 0; index <= scalars.length; index++) {
    let scalar = scalars[index];
    if (min.value > scalar) {
      min.value = scalar;
    }
    if (max.value < scalar) {
      max.value = scalar;
    }
  }
  // console.log("max，min:", max.value, min.value);
}

const handleClick = (Tab, val) => {
  resultactiveName.value = Tab.props.name;
  timehandclick();
};
const inittime = () => {
  clearInterval(timing.value);
};
const timehandclick = () => {
  if (resultactiveName.value == "first") {
    timing.value = setInterval(() => {
      const timestamp = new Date().getTime();
      newtime.value = timestampToTime(timestamp);
      // console.log(   newtime.value );
      reddate(new Date());
    }, 1000);
  } else if (resultactiveName.value == "second") {
    clearInterval(timing.value);
  } else if (resultactiveName.value == "third") {
    clearInterval(timing.value);
  }
};
onBeforeUnmount(() => {
  clearInterval(timing.value);
  clearInterval(arrowtime.value);
});
onMounted(() => {
  // arrowtimeStart();
});

watch(
  newcount,
  (newVal, oldVal) => {
    // console.log("值改变了", newVal, oldVal);
    fcon.step = newVal;
    vtkScalarRead();
    getMonitor();
  },
  { deep: true }
); //深度监视
defineExpose({ monitor, accident5 });
</script>

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

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

.L_aside1 {
  .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;
      flex: 1;

      .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: 14px;
      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_aside1 {
  // height: calc(100vh - 70px);
  position: absolute;
  top: 70px;
}

.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: 1.7031rem;
  position: fixed;
  right: 0;
  top: 70px;
  background-color: rgb(26,38,69,0.4);
 
}
</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-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 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.2) !important;
}

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

.my_content1 .el-table .cell {
  font-weight: 400;
  font-size: var(--el-form-label-font-size);
  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-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;
}

.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%;
}

/* .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%;
  color: #fff;

  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;
}

.jc_tile {
  padding-left: 20px;
  display: inherit;
  line-height: 58px !important;
}

.he_pading {
  padding: 0px 14px 0 13px;
}

.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 {
  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 {
  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 {
  background-color: rgba(13, 22, 57, 0.6);
}

.result .el-tabs__item {
  padding: 17.5px !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: 278px;
}

.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 .cell {
  font-weight: 400;
  font-size: .0677rem;
  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: 14px;
  font-weight: bold;
  color: #fff;
}
.collapseeion .el-select .el-input__inner {
  color: #fff;
}
.el-collapse-item__wrap {
  border-bottom: 1px solid;
  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
    1;
}
.el-collapse {
  --el-collapse-border-color: rgba(31, 107, 255, 0.48);
}
.jc_header .el-collapse-item__header {
  width: 100%;
  height: 52px;
  line-height: 52px;
  background-image: url(../../assets/img/Group24.png) !important;
  background-repeat: no-repeat;
  background-position: center;
}
.jianstyle .el-collapse-item__arrow {
  margin: 0 8px 0 auto;
  font-weight: 800;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 20px !important;
}

.result1 .el-collapse-item__content {
  padding: 0 !important;
}
.msgval {
  padding: 18px 10px;
}
.msgval ul li {
  display: flex;
}
.msgval ul li span {
  display: inline-block;
  flex: 1;
  color: #fff;
}
.namemgd {
  text-align: left;
  padding-left: 50px;
}
.namemgd2 {
  text-align: left;
}

</style>