20240301

src/control/fireControl.js

@@ -10,16 +10,18 @@ export class fireControl {
         //总步数
         this.stepsum=10;
         //url
-        this._url ="http://192.168.0.131:8187/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&userId=5f06c8bc77234f969d13e160b54c27e3&aid=5&stype=Fire";
+        this._url ="http://192.168.0.131:8187/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&userId=5f06c8bc77234f969d13e160b54c27e3&aid=";
         //几何数据
         this.polydata;
         //Scalars 数据 array[setp]=Map(scalars,value[points]=array),
         this.scalars=new Array();
+        this.scalar=new Map();
         this.reader =vtkUnstructuredDataReader.newInstance();
     }
     //几何数据初始化
    async initGemetry() {
-    await this.reader.setUrl(this._url+"&transCode=D000014" ).then(() => {
+    const url =this._url+this.aid+"&transCode=D000014";
+    await this.reader.setUrl(url).then(() => {
             this.polydata= this.reader.getOutputData(0);
         });
     }
@@ -35,9 +37,10 @@ export class fireControl {
     //获取第几步标量数据
     async getScalrsByStep(step){
         this.step =step;
-        this.reader.setUrl(this._url+"&transCode=D00009&step="+ this.step ).then(() => {
+        const url =this._url+this.aid+"&transCode=D00009&step="+ this.step;
+        await  this.reader.setUrl(url).then(() => {
             const scalarMap = this.reader.getOutputData(1);
-            this.scalars[step]=scalarMap;
+            this.scalar=scalarMap;
         });
     }
     

src/reader/LegacyAsciiParser.js

@@ -145,7 +145,7 @@ function parseLegacyASCII(content) {
   const separator = separatorRes !== null ? separatorRes[0] : null;
   content.split(separator).forEach((line, index) => {
     
-    if (index < 2) {
+    if (index < 0) {
       return;
     }
     if (!parser) {

src/view/components/tanimation.vue

@@ -1,912 +1,1070 @@
 <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">{{newtime}}</div></el-tab-pane>
-    <el-tab-pane label="动画演示" name="third">
-        <div class="animation_s">
-        <el-slider
-              :max="endtime"
-              :min="starttime"
-            ></el-slider>
-            <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
-            <div class="tanniu">
+  <!-- 所有弹出框 -->
+  <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">{{ newtime }}</div></el-tab-pane
+          >
+          <el-tab-pane label="动画演示" name="third">
+            <div class="animation_s">
+              <el-slider :max="endtime" :min="starttime"></el-slider>
+              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
+              <div class="tanniu">
                 <ul>
-                    <li> <el-image :src="t1" fit="contain" ></el-image><p>后退</p></li>
-                    <li> <el-image :src="t2" fit="contain" ></el-image><p>播放</p></li>
-                    <li> <el-image :src="t3" fit="contain" ></el-image><p>暂停</p></li>
-                    <li> <el-image :src="t4" fit="contain" ></el-image><p>快进</p></li>
+                  <li>
+                    <el-image :src="t1" fit="contain"></el-image>
+                    <p>后退</p>
+                  </li>
+                  <li>
+                    <el-image :src="t2" fit="contain"></el-image>
+                    <p>播放</p>
+                  </li>
+                  <li>
+                    <el-image :src="t3" fit="contain"></el-image>
+                    <p>暂停</p>
+                  </li>
+                  <li>
+                    <el-image :src="t4" fit="contain"></el-image>
+                    <p>快进</p>
+                  </li>
                 </ul>
+              </div>
             </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" 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="date" label="监测点名称"  width="120" />
-        <el-table-column prop="name" label="水位(m)"  />
-        <el-table-column prop="name" label="流量(m³/s)"/>
-      </el-table>
-    </div>
-                </div>
-                <div class="jc_header color1">
-                    <span class="jc_tile">锋面定义</span>
-            </div>
-            <div style="height:200px"></div>
-            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
+    </el-aside>
+    <!-- 监测点 -->
+    <!-- 监测点 -->
+    <div class="l_Dialog">
+    <div class=" jiancedian asideg1" v-show="monitor">
+      <div class="jc_header he_pading color1">
+        <el-form-item label="污染物选择:">
+          <el-select v-model="formInline.region" 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="date" label="监测点名称" width="120" />
+              <el-table-column prop="name" label="水位(m)" />
+              <el-table-column prop="name" label="流量(m³/s)" />
+            </el-table>
+          </div>
+        </div>
+        <div class="jc_header color1">
+          <span class="jc_tile">锋面定义</span>
+        </div>
+        <div style="height: 200px"></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";
-    let emit= defineEmits([])
-    const props= defineProps({
-        classradio: {
-        type: String,
-        // default: '',
-    },
+    </div>
+    </div>
+  </div>
+</template>
 
- });
- 
-    const monitor = ref(false);
-    const strResultFormatlist = ref([
-      { id: 0, name: "灾情演化",value: ".vtk" },
-      { id: 1, name: "演化过程" ,value: ".mesh"},
-   ]);
-    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 isstop = ref(false);
-    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({
-  user: '11',
-  region: 'shanghai',
-  date: '',
-  
-})
+<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";
 
-    const tableData = ref([]);
-    const tableData2 = [
-      {
-       
-        date: '站点1',
-        name: '2',
-        address: '10',
-      },
-      {
-        date: '站点1',
-        name: '2',
-        address: '10',
-      },
-      {
-        date: '站点1',
-        name: '2',
-        address: '10',
-      },
-      {
-        date: '站点1',
-        name: '2',
-        address: '10',
-      },
-    
-    ]
-    const handleCurrentChange= ({row, rowIndex}) =>{
-      console.log(row);
-    }
-    // aid获取
-       const  accident5=(val)=>{
-      aid.value=val;
-        console.log(aid.value);
-        console.log(11111)
-    if(props.classradio=="Fire"){
-        monitor.value=true;
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
 
-    }else if(props.classradio=="Water"){
-        monitor.value=true;
-    }
-}
- 
+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";
 
-    const init=()=>{
- 
+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";
 
-   } 
-    onMounted(() => {
-        console.log()
-        init();
-        const timestamp = new Date().getTime();
-        timestampToTime(timestamp)
-        newtime.value= timestampToTime(timestamp);
-    });
-    
-    defineExpose({monitor,accident5});
-    </script>
-    <style lang="scss" scoped>
-    .jc_padding{
-        padding: 18px 10px;
-    }
-    .line{
-    border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
-    box-sizing: border-box;
-    }
-    .L_aside{
-    .iconimg{
-        width: 37px;
-        height: 36px;
-        margin:0 7px 0 24px;
-    }
-    .Frame2{
-        background-image: url(../assets/img/Frame2.png);
-        background-size: 100%;
-        background-position: center;
-    }
-    .Frame3{
-        background-image: url(../assets/img/Frame3.png);
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-    .el-collapse,.el-collapse-item__header{
+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();
+const renderer = renderWindowWith.getRenderer();
+// renderer.setBackground([0.1,0.2,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);//面
+
+
+
+let emit = defineEmits([]);
+const props = defineProps({
+  classradio: {
+    type: String,
+    // default: '',
+  },
+});
+
+const monitor = ref(false);
+const strResultFormatlist = ref([
+  { id: 0, name: "灾情演化", value: ".vtk" },
+  { id: 1, name: "演化过程", value: ".mesh" },
+]);
+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 isstop = ref(false);
+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({
+  user: "11",
+  region: "shanghai",
+  date: "",
+});
+
+const tableData = ref([]);
+const tableData2 = [
+  {
+    date: "站点1",
+    name: "2",
+    address: "10",
+  },
+  {
+    date: "站点1",
+    name: "2",
+    address: "10",
+  },
+  {
+    date: "站点1",
+    name: "2",
+    address: "10",
+  },
+  {
+    date: "站点1",
+    name: "2",
+    address: "10",
+  },
+];
+const handleCurrentChange = ({ row, rowIndex }) => {
+  console.log(row);
+};
+// aid获取
+const accident5 = (val) => {
+  aid.value = val;
+  console.log(aid.value);
+  console.log(11111);
+  if (props.classradio == "Fire") {
+    monitor.value = true;
+  } else if (props.classradio == "Water") {
+    monitor.value = true;
+  }
+  fireRead()
+};
+
+const init = () => {};
+onMounted(() => {
+  console.log();
+  init();
+  const timestamp = new Date().getTime();
+  timestampToTime(timestamp);
+  newtime.value = timestampToTime(timestamp);
+});
+
+const min = ref(0);
+const max = ref(1);
+function fireRead() {
+  var fcon = createFireControl();
+  fcon.aid=aid.value;
+  fcon
+    .initGemetry()
+    .then((result) => {
+        console.log(fcon.polydata);
+      fcon
+        .getScalrsByStep(1)
+        .then((result) => {
+         console.log(fcon.scalar);
+          const scalarArray = fcon.scalar.get("Pressure");
+          console.log("scalarArray:", scalarArray);
+          const dataArray = vtkDataArray.newInstance({ 
+            name: "Pressure",
+            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);
+          initScalarBar();
+          renderer.resetCamera();
+          renderWindow.render();
+        })
+        .catch((err) => {
+            console.log(err)
+        });
+    })
+    .catch((err) => {});
+}
+function initScalarBar() {
+  const scalarBarActor = vtkScalarBarActor.newInstance();
+  let lut = mapper.getLookupTable();
+  scalarBarActor.setScalarsToColors(lut);
+  // console.log("lut:", lut.getRange());
+  // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
+  scalarBarActor.setGenerateTicks(generateTicks(5));
+  scalarBarActor.setAxisLabel("Pressure");
+  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);
+  lut = mapper.getLookupTable();
+  scalarBarActor.setScalarsToColors(lut);
+  renderer.addActor(scalarBarActor);
+}
+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{
+    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;
+        color: rgba($color: #ffffff, $alpha: 0.8);
+      }
     }
-    .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;
+
+    .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;
-         }
-    }
-    .logs_pading{
-        padding: 13px 20px 23px 24px;
-    }
-    .newtime{
-        height: 112px;
-        padding: 38px;
-        font-weight: bold;
-        font-size: 20px;
-        color: #FF0F0F;
-        line-height: 23px;
-        text-align: center;
-        font-style: normal;
-        text-transform: none;
-    }
-    .animation_s{
-        padding: 25px;
-    }
-    .tanniu ul{
-        margin-top: 40px;
-    display: flex;
-    li{
-        flex: 1;
-        text-align: center;
-        p{
-            text-align: center;
-            font-weight: 400;
-            font-size: 12px;
-            color: #FFFFFF;
-            line-height: 14px;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
-    }
-    .jiancedian{
-        width:371px;
-        position: absolute;
-        right: 0;
-        top: 70px;
-     box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
-    }
-    </style>
-    <style>
-    /* //.bgcolor */
-    .bgcolor{
-        border-radius: 0px 0px 0px 0px;
-         border: 1px solid;
-         border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-         box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-    }
-    .dialog_class{
-            background-color: rgba(13, 22, 57, 0.96) !important;
-            width: 482px;
-    
-      
-          
-        }
-        .el-dialog__header,.el-dialog__body,.el-dialog__footer{
-    padding: 0 !important;
-    margin: 0 !important;
-        }
-    .el-dialog{
-        --el-dialog-padding-primary: 0px !important;
-        }
-    .el-dialog__headerbtn{
-        position: absolute;
-        top: 2px !important;
-        right: 0;
-        padding: 0;
-        width: 40px !important;
-        height: 40px !important;
-        background: 0 0;
-        border: none;
-        outline: 0;
-        cursor: pointer;
-        font-size: var(--el-message-close-size,16px);
-    }
-    .el-icon{
-        color: #68ADFF !important;
-    }
-    .l_btn .borderimg {
-        width: 109px;
-    height: 30px;
-    background: rgba(104,173,255,0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
-    
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
-    }
-    .l_btn .el-button{
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        color: #fff;
-        background: rgba(104,173,255,0.3);
-        border: 1px solid rgba(31, 107, 255, 1);
-    }
-    .class_footer{
-        position: absolute;
-        bottom: 17px;
-    }
-    .footer_div{
-        height: 90px;
-        padding: 30px 0;
-    }
-    .l_btn{
-                width: 100%;
-           
-                bottom: 17px;
-                display: flex;
-                border-radius: 4px;
-            
-            }
-            .el-table .el-table__cell{
-                padding: 0 !important;
-                height: 30px;
-        line-height: 30px;
-            }
-            /* .el-table tr,.el-table th.el-table__cell{
-                background-color: rgba(13, 22, 57, 0.96) !important;
-            } */
-            .el-table__row{
-                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-                border-radius: 0px 0px 0px 0px;
-                border: 1px solid;
-                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-            }
-            .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
-                /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
-    border-radius: 0px 0px 0px 0px;
-    border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
-    }   
-    .oddRow {
-        background-color:  rgba(104, 173, 255, 0.20)!important;
-    }
-    .evenRow {
-        background-color: rgba(13, 22, 57, 0.96) !important;
-    }
-    .my_content1 .el-table .cell{
-                font-weight: 400;
-                font-size: 12px;
-                color: #FFFFFF !important;
-                line-height: 14px;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-        }
-        .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before{
-            height: 0 !important;
-            background-color:rgba(red, green, blue,0) !important;
-        }
-        
-        .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
-        background-color:rgba(104,173,255,0) !important;
-    } 
-     .el-button:focus, .el-button:hover{
-        background: rgba(104, 173, 255, 1) !important;
-        font-weight: bold;
-        color: #000 !important;
-    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    }
-    .el-input__wrapper{
-     
-        height: 30px;
-        background: rgba(104,173,255,0.3) !important;
-    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2) !important;
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    }
-    .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;
+  }
+}
+.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;
-    font-style: normal;
-    text-transform: none;
-    }
-    .leftbgimg .el-collapse-item__header{
-        background-image: url(../../assets/img/Group10.png)!important; 
-    }
-    .asideg1 .jc_header{
-        width: 100%;
-        height: 52px;
-        line-height: 69px;
-        background-image: url(../../assets/img/Group24.png)!important; 
-        background-repeat: no-repeat;
-            background-position: center;
-    
-    }
-    .jc_tile{
-        padding-left: 20px;
-    }
-    .he_pading{
-        padding: 19px 14px 0 31px;
-    }
-    .asideg1  .el-form-item__label{
-        font-weight: 400;
-        font-size: 13px;
-        color: #FFFFFF;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-    .asideg .el-collapse{
-        --el-collapse-header-bg-color: none !important;
-    }
-    .asideg .el-collapse-item__arrow{
-        margin: 0 8px 0 auto;
-        font-weight: 800;
-        color: #fff !important;
-        font-weight: bold !important;
-        font-size: 20px !important;
-    }
-      .el-collapse-item__content{
-        background: rgba(13, 22, 57, 0.2);
-    }
-    .asideg .el-input__wrapper{
-        background: rgba(104,173,255,0) !important;
-        border:1px solid rgba(31, 107, 255, 1);
-        border-radius: 4px;
-        box-shadow:none !important;
-    }
-    .asideg .el-input__inner{
-        color:rgba(255, 15, 15, 1);
-        font-weight: 400;
-        font-size: 16px;
-    }
-    .el-collapse {
-        --el-collapse-header-bg-color:rgba(104,173,255,0) !important;
-        --el-collapse-header-text-color: var(--el-text-color-primary);
-        --el-collapse-header-font-size: 13px;
-        --el-collapse-content-text-color:rgba(104,173,255,0) !important;
-        --el-collapse-content-bg-color:rgba(104,173,255,0) !important;
-    }
-    .asideg .el-collapse-item__content{
-    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;
+    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; 
-    }
-    #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 .el-tabs__item{
-        padding:17px !important;
-        font-weight: bold;
-        font-size: 14px;
-        color: #FFFFFF;
-        line-height: 16px;
-        text-align: center;
-        font-style: normal;
-        text-transform: none;
-    }
-    .el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header,.el-tabs--card>.el-tabs__header .el-tabs__nav{
-        border: none !important;
-    }
-    .el-tabs{
-        --el-tabs-header-height: 70px  !important;
-    }
-    .result .el-tabs__item{
-        border-left: 1px solid;
-        border-right: 1px solid;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
+    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: 14px;
-    color: #fff;
-    line-height: 23px;
-    text-align: center;
-    font-style: normal;
-    text-transform: none;
-    }
-    .result .is-active{
-        height: 70px;
-        background:radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
-        border-radius: 0px 0px 0px 0px;
-         border: 2px solid;
-         color:rgba(255, 15, 15, 1) !important;
-        border-left: 1px solid rgba(16, 92, 240, 1);
-        border-right: 1px solid rgba(18, 48, 102, 1);
-         border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
-    }
-    .result .el-tabs__item:hover {
-        color:rgba(255, 15, 15, 1);
-        cursor: pointer;
-    }
-    .result .el-tabs__header{
-    padding: 0 !important;
-    margin: 0 !important;
-    }
-    .result .el-tabs__content{
-        border: 1px solid;
-         color:rgba(255, 15, 15, 1) !important;
-         border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
-         box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-        position: relative;
-    }
-    .result .el-tabs__content{
-        width: 275px;
-    }
-    .el-slider__button{
-        height: 10px;
-        width: 10px;
-    
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+      }
+    }
+  }
+  .el-dialog__footer {
+    position: absolute;
+    bottom: 17px;
+    display: flex;
+    .footerbtn {
+      flex: 1;
+      text-align: center;
     }
-    .color1{
-        font-weight: 400;
-    font-size: 13px;
-    color: #FFFFFF;
+  }
+}
+.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;
-    }
-    
-    .jc_padding .el-table tr{
-        height:40px;
-        background-color: none;
-    
-    
-    }
-    .jc_padding .el-table .cell{
-        font-weight: 400;
+  }
+}
+.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;
+    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>
+  }
+}
+.logs_pading {
+  padding: 13px 20px 23px 24px;
+}
+.newtime {
+  height: 112px;
+  padding: 38px;
+  font-weight: bold;
+  font-size: 20px;
+  color: #ff0f0f;
+  line-height: 23px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+}
+.animation_s {
+  padding: 25px;
+}
+.tanniu ul {
+  margin-top: 40px;
+  display: flex;
+  li {
+    flex: 1;
+    text-align: center;
+    p {
+      text-align: center;
+      font-weight: 400;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 14px;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}
+.jiancedian {
+  width: 371px;
+  position: absolute;
+  right: 0;
+  top: 70px;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+</style>
+<style>
+/* //.bgcolor */
+.bgcolor {
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+}
+.dialog_class {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+  width: 482px;
+}
+.el-dialog__header,
+.el-dialog__body,
+.el-dialog__footer {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.el-dialog {
+  --el-dialog-padding-primary: 0px !important;
+}
+.el-dialog__headerbtn {
+  position: absolute;
+  top: 2px !important;
+  right: 0;
+  padding: 0;
+  width: 40px !important;
+  height: 40px !important;
+  background: 0 0;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+  font-size: var(--el-message-close-size, 16px);
+}
+.el-icon {
+  color: #68adff !important;
+}
+.l_btn .borderimg {
+  width: 109px;
+  height: 30px;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border: 1px solid rgba(31, 107, 255, 1); */
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  box-sizing: border-box;
+}
+.l_btn .el-button {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  color: #fff;
+  background: rgba(104, 173, 255, 0.3);
+  border: 1px solid rgba(31, 107, 255, 1);
+}
+.class_footer {
+  position: absolute;
+  bottom: 17px;
+}
+.footer_div {
+  height: 90px;
+  padding: 30px 0;
+}
+.l_btn {
+  width: 100%;
+
+  bottom: 17px;
+  display: flex;
+  border-radius: 4px;
+}
+.el-table .el-table__cell {
+  padding: 0 !important;
+  height: 30px;
+  line-height: 30px;
+}
+/* .el-table tr,.el-table th.el-table__cell{
+                background-color: rgba(13, 22, 57, 0.96) !important;
+            } */
+.el-table__row {
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+.oddRow {
+  background-color: rgba(104, 173, 255, 0.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: 69px;
+  background-image: url(../../assets/img/Group24.png) !important;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.jc_tile {
+  padding-left: 20px;
+}
+.he_pading {
+  padding: 19px 14px 0 31px;
+}
+.asideg1 .el-form-item__label {
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.asideg .el-collapse {
+  --el-collapse-header-bg-color: none !important;
+}
+.asideg .el-collapse-item__arrow {
+  margin: 0 8px 0 auto;
+  font-weight: 800;
+  color: #fff !important;
+  font-weight: bold !important;
+  font-size: 20px !important;
+}
+.el-collapse-item__content {
+  background: rgba(13, 22, 57, 0.2);
+}
+.asideg .el-input__wrapper {
+  background: rgba(104, 173, 255, 0) !important;
+  border: 1px solid rgba(31, 107, 255, 1);
+  border-radius: 4px;
+  box-shadow: none !important;
+}
+.asideg .el-input__inner {
+  color: rgba(255, 15, 15, 1);
+  font-weight: 400;
+  font-size: 16px;
+}
+.el-collapse {
+  --el-collapse-header-bg-color: rgba(104, 173, 255, 0) !important;
+  --el-collapse-header-text-color: var(--el-text-color-primary);
+  --el-collapse-header-font-size: 13px;
+  --el-collapse-content-text-color: rgba(104, 173, 255, 0) !important;
+  --el-collapse-content-bg-color: rgba(104, 173, 255, 0) !important;
+}
+.asideg .el-collapse-item__content {
+  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 .el-tabs__item {
+  padding: 17px !important;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 16px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+}
+.el-tabs--card > .el-tabs__header,
+.el-tabs--card > .el-tabs__header,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none !important;
+}
+.el-tabs {
+  --el-tabs-header-height: 70px !important;
+}
+.result .el-tabs__item {
+  border-left: 1px solid;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #fff;
+  line-height: 23px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+}
+.result .is-active {
+  height: 70px;
+  background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
+  border-radius: 0px 0px 0px 0px;
+  border: 2px solid;
+  color: rgba(255, 15, 15, 1) !important;
+  border-left: 1px solid rgba(16, 92, 240, 1);
+  border-right: 1px solid rgba(18, 48, 102, 1);
+  border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+}
+.result .el-tabs__item:hover {
+  color: rgba(255, 15, 15, 1);
+  cursor: pointer;
+}
+.result .el-tabs__header {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.result .el-tabs__content {
+  border: 1px solid;
+  color: rgba(255, 15, 15, 1) !important;
+  border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  position: relative;
+}
+.result .el-tabs__content {
+  width: 275px;
+}
+.el-slider__button {
+  height: 10px;
+  width: 10px;
+}
+.color1 {
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 14px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.jc_padding .el-table tr {
+  height: 40px;
+  background-color: none;
+}
+.jc_padding .el-table .cell {
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 14px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.tianjia .el-dialog__body {
+  padding: 20px !important;
+}
+.tianjia .el-form-item__label {
+  color: #fff;
+}
+.tianjia .el-input__inner {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  padding: 20px 0;
+  height: 30px;
+  line-height: 47px;
+}
+.ddd_div .el-input__inner {
+  color: #fff;
+}
+.pagination {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+.pagination .el-pagination__total {
+  color: #fff;
+}
+.el-pagination.is-background .btn-next.is-disabled,
+.el-pagination.is-background .btn-next:disabled,
+.el-pagination.is-background .btn-prev.is-disabled,
+.el-pagination.is-background .btn-prev:disabled,
+.el-pagination.is-background .el-pager li.is-disabled,
+.el-pagination.is-background .el-pager li:disabled {
+  background: rgba(104, 173, 255, 0.3) !important;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+.delecttitle {
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+}
+</style>