客户端监控管理、客户端密管

src/api/classification/densetuArea.js

+import request from '@/utils/request'
+
+/**
+* 显示客户端参数
+*
+* @param projcetId 项目ID
+* @returns 客户端参数信息
+*/
+export function showClientParams(projcetId) {
+  return request({
+      url: '/key/client/showClientParams?projectid=' + projcetId,
+      method: 'get'
+    }) 
+}
+
+/**
+* 保存客户端参数
+*
+* @param {any} data - 需要保存的客户端参数数据
+* @returns {Promise} - 返回Promise对象，用于处理异步请求结果
+*/
+export function saveClientParams(data) {
+  return request({
+      url: '/key/client/saveClientParams',
+      method: 'post',
+      data: data
+    }) 
+}
\ No newline at end of file

src/api/classification/monitorManagement.js

+import request from '@/utils/request'
+
+
+export function ipsList(data) {
+  return request({
+      url: '/jar_socket_controller/ipsList',
+      method: 'post',
+      data: data
+    }) 
+}
+
+export function ipsSave(data) {
+  return request({
+      url: '/jar_socket_controller/ipsSave',
+      method: 'post',
+      data: data
+    }) 
+}
+
+export function list(data) {
+  return request({
+      url: '/jar_socket_controller/list',
+      method: 'post',
+      data: data
+    }) 
+}
+
+export function changeLog(data) {
+  return request({
+      url: '/jar_socket_controller/changeLog',
+      method: 'post',
+      data: data
+    }) 
+}
+
+export function deleteLog(data) {
+  return request({
+      url: '/jar_socket_controller/delete',
+      method: 'post',
+      data: data
+    }) 
+}
+
+
+

src/router/index.js

@@ -93,6 +93,18 @@ export const constantRoutes = [
     component: () => import('@/views/ruleConfig/Dictionary/index'),
     hidden: true
   },
+  {
+    // 客户端密管
+    path: '/classification/DensetuArea',
+    component: () => import('@/views/classification/DensetuArea/index'),
+    hidden: true
+  },
+  {
+    // 客户端监控管理
+    path: '/classification/MonitorManagement',
+    component: () => import('@/views/classification/MonitorManagement/index'),
+    hidden: true
+  },
   // {
   //   // 项目管理
   //   path: '/projectManage',

src/views/classification/DensetuArea/index.vue

+<script setup name="DensetuArea">
+import { ref, toRefs, reactive, getCurrentInstance, proxyRefs, onMounted } from 'vue'
+import { Lock } from '@element-plus/icons-vue'
+import { changeRoute } from '@/utils/switchRoute'
+import { useRouter } from 'vue-router'
+import { showClientParams, saveClientParams } from '@/api/classification/densetuArea.js'
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const projectId = ref('')
+const form = ref({
+    "id": null,
+    "projectid": null,
+    "keylocation": null, // 密钥存放位置 1:缓存 2:文件
+    "encdeclocation": null // 加解密计算位置 0：客户端  1：服务端
+})
+const currentForm = ref({
+    "keylocation": null, // 密钥存放位置 1:缓存 2:文件
+    "encdeclocation": null // 加解密计算位置 0：客户端  1：服务端
+})
+const edit = ref(false)
+
+
+onMounted(()=>{
+  sessionStorage.setItem('projectId', 'fda50ea9-b7fa-4fe4-b368-eebeffded6b6')
+  projectId.value = sessionStorage.getItem('projectId')
+  console.log('projectId',projectId.value)
+  showClientParamsMethod()
+})
+
+/**
+* 获取客户端参数
+*
+* 从服务器获取配置，并将结果设置到表单中
+*/
+function showClientParamsMethod() {
+    console.log('获取配置')
+  showClientParams(projectId.value).then((res) => {
+    form.value.id = res.data.id ? res.data.id : null
+    form.value.projectid = projectId.value
+    form.value.keylocation = res.data.keylocation ? res.data.keylocation : '1'
+    form.value.encdeclocation = res.data.encdeclocation ? res.data.encdeclocation : '0'
+    currentForm.value.keylocation = res.data.keylocation ? res.data.keylocation : '1'
+    currentForm.value.encdeclocation = res.data.encdeclocation ? res.data.encdeclocation : '0'
+  })
+}
+
+/**
+* 保存客户端参数的处理函数
+*/
+function handlerSaveClientParams() {
+    saveClientParams(form.value).then((res) => {
+    console.log('保存配置',res)
+    showClientParamsMethod()
+  })
+}
+
+/**
+* 处理取消事件
+*
+* 当用户点击取消按钮时，调用此函数。
+* 该函数将编辑状态重置为 false，并将表单中的 keylocation 和 encdeclocation 字段
+* 更新为当前表单的对应字段值。
+*/
+function handlerCancle() {
+    edit.value = false
+    form.value.keylocation = currentForm.value.keylocation
+    form.value.encdeclocation = currentForm.value.encdeclocation
+}
+
+function pageProjectManage() {
+
+  changeRoute()
+
+  router.push({
+    path: '/project/Project'
+  })
+}
+defineExpose({
+  // handleRedInk,
+  // handleVoid
+})
+
+</script>
+<template>
+  <div class="app-container scroller">
+    <PageTitle :back="true" @back="pageProjectManage" >
+      <template #title>
+        返回项目管理
+      </template>
+
+    </PageTitle>
+
+    <div class="app-container__body">
+      <div class="flex-container content-container">
+        <div class="secondtitle">
+            <el-icon :size="30" color="#2c9ef7"><Lock /></el-icon>
+            <span>客户端密管</span>
+        </div>
+        <div class="thirdtitle">
+            <span></span>
+            <span>客户端密管设置区域：</span>
+        </div>
+        <el-form :model="form" label-width="auto" style="max-width: 600px;margin-left: 100px;margin-top: 30px;">
+            <el-form-item label="密钥存放位置">
+                <el-select v-model="form.keylocation" placeholder="请选择密钥存放位置" :disabled="!edit">
+                    <el-option label="缓存" value="1" />
+                    <el-option label="文件" value="2" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="加解密计算位置">
+                <el-select v-model="form.encdeclocation" placeholder="请选择加解密计算位置" :disabled="!edit">
+                    <el-option label="客户端" value="0" />
+                    <el-option label="服务端" value="1" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label=" ">
+                <el-button 
+                    type="primary" 
+                    v-if="!edit"
+                    @click="edit = true">
+                    编辑
+                </el-button>
+                <el-button 
+                    type="primary" 
+                    v-if="edit"
+                    @click="edit = true">
+                    取消
+                </el-button>
+                <el-button 
+                    type="primary" 
+                    v-if="edit"
+                    @click="handlerSaveClientParams">
+                    保存配置
+                </el-button>
+            </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.secondtitle {
+    display: flex;
+    align-items: center;
+    color: #2c9ef7;
+    font-size: 16px;
+}
+.thirdtitle {
+    display: flex;
+    align-items: center;
+    color: #2c9ef7;
+    font-weight: bolder;
+    font-size: 18px;
+    margin-top: 30px;
+}
+.thirdtitle > span:nth-child(1) {
+    display: inline-block;
+    width: 5px;
+    height: 20px;
+    font-weight: bolder;
+    margin-right: 5px;
+    background-color: #2c9ef7;
+}
+</style>
+

src/views/classification/DensetuArea/客户端密管

+++ "b/src/views/classification/DensetuArea/\345\256\242\346\210\267\347\253\257\345\257\206\347\256\241"

src/views/classification/MonitorManagement/model/changeLog.vue

+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="'变更记录'"
+    width="80%">
+   
+    <el-table :data="dataList" border style="width: 100%">
+        <el-table-column label="序号" width="60" type="index">
+          <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="变更时间" align="center" width="120"/>
+        <el-table-column prop="rule_str" label="变更规则" align="center" />
+    </el-table>
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.currentpage"
+        v-model:limit="queryParams.pageSize"
+        @pagination="changeLogMethod"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handlerClose">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+
+<script setup>
+
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { changeLog } from '@/api/classification/monitorManagement.js'
+const props = defineProps({
+    hideComponent: {
+        type: Array,
+        default: () => [],
+    }
+})
+const dialogVisible = ref(false);
+const currentStep = ref(1);
+const desensitizationDialogVisible = ref(false);
+const currentField = ref({});
+const dataList = ref([]);
+const queryParams = ref({
+    "currentpage": 1,
+    "pageSize": 10,
+    'clientId': ''
+})
+const total = ref(0)
+
+
+function changeLogMethod() {
+  changeLog(queryParams.value).then(res => {
+    dataList.value = res.data
+    total.value = res.totalCount
+  })
+}
+
+function show(clientId) {
+  queryParams.value.clientId = clientId;
+  queryParams.value.currentpage = 1;
+  changeLogMethod()
+  dialogVisible.value = true;
+}
+
+function handlerClose() {
+  dialogVisible.value = false;
+}
+
+// 关键：通过defineExpose暴露方法，供父组件调用
+defineExpose({
+  show
+});
+</script>
+
+<style scoped lang="scss">
+.step-content {
+  min-height: 400px;
+}
+
+.version-select {
+  margin-bottom: 20px;
+}
+
+.field-selection {
+  display: flex;
+  height: 400px;
+}
+
+.tree-container {
+  width: 250px;
+  height: 400px;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.table-container {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-divider {
+  height: 100%;
+  margin: 0 10px;
+}
+
+.flex-container { 
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.flex1 {
+  flex: 1;
+}
+.version-select-content {
+  margin-left: 15px;
+}
+.pagination {
+    background: #fff;
+    padding: 15px 20px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .pagination-info {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+</style>
\ No newline at end of file

src/views/classification/MonitorManagement/model/errorLog.vue

+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="'变更记录'"
+    width="80%">
+   
+    <el-row style="min-height: 300px;background-color: #000000;color:#FFFFFF;padding: 10px;">
+      {{ errorObj.create_time }} Error | {{ errorObj.clientError }}
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handlerClose">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+
+<script setup>
+
+import { ref, reactive } from 'vue';
+const dialogVisible = ref(false);
+const errorObj = ref({})
+
+
+function show(obj) {
+  errorObj.value = obj;
+  dialogVisible.value = true;
+}
+
+function handlerClose() {
+  dialogVisible.value = false;
+}
+
+// 关键：通过defineExpose暴露方法，供父组件调用
+defineExpose({
+  show
+});
+</script>
+
+<style scoped lang="scss">
+.step-content {
+  min-height: 400px;
+}
+
+.version-select {
+  margin-bottom: 20px;
+}
+
+.field-selection {
+  display: flex;
+  height: 400px;
+}
+
+.tree-container {
+  width: 250px;
+  height: 400px;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.table-container {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-divider {
+  height: 100%;
+  margin: 0 10px;
+}
+
+.flex-container { 
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.flex1 {
+  flex: 1;
+}
+.version-select-content {
+  margin-left: 15px;
+}
+.pagination {
+    background: #fff;
+    padding: 15px 20px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .pagination-info {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+</style>
\ No newline at end of file

src/views/classification/MonitorManagement/客户端监控管理

+++ "b/src/views/classification/MonitorManagement/\345\256\242\346\210\267\347\253\257\347\233\221\346\216\247\347\256\241\347\220\206"