(el-Transfer)操作(不使用 ts):Element-plus 中 Select 组件动态设置 options 值需求的解决过程

Ⅰ、Element-plus 提供的Select选择器组件与想要目标情况的对比:

1、Element-plus 提供Select组件情况:

其一、Element-ui 自提供的Select代码情况为(示例的代码):
在这里插入图片描述



// Element-plus 提供的组件代码:
<template>
  <div class="flex flex-wrap gap-4 items-center">
    <el-select
      v-model="value"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="value" placeholder="Select" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="value"
      placeholder="Select"
      size="small"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>


代码地址:https://element-plus.org/zh-CN/component/select.html

其二、页面的显示情况为:

在这里插入图片描述

Ⅱ、在项目中使用 Select 组件遇到的问题:

1、在 table 表格中选中配置操作后,属性值(即:Rpl Port)中的 Select 组件的 options 选项动态展示的操作:

其一、需求描述:

Select 组件的 options 选项中,需要根据不同的 环ID 值来展示不同的 Rpl Port 属性的选项值;
因此此时需要涉及两个接口的问题,第一个接口来获取本页面所要展示的属性值,另一个接口来获取对应 环ID 值来展示的 Rpl Port 属性的选项值;

在这里插入图片描述

在这里插入图片描述

Step1、分别获取两个接口所对应的数据值:
A、获取第一个接口数据的代码:

// 因为此时的代码设置了后台返回的数据值,因此看起来比较冗余,但其实就是个获取页面数据的 get 请求;
// 一进入该页面就需要调用接口来拿到数据值,而此时的 (start, limit) 参数,是因为分页组件的原因,后面会提到;
// 而此时的 get_eastandwest_port(start, limit) 方法,是获取第二个接口数据的方法;

// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
  get_eastandwest_port(start, limit)
  console.log('TODO: GET /api/erps/cfg')
  //按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
  // const resp = await axios.get('/api/erps/cfg', {
  //   params: {
  //     start: start,
  //     limit: limit,
  //   },
  // })
  const resp = {
  "total": 15,
  "data": [ 

  {

  "ring_id": "1",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "2",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "3",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "4",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "5",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "6",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "7",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "8",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "9",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "10",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ]
  }
  console.log(resp, 1111111)
  console.log(resp.data, 222222)
  console.log(resp.data.data, 33333333)
  // if (resp?.status === 200 && resp?.data?.data) {
  //   tableData.value = resp.data.data
  //   Total.value = resp.data.total
  // }
  if (resp?.data) {
    tableData.value = resp.data
    Total.value = resp.total
  }
}


B、获取第二个接口数据的代码:

// 此时会将第二个接口获得的数据放在页面已经定义的 eastAndWestData 变量中;

// 获取东向端口及西向端口的页面数据操作:
const get_eastandwest_port = async (start, limit) => {
  console.log('TODO: GET /api/erps/ring/mgmt')
  //按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
  // const resp = await axios.get('/api/erps/ring/mgmt', {
  //   params: {
  //     start: start,
  //     limit: limit,
  //   },
  // })
  const resp = {
  "total": 15,
  "existing_rings": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
  "data": [ 

  {

  "del": false,
  "enable": false,
  "ring_id": "1",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "2",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "3",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "4",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "5",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "6",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "7",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "8",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "9",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "10",
  "eport": "GigabitEthernet0/4",
  "wport": "GigabitEthernet0/5",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ]
  }
  console.log(resp, 4444444)
  console.log(resp.data, 55555555)
  console.log(resp.data.data, 666666666)
  // if (resp?.status === 200 && resp?.data?.data) {
  //   eastAndWestData.value = resp.data.data
  // }
  if (resp?.data) {
    eastAndWestData.value = resp.data
  }
  console.log(eastAndWestData.value, 7777777777) // eport、wport
  console.log(eastAndWestData.value[0], 888888888) // eport、wport
  console.log(eastAndWestData.value[0].eport, 88889999) // eport、wport
}


Step2、在点击配置操作后,动态获取 Rpl Port 属性的 options 值:
A、代码:

// 此时的 (index,row) 参数值是 table 表格中对应行的索引值和属性值;
// 此时的 allRplPortOptions 是在点击配置后,Rpl Port 可能存在的所有情况,以备下面做 Ring Type 属性与 Rpl Port 属性的联动操作;
// 此时的 rplPortOptions 值是 Rpl Port 属性的 options 的值,其会根据不同的 index 索引值来在 eastAndWestData(第二个接口获取的值) 中获取要展示的 options(即:rplPortOptions) 值;
// 此时也涉及联动的问题:在 Ring Type 属性值为 'non_rpl' 时,Rpl Port 属性默认展示为 0;  而在 Ring Type 属性值为其它时,Rpl Port 属性默认展示为从 eastAndWestData 值中拿到的要展示的 options(即:rplPortOptions) 值;

// 即:此时就能动态展示 Select 组件的 options 值的需求;

// 点击 table 表格中的配置所触发的操作:
const handleEdit = (index,row) => {
  console.log(index,1122334);
  console.log(row,5566778);
  console.log(row.ring_id,7788991);
  allRplPortOptions.value = [
    {
      value: '0',
      label: '0',
    },
    {
      value: eastAndWestData.value[index].eport,
      label: eastAndWestData.value[index].eport,
    },
    {
      value: eastAndWestData.value[index].wport,
      label: eastAndWestData.value[index].wport,
    }
  ]
  if(row.ring_type === 'non_rpl') {
    rplPortOptions.value = [{
      value: '0',
      label: '0',
    },]
  } else {
    rplPortOptions.value = [
      {
        value: eastAndWestData.value[index].eport,
        label: eastAndWestData.value[index].eport,
      },
      {
        value: eastAndWestData.value[index].wport,
        label: eastAndWestData.value[index].wport,
      }
    ]
  }
  erpsCfgDialogForm.value.ring_id = row.ring_id,
  erpsCfgDialogForm.value.revertive = row.revertive
  erpsCfgDialogForm.value.tc_propgt = row.tc_propgt
  erpsCfgDialogForm.value.version = row.version
  erpsCfgDialogForm.value.ring_type = row.ring_type
  erpsCfgDialogForm.value.rpl_port = row.rpl_port
  erpsCfgDialogForm.value.holdoff_timer = row.holdoff_timer
  erpsCfgDialogForm.value.guard_timer = row.guard_timer
  erpsCfgDialogForm.value.wtr_timer = row.wtr_timer
  erpsCfgDialogVisible.value = true
}
B、效果展示为:

在这里插入图片描述

// 此时点击配置后的,在 Ring Type 属性默认为 Non RPL(即:'non_rpl')时,Rpl Port 属性的默认值为 0;

在这里插入图片描述

2、Rpl Port 属性与 Ring Type 属性的 Select 组件之间的联动操作:

其一、需求描述:

想让 Ring Type 属性与 Rpl Port 属性之间存在联动关系:
A、在 Ring Type 属性值切换为 Non RPL 时,使得 Rpl Port 属性值仅显示为0
B、在 Ring Type 属性值切换为 RPL OwnerRPL Neighbour 时,使得 Rpl Port 属性值显示为从 eastAndWestData 值中拿到的要展示的 options 值;

Step1、由上述已知(即:上述的动态展示):

table 中点击每一行的配置后,已经根据 Ring Type 的值,使得 Rpl Port 属性的值显示为 0,还是显示为从 eastAndWestData 值中拿到的要展示的 options 值;

Step2、Ring Type 属性的联动操作:
A、代码为:

// @change="handleChange" 是 Select 组件提供的 change 方法;
// 此时的 allRplPortOptions 值是在 table 中点击每一行的配置后,所获得的所有的 Rpl Port 属性可能存在的值;
// 在切换 Ring Type 属性值时,且就会触发 handleChange 函数,然后根据 Ring Type 的值是 'non_rpl' 就使 Rpl Port 属性值展示为 0; 若 Ring Type 的值不是 'non_rpl' ,那么就使  Rpl Port 属性值展示为从 eastAndWestData 值中拿到的要展示的 options 值(即:也就是 allRplPortOptions.value.slice(1, 3) 存储的值);

//切换 Ring Type 下拉框所触发的函数;
const handleChange = (val) => {
  console.log(val, 112233)
  if (val === 'non_rpl') {
    erpsCfgDialogForm.value.rpl_port = 0
    rplPortOptions.value = [
      {
        value: '0',
        label: '0',
      },
    ]
  } else {
    erpsCfgDialogForm.value.rpl_port = ''
    rplPortOptions.value = allRplPortOptions.value.slice(1, 3)
  }
}


B、效果展示为:

// 在 Ring Type 属性值为 'non_rpl' 时,Rpl Port 属性值为 0

在这里插入图片描述

// 在 Ring Type 属性值不是 'non_rpl' 时,Rpl Port 属性值为两个端口值(即:就是从 eastAndWestData 值中拿到的要展示的 options 值(即:也就是 allRplPortOptions.value.slice(1, 3) 存储的值));

在这里插入图片描述

3、Rpl Port 属性的 Select 组件不能为空的校验规则:

其一、需求描述:

在提交整个配置的 form 表单之前,需要所有的校验都通过后,才能调用下发参数的接口;
而对于 Rpl Port 属性值的需求是,不能为空,否则下发有问题,因此需要对 Rpl Port 属性进行防空校验;

Step1、校验规则:
A、代码为:

// 此时的 holdoff_timer 属性、guard_timer 属性、wtr_timer 属性是对其它的校验规则;
// 而 rpl_port 属性是对 Rpl Port 属性值的校验,且此时触发 rpl_port 属性的方式是 change(即:Rpl Port 属性值发生改变后就会触发校验),在 Rpl Port 属性值为空时就会有提示,且在校验不通过的情况下不能调用接口和下发参数;

// erpsCfg 的规则配置:
const erpsCfgRules = ref({
  holdoff_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern:
        /^(([0-9])|([1-9][0-9])|([1-9][0-9][0-9]|[1-9][0-9][0-9][0-9]|10000))$/,
      message: '请填写0~10000的值',
      trigger: 'blur',
    },
  ],
  guard_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern: /^([1-9][0-9]|([1-9][0-9][0-9]|1[0-9][0-9][0-9]|2000))$/,
      message: '请填写10~2000的值',
      trigger: 'blur',
    },
  ],
  wtr_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern: /^([1-9]|(1[0-2]))$/,
      message: '请填写1~12的值',
      trigger: 'blur',
    },
  ],
  rpl_port: [
    { required: true, message: '此处不能为空', trigger: 'change' }, // 此时是防空判断
  ],
})


B、结果为:

// 在 Rpl Port 属性值为空时,校验报错;

在这里插入图片描述

Ⅲ、解决在项目中遇到的其它问题:

1、分页组件的使用过程:

其一、代码为:
// 此时页面使用的 el-pagination 组件情况,Total 是从后台获取的,来决定总共有多少页;
// 此时的 @current-change="handleCurrentChange" 函数是切换第几页后触发的函数;
<div class="project_bottom">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="true"  layout="prev, pager, next, jumper" :total="Total" @current-change="handleCurrentChange"/>
</div>

// 此时的 get_erps_configuration(pageSize.value * (currentPage.value - 1),pageSize.value) 中的两个参数,分别表示从哪个值开始(即:start 值),每次获取的值是多少条(即:limit);

onMounted(() => {
  erps_configuration_refresh()
})

// 刷新页面:
const erps_configuration_refresh = () => {
  get_erps_configuration(
    pageSize.value * (currentPage.value - 1),
    pageSize.value,
  )
}

// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
  get_eastandwest_port(start, limit)
  console.log('TODO: GET /api/erps/cfg')
  //按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
  // const resp = await axios.get('/api/erps/cfg', {
  //   params: {
  //     start: start,
  //     limit: limit,
  //   },
  // })
  const resp = {
  "total": 15,
  "data": [ 

  {

  "ring_id": "1",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "2",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "3",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "4",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "5",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "6",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "7",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "8",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "9",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "10",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ]
  }
  console.log(resp, 1111111)
  console.log(resp.data, 222222)
  console.log(resp.data.data, 33333333)
  // if (resp?.status === 200 && resp?.data?.data) {
  //   tableData.value = resp.data.data
  //   Total.value = resp.data.total
  // }
  if (resp?.data) {
    tableData.value = resp.data
    Total.value = resp.total
  }
}



// 此时是调用 handleCurrentChange() 函数,且默认传值为 val,然后再调用想要页的数据值;

// 实现页面的分页效果;
const handleCurrentChange = (val) => {
  get_erps_configuration(pageSize.value * (val - 1), pageSize.value)
}


其二、页面展示为:

在这里插入图片描述

2、去掉弹窗右上角的X号样式的操作:

其一、代码为:

// 此时是修改 el-dialog 的样式代码;

//去掉 dialog 右侧的 X 标记;
::v-deep(.el-dialog) {
  .el-dialog__header {
    .el-dialog__headerbtn {
      font-size: 30px;
      // display: none;
      .el-dialog__close {
        color: red;
        display: none;  
      }
    }        
    // .el-dialog__close {
    //   color: red;
    //   display: none;  
    // }
  }
  // 修改操作按钮与整个 form 表单的距离;
  .el-dialog__footer {
    margin-top: -30px !important;
  }
}


其二、页面展示为:

// 修改样式后,此时的配置弹窗右侧就不再有X号的样式;

在这里插入图片描述

Ⅳ、整体代码的面貌:

其一、整体代码为:



<script setup>
import axios from 'axios'
import { ref, onMounted, inject } from 'vue'
const rootapi = inject('rootapi')

import { ElMessage } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(10)
const Total = ref()
const tableData = ref([])
const eastAndWestData = ref([])
const erpsCfgDialogVisible = ref(false)
const erpsCfgDialogFormRef = ref(null)

const erpsCfgLabelWidth = '135px'

const versionOptions = ref([
  {
    value: 'v1',
    label: 'V1',
  },
  {
    value: 'v2',
    label: 'V2',
  },
])

const ringTypeOptions = ref([
  {
    value: 'non_rpl',
    label: 'Non RPL',
  },
  {
    value: 'rpl_owner',
    label: 'RPL Owner',
  },
  {
    value: 'rpl_neighbour',
    label: 'RPL Neighbour',
  },
])

const allRplPortOptions = ref([])

const rplPortOptions = ref([])

const erpsCfgDialogForm = ref({})

// 设置表格每一行的背景色;
const tableRowClassName = (val) => {
  if (val.rowIndex % 2 === 0) {
    return 'success-row'
  } else {
    return 'warning-row'
  }
}

onMounted(() => {
  erps_configuration_refresh()
})

// 刷新页面:
const erps_configuration_refresh = () => {
  get_erps_configuration(
    pageSize.value * (currentPage.value - 1),
    pageSize.value,
  )
}

// 实现页面的分页效果;
const handleCurrentChange = (val) => {
  get_erps_configuration(pageSize.value * (val - 1), pageSize.value)
}

// 获取页面数据操作
const get_erps_configuration = async (start, limit) => {
  get_eastandwest_port(start, limit)
  console.log('TODO: GET /api/erps/cfg')
  //按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
  // const resp = await axios.get('/api/erps/cfg', {
  //   params: {
  //     start: start,
  //     limit: limit,
  //   },
  // })
  const resp = {
  "total": 15,
  "data": [ 

  {

  "ring_id": "1",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "2",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "3",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "4",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "5",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "6",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "7",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "8",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "9",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ,
  {

  "ring_id": "10",
  "revertive": true,
  "tc_propgt": false,
  "version": "v2",
  "holdoff_timer": "0",
  "guard_timer": "500",
  "wtr_timer": "5",
  "ring_type": "non_rpl",
  "rpl_port": "0"}
  ]
  }
  console.log(resp, 1111111)
  console.log(resp.data, 222222)
  console.log(resp.data.data, 33333333)
  // if (resp?.status === 200 && resp?.data?.data) {
  //   tableData.value = resp.data.data
  //   Total.value = resp.data.total
  // }
  if (resp?.data) {
    tableData.value = resp.data
    Total.value = resp.total
  }
}

// 获取东向端口及西向端口的页面数据操作:
const get_eastandwest_port = async (start, limit) => {
  console.log('TODO: GET /api/erps/ring/mgmt')
  //按道理应该有的获取数据的格式,但是自己手动设置是不能用如下获取数据;
  // const resp = await axios.get('/api/erps/ring/mgmt', {
  //   params: {
  //     start: start,
  //     limit: limit,
  //   },
  // })
  const resp = {
  "total": 15,
  "existing_rings": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
  "data": [ 

  {

  "del": false,
  "enable": false,
  "ring_id": "1",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "2",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "3",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "4",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "5",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "6",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "7",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "8",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "9",
  "eport": "GigabitEthernet0/1",
  "wport": "GigabitEthernet0/2",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ,
  {

  "del": false,
  "enable": false,
  "ring_id": "10",
  "eport": "GigabitEthernet0/4",
  "wport": "GigabitEthernet0/5",
  "vlan": "1",
  "ring_type": "major",
  "sub_to_mjr": "0"}
  ]
  }
  console.log(resp, 4444444)
  console.log(resp.data, 55555555)
  console.log(resp.data.data, 666666666)
  // if (resp?.status === 200 && resp?.data?.data) {
  //   eastAndWestData.value = resp.data.data
  // }
  if (resp?.data) {
    eastAndWestData.value = resp.data
  }
  console.log(eastAndWestData.value, 7777777777) // eport、wport
  console.log(eastAndWestData.value[0], 888888888) // eport、wport
  console.log(eastAndWestData.value[0].eport, 88889999) // eport、wport
}

// 点击 table 表格中的配置所触发的操作:
const handleEdit = (index, row) => {
  console.log(index, 1122334)
  console.log(row, 5566778)
  console.log(row.ring_id, 7788991)
  allRplPortOptions.value = [
    {
      value: '0',
      label: '0',
    },
    {
      value: eastAndWestData.value[index].eport,
      label: eastAndWestData.value[index].eport,
    },
    {
      value: eastAndWestData.value[index].wport,
      label: eastAndWestData.value[index].wport,
    },
  ]
  if (row.ring_type === 'non_rpl') {
    rplPortOptions.value = [
      {
        value: '0',
        label: '0',
      },
    ]
  } else {
    rplPortOptions.value = [
      {
        value: eastAndWestData.value[index].eport,
        label: eastAndWestData.value[index].eport,
      },
      {
        value: eastAndWestData.value[index].wport,
        label: eastAndWestData.value[index].wport,
      },
    ]
  }
  ;(erpsCfgDialogForm.value.ring_id = row.ring_id),
    (erpsCfgDialogForm.value.revertive = row.revertive)
  erpsCfgDialogForm.value.tc_propgt = row.tc_propgt
  erpsCfgDialogForm.value.version = row.version
  erpsCfgDialogForm.value.ring_type = row.ring_type
  erpsCfgDialogForm.value.rpl_port = row.rpl_port
  erpsCfgDialogForm.value.holdoff_timer = row.holdoff_timer
  erpsCfgDialogForm.value.guard_timer = row.guard_timer
  erpsCfgDialogForm.value.wtr_timer = row.wtr_timer
  erpsCfgDialogVisible.value = true
}

// erpsCfg 的规则配置:
const erpsCfgRules = ref({
  holdoff_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern:
        /^(([0-9])|([1-9][0-9])|([1-9][0-9][0-9]|[1-9][0-9][0-9][0-9]|10000))$/,
      message: '请填写0~10000的值',
      trigger: 'blur',
    },
  ],
  guard_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern: /^([1-9][0-9]|([1-9][0-9][0-9]|1[0-9][0-9][0-9]|2000))$/,
      message: '请填写10~2000的值',
      trigger: 'blur',
    },
  ],
  wtr_timer: [
    { required: true, message: '此处不能为空', trigger: 'blur' }, // 此时是防空判断;
    {
      pattern: /^([1-9]|(1[0-2]))$/,
      message: '请填写1~12的值',
      trigger: 'blur',
    },
  ],
  rpl_port: [
    { required: true, message: '此处不能为空', trigger: 'change' }, // 此时是防空判断
  ],
})

//切换 Ring Type 下拉框所触发的函数;
const handleChange = (val) => {
  console.log(val, 112233)
  if (val === 'non_rpl') {
    erpsCfgDialogForm.value.rpl_port = 0
    rplPortOptions.value = [
      {
        value: '0',
        label: '0',
      },
    ]
  } else {
    erpsCfgDialogForm.value.rpl_port = ''
    rplPortOptions.value = allRplPortOptions.value.slice(1, 3)
  }
}

// QOS-Storm-Control 配置的提交操作;
const erpsCfgonSubmit = async () => {
  if (!erpsCfgDialogFormRef.value) return
  erpsCfgDialogFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        let url = '/api/erps/cfg'
        let obj = erpsCfgDialogForm.value
        const res = await axios.post(url, new URLSearchParams(obj))
        if (res.status === 200) {
          ElMessage({ message: '添加成功!', type: 'success' })
          erpsCfgDialogVisible.value = false
          // 更新 ERPS 配置配置表;
          get_erps_configuration(
            pageSize.value * (currentPage.value - 1),
            pageSize.value,
          )
          erpsCfgCancle()
        } else if (res.status === 400) {
          ElMessage.error('添加失败!' + res.message)
          erpsCfgDialogVisible.value = false
        }
      } catch (err) {
        erpsCfgDialogVisible.value = false
        if (err.response) {
          let resp = err.response
          rootapi.show_dialog(
            'unexpected error for POST /api/erps/cfg:',
            resp.data,
            true,
          )
        } else {
          rootapi.show_dialog('unexpected frontend error:', err.message, true)
        }
      }
    }
  })
}

// 表单的取消操作:
const erpsCfgCancle = () => {
  erpsCfgDialogVisible.value = false
  if (!erpsCfgDialogFormRef.value) return
  erpsCfgDialogFormRef.value.resetFields()
}
</script>

<template>
  <div class="erps_cfg_layout">
    <div class="my_project">
      <div class="project_title">ERPS配置</div>
      <el-table
        :data="tableData"
        style="width: 100%"
        min-height="439"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="ring_id"
          label="环ID"
          align="center"
          width="60"
        ></el-table-column>
          <el-table-column prop="revertive" label="Revertive" align="center"  min-width="120"/>
          <el-table-column prop="tc_propgt" label="TC Propagation" align="center"  min-width="150"/>
          <el-table-column prop="version" label="协议版本" align="center"  min-width="120"/>
          <el-table-column prop="ring_type" label="Ring Type" align="center"  min-width="150"/>
          <el-table-column prop="rpl_port" label="Rpl Port" align="center"  min-width="150"/>
          <el-table-column prop="holdoff_timer" label="Holdoff定时器" align="center"  min-width="150"/>
          <el-table-column prop="guard_timer" label="Guard定时器" align="center"  min-width="150"/>
          <el-table-column prop="wtr_timer" label="WTR定时器" align="center"  min-width="150"/>
          <el-table-column prop="option" label="操作" align="center"  min-width="150">
            <template #default="scope">
              <el-button size="small" type="primary" @click="handleEdit(scope.$index,scope.row)"><el-icon :size="20" style="margin-right: 5px;"><Edit /></el-icon>配置</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div class="project_bottom">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="true"  layout="prev, pager, next, jumper" :total="Total" @current-change="handleCurrentChange"/>
      </div>
    </div>
    <el-dialog v-model="erpsCfgDialogVisible" title="配置" width="30%" center :close-on-click-modal="false">
      <el-form :model="erpsCfgDialogForm" ref="erpsCfgDialogFormRef" :rules="erpsCfgRules" class="demo-ruleForm" status-icon>
        <el-form-item label="环ID:" prop="ring_id" :label-width="erpsCfgLabelWidth">
          <el-input v-model="erpsCfgDialogForm.ring_id" disabled autocomplete="off"/>
        </el-form-item>
        <el-form-item label="Revertive:" prop="revertive" :label-width="erpsCfgLabelWidth">
          <el-switch v-model="erpsCfgDialogForm.revertive"/>
        </el-form-item>
        <el-form-item label="TC Propagation:" prop="tc_propgt" :label-width="erpsCfgLabelWidth">
          <el-switch v-model="erpsCfgDialogForm.tc_propgt"/>
        </el-form-item>
        <el-form-item label="协议版本:" prop="version" :label-width="erpsCfgLabelWidth">
          <el-select v-model="erpsCfgDialogForm.version" class="m-2" placeholder="Select">
            <el-option v-for="item in versionOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Ring Type:" prop="ring_type" :label-width="erpsCfgLabelWidth">
          <el-select v-model="erpsCfgDialogForm.ring_type" class="m-2" placeholder="Select" @change="handleChange">
            <el-option v-for="item in ringTypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Rpl Port:" prop="rpl_port" :label-width="erpsCfgLabelWidth">
          <el-select v-model="erpsCfgDialogForm.rpl_port" class="m-2" placeholder="Select">
            <el-option v-for="item in rplPortOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item  label="Holdoff定时器:" prop="holdoff_timer" :label-width="erpsCfgLabelWidth">
          <el-input v-model="erpsCfgDialogForm.holdoff_timer" autocomplete="off"/>
        </el-form-item>
        <el-form-item  label="Guard定时器:" prop="guard_timer" :label-width="erpsCfgLabelWidth">
          <el-input v-model="erpsCfgDialogForm.guard_timer" autocomplete="off"/>
        </el-form-item>
        <el-form-item  label="WTR定时器:" prop="wtr_timer" :label-width="erpsCfgLabelWidth">
          <el-input v-model="erpsCfgDialogForm.wtr_timer" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog_footer">
          <el-button type="primary" @click="erpsCfgonSubmit"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>提交</el-button>
          <el-button @click="erpsCfgCancle(erpsCfgDialogFormRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.erps_cfg_layout {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  // 表格表头的背景色;
  ::v-deep(.el-table th) {
    // 设置的表头的背景颜色;
    // background-color: #96b6cc;
    background-color: #e6f1f9;
  }
  //将表格的每一行悬停的背景色都设置为:transparent;
  ::v-deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: #afc4d3;
  }
  ::v-deep(.el-table) {
    // font-size: 12px; // 此时会设置整个 table 表格文字变得很小
  }
  // 表格表头的下边框;
  ::v-deep(.el-table th.is-leaf) {
    border-bottom: 1px solid #557A95;
    font-weight: 700;
    // font-size: 14px; // 此时是设置表格头下边框的文字大小;
    color: black;
  }
  // 设置隔行的背景色
  ::v-deep(.el-table .warning-row) {
      background-color: #d6e6f5;
    }
    ::v-deep(.el-table .success-row) {
      background-color: #e6f1f9;
    }
  .my_project {
    margin: 20px;
    .project_title {
      text-align: center;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .project_bottom {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep(.el-pagination) {
        .el-pager {
          .number {
            background-color: #e6f1f9;
          }
          .is-active { 
            background-color: #e6f1f9;
          }
          .more {
            background-color: #e6f1f9;
          }
        }
        .btn-next,
        .btn-prev {
          background-color: #e6f1f9;
        }
      }
    }
  }
}

//去掉 dialog 右侧的 X 标记;
::v-deep(.el-dialog) {
  .el-dialog__header {
    .el-dialog__headerbtn {
      font-size: 30px;
      // display: none;
      .el-dialog__close {
        color: red;
        display: none;  
      }
    }        
    // .el-dialog__close {
    //   color: red;
    //   display: none;  
    // }
  }
  // 修改操作按钮与整个 form 表单的距离;
  .el-dialog__footer {
    margin-top: -30px !important;
  }
}
</style>


其二、整体页面的展示为:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Ⅴ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话,也可以多多关注这个专栏(Java)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/710981.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# 中的日志记录技术详细解析与示例

文章目录 1. C# 日志记录的基本概念与重要性2. C# 中的日志记录主要方法使用 Console.WriteLine使用 System.Log* 类使用第三方日志库 3. 创建和配置日志记录器的基本步骤4. 不同情境下的日志记录应用示例示例 1&#xff1a;使用 Console.WriteLine示例 2&#xff1a;使用 Debu…

代码随想录——组合总和(Leetcode LCR81)

题目链接 回溯 class Solution {List<List<Integer>> res new ArrayList<List<Integer>>();List<Integer> list new ArrayList<Integer>();public List<List<Integer>> combinationSum(int[] candidates, int target) {b…

智能计算系统-概述

1、人工智能技术分层 2、人工智能方向人才培养 3、课程体系的建议 4、智能系统课程对学生的价值 5、智能计算系统对老师的价值 6、什么是智能计算系统 7、智能计算系统的形态 8、智能计算系统具有重大价值 9、智能计算系统的三大困难 10、开创深度学习处理器方向 11、寒武纪的国…

关于钽电容器的作用、优缺点、选型指南及故障诊断方法等介绍

钽电容器&#xff0c;全称为钽电解电容器&#xff0c;是一种以金属钽作为介质材料的电解电容器。与传统的电解电容器不同&#xff0c;钽电容器不使用液体电解质&#xff0c;而是利用钽氧化物&#xff08;五氧化二钽&#xff09;作为固态电解质&#xff0c;这使得它们具有更高的…

【立体几何】如何使用两个正方体(特殊骰子)摆出所有日期1~31

问题 如何使用两个正方体(特殊骰子)摆出所有日期? 解答 下标列举了所有日期 日期十位数个位数011号正方体&#xff1a;02号正方体&#xff1a;02号正方体&#xff1a;11号正方体&#xff1a;1021号正方体&#xff1a;02号正方体&#xff1a;02号正方体&#xff1a;21号正方…

找我设计官网的不多了,看到漂亮大气的,还是忍不住分享出来。

现在有客户找我做官网设计&#xff0c;我说&#xff1a;要么搞个高大上个性化定制的&#xff0c;要么就选个模板得了&#xff0c;几千元的网站不上不下&#xff0c;不如不做。 分享一批高大上的网站给老铁们看看。

网络安全 - DNS劫持原理 + 实验

DNS 劫持 什么是 DNS 为什么需要 DNS D N S \color{cyan}{DNS} DNS&#xff08;Domain Name System&#xff09;即域名系统。我们常说的 DNS 是域名解析协议。 DNS 协议提供域名到 IP 地址之间的解析服务。计算机既可以被赋予 IP 地址&#xff0c;也可以被赋予主机名和域名。用…

基于JSP技术的定西扶贫惠农推介系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;JSP 数据库&#xff1a;MySQL 技术&#xff1a;B/S架构、JSP技术 工具&#xff1a;Eclipse、MySQL、Tomcat 系统展示 首…

H5的3D展示有可能代替PC传统3D展示么?

H5的3D展示技术正在快速发展&#xff0c;并且随着5G网络的普及和手机硬件性能的提升&#xff0c;H5的3D展示在某些方面已经能够接近甚至超越传统PC上的3D展示效果&#xff0c;比如 博维数孪 的渲染能力及效果。但H5和PC的3D展示互相之间是各有优势领域和行业支持&#xff0c;短…

机器学习:人工智能的子领域之一

引言 人工智能&#xff08;AI&#xff09;已经成为现代科技的重要组成部分&#xff0c;推动了许多领域的创新与进步。在人工智能的诸多子领域中&#xff0c;机器学习&#xff08;ML&#xff09;无疑是最关键和最具影响力的一个。机器学习通过自动分析和学习数据中的模式&#x…

【ARM Cache 及 MMU 系列文章 1.3 -- 如何判断 L2 Cache 是否实现?】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 CPU Configuration Register代码实现CPU Configuration Register 在 Armv9 架构中,我们可以通过arm 提供的自定义寄存器IMP_CPUCFR_EL1 来判断当前系统中是否实现了 L2 Cache, 如下所…

泰坦尼克号数据集机器学习实战教程

泰坦尼克号数据集是一个公开可获取的数据集&#xff0c;源自1912年沉没的RMS泰坦尼克号事件。这个数据集被广泛用于教育和研究&#xff0c;特别是作为机器学习和数据分析的经典案例。数据集记录了船上乘客的一些信息&#xff0c;以及他们是否在灾难中幸存下来。以下是数据集中主…

IDEA快速入门02-快速入门

二、快速入门 2.1 打开IDEA,点击New一个项目 入口&#xff0c;依次打开 File -> New -> Project。 2.2 使用Spring Initializr方式构建Spring Boot项目 2.3 设置项目所属组、项目名称、java版本等 2.4 选择SpringBoot版本及依赖组件 点击Create进行创建。 2.6 创建成…

OCP-042之:Oracle网络服务

2. Oracle网络服务 2.1 默认监听进程 如果客户端想要连接数据库并管理数据库&#xff0c;需要在服务器端开启监听服务&#xff0c;默认监听的进程LISTENER&#xff1a; [oracleora-server ~]$ cd $ORACLE_HOME/network/admin [oracleora-server admin]$ ll total 16 -rw-r--…

java 基本数据类型及类型转换

Java 基本数据类型 变量就是申请内存来存储值。也就是说&#xff0c;当创建变量的时候&#xff0c;需要在内存中申请空间。 内存管理系统根据变量的类型为变量分配存储空间&#xff0c;分配的空间只能用来储存该类型数据。 因此&#xff0c;通过定义不同类型的变量&#xff…

【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》(完结,附带项目源码)

最终效果 文章目录 最终效果前言素材下载简单搭建环境控制小鸟生成弹簧 限制小鸟的控制范围弹簧线的显示隐藏飞行新增木头木头销毁不同血量的木头状态配置更多物品爆炸效果创建敌人的小猪创建多个小鸟循环游戏结束相机跟随加分特效不同定义技能的鸟加速鸟回旋鸟爆炸鸟效果 轨迹…

可视化图表:如此高颜值柱状图,其实简单配置就能实现。

这不又有某个boss给我图截图一些柱状性图表&#xff0c;说他们的前端觉得很难&#xff0c;说了一堆技术术语&#xff0c;他也不懂&#xff0c;截图我看到后&#xff0c;就给了他一个网址&#xff0c;马上就解决了。 在这里给大家摘录出几个比较有特色的柱状图出来&#xff0c;让…

chatgpt的命令词

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

统计信号处理基础 习题解答10-12

题目&#xff1a; 如果&#xff0c;其中&#xff1a; 对某个&#xff0c;令。证明当时使最大。另外&#xff0c;证明。它们为什么是相同的&#xff1f;如果&#xff0c;基于的的MMSE估计量是什么&#xff1f; 解答&#xff1a; 根据多维高斯分布的定义&#xff0c;可以得到&am…

1.PyQt6库和工具库QTDesigner安装

1.安装PyQT6和pyqt6-tools 1. PyQt6库是PyQt的开发库 2.pyqt6-tool时QTDesigner设计器工具支持库 pip install PyQt6 pip install pyqt6-tools 2.在Pycharm中配置外部工具QTDesigner和PYGIC 配置外部工具QTDesigner 1. QTDesigner是QT界面设计器 2.打开Pycharm->Settin…