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 regIP = new RegExp(

View File

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

View File

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

View File

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

View File

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

View File

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