| | |
| | | > |
| | | ç¨æ·åä½ |
| | | </div> |
| | | <div |
| | | :class="['item', isactive == 5 ? 'isactive' : '']" |
| | | @click="changeactive(5)" |
| | | > |
| | | ç¨æ·IP |
| | | </div> |
| | | </div> |
| | | <div class="serch"> |
| | | <div class="time_box"> |
| | |
| | | type="primary" |
| | | size="small" |
| | | @click="AddUnit" |
| | | style=" |
| | | width: 5.5rem; |
| | | height: 2rem; |
| | | font-size: 0.88rem; |
| | | display: flex; |
| | | align-items: center; |
| | | " |
| | | class="text_btn" |
| | | ><el-icon style="margin-right: 0.2rem"> <Plus /> </el-icon |
| | | >æ°å»º</el-button |
| | | > |
| | | <!-- ç¨æ·IPæ°å»º --> |
| | | <el-button |
| | | v-if="isactive == 5" |
| | | type="primary" |
| | | size="small" |
| | | @click="Addip" |
| | | style=" |
| | | width: 5.5rem; |
| | | height: 2rem; |
| | |
| | | cursor: 'pointer', |
| | | }" |
| | | @click="EditUnit(scope.row)" |
| | | >ç¼è¾</span |
| | | > |
| | | </template></el-table-column |
| | | > |
| | | </el-table> |
| | | |
| | | <!-- ç¨æ·IP --> |
| | | <el-table |
| | | empty-text="ææ æ°æ®" |
| | | :height="isMin ? '950' : '450'" |
| | | v-if="isactive == 5" |
| | | :data="ipData" |
| | | style="width: 100%" |
| | | :header-cell-style=" |
| | | isMin |
| | | ? { |
| | | background: 'rgba(250,250,250,1)', |
| | | color: '#101010', |
| | | fontSize: '1.5rem', |
| | | height: '3rem', |
| | | border: 'none', |
| | | } |
| | | : { |
| | | background: 'rgba(250,250,250,1)', |
| | | color: '#101010', |
| | | fontSize: '0.88rem', |
| | | height: '3rem', |
| | | border: 'none', |
| | | } |
| | | " |
| | | :row-style=" |
| | | isMin |
| | | ? { |
| | | color: '#101010', |
| | | fontSize: '1.88rem', |
| | | height: '3rem', |
| | | } |
| | | : { |
| | | color: '#101010', |
| | | fontSize: '0.88rem', |
| | | height: '3rem', |
| | | } |
| | | " |
| | | @selection-change="IpSelectionChange" |
| | | > |
| | | <el-table-column type="selection" align="center" /> |
| | | <el-table-column prop="iPaddress" label="ipå°å" align="center" /> |
| | | <el-table-column prop="addressname" label="æ£ä¿®é" align="center" /> |
| | | <el-table-column label="æä½" align="center"> |
| | | <template #default="scope"> |
| | | <span |
| | | :style="{ |
| | | color: 'blue', |
| | | fontSize: isMin ? '1.88rem' : '0.88rem', |
| | | cursor: 'pointer', |
| | | }" |
| | | @click="Editip(scope.row)" |
| | | >ç¼è¾</span |
| | | > |
| | | </template></el-table-column |
| | |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- ç¨æ·ipæ°å»º/ç¼è¾ --> |
| | | <el-dialog |
| | | v-model="dialogipVisible" |
| | | title="" |
| | | width="40%" |
| | | :before-close="handleClose" |
| | | :show-close="false" |
| | | :align-center="true" |
| | | @close="resetForm4(formipRef)" |
| | | > |
| | | <template #title> |
| | | <div |
| | | style=" |
| | | height: 3.63rem; |
| | | display: flex; |
| | | border-bottom: 1px solid #e6e6e6; |
| | | " |
| | | > |
| | | <span |
| | | :style="{ |
| | | color: 'rgb(16, 16, 16)', |
| | | fontSize: isMin ? '2rem' : '1rem', |
| | | fontWeight: 'bold', |
| | | }" |
| | | >ç¨æ·ip</span |
| | | > |
| | | </div> |
| | | </template> |
| | | <el-form |
| | | :model="formip" |
| | | label-width="auto" |
| | | label-position="top" |
| | | ref="formipRef" |
| | | :rules="ipRules" |
| | | :hide-required-asterisk="true" |
| | | > |
| | | <el-form-item prop="iPaddress"> |
| | | <template #label> |
| | | <div style="display: flex; align-items: flex-end"> |
| | | <span |
| | | :style="{ |
| | | color: 'red', |
| | | marginRight: '0.2rem', |
| | | fontSize: '2rem', |
| | | }" |
| | | >*</span |
| | | > |
| | | <span |
| | | :style="{ |
| | | fontSize: isMin ? '2rem' : '0.88rem', |
| | | color: 'black', |
| | | fontWeight: bold, |
| | | }" |
| | | >ipå°å</span |
| | | > |
| | | </div> |
| | | </template> |
| | | <el-input |
| | | style="height: 2rem" |
| | | size="small" |
| | | v-model="formip.iPaddress" |
| | | placeholder="请è¾å
¥" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item prop="addressname"> |
| | | <template #label> |
| | | <div style="display: flex; align-items: flex-end"> |
| | | <span |
| | | :style="{ |
| | | color: 'red', |
| | | marginRight: '0.2rem', |
| | | fontSize: '2rem', |
| | | }" |
| | | >*</span |
| | | > |
| | | <span |
| | | :style="{ |
| | | fontSize: isMin ? '2rem' : '0.88rem', |
| | | color: 'black', |
| | | fontWeight: bold, |
| | | }" |
| | | >æ£ä¿®é</span |
| | | > |
| | | </div> |
| | | </template> |
| | | <el-input |
| | | style="height: 2rem" |
| | | size="small" |
| | | v-model="formip.addressname" |
| | | placeholder="请è¾å
¥" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer" style="text-align: center"> |
| | | <el-button |
| | | size="small" |
| | | @click="dialogipVisible = false" |
| | | style="height: 2rem; font-size: 0.88rem" |
| | | >åæ¶</el-button |
| | | > |
| | | |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click="saveIp(formipRef)" |
| | | style="height: 2rem; font-size: 0.88rem" |
| | | > |
| | | ä¿å |
| | | </el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <el-dialog v-model="imgdialogVisible" width="35%" top="3vh"> |
| | | <div |
| | | style=" |
| | |
| | | AddUserUnit, |
| | | EditUserUnit, |
| | | DeleteUserUnit, |
| | | GetIPData, |
| | | AddIP, |
| | | EditIP, |
| | | DeleteIP, |
| | | } from "@/api/user"; |
| | | import { useRouter } from "vue-router"; |
| | | import { formatTime } from "@/utils/index.js"; |
| | |
| | | unitName: "", |
| | | }; |
| | | }; |
| | | const resetForm4 = (formEl) => { |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | formip.value = { |
| | | creater: "", |
| | | createDate: "", |
| | | modifier: "", |
| | | modifyDate: "", |
| | | id: 0, |
| | | iPaddress: "", |
| | | addressname: "", |
| | | }; |
| | | }; |
| | | |
| | | const handlePictureCardPreview = (uploadFile) => { |
| | | dialogImageUrl.value = uploadFile.url; |
| | |
| | | trigger: "blur", |
| | | }, |
| | | }); |
| | | const ipRules = reactive({ |
| | | iPaddress: { |
| | | required: true, |
| | | message: "请è¾å
¥IPå°å", |
| | | trigger: "blur", |
| | | }, |
| | | addressname: { |
| | | required: true, |
| | | message: "请è¾å
¥æ£ä¿®é", |
| | | trigger: "blur", |
| | | }, |
| | | }); |
| | | |
| | | const formRole = ref({ |
| | | roleName: "", |
| | | description: "", |
| | |
| | | Unittype.value = "æ°å»º"; |
| | | UnitdialogVisible.value = true; |
| | | }; |
| | | const Addip = () => { |
| | | ipType.value = "æ°å»º"; |
| | | dialogipVisible.value = true; |
| | | }; |
| | | //è·åç¨æ·åä½ |
| | | const getUnit = () => { |
| | | const startTime = formatTime(queryForm.value.selectTime[0]); |
| | |
| | | } else if (isactive.value == 4) { |
| | | selectoptions.value = unitOptions; |
| | | getUnit(); |
| | | } else if ((isactive.value = 5)) { |
| | | getIpData(); |
| | | } |
| | | }; |
| | | |
| | |
| | | ids.value = val.map((item) => item.id); |
| | | }; |
| | | const UnitSelectionChange = (val) => { |
| | | ids.value = []; |
| | | ids.value = val.map((item) => item.id); |
| | | }; |
| | | const IpSelectionChange = (val) => { |
| | | ids.value = []; |
| | | ids.value = val.map((item) => item.id); |
| | | }; |
| | |
| | | DeleteUserUnit(ids.value).then((res) => { |
| | | ElMessage({ message: "å 餿å", type: "success" }); |
| | | getUnit(); |
| | | }); |
| | | } else if (isactive.value == 5) { |
| | | DeleteIP(ids.value).then((res) => { |
| | | ElMessage({ message: "å 餿å", type: "success" }); |
| | | getIpData(); |
| | | }); |
| | | } |
| | | }; |
| | |
| | | ElMessage.error("æ°æ®æäº¤å¤±è´¥"); |
| | | onloading.value.close(); |
| | | registerdialogVisible.value = false; |
| | | // hideLoading(); |
| | | } |
| | | }; |
| | | xmlResquest.send(JSON.stringify({ Base64Image: imgbase64.value })); |
| | | } |
| | | const ipData = ref([]); |
| | | const dialogipVisible = ref(false); |
| | | const ipType = ref("æ°å»º"); |
| | | const formip = ref({ |
| | | creater: "", |
| | | createDate: "", |
| | | modifier: "", |
| | | modifyDate: "", |
| | | id: 0, |
| | | iPaddress: "", |
| | | addressname: "", |
| | | }); |
| | | const formipRef = ref(null); |
| | | //è·åipæ°æ® |
| | | const getIpData = () => { |
| | | // æ¥è¯¢æ¡ä»¶ |
| | | const startTime = formatTime(queryForm.value.selectTime[0]); |
| | | const endTime = formatTime(queryForm.value.selectTime[1]); |
| | | const filter = [ |
| | | { |
| | | name: queryForm.value.selectType, |
| | | value: queryForm.value.selectInput, |
| | | displayType: "like", |
| | | }, |
| | | { name: "createDate", value: startTime, displayType: "ThanOrEqual" }, |
| | | { name: "createDate", value: endTime, displayType: "LessOrEqual" }, |
| | | ]; |
| | | GetIPData({ |
| | | ...pageQuery.value, |
| | | filter, |
| | | }).then((res) => { |
| | | ipData.value = res.rows; |
| | | pageTotal.value = res.total; |
| | | }); |
| | | }; |
| | | const Editip = (val) => { |
| | | ipType.value = "ä¿®æ¹"; |
| | | let obj = Object.assign({}, val); |
| | | formip.value = obj; |
| | | dialogipVisible.value = true; |
| | | }; |
| | | //ä¿åip |
| | | const saveIp = async (formEl) => { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | if (ipType.value == "ä¿®æ¹") { |
| | | EditIP(formip.value).then((res) => { |
| | | ElMessage({ message: "ä¿®æ¹æå", type: "success" }); |
| | | dialogipVisible.value = false; |
| | | getIpData(); |
| | | }); |
| | | } else { |
| | | AddIP(formip.value).then((res) => { |
| | | ElMessage({ message: "æ·»å æå", type: "success" }); |
| | | dialogipVisible.value = false; |
| | | getIpData(); |
| | | }); |
| | | } |
| | | } else { |
| | | console.log("error submit!", fields); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | if (window.innerWidth <= 1080) { |
| | |
| | | flex-direction: column; |
| | | |
| | | .checkbox { |
| | | width: 35rem; |
| | | width: 45rem; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 1rem; |