disaster_web3/src/view/components/Menupump.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="btnicon">
              <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="pumpname" label="水泵名称" />
                            <el-table-column prop="pname" label="巷道名称" />
                            <el-table-column prop="site" label="相对位置" />
                            <el-table-column prop="onoff" label="开启状态">
                              <template #default="scope">
                                {{
                                  scope.row.onoff == "0"
                                    ? "否"
                                    : scope.row.onoff == "1"
                                    ? "是"
                                    : "是"
                                }}
                              </template>
                            </el-table-column>
                            <el-table-column prop="openhig">
                              <template v-slot:header>
                                <span>开起高度</span><br />
                                <span>(m)</span>
                              </template>
                            </el-table-column>
                            <el-table-column prop="closehig">
                              <template v-slot:header>
                                <span>关闭高度</span><br />
                                <span>(m)</span>
                              </template>
                            </el-table-column>
                          </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="amend()"> 修改 </el-button>
                          </div>
                        </div>
                        <div class="footerbtn flex1">
                          <div class="borderimg">
                            <el-button @click="shanchu()"> 删除 </el-button>
                          </div>
                        </div>
                      </div>

                      <div
                        class="xian tablefocus"
                        style="margin-top: 20px"
                        v-show="hfShow"
                      >
                        <div class="header_l header_z headerimg">
                          <el-image :src="icon" fit="contain"></el-image>
                          <h4 class="tianjia">性能曲线</h4>
                          <div
                            class="closeimg"
                            @click="hfShow = false"
                          >
                            <el-image :src="closeimg" fit="contain"></el-image>
                          </div>
                        </div>
                        <el-table
                          :data="hfObjs"
                          style="width: 100%"
                          :max-height="tableHeight"
                          :row-class-name="tableRowClassName"
                          :header-cell-style="{
                            background: 'rgba(13, 22, 57, 0) '
                          }"
                          @row-click="checkhfObjTable($event)"
                          :highlight-current-row="currentrow1"
                        >
                          <template v-slot:empty>
                            <p>暂无数据</p>
                          </template>
                          <el-table-column prop="hight">
                            <template v-slot:header>
                              <span>水位高度</span>
                              <span>(m)</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="flow">
                            <template v-slot:header>
                              <span>流量</span>
                              <span> (m³/s)</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="dialog-footer footer_div l_btn">
                          <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="addhf();">添加</el-button></div>
                          </div>
                          <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="updatehf();"> 修改 </el-button></div>
                          </div>
                          <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="shanchu2();"> 删除 </el-button></div>
                          </div>
                          <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="hfShow = false"> 确定 </el-button></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

           <!--性能曲线的添加  -->
    <el-dialog
      v-model="hfDShow"
      :append-to-body="true"
      width="400"
      align-center
      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">{{ tishi2 }}</h4>
        </div>
      </template>
      <div>
        <el-form class="demo-form-inline inputnuber">
          <el-form-item label="水位高度(m)" :label-width="formLabelWidth6">
            <el-input v-model="hfObj.hight"  maxlength="10" oninput ="value=value.replace(/[^0-9.]/g,'')" class="w-50 m-2"  placeholder="请输入" />
        </el-form-item>
        <el-form-item label="流量(m³/s)" :label-width="formLabelWidth6">
            <el-input v-model="hfObj.flow"  maxlength="10" oninput ="value=value.replace(/[^0-9.]/g,'')" 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="hfDShow = false">取消</el-button>
          </div>
        </div>
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button
              @click="savehf()"
            >
              确定
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

          <!-- 添加 -->
          <el-dialog
            v-model="addVisible"
            draggable :modal="false" modal-class="summary-dlg"
            align-center
            :append-to-body="true"
            width="400"
            class="dialog_class bgcolor tianjia foter_l tianjia"
            @close="clearvtk"
          >
            <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.pumpcode"
                  maxlength="15"
                  @input="senobj.pumpcode = senobj.pumpcode.replace(/[\u4e00-\u9fa5\s]/g, '')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="水泵名称" :label-width="formLabelWidth6">
                <el-input
                  v-model="senobj.pumpname"
                  maxlength="18"
                  oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                  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="senobj.pname"
                    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="相对位置"
                    @change="inputnumberChange"
                  />
                </el-form-item>
              </div>
              <div style="display: flex">
                <span class="switchppm">开启状态</span>
                <el-switch
                  v-model="senobj.onoff"
                  inline-prompt
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="0"
                />
              </div>
              <el-form-item label="开启高度(m)" :label-width="formLabelWidth6">
                <el-input
                  v-model="senobj.openhig"
                  maxlength="10"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="关闭高度(m)" :label-width="formLabelWidth6">
                <el-input
                  v-model="senobj.closehig"
                  maxlength="10"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>

            <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1">
                <div class="borderimg">
                  <el-button @click="clearvtk();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"
            draggable :modal="false" modal-class="summary-dlg"
            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>
          <!-- 水位 -->
          <el-dialog
            v-model="dialogsgdelect2"
            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">水位高度：{{ zqname2.hight }} 流速：{{ zqname2.flow }}</span>
            </h4>
            <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1">
                <div class="borderimg">
                  <el-button @click="dialogsgdelect2 = false">取消</el-button>
                </div>
              </div>
              <div class="footerbtn flex1">
                <div class="borderimg">
                  <el-button
                    @click="delhf();dialogsgdelect2 = false"
                  >
                    确定
                  </el-button>
                </div>
              </div>
            </div>
          </el-dialog>
          <!-- 选择管道 -->
          <pipelines
            ref="pipeline"
            :pname="senobj.pname"
            @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 zhCn from "element-plus/es/locale/lang/zh-cn"
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 closeimg from "@/assets/img/colse.png";



let pipeline = ref()
let currentrow = ref(true) //水泵
let currentrow1 = ref(true) //水位
let sendialogVisible = ref(false)
let addVisible = ref(false)
let dialogsgdelect = ref(false)
let dialogsgdelect2 = 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 zqname2 = ref({})
let tishi = ref()
let tishi2 = ref()
let senobj = ref({})

//水泵曲线数据
let hfObjs = ref([])
let hfObj = ref({})
let hfShow= ref(false);
let hfDShow= ref(false);

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 != 0) {
    return "evenRow"
  }
  return "oddRow"
}

// 选中一行
const handleDelete = (val) => {
  tableobj.value = val
  currentrow.value = true
  findhfObjs();
  hfShow.value = true;
}
//选中曲线
const checkhfObjTable=(val)=>{
   hfObj.value =val;
   currentrow1.value = true
}
const updatehf=()=>{
  if (JSON.stringify(hfObj.value) == "{}") {
    message.error("你还没有选中修改的项目")
  }else{
    tishi2.value = "修改"
    hfDShow.value = true;
  }
   
}
const addhf=()=>{
  tishi2.value = "添加";
    hfObj.value ={};
    currentrow1.value = false;
    hfDShow.value = true;
}
const savehf=()=>{
     const params = {
        transCode: "D50005",
        pumphfbaseid:hfObj.value.pumphfbaseid,
        pumpbaseid:tableobj.value.pumpbaseid,
        hight:parseFloat(hfObj.value.hight),
        flow:parseFloat(hfObj.value.flow)
    }
    request(params)
        .then((res) => {
         findhfObjs();
        hfDShow.value = false;
        message.success("水位"+ tishi2.value + "成功");
        })
        .catch((err) => {
        message.error(err.returnMsg)
        })
}

// 水位
const shanchu2 = () => {
  if (JSON.stringify(hfObj.value) == "{}") {
    message.error("你还没有选中删除的项目")
  } else {
    dialogsgdelect2.value = true
    zqname2.value.hight = hfObj.value.hight
    zqname2.value.flow = hfObj.value.flow

  }
}

const delhf=()=>{
 if (JSON.stringify(hfObj.value) == "{}") {
    message.error("你还没有选中删除的项目")
  } else {
     const params = {
        transCode: "D50006",
        pumphfbaseid:hfObj.value.pumphfbaseid
    }
    request(params)
        .then((res) => {
        findhfObjs();
        message.success("水位删除成功");
        })
        .catch((err) => {
        message.error(err.returnMsg)
        })
  }
}
const hfObjTable=(val)=>{
   hfObj.val =val;
   currentrow.value = true
}
const findhfObjs=()=>{
    const params = {
    transCode: "D50004",
    pumpbaseid:tableobj.value.pumpbaseid
  }
  request(params)
    .then((res) => {
      hfObjs.value = res.rows
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
}

// 删除
const shanchu = () => {
  if (JSON.stringify(tableobj.value) == "{}") {
    message.error("你还没有选中删除的项目")
  } else {
    dialogsgdelect.value = true
    zqname.value = tableobj.value.pumpname
  }
}
const fundeledata = () => {
  const params = {
    transCode: "D50003",
    pumpbaseid: tableobj.value.pumpbaseid
  }
  request(params)
    .then((res) => {
      message.success("水泵删除成功");
      getsensor()
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
}
onMounted(() => {
  getsensor()
})
// 查询
const getsensor = () => {
  const params = {
    transCode: "D50001"
  }
  request(params)
    .then((res) => {
      tableData.value = res.rows
      tableobj.value = {}
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
}
//添加
const addsg = () => {
  add.value = "添加"
  tishi.value = add.value
  currentrow.value = false
  addVisible.value = true
  tableobj.value = {}
}
// 添加修改的接口
const addEied = () => {
  const params = {
    transCode: "D50002",
    pumpbaseid: senobj.value.pumpbaseid,
    pumpcode: senobj.value.pumpcode,
    pumpname: senobj.value.pumpname,
    openhig: parseFloat(senobj.value.openhig),
    closehig: parseFloat(senobj.value.closehig),
    pid: senobj.value.pid,
    site: senobj.value.site,
    onoff: senobj.value.onoff
  }
  console.log(params)
  request(params)
    .then((res) => {
      message.success("水泵" + tishi.value + "成功");
      // tableData.value = res.rows;
      addVisible.value = false
      senobj.value = {}
      getsensor()
      clearvtk()
    })
    .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 = tableobj.value
    addVisible.value = true
  }
}
// 巷道方法
// 选择巷道
const fireclick = () => {
  pipeline.value.searchtaggd = ""
  pipeline.value.dialogVisiblenode = true
  pipeline.value.pipelinedata("")
}
//点击确定
const pipelineapi = (row) => {
  senobj.value.pid = row.id
  senobj.value.pcode = row.code
  senobj.value.pname = row.name
  tableobj.value.pid = row.id

  vtkmodel.clearJgAddMode();
    //选中指定管道
    vtkmodel.selectByPipeId(row.id);
    vtkmodel.addpipsite(row.id, 0.0);
}

const inputnumberChange = (val) => {
  console.log("tableobj.value",tableobj.value)
  vtkmodel.addpipsite(tableobj.value.pid, val);
}

const clearvtk = () => {
  vtkmodel.clearpipsite();
  vtkmodel.selectNoting();
}
defineExpose({ sendialogVisible })
</script>