disaster/src/view/components/Sourcedisaster.vue

<template>
  <!-- 所有弹出框 -->
    <div class="l_Dialog" >
    <!--火灾左侧栏-->
    <div class="common-layout" style="margin: 0;"> 
        <el-aside width="354px" class="L_aside asideg asidegbg leftbgimg1"  v-show="sour.collfire">
          <div class="demo-collapse">
      <el-collapse v-model="coolactiveName1" accordion >
        <el-collapse-item  name="1">
          <template #title>
              <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
            火灾<el-icon class="header-icon">
              <info-filled />
            </el-icon>
          </template>
          <div class="asides_content">
              <div class="jc_content tablecolor">
           
          <div class="jc_padding">
              <div class="xian btncolor tablefocus" >
           
                      <el-table
              :data="tableDatay"
              style="width: 100%"
              @row-click="handleDelete($event)"
              :row-class-name="tableRowClassName"
              max-height="350px"
              :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
              :highlight-current-row="true"
              >
          <el-table-column prop="pname" label="选择巷道" width="130" />
          <el-table-column prop="site" label="位置" width="70" />
          <el-table-column label="操作" width="100">
       <template #default="scope">
         <el-button
           size="small"
           type="success"
           @click.stop="handledetection(scope.$index, scope.row)"
           >查看</el-button
         >
        
       </template>
     </el-table-column>
      </el-table>
      <div class="asdis_btn">
      <div class="flex_a" @click="newtable();sdialog.dianadddialog=true"><div class="btns"><span class="spantext">添加</span></div></div>
      <div class="flex_a" @click="shanchu('1');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
  </div>
      </div>
              <!--  -->
              <div class="xian tablefocus" style="margin-top: 20px;" v-show="sdialog.isDisasterfire">
              <div class="header_l header_z">
      <el-image :src="icon" fit="contain" ></el-image> 
      <h4  class="tianjia"> 灾害源表</h4>
      <div class="closeimg"><el-image :src="closeimg" fit="contain" ></el-image></div>
  </div>   
          <el-table
              :data="tableDatafir"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
              :max-height="tableHeight"
              @row-click="handleDelete2($event)"
              :highlight-current-row="true"
              >
          <el-table-column prop="timeline" label="时间" width="70" />
          <el-table-column prop="val1" label="温度℃" width="70" />
          <el-table-column prop="val2" label="污染物1浓度" width="100" />
          <el-table-column prop="val2" label="污染物2浓度" width="100" />
      </el-table>
    <div class="asdis_btn">
      <div class="flex_a" @click="firinit();sdialog.adddialog=true"><div class="btns"><span class="spantext">添加</span></div></div>
      <div class="flex_a" @click="shanchu('2');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
  </div>

      </div>
          </div>
          
      <div style="height:200px"></div>
      </div>

          </div>
      
        </el-collapse-item>
      </el-collapse>
  </div>
  </el-aside>
  <el-aside width="354px" class="L_aside asideg asidegbg leftbgimg1" v-show="sour.collwater">
          <div class="demo-collapse">
      <!-- 突水 sour.collwater-->
      <el-collapse v-model="coolactiveName1" accordion  >
        <el-collapse-item  name="1">
          <template #title>
              <el-icon class="iconimg Frame3" fit="contain" ></el-icon>  
            突水<el-icon class="header-icon">
              <info-filled />
            </el-icon>
          </template>
          <div class="asides_content">
              <div class="jc_content tablecolor">
           
          <div class="jc_padding">
              <div class="xian btncolor tablefocus" >
           
                      <el-table
              :data="tableDatawat"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
              @row-click="handleDelete($event)"
              max-height="350px"
              :highlight-current-row="true"
              >
          <el-table-column prop="pname" label="选择巷道" width="130" />
          <el-table-column prop="site" label="位置" width="70" />
          <el-table-column label="操作" width="100">
       <template #default="scope">
         <el-button
           size="small"
           type="success"
           @click.stop="handledetection2(scope.$index, scope.row)"
           >查看</el-button
         >
        
       </template>
     </el-table-column>
      </el-table>
      <div class="asdis_btn">
      <div class="flex_a" @click="newtable();sdialog.dianadddialog=true"><div class="btns"><span class="spantext">添加</span></div></div>
      <div class="flex_a" @click="shanchu('1');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
  </div>
      </div>
              <!-- 灾害源表 -->
              <div class="xian tablefocus" style="margin-top: 20px;" v-show="sdialog.disDisasterwter">
              <div class="header_l header_z">
      <el-image :src="icon" fit="contain" ></el-image>
      <h4  class="tianjia">灾害源表</h4>
      <div class="closeimg" @click="sdialog.disDisasterwter"><el-image :src="closeimg" fit="contain" ></el-image></div>
  </div>   
                      <el-table
              :data="tableData4"
              style="width: 100%"
               :max-height="tableHeight" 
              :row-class-name="tableRowClassName"
              :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
              @row-click="handleDelete3($event)"
              :highlight-current-row="true"
              >
          <el-table-column prop="timeline" label="时间"  />
          <el-table-column prop="val1" label="突水量（m³/s）" />
      </el-table>
      <div class="asdis_btn">
      <div class="flex_a" @click="firinit();sdialog.adddwater=true"><div class="btns"><span class="spantext">添加</span></div></div>
      <div class="flex_a" @click="shanchu('2');sdialog.dialogsgdelect=true"><div class="btns"><span class="spantext">删除</span></div></div>
      <div class="flex_a"><div class="btns"><span class="spantext">确定</span></div></div>
  </div>
      </div>
          </div>
          
      <div style="height:200px"></div>
      </div>

          </div>
      
        </el-collapse-item>
      </el-collapse>
    </div>
        </el-aside>
    </div>
     <!-- 灾害点源数据的添加-->
     <el-dialog v-model="sdialog.dianadddialog" width="400"  class="dialog_class bgcolor tianjia">
          <template #header="{titleId, titleClass }">
          <div class="my-header ">
              <el-image :src="icon" fit="contain" ></el-image>
              <h4 :id="titleId" :class="titleClass">添加</h4>

          </div>
          </template>
          <div class="demo-input-suffix firsttitle magintop">
       <el-form-item label="管道名称" :label-width="formLabelWidth5">
          <el-input  v-model="selectstr"
              class="w-50 m-2"
              placeholder="管道名称"
              :prefix-icon="Search"   />
          </el-form-item>
          <div class="btn2">
          <el-button type="primary"  @click="fireclick();sdialog.dialogVisiblenode=true">选择管道</el-button></div>
          </div>
          <div class="input">
          <el-form-item label="位置" :label-width="formLabelWidth5">
              <el-input-number v-model="source.site" :min="0" :max="1" 
              :precision="2" :step="0.1"
              controls-position="right"
              class="w-50 m-2"
              placeholder="位置"
              />
          </el-form-item>
          </div>
          <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.dianadddialog=false">取消</el-button></div></div>
              <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="handleEditfire(); sdialog.dianadddialog=false">
          确定
              </el-button></div></div>
          </div>
      </el-dialog>
      <!-- 选择管道 -->
      <el-dialog
     v-model="sdialog.dialogVisiblenode"
     width="50%"
     class="dialog_class bgcolor tianjia asideg asidegbg leftbgimg"
   >
   <template #header="{titleId, titleClass }">
          <div class="my-header ">
              <el-image :src="icon" fit="contain" ></el-image>
              <h4 :id="titleId" :class="titleClass"> 选择管道</h4>

          </div>
          </template>
   <div class="demo-input-suffix firsttitle leftbgimg2">
      <div class="guand_1">
         <el-form-item label="节点选择" :label-width="formLabelWidth5">
       <el-input  v-model="searchtaggd"
         class="w-50 m-2"
         placeholder="管道名称"
         :prefix-icon="Search"   />
     </el-form-item>
     <div class="asdis_btn">
      <div class="flex_a"><div class="btns"  @click="searchgd"><span class="spantext">搜索</span></div></div>
  </div>
     <!-- <div class="btn2">
     <el-button type="success" @click="searchgd">搜索</el-button></div> -->
  </div>
     <!-- <div class="btn2">
     <el-button type="success">导入</el-button></div>
   </div> -->
   <el-table
      :row-class-name="tableRowClassName"
      :max-height="tableHeight"
     ref="multipleTableRef"
     :data="tableData2"
     style="width: 100%"
     @selection-change="handleSelectionChange"
     @select="projectsSelectionSelect"
     :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
   >
     <el-table-column type="selection" width="55" />
     <el-table-column property="snId" label="开始节点"/>
     <el-table-column property="enId" label="结束节点"/>
     <el-table-column property="id" label="编号" width="70"/>
     <el-table-column property="name" label="名称" width="70"/>
     <el-table-column property="sectionType" label="截面类型" width="120"/>
     <el-table-column property="roughCoe" label="粗糙系数"/>
     <el-table-column property="sectionPara1" label="截面参数1" width="90"/>
     <el-table-column property="sectionPara2" label="截面参数2" width="90" />
     <el-table-column property="sectionPara3" label="截面参数3" width="90"/>
     <el-table-column property="sectionPara4" label="截面参数4" width="90"/>
     <el-table-column property="sectionPara5" label="截面参数5" width="90"/>
     
   </el-table>
     <div class="demo-pagination-block" style="margin-top: 20px;">
  <el-pagination
  v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
  small
  background
  layout="prev, total,pager, next, jumpe,"      
  :total="parseInt(total)"
  class="mt-4"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
</div>
       <div class="dialog-footer footer_div l_btn">
      <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.dialogVisiblenode">取消</el-button></div></div>
      <div class="footerbtn flex1"><div class="borderimg"><el-button @click="queding();sdialog.dialogVisiblenode = false">
     确定
      </el-button></div></div>
    </div>
   </div>
   </el-dialog>
 <!-- 灾害火灾源检测数据的添加-->
      <el-dialog v-model="sdialog.adddialog" width="400"   class="dialog_class bgcolor tianjia">
          <template #header="{titleId, titleClass }">
          <div class="my-header ">
              <el-image :src="icon" fit="contain" ></el-image>
              <h4 :id="titleId" :class="titleClass">添加</h4>

          </div>
          </template>
          <div>
    <el-form>
    <el-form-item label="时间" :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.timeline" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
     <el-form-item label="温度℃"  :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.val1" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
     <el-form-item label="污染物1浓度"  :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.val2" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
     <el-form-item label="污染物2浓度"  :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.val3" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
  
    </el-form>
  </div>
          <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.adddialog=false">取消</el-button></div></div>
              <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="addjiancf();sdialog.adddialog=false">
          确定
              </el-button></div></div>
          </div>
      </el-dialog>
       <!-- 灾害源突水检测数据的添加-->
       <el-dialog v-model="sdialog.adddwater" width="400"   class="dialog_class bgcolor tianjia">
          <template #header="{titleId, titleClass }">
          <div class="my-header ">
              <el-image :src="icon" fit="contain" ></el-image>
              <h4 :id="titleId" :class="titleClass">添加</h4>

          </div>
          </template>
          <div>
    <el-form>
    <el-form-item label="时间" :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.timeline" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
     <el-form-item label="突水量（m³/s）"  :label-width="formLabelWidth6">
       <el-input  v-model="Disastersource.val1" class="w-50 m-2"  placeholder="请输入"  />
     </el-form-item>
    </el-form>
  </div>
          <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.adddwater=false">取消</el-button></div></div>
              <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="addjiancf();sdialog.adddwater=false">
          确定
              </el-button></div></div>
          </div>
      </el-dialog>
      <!-- 删除 -->
      <el-dialog v-model="sdialog.dialogsgdelect" width="400"  class="dialog_class bgcolor tianjia">
          <template #header="{titleId, titleClass }">
          <div class="my-header ">
              <el-image :src="icon" fit="contain" ></el-image>
              <h4 :id="titleId" :class="titleClass">删除框</h4>
          
          </div>
          </template>
              <h4 class="delecttitle"> 是否确认删除 <span class="spanclad">{{zqname }}</span></h4>
          <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.dialogsgdelect=false">取消</el-button></div></div>
              <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="fundeledata();sdialog.dialogsgdelect=false">
          确定
              </el-button></div></div>
          </div>
      </el-dialog>
    </div>
  </template>
      <script setup>
      import { computed,ref,onMounted,reactive, toRef } from "vue";
      import { request, uploadFile } from "@/utils/request";
      import icon from "@/assets/img/icon.png";
      import closeimg from "@/assets/img/colse.png";
      import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
  import { c } from "@kitware/vtk.js/macros2";
      const props= defineProps({
          classradio: {
          type: String,
      },
      aid:{
          type: String,
      }
  
  
   });
   const sdialog=ref({
      adddialog:false,
      dialogsgdelect:false,
      dianadddialog:false,
      dialogVisiblenode:false,
      isDisasterfire:false,
      isDisasterwter:false,
      adddwater:false,
   })
   let selectstr=ref('');
   const currentPage4 = ref(1);
  const pageSize4 = ref(5)
  const tableDatawat = ref([]);
  const tableDatafir= ref([])
  const dialogVisible = ref(true);
  const sour = ref({
      collfire:false,
      collwater:false,
  });
  let firepid=ref("");
  let svid=ref("");
  let firesid=ref("");
  let searchtaggd=ref("");
  let total=ref(1);
  let gdadd=ref("0");
  let jcadd=ref();
  let tableHeight=ref(300)
  const multipleTableRef = ref()
  const multipleSelection = ref([])
  const formLabelWidth5=ref(77);
  const formLabelWidth6=ref(120);
  let source=reactive({pname:"",site:0.1})
  let Disastersource=ref({
      svid:0,
      timeline:'',
      val1:'',
      val2:'',
      val3:'',
      val4:'',
       })

   const tableData2= ref([])
  let aid=ref();
  let biaoid= ref();
  let coolactiveName1=ref(["1","2"]);
  let zqname=ref('');
  const tableRowClassName = ({row, rowIndex}) =>{
      if (rowIndex%2 != 0) {
          return 'evenRow';
      }
      return 'oddRow';
    
  }
  const tableData = [
    {
      id:1,
      date: '01',
      name: '首次火灾事故',
      address: 'No. 189, Grove S',
    },
    {
      id:2,
      date: '02',
      name: 'T首次火灾事故om',
      address: 'No. 189, Grove St',
    },
    {
      id:3,
      date: '03',
      name: '首次火灾事故',
      address: 'No. 189, Grove St ',
    },
  
  ]
  const tableDatay = ref([
    {
     
      date: '15.30',
      name: '35',
      address: '20%',
      address2: '10%',
    },
    {
     
     date: '15.30',
     name: '35',
     address: '20%',
     address2: '10%',
   },
   {
     
     date: '15.30',
     name: '35',
     address: '20%',
     address2: '10%',
   },
     {
     
     date: '15.30',
     name: '35',
     address: '20%',
     address2: '10%',
   },
  
  ])
  const tableData4=ref([]);
  const  accident3=()=>{
      console.log(props.classradio);
      if(props.classradio=="Fire"){
          sour.value.collfire=true;
  
      }else if(props.classradio=="Water"){
          sour.value.collwater=true;
      }
  }
  //灾情源查询列表
  const handledisaster=(aidval)=>{
      aid.value=aidval;
      const params = {
          transCode: 'D00005',
          aid:aid.value,
          }
          request(params)
            .then((res) => { 
              if(props.classradio=='Fire'){
                tableDatay.value=res.rows
              }else{
                tableDatawat.value=res.rows
              }
            ;
            })
            .catch((err) => {
              ElMessage.error(err.returnMsg)
            })
  }
  // 灾情源添加
  const  fireadd=()=>{
    const params = {
          transCode: 'D00004',
          pid:firepid.value,
          aid:aid.value,
          stype:props.classradio,
          site:source.site,
          }
          request(params)
            .then((res) => { 
              ElMessage({
              message: res.returnMsg,
              type: 'success',
            })
            handledisaster(aid.value)
            })
            .catch((err) => {
            })
  }
  //灾情源添加清空
    const  firinit=()=>{
   Disastersource.value.timeline=''
   Disastersource.value.val1=''
   Disastersource.value.val2=''
   Disastersource.value.val3=''
    Disastersource.value.val4=''

  }
  //添加保存
   const  handleEditfire=()=>{
      if(gdadd.value=='1'){
        fireadd()
        sdialog.value.dianadddialog=false; 
      //   waaddshow.value=false;  
     }else if(gdadd.value=='2'){ 
      if(props.classradio=='Fire'){
          sdialog.value.dianadddialog=false; 
      }else {
      //   waaddshow.value=false; 
      }
  
     }
     handledisaster(aid.value);
    }
  //灾情源删除
  const handleDelete=(val)=>{
      console.log(val);
      firesid.value=val.sid;
      zqname.value=val.pname;
  
  }
  const shanchu=(val)=>{
      biaoid.value=val;
  }
  const fundeledata=()=>{
     if( biaoid.value=='1'){
        fundeledata2();
      }else{
        fundeledata3();
      }
  }
 const fundeledata2=()=>{
    const params = {
            transCode: 'D000011',
            sid:firesid.value,
            }
            console.log(params);
            request(params)
              .then((res) => { 
                ElMessage({
                message: '删除成功',
                type: 'success',
              })
              handledisaster(aid.value);
              })
              .catch((err) => {
              })
  }
  // 管道搜索
  function searchgd(){
    pipelinedata(searchtaggd.value);
  }
  // 分页查询
   function handleSizeChange(val) {
  }
    const  handleCurrentChange=(val)=>{
    pipelinedata(searchtaggd.value)
  }
     //新建fire
      const  newtable=()=>{
        selectstr.value='';
        firepid.value='';
         source.site=0;
         newtable.value='1';
         gdadd.value='1';
   }
  // 选择
      const  fireclick=()=>{
      pipelinedata('');
    }
      const  queding=()=>{
       selectfun();
     
     }
  const  selectfun=()=>{
     selectstr.value='';
     currentPage4.value=1;
     console.log()
       if(multipleSelection.value.length!=0){
      firepid.value=multipleSelection.value[0].id;
      selectstr.value=multipleSelection.value[0].name;
       }else{
         selectstr.value='';
        
       }
     }
      const projectsSelectionSelect=(selection, row)=>{
       if(selection.length>1){
        multipleTableRef.value.clearSelection();
        multipleTableRef.value.toggleRowSelection(row,true);
        multipleSelection.value=selection[1];
        return;
       }
        if(selection.length==1){
          multipleSelection.value=selection;
        
       }else if(selection.length==0){
      
       }
        
      // console.log(row)
     }
  //管道数据查询
   const pipelinedata=(searchtag)=>{
      const params = {
          transCode: 'D00001',
          count:pageSize4.value,
          page:currentPage4.value,
          searchtag:searchtag,
          }
          request(params)
            .then((res) => { 
              tableData2.value=res.rows
              total.value=res.total
          
            })
            .catch((err) => {
            })
    }
  //   灾源检测
  const handledetection=(index,row)=>{
      sdialog.value.isDisasterfire=true;
      firesid.value=row.sid;
     getinquire();
     
  }
  //突水灾源检测
  const handledetection2=(index,row)=>{
      sdialog.value.disDisasterwter=true;
      firesid.value=row.sid;
     getinquire();
     
  }
  //   灾源检测查询
  const getinquire=()=>{
      const params = {
          transCode: 'D00007',
          sid:firesid.value,
          }
          request(params)
            .then((res) => { 
              console.log(res.rows);
              if(props.classradio=='Fire'){
                tableDatafir.value=res.rows;
              }else{
                tableData4.value=res.rows
              }
            })
            .catch((err) => {
            })
  }
  
  // const Disasterclick=(index,row)=>{
  //     addjiancf();
  
  //   }
  // 灾源火灾检测添加
  const addjiancf=()=>{
      const params = {
          transCode: 'D00006',
          sid:firesid.value,
          timeline:Disastersource.value.timeline,
          val1:Disastersource.value.val1,
          val2:Disastersource.value.val2,
          val3:Disastersource.value.val3,
          val4:Disastersource.value.val4,
          }
          request(params)
            .then((res) => { 
             //console.log(res);
             ElMessage({
              message: res.returnMsg,
              type: 'success',
            })
            getinquire();
            })
            .catch((err) => {
            })
  }
  // 灾源突水检测添加
  //灾情检测删除
  const handleDelete2=(val)=>{
      console.log(val);
      firesid.value=val.sid;
      zqname.value="检测表的一条信息";
      svid.value=val.svid
  }
  const handleDelete3=(val)=>{
      console.log(val);
      firesid.value=val.sid;
      zqname.value="检测表的一条信息";
      svid.value=val.svid
  }
  const fundeledata3=()=>{
      const params = {
          transCode: 'D000013',
          svid:svid.value,
          }
          request(params)
            .then((res) => { 
             //console.log(res);
             ElMessage({
              message: "删除成功",
              type: 'success',
            })
            getinquire();
            })
            .catch((err) => {
            })
  }
  
  onMounted(() => {
    });
      defineExpose({sour,accident3,handledisaster});
      </script>
 
    <style lang="scss" scoped> 
    .jc_padding .el-table tr{
        height: 30px !important;
        background: rgba(104,173,255,0.3);
        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;
    }
.flex_a{
    flex: 1;
    padding: 0 19px; 
}
    .btns{
    width: 72px;
    height: 30px;
    background-image: url(../../assets/img/Rectangle399.png);
    background-repeat: no-repeat;
    line-height: 30px; 
    overflow: hidden;  
    margin: 10px 0;
    .spantext{
 font-weight: bold;
font-size: 12px;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
    }
}
.header_z{
    box-shadow:none !important;
    padding: 10px 20px !important;  
}
.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;
}
    .jc_padding{
        padding: 18px 10px;
    }
    .line{
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
    box-sizing: border-box;
    }
    .L_aside{
    .iconimg{
        width: 37px;
        height: 36px;
        margin:0 7px 0 24px;
    }
    .Frame2{
        background-image: url(../../assets/img/Frame2.png);
        background-size: 100%;
        background-position: center;
    }
    .Frame3{
        background-image: url(../../assets/img/Frame3.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .el-collapse,.el-collapse-item__header{
    border: none;
    ul li{
        text-align: left;
    }
    .inputkuang{
        height: 30px;
        width: 100%;
        background: rgba(13,22,57,0.4);
    position: relative;
    .righttext{
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 3px;
        color: rgba($color: #FFFFFF, $alpha: 0.8);
    }
    }
    
    .inputtext_1{
        font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none; 
    padding: 13px 0 7px 0;
    display: inline-block;
    
    }
    }
    }
    .ddd{
        margin-top: 20px;
        .ddd_div{
            padding: 20px 0;
            position: relative;
        }
        .class_btn{
            position: absolute;
        right: 0;
        top: 21px;
        }
        .header_l{
                line-height: 10px;
                // height: 40px;
                text-align: left;
                padding: 0 20px;
                // border-bottom: 1px solid;
                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                .el-image{
                    padding: 10px 10px 0 0;
                }
                h4{
                    font-weight: bold;
                    font-size: 12px;
                    color: #68ADFF;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
    }
    .tianjia{
        display: inline-block;
    }
    .el-dialog__title{
        display: inline-block;
    }  
    .bgcolor{
        // width: 482px;
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
    }
    .dialog_class{
            .my-header{
                line-height: 10px;
                height: 40px;
                text-align: left;
                padding: 0 20px;
                border-bottom: 1px solid;
                border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                .el-image{
                    padding: 10px 10px 0 0;
                }
                h4{
                    font-weight: bold;
                    font-size: 12px;
                    color: #68ADFF;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
            .my_content{
                width: 100%;
                height: 90px;
                box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
                border-radius: 0px 0px 0px 0px;
                position: relative;
               
                .radio-group{
                    display: flex;
                    justify-content: center;
                    .el-radio{
                        flex: 1;
                        justify-content: center;
                        font-weight: bold;
                            font-size: 12px;
                            color: #FFFFFF;
                            line-height: 14px;
                      
                    }
                  
                }
            }
            .el-dialog__footer{
                position: absolute;
                bottom: 17px;
                display: flex;
                .footerbtn{
                    flex: 1;
                    text-align: center;
                }
            }
        }
        .my_content1{
            .el-table .cell{
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF !important;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
    
        }
        .l_btn .borderimg {
        width: 109px;
    height: 30px;
    background: rgba(104,173,255,0.3);
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    /* border: 1px solid rgba(31, 107, 255, 1); */
     border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1; 
    
    border-radius: 4px;
    display: flex;
    display: inline-block;
    box-sizing: border-box;
    }
    .borderimg{
        width: 109px;
        height: 30px;
        background: rgba(104,173,255,0.3);
        box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
        /* border: 1px solid rgba(31, 107, 255, 1); */
        -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
        border-radius: 4px;
        display: flex;
        display: inline-block;
        box-sizing: border-box
    }
    .el-table,.el-table thead th {
        background-color: rgba(13, 22, 57, 0.96) !important;
    }
    .L_aside{
        height: calc(100vh - 70px);
        position: absolute;
        top: 70px;
    
    }
    .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-size: cover;
             background-position-x: center !important;
            line-height: 54px;
            .spantext{
                font-weight: bold;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                font-style: normal;
                text-transform: none;
    
            }
        }
    }
 
  
  
    .jiancedian{
        width:380px;
        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>
    .leftbgimg1 .el-collapse-item__header{
      background-image: url(../../assets/img/Group10.png)!important; 
      background-size: cover;
    background-position-x: center !important;
}
.xian{
    border: 1px solid;
    -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;
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(13, 22, 57, 0.4);
}
.header_l{
    position: relative;
}
.header_l .closeimg{

    position: absolute;
    top: 10px;
    right: 0;

}
.asideg .el-collapse-item__wrap{
    height: calc(100vh - 120px);
    background: rgba(13, 22, 57, 0.4);
    /* //border: 1px solid; */
    border-bottom: 1px solid;
    border-left:1px solid;
    border-right:1px solid;
    -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;
    box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(13, 22, 57, 0.4);
}
.leftbgimg1 .el-table tr{
        height: 30px !important;
        background: rgba(104,173,255,0.3);
        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;


}
.btncolor .el-button{
    background-color: rgba(104,173,255,0);
    font-weight: 400;
    font-size: 12px;
    color: #FFF500;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border: none;
}
.btncolor .el-button:focus, .el-button:hover{
    background-color: none;
    background-color: rgba(104,173,255,0);
}
.btncolor .el-table__header{
    margin: 0 14px
}
.magintop{
    display: flex;
}
.magintop .el-form-item{
    margin-right: 20px;
}
.guand_1{
    display: flex;
}
.guand_1 .asdis_btn{
    margin-top: -9px;
}
.el-table .cell{
    color: #fff;
    font-size: 12px;
}
.spanclad{
    color: #FFF500;
}
.tablefocus .el-table__body tr.current-row>td.el-table__cell {
    background-color: rgba(255,255,25,0.5);
}
</style>