disaster/src/view/components/InfoAnimation.vue

<template>
  <!-- 所有弹出框 -->
  <div class="l_Dialog">
    <!-- 推演结果 -->
    <el-aside width="278px" class="L_aside 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"
                  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="formInline.region" />
                </el-table>
              </div>
              <div class="xian" v-else>
                <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="水位(m)" />
                  <el-table-column prop="value2" label="流量" />
                </el-table>
              </div>
            </div>
          </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 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 timing2 = ref(null);
const percentage = ref(20);
const customColor = ref("#409eff");
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
};
const formInline = ref({
  region: "shanghai",
});

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逗号分隔
});
//选择结果存储
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);
  // 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() {
  chengeMonitor();
  vtkShow();
}
// aid获取
const accident5 = (val) => {
  aid.value = val;
  // console.log(aid.value);
  // console.log("props.classradio", props.classradio);
  if (props.classradio == "Fire") {
    monitor.value = true;
  } else if (props.classradio == "Water") {
    monitor.value = true;
  }
  cocodeIsInit.value = false;
  //获取任务信息
  readJob();

  if (resultactiveName.value == "first") {
    timing.value = setInterval(() => {
      const timestamp = new Date().getTime();
      newtime.value = timestampToTime(timestamp);
      reddate(new Date());
    }, 1000);
  } else {
    timing.value = setInterval(() => {
      const timestamp = new Date().getTime();
      newtime.value = timestampToTime(timestamp);
    }, 1000);
  }

  // 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;
          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(() => {//定时器
      //  console.log("pointid",vtkmodel.selectJgPointId);//选择的点数据
       //获取点对应的Scalar
      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)
  }, 1000);
}
//获取任务信息
async function readJob() {
  vtkmodel.clearModeAddJg(); //隐藏模版显示结果
  const params = {
    transCode: "D10017",
    aid: aid.value,
  };
  await request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        //成功
        job.value = res;
        reddate(new Date());
        getMonitor();
        vtkGridRead();
        jgSelect();
      } else {
        ElMessage({
          message: res.returnMsg,
          type: "error",
        });
      }
    })
    .catch((err) => {});
}
//获取当前时间最近的步数 读取文件
//当前时间=开始时间+输出步长*输出次数
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 vtkScalarRead() {
  fcon
    .getScalrsByStep(fcon.step)
    .then((result) => {
      // console.log(fcon.scalar);
      vtkShow();
    })
    .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);
  const scalarArray = fcon.scalar.get(formInline.value.region);
  // 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);

  mapper.setInputData(fcon.polydata);
  getMinMax(scalarArray);
  mapper.setScalarRange(min.value, max.value); //设置范围
  // actor.setMapper(mapper);
  scalarBarActor.setAxisLabel(formInline.value.region);
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面

  // vtkmodel.renderer.resetCamera();
  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) => {
  console.log(Tab.props.name);
  if (Tab.props.name == "first") {
    timing.value = setInterval(() => {
      const timestamp = new Date().getTime();
      newtime.value = timestampToTime(timestamp);
      reddate(new Date());
    }, 1000);
  } else if (Tab.props.name == "second") {
    clearInterval(timing.value);
  } else if (Tab.props.name == "third") {
    clearInterval(timing.value);
  }
};
onBeforeUnmount(() => {
  clearInterval(timing.value);
});
onMounted(() => {});

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

.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: fixed;
  right: 0;
  top: 70px;
  background-color: rgba(13, 22, 57, 0.6);
  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.2) !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;
}

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

.he_pading {
  padding: 20px 0 0 21px;
}

.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 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: 22px;
  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;
}
.woter {
  margin-top: -15px;
}
.result1 .el-collapse-item__content {
  padding: 0 !important;
}
</style>