disaster_web3/src/view/components/MenuSensor.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="sendialogVisible"
        >
          <div class="demo-collapse">
            <el-collapse v-model="coolactiveName1" accordion>
              <el-collapse-item name="1" class="imgneon">
                <template #title>
                  <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                  传感器信息<el-icon class="header-icon"> </el-icon>
                </template>
    <div class="l_Dialog">
            <div class="classtab">
                <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-class-name="tableRowClassName"
                                    @row-click="handleDelete($event)"
                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                    <template v-slot:empty>
                                    <p>暂无数据</p>
                                    </template>
                                    <el-table-column type="index" label="编号"  width="70"/>
                                    <el-table-column prop="type" label="类型" />
                                    <el-table-column prop="pname" label="所在巷道" />
                                    <el-table-column prop="site" label="位置" />
                                </el-table>
                            </div>
                        </div>
                        <div class="dialog-footer footer_div l_btn">
                            <div class="footerbtn flex1">
                                <div class="borderimg"><el-button @click="addsg();">添加</el-button></div>
                            </div>
                            <!-- <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="addsg('2')">
                              修改
                                  </el-button></div></div> -->
                                  <div class="footerbtn flex1">
                                <div class="borderimg"><el-button @click="amend()">
                                        修改
                                    </el-button></div>
                            </div>
                            <div class="footerbtn flex1">
                                <div class="borderimg"><el-button @click="shanchu()">
                                        删除
                                    </el-button></div>
                            </div>
                         
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </el-collapse-item>
            </el-collapse>
        <!-- 添加 -->
        <el-dialog v-model="addVisible"  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">{{ add }}</h4>

                </div>
            </template>
            <el-form class="demo-form-inline" :inline="true" :model="senobj">
                <el-form-item label="类型" :label-width="formLabelWidth6">
                    <el-input v-model="senobj.type" maxlength="15" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <div class="demo-input-suffix firsttitle magintop guand_1">
                    <el-form-item label="巷道名称" :label-width="formLabelWidth6">
                        <el-input v-model="source.selectstr" disabled   class="w-50 m-2" placeholder="巷道名称" />
                    </el-form-item>
                    <div class="btn2">
                        <el-button type="primary" @click="fireclick();">选择巷道</el-button>
                    </div>
                </div>
                <div class="input">
                    <el-form-item label="位置" :label-width="formLabelWidth6">
                        <el-input-number v-model="senobj.site" :min="0" :max="1" :precision="2" :step="0.1"
                            controls-position="right" 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="addVisible = false">取消</el-button></div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="addEied(); ">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>

        <!-- 删除 -->
        <el-dialog v-model="dialogsgdelect"  align-center  :append-to-body="true" 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="dialogsgdelect = false">取消</el-button></div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="fundeledata(); dialogsgdelect = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
        <!-- 选择管道 -->
        <pipelines ref="pipeline" :selectstr="source.selectstr" @pipelineapi="pipelineapi" />
           
          </div>
        </el-aside>
      </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 { message } from '@/utils/message';
import icon from "@/assets/img/icon.png";
import pipelines from "./PipeIine.vue"
import { vtkmodel } from "@/control/vtkModel.js";
import { timestampToTime } from '@/js/lindex.js'
import emitter from "@/utils/emitter";
let pipeline = ref();
let currentrow=ref(true);
let sendialogVisible = ref(false);
let addVisible = ref(false);
let dialogsgdelect = ref(false)
let classradio1 = ref('Fire');
const formLabelWidth6 = ref(100);
let coolactiveName1 = ref(["1", "2"]);
let add = ref("")
const resultactiveName = ref("first");
let tableHeight = ref(200);
let tableData = ref([]);
let tableobj = ref({});
let zqname = ref();
let tishi=ref();
let senobj = ref({
    pid: 0,
    seid: 0,
    site: 0,
    type: "温度传感器",
    senobj: ''
})
let source = ref({
    selectstr: '',
    site: ''
})
let firepid = ref("")
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
// 选中一行
const handleDelete = (val) => {
    tableobj.value = val;
    currentrow.value=true;
    console.log(val);
   // console.log(tableobj.value)
}
// 删除
const shanchu = () => {
    if (JSON.stringify(tableobj.value) == '{}') {
        message.error("你还没有选中删除的项目")
    } else {
        dialogsgdelect.value = true
        zqname.value = tableobj.value.pname;
    }
}
const fundeledata = () => {

    const params = {
        transCode: 'D10012',
        seid: tableobj.value.seid
    }
    request(params)
        .then((res) => {
            message({
                  message: '传感器信息删除成功',
                  type: 'success',
              })
            getsensor();
        })
        .catch((err) => {
            message.error(err.returnMsg)
        })
}
onMounted(() => {
    getsensor1();
});
// 查询
const getsensor1 = () => {

const params = {
    transCode: 'D10010',
    type: 'Fire'
}
request(params)
    .then((res) => {
        tableData.value = res.rows;
         tableobj.value={};
       
   
    })
    .catch((err) => {
        message.error(err.returnMsg)
    })
}
const getsensor = () => {
    vtkmodel.delSensor();
    const params = {
        transCode: 'D10010',
        type: 'Fire'
    }
    request(params)
        .then((res) => {
            tableData.value = res.rows;
             tableobj.value={};
             console.log(   res.rows)
             res.rows.forEach(element => {
                console.log(1111)
                vtkmodel.addSensor(element.pid,element.site)
            });
                vtkmodel.showSensor();
         
          
        })
        .catch((err) => {
            message.error(err.returnMsg)
        })
}
//添加
const addsg = () => {
    add.value = "添加";
    tishi.value= add.value;
    currentrow.value=false;
    addVisible.value = true;
    senobj.value.seid = '';
    senobj.value.pid = '';
    senobj.value.type = '';
    senobj.value.site = 0.0;
    source.value.selectstr = '';
    tableobj.value={};
   // vtkmodel.showSensor();
   emitter.emit('myaddsg',(true));
   //console.log(4455667788899)
//    emitter.on('changecheckbox4',(data)=>{
//     console.log(22222)
//    // changecheckbox4();

//   });
   
}

// 添加修改的接口
const addEied = () => {
    const params = {
        transCode: 'D10011',
        seid: senobj.value.seid,
        pid: senobj.value.pid,
        site: senobj.value.site,
        type: senobj.value.type
    }
    request(params)
        .then((res) => {
            message({
                  message:'传感器信息'+tishi.value+'成功',
                  type: 'success',
              })
            // tableData.value = res.rows;
            addVisible.value = false;
            getsensor();
        })
        .catch((err) => {
            const regex = /字段\d*/g;
            let Msg=err.returnMsg.replace(regex, '');
            message.error(Msg)
        })
}


//修改
const amend = () => {
    add.value = "修改";
    tishi.value= add.value;
    if (JSON.stringify(tableobj.value) == '{}') {
        message.error("你还没有选中修改的项目")
    } else {
        senobj.value.seid = tableobj.value.seid
        senobj.value.pid = tableobj.value.pid
        senobj.value.site = tableobj.value.site
        senobj.value.type = tableobj.value.type
        source.value.selectstr = tableobj.value.pname
        addVisible.value = true;
        emitter.emit('myaddsg',(true));
    }
}
// 巷道方法
// 选择巷道
const fireclick = () => {
    pipeline.value.searchtaggd='';
    pipeline.value.dialogVisiblenode = true;
    pipeline.value.pipelinedata('');
  
}
//点击确定
const pipelineapi = (row) => {
    senobj.value.pid = row.id;
    source.value.selectstr = row.name;
    tableobj.value.pid = row.id;
}
// onUnmounted(() =>{

// emitter.off('changecheckbox4')
// })
defineExpose({ sendialogVisible, });
</script>