monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 78426714bb733545feae3565ecaed565fe8bc475 1 parent c0e1e96d master ... master-joke master-prod master-prod-lushangqing master-prod-xwx master-prod-xwx2 master-v32-lushangqing master-v32-lzc master-v32-xwx master-v32-ztq master-yuanjinpeng mater-ztq wangfeng

【#1162】 变更相关业务选项卡配置为字典，建立选项卡组件 #2

Inline Side-by-side
Showing 20 changed files with 726 additions and 483 deletions
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
... ... @@ -2,86 +2,39 @@
<el-row >
<el-col :span="24">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in tabData" :key="index" :label="item.name" :name="item.code">
<el-tab-pane v-for="(item,index) in tabData" :key="index" :label="item.ddicName" :name="item.ddicCode">
<div class="table-container" v-if="item.code=='resourcePer'">
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select clearable multiple v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.kpiId"
:label="item.kpiName"
:value="item.kpiId">
<span style="float: left">{{ item.kpiId }}</span>
<span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.kpiName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData">查询</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="save()" size="small">取消</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">变更</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">导出</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="portSenseConfigData"
:total="count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<!-- <div v-if="prop == 'protocolType'">
<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changePortSense(row,prop,column)" v-model="row.protocolType"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option label="TCP协议" :value="'tcp-port'"></el-option>
<el-option label="UDP协议" :value="'udp-port'"></el-option>
</el-select>
</div>
<div v-else>
<el-input @blur="changePortSense(row,prop,column)"
:type="prop == intervalTime ? 'number' : 'text'"
size="small" placeholder="请填写"v-model="row[prop]">
<template #suffix>
<i class="el-icon-edit-outline"/>
</template>
</el-input>
</div>-->
</template>
<!-- <template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="deleteItem(scope.row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>-->
</cm-table-page>
</el-col>
</el-row>
<div class="table-container" v-if="item.ddicCode=='resourcePer'">
<ResourcePer></ResourcePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='resourceLeader'">
<ResourceLeader></ResourceLeader>
</div>
<div class="table-container" v-else-if="item.ddicCode=='resourceTypePer'">
<ResourceTypePer></ResourceTypePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='bizPer'">
<BizPer></BizPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='bizLeader'">
<BizLeader></BizLeader>
</div>
<div class="table-container" v-else-if="item.ddicCode=='alarmSubPer'">
<AlarmSubPer></AlarmSubPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='rolePer'">
<RolePer></RolePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='topoPer'">
<TopoPer></TopoPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='autoPatrolPortPer'">
<AutoPatrolPortPer></AutoPatrolPortPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='fileManagePer'">
<FileManagePer></FileManagePer>
</div>
<div class="table-container" v-else>{{item.name}}</div>
<div class="table-container" v-else>暂无数据</div>
</el-tab-pane>
</el-tabs>
... ...
export default {
name: 'portSense',
name: 'batchChangeLeaders',
template: '',
components: {
//资源下拉框
'port-sense-select': Vue.defineAsyncComponent(
() => myImport('views/portSenseSelect/index')
//选项卡组件
'ResourcePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourcePer/index')
),
'ResourceLeader': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourceLeader/index')
),
'ResourceTypePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourceTypePer/index')
),
'BizPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/bizPer/index')
),
'BizLeader': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/bizLeader/index')
),
'BlarmSubPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/alarmSubPer/index')
),
'BolePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/rolePer/index')
),
'TopoPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/topoPer/index')
),
'AutoPatrolPortPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/autoPatrolPortPer/index')
),
'FileManagePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/fileManagePer/index')
),
},
data() {
},
props: {
parameter: {
type: Array,
default: []
}
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const tabData=Vue.ref([
{name:'资源权限',code:'resourcePer'},
{name:'资源负责人',code:'resourceLeader'},
{name:'资源类型权限',code:'resourceTypePer'},
{name:'业务（乙方运维）权限',code:'bizPer'},
{name:'业务负责人',code:'bizLeader'},
{name:'告警订阅权限',code:'alarmSubPer'},
{name:'角色权限',code:'rolePer'},
{name:'拓扑负责人',code:'topoPer'},
{name:'自动化巡检报表权限',code:'autoPatrolPortPer'},
{name:'文档管理权限',code:'fileManagePer'}
])
const activeName = Vue.ref(tabData.value[0].code)
const tabData=Vue.ref()
const activeName = Vue.ref('')
const handleClick = (tab, event) => {
console.log(tab, event)
}
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
},
{
prop: 'port',
label: '端口号',
sortable: true,
align: 'center',
},
{
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'state',
label: '资源状态',
sortable: true,
align: 'center',
render: function (row) {
switch (row.state) {
case "new" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
case "monitor" :
return '<button type="button" class="layui-btn layui-btn-radius layui-bg-green layui-btn-xs p-0-15" style="background-color: #0BAC33 !important;">监控中</button>'
case "stop" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-red layui-btn-radius layui-btn-xs p-0-15">暂停</button>'
default :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
}
}
},
{
prop: 'paramDesc',
label: '展示类型',
sortable: true,
align: 'center',
render: function (row) {
if(row.resType == 'HOST_X86SERVER'){
//初始化select内容
/* var html='<div><select data-resId="'+d.resId+'" data-username="'+username+'" data-index="99" name="showType" class="layui-input user_showType" style="min-width: 150px;display: inline">';
showTypeList.value.map((v,i)=>{
if(d.showType == v.value){
html += '<option value="' + v.value + '" selected>' + v.name + '</option> '
}else{
html += '<option value="' + v.value + '">' + v.name + '</option> '
}
})
html+='</select></div>';
return html;*/
}else{
return '';
}
}
}
];
//配置列表总数
let count = Vue.ref(0);
//列表数据
let portSenseConfigData = Vue.ref([]);
//数据库的数据
let portSenseConfigList = Vue.ref([]);
//资源数据
let resIdArr = Vue.ref([]);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let pageSize = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
//下拉框数据
let portSenseSelectData = Vue.ref([]);
//获取列表数据
const getListData = ({page, limit}) => {
//获取传递过来的参数
resIdArr.value = JSON.parse(JSON.stringify(props.parameter));
//传递参数赋值给下拉框
portSenseSelectData.value = resIdArr.value;
let username=proxy.$route.query.username;
let resName=proxy.$route.query.resName;
//定义列表参数
let getParams = {
resIds: resIdArr.value.join(','),
resName: resName,
userId: username,
page: page,
limit: limit
};
proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
if (res && res.success) {
portSenseConfigData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
portSenseConfigList.value = res.data ? JSON.parse(JSON.stringify(res.data)) : [];
}
})
}
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
});
let selectData = val;
if (selectData.length > 0) {
selectData.map((item, index) => {
proxy.portSenseConfigData.map((v, i) => {
if (item.id == v.id) {
v.checked = true;
}
})
})
} else {
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
})
}
}
//删除单个数据
let deleteItem = (row, index) => {
proxy.$global.confirm("确认删除吗？", function () {
deleteItems(row, index);
})
}
//删除多个或单个
let deleteItems = (row, index) => {
//新添加未保存的
let sign = deleteNotSave(row, index);
if (sign) {
return false;
}
proxy.$http.post('/api-web/bResourceExtendParam/deleteConfig', row, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
loadTableDataList({page: 1, limit: pageSize.value});
}
})
}
//删除新添加但未保存的
let deleteNotSave = (row, index) => {
let sign = false;
let list = portSenseConfigData.value;
if(row.id === ""){
portSenseConfigData.value = list.filter((item, i, array) => index !== i);
}
if (list.length > portSenseConfigData.value.length) {
proxy.$global.showMsg('删除成功');
sign = true;
}
return sign;
}
//新增 添加一行数据
let save = () => {
let data = {
id: "",
intervalTime: null,
paramCode: "",
paramDesc: "",
paramValue: "",
port: "",
portDesc: "",
protocolType: "",
resId: "",
resIdList: resIdArr.value,
}
portSenseConfigData.value.push(data);
}
//下拉框值改变事件
let changePortSense = () => {
}
//保存
let conserve = () => {
//数据验证
let msg = verifyData();
if (msg !== "") {
proxy.$global.showMsg(msg, "warning");
return false;
}
//逻辑验证
let identifying = isSave();
if (identifying !== "") {
proxy.$global.showMsg(identifying, "warning");
return false;
}
proxy.$http.post("/api-web/bResourceExtendParam/conserve", portSenseConfigData.value, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！");
loadTableDataList({page: 1, limit: pageSize.value});
}
})
}
//保存表单验证
let verifyData = () => {
let msg = "";
//协议类型不能为空，端口备注不能为空,端口号请输入数字，间隔时长请输入数字，
let list = portSenseConfigData.value;
let li = columns.filter(item => "paramDesc" !== item.prop);
list.forEach(function (item, index, arr) {
li.forEach(function (e, i, array) {
if (item[e.prop] == null || item[e.prop] === '') {
msg = e.label + '不能为空';
} else {
if (['protocolType', 'portDesc'].indexOf(e.prop) === -1 && !/^\d+$/.test(item[e.prop])) {
msg = e.label + '请输入数字';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop].length>=8){
msg = e.label + '不能超过8位';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop]<=0){
msg = e.label + '只能大于零';
}
}
}
}
})
})
return msg
}
//是否可以保存
let isSave = () => {
let msg = "";
//零个资源不用判断
if (resIdArr.value.length === 0) {
return "必须选中资源";
}
//单个资源不用判断
if (resIdArr.value.length === 1) {
return msg;
}
//多个资源时，如果当前已选资源中存在列表新增加的协议类型和端口号对应的数据时，提示不允许进行保存，提示信息中必须包含资源名称+端口类型、端口号，
let list = [];
let arr = [];
portSenseConfigData.value.forEach(item => {
item.resIdList.forEach(map => {
let obj = Object.assign({}, item);
obj["resId"] = map;
obj["resIdList"] = [map];
list.push(obj);
})
});
//查看当前页面数据是否重复
groupByCount(list, arr);
if (arr.length > 0) {
return arr.join(',');
}
//查看当前页面数据跟数据库是否重复
let presentArray = [];
//过滤不是新增的数据
list = list.filter(item => item.id === "");
resIdArr.value.forEach(item => {
let li = [];
let getParams = {
resIds: item,
page: 1,
limit: 9999
};
proxy.$http.get("/api-web/bResourceExtendParam/portSensePage", getParams, function (res) {
if (res && res.success) {
li = res.data ? res.data : [];
list.forEach(e => {
li.forEach(map => {
if (map.resId === e.resId && map.paramCode === e.protocolType && map.port === e.port) {
let obj = Object.assign({}, e);
obj["resName"] = map.resName;
presentArray.push(obj);
}
});
});
}
}, null, null, null, false);
});
presentArray.forEach(item => {
let str = item.resName + "的" + item.paramCode.split("-")[0] + "协议" + "侦测的" + item.port + "端口号已侦测";
arr.push(str);
})
msg = arr.join(',');
return msg;
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
getListData({page, limit});
}
//修改父组件的值
let selectRes = (item) => {
portSenseConfigData.value = item;
}
//数组查找重复数据并统计行数
let groupByCount = (arr, array) => {
let list = [];
arr.sort((a, b) => {
if (a.resId !== b.resId) {
return a.resId < b.resId ? -1 : 1;
} else {
return a.name < b.name ? -1 : 1;
}
});
for (let i = 0; i < arr.length;) {
let count = 0;
for (let j = i; j < arr.length; j++) {
if (arr[i].resId === arr[j].resId && arr[i].protocolType === arr[j].protocolType && arr[i].port === arr[j].port) {
count++;
}
}
list.push({array: arr[i], count: count});
i += count;
}
list.forEach(item => {
if (item.count > 1) {
let str = item.array.resName + "的" + item.array.paramCode.split("-")[0] + "协议" + "侦测的" + item.array.port + "端口号已侦测";
array.push(str);
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
if (res && res.success) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
//获取需变更的选项卡数据
let getBatchChangeData=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/batch_change_leaders", {}, function (res) {
if (res && res.data) {
tabData.value = res.data;
activeName.value=tabData.value[0].ddicCode;
}
})
}
// 挂载完
Vue.onMounted(() => {
getListData({page: 1, limit: pageSize.value});
getBatchChangeData();
})
return {
getBatchChangeData,
activeName,
handleClick,
tabData,
initShowType,
showTypeList,
search,
resTypeOptions,
count,
portSenseConfigData,
columns,
height,
pageSize,
loading,
selectionChange,
deleteItem,
save,
getListData,
loadTableDataList,
changePortSense,
conserve,
selectRes,
portSenseSelectData
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select clearable multiple v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.kpiId"
:label="item.kpiName"
:value="item.kpiId">
<span style="float: left">{{ item.kpiId }}</span>
<span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.kpiName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData">查询</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="save()" size="small">取消</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">变更</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">导出</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="portSenseConfigData"
:total="count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<!-- <div v-if="prop == 'protocolType'">
<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changePortSense(row,prop,column)" v-model="row.protocolType"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option label="TCP协议" :value="'tcp-port'"></el-option>
<el-option label="UDP协议" :value="'udp-port'"></el-option>
</el-select>
</div>
<div v-else>
<el-input @blur="changePortSense(row,prop,column)"
:type="prop == intervalTime ? 'number' : 'text'"
size="small" placeholder="请填写"v-model="row[prop]">
<template #suffix>
<i class="el-icon-edit-outline"/>
</template>
</el-input>
</div>-->
</template>
<!-- <template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="deleteItem(scope.row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>-->
</cm-table-page>
</el-col>
</el-row>
... ...
export default {
name: 'resourcePer',
template: '',
components: {
},
data() {
},
props: {
parameter: {
type: Array,
default: []
}
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
},
{
prop: 'port',
label: '端口号',
sortable: true,
align: 'center',
},
{
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'state',
label: '资源状态',
sortable: true,
align: 'center',
render: function (row) {
switch (row.state) {
case "new" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
case "monitor" :
return '<button type="button" class="layui-btn layui-btn-radius layui-bg-green layui-btn-xs p-0-15" style="background-color: #0BAC33 !important;">监控中</button>'
case "stop" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-red layui-btn-radius layui-btn-xs p-0-15">暂停</button>'
default :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
}
}
},
{
prop: 'paramDesc',
label: '展示类型',
sortable: true,
align: 'center',
render: function (row) {
if(row.resType == 'HOST_X86SERVER'){
//初始化select内容
/* var html='<div><select data-resId="'+d.resId+'" data-username="'+username+'" data-index="99" name="showType" class="layui-input user_showType" style="min-width: 150px;display: inline">';
showTypeList.value.map((v,i)=>{
if(d.showType == v.value){
html += '<option value="' + v.value + '" selected>' + v.name + '</option> '
}else{
html += '<option value="' + v.value + '">' + v.name + '</option> '
}
})
html+='</select></div>';
return html;*/
}else{
return '';
}
}
}
];
//配置列表总数
let count = Vue.ref(0);
//列表数据
let portSenseConfigData = Vue.ref([]);
//数据库的数据
let portSenseConfigList = Vue.ref([]);
//资源数据
let resIdArr = Vue.ref([]);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let pageSize = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
//下拉框数据
let portSenseSelectData = Vue.ref([]);
//获取列表数据
const getListData = ({page, limit}) => {
//获取传递过来的参数
resIdArr.value = JSON.parse(JSON.stringify(props.parameter));
//传递参数赋值给下拉框
portSenseSelectData.value = resIdArr.value;
let username=proxy.$route.query.username;
let resName=proxy.$route.query.resName;
//定义列表参数
let getParams = {
resIds: resIdArr.value.join(','),
resName: resName,
userId: username,
page: page,
limit: limit
};
proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
if (res && res.success) {
portSenseConfigData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
portSenseConfigList.value = res.data ? JSON.parse(JSON.stringify(res.data)) : [];
}
})
}
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
});
let selectData = val;
if (selectData.length > 0) {
selectData.map((item, index) => {
proxy.portSenseConfigData.map((v, i) => {
if (item.id == v.id) {
v.checked = true;
}
})
})
} else {
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
})
}
}
//删除单个数据
let deleteItem = (row, index) => {
proxy.$global.confirm("确认删除吗？", function () {
deleteItems(row, index);
})
}
//删除多个或单个
let deleteItems = (row, index) => {
//新添加未保存的
let sign = deleteNotSave(row, index);
if (sign) {
return false;
}
proxy.$http.post('/api-web/bResourceExtendParam/deleteConfig', row, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
loadTableDataList({page: 1, limit: pageSize.value});
}
})
}
//删除新添加但未保存的
let deleteNotSave = (row, index) => {
let sign = false;
let list = portSenseConfigData.value;
if(row.id === ""){
portSenseConfigData.value = list.filter((item, i, array) => index !== i);
}
if (list.length > portSenseConfigData.value.length) {
proxy.$global.showMsg('删除成功');
sign = true;
}
return sign;
}
//新增 添加一行数据
let save = () => {
let data = {
id: "",
intervalTime: null,
paramCode: "",
paramDesc: "",
paramValue: "",
port: "",
portDesc: "",
protocolType: "",
resId: "",
resIdList: resIdArr.value,
}
portSenseConfigData.value.push(data);
}
//下拉框值改变事件
let changePortSense = () => {
}
//保存
let conserve = () => {
//数据验证
let msg = verifyData();
if (msg !== "") {
proxy.$global.showMsg(msg, "warning");
return false;
}
//逻辑验证
let identifying = isSave();
if (identifying !== "") {
proxy.$global.showMsg(identifying, "warning");
return false;
}
proxy.$http.post("/api-web/bResourceExtendParam/conserve", portSenseConfigData.value, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！");
loadTableDataList({page: 1, limit: pageSize.value});
}
})
}
//保存表单验证
let verifyData = () => {
let msg = "";
//协议类型不能为空，端口备注不能为空,端口号请输入数字，间隔时长请输入数字，
let list = portSenseConfigData.value;
let li = columns.filter(item => "paramDesc" !== item.prop);
list.forEach(function (item, index, arr) {
li.forEach(function (e, i, array) {
if (item[e.prop] == null || item[e.prop] === '') {
msg = e.label + '不能为空';
} else {
if (['protocolType', 'portDesc'].indexOf(e.prop) === -1 && !/^\d+$/.test(item[e.prop])) {
msg = e.label + '请输入数字';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop].length>=8){
msg = e.label + '不能超过8位';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop]<=0){
msg = e.label + '只能大于零';
}
}
}
}
})
})
return msg
}
//是否可以保存
let isSave = () => {
let msg = "";
//零个资源不用判断
if (resIdArr.value.length === 0) {
return "必须选中资源";
}
//单个资源不用判断
if (resIdArr.value.length === 1) {
return msg;
}
//多个资源时，如果当前已选资源中存在列表新增加的协议类型和端口号对应的数据时，提示不允许进行保存，提示信息中必须包含资源名称+端口类型、端口号，
let list = [];
let arr = [];
portSenseConfigData.value.forEach(item => {
item.resIdList.forEach(map => {
let obj = Object.assign({}, item);
obj["resId"] = map;
obj["resIdList"] = [map];
list.push(obj);
})
});
//查看当前页面数据是否重复
groupByCount(list, arr);
if (arr.length > 0) {
return arr.join(',');
}
//查看当前页面数据跟数据库是否重复
let presentArray = [];
//过滤不是新增的数据
list = list.filter(item => item.id === "");
resIdArr.value.forEach(item => {
let li = [];
let getParams = {
resIds: item,
page: 1,
limit: 9999
};
proxy.$http.get("/api-web/bResourceExtendParam/portSensePage", getParams, function (res) {
if (res && res.success) {
li = res.data ? res.data : [];
list.forEach(e => {
li.forEach(map => {
if (map.resId === e.resId && map.paramCode === e.protocolType && map.port === e.port) {
let obj = Object.assign({}, e);
obj["resName"] = map.resName;
presentArray.push(obj);
}
});
});
}
}, null, null, null, false);
});
presentArray.forEach(item => {
let str = item.resName + "的" + item.paramCode.split("-")[0] + "协议" + "侦测的" + item.port + "端口号已侦测";
arr.push(str);
})
msg = arr.join(',');
return msg;
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
getListData({page, limit});
}
//修改父组件的值
let selectRes = (item) => {
portSenseConfigData.value = item;
}
//数组查找重复数据并统计行数
let groupByCount = (arr, array) => {
let list = [];
arr.sort((a, b) => {
if (a.resId !== b.resId) {
return a.resId < b.resId ? -1 : 1;
} else {
return a.name < b.name ? -1 : 1;
}
});
for (let i = 0; i < arr.length;) {
let count = 0;
for (let j = i; j < arr.length; j++) {
if (arr[i].resId === arr[j].resId && arr[i].protocolType === arr[j].protocolType && arr[i].port === arr[j].port) {
count++;
}
}
list.push({array: arr[i], count: count});
i += count;
}
list.forEach(item => {
if (item.count > 1) {
let str = item.array.resName + "的" + item.array.paramCode.split("-")[0] + "协议" + "侦测的" + item.array.port + "端口号已侦测";
array.push(str);
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.get("/api-web/manage/resource/getAllResByUser", {}, function (res) {
if (res && res.success) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
}
})
}
// 挂载完
Vue.onMounted(() => {
getListData({page: 1, limit: pageSize.value});
})
return {
initShowType,
showTypeList,
search,
resTypeOptions,
count,
portSenseConfigData,
columns,
height,
pageSize,
loading,
selectionChange,
deleteItem,
save,
getListData,
loadTableDataList,
changePortSense,
conserve,
selectRes,
portSenseSelectData
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
\ No newline at end of file
... ...