disaster/src/view/components/tanimation.vue

<template>
  <!-- 所有弹出框 -->
  <div class="l_Dialog">
    <!-- 推演结果 -->
    <el-aside width="278px" class="L_aside asideg asidegbg leftbgimg" v-show="monitor">
      <div class="result">
        <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="jiancedian asideg1" v-show="monitor">
      <div class="jc_header he_pading color1">
        <el-form-item label="污染物选择:">
          <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>
      <div class="jc_content tablecolor">
        <div class="jc_padding">
          <div class="xian">
            <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="监测点名称" width="120" />
              <el-table-column prop="value" label="值" />
            </el-table>
          </div>
        </div>
        <div class="jc_header color1">
          <span class="jc_tile">锋面定义</span>
        </div>
        <div style="height: 200px"></div>
      </div>
    </div>
  </div>
</template>

<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 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 * as d3 from "d3-scale";
import { formatDefaultLocale } from "d3-format";

import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkUnstructuredDataReader from "../../reader/UnstructuredDataReader.js";
import { createFireControl } from "../../control/fireControl.js";
import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
import vtkLookupTable from "@kitware/vtk.js/Common/Core/LookupTable";
import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
import { I } from "@kitware/vtk.js/macros2.js";
import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";

import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
import vtkSphereMapper from "@kitware/vtk.js/Rendering/Core/SphereMapper";
import vtkPixelSpaceCallbackMapper from "@kitware/vtk.js/Rendering/Core/PixelSpaceCallbackMapper";
import vtkSphereSource from "@kitware/vtk.js/Filters/Sources/SphereSource";

import vtkAxesActor from "@kitware/vtk.js/Rendering/Core/AxesActor";
import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";
import vtk2DShape from "@kitware/vtk.js/Filters/Sources/Arrow2DSource";
import vtkTriangleFilter from "@kitware/vtk.js/Filters/General/TriangleFilter";

const renderWindowWith = vtkFullScreenRenderWindow.newInstance();
// renderWindowWith.setBackground(22, 26, 42);
const renderer = renderWindowWith.getRenderer();
// renderer.setBackground(0, 0, 0);
const renderWindow = renderWindowWith.getRenderWindow();
const resetCamera = renderer.resetCamera;
const render = renderWindow.render;
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
const reader = vtkUnstructuredDataReader.newInstance();
const scalarBarActor = vtkScalarBarActor.newInstance();
actor.getProperty().setRepresentation(Representation.SURFACE); //面

scalarBarActor.setGenerateTicks(generateTicks(5));
scalarBarActor.setDrawAboveRangeSwatch(true);
//修改设条颜色
const ctf = vtkColorTransferFunction.newInstance();
ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
mapper.setLookupTable(ctf);
const lut = mapper.getLookupTable();
scalarBarActor.setScalarsToColors(lut);
renderer.addActor(scalarBarActor);

let emit = defineEmits([]);
const props = defineProps({
  classradio: {
    type: String,
    // default: '',
  },
});

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();
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 zdtime = ref("");
const chvals = ref([]);
const cocodes = ref([]);
const cocodeIndex = ref(0);
//滑块
function sliderchange(val) {
  fcon.step = count.value;
  vtkScalarRead();
}
//播放
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;
        vtkScalarRead();
      }
    }
  };
  timer(time);
}
function increment() {
  isstop.value = false;
  if (count.value == endtime.value) {
    return;
  }
  count.value++;
  fcon.step = count.value;
  vtkScalarRead();
}
//暂停
function suspend() {
  isstop.value = false;
}
//回到上一页
function Prev() {
  isstop.value = false;
  count.value--;
  fcon.step = count.value;
  vtkScalarRead();
}

function zdtimechange() {
  const zdtimestamp = Date.parse(zdtime.value);
  const zdtimeDate = new Date(zdtimestamp);
  reddate(zdtimeDate);
  vtkScalarRead();
}
function regionchange() {
  for (let index = 0; index < cocodes.value.length; index++) {
    if (formInline.value.region == cocodes.value[index].cocode) {
      cocodeIndex.value = index + 1;
      break;
    }
  }
  tableData2.value = [];
  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,
      });
    }
  }
  vtkShow();
}
// aid获取
const accident5 = (val) => {
  aid.value = val;
  console.log(aid.value);
  console.log(11111);
  console.log("props.classradio", props.classradio);
  if (props.classradio == "Fire") {
    monitor.value = true;
  } else if (props.classradio == "Water") {
    monitor.value = true;
  }
  //获取任务信息
  readJob();
  // fireRead()
};

const init = () => {};
onMounted(() => {
  init();
});
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") {
        cocodes.value = res.cocodes;
        chvals.value = res.chvals;
        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,
          });
        }
        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,
          });
        }
        vtkGridRead();
      } else {
        ElMessage({
          message: res.returnMsg,
          type: "error",
        });
      }
    })
    .catch((err) => {});
}
//获取任务信息
async function readJob() {
  const params = {
    transCode: "D10017",
    aid: aid.value,
  };
  await request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        //成功
        job.value = res;

        reddate(new Date());
        getMonitor();
      } 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;
}

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(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);
  renderer.addActor(actor);
  scalarBarActor.setAxisLabel(formInline.value.region);
  mapper.clearColorArrays(); //强制重建颜色
  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  renderer.resetCamera();
  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);
}
//设置
function generateTicks(numberOfTicks) {
  return (helper) => {
    const lastTickBounds = helper.getLastTickBounds();
    // compute tick marks for axes
    const scale = d3
      .scaleLinear()
      .domain([0.0, 1.0])
      .range([lastTickBounds[0], lastTickBounds[1]]);
    const samples = scale.ticks(numberOfTicks);
    const ticks = samples.map((tick) => scale(tick));
    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
    formatDefaultLocale({ minus: "\u002D" });
    const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks);
    const tickStrings = ticks
      .map(format)
      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
    helper.setTicks(ticks);
    helper.setTickStrings(tickStrings);
  };
}

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%;
}
.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%;
  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;
}
.asideg1 .jc_header {
  width: 100%;
  height: 52px;
  line-height: 52px;
  background-image: url(../../assets/img/Group24.png) !important;
  background-repeat: no-repeat;
  background-position: center;
}
.jc_tile {
  padding-left: 20px;
}
.he_pading {
  padding: 11px 0 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 {
  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;
}
</style>