style: 更改设备接入网关部分样式todo
This commit is contained in:
jackhoo_98
parent
878e36a4a7
commit
1e6504b5f3
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -1,14 +1,19 @@
|
|||
<template>
|
||||
<j-card
|
||||
hoverable
|
||||
:class="['card-render', checked === data.id ? 'checked' : '']"
|
||||
:class="[
|
||||
'card-render',
|
||||
'container',
|
||||
checked === data.id ? 'checked' : '',
|
||||
]"
|
||||
@click="checkedChange(data.id)"
|
||||
>
|
||||
<div class="title">
|
||||
<j-tooltip placement="topLeft" :title="data.name">{{
|
||||
data.name
|
||||
}}</j-tooltip>
|
||||
<Ellipsis style="width: calc(100% - 100px); margin-bottom: 24px">
|
||||
{{ data.name }}
|
||||
</Ellipsis>
|
||||
</div>
|
||||
|
||||
<slot name="other"></slot>
|
||||
<div class="desc">
|
||||
<j-tooltip placement="topLeft" :title="data.description">{{
|
||||
|
|
@ -46,16 +51,18 @@ const checkedChange = (id: string) => {
|
|||
.card-render {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: url('/public/images/access.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
// background: url('/public/images/access.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
height: 140px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #e6e6e6;
|
||||
.title {
|
||||
width: calc(100% - 88px);
|
||||
overflow: hidden;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
|
@ -78,8 +85,7 @@ const checkedChange = (id: string) => {
|
|||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
background-color: #2f54eb;
|
||||
background-color: @primary-color;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
> div {
|
||||
|
|
@ -92,11 +98,16 @@ const checkedChange = (id: string) => {
|
|||
}
|
||||
&.checked {
|
||||
position: relative;
|
||||
color: #2f54eb;
|
||||
border-color: #2f54eb;
|
||||
color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
z-index: 0;
|
||||
.checked-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
background: url('/public/images/access-icon.png') no-repeat;
|
||||
background-position: bottom right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,7 @@
|
|||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="480">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="networkList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-row :gutter="[24, 24]" v-if="networkList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in networkList"
|
||||
|
|
@ -62,7 +58,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
/>{{ i.address }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,7 +70,7 @@
|
|||
class="item"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
:text="i.address"
|
||||
/>
|
||||
<span
|
||||
|
|
@ -115,12 +111,8 @@
|
|||
新增
|
||||
</PermissionButton>
|
||||
</div>
|
||||
<j-scrollbar height="480">
|
||||
<j-row
|
||||
:gutter="[24, 24]"
|
||||
v-if="procotolList.length > 0"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<j-scrollbar height="480" style="padding-right: 8px">
|
||||
<j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
|
|
@ -177,24 +169,20 @@
|
|||
</j-form>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-scrollbar height="600">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<div class="config-right-item-title">
|
||||
接入方式
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
<j-scrollbar height="580">
|
||||
<div class="doc">
|
||||
<div>
|
||||
<h1>接入方式</h1>
|
||||
<p>
|
||||
{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
</p>
|
||||
<p>
|
||||
{{ provider.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<div class="config-right-item-title">
|
||||
消息协议
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
<div>
|
||||
<h1>消息协议</h1>
|
||||
<p>
|
||||
{{
|
||||
procotolList.find(
|
||||
(i: any) =>
|
||||
|
|
@ -202,41 +190,32 @@
|
|||
procotolCurrent,
|
||||
).name
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item-context"
|
||||
v-if="config.document"
|
||||
>
|
||||
</p>
|
||||
<p v-if="config.document">
|
||||
<Markdown
|
||||
:source="config.document"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item"
|
||||
v-if="getNetworkCurrent()"
|
||||
>
|
||||
<div class="config-right-item-title">
|
||||
网络组件
|
||||
</div>
|
||||
<div
|
||||
<div v-if="getNetworkCurrent()">
|
||||
<h1>网络组件</h1>
|
||||
<p
|
||||
v-for="i in getNetworkCurrentData()"
|
||||
:key="i.address"
|
||||
>
|
||||
<j-badge
|
||||
:color="getColor(i)"
|
||||
:status="getColor(i)"
|
||||
:text="i.address"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="config-right-item"
|
||||
v-if="
|
||||
config.routes &&
|
||||
config.routes.length > 0
|
||||
"
|
||||
>
|
||||
<div class="config-right-item-title">
|
||||
<h1>
|
||||
{{
|
||||
data.provider ===
|
||||
'mqtt-server-gateway' ||
|
||||
|
|
@ -245,8 +224,8 @@
|
|||
? 'topic'
|
||||
: 'URL信息'
|
||||
}}
|
||||
</div>
|
||||
<j-scrollbar height="200">
|
||||
</h1>
|
||||
<j-scrollbar height="400">
|
||||
<j-table
|
||||
:pagination="false"
|
||||
:rowKey="generateUUID()"
|
||||
|
|
@ -463,7 +442,7 @@ const getNetworkCurrentData = () =>
|
|||
? networkList.value.find((i: any) => i.id === networkCurrent).addresses
|
||||
: [];
|
||||
|
||||
const getColor = (i: any) => (i.health === -1 ? 'red' : 'green');
|
||||
const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
|
||||
|
||||
const getStream = (record: any) => {
|
||||
console.log(222, record);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,18 @@
|
|||
<j-row :gutter="[24, 24]">
|
||||
<j-col :span="12" v-for="item in items.list" :key="item.id">
|
||||
<div class="provider">
|
||||
<div
|
||||
class="card-content-bg1"
|
||||
:style="{
|
||||
background: getBackgroundColor(),
|
||||
}"
|
||||
></div>
|
||||
<div
|
||||
class="card-content-bg2"
|
||||
:style="{
|
||||
background: getBackgroundColor(),
|
||||
}"
|
||||
></div>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="images">
|
||||
|
|
@ -47,6 +59,14 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits(['onClick']);
|
||||
|
||||
const getBackgroundColor = () => {
|
||||
return `linear-gradient(
|
||||
188.4deg,
|
||||
rgba(9, 46, 231, 0.03) 22.94%,
|
||||
rgba(9, 46, 231, 0) 94.62%
|
||||
)`;
|
||||
};
|
||||
|
||||
const click = (value: object) => {
|
||||
emit('onClick', value);
|
||||
};
|
||||
|
|
@ -61,10 +81,11 @@ const click = (value: object) => {
|
|||
.provider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background: url('/public/images/access/background.png') no-repeat;
|
||||
padding: 24px;
|
||||
// background: url('/public/images/access/background.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
|
@ -84,6 +105,33 @@ const click = (value: object) => {
|
|||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
.card-content-bg1 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: 44.65%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.card-content-bg2 {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
height: 100%;
|
||||
width: calc(44.65% + 34px);
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
188.4deg,
|
||||
rgba(229, 0, 18, 0.03) 22.94%,
|
||||
rgba(229, 0, 18, 0) 94.62%
|
||||
);
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
|
|
@ -92,31 +140,40 @@ const click = (value: object) => {
|
|||
width: 100%;
|
||||
.left {
|
||||
display: flex;
|
||||
width: calc(100% - 70px);
|
||||
width: calc(100% - 100px);
|
||||
.images {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
width: calc(100% - 84px);
|
||||
margin: 10px;
|
||||
width: calc(100% - 88px);
|
||||
margin: 8px;
|
||||
margin-left: 24px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
margin-top: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #666666;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,15 +51,12 @@
|
|||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 100px);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #2f54eb;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
"
|
||||
class="card-title"
|
||||
@click.stop="handlEye(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
|
|
@ -71,11 +68,17 @@
|
|||
v-if="slotProps.channelInfo"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
{{ slotProps.channelInfo.name }}
|
||||
</div>
|
||||
<div
|
||||
class="card-item-content-text"
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
v-if="
|
||||
slotProps.channelInfo.addresses
|
||||
"
|
||||
|
|
@ -83,53 +86,51 @@
|
|||
<j-badge
|
||||
:status="getStatus(slotProps)"
|
||||
/>
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0].address
|
||||
}}</template>
|
||||
<span>
|
||||
{{
|
||||
slotProps.channelInfo
|
||||
.addresses[0].address
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="slotProps.protocolDetail"
|
||||
class="card-item-content-text"
|
||||
>
|
||||
<div
|
||||
class="card-item-content-text-title"
|
||||
>
|
||||
<div class="card-item-content-text">
|
||||
协议
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
<j-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}</template>
|
||||
<Ellipsis
|
||||
style="
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
slotProps.protocolDetail
|
||||
.name
|
||||
}}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row>
|
||||
<j-col :span="24">
|
||||
<div class="card-item-content-text">
|
||||
<j-col
|
||||
:span="24"
|
||||
class="card-item-content-description"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>
|
||||
{{
|
||||
getDescription(
|
||||
slotProps,
|
||||
)
|
||||
}}
|
||||
{{ getDescription(slotProps) }}
|
||||
</template>
|
||||
{{ getDescription(slotProps) }}
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
|
|
@ -207,8 +208,8 @@ const columns = [
|
|||
search: {
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
const res = await getProviders();
|
||||
return (res?.result || []).map((item) => ({
|
||||
const res: any = await getProviders();
|
||||
return (res?.result || [])?.map((item: any) => ({
|
||||
lable: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
|
|
@ -339,7 +340,7 @@ const getDescription = (slotProps: Record<string, any>) =>
|
|||
)?.description;
|
||||
|
||||
const getStatus = (slotProps: Record<string, any>) =>
|
||||
slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success';
|
||||
slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'processing';
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
|
|
@ -358,12 +359,29 @@ const handleSearch = (e: any) => {
|
|||
|
||||
.card-item-content {
|
||||
min-height: 100px;
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.card-item-content-box {
|
||||
min-height: 50px;
|
||||
}
|
||||
.card-item-content-text {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
|
||||
.card-item-content-text-title {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.card-item-content-description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #666666;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
|
|
@ -143,10 +143,14 @@
|
|||
</j-space>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
<BadgeStatus
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
:status="slotProps.state.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #shareCluster="slotProps">
|
||||
{{
|
||||
|
|
@ -171,15 +175,16 @@ import { getImage } from '@/utils/comm';
|
|||
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
||||
import { onlyMessage } from '@/utils/comm';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const options = ref([]);
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('enabled', 'success');
|
||||
statusMap.set('disabled', 'error');
|
||||
// const statusMap = new Map();
|
||||
// statusMap.set('enabled', 'processing');
|
||||
// statusMap.set('disabled', 'error');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
|
|||
16
yarn.lock
16
yarn.lock
|
|
@ -3698,26 +3698,14 @@ jetlinks-store@^0.0.3:
|
|||
resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
|
||||
integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
|
||||
|
||||
jetlinks-ui-components@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#cd080b2d8320c7a03ed20f4c4c22e9a5c920a3c8"
|
||||
integrity sha512-8xzDFH6jSGNrkbCMb+/FL/g9vB0c2GdsDq6QPUzgKFwzPiS+cPbpSxL0RNHez9MF7/NSSuY8wL4VaujiVXTpfg==
|
||||
dependencies:
|
||||
"@vueuse/core" "^9.12.0"
|
||||
ant-design-vue "^3.2.15"
|
||||
colorpicker-v3 "^2.10.2"
|
||||
lodash-es "^4.17.21"
|
||||
monaco-editor "^0.35.0"
|
||||
|
||||
jetlinks-ui-components@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#0c4999d28c96c11ce266c5c9706cc895010450dc"
|
||||
integrity sha512-buCf4mWJ8cUyn+12nRRLIr25MwG60nxqWH4pZidKy/npNKt5WQXLV8PmHmf04z0xpJUnW5yY3C7QBkYoAkSgVw==
|
||||
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#682711e0f69c141fff2c256db61a060c82539611"
|
||||
integrity sha512-rQxD/YlE+XSAG7BWIcFTtKrCQJXk5o+TUgejyuUT/baBThJB6xYt1k2dQEdXyiwpukYen5FzaoLpelSD9SUegw==
|
||||
dependencies:
|
||||
"@vueuse/core" "^9.12.0"
|
||||
ant-design-vue "^3.2.15"
|
||||
colorpicker-v3 "^2.10.2"
|
||||
jetlinks-ui-components "^1.0.4"
|
||||
lodash-es "^4.17.21"
|
||||
monaco-editor "^0.35.0"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue