disaster_web3/src/view/components/Menudisaster.vue

<template>
    <!-- 报警设置-->
    <div class="l_Dialog bou tablebk">
      <div class="common-layout" style="margin: 0" >
        <el-aside
          width="480px"
          class="L_aside L_aside1 asideg asidegbg leftbgimg1"
          v-show="dialogVisible"
        >
          <div class="demo-collapse">
            <el-collapse v-model="coolactiveName1" accordion>
              <el-collapse-item name="1"  class="imgneon">
           
                <template #title>
                    <el-icon class="iconimg Frame3 imgneon" fit="contain"></el-icon>
                   报警设置
                </template>
                <div class="asides_content">
                  <div class="jc_content tablecolor">
                    <div class="jc_padding font12">
                      <div class="xian btncolor tablefocus bmar">
                       <!--内容 -->
            <div class="classtab">
                <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" @tab-click="handleClick" 
                    :stretch="true">
                    <el-tab-pane label="突水" name="Water">
                        <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class=" btncolor tablefocus bmar">

                                        <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                            :highlight-current-row="currentrow"
                                            @row-click="handleDelete($event)"
                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
                                            <el-table-column   prop="grade"  label="预警" >
                                            <template #default="scope">
                                                <el-image v-if="scope.row.grade=='1'" style="height: 100%" :src="bt1" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='2'" style="height: 100%" :src="bt2" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='3'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='4'" style="height: 100%" :src="bt4" fit="contain"></el-image>
                                            </template>
                                            </el-table-column>
                                            <el-table-column prop="height" label="水位" />
                                        </el-table>
                                    </div>
                                </div>
                                <div class="dialog-footer footer_div l_btn">
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="Eidedes()">
                                                修改
                                            </el-button></div>
                                    </div>
                                 
                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="火灾" name="Fire">
                      <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class=" btncolor tablefocus bmar">

                                        <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                            :highlight-current-row="currentrow"
                                            @row-click="handleDelete($event)"
                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
                                            <el-table-column   prop="grade"  label="预警" >
                                            <template #default="scope">
                                                <el-image v-if="scope.row.grade=='1'" style="height: 100%" :src="bt1" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='2'" style="height: 100%" :src="bt2" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='3'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='4'" style="height: 100%" :src="bt4" fit="contain"></el-image>
                                            </template>
                                            </el-table-column>
                                            <el-table-column prop="temperature" label="温度" />
                                            <el-table-column prop="co2" label="co2" />
                                            <el-table-column prop="so2" label="so2" />
                                        </el-table>
                                    </div>
                                </div>
                                <div class="dialog-footer footer_div l_btn">
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="Eidedes()">
                                                修改
                                            </el-button></div>
                                    </div>
                                 
                                </div>

                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="瓦斯" name="Gass">
                      <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class=" btncolor tablefocus bmar">

                                        <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                            :highlight-current-row="currentrow"
                                            @row-click="handleDelete($event)"
                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57,0) ' }">
                                            <el-table-column   prop="grade"  label="预警" >
                                            <template #default="scope">
                                                <el-image v-if="scope.row.grade=='1'" style="height: 100%" :src="bt1" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='2'" style="height: 100%" :src="bt2" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='3'"  style="height: 100%" :src="bt3" fit="contain"></el-image>
                                                <el-image v-if="scope.row.grade=='4'" style="height: 100%" :src="bt4" fit="contain"></el-image>
                                            </template>
                                            </el-table-column>
                                            <el-table-column prop="temperature" label="温度" />
                                            <el-table-column prop="co2" label="co2" />
                                            <el-table-column prop="ch4" label="ch4" />
                                        </el-table>
                                    </div>
                                </div>
                                <div class="dialog-footer footer_div l_btn">
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="Eidedes()">
                                                修改
                                            </el-button></div>
                                    </div>
                                 
                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                   
                </el-tabs>
            </div>
    
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-aside>
      </div>
    </div>
  <!-- 修改 -->
  <el-dialog v-model="xiugVisible"  align-center  :append-to-body="true" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
 <template #header="{ titleId, titleClass }">
     <div class="my-header ">
         <el-image :src="icon" fit="contain"></el-image>
         <h4 :id="titleId" :class="titleClass">{{ desw.add }}</h4>
     </div>
 </template>
 <el-form class="demo-form-inline" :inline="true" :model="desw">
  <!-- <el-form-item label="等级:" v-if="props.classradio == 'Fire'">
                <el-select
                  v-model="des.region"
                  @change="regionchange($event)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in strResultFormatlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item> -->
        <div v-if="resultactiveName=='Water'">
     <el-form-item label="水位" :label-width="formLabelWidth6">
         <el-input v-model="desw.height"   oninput ="value=value.replace(/[^0-9.]/g,'')"  maxlength="15" class="w-50 m-2" placeholder="请输入" />
     </el-form-item>
    </div>
    <div v-if="resultactiveName=='Fire'||resultactiveName=='Gass'">
      <el-form-item label="温度" :label-width="formLabelWidth6">
         <el-input v-model="desw.temperature" maxlength="15" class="w-50 m-2" placeholder="请输入" />
     </el-form-item>
     <el-form-item label="co2" :label-width="formLabelWidth6">
         <el-input v-model="desw.co2"   oninput ="value=value.replace(/[^0-9.]/g,'')"  maxlength="15" class="w-50 m-2" placeholder="请输入" />
     </el-form-item>
     <el-form-item label="so2" :label-width="formLabelWidth6" v-if="resultactiveName=='Fire'">
         <el-input v-model="desw.so2"   oninput ="value=value.replace(/[^0-9.]/g,'')"  maxlength="15" class="w-50 m-2" placeholder="请输入" />
     </el-form-item>
     <el-form-item label="ch4" :label-width="formLabelWidth6" v-if="resultactiveName=='Gass'">
         <el-input v-model="desw.ch4"   oninput ="value=value.replace(/[^0-9.]/g,'')"  maxlength="15" class="w-50 m-2" placeholder="请输入" />
     </el-form-item>
    </div>
 </el-form>
 <div class="dialog-footer footer_div l_btn">
     <div class="footerbtn flex1">
         <div class="borderimg"><el-button @click="xiugVisible = false">取消</el-button></div>
     </div>
     <div class="footerbtn flex1">
         <div class="borderimg"><el-button @click="Eiedre(); xiugVisible = false">
                 确定
             </el-button></div>
     </div>
 </div>
</el-dialog>
  </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 bt1 from "@/assets/img/Group1377.png"
import bt2 from "@/assets/img/Group1396.png"
import bt3 from "@/assets/img/Group1395.png"
import bt4 from "@/assets/img/Group1376.png"

  import { timestampToTime } from '@/js/lindex.js';
  import NodeSelect from "./NodeLine.vue";
  let dialogVisible=ref(false);
  let formLabelWidth6=ref(120)
  let xiugVisible=ref(false);
  const resultactiveName = ref("Water");
  let coolactiveName1 = ref(["1",'2']);
  let desw=ref({
    region:'',
    height:'',
    add:'',
    temperature:'',
    co2:'',
    so2:'',
    ch4:""
  })
let waterobj=ref({
  id:null,
  height:null,
 temperature:null,
  co2:null,
  ch4:null,
  so2:null,
});
let fireobj=ref();
let gessobj=ref();
  let tableHeight = ref(280);
  let currentrow=ref(false)
  const tableData =ref([]);
  onMounted(() => {
    waterobj.value={};
    wgetdisaster();

});
const handleClick = (Tab, val) => {
  waterobj.value={};
  currentrow.value=false;
    resultactiveName.value=Tab.props.name;
    wgetdisaster();
   // getdisaster();
  }
  const wgetdisaster = () => {
    const params = {
        transCode: 'D10028',
        stype:resultactiveName.value
    }
    request(params)
        .then((res) => {
        
           tableData.value=res.rows;
           console.log(tableData)
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}


//选择列表
const handleDelete=(val)=>{
  waterobj.value=val;
  currentrow.value=true;

}

//修改
const Eidedes=()=>{
  if (currentrow.value == false) {
        ElMessage.error("你还没有选中修改的项目")
    } else {
      
      if(resultactiveName.value=='Water'){
        desw.value.add='突水';
      desw.value.height= waterobj.value.height;
      desw.value.so2= null;
      desw.value.co2= null;
      desw.value.temperature= null;
      desw.value.ch4=null;
      }else if(resultactiveName.value=='Fire'){
        desw.value.add='火灾';
        console.log(waterobj.value);
       desw.value.so2= waterobj.value.so2;
      desw.value.co2= waterobj.value.co2;
      desw.value.temperature= waterobj.value.temperature;
      desw.value.height= null;
      desw.value.ch4=null;
      }else{
        desw.value.add='瓦斯';
        desw.value.so2= waterobj.value.so2;
       desw.value.co2= waterobj.value.co2;
       desw.value.temperature= waterobj.value.temperature;
       desw.value.height= null;
       desw.value.ch4=waterobj.value.ch4;
      }
    
      xiugVisible.value=true;
    }

}
//确定列表
const Eiedre=()=>{
  const params = {
        transCode: 'D10029',
        id:waterobj.value.id,
        height:desw.value.height,
        temperature:desw.value.temperature,
        co2:desw.value.co2,
        ch4:desw.value.ch4,
        so2:desw.value.so2,

    }
    request(params)
        .then((res) => {
          wgetdisaster();
          currentrow.value=false;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
  defineExpose({ dialogVisible, });
  </script>