refactor(Charts): 重构报警列表组件
- 使用 PublicSmallBorder 组件替换原有的 SmallBorder 组件
This commit is contained in:
parent
24c94f56f9
commit
1b4064f655
@ -37,7 +37,7 @@ export const option = {
|
|||||||
headerHeight: 28,
|
headerHeight: 28,
|
||||||
itemHeight: 28,
|
itemHeight: 28,
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
title: '近60分钟报警信息',
|
titleText: '近60分钟报警信息',
|
||||||
titleSize: 16,
|
titleSize: 16,
|
||||||
titleColor: '#eee',
|
titleColor: '#eee',
|
||||||
fontWeight: 'normal',
|
fontWeight: 'normal',
|
||||||
|
@ -1,27 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<SmallBorder class="SmallBorder">
|
|
||||||
<div class="go-alarm-list">
|
<div class="go-alarm-list">
|
||||||
<div class="header">
|
<PublicSmallBorder :title-text="option.titleText">
|
||||||
<div class="title">
|
<div class="content">
|
||||||
|
|
||||||
<div class="title-text">
|
|
||||||
<span :style="{
|
|
||||||
color: option.titleColor,
|
|
||||||
fontSize: option.titleSize + 'px',
|
|
||||||
fontWeight: option.fontWeight,
|
|
||||||
fontStyle: option.fontStyle,
|
|
||||||
marginLeft: option.paddingX + 'px',
|
|
||||||
marginTop: option.paddingY + 'px',
|
|
||||||
letterSpacing: option.letterSpacing + 'px'
|
|
||||||
}">{{ option.title }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="option.isShowButton" class="header-right-squares">
|
|
||||||
<div class="square" style="background-color: #2e69e0"></div>
|
|
||||||
<div class="square" style="background-color: #2e9bf0"></div>
|
|
||||||
<div class="square" style="background-color: #2ef0b3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="table-header" :style="{
|
<div class="table-header" :style="{
|
||||||
height: option.headerHeight + 'px'
|
height: option.headerHeight + 'px'
|
||||||
}">
|
}">
|
||||||
@ -51,7 +31,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SmallBorder>
|
</PublicSmallBorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -60,7 +44,7 @@ import { PropType, computed, ref, onMounted, onUnmounted } from 'vue'
|
|||||||
import { option as configOption } from './config'
|
import { option as configOption } from './config'
|
||||||
import SmallBorder from '../SmallBorder/index.vue'
|
import SmallBorder from '../SmallBorder/index.vue'
|
||||||
import axiosInstance from '@/api/axios'
|
import axiosInstance from '@/api/axios'
|
||||||
|
import PublicSmallBorder from '../../Public_SmallBorder/index.vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
type: Object as PropType<{ option: typeof configOption }>,
|
type: Object as PropType<{ option: typeof configOption }>,
|
||||||
@ -89,7 +73,7 @@ const convertTimestampToDateTime = (timestamp: number | string) => {
|
|||||||
const fetchRecentAlarms = async () => {
|
const fetchRecentAlarms = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await axiosInstance.get(
|
const res: any = await axiosInstance.get(
|
||||||
`/awjt/space/getRecentAlarms/${option.value.sceneCode}`,
|
`/awjt/space/getRecentAlarms`,
|
||||||
{
|
{
|
||||||
responseType: 'json',
|
responseType: 'json',
|
||||||
baseURL: ''
|
baseURL: ''
|
||||||
@ -147,22 +131,17 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.SmallBorder {
|
.go-alarm-list {
|
||||||
position: relative;
|
width: 100%;
|
||||||
// background-color: #ffffff;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.go-alarm-list {
|
.content {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 12px;
|
|
||||||
margin-top: 5px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// background-color: #4da6ff;
|
// background-color: #4da6ff;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
Loading…
Reference in New Issue
Block a user