|
@@ -0,0 +1,462 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="l_Dialog">
|
|
|
|
+ <el-dialog
|
|
|
|
+ v-model="sendialogVisible"
|
|
|
|
+ width="470"
|
|
|
|
+ align-center
|
|
|
|
+ :modal="false"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ draggable
|
|
|
|
+ class="dialog_class bgcolor zhucentent"
|
|
|
|
+ >
|
|
|
|
+ <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="xian btncolor tablefocus bmar">
|
|
|
|
+
|
|
|
|
+ <el-table :data="tableData" style="width:468px"
|
|
|
|
+ :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 type="index" width="50" />
|
|
|
|
+ <el-table-column prop="pid" label="编号" />
|
|
|
|
+ <el-table-column prop="stype" label="类型" />
|
|
|
|
+ <el-table-column prop="seid" 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="dialog.dialogsgdelect=true">
|
|
|
|
+ 删除
|
|
|
|
+ </el-button></div></div>
|
|
|
|
+ <div class="footerbtn flex1"><div class="borderimg"><el-button @click="accident()">
|
|
|
|
+ 修改
|
|
|
|
+ </el-button></div></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+<!-- 添加 -->
|
|
|
|
+ <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>
|
|
|
|
+ <div>
|
|
|
|
+ <el-form>
|
|
|
|
+ <el-form-item label="时间" :label-width="formLabelWidth6">
|
|
|
|
+ <el-input v-model="senobj.site" class="w-50 m-2" placeholder="请输入" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="突水量" :label-width="formLabelWidth6">
|
|
|
|
+ <el-input v-model="senobj.site" class="w-50 m-2" placeholder="请输入" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="所在巷道" :label-width="formLabelWidth6">
|
|
|
|
+ <el-input v-model="senobj.site" class="w-50 m-2" placeholder="请输入" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="位置" :label-width="formLabelWidth6">
|
|
|
|
+ <el-input v-model="senobj.site" 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="addVisible=false">取消</el-button></div></div>
|
|
|
|
+ <div class="footerbtn flex1"><div class="borderimg"><el-button @click="addjiancf();addVisible=false">
|
|
|
|
+ 确定
|
|
|
|
+ </el-button></div></div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </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 sendialogVisible=ref(false);
|
|
|
|
+let addVisible=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 senobj={
|
|
|
|
+ pid: 34,
|
|
|
|
+ seid: 2,
|
|
|
|
+ site: 0,
|
|
|
|
+ type: "温度传感器"
|
|
|
|
+}
|
|
|
|
+const tableRowClassName = ({row, rowIndex}) =>{
|
|
|
|
+ if (rowIndex%2 != 0) {
|
|
|
|
+ return 'evenRow';
|
|
|
|
+ }
|
|
|
|
+ return 'oddRow';
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getsensor();
|
|
|
|
+ });
|
|
|
|
+// 查询
|
|
|
|
+const getsensor=()=>{
|
|
|
|
+
|
|
|
|
+ const params = {
|
|
|
|
+ transCode: 'D10010',
|
|
|
|
+ type:'Fire'
|
|
|
|
+ }
|
|
|
|
+ request(params)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ tableData.value=res.rows;
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ ElMessage.error(err.returnMsg)
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+//添加
|
|
|
|
+const addsg=()=>{
|
|
|
|
+ add.value="添加";
|
|
|
|
+ addVisible.value=true;
|
|
|
|
+}
|
|
|
|
+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;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+.tianjia{
|
|
|
|
+display: inline-block;
|
|
|
|
+}
|
|
|
|
+.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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.tianjia{
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+.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: 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); */
|
|
|
|
+ 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;
|
|
|
|
+}
|
|
|
|
+.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>
|
|
|
|
+.el-collapse-item__header{
|
|
|
|
+ border: 1px solid;
|
|
|
|
+-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;
|
|
|
|
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
|
|
|
|
+border-radius: 0px 0px 0px 0px;
|
|
|
|
+background-color: rgba(13, 22, 57, 0.4);
|
|
|
|
+}
|
|
|
|
+.xian{
|
|
|
|
+border: 1px solid;
|
|
|
|
+-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;
|
|
|
|
+box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
|
|
|
|
+border-radius: 0px 0px 0px 0px;
|
|
|
|
+background-color: rgba(13, 22, 57, 0.4);
|
|
|
|
+}
|
|
|
|
+.header_l{
|
|
|
|
+position: relative;
|
|
|
|
+}
|
|
|
|
+.header_l .closeimg{
|
|
|
|
+
|
|
|
|
+position: absolute;
|
|
|
|
+top: 10px;
|
|
|
|
+right: 0;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+.leftbgimg1 .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;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+.btncolor .el-button{
|
|
|
|
+background-color: rgba(104,173,255,0);
|
|
|
|
+font-weight: 400;
|
|
|
|
+font-size: 12px;
|
|
|
|
+color: #FFF500;
|
|
|
|
+line-height: 14px;
|
|
|
|
+text-align: left;
|
|
|
|
+font-style: normal;
|
|
|
|
+text-transform: none;
|
|
|
|
+border: none;
|
|
|
|
+}
|
|
|
|
+.btncolor .el-button:focus, .el-button:hover{
|
|
|
|
+background-color: none;
|
|
|
|
+background-color: rgba(104,173,255,0);
|
|
|
|
+}
|
|
|
|
+.magintop{
|
|
|
|
+display: flex;
|
|
|
|
+}
|
|
|
|
+.magintop .el-form-item{
|
|
|
|
+margin-right: 20px;
|
|
|
|
+}
|
|
|
|
+.guand_1{
|
|
|
|
+display: flex;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.el-table .cell{
|
|
|
|
+color: #fff;
|
|
|
|
+font-size: 12px;
|
|
|
|
+}
|
|
|
|
+.spanclad{
|
|
|
|
+color: #FFF500;
|
|
|
|
+}
|
|
|
|
+.tablefocus .el-table__body tr.current-row>td.el-table__cell {
|
|
|
|
+background-color: rgba(255,255,25,0.5);
|
|
|
|
+}
|
|
|
|
+.bbb .el-collapse-item__content{
|
|
|
|
+background: rgba(13, 22, 57, 0);
|
|
|
|
+}
|
|
|
|
+.guand_1 .asdis_btn{
|
|
|
|
+margin-top: -9px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+</style>
|