blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-06-30 00:29:16 +08:00
Code Issues Projects Releases Wiki Activity

feat: 新增组件

Browse Source
This commit is contained in:
huanghao1412 2024-01-05 19:01:55 +08:00
parent 0d9a4183d5
commit ae342d87bb
43 changed files with 1506 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
proxyConfig.ts
View File

@ -27,6 +27,14 @@ const devProxy = (mode:any) => {
ws: true,
secure: true,
},
// 开发
'/dynamic_report': {
// @ts-ignore
target: loadEnv(mode, process.cwd()).VITE_DEV_PATH,
changeOrigin: true,
ws: true,
secure: true,
},
};
}

7
src/api/path/business.api.ts
View File

@ -4,13 +4,16 @@ import { RequestHttpEnum } from "@/enums/httpEnum";
import { httpErrorHandle } from '@/utils'
export function getToken() {
const storage_access_token = localStorage.getItem('access_token')
if(storage_access_token) return storage_access_token
let queryStr = window.location.href
queryStr = queryStr.split('?')[1]
if(queryStr.indexOf('#') > -1) queryStr = queryStr.split('#')[0]
if(queryStr && queryStr.indexOf('#') > -1) queryStr = queryStr.split('#')[0]
let query:{[key:string]: string} = {}
queryStr.split('&').forEach((item:string) => {
queryStr && queryStr.split('&').forEach((item:string) => {
query[item.split('=')[0]] = item.split('=')[1]
})
if(query.access_token) localStorage.setItem('access_token', query.access_token)
return query.access_token
}

BIN
src/assets/customComponents/RealTimeAlarmStatistics/scanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
src/assets/images/chart/customponents/ComprehensivePUE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/chart/customponents/RealTimeAlarmStatistics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

1
src/components/Pages/ChartItemSetting/SettingItemBox.vue
View File

@ -48,6 +48,7 @@ $leftWidth: 100px;
text-align: left;
margin-top: 4px;
margin-left: 10px;
margin-right: 4px;
font-size: 12px;
}
.item-right {

4
src/packages/components/Charts/Lines/index.ts
View File

@ -1,7 +1,7 @@
import { LineWithDataZoomConfig } from "./LineWithDataZoom";
// import { LineWithDataZoomConfig } from "./LineWithDataZoom";
import { LineCommonConfig } from './LineCommon/index'
import { LineLinearSingleConfig } from './LineLinearSingle/index'
import { LineGradientSingleConfig } from './LineGradientSingle/index'
import { LineGradientsConfig } from './LineGradients/index'
export default [LineWithDataZoomConfig, LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]
export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]

4
src/packages/components/Charts/index.ts
View File

@ -1,9 +1,9 @@
import Bars from './Bars'
import Pies from './Pies'
// import Lines from './Lines'
import Lines from './Lines'
// import Scatters from './Scatters'
// import Mores from './Mores'
// import Maps from './Maps'
// export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]
export const ChartList = [...Bars, ...Pies]
export const ChartList = [...Bars, ...Lines, ...Pies]

17
src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/Svg.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<g>
<polygon style="fill:#4196FF;" points="33.326,57.133 25.326,19.799 14.706,34.667 0,34.667 0,29.333 11.961,29.333 28.008,6.867
36.008,44.201 46.627,29.333 64,29.333 64,34.667 49.373,34.667 "/>
</g>
</svg>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
</style>

8
src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts
View File

@ -18,4 +18,12 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key = ComprehensivePUEConfig.key
public chartConfig = cloneDeep(ComprehensivePUEConfig)
public option = cloneDeep(option)
public customData = cloneDeep({
title: '综合PUE',
id_1: null,
id_2: null,
id_3: null,
id_4: null,
showInterval: true,
})
}

28
src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/configData.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<n-space vertical>
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
<setting-item-box name="昨日、上周和上月PUE参数" :alone="true">
<n-input-number v-model:value="props.customData.id_1" size="small" placeholder="请输入" />
</setting-item-box>
<setting-item-box name="市总负载" :alone="true">
<n-input-number v-model:value="props.customData.id_2" size="small" placeholder="请输入" />
</setting-item-box>
<setting-item-box name="IT用电负载" :alone="true">
<n-input-number v-model:value="props.customData.id_3" size="small" placeholder="请输入" />
</setting-item-box>
<setting-item-box name="非IT用电负载" :alone="true">
<n-input-number v-model:value="props.customData.id_4" size="small" placeholder="请输入" />
</setting-item-box>
</n-space>
</template>
<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
</script>
<style lang="scss" scoped>
</style>

3
src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.ts
View File

@ -5,10 +5,11 @@ export const ComprehensivePUEConfig: ConfigType = {
key: 'ComprehensivePUE',
chartKey: 'VComprehensivePUE',
conKey: 'VCComprehensivePUE',
conDataKey: 'VCDComprehensivePUE',
title: '综合PUE',
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'photo.png'
image: 'ComprehensivePUE.png'
}

457
src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue
View File

@ -1,17 +1,18 @@
<template>
<div :style="getStyle(borderRadius)" style="overflow: visible">
<BorderBox title="综合PUE">
<div class="box">
<div :style="getStyle(borderRadius)" style="overflow: visible;">
<BorderBox :title="props.chartConfig.customData.title">
<div class="inner">
<div class="left">
<VCircle :value="value"/>
<VCircle :value="value" style="height: 100%"/>
</div>
<div class="right">
<div class="item" v-for="(item, i) in 3" :key="i">
<div class="leftBox"></div>
<div class="item" v-for="(item, i) in rightArr" :key="i">
<Svg v-if="i === 0" class="leftBox" style="position: absolute;width: 60px;height: 37%;"/>
<v-chart class="leftBox" :option="item.option" :update-options="{ notMerge: true, replaceMerge: ['series'] }"/>
<div class="rightBox">
<div>总市电负载</div>
<div>(kWh)</div>
<div>0</div>
<div>{{item.label}}</div>
<div>{{item.unit}}</div>
<div>{{item.value}}</div>
</div>
</div>
</div>
@ -33,6 +34,9 @@ import {graphic} from "echarts";
import {cloneDeep} from 'lodash'
import moment from "moment"
import VCircle from './VCircle.vue'
import Svg from './Svg.vue'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
const props = defineProps({
chartConfig: {
@ -41,6 +45,8 @@ const props = defineProps({
}
})
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
@ -58,6 +64,424 @@ const value = reactive([
{label: '上月PUE', value: '0.000'},
])
const option1 = {
title: [],
grid: {
top: '0%',
bottom: '0%',
left: '5%',
right: '5%',
containLabel: true
},
angleAxis: {
max: 100,
// clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '150%' // 图形大小
},
series: [{
type: 'bar',
data: [{
value: 100,
itemStyle: {
normal: {
color: '#4396fd'
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// offset: 0,
// color: '#aaf14f'
// }, {
// offset: 1,
// color: '#0acfa1'
// }])
}
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 2
},
{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#000',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 1
}]
}
const option2 = {
title: [
{
show: true,
text: '0',
subText: '%',
x: '45%',
y: '25%',
textAlign: 'center',
textStyle: {
color: '#00ffff',
fontSize: 10
}
},
{
text: '%',
left: '46%',
top: '52%',
textAlign: 'center',
textStyle: {
color: '#999',
fontSize: 8
}
}
],
grid: {
top: '0%',
bottom: '0%',
left: '5%',
right: '5%',
containLabel: true
},
angleAxis: {
max: 100,
// clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '150%' // 图形大小
},
series: [{
type: 'bar',
data: [{
value: 0,
itemStyle: {
normal: {
color: '#00ffff'
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// offset: 0,
// color: '#aaf14f'
// }, {
// offset: 1,
// color: '#0acfa1'
// }])
}
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 2
},
{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#000',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 1
}]
}
const option3 = {
title: [
{
show: true,
text: '0',
subText: '%',
x: '45%',
y: '25%',
textAlign: 'center',
textStyle: {
color: '#f7c916',
fontSize: 10
}
},
{
text: '%',
left: '46%',
top: '52%',
textAlign: 'center',
textStyle: {
color: '#999',
fontSize: 8
}
}
],
grid: {
top: '0%',
bottom: '0%',
left: '5%',
right: '5%',
containLabel: true
},
angleAxis: {
max: 100,
// clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '150%' // 图形大小
},
series: [{
type: 'bar',
data: [{
value: 0,
itemStyle: {
normal: {
color: '#f7c916'
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// offset: 0,
// color: '#aaf14f'
// }, {
// offset: 1,
// color: '#0acfa1'
// }])
}
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 2
},
{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#000',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 2,
barGap: '-100%', // 两环重叠
z: 1
}]
}
const rightArr = reactive([
{ label: '总市电负载', value: 0, unit: '(kWh)', option: option1 },
{ label: 'IT用电负载', value: 0, unit: '(kWh)', option: option2 },
{ label: '其他负载', value: 0, unit: '(kWh)', option: option3 },
])
const getData = () => {
// 实时pue、总市电负载、IT用电负载和其他用电负载
const firstParams = {
duration: 2, // 2，查询日报；3，查询月报
start_time: moment().subtract(1, 'd').format('YYYY-MM-DD HH:00:00'),
end_time: moment().format('YYYY-MM-DD HH:00:00'),
strategy_ids: [props.chartConfig.customData!.id_1, props.chartConfig.customData!.id_2, props.chartConfig.customData!.id_3, props.chartConfig.customData!.id_4]
}
publicInterface('/dynamic_report/err', 'err', firstParams).then((res:any) => {
if(res) res = res.data
if (res && res.charts.length) {
// 实时pue
if (res.charts[1].series) {
const pueData = res.charts[1].series[0].data || [0, 0]
value[0].value = pueData[pueData.length - 1] ? pueData[pueData.length - 1] : pueData[pueData.length - 2]
if (value[0].value) {
value[0].value = Number(value[0].value).toFixed(3)
} else {
value[0].value = '0.000'
}
}
// 总市电负载、IT用电负载和其他用电负载
if (res.charts[0].series) {
// const totalData = res.charts[0].series[0].data || [0, 0]
const totalData = res.charts[0].series.find((item: any) => item.strategy_id === firstParams.strategy_ids[1]).data || [0, 0]
const itData = res.charts[0].series.find((item: any) => item.strategy_id === firstParams.strategy_ids[2]).data || [0, 0]
const otherData = res.charts[0].series.find((item: any) => item.strategy_id === firstParams.strategy_ids[3]).data || [0, 0]
rightArr[0].value = totalData[totalData.length - 1] ? totalData[totalData.length - 1] : totalData[totalData.length - 2]
rightArr[1].value = itData[itData.length - 1] ? itData[itData.length - 1] : itData[itData.length - 2]
rightArr[2].value = otherData[otherData.length - 1] ? otherData[otherData.length - 1] : otherData[otherData.length - 2]
}
// 图表
const one_IT_percent = parseFloat(rightArr[0].value.toString()) === 0 ? 0 : (parseFloat(rightArr[1].value.toString()) / parseFloat(rightArr[0].value.toString()) * 100).toFixed(2)
const one_other_percent = parseFloat(rightArr[0].value.toString()) === 0 ? 0 : (100 - Number(one_IT_percent)).toFixed(2)
rightArr[1].option.series[0].data[0].value = Number(one_IT_percent)
rightArr[1].option.title[0].text = one_IT_percent.toString()
rightArr[2].option.series[0].data[0].value = Number(one_other_percent)
rightArr[2].option.title[0].text = one_other_percent.toString()
}
})
// 昨日pue
const secondParams = {
duration: 3,
start_time: moment().subtract(1, 'days').startOf('day').format('yyyy-MM-DD HH:mm:ss'),
end_time: moment().startOf('day').format('yyyy-MM-DD HH:mm:ss'),
strategy_ids: [props.chartConfig.customData!.id_1]
}
publicInterface('/dynamic_report/err', 'err', secondParams).then((res: any) => {
res = res.data
if (res) {
if (res.tables.data.length && res.tables.data[0]['field0']) {
value[1].value = res.tables.data[0]['field0'].toFixed(3)
} else {
value[1].value = '0.000'
}
}
})
// 上周pue、上月pue
const thirdParams = {
strategy_ids: [props.chartConfig.customData!.id_1]
}
publicInterface('/dynamic_report/err', 'pue_dashboard', thirdParams).then((res: any) => {
res = res.data
if (res && res.length) {
if (res[0] && res[0].week_avg_pue) {
value[2].value = Number(res[0].week_avg_pue).toFixed(3)
} else {
value[2].value = '0.000'
}
if (res[0] && res[0].month_avg_pue) {
value[3].value = Number(res[0].month_avg_pue).toFixed(3)
} else {
value[3].value = '0.000'
}
}
})
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
})
onMounted(() => {
getData()
if(!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => {
getData()
}, number)
})
onUnmounted(() => {
if(timer) clearInterval(timer as number)
})
// const option = shallowReactive({
// dataset: ''
// })
@ -68,9 +492,9 @@ const value = reactive([
</script>
<style lang="scss" scoped>
.box{
.inner{
width: 100%;
height: calc(100% - 40px);
height: 100%;
display: flex;
.left{
flex: 6;
@ -88,11 +512,18 @@ const value = reactive([
.item{
display: flex;
align-items: center;
position: relative;
padding: 5px 0;
.leftBox{
height: 60px;
width: 60px;
}
.rightBox{
color: #fff;
width: calc(100% - 60px);
font-size: 14px;
font-weight: 500;
line-height: 16px;
}
}
}

4
src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts
View File

@ -18,4 +18,8 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key = DeviceAlarmOverviewConfig.key
public chartConfig = cloneDeep(DeviceAlarmOverviewConfig)
public option = cloneDeep(option)
public customData = cloneDeep({
title: '当前设备告警概况',
showInterval: true,
})
}

16
src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/configData.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<n-space vertical>
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
</n-space>
</template>
<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
</script>
<style lang="scss" scoped>
</style>

1
src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.ts
View File

@ -5,6 +5,7 @@ export const DeviceAlarmOverviewConfig: ConfigType = {
key: 'DeviceAlarmOverview',
chartKey: 'VDeviceAlarmOverview',
conKey: 'VCDeviceAlarmOverview',
conDataKey: 'VCDDeviceAlarmOverview',
title: '当前设备告警概况',
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,

25
src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="getStyle(borderRadius)">
<BorderBox title="当前设备告警概况">
<BorderBox :title="props.chartConfig.customData.title">
<div class="item">
<BareMetalServerIcon class="left"/>
<div class="right">
@ -42,6 +42,9 @@ import { BareMetalServer as BareMetalServerIcon } from '@vicons/carbon'
import { SteeringWheel as SteeringWheelIcon } from '@vicons/tabler'
import { publicInterface } from '@/api/path/business.api'
import BorderBox from '../components/BorderBox.vue'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
import {isPreview} from "@/utils";
const props = defineProps({
chartConfig: {
@ -50,6 +53,8 @@ const props = defineProps({
}
})
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
@ -96,11 +101,27 @@ const getData = () => {
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
})
onMounted(() => {
getData()
if(!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => {
getData()
}, 15000)
}, number)
})
onUnmounted(() => {
clearInterval(timer as number)

518
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/Svg.vue Normal file
View File

@ -0,0 +1,518 @@
<template>
<svg v-show="alarmLevels.length === 5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>
<g>
<circle style="opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#4196FF;" cx="100" cy="100" r="100" />
</g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;fill-opacity:0.6;" cx="100" cy="100" r="92" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
</g>
<g>
<radialGradient id="real_time_alarm_statistics_5_1_" cx="100" cy="100" r="92" gradientUnits="userSpaceOnUse">
<stop offset="0.836" style="stop-color:#FFFFFF;stop-opacity:0.05" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.9" />
</radialGradient>
<path style="fill:url(#real_time_alarm_statistics_5_1_);" d="M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#091C38;" cx="100" cy="100" r="92" />
</g>
<g>
<g style="opacity:0.5;">
<path style="fill:#FFFFFF;" d="M100,11c49.074,0,89,39.925,89,89c0,49.075-39.926,89-89,89c-49.075,0-89-39.925-89-89C11,50.925,50.925,11,100,11 M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
</g>
<radialGradient id="real_time_alarm_statistics_5_2_" cx="100" cy="100" r="72.8008" gradientUnits="userSpaceOnUse">
<stop offset="0.9032" style="stop-color:#D0E3EA;stop-opacity:0.9" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.05" />
</radialGradient>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#real_time_alarm_statistics_5_2_);fill-opacity:0.6;" cx="100" cy="100" r="72.801" />
<path style="fill:#091C38;" d="M100,27.6c-39.984,0-72.4,32.413-72.4,72.4s32.416,72.4,72.4,72.4c39.986,0,72.4-32.413,72.4-72.4S139.986,27.6,100,27.6L100,27.6z" />
<g style="opacity:0.2;">
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="29.6" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.778" y2="32" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.801" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="50.219" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="64.801" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="81.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="29.6" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="149.781" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.803" y2="160.968" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.779" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="170.399" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="160.967" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="149.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.968" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="170.4" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="81.777" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.967" y2="64.798" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="50.218" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="32" />
</g>
<path style="opacity:0.1;fill:#4196FF;" d="M100,96.434c1.969,0,3.568,1.598,3.568,3.566s-1.6,3.566-3.568,3.566s-3.568-1.598-3.568-3.566S98.031,96.434,100,96.434 M100,95.633c-2.412,0-4.369,1.955-4.369,4.367s1.957,4.367,4.369,4.367s4.367-1.955,4.367-4.367S102.412,95.633,100,95.633L100,95.633z" />
<path style="opacity:0.12;fill:#4196FF;" d="M100,88.18c6.52,0,11.822,5.301,11.822,11.82S106.52,111.82,100,111.82S88.176,106.52,88.176,100S93.48,88.18,100,88.18 M100,87.379c-6.972,0-12.621,5.65-12.621,12.621s5.649,12.621,12.621,12.621s12.621-5.65,12.621-12.621S106.972,87.379,100,87.379L100,87.379z" />
<path style="opacity:0.14;fill:#4196FF;" d="M100,79.924c11.071,0,20.077,9.006,20.077,20.076s-9.006,20.076-20.077,20.076S79.923,111.07,79.923,100S88.929,79.924,100,79.924 M100,79.123c-11.531,0-20.877,9.347-20.877,20.877s9.346,20.876,20.877,20.876c11.529,0,20.877-9.346,20.877-20.876S111.529,79.123,100,79.123L100,79.123z" />
<path style="opacity:0.16;fill:#4196FF;" d="M100,71.67c15.623,0,28.33,12.708,28.33,28.33s-12.707,28.33-28.33,28.33S71.67,115.622,71.67,100S84.377,71.67,100,71.67 M100,70.869c-16.09,0-29.131,13.045-29.131,29.131S83.91,129.131,100,129.131s29.131-13.045,29.131-29.131S116.09,70.869,100,70.869L100,70.869z" />
<path style="opacity:0.18;fill:#4196FF;" d="M100,63.416c20.173,0,36.584,16.412,36.584,36.584c0,20.173-16.411,36.584-36.584,36.584c-20.174,0-36.584-16.411-36.584-36.584C63.416,79.828,79.826,63.416,100,63.416M100,62.615c-20.646,0-37.385,16.738-37.385,37.385c0,20.646,16.738,37.385,37.385,37.385s37.385-16.739,37.385-37.385C137.385,79.354,120.646,62.615,100,62.615L100,62.615z" />
<path style="opacity:0.2;fill:#4196FF;" d="M100,55.163c24.724,0,44.84,20.112,44.84,44.837s-20.116,44.837-44.84,44.837c-24.725,0-44.84-20.112-44.84-44.837S75.275,55.163,100,55.163 M100,54.363c-25.205,0-45.641,20.432-45.641,45.637S74.795,145.637,100,145.637s45.637-20.432,45.637-45.637S125.205,54.363,100,54.363L100,54.363z" />
<path style="opacity:0.22;fill:#4196FF;" d="M100,46.906c29.275,0,53.092,23.818,53.092,53.094S129.275,153.094,100,153.094S46.906,129.275,46.906,100S70.725,46.906,100,46.906 M100,46.109c-29.765,0-53.891,24.127-53.891,53.891c0,29.763,24.126,53.891,53.891,53.891s53.891-24.128,53.891-53.891C153.891,70.236,129.765,46.109,100,46.109L100,46.109z" />
<path style="opacity:0.24;fill:#4196FF;" d="M100,38.654c33.826,0,61.346,27.52,61.346,61.346s-27.52,61.346-61.346,61.346S38.654,133.826,38.654,100S66.174,38.654,100,38.654 M100,37.854c-34.322,0-62.146,27.823-62.146,62.146c0,34.32,27.824,62.146,62.146,62.146S162.146,134.32,162.146,100C162.146,65.677,134.322,37.854,100,37.854L100,37.854z" />
<path style="opacity:0.26;fill:#4196FF;" d="M100,30.4c38.378,0,69.6,31.222,69.6,69.6s-31.222,69.6-69.6,69.6S30.4,138.378,30.4,100S61.622,30.4,100,30.4 M100,29.6c-38.881,0-70.4,31.521-70.4,70.4c0,38.879,31.52,70.4,70.4,70.4c38.883,0,70.4-31.521,70.4-70.4C170.4,61.12,138.883,29.6,100,29.6L100,29.6z" />
<circle style="opacity:0;fill:#F43B42;" cx="100" cy="100" r="0.471" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" d="M31.521,77.75C40.896,48.877,68.004,28,100,28c0-6.904,0-13.677,0-20C59.114,8,24.465,34.673,12.486,71.564L31.521,77.75z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" d="M28,100c0-7.768,1.245-15.241,3.521-22.25l-19.034-6.186C9.578,80.521,8,90.075,8,100c0,30.6,14.942,57.704,37.924,74.43l11.762-16.189C39.7,145.15,28,123.947,28,100z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;" d="M154.076,174.43l-11.762-16.189C130.434,166.887,115.817,172,100,172c-15.818,0-30.435-5.113-42.314-13.76L45.924,174.43C61.104,185.478,79.789,192,100,192S138.896,185.478,154.076,174.43z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#14C6BD;" d="M100,28c31.999,0,59.104,20.879,68.479,49.75l19.035-6.185C175.535,34.673,140.886,8,100,8C100,14.323,100,21.096,100,28z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#4FBADB;" d="M187.514,71.565l-19.035,6.185C170.755,84.759,172,92.232,172,100c0,23.948-11.701,45.15-29.686,58.24l11.762,16.189C177.058,157.704,192,130.6,192,100C192,90.075,190.422,80.521,187.514,71.565z" />
<g>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 135.6914 29.3159)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ eventName }}</text>
</g>
<g>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 176.5986 139.2744)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ commonName }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 86.3184 184.9395)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ importantName }}</text>
</g>
<g>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 16.4736 115.8477)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ seriousName }}</text>
</g>
<g>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 42.084 46.4502)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ urgentName }}</text>
</g>
</g>
<image class="scaner" style="overflow:visible;" width="734" height="734" xlink:href="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" transform="matrix(0.192 0 0 0.192 29.5996 29.5996)" />
<g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#4FBADB;fill-opacity:0.3;" d="M151,119.578c0,2.209-1.79,3.998-3.998,3.998c-2.211,0-4.002-1.789-4.002-3.998c0-2.211,1.791-4.002,4.002-4.002C149.21,115.576,151,117.367,151,119.578z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#4FBADB;fill-opacity:0.6;" cx="147" cy="119.578" r="2.399" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#4FBADB;" cx="147.002" cy="119.578" r="1.2" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#14C6BD;fill-opacity:0.3;" cx="132.799" cy="59.001" r="4" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#14C6BD;fill-opacity:0.6;" cx="132.799" cy="59.001" r="2.399" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#14C6BD;" cx="132.801" cy="59.001" r="1.2" />
</g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.3;" d="M58,119.579c0,2.209-1.791,3.998-4.001,3.998c-2.208,0-3.999-1.789-3.999-3.998c0-2.211,1.791-4.002,3.999-4.002C56.209,115.577,58,117.368,58,119.579z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.6;" d="M56.4,119.579c0,1.324-1.076,2.398-2.401,2.398c-1.323,0-2.401-1.074-2.401-2.398c0-1.326,1.078-2.4,2.401-2.4C55.324,117.179,56.4,118.253,56.4,119.579z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" cx="53.999" cy="119.579" r="1.2" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.3;" cx="68.801" cy="59.109" r="4" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.6;" cx="68.8" cy="59.109" r="2.401" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" cx="68.8" cy="59.109" r="1.2" />
</g>
<g>
<text transform="matrix(1 0 0 1 63.8945 80)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["urgent"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 49.0938 109)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["serious"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 142.0957 109)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["important"] : 0 }}</text>
</g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;fill-opacity:0.3;" d="M104,154.002c0,2.209-1.79,3.998-3.998,3.998c-2.211,0-4.002-1.789-4.002-3.998c0-2.211,1.791-4.002,4.002-4.002C102.21,150,104,151.791,104,154.002z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;fill-opacity:0.6;" cx="100" cy="154.002" r="2.399" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;" cx="100.002" cy="154.002" r="1.2" />
</g>
<g>
<text transform="matrix(1 0 0 1 95.0957 143.4238)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["secondary"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 124.5898 78.2905)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["record"] : 0 }}</text>
</g>
</g>
</svg>
<svg v-show="alarmLevels.length === 4 || alarmLevels.length === 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<defs>
<radialGradient id="real_time_alarm_statistics_35" cx="100" cy="660" r="92" gradientTransform="matrix(1, 0, 0, -1, 0, 760)" gradientUnits="userSpaceOnUse">
<stop offset="0.84" stop-color="#fff" stop-opacity="0.05" />
<stop offset="1" stop-color="#d0e3ea" stop-opacity="0.9" />
</radialGradient>
<radialGradient id="real_time_alarm_statistics_36" cx="100" cy="660" r="72.8" gradientTransform="matrix(1, 0, 0, -1, 0, 760)" gradientUnits="userSpaceOnUse">
<stop offset="0.9" stop-color="#d0e3ea" stop-opacity="0.9" />
<stop offset="1" stop-color="#d0e3ea" stop-opacity="0.05" />
</radialGradient>
</defs>
<g>
<circle cx="100" cy="100" r="100" style="fill:#4196ff;opacity:0.20000000298023224;isolation:isolate" />
<circle cx="100" cy="100" r="92" style="fill:#d0e3ea;fill-opacity:0.6000000238418579" />
<circle cx="100" cy="100" r="92" style="fill:#d0e3ea" />
<circle cx="100" cy="100" r="92" style="fill:#d0e3ea" />
<path d="M100,8a92,92,0,1,0,92,92A92,92,0,0,0,100,8Z" style="fill:url(#real_time_alarm_statistics_35)" />
<circle cx="100" cy="100" r="92" style="fill:#091c38" />
<g style="opacity:0.5">
<path d="M100,11a89,89,0,1,1-89,89,89,89,0,0,1,89-89m0-3a92,92,0,1,0,92,92A92,92,0,0,0,100,8Z" style="fill:#fff" />
</g>
<circle cx="100" cy="100" r="72.8" style="fill-opacity:0.6000000238418579;fill:url(#real_time_alarm_statistics_36)" />
<path d="M100,27.6A72.4,72.4,0,1,0,172.4,100,72.4,72.4,0,0,0,100,27.6Z" style="fill:#091c38" />
<g style="opacity:0.20000000298023224">
<line x1="100" y1="100" x2="100" y2="29.6" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="81.78" y2="32" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="64.8" y2="39.03" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="50.22" y2="50.22" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="39.03" y2="64.8" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="32" y2="81.78" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="29.6" y2="100" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="32" y2="118.22" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="39.03" y2="135.2" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="50.22" y2="149.78" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="64.8" y2="160.97" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="81.78" y2="168" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="100" y2="170.4" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="118.22" y2="168" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="135.2" y2="160.97" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="149.78" y2="149.78" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="160.97" y2="135.2" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="168" y2="118.22" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="170.4" y2="100" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="168" y2="81.78" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="160.97" y2="64.8" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="149.78" y2="50.22" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="135.2" y2="39.03" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
<line x1="100" y1="100" x2="118.22" y2="32" style="fill:none;stroke:#4196ff;stroke-linecap:round;stroke-linejoin:round" />
</g>
<path d="M100,96.43A3.57,3.57,0,1,1,96.43,100h0A3.57,3.57,0,0,1,100,96.43m0-.8a4.37,4.37,0,1,0,4.37,4.37A4.37,4.37,0,0,0,100,95.63Z" style="fill:#4196ff;opacity:0.10000000149011612;isolation:isolate" />
<path d="M100,88.18A11.82,11.82,0,1,1,88.18,100h0A11.83,11.83,0,0,1,100,88.18m0-.8A12.62,12.62,0,1,0,112.62,100,12.62,12.62,0,0,0,100,87.38Z" style="fill:#4196ff;opacity:0.11999999731779099;isolation:isolate" />
<path d="M100,79.92A20.08,20.08,0,1,1,79.92,100h0A20.1,20.1,0,0,1,100,79.92m0-.8A20.88,20.88,0,1,0,120.88,100,20.88,20.88,0,0,0,100,79.12Z" style="fill:#4196ff;opacity:0.14000000059604645;isolation:isolate" />
<path d="M100,71.67A28.33,28.33,0,1,1,71.67,100h0A28.36,28.36,0,0,1,100,71.67m0-.8A29.13,29.13,0,1,0,129.13,100,29.13,29.13,0,0,0,100,70.87Z" style="fill:#4196ff;opacity:0.1599999964237213;isolation:isolate" />
<path d="M100,63.42A36.58,36.58,0,1,1,63.42,100h0A36.63,36.63,0,0,1,100,63.42m0-.8A37.38,37.38,0,1,0,137.38,100,37.38,37.38,0,0,0,100,62.62Z" style="fill:#4196ff;opacity:0.18000000715255737;isolation:isolate" />
<path d="M100,55.16A44.84,44.84,0,1,1,55.16,100h0A44.89,44.89,0,0,1,100,55.16m0-.8A45.64,45.64,0,1,0,145.64,100,45.64,45.64,0,0,0,100,54.36Z" style="fill:#4196ff;opacity:0.20000000298023224;isolation:isolate" />
<path d="M100,46.91A53.09,53.09,0,1,1,46.91,100h0A53.15,53.15,0,0,1,100,46.91m0-.8A53.89,53.89,0,1,0,153.89,100,53.89,53.89,0,0,0,100,46.11Z" style="fill:#4196ff;opacity:0.2199999988079071;isolation:isolate" />
<path d="M100,38.65A61.35,61.35,0,1,1,38.65,100h0A61.42,61.42,0,0,1,100,38.65m0-.8A62.15,62.15,0,1,0,162.15,100,62.15,62.15,0,0,0,100,37.85h0Z" style="fill:#4196ff;opacity:0.23999999463558197;isolation:isolate" />
<path d="M100,30.4A69.6,69.6,0,1,1,30.4,100h0A69.68,69.68,0,0,1,100,30.4m0-.8A70.4,70.4,0,1,0,170.4,100,70.4,70.4,0,0,0,100,29.6h0Z" style="fill:#4196ff;opacity:0.25999999046325684;isolation:isolate" />
<circle cx="100" cy="100" r="0.47" style="fill:#cc3c35;fill-opacity:0" />
<path d="M100,8V28a72,72,0,0,1,72,72h20A92,92,0,0,0,100,8Z" style="fill:#f8ca00" />
<path d="M8,100H28a72,72,0,0,1,72-72V8A92,92,0,0,0,8,100Z" style="fill:#f00" />
<path d="M100,192V172a72,72,0,0,1-72-72H8A92,92,0,0,0,100,192Z" style="fill:#f43b42" />
<path d="M192,100H172a72,72,0,0,1-72,72v20A92,92,0,0,0,192,100Z" style="fill:#fc8358" />
<text transform="translate(146.31 35.77) rotate(45)" style="isolation:isolate;font-size:12.500060081481934px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ commonName }}</text>
<text transform="translate(150.42 169.77) rotate(-45)" style="isolation:isolate;font-size:12.500060081481934px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ importantName }}</text>
<text transform="translate(32.77 152.04) rotate(45)" style="isolation:isolate;font-size:12.500060081481934px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ seriousName }}</text>
<text transform="translate(34.42 56.17) rotate(-45)" style="isolation:isolate;font-size:12.500060081481934px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ urgentName }}</text>
<image class="scaner" width="735" height="736" transform="translate(29.6 29.6) scale(0.19 0.19)" xlink:href="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" />
<circle cx="132.8" cy="132.8" r="4" style="fill:#e3bb26;fill-opacity:0.30000001192092896" />
<circle cx="132.8" cy="132.8" r="2.4" style="fill:#e3bb26;fill-opacity:0.6000000238418579" />
<circle cx="132.8" cy="132.8" r="1.2" style="fill:#e3bb26" />
<circle cx="132.8" cy="69.6" r="4" style="fill:#4fa5c2;fill-opacity:0.30000001192092896" />
<circle cx="132.8" cy="69.6" r="2.4" style="fill:#4fa5c2;fill-opacity:0.6000000238418579" />
<circle cx="132.8" cy="69.6" r="1.2" style="fill:#4fa5c2" />
<circle cx="68.8" cy="132.8" r="4" style="fill:#e27b56;fill-opacity:0.30000001192092896" />
<circle cx="68.8" cy="132.8" r="2.4" style="fill:#e27b56;fill-opacity:0.6000000238418579" />
<circle cx="68.8" cy="132.8" r="1.2" style="fill:#e27b56" />
<circle cx="68.8" cy="69.6" r="4" style="fill:#d73d40;fill-opacity:0.30000001192092896" />
<circle cx="68.8" cy="69.6" r="2.4" style="fill:#d73d40;fill-opacity:0.6000000238418579" />
<circle cx="68.8" cy="69.6" r="1.2" style="fill:#d73d40" />
<text transform="translate(63.89 90.49)" style="isolation:isolate;font-size:14px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ alarmMonitorData ? alarmMonitorData["urgent"] : 0 }}</text>
<text transform="translate(63.89 122.22)" style="isolation:isolate;font-size:14px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ alarmMonitorData ? alarmMonitorData["serious"] : 0 }}</text>
<text transform="translate(127.89 122.22)" style="isolation:isolate;font-size:14px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ alarmMonitorData ? alarmMonitorData["important"] : 0 }}</text>
<text transform="translate(124.59 88.89)" style="isolation:isolate;font-size:14px;fill:#fff;font-family:MicrosoftYaHei, Microsoft YaHei">{{ alarmMonitorData ? alarmMonitorData["secondary"] : 0 }}</text>
</g>
</svg>
<svg v-show="alarmLevels.length === 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>
<g>
<circle style="opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#4196FF;" cx="100" cy="100" r="100" />
</g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;fill-opacity:0.6;" cx="100" cy="100" r="92" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
</g>
<g>
<radialGradient id="real_time_alarm_statistics_3_1_" cx="100" cy="100" r="92" gradientUnits="userSpaceOnUse">
<stop offset="0.836" style="stop-color:#FFFFFF;stop-opacity:0.05" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.9" />
</radialGradient>
<path style="fill:url(#real_time_alarm_statistics_3_1_);" d="M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#091C38;" cx="100" cy="100" r="92" />
</g>
<g>
<g style="opacity:0.5;">
<path style="fill:#FFFFFF;" d="M100,11c49.075,0,89,39.925,89,89c0,49.075-39.925,89-89,89s-89-39.925-89-89C11,50.925,50.925,11,100,11 M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
</g>
<radialGradient id="real_time_alarm_statistics_3_2_" cx="100" cy="100" r="72.8008" gradientUnits="userSpaceOnUse">
<stop offset="0.9032" style="stop-color:#D0E3EA;stop-opacity:0.9" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.05" />
</radialGradient>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#real_time_alarm_statistics_3_2_);fill-opacity:0.6;" cx="100" cy="100" r="72.801" />
<path style="fill:#091C38;" d="M100,27.6c-39.984,0-72.4,32.413-72.4,72.4s32.416,72.4,72.4,72.4c39.986,0,72.4-32.413,72.4-72.4S139.986,27.6,100,27.6L100,27.6z" />
<g style="opacity:0.2;">
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="29.6" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.778" y2="32" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.801" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="50.219" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="64.801" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="81.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="29.6" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="149.781" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.803" y2="160.968" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.779" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="170.399" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="160.967" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="149.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.968" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="170.4" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="81.777" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.967" y2="64.798" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="50.218" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="32" />
</g>
<path style="opacity:0.1;fill:#4196FF;" d="M100,96.434c1.969,0,3.568,1.598,3.568,3.566s-1.6,3.566-3.568,3.566s-3.568-1.598-3.568-3.566S98.031,96.434,100,96.434 M100,95.633c-2.412,0-4.369,1.955-4.369,4.367s1.957,4.367,4.369,4.367s4.367-1.955,4.367-4.367S102.412,95.633,100,95.633L100,95.633z" />
<path style="opacity:0.12;fill:#4196FF;" d="M100,88.18c6.52,0,11.822,5.301,11.822,11.82S106.52,111.82,100,111.82S88.176,106.52,88.176,100S93.48,88.18,100,88.18 M100,87.379c-6.972,0-12.621,5.65-12.621,12.621s5.649,12.621,12.621,12.621s12.621-5.65,12.621-12.621S106.972,87.379,100,87.379L100,87.379z" />
<path style="opacity:0.14;fill:#4196FF;" d="M100,79.924c11.071,0,20.077,9.006,20.077,20.076s-9.006,20.076-20.077,20.076S79.923,111.07,79.923,100S88.929,79.924,100,79.924 M100,79.123c-11.531,0-20.877,9.347-20.877,20.877s9.346,20.876,20.877,20.876c11.529,0,20.877-9.346,20.877-20.876S111.529,79.123,100,79.123L100,79.123z" />
<path style="opacity:0.16;fill:#4196FF;" d="M100,71.67c15.623,0,28.33,12.708,28.33,28.33s-12.707,28.33-28.33,28.33S71.67,115.622,71.67,100S84.377,71.67,100,71.67 M100,70.869c-16.09,0-29.131,13.045-29.131,29.131S83.91,129.131,100,129.131s29.131-13.045,29.131-29.131S116.09,70.869,100,70.869L100,70.869z" />
<path style="opacity:0.18;fill:#4196FF;" d="M100,63.416c20.173,0,36.584,16.412,36.584,36.584c0,20.173-16.411,36.584-36.584,36.584c-20.174,0-36.584-16.411-36.584-36.584C63.416,79.828,79.826,63.416,100,63.416M100,62.615c-20.646,0-37.385,16.738-37.385,37.385c0,20.646,16.738,37.385,37.385,37.385s37.385-16.739,37.385-37.385C137.385,79.354,120.646,62.615,100,62.615L100,62.615z" />
<path style="opacity:0.2;fill:#4196FF;" d="M100,55.163c24.724,0,44.84,20.112,44.84,44.837s-20.116,44.837-44.84,44.837c-24.725,0-44.84-20.112-44.84-44.837S75.275,55.163,100,55.163 M100,54.363c-25.205,0-45.641,20.432-45.641,45.637S74.795,145.637,100,145.637s45.637-20.432,45.637-45.637S125.205,54.363,100,54.363L100,54.363z" />
<path style="opacity:0.22;fill:#4196FF;" d="M100,46.906c29.275,0,53.092,23.818,53.092,53.094S129.275,153.094,100,153.094S46.906,129.275,46.906,100S70.725,46.906,100,46.906 M100,46.109c-29.765,0-53.891,24.127-53.891,53.891c0,29.763,24.126,53.891,53.891,53.891s53.891-24.128,53.891-53.891C153.891,70.236,129.765,46.109,100,46.109L100,46.109z" />
<path style="opacity:0.24;fill:#4196FF;" d="M100,38.654c33.826,0,61.346,27.52,61.346,61.346s-27.52,61.346-61.346,61.346S38.654,133.826,38.654,100S66.174,38.654,100,38.654 M100,37.854c-34.322,0-62.146,27.823-62.146,62.146c0,34.32,27.824,62.146,62.146,62.146S162.146,134.32,162.146,100C162.146,65.677,134.322,37.854,100,37.854L100,37.854z" />
<path style="opacity:0.26;fill:#4196FF;" d="M100,30.4c38.378,0,69.6,31.222,69.6,69.6s-31.222,69.6-69.6,69.6S30.4,138.378,30.4,100S61.622,30.4,100,30.4 M100,29.6c-38.881,0-70.4,31.521-70.4,70.4c0,38.879,31.52,70.4,70.4,70.4c38.883,0,70.4-31.521,70.4-70.4C170.4,61.12,138.883,29.6,100,29.6L100,29.6z" />
<circle style="opacity:0;fill:#F43B42;" cx="100" cy="100" r="0.471" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" d="M100,8C65.95,8,36.223,26.499,20.314,53.994l17.339,10.01C50.104,42.486,73.353,28,100,28c26.648,0,49.896,14.487,62.347,36.004l17.339-10.01C163.777,26.499,134.05,8,100,8z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;" d="M162.347,64.004C168.475,74.596,172,86.883,172,100c0,39.768-32.237,72-72,72v20c50.811,0,92-41.189,92-92c0-16.761-4.484-32.473-12.314-46.006L162.347,64.004z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" d="M28,100c0-13.118,3.525-25.404,9.654-35.996l-17.34-10.011C12.484,67.527,8,83.239,8,100c0,50.811,41.189,92,92,92v-20C60.232,172,28,139.764,28,100z" />
<g>
<text transform="matrix(0.5 -0.866 0.866 0.5 166.7588 154.3428)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ importantName }}</text>
</g>
<g>
<text transform="matrix(0.5 0.866 -0.866 0.5 21.5938 132.8682)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ seriousName }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 87.5 22.5889)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ urgentName }}</text>
</g>
</g>
<image class="scaner" style="overflow:visible;" width="734" height="734" xlink:href="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" transform="matrix(0.192 0 0 0.192 29.5996 29.5996)" />
<g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;fill-opacity:0.3;" d="M147,122.579c0,2.209-1.79,3.998-3.998,3.998c-2.211,0-4.002-1.789-4.002-3.998c0-2.211,1.791-4.002,4.002-4.002C145.21,118.577,147,120.368,147,122.579z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;fill-opacity:0.6;" cx="143" cy="122.579" r="2.399" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F8CA00;" cx="143.002" cy="122.579" r="1.2" />
</g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.3;" d="M62,122.579c0,2.209-1.791,3.998-4.001,3.998c-2.208,0-3.999-1.789-3.999-3.998c0-2.211,1.791-4.002,3.999-4.002C60.209,118.577,62,120.368,62,122.579z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.6;" d="M60.4,122.579c0,1.324-1.076,2.398-2.401,2.398c-1.323,0-2.401-1.074-2.401-2.398c0-1.326,1.078-2.4,2.401-2.4C59.324,120.179,60.4,121.253,60.4,122.579z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" cx="57.999" cy="122.579" r="1.2" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.3;" cx="100" cy="49.001" r="4" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.6;" cx="99.999" cy="49.001" r="2.401" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" cx="99.999" cy="49.001" r="1.2" />
</g>
<g>
<text transform="matrix(1 0 0 1 95.0938 69.8911)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["urgent"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 53.0938 112)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["serious"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 138.0957 112.001)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["important"] : 0 }}</text>
</g>
</g>
</svg>
<svg v-show="alarmLevels.length === 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>
<g>
<circle style="opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#4196FF;" cx="100" cy="100" r="100" />
</g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;fill-opacity:0.6;" cx="100" cy="100" r="92" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
</g>
<g>
<radialGradient id="real_time_alarm_statistics_2_1_" cx="100" cy="100" r="92" gradientUnits="userSpaceOnUse">
<stop offset="0.836" style="stop-color:#FFFFFF;stop-opacity:0.05" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.9" />
</radialGradient>
<path style="fill:url(#real_time_alarm_statistics_2_1_);" d="M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#091C38;" cx="100" cy="100" r="92" />
</g>
<g>
<g style="opacity:0.5;">
<path style="fill:#FFFFFF;" d="M100,11c49.075,0,89,39.925,89,89c0,49.075-39.925,89-89,89s-89-39.925-89-89C11,50.925,50.925,11,100,11 M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
</g>
<radialGradient id="real_time_alarm_statistics_2_2_" cx="100" cy="100" r="72.8008" gradientUnits="userSpaceOnUse">
<stop offset="0.9032" style="stop-color:#D0E3EA;stop-opacity:0.9" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.05" />
</radialGradient>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#real_time_alarm_statistics_2_2_);fill-opacity:0.6;" cx="100" cy="100" r="72.801" />
<path style="fill:#091C38;" d="M100,27.6c-39.984,0-72.4,32.413-72.4,72.4s32.416,72.4,72.4,72.4c39.986,0,72.4-32.413,72.4-72.4S139.986,27.6,100,27.6L100,27.6z" />
<g style="opacity:0.2;">
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="29.6" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.778" y2="32" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.801" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="50.219" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="64.801" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="81.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="29.6" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="149.781" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.803" y2="160.968" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.779" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="170.399" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="160.967" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="149.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.968" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="170.4" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="81.777" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.967" y2="64.798" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="50.218" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="32" />
</g>
<path style="opacity:0.1;fill:#4196FF;" d="M100,96.434c1.969,0,3.568,1.598,3.568,3.566s-1.6,3.566-3.568,3.566s-3.568-1.598-3.568-3.566S98.031,96.434,100,96.434 M100,95.633c-2.412,0-4.369,1.955-4.369,4.367s1.957,4.367,4.369,4.367s4.367-1.955,4.367-4.367S102.412,95.633,100,95.633L100,95.633z" />
<path style="opacity:0.12;fill:#4196FF;" d="M100,88.18c6.52,0,11.822,5.301,11.822,11.82S106.52,111.82,100,111.82S88.176,106.52,88.176,100S93.48,88.18,100,88.18 M100,87.379c-6.972,0-12.621,5.65-12.621,12.621s5.649,12.621,12.621,12.621s12.621-5.65,12.621-12.621S106.972,87.379,100,87.379L100,87.379z" />
<path style="opacity:0.14;fill:#4196FF;" d="M100,79.924c11.071,0,20.077,9.006,20.077,20.076s-9.006,20.076-20.077,20.076S79.923,111.07,79.923,100S88.929,79.924,100,79.924 M100,79.123c-11.531,0-20.877,9.347-20.877,20.877s9.346,20.876,20.877,20.876c11.529,0,20.877-9.346,20.877-20.876S111.529,79.123,100,79.123L100,79.123z" />
<path style="opacity:0.16;fill:#4196FF;" d="M100,71.67c15.623,0,28.33,12.708,28.33,28.33s-12.707,28.33-28.33,28.33S71.67,115.622,71.67,100S84.377,71.67,100,71.67 M100,70.869c-16.09,0-29.131,13.045-29.131,29.131S83.91,129.131,100,129.131s29.131-13.045,29.131-29.131S116.09,70.869,100,70.869L100,70.869z" />
<path style="opacity:0.18;fill:#4196FF;" d="M100,63.416c20.173,0,36.584,16.412,36.584,36.584c0,20.173-16.411,36.584-36.584,36.584c-20.174,0-36.584-16.411-36.584-36.584C63.416,79.828,79.826,63.416,100,63.416M100,62.615c-20.646,0-37.385,16.738-37.385,37.385c0,20.646,16.738,37.385,37.385,37.385s37.385-16.739,37.385-37.385C137.385,79.354,120.646,62.615,100,62.615L100,62.615z" />
<path style="opacity:0.2;fill:#4196FF;" d="M100,55.163c24.724,0,44.84,20.112,44.84,44.837s-20.116,44.837-44.84,44.837c-24.725,0-44.84-20.112-44.84-44.837S75.275,55.163,100,55.163 M100,54.363c-25.205,0-45.641,20.432-45.641,45.637S74.795,145.637,100,145.637s45.637-20.432,45.637-45.637S125.205,54.363,100,54.363L100,54.363z" />
<path style="opacity:0.22;fill:#4196FF;" d="M100,46.906c29.275,0,53.092,23.818,53.092,53.094S129.275,153.094,100,153.094S46.906,129.275,46.906,100S70.725,46.906,100,46.906 M100,46.109c-29.765,0-53.891,24.127-53.891,53.891c0,29.763,24.126,53.891,53.891,53.891s53.891-24.128,53.891-53.891C153.891,70.236,129.765,46.109,100,46.109L100,46.109z" />
<path style="opacity:0.24;fill:#4196FF;" d="M100,38.654c33.826,0,61.346,27.52,61.346,61.346s-27.52,61.346-61.346,61.346S38.654,133.826,38.654,100S66.174,38.654,100,38.654 M100,37.854c-34.322,0-62.146,27.823-62.146,62.146c0,34.32,27.824,62.146,62.146,62.146S162.146,134.32,162.146,100C162.146,65.677,134.322,37.854,100,37.854L100,37.854z" />
<path style="opacity:0.26;fill:#4196FF;" d="M100,30.4c38.378,0,69.6,31.222,69.6,69.6s-31.222,69.6-69.6,69.6S30.4,138.378,30.4,100S61.622,30.4,100,30.4 M100,29.6c-38.881,0-70.4,31.521-70.4,70.4c0,38.879,31.52,70.4,70.4,70.4c38.883,0,70.4-31.521,70.4-70.4C170.4,61.12,138.883,29.6,100,29.6L100,29.6z" />
<circle style="opacity:0;fill:#F43B42;" cx="100" cy="100" r="0.471" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" d="M100,8C49.189,8,8,49.189,8,100h20c0-39.768,32.236-72,72-72c39.768,0,72,32.236,72,72h20C192,49.189,150.811,8,100,8z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" d="M172,100c0,39.768-32.237,72-72,72c-39.768,0-72-32.236-72-72H8c0,50.811,41.189,92,92,92s92-41.189,92-92H172z" />
<g>
<text transform="matrix(1 0 0 1 88 23)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ urgentName }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 88 187)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:12.5001;">{{ seriousName }}</text>
</g>
</g>
<image class="scaner" style="overflow:visible;" width="734" height="734" xlink:href="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" transform="matrix(0.192 0 0 0.192 29.5996 29.5996)" />
<g>
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.3;" d="M105,132.801c0,2.209-1.791,3.998-4.001,3.998c-2.208,0-3.999-1.789-3.999-3.998c0-2.211,1.791-4.002,3.999-4.002C103.209,128.799,105,130.59,105,132.801z" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;fill-opacity:0.6;" d="M103.4,132.801c0,1.324-1.076,2.398-2.401,2.398c-1.323,0-2.401-1.074-2.401-2.398c0-1.326,1.078-2.4,2.401-2.4C102.324,130.4,103.4,131.475,103.4,132.801z" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#FC8358;" cx="100.999" cy="132.801" r="1.2" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.3;" cx="101" cy="69.6" r="4" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.6;" cx="100.999" cy="69.6" r="2.401" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" cx="100.999" cy="69.6" r="1.2" />
</g>
<g>
<text transform="matrix(1 0 0 1 96.0938 90.4897)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["urgent"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 96.0938 122.2217)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["serious"] : 0 }}</text>
</g>
</g>
</svg>
<svg v-show="alarmLevels.length === 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g>
<g>
<circle style="opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#4196FF;" cx="100" cy="100" r="100" />
</g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;fill-opacity:0.6;" cx="100" cy="100" r="92" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#D0E3EA;" cx="100" cy="100" r="92" />
</g>
<g>
<radialGradient id="real_time_alarm_statistics_1_1_" cx="100" cy="100" r="92" gradientUnits="userSpaceOnUse">
<stop offset="0.836" style="stop-color:#FFFFFF;stop-opacity:0.05" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.9" />
</radialGradient>
<path style="fill:url(#real_time_alarm_statistics_1_1_);" d="M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#091C38;" cx="100" cy="100" r="92" />
</g>
<g>
<g style="opacity:0.5;">
<path style="fill:#FFFFFF;" d="M100,11c49.075,0,89,39.925,89,89c0,49.075-39.925,89-89,89c-49.075,0-89-39.925-89-89C11,50.925,50.925,11,100,11 M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8L100,8z" />
</g>
</g>
<radialGradient id="real_time_alarm_statistics_1_2_" cx="100" cy="100" r="72.8008" gradientUnits="userSpaceOnUse">
<stop offset="0.9032" style="stop-color:#D0E3EA;stop-opacity:0.9" />
<stop offset="1" style="stop-color:#D0E3EA;stop-opacity:0.05" />
</radialGradient>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#real_time_alarm_statistics_1_2_);fill-opacity:0.6;" cx="100" cy="100" r="72.801" />
<path style="fill:#091C38;" d="M100,27.6c-39.984,0-72.4,32.413-72.4,72.4s32.416,72.4,72.4,72.4c39.986,0,72.4-32.413,72.4-72.4S139.986,27.6,100,27.6L100,27.6z" />
<g style="opacity:0.2;">
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="29.6" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.778" y2="32" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.801" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="50.219" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="64.801" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="81.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="29.6" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="31.998" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="39.032" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="50.219" y2="149.781" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="64.803" y2="160.968" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="81.779" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="100" y2="170.399" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="168" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="160.967" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="149.778" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.968" y2="135.199" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="118.222" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="170.4" y2="100" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="168.004" y2="81.777" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="160.967" y2="64.798" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="149.781" y2="50.218" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="135.198" y2="39.032" />
<line style="fill:none;stroke:#4196FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100" y1="100" x2="118.221" y2="32" />
</g>
<path style="opacity:0.1;fill:#4196FF;" d="M100,96.434c1.969,0,3.568,1.598,3.568,3.566s-1.6,3.566-3.568,3.566s-3.568-1.598-3.568-3.566S98.031,96.434,100,96.434 M100,95.633c-2.412,0-4.369,1.955-4.369,4.367s1.957,4.367,4.369,4.367s4.367-1.955,4.367-4.367S102.412,95.633,100,95.633L100,95.633z" />
<path style="opacity:0.12;fill:#4196FF;" d="M100,88.18c6.52,0,11.822,5.301,11.822,11.82S106.52,111.82,100,111.82S88.176,106.52,88.176,100S93.48,88.18,100,88.18 M100,87.379c-6.972,0-12.621,5.65-12.621,12.621s5.649,12.621,12.621,12.621s12.621-5.65,12.621-12.621S106.972,87.379,100,87.379L100,87.379z" />
<path style="opacity:0.14;fill:#4196FF;" d="M100,79.924c11.071,0,20.077,9.006,20.077,20.076s-9.006,20.076-20.077,20.076S79.923,111.07,79.923,100S88.929,79.924,100,79.924 M100,79.123c-11.531,0-20.877,9.347-20.877,20.877s9.346,20.876,20.877,20.876c11.529,0,20.877-9.346,20.877-20.876S111.529,79.123,100,79.123L100,79.123z" />
<path style="opacity:0.16;fill:#4196FF;" d="M100,71.67c15.623,0,28.33,12.708,28.33,28.33s-12.707,28.33-28.33,28.33S71.67,115.622,71.67,100S84.377,71.67,100,71.67 M100,70.869c-16.09,0-29.131,13.045-29.131,29.131S83.91,129.131,100,129.131s29.131-13.045,29.131-29.131S116.09,70.869,100,70.869L100,70.869z" />
<path style="opacity:0.18;fill:#4196FF;" d="M100,63.416c20.173,0,36.584,16.412,36.584,36.584c0,20.173-16.411,36.584-36.584,36.584c-20.174,0-36.584-16.411-36.584-36.584C63.416,79.828,79.826,63.416,100,63.416M100,62.615c-20.646,0-37.385,16.738-37.385,37.385c0,20.646,16.738,37.385,37.385,37.385s37.385-16.739,37.385-37.385C137.385,79.354,120.646,62.615,100,62.615L100,62.615z" />
<path style="opacity:0.2;fill:#4196FF;" d="M100,55.163c24.724,0,44.84,20.112,44.84,44.837s-20.116,44.837-44.84,44.837c-24.725,0-44.84-20.112-44.84-44.837S75.275,55.163,100,55.163 M100,54.363c-25.205,0-45.641,20.432-45.641,45.637S74.795,145.637,100,145.637s45.637-20.432,45.637-45.637S125.205,54.363,100,54.363L100,54.363z" />
<path style="opacity:0.22;fill:#4196FF;" d="M100,46.906c29.275,0,53.092,23.818,53.092,53.094S129.275,153.094,100,153.094S46.906,129.275,46.906,100S70.725,46.906,100,46.906 M100,46.109c-29.765,0-53.891,24.127-53.891,53.891c0,29.763,24.126,53.891,53.891,53.891s53.891-24.128,53.891-53.891C153.891,70.236,129.765,46.109,100,46.109L100,46.109z" />
<path style="opacity:0.24;fill:#4196FF;" d="M100,38.654c33.826,0,61.346,27.52,61.346,61.346s-27.52,61.346-61.346,61.346S38.654,133.826,38.654,100S66.174,38.654,100,38.654 M100,37.854c-34.322,0-62.146,27.823-62.146,62.146c0,34.32,27.824,62.146,62.146,62.146S162.146,134.32,162.146,100C162.146,65.677,134.322,37.854,100,37.854L100,37.854z" />
<path style="opacity:0.26;fill:#4196FF;" d="M100,30.4c38.378,0,69.6,31.222,69.6,69.6s-31.222,69.6-69.6,69.6S30.4,138.378,30.4,100S61.622,30.4,100,30.4 M100,29.6c-38.881,0-70.4,31.521-70.4,70.4c0,38.879,31.52,70.4,70.4,70.4c38.883,0,70.4-31.521,70.4-70.4C170.4,61.12,138.883,29.6,100,29.6L100,29.6z" />
<circle style="opacity:0;fill:#F43B42;" cx="100" cy="100" r="0.471" />
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" d="M100,8C49.189,8,8,49.189,8,100s41.189,92,92,92s92-41.189,92-92S150.811,8,100,8z M100,172c-39.768,0-72-32.236-72-72c0-39.768,32.236-72,72-72c39.768,0,72,32.236,72,72C172,139.768,139.763,172,100,172z" />
</g>
<image class="scaner" style="overflow:visible;" width="734" height="734" xlink:href="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" transform="matrix(0.192 0 0 0.192 29.5996 29.5996)" />
<g>
<g>
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.3;" cx="101" cy="101.001" r="4" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;fill-opacity:0.6;" cx="100.999" cy="101.001" r="2.401" />
<circle style="fill-rule:evenodd;clip-rule:evenodd;fill:#F43B42;" cx="100.999" cy="101.001" r="1.2" />
</g>
<g>
<text transform="matrix(1 0 0 1 96.0933 121.8906)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ alarmMonitorData ? alarmMonitorData["urgent"] : 0 }}</text>
</g>
<g>
<text transform="matrix(1 0 0 1 86.1982 84)" style="fill:#FFFFFF; font-family:'MicrosoftYaHei'; font-size:14;">{{ urgentName }}</text>
</g>
</g>
</svg>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps(['urgentName', 'seriousName', 'importantName', 'commonName', 'eventName', 'alarmMonitorData', 'alarmLevels'])
const { urgentName, seriousName, importantName, commonName, eventName, alarmMonitorData, alarmLevels } = toRefs(props)
</script>
<style lang="scss" scoped>
</style>

25
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts Normal file
View File

@ -0,0 +1,25 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { RealTimeAlarmStatisticsConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
// import background from '@/assets/customComponents/theme1/backgrond.jpg'
export const option = {
// 图片路径
dataset: '',
// 适应方式
fit: 'contain',
// 圆角
borderRadius: 0
}
export default class Config extends PublicConfigClass implements CreateComponentType
{
public key = RealTimeAlarmStatisticsConfig.key
public chartConfig = cloneDeep(RealTimeAlarmStatisticsConfig)
public option = cloneDeep(option)
public customData = cloneDeep({
title: '实时告警统计',
showInterval: true,
})
}

67
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<!-- <collapse-item name="属性" :expanded="true">-->
<!-- <setting-item-box name="路径" :alone="true">-->
<!-- <setting-item>-->
<!-- <n-input v-model:value="optionData.dataset" size="small"></n-input>-->
<!-- </setting-item>-->
<!-- </setting-item-box>-->
<!-- <setting-item-box name="样式">-->
<!-- <setting-item name="类型">-->
<!-- <n-select-->
<!-- v-model:value="optionData.fit"-->
<!-- size="small"-->
<!-- :options="fitList"-->
<!-- ></n-select>-->
<!-- </setting-item>-->
<!-- <setting-item name="圆角">-->
<!-- <n-input-number-->
<!-- v-model:value="optionData.borderRadius"-->
<!-- size="small"-->
<!-- :min="0"-->
<!-- placeholder="圆角"-->
<!-- ></n-input-number>-->
<!-- </setting-item>-->
<!-- </setting-item-box>-->
<!-- </collapse-item>-->
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
import {
CollapseItem,
SettingItemBox,
SettingItem,
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true,
},
})
// 适应类型
const fitList = [
{
value: 'fill',
label: 'fill'
},
{
value: 'contain',
label: 'contain'
},
{
value: 'cover',
label: 'cover'
},
{
value: 'scale-down',
label: 'scale-down'
},
{
value: 'none',
label: 'none'
},
]
</script>

16
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/configData.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<n-space vertical>
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
</n-space>
</template>
<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
</script>
<style lang="scss" scoped>
</style>

18
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.ts Normal file
View File

@ -0,0 +1,18 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/CUSTOMCOMPONENTS/index.d'
export const RealTimeAlarmStatisticsConfig: ConfigType = {
key: 'RealTimeAlarmStatistics',
chartKey: 'VRealTimeAlarmStatistics',
conKey: 'VCRealTimeAlarmStatistics',
conDataKey: 'VCDRealTimeAlarmStatistics',
title: '实时告警统计',
// category: ChatCategoryEnum.THEMES,
// categoryName: ChatCategoryEnumName.THEMES,
// package: PackagesCategoryEnum.THEMESANDLAYOUTS,
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'RealTimeAlarmStatistics.png'
}

106
src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div :style="getStyle(borderRadius)">
<BorderBox :title="props.chartConfig.customData.title">
<div ref="echart7" class="box-5-item" style="width: 50%"></div>
<v-chart
ref="vChartRef"
:option="option"
:manual-update="false"
:update-options="{
replaceMerge: ['series', 'xAxis']
}"
autoresize
style="overflow: visible;width: 50%"
/>
<div class="box-5-item" style="width: 50%">
<SvgAll v-bind="nameObj"/>
</div>
</BorderBox>
</div>
</template>
<script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, ref } from 'vue'
import { requireErrorImg } from '@/utils'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import moment from 'moment'
import BorderBox from '../components/BorderBox.vue'
import SvgAll from './Svg.vue'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
import {postMessageToParent, useGetMessageByParent} from '@/utils/utils'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
Object.assign(props.chartConfig.attr, {w: 380, h: 250})
Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const getStyle = (radius: number) => {
return {
borderRadius: `${radius}px`,
overflow: 'hidden'
}
}
const nameObj = reactive({
urgentName: '紧急',
seriousName: '严重',
importantName: '重要',
commonName: '一般',
eventName: '事件',
alarmMonitorData: {
urgent: 0,
serious: 0,
important: 0,
secondary: 0,
record: 0
},
alarmLevels: []
})
const option = reactive({
})
postMessageToParent({type: 'getStore', data: 'user'})
// const userStore = reactive({})
const {getMessageByParent} = useGetMessageByParent()
getMessageByParent('getStore', (e) => {
console.log(e)
})
</script>
<style lang="scss" scoped>
.Theme1{
position: relative;
.full-screen-btn {
border: #4396fd 1px solid;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
cursor: pointer;
position: absolute;
top: 16px;
right: 9.6%;
color: #4396fd;
font-size: 14px;
.full-screen {
font-size: 16px;
margin-right: 5px;
}
}
}
</style>

4
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts
View File

@ -18,4 +18,8 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key = RealTimeTrafficConfig.key
public chartConfig = cloneDeep(RealTimeTrafficConfig)
public option = cloneDeep(option)
public customData = cloneDeep({
title: '采集流量实时监测',
showInterval: true,
})
}

16
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/configData.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<n-space vertical>
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
</n-space>
</template>
<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
</script>
<style lang="scss" scoped>
</style>

2
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.ts
View File

@ -5,6 +5,8 @@ export const RealTimeTrafficConfig: ConfigType = {
key: 'RealTimeTraffic',
chartKey: 'VRealTimeTraffic',
conKey: 'VCRealTimeTraffic',
// VCD开头
conDataKey: 'VCDRealTimeTraffic',
title: '采集流量实时监测',
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,

24
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="getStyle(borderRadius)" style="overflow: visible">
<BorderBox title="采集流量实时监测">
<BorderBox :title="props.chartConfig.customData.title">
<v-chart
ref="vChartRef"
:option="option"
@ -28,6 +28,8 @@ import {isPreview} from '@/utils'
import {graphic} from "echarts";
import {cloneDeep} from 'lodash'
import moment from "moment"
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
const props = defineProps({
chartConfig: {
@ -36,6 +38,8 @@ const props = defineProps({
}
})
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
@ -257,15 +261,31 @@ const getData = () => {
})
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
})
onMounted(() => {
nextTick(() => {
getData()
})
if(!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => {
nextTick(() => {
getData()
})
}, 15000)
}, number)
})
onUnmounted(() => {
clearInterval(timer as number)

3
src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts
View File

@ -18,4 +18,7 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key = Theme1Config.key
public chartConfig = cloneDeep(Theme1Config)
public option = cloneDeep(option)
public customData = cloneDeep({
title: '中国建设银行广东省分行中心机房监控系统',
})
}

16
src/packages/components/CustomComponents/CustomComponents/Theme1/configData.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<n-space vertical>
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
</n-space>
</template>
<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
</script>
<style lang="scss" scoped>
</style>

1
src/packages/components/CustomComponents/CustomComponents/Theme1/index.ts
View File

@ -5,6 +5,7 @@ export const Theme1Config: ConfigType = {
key: 'Theme1',
chartKey: 'VTheme1',
conKey: 'VCTheme1',
conDataKey: 'VCDTheme1',
title: '背景1',
// category: ChatCategoryEnum.THEMES,
// categoryName: ChatCategoryEnumName.THEMES,

5
src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue
View File

@ -23,7 +23,7 @@
<path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
</g>
<g>
<text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;"></text>
<!-- <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;text-align: center;"></text>-->
</g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
@ -90,6 +90,7 @@
</g>
</g>
</svg>
<div style="font: 30px PingFang-SC-Bold;color: #fff;width: 1920px;height: 60px;line-height: 60px;text-align: center;position: absolute;top: 0;">{{props.chartConfig.customData.title}}</div>
<n-image
:object-fit="fit"
preview-disabled
@ -110,6 +111,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import moment from 'moment'
import background from '@/assets/customComponents/theme1/backgrond.jpg'
import { isPreview } from '@/utils/router'
const props = defineProps({
chartConfig: {
@ -130,6 +132,7 @@ const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周
let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
let timer: unknown
onMounted(() => {
if(!isPreview()) return
timer = setInterval(() => {
date.value = moment().format('yyyy-MM-DD')
time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]

5
src/packages/components/CustomComponents/CustomComponents/components/BorderBox.vue
View File

@ -10,7 +10,9 @@
</template>
<script lang="ts" setup>
const { title } = defineProps(['title'])
import { toRefs } from 'vue'
const props = defineProps(['title'])
const { title } = toRefs(props)
</script>
<style lang="scss" scoped>
@ -40,6 +42,7 @@ const { title } = defineProps(['title'])
}
.content{
height: calc(100% - 40px);
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

5
src/packages/components/CustomComponents/CustomComponents/index.ts
View File

@ -1,6 +1,7 @@
import { Theme1Config } from './Theme1/index'
// import { ComprehensivePUEConfig } from './ComprehensivePUE'
import { ComprehensivePUEConfig } from './ComprehensivePUE'
import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
import { RealTimeTrafficConfig } from './RealTimeTraffic'
import { RealTimeAlarmStatisticsConfig } from './RealTimeAlarmStatistics'
export default [ Theme1Config, DeviceAlarmOverviewConfig, RealTimeTrafficConfig ]
export default [ Theme1Config, ComprehensivePUEConfig, DeviceAlarmOverviewConfig, RealTimeTrafficConfig, RealTimeAlarmStatisticsConfig ]

6
src/packages/index.d.ts vendored
View File

@ -22,6 +22,8 @@ export type ConfigType = {
chartKey: string
// 右侧设置面板组件 key
conKey: string
// 右侧设置面板组件 key 数据tab
conDataKey?: string,
// 标题
title: string
// 分类
@ -139,6 +141,7 @@ export interface PublicConfigType {
overFlowHidden?: boolean
}
filter?: string
customData?: { [key:string]: any },
status: StatusType
interactActions?: InteractActionsType[]
events: {
@ -198,7 +201,8 @@ export enum PackagesCategoryName {
// 获取组件
export enum FetchComFlagType {
VIEW,
CONFIG
CONFIG,
CONFIGDATA
}
// 图表包类型

21
src/packages/index.ts
View File

@ -11,6 +11,9 @@ import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
eager: true
})
const configDataModules: Record<string, { default: string }> = import.meta.glob('./components/**/configData.vue', {
eager: true
})
const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
eager: true
})
@ -59,10 +62,15 @@ export const createComponent = async (targetData: ConfigType) => {
/**
* * 获取组件
* @param {string} chartName 名称
* @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
* @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 2为配置数据tab组件
*/
const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
let map = {
[FetchComFlagType.VIEW]: indexModules,
[FetchComFlagType.CONFIG]: configModules,
[FetchComFlagType.CONFIGDATA]: configDataModules,
}
const module = map[flag]
for (const key in module) {
const urlSplit = key.split('/')
if (urlSplit[urlSplit.length - 2] === chartName) {
@ -89,6 +97,15 @@ export const fetchConfigComponent = (dropData: ConfigType) => {
return fetchComponent(key, FetchComFlagType.CONFIG)?.default
}
/**
* * 获取配置数据tab组件
* @param {ConfigType} dropData 配置项
*/
export const fetchConfigDataComponent = (dropData: ConfigType) => {
const { key } = dropData
return fetchComponent(key, FetchComFlagType.CONFIGDATA)?.default
}
/**
* * 获取图片内容
* @param {ConfigType} targetData 配置项

2
src/packages/public/publicConfig.ts
View File

@ -95,6 +95,8 @@ export class PublicConfigClass implements PublicConfigType {
public request = cloneDeep(requestConfig)
// 数据过滤
public filter: undefined | string = undefined
// 自定义数据 configData组件会用到
public customData = {}
// 事件
public events = {
baseEvent: {

2
src/settings/designSetting.ts
View File

@ -53,7 +53,7 @@ export const carouselInterval = 4000
export const backgroundImageSize = 5
// 预览展示方式
export const previewScaleType = PreviewScaleEnum.FIT
export const previewScaleType = PreviewScaleEnum.FULL
// 编辑工作台同步到 JSON 的轮询间隔（5S）
export const editToJsonInterval = 5000

14
src/utils/router.ts
View File

@ -200,6 +200,20 @@ export const fetchRouteParamsLocation = () => {
* @param confirm
*/
export const goHome = () => {
// 跳回原系统
const routerStore:any = useRouterStore()
if (routerStore && routerStore.getCallByParent) {
// 获取父页面的 window 对象
var parentWindow = window.parent;
const message = {
// 属于哪个页面
page: 'customLargeScreen',
// 属于什么类型
type: 'goHome',
}
parentWindow.postMessage(JSON.stringify(message), '*');
return
}
routerTurnByName(PageEnum.BASE_HOME_NAME)
}

45
src/utils/utils.ts
View File

@ -1,4 +1,4 @@
import { h } from 'vue'
import { h, onMounted, onUnmounted } from 'vue'
import { NIcon } from 'naive-ui'
import screenfull from 'screenfull'
import throttle from 'lodash/throttle'
@ -11,6 +11,7 @@ import { WinKeyboard } from '@/enums/editPageEnum'
import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { excludeParseEventKeyList, excludeParseEventValueList } from '@/enums/eventEnum'
import {useRouterStore} from "@/store/modules/routerStore/routerStore";
/**
* * 判断是否是开发环境
@ -351,3 +352,45 @@ export const addWindowUnload = () => {
window.onbeforeunload = null
}
}
/**
* 向父页面发送消息
*/
export const postMessageToParent = (obj = {}) => {
const routerStore:any = useRouterStore()
if (routerStore && routerStore.getCallByParent) {
// 获取父页面的 window 对象
var parentWindow = window.parent;
const message = {
// 属于哪个页面
page: 'customLargeScreen',
// 属于什么类型
// type: 'goHome',
...obj
}
parentWindow.postMessage(JSON.stringify(message), '*');
return
}
}
/**
* 从父页面接收消息
*/
export const useGetMessageByParent = () => {
const getMessageByParent = (type = '', cb = (e:any) => {}) => {
onMounted(() => {
window.addEventListener('message', cb);
let obj = {
page: 'customLargeScreen',
type
}
window.parent.postMessage(JSON.stringify(obj), '*');
})
onUnmounted(() => {
window.removeEventListener('message', cb);
})
}
return {
getMessageByParent
}
}

4
src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
View File

@ -60,7 +60,7 @@ import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayou
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
import { DragKeyEnum } from '@/enums/editPageEnum'
import { createComponent } from '@/packages'
import {createComponent, fetchConfigDataComponent} from '@/packages'
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
@ -99,6 +99,7 @@ const dragStartHandle = (e: DragEvent, item: ConfigType) => {
// 动态注册图表组件
componentInstall(item.chartKey, fetchChartComponent(item))
componentInstall(item.conKey, fetchConfigComponent(item))
if(item.conDataKey) componentInstall(item.conDataKey, fetchConfigDataComponent(item))
// 将配置项绑定到拖拽属性上
e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
// 修改状态
@ -118,6 +119,7 @@ const dblclickHandle = async (item: ConfigType) => {
// 动态注册图表组件
componentInstall(item.chartKey, fetchChartComponent(item))
componentInstall(item.conKey, fetchConfigComponent(item))
if(item.conDataKey) componentInstall(item.conDataKey, fetchConfigDataComponent(item))
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(item)
if (item.redirectComponent) {

15
src/views/chart/ContentConfigurations/components/ChartData/index.d.ts vendored
View File

@ -82,24 +82,29 @@ export interface SelectHttpTimeType {
label: string
value: RequestHttpIntervalEnum
disabled?: boolean
unit: number
}
// 时间选项
export const selectTimeOptions: SelectHttpTimeType[] = [
{
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.SECOND],
value: RequestHttpIntervalEnum.SECOND
value: RequestHttpIntervalEnum.SECOND,
unit: 1000,
},
{
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.MINUTE],
value: RequestHttpIntervalEnum.MINUTE
value: RequestHttpIntervalEnum.MINUTE,
unit: 60000,
},
{
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.HOUR],
value: RequestHttpIntervalEnum.HOUR
value: RequestHttpIntervalEnum.HOUR,
unit: 3600000,
},
{
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.DAY],
value: RequestHttpIntervalEnum.DAY
value: RequestHttpIntervalEnum.DAY,
unit: 86400000,
},
]
]

21
src/views/chart/ContentConfigurations/components/ChartData/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="go-chart-configurations-data" v-if="targetData">
<div class="go-chart-configurations-data" v-if="targetData && !targetData.chartConfig.conDataKey">
<setting-item-box name="请求方式" :alone="true">
<n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
</setting-item-box>
@ -10,6 +10,24 @@
<!-- 数据池 -->
<chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond>
</div>
<div v-if="targetData && targetData.chartConfig.conDataKey">
<component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component>
<setting-item-box v-if="targetData.customData.showInterval" name="更新间隔" :alone="true">
<n-input-group>
<n-input-number
v-model:value.trim="targetData.request.requestInterval"
min="0"
:show-button="false"
placeholder="请输入"
size="small"
style="flex: 1;"
>
</n-input-number>
<!-- 单位 -->
<n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/>
</n-input-group>
</setting-item-box>
</div>
</template>
<script setup lang="ts">
@ -20,6 +38,7 @@ import { RequestDataTypeEnum } from '@/enums/httpEnum'
import { ChartFrameEnum } from '@/packages/index.d'
import { useTargetData } from '../hooks/useTargetData.hook'
import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))

3
src/views/chart/hooks/useSync.hook.ts
View File

@ -8,7 +8,7 @@ import { StylesSetting } from '@/components/Pages/ChartItemSetting'
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
import { fetchChartComponent, fetchConfigComponent, fetchConfigDataComponent, createComponent } from '@/packages/index'
import { saveInterval } from '@/settings/designSetting'
import throttle from 'lodash/throttle'
// 接口状态
@ -126,6 +126,7 @@ export const useSync = () => {
if (!window['$vue'].component(target.chartConfig.chartKey)) {
window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
window['$vue'].component(target.chartConfig.conDataKey, fetchConfigDataComponent(target.chartConfig))
}
}