update: 运维管理 数据采集 更换卡片标题省略组件

This commit is contained in:
jackhoo_98 2023-03-17 14:48:59 +08:00
parent d6207f30e0
commit 61b48b50ca
9 changed files with 77 additions and 114 deletions

View File

@ -37,19 +37,6 @@ export const updateStatus = {
}, },
}; };
export const TiTlePermissionButtonStyle = {
padding: 0,
'max-width': 'calc(100% - 90px)',
color: ' #1890ff !important',
'font-weight': 700,
'font-size': '16px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
width: 'calc(100%-150px)',
// width: '60%',
};
export const regOnlyNumber = new RegExp(/^\d+$/); export const regOnlyNumber = new RegExp(/^\d+$/);
export const regIP = new RegExp( export const regIP = new RegExp(

View File

@ -45,15 +45,16 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<PermissionButton <Ellipsis style="width: calc(100% - 100px)">
type="link" <span
@click="handlEye(slotProps.id)" style="
hasPermission="DataCollect/Collector:view" font-size: 16px;
:style="TiTlePermissionButtonStyle" font-weight: 600;
> "
{{ slotProps.name }} >
</PermissionButton> {{ slotProps.name }}
</span>
</Ellipsis>
<j-row class="card-item-content-box"> <j-row class="card-item-content-box">
<j-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
@ -126,11 +127,7 @@ import type { ActionsType } from '@/components/Table/index';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import { query, remove, update } from '@/api/data-collect/channel'; import { query, remove, update } from '@/api/data-collect/channel';
import { onlyMessage } from '@/utils/comm'; import { onlyMessage } from '@/utils/comm';
import { import { StatusColorEnum, updateStatus } from './data';
TiTlePermissionButtonStyle,
StatusColorEnum,
updateStatus,
} from './data';
import { useMenuStore } from 'store/menu'; import { useMenuStore } from 'store/menu';
import Save from './Save/index.vue'; import Save from './Save/index.vue';
import _ from 'lodash'; import _ from 'lodash';
@ -279,9 +276,6 @@ const handlEdit = (data: object) => {
current.value = _.cloneDeep(data); current.value = _.cloneDeep(data);
visible.value = true; visible.value = true;
}; };
const handlEye = (id: string) => {
menuStory.jumpPage(`DataCollect/Collector`, {}, { channelId: id });
};
const saveChange = (value: object) => { const saveChange = (value: object) => {
visible.value = false; visible.value = false;
current.value = {}; current.value = {};

View File

@ -1,4 +1,4 @@
<template lang=""> <template>
<j-modal <j-modal
title="批量编辑" title="批量编辑"
:visible="true" :visible="true"
@ -6,9 +6,8 @@
@cancel="handleCancel" @cancel="handleCancel"
> >
<div class="sizeText"> <div class="sizeText">
将批量修改{{ 将批量修改
data.length {{ data.length }} 条数据的访问类型采集频率只推送变化的数据
}}条数据的访问类型采集频率只推送变化的数据
</div> </div>
<j-form <j-form
class="form" class="form"
@ -62,7 +61,7 @@
/> />
</j-form-item> </j-form-item>
<j-form-item label="" :name="['features']"> <j-form-item :name="['features']">
<j-checkbox-group v-model:value="formData.features"> <j-checkbox-group v-model:value="formData.features">
<j-checkbox value="changedOnly" name="type" <j-checkbox value="changedOnly" name="type"
>只推送变化的数据</j-checkbox >只推送变化的数据</j-checkbox
@ -119,7 +118,7 @@ const checkLength = (_rule: Rule, value: string): Promise<any> =>
}); });
const handleOk = async () => { const handleOk = async () => {
const data: any = await formRef.value?.validate(); const data = cloneDeep(formData.value);
const { accessModes, features, interval } = data; const { accessModes, features, interval } = data;
const ischange = const ischange =
accessModes.length !== 0 || features.length !== 0 || !!interval; accessModes.length !== 0 || features.length !== 0 || !!interval;

View File

@ -115,17 +115,6 @@ const ColumnsHTTP = [
}, },
]; ];
const TiTlePermissionButtonStyle = {
padding: 0,
'max-width': 'calc(100% - 90px)',
color: ' #1890ff !important',
'font-weight': 700,
'font-size': '16px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
};
export { export {
NetworkTypeMapping, NetworkTypeMapping,
ProtocolMapping, ProtocolMapping,
@ -133,5 +122,4 @@ export {
descriptionList, descriptionList,
ColumnsMQTT, ColumnsMQTT,
ColumnsHTTP, ColumnsHTTP,
TiTlePermissionButtonStyle,
}; };

View File

@ -53,15 +53,23 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<PermissionButton <Ellipsis
type="link" style="
@click="handlEye(slotProps.id)" width: calc(100% - 100px);
hasPermission="link/AccessConfig:view" margin-bottom: 10px;
:style="TiTlePermissionButtonStyle" color: #2f54eb;
"
> >
{{ slotProps.name }} <span
</PermissionButton> style="
font-size: 16px;
font-weight: 600;
"
@click.stop="handlEye(slotProps.id)"
>
{{ slotProps.name }}
</span>
</Ellipsis>
<j-row class="card-item-content-box"> <j-row class="card-item-content-box">
<j-col <j-col
:span="12" :span="12"
@ -176,7 +184,6 @@ import {
} from '@/api/link/accessConfig'; } from '@/api/link/accessConfig';
import { onlyMessage } from '@/utils/comm'; import { onlyMessage } from '@/utils/comm';
import { useMenuStore } from 'store/menu'; import { useMenuStore } from 'store/menu';
import { TiTlePermissionButtonStyle } from './data';
const menuStory = useMenuStore(); const menuStory = useMenuStore();
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
@ -368,15 +375,6 @@ const handleSearch = (e: any) => {
.card-item-content { .card-item-content {
min-height: 100px; min-height: 100px;
.card-item-content-title-a {
color: #1890ff !important;
font-weight: 700;
font-size: 16px;
overflow: hidden; //
text-overflow: ellipsis; //
white-space: nowrap; //
}
.card-item-content-box { .card-item-content-box {
min-height: 50px; min-height: 50px;
} }

View File

@ -40,16 +40,21 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<j-tooltip> <Ellipsis
<template #title> style="
{{ slotProps.name }} width: calc(100% - 100px);
</template> margin-bottom: 10px;
<h3 "
class="card-item-content-title card-item-content-title-a" >
<span
style="
font-size: 16px;
font-weight: 600;
"
> >
{{ slotProps.name }} {{ slotProps.name }}
</h3> </span>
</j-tooltip> </Ellipsis>
<j-row class="card-item-content-box"> <j-row class="card-item-content-box">
<j-col <j-col
:span="12" :span="12"
@ -291,14 +296,6 @@ const handleSearch = (e: any) => {
.card-item-content { .card-item-content {
min-height: 100px; min-height: 100px;
.card-item-content-title-a {
color: #000 !important;
font-weight: 700;
font-size: 16px;
overflow: hidden; //
text-overflow: ellipsis; //
white-space: nowrap; //
}
.card-item-content-box { .card-item-content-box {
min-height: 50px; min-height: 50px;
} }

View File

@ -307,14 +307,3 @@ export const Rules = {
}, },
], ],
}; };
export const TiTlePermissionButtonStyle = {
padding: 0,
'max-width': 'calc(100% - 90px)',
color: ' #1890ff !important',
'font-weight': 700,
'font-size': '16px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
};

View File

@ -52,14 +52,23 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<PermissionButton <Ellipsis
type="link" style="
@click="handlEye(slotProps.id)" width: calc(100% - 100px);
hasPermission="link/Type:view" margin-bottom: 10px;
:style="TiTlePermissionButtonStyle" color: #2f54eb;
"
> >
{{ slotProps.name }} <span
</PermissionButton> style="
font-size: 16px;
font-weight: 600;
"
@click.stop="handlEye(slotProps.id)"
>
{{ slotProps.name }}
</span>
</Ellipsis>
<j-row class="card-item-content-box"> <j-row class="card-item-content-box">
<j-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
@ -166,7 +175,6 @@ import type { ActionsType } from '@/components/Table/index';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import { supports, query, remove, start, shutdown } from '@/api/link/type'; import { supports, query, remove, start, shutdown } from '@/api/link/type';
import { onlyMessage } from '@/utils/comm'; import { onlyMessage } from '@/utils/comm';
import { TiTlePermissionButtonStyle } from './data';
import { useMenuStore } from 'store/menu'; import { useMenuStore } from 'store/menu';
const menuStory = useMenuStore(); const menuStory = useMenuStore();

View File

@ -54,12 +54,23 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<h3 <Ellipsis
@click="handlEye(slotProps.id)" style="
class="card-item-content-title card-item-content-title-a" width: calc(100% - 100px);
margin-bottom: 10px;
color: #2f54eb;
"
> >
{{ slotProps.name }} <span
</h3> style="
font-size: 16px;
font-weight: 600;
"
@click.stop="handlEye(slotProps.id)"
>
{{ slotProps.name }}
</span>
</Ellipsis>
<j-row class="card-item-content-box"> <j-row class="card-item-content-box">
<j-col <j-col
:span="8" :span="8"
@ -276,14 +287,6 @@ const handleSearch = (e: any) => {
.card-item-content { .card-item-content {
min-height: 100px; min-height: 100px;
.card-item-content-title-a {
// color: #000 !important;
font-weight: 700;
font-size: 16px;
overflow: hidden; //
text-overflow: ellipsis; //
white-space: nowrap; //
}
.card-item-content-box { .card-item-content-box {
min-height: 50px; min-height: 50px;
} }