代码提交

艺术家

2025-06-11 d55670f86c6ed5a80ae59b7e0f2efc96b02935ca

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/client/src/views/tts/UserManagement/Usermanagement.vue

@@ -26,6 +26,12 @@
        >
          ç”¨æˆ·å•ä½
        </div>
        <div
          :class="['item', isactive == 5 ? 'isactive' : '']"
          @click="changeactive(5)"
        >
          ç”¨æˆ·IP
        </div>
      </div>
      <div class="serch">
        <div class="time_box">
@@ -161,6 +167,31 @@
            ><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;
              font-size: 0.88rem;
              display: flex;
              align-items: center;
            "
            class="text_btn"
            ><el-icon style="margin-right: 0.2rem"> <Plus /> </el-icon
            >新建</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="width: 5.5rem; height: 2rem; font-size: 0.88rem"
            class="text_btn"
            @click="registerdialogVisible = true"
            >人脸注册</el-button
          >
          <el-button
            size="small"
            style="width: 5.5rem; height: 2rem; font-size: 0.88rem"
@@ -243,8 +274,8 @@
            min-width="2%"
          >
            <template #default="scope">
              <span v-if="scope.row.isLeader == 0">组员</span>
              <span v-else-if="scope.row.isLeader == 1">组长</span>
              <span v-if="scope.row.isLeader == 0">二级</span>
              <span v-else-if="scope.row.isLeader == 1">一级</span>
            </template>
          </el-table-column>
          <el-table-column
@@ -382,10 +413,10 @@
              >
            </template>
          </el-table-column>
          <el-table-column prop="isLeader" label="组员类型" align="center">
          <el-table-column prop="isLeader" label="用户类型" align="center">
            <template #default="scope">
              <span v-if="scope.row.isLeader == 0">组员</span>
              <span v-else-if="scope.row.isLeader == 1">组长</span>
              <span v-if="scope.row.isLeader == 0">二级</span>
              <span v-else-if="scope.row.isLeader == 1">一级</span>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="备注" align="center" />
@@ -554,6 +585,63 @@
            </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
          >
        </el-table>
      </div>
      <div
        style="
@@ -566,7 +654,7 @@
      >
        <el-pagination
          v-if="isactive == 1"
          size="small"
          size="large"
          background
          layout="prev, pager, next"
          :current-page="pageQuery.page"
@@ -679,7 +767,7 @@
                  <span
                    style="font-size: 0.88rem; color: black; font-weight: bold"
                    class="from_title"
                    >用户角色
                    >角色名字
                  </span>
                </div>
              </template>
@@ -1263,6 +1351,120 @@
      </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="
@@ -1281,11 +1483,51 @@
        />
      </div>
    </el-dialog>

    <!-- äººè„¸æ³¨å†Œ -->
    <el-dialog
      v-model="registerdialogVisible"
      title="插件配置"
      width="500"
      :before-close="handleClose"
      top="5vh"
    >
      <template #header="{ titleId }">
        <div class="my-header">
          <h2 :id="titleId" style="font-size: 2rem">人脸录入</h2>
        </div>
      </template>
      <div class="content_register">
        <div class="image-container">
          <img
            src="@/assets/login/headimg.jpg"
            id="img"
            style="width: 100%"
            class="profile-image"
          />
        </div>
        <div class="action-buttons" @click="begin(1)">
          <a href="myapp://" class="btn face-register">
            <i class="fas fa-user-plus"></i> äººè„¸å½•å…¥</a
          >
          <button class="btn submit-data" @click="faceEnter()">
            <i class="fas fa-paper-plane"></i> æäº¤æ•°æ®
          </button>
        </div>
      </div>
      <template #footer>
        <!-- <div class="dialog-footer">
          <el-button type="primary" class="downloadreBtn" @click="download(2)"
            >提交配置</el-button
          >
        </div> -->
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, toRef } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import {
  GetUserList,
  AddUser,
@@ -1304,6 +1546,10 @@
  AddUserUnit,
  EditUserUnit,
  DeleteUserUnit,
  GetIPData,
  AddIP,
  EditIP,
  DeleteIP,
} from "@/api/user";
import { useRouter } from "vue-router";
import { formatTime } from "@/utils/index.js";
@@ -1409,6 +1655,8 @@
const dialogVisible1 = ref(false);
//用户角色新建
const dialogVisible2 = ref(false);
//人脸注册
const registerdialogVisible = ref(false);
//筛选条件
const userOptions = [
  {
@@ -1631,6 +1879,19 @@
    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;
@@ -1664,6 +1925,7 @@
        //   formUser.value.userteam = formUser.value.userteam + "组";
        // }
        formUser.value.isLeader = newRole.value.isLeader;
        formUser.value.rolename = newRole.value.roleName;
        UpdateUser(formUser.value).then((res) => {
          ElMessage({ message: "修改成功", type: "success" });
          dialogVisible.value = false;
@@ -1828,6 +2090,19 @@
    trigger: "blur",
  },
});
const ipRules = reactive({
  iPaddress: {
    required: true,
    message: "请输入IP地址",
    trigger: "blur",
  },
  addressname: {
    required: true,
    message: "请输入检修道",
    trigger: "blur",
  },
});

const formRole = ref({
  roleName: "",
  description: "",
@@ -1993,6 +2268,10 @@
  Unittype.value = "新建";
  UnitdialogVisible.value = true;
};
const Addip = () => {
  ipType.value = "新建";
  dialogipVisible.value = true;
};
//获取用户单位
const getUnit = () => {
  const startTime = formatTime(queryForm.value.selectTime[0]);
@@ -2049,6 +2328,8 @@
  } else if (isactive.value == 4) {
    selectoptions.value = unitOptions;
    getUnit();
  } else if ((isactive.value = 5)) {
    getIpData();
  }
};

@@ -2068,6 +2349,10 @@
  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);
};
@@ -2100,11 +2385,173 @@
      ElMessage({ message: "删除成功", type: "success" });
      getUnit();
    });
  } else if (isactive.value == 5) {
    DeleteIP(ids.value).then((res) => {
      ElMessage({ message: "删除成功", type: "success" });
      getIpData();
    });
  }
};
// ç®¡ç† è·¯ç”±è·³è½¬
const toDetail = (row) => {
  router.push({ name: "permission", state: { info: JSON.stringify(row) } });
};
const interval = ref(null);
const onloading = ref(null);
const baseUrl = "http://192.168.1.103:9093";
const token = ref("");
const imgbase64 = ref("");
let urlPlugin = baseUrl + "/api/UserFace/DownlodaFacePlugin";
let urlPReg = baseUrl + "/api/UserFace/DownloadRegFile";

const getData = (flag) => {
  let url = "http://localhost:9298";
  let xmlResquest = new XMLHttpRequest();
  xmlResquest.open("post", url, true);
  xmlResquest.onload = function (e) {
    if (xmlResquest.status == 200) {
      clearTimeout(interval.value);
      imgbase64.value = xmlResquest.response;
      if (flag == 2) {
        const faceContainer = document.getElementById("face-recognition");
        const faceIcon = faceContainer.querySelector(".face-icon");
        const capturedFace = document.getElementById("captured-face");
        capturedFace.src = "data:image/png;base64," + xmlResquest.response;
        faceIcon.style.display = "none";
        capturedFace.style.display = "block";
        window.URL.revokeObjectURL(url);
        faceRecognitionEvent();
        return;
      } else {
        let img = document.getElementById("img");
        img.src = "data:image/png;base64," + xmlResquest.response;
        window.URL.revokeObjectURL(url);
        // hideLoading();
        onloading.value.close();
        return;
      }
    }
    // hideLoading();
    onloading.value.close();
  };

  xmlResquest.send();
};

const begin = (flag) => {
  if (interval.value) {
    clearTimeout(interval.value);
  }
  onloading.value = ElLoading.service({
    lock: true,
    text: "正在处理中,请稍后...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  interval.value = setInterval(() => {
    getData(flag);
  }, 10000);
};

function faceEnter() {
  token.value = JSON.parse(localStorage.getItem("user")).token;
  console.log(token.value);

  let url = baseUrl + "/api/UserFace/faceEnter";
  let xmlResquest = new XMLHttpRequest();
  xmlResquest.open("post", url, true);
  xmlResquest.setRequestHeader("Content-Type", "application/json");
  xmlResquest.setRequestHeader("Authorization", "Bearer " + token.value);
  xmlResquest.onload = function (e) {
    img.src = "headimg.jpg";
    if (xmlResquest.status == 200) {
      let response = JSON.parse(xmlResquest.response);
      if (response.status) {
        ElMessage.success("人脸录入成功,图片名称：" + response.data);
        onloading.value.close();
        registerdialogVisible.value = false;
        // hideLoading();
      } else {
        ElMessage.error("人脸录入失败，错误信息：" + response.message);
        onloading.value.close();
        registerdialogVisible.value = false;
        // hideLoading();
      }
    } else {
      ElMessage.error("数据提交失败");
      onloading.value.close();
      registerdialogVisible.value = false;
    }
  };
  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 {
        formip.value.creater = JSON.parse(
          localStorage.getItem("user")
        ).userName;
        formip.value.createDate = formatTime(new Date());
        
        AddIP(formip.value).then((res) => {
          ElMessage({ message: "添加成功", type: "success" });
          dialogipVisible.value = false;
          getIpData();
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {
@@ -2273,7 +2720,7 @@
      flex-direction: column;

      .checkbox {
        width: 35rem;
        width: 45rem;
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
@@ -2450,6 +2897,70 @@
    }
  }
}
/* æ·»åŠ å­—体图标库 */
.content_register {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
  .image-container {
    margin-bottom: 25px;
    border: 3px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
  }

  .profile-image {
    display: block;
    width: 200px;
    height: 360px;
    object-fit: cover;
  }

  .action-buttons {
    display: flex;
    gap: 20px;
  }

  .btn,
  a.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
  }

  .face-register {
    background-color: #4e73df;
  }

  .submit-data {
    background-color: #1cc88a;
  }

  /* ç¡®ä¿a标签可点击区域 */
  .btn {
    position: relative;
    z-index: 1;
  }

  /* æ·»åŠ ç‚¹å‡»åé¦ˆ */
  .btn:active {
    transform: scale(0.98);
  }
}
</style>
<style>
.confirmButtonClass {