2025-12-01 13:19:18 +08:00
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<TableHeader date-picker area ref="TableHeaderRef">
|
|
|
|
|
<template v-slot:select>
|
|
|
|
|
<el-form-item label="对象类型">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="tableStore.table.params.objType"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
placeholder="请选择对象类型"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in objTypeList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="终端厂家:">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="tableStore.table.params.manufacturer"
|
|
|
|
|
clearable
|
|
|
|
|
|
|
|
|
|
placeholder="请选择终端厂家"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in terminaloption"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-slot:operation></template>
|
|
|
|
|
</TableHeader>
|
|
|
|
|
<div class="card-list pt10" v-loading="loading">
|
|
|
|
|
<div class="monitoringPoints">
|
|
|
|
|
<el-card style="height: 200px">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<span>监测点统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="statistics">
|
|
|
|
|
<div class="divBox">
|
|
|
|
|
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
|
|
|
|
<span class="divBox_title">监测点总数</span>
|
|
|
|
|
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="divBox" style="width: 200px">
|
|
|
|
|
<span class="iconfont icon-yichang" style="color: #ffbf00"></span>
|
|
|
|
|
<span class="divBox_title">告警测点数</span>
|
|
|
|
|
<span class="divBox_num" style="color: #ffbf00">
|
|
|
|
|
{{ monitoringPoints.abnormalNum }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="echartTitle">
|
|
|
|
|
<div>告警占比</div>
|
|
|
|
|
<div>
|
|
|
|
|
{{
|
|
|
|
|
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
|
|
|
|
|
? 0
|
|
|
|
|
: Math.floor((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 10000) /
|
|
|
|
|
100
|
|
|
|
|
}}%
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="height: 30px">
|
|
|
|
|
<MyEchart :options="percentage"></MyEchart>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card class="mt10">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<span>告警指标统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span style="flex: 1; text-align: left">指标名称</span>
|
|
|
|
|
|
|
|
|
|
<span style="width: 110px">告警测点数</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div :style="indicatorHeight" style="overflow-y: auto">
|
|
|
|
|
<div v-for="o in abnormal" class="abnormal mb10">
|
|
|
|
|
<span style="flex: 1; height: 24px" class="iconDiv">
|
|
|
|
|
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FFBF00' : '' }"></div>
|
|
|
|
|
{{ o.targetName }}
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span style="width: 110px; text-align: center">
|
|
|
|
|
<span
|
|
|
|
|
style="color: #388e3c"
|
|
|
|
|
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
|
|
|
|
|
class="text"
|
|
|
|
|
@click="quantityClick(o, 0)"
|
|
|
|
|
>
|
|
|
|
|
{{ o.ids.length }}
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
<el-card class="detail ml10" :style="pageHeight">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<span>告警详情统计</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div style="height: 350px">
|
|
|
|
|
<MyEchart :options="options"></MyEchart>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form :inline="true" class="form">
|
|
|
|
|
<el-form-item label="告警持续天数"></el-form-item>
|
|
|
|
|
<el-form-item label="告警阀值(天)">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="tableStore.table.params.alarmDayLimit"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
step-strictly
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="预警阀值(天)">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="tableStore.table.params.warnDayLimit"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
step-strictly
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="form_but">
|
|
|
|
|
<el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
|
|
|
|
|
<el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!--表格-->
|
|
|
|
|
<div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
|
|
|
|
|
<vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
|
|
|
|
|
<vxe-column type="seq" title="序号" width="80px">
|
|
|
|
|
<template #default="{ rowIndex }">
|
|
|
|
|
<span>
|
|
|
|
|
{{
|
|
|
|
|
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
|
|
|
|
|
rowIndex +
|
|
|
|
|
1
|
|
|
|
|
}}
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-column>
|
|
|
|
|
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
|
|
|
|
|
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
|
|
|
|
<vxe-column field="devName" title="所属终端名称"></vxe-column>
|
|
|
|
|
<vxe-column field="ip" title="IP">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
{{ decryptFromBase64(row.ip) }}
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-column>
|
|
|
|
|
<vxe-column field="stationName" title="所属电站"></vxe-column>
|
|
|
|
|
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
|
|
|
|
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
|
|
|
|
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
|
|
|
|
<vxe-column field="abnormalDay" title="告警天数">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<span class="table_name" @click="quantityClick(row, 1)">
|
|
|
|
|
{{ row.abnormalDay }}
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-column>
|
|
|
|
|
<vxe-column field="abnormalDay" title="严重度">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
|
|
|
|
|
<el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-column>
|
|
|
|
|
</vxe-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <Table ref="tableRef"></Table> -->
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
<alarmDetails ref="alarmDetailsRef" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import TableStore from '@/utils/tableStore'
|
|
|
|
|
import Table from '@/components/table/index.vue'
|
|
|
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
|
|
|
import { onMounted, provide, ref } from 'vue'
|
|
|
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
|
|
|
import { useDictData } from '@/stores/dictData'
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
|
|
|
import alarmDetails from './alarmDetails.vue'
|
|
|
|
|
import { getMonitorLimitDataDay } from '@/api/device-boot/dataVerify'
|
|
|
|
|
import { queryFirstNode } from '@/api/auth'
|
|
|
|
|
import { decryptFromBase64 } from '@/utils/index'
|
|
|
|
|
const alarmDetailsRef = ref()
|
|
|
|
|
const dictData = useDictData()
|
|
|
|
|
//字典获取监督对象类型
|
|
|
|
|
const objTypeList: any = ref([])
|
|
|
|
|
const pageHeight = mainHeight(97)
|
|
|
|
|
const indicatorHeight = mainHeight(402)
|
|
|
|
|
|
|
|
|
|
const monitoringPoints = ref({
|
|
|
|
|
runNum: 0,
|
|
|
|
|
abnormalNum: 0
|
|
|
|
|
})
|
|
|
|
|
const tableRef = ref()
|
|
|
|
|
const percentage = ref({})
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const TableHeaderRef = ref()
|
|
|
|
|
const abnormal: any = ref([])
|
|
|
|
|
const mapList: any = ref([])
|
|
|
|
|
const segmented = ref(1)
|
|
|
|
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
|
|
|
|
const time = ref(['', ''])
|
|
|
|
|
|
|
|
|
|
const tableStore = new TableStore({
|
|
|
|
|
url: '/device-boot/dataVerify/getMonitorLimitData',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
showPage: false,
|
|
|
|
|
filename: '稳态告警统计',
|
|
|
|
|
publicHeight: 470,
|
|
|
|
|
column: [],
|
|
|
|
|
beforeSearchFun: () => {
|
|
|
|
|
loading.value = true
|
|
|
|
|
tableStore.table.params.deptId = tableStore.table.params.deptIndex
|
|
|
|
|
time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
|
|
|
|
|
},
|
|
|
|
|
loadCallback: () => {
|
|
|
|
|
// console.log('🚀 ~ abnormal.value:', tableStore.table.data)
|
|
|
|
|
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
|
|
|
|
|
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
|
|
|
|
|
abnormal.value = tableStore.table.data.targetList
|
|
|
|
|
mapList.value = tableStore.table.data.mapList
|
|
|
|
|
tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
|
|
|
|
|
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
|
|
|
|
|
|
|
|
|
|
echart()
|
|
|
|
|
loading.value = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const options = ref({})
|
|
|
|
|
const echart = () => {
|
|
|
|
|
percentage.value = {
|
|
|
|
|
color: ['#FFBF00'],
|
|
|
|
|
options: {
|
|
|
|
|
dataZoom: null,
|
|
|
|
|
toolbox: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: '0%',
|
|
|
|
|
left: '0%',
|
|
|
|
|
right: '0%',
|
|
|
|
|
bottom: '0%'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
show: false,
|
|
|
|
|
data: ['']
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
show: false,
|
|
|
|
|
type: 'value'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '告警总数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: 12,
|
|
|
|
|
data: [100],
|
|
|
|
|
z: 0,
|
|
|
|
|
zlevel: 0,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 1,
|
|
|
|
|
y2: 0,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#57bc6e' // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '告警占比',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: 13,
|
|
|
|
|
data: [
|
|
|
|
|
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
|
|
|
|
|
? ''
|
|
|
|
|
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
|
|
|
|
|
],
|
|
|
|
|
z: 0,
|
|
|
|
|
zlevel: 0,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 1,
|
|
|
|
|
y2: 0,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#FFBF00' // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#FFBF00' // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
symbolRepeat: 50,
|
|
|
|
|
// symbolMargin: 300,
|
|
|
|
|
symbol: 'rect',
|
|
|
|
|
symbolClip: true,
|
|
|
|
|
symbolSize: [2, 20],
|
|
|
|
|
symbolPosition: 'start',
|
|
|
|
|
symbolOffset: [0, 0],
|
|
|
|
|
data: [100],
|
|
|
|
|
z: 1,
|
|
|
|
|
zlevel: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barGap: '-110%',
|
|
|
|
|
data: [100],
|
|
|
|
|
barWidth: 18,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: 'transparent',
|
|
|
|
|
barBorderColor: 'rgb(148,217,249)',
|
|
|
|
|
barBorderWidth: 1
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
z: 2
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
options.value = {
|
|
|
|
|
title: {
|
|
|
|
|
text: `监测点告警统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
name: '时间',
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
data: mapList.value.map(item => item.time),
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: function (value) {
|
|
|
|
|
let time = ''
|
|
|
|
|
if (value.slice(-2) == '01') {
|
|
|
|
|
time = value
|
|
|
|
|
} else {
|
|
|
|
|
time = value.slice(5, 10)
|
|
|
|
|
}
|
|
|
|
|
return time
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
name: '数量' // 给X轴加单位
|
|
|
|
|
},
|
|
|
|
|
grid: {},
|
|
|
|
|
color: ['#FFBF00'],
|
|
|
|
|
options: {
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '告警监测点数量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
|
|
|
|
data: mapList.value.map(item => item.val)
|
|
|
|
|
// mapList.value.map(item => ({
|
|
|
|
|
// value: [item.time, item.val]
|
|
|
|
|
// }))
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// tableStore.table.params.deptId = dictData.state.area[0].id
|
|
|
|
|
tableStore.table.params.objType = ''
|
|
|
|
|
tableStore.table.params.alarmDayLimit = 5
|
|
|
|
|
tableStore.table.params.warnDayLimit = 1
|
|
|
|
|
tableStore.table.params.manufacturer = ''
|
|
|
|
|
const quantityClick = (e: any, num: number) => {
|
|
|
|
|
if (num == 0 && e.ids?.length == 0) return
|
|
|
|
|
alarmDetailsRef.value.open(e, time.value, num)
|
|
|
|
|
}
|
|
|
|
|
// 更新
|
|
|
|
|
const MonitorVerify = () => {
|
|
|
|
|
tableStore.table.loading = true
|
|
|
|
|
getMonitorLimitDataDay(tableStore.table.params).then(res => {
|
|
|
|
|
tableStore.table.data = res.data
|
|
|
|
|
tableStore.table.allData = res.data
|
|
|
|
|
tableStore.table.loading = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const formatter = (row: any) => {
|
|
|
|
|
return row.cellValue || '/'
|
|
|
|
|
}
|
|
|
|
|
// 导出
|
|
|
|
|
const onExport = () => {
|
|
|
|
|
tableRef.value?.exportData({
|
|
|
|
|
filename: tableStore.table.filename, // 文件名字
|
|
|
|
|
sheetName: 'Sheet1',
|
|
|
|
|
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
|
|
|
|
useStyle: true,
|
|
|
|
|
data: tableStore.table.data, // 数据源 // 过滤那个字段导出
|
|
|
|
|
columnFilterMethod: function (column: any) {
|
|
|
|
|
return !(
|
|
|
|
|
column.column.title === undefined ||
|
|
|
|
|
column.column.title === '序号' ||
|
|
|
|
|
column.column.title === '操作'
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// TableHeaderRef.value.setDatePicker([
|
|
|
|
|
// { label: '年份', value: 1 },
|
|
|
|
|
// { label: '季度', value: 2 },
|
|
|
|
|
// { label: '月份', value: 3 }
|
|
|
|
|
// ])
|
|
|
|
|
queryFirstNode({ type: 0 }).then(res => {
|
|
|
|
|
objTypeList.value = res.data
|
|
|
|
|
})
|
|
|
|
|
// 加载数据
|
|
|
|
|
tableStore.index()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
tableStore.table.params.name = ''
|
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.card-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
.monitoringPoints {
|
|
|
|
|
width: 440px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.statistics {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.divBox {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 70px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.iconfont {
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.divBox_title {
|
|
|
|
|
font-weight: 550;
|
|
|
|
|
}
|
|
|
|
|
.divBox_num {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 550;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
font-family: AlimamaDongFangDaKai;
|
|
|
|
|
}
|
|
|
|
|
align-items: center;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
&:nth-child(1) {
|
|
|
|
|
background-color: #eef8f0;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(2) {
|
|
|
|
|
background-color: #fff6ed;
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(3) {
|
|
|
|
|
background-color: #e5f8f6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.detail {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
.abnormal {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #f3f6f9;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 5px 0px 5px 10px;
|
|
|
|
|
.iconDiv {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
div {
|
|
|
|
|
width: 4px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
background-color: var(--el-color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: 'Source Code Pro', monospace;
|
|
|
|
|
|
|
|
|
|
// font-feature-settings: 'tnum';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-card__header) {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
span {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
.iconFont {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.form {
|
|
|
|
|
position: relative;
|
|
|
|
|
.form_but {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-header {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.table_name) {
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
text-underline-offset: 4px;
|
|
|
|
|
}
|
|
|
|
|
.echartTitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
div:nth-child(2) {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffbf00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-segmented__item-selected, ) {
|
|
|
|
|
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-segmented__item, ) {
|
|
|
|
|
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-segmented) {
|
|
|
|
|
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
|
|
|
|
}
|
|
|
|
|
.text-red {
|
|
|
|
|
color: #ffbf00 !important;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
