disaster/src/view/components/MenuPhysics.vue

<template>
    <div class="l_Dialog">
        <el-dialog v-model="sendialogVisible" width="470" align-center :modal="false" :close-on-click-modal="false"
            modal-class="summary-dlg" draggable class="dialog_class bgcolor zhucentent wuli">
            <template #header="{ titleId, titleClass }">
                <div class="my-header xinxi_header">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 :id="titleId" :class="titleClass">物理属性</h4>

                </div>
            </template>
            <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="true" :row-class-name="tableRowClassName"
                                    @row-click="handleDelete($event)"
                                    :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.9) ' }">
                                    <el-table-column prop="name" label="名称" />
                                    <el-table-column prop="density" label="密度" />
                                    <el-table-column prop="diffcoe" label="扩散系数" />
                                    <el-table-column prop="speheat" 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="shanchu()">
                                        删除
                                    </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="sendialogVisible = false">
                                        确认
                                    </el-button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog v-model="addVisible" 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="wuliobj">
                <el-form-item label="编号" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.code" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="名称" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.name" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="密度" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.density" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="扩散系数" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.diffcoe" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="比热" :label-width="formLabelWidth6">
                    <el-input v-model="wuliobj.speheat" 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(); addVisible = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>

        <!-- 删除 -->
        <el-dialog v-model="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="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>
</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 addVisible = ref(false);
let dialogsgdelect = ref(false)
let classradio1 = ref('Fire');
const formLabelWidth6 = ref(100);
let add = ref("")
const resultactiveName = ref("first");
let tableHeight = ref(570);
let tableData = ref([]);
let tableobj = ref({});
let zqname = 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';

}
// 选中一行
const handleDelete = (val) => {
    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();
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
onMounted(() => {
    getsensor();
});
// 查询
const getsensor = () => {

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


}
// 添加修改的接口
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();
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//修改
const amend = () => {
    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>

<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;
    }

}

.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;
    }
}

.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;
        }
    }
}

.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: 70px;
    height: 30px;
    font-size: 12px;
    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;
    font-weight: bold;
    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;
    overflow: hidden;
}

.el-form-item__label {
    color: #FFFFFF !important;
}

.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>
 .wuli  .el-table .el-table__header .el-table__cell{
    height:48px !important;
    text-align: center;


}
.wuli  .el-table .el-table__header .el-table__cell .cell{
    text-align: center;
    position: relative; 

}
.wuli  .el-table .el-table__header {
/* 
   border-top: 1px solid !important;
    border-bottom: 1px solid !important;
   border-image: linear-gradient(237deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;  */

}
.wuli  .el-table .el-table__header .el-table__cell:before{
    content: ''; 
      width: 100%;
      height: 1px;
      background-color:rgba(16, 92, 240, 1);
      position: absolute;
      left: 0;
      bottom: 0;
      transform: scaleY(0.5);

}

.wuli  .el-table .el-table__header .el-table__cell::after{
         content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-right: 1px solid;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
        transform-origin: 0 0;
        transform: scale(0.5);
}
</style>