disaster_web3/src/view/components/MenuPhysics.vue

<template>
   <div class=" bou  tablebk">
        <div class="common-layout" style="margin: 0">
        <el-aside
        width="357px"
          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 prop="name" label="名称" />
                                    <el-table-column prop="density">
                                        <template v-slot:header>
                                        <span >密度</span><br>
                                        <span >(kg/m3)</span>
                                    </template>
                                    </el-table-column>
                                    <!-- <el-table-column prop="diffcoe" label="扩散系数" /> -->
                                    <el-table-column prop="diffcoe">
                                        <template v-slot:header>
                                        <span >扩散系数</span><br>
                                        <span >(m2/s)</span>
                                    </template>
                                    </el-table-column>
                                    <el-table-column prop="speheat" label="比热" >
                                        <template v-slot:header>
                                        <span >比热</span><br>
                                        <span >J/(kg*K)</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="shanchu()">
                                        删除
                                    </el-button></div>
                            </div>
                            <div class="footerbtn flex1">
                                <div class="borderimg"><el-button @click="amend()">
                                        修改
                                    </el-button></div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </el-collapse-item>
            </el-collapse>
        <!-- 添加 -->
        <el-dialog v-model="addVisible"   width="400"  align-center  :append-to-body="true"  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 inputnuber" :inline="true" :model="wuliobj">
                <el-form-item label="编号" :label-width="formLabelWidth6" width="70">
                    <el-input v-model="wuliobj.code"  maxlength="10" oninput ="value=value.replace(/[^\w\\/]/ig,'')" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="名称" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.name" maxlength="18" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="密度(kg/m3) " :label-width="formLabelWidth6">
                    <el-input-number v-model.number="wuliobj.density "  maxlength="15" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="扩散系数(m2/s)" :label-width="formLabelWidth6">
                    <el-input-number v-model.number="wuliobj.diffcoe"  maxlength="15"  @input="formatInput"   class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="比热J/(kg*K)" :label-width="formLabelWidth6">
                    <el-input-number v-model.number="wuliobj.speheat"  maxlength="15" 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="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>
          </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 icon from "@/assets/img/icon.png";
import { timestampToTime } from '@/js/lindex.js'
let pipeline = ref();
let sendialogVisible = ref(false);
let currentrow=ref(true);
let addVisible = ref(false);
let dialogsgdelect = ref(false)
let classradio1 = ref('Fire');
const formLabelWidth6 = ref(100);
let add = ref("")
const resultactiveName = ref("first");
let coolactiveName1 = ref(["1", "2"]);
let tableHeight = ref(200);
let tableData = ref([]);
let tableobj = ref({});
let zqname = ref();
let tishi=ref();
let wuliobj = ref({
    coid:'',
    code: '',
    name:'',
    density: "",
    diffcoe: '',
    speheat: '',
})
let source = ref({
    selectstr: '',
    site: ''
})
let firepid = ref("")
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

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

    console.log(zqname.value);
    const params = {
        transCode: 'D10015',
        coid: tableobj.value.coid
    }
    request(params)
        .then((res) => {
            getsensor();
            ElMessage({
                message: '删除物理属性成功',
                type: 'success',
            })
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
onMounted(() => {
    getsensor();
});
// 查询
const getsensor = () => {

    const params = {
        transCode: 'D10013',
    }
    request(params)
        .then((res) => {
            tableData.value = res.rows;
            tableobj.value={};
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//添加
const addsg = () => {
    add.value = "添加";
    tishi.value= add.value;
    currentrow.value=false;
    addVisible.value = true;
    wuliobj.value.coid = '';
    wuliobj.value.code = '';
    wuliobj.value.name = '';
    wuliobj.value.density = '';
    wuliobj.value.diffcoe = '';
    wuliobj.value.speheat = '';
    tableobj.value={};


}
// 添加修改的接口
const addEied = () => {
    const params = {
        transCode: 'D10014',
        coid: wuliobj.value.coid,
        code: wuliobj.value.code,
        name:  wuliobj.value.name ,
        density: wuliobj.value.density,
        diffcoe:wuliobj.value.diffcoe,
        speheat:wuliobj.value.speheat,
    }
    request(params)
        .then((res) => {
            tableData.value = res.rows;
            getsensor();
            ElMessage({
                message: tishi.value+'物理属性成功',
                type: 'success',
            })
            addVisible.value = false 
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//修改
const amend = () => {
    add.value = "修改";
    tishi.value= add.value;
    if (JSON.stringify(tableobj.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
    addVisible.value = true;
    wuliobj.value.coid = tableobj.value.coid;
    wuliobj.value.code =tableobj.value.code;
    wuliobj.value.name = tableobj.value.name;
    wuliobj.value.density = tableobj.value.density;
    wuliobj.value.diffcoe =tableobj.value.diffcoe;
    wuliobj.value.speheat =tableobj.value.speheat;
    }
}


defineExpose({ sendialogVisible, });
</script>