修改冀北问题
This commit is contained in:
guanj
512
src/components/cockpit/dataCleaning/index.vue
Normal file
512
src/components/cockpit/dataCleaning/index.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--异常数据清洗 -->
|
||||
<TableHeader
|
||||
:showReset="false"
|
||||
ref="TableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">监测点统计</div>
|
||||
|
||||
<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 mt10">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">异常测点数</span>
|
||||
<span class="divBox_num" style="color: #ff6600">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div class="title">异常占比</div>
|
||||
<div>
|
||||
{{
|
||||
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
|
||||
? 0
|
||||
: ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 2" class="ml15">
|
||||
<div class="title">异常指标统计</div>
|
||||
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="change"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<div
|
||||
class="segmentedIcon"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
scope.item.num > 0 ? '#FF9100' : scope.item.num > 99 ? '#ff0000' : '#007D7B'
|
||||
}"
|
||||
>
|
||||
{{ scope.item.num > 99 ? '99+' : scope.item.num }}
|
||||
</div>
|
||||
<div>{{ scope.item.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 170px; text-align: left">指标名称</span>
|
||||
<span style="flex: 1">合理范围</span>
|
||||
<span style="width: 90px">异常测点数</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-for="o in abnormal.filter(item => item.remark == segmented)" class="abnormal mb10">
|
||||
<span style="width: 170px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
|
||||
{{ o.targetName }}
|
||||
</span>
|
||||
<span style="flex: 1; text-align: center">
|
||||
<!-- 合理范围： -->
|
||||
<span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
|
||||
</span>
|
||||
<span style="width: 90px; text-align: center">
|
||||
<span style="color: #388e3c" :class="` ${o.ids.length > 0 ? 'text-red' : ''}`" class="text">
|
||||
{{ o.ids.length }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
const TableHeaderRef = ref()
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0
|
||||
})
|
||||
const segmented = ref('base')
|
||||
const percentage = ref({})
|
||||
const segmentedList = ref([
|
||||
{
|
||||
label: '基础指标',
|
||||
value: 'base',
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
label: '稳态指标',
|
||||
value: 'harmonic',
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
label: '暂态指标',
|
||||
value: 'event',
|
||||
num: 0
|
||||
}
|
||||
])
|
||||
const abnormal: any = ref([])
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/dataVerify/getMonitorVerifyData',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
if (prop.timeValue && Array.isArray(prop.timeValue)) {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue[1]
|
||||
}
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
segmentedList.value[0].num = 0
|
||||
segmentedList.value[1].num = 0
|
||||
segmentedList.value[2].num = 0
|
||||
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
|
||||
abnormal.value = tableStore.table.data.targetList
|
||||
abnormal.value.forEach(item => {
|
||||
const { remark, ids } = item
|
||||
if (remark === 'base') segmentedList.value[0].num += ids.length
|
||||
else if (remark === 'harmonic') segmentedList.value[1].num += ids.length
|
||||
else if (remark === 'event') segmentedList.value[2].num += ids.length
|
||||
})
|
||||
|
||||
echart()
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
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: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
const change = () => {
|
||||
tableStore.table.loading = true
|
||||
setTimeout(() => {
|
||||
tableStore.table.loading = false
|
||||
}, 500)
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 100%;
|
||||
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;
|
||||
text-align: center;
|
||||
|
||||
// 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;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
: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%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: calc(50% - 44px);
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
491
src/components/cockpit/integrity/index.vue
Normal file
491
src/components/cockpit/integrity/index.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--监测点数据完整性 -->
|
||||
<TableHeader
|
||||
:showReset="false"
|
||||
ref="TableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">监测点统计</div>
|
||||
|
||||
<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 mt10">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%监测点数</span>
|
||||
<span class="divBox_num" style="color: #ff6600">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div class="title">总的数据完整性</div>
|
||||
<div>
|
||||
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 2" class="ml15">
|
||||
<div class="title">完整性统计</div>
|
||||
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
></el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">监测点总数</span>
|
||||
<span style="flex: 1">低于90%监测点数</span>
|
||||
<span style="width: 80px">完整性(%)</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.citName }}
|
||||
</span>
|
||||
<!-- 监测点总数 -->
|
||||
<span style="width: 90px; color: #388e3c" class="text">
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%监测点数 -->
|
||||
<span style="flex: 1; color: #ff9100" class="text">
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.citTotalOnlineRate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const segmented = ref('Power_Network')
|
||||
const percentage = ref({})
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const abnormal: any = ref([])
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/data',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
if (prop.timeValue && Array.isArray(prop.timeValue)) {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue[1]
|
||||
}
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
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: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
echart()
|
||||
}, 100)
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 100%;
|
||||
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;
|
||||
text-align: center;
|
||||
|
||||
// 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;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
: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%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
489
src/components/cockpit/onlineRate/index.vue
Normal file
489
src/components/cockpit/onlineRate/index.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--终端在线率 -->
|
||||
<TableHeader
|
||||
:showReset="false"
|
||||
ref="TableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">终端统计</div>
|
||||
|
||||
<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 mt10">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%终端数</span>
|
||||
<span class="divBox_num" style="color: #ff6600">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div class="title">总的数据在线率</div>
|
||||
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 2" class="ml15">
|
||||
<div class="title">在线率统计</div>
|
||||
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
></el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">低于90%终端数</span>
|
||||
<span style="width: 80px">在线率(%)</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.citName }}
|
||||
</span>
|
||||
<!-- 终端总数 -->
|
||||
<span style="width: 90px; color: #388e3c" class="text">
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%终端数 -->
|
||||
<span style="flex: 1; color: #ff9100" class="text">
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.citTotalOnlineRate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const segmented = ref('Power_Network')
|
||||
const percentage = ref({})
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const abnormal: any = ref([])
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/onLineRate/deviceOnlineRateInfo',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
if (prop.timeValue && Array.isArray(prop.timeValue)) {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue[1]
|
||||
}
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
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: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
echart()
|
||||
}, 100)
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 100%;
|
||||
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;
|
||||
text-align: center;
|
||||
|
||||
// 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;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
: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%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
430
src/components/cockpit/terminalEvaluation/index.vue
Normal file
430
src/components/cockpit/terminalEvaluation/index.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--监测点数据完整性 -->
|
||||
<TableHeader
|
||||
:showReset="false"
|
||||
ref="TableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">终端统计</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon">
|
||||
<div style="color: #fff">{{ statisticsList.allNum }}</div>
|
||||
<div class="mt10 divBot">总数</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon1">
|
||||
<div style="color: #fff">{{ statisticsList.runNum }}</div>
|
||||
<div class="mt10 divBot">在运</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon hexagon2">
|
||||
<div style="color: #fff">{{ statisticsList.checkNum }}</div>
|
||||
<div class="mt10 divBot">检修</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon3">
|
||||
<div style="color: #fff">{{ statisticsList.stopRunNum }}</div>
|
||||
<div class="mt10 divBot">停运</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 2" class="ml15">
|
||||
<div class="title">完整性统计</div>
|
||||
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
></el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">完整性(%)</span>
|
||||
<span style="flex: 1">在线率(%)</span>
|
||||
<span style="flex: 1">合格率(%)</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.name }}
|
||||
</span>
|
||||
<!-- 终端总数 -->
|
||||
<span style="width: 90px; color: #388e3c" class="text">
|
||||
{{ o.count }}
|
||||
</span>
|
||||
<!-- -->
|
||||
<sp
|
||||
style="flex: 1; color: #ff9100"
|
||||
class="text"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
>
|
||||
{{ o.integrity }}
|
||||
</sp>
|
||||
<span
|
||||
style="flex: 1; color: #388e3c"
|
||||
:class="` ${o.online < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.online }}
|
||||
</span>
|
||||
<span
|
||||
style="flex: 1; color: #388e3c"
|
||||
:class="` ${o.qualified < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.qualified }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const segmented = ref('Power_Network')
|
||||
const percentage = ref({})
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const statisticsList: any = ref({
|
||||
allNum: 0,
|
||||
runNum: 0,
|
||||
checkNum: 0,
|
||||
stopRunNum: 0
|
||||
})
|
||||
const abnormal: any = ref([])
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const totalData = ref([])
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/deviceRunEvaluate/getRunEvaluateInfo',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
if (prop.timeValue && Array.isArray(prop.timeValue)) {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue[1]
|
||||
}
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data
|
||||
.map((item: any) => item.list)
|
||||
.flat()
|
||||
.reduce((map: any, item: any) => {
|
||||
if (!map.has(item.id)) {
|
||||
map.set(item.id, item)
|
||||
}
|
||||
return map
|
||||
}, new Map())
|
||||
.values()
|
||||
)
|
||||
|
||||
// tableStore.table.data
|
||||
statisticsList.value.allNum = totalData.value.length
|
||||
statisticsList.value.runNum = tableStore.table.data.allNum
|
||||
statisticsList.value.checkNum = tableStore.table.data.allNum
|
||||
statisticsList.value.stopRunNum = tableStore.table.data.allNum
|
||||
|
||||
abnormal.value = tableStore.table.data
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
text-align: center;
|
||||
|
||||
// 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;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
: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%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.box1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.boxDiv {
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
|
||||
div:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
top: -10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.divBot {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.hexagon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 55px;
|
||||
background-color: #19a094;
|
||||
margin: 50px auto;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #19a094;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #19a094;
|
||||
}
|
||||
}
|
||||
|
||||
.hexagon::before,
|
||||
.hexagon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-left: 50px solid transparent;
|
||||
border-right: 50px solid transparent;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
bottom: 98%;
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
top: 98%;
|
||||
}
|
||||
.hexagon1 {
|
||||
background-color: #2e8b57;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #2e8b57;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #2e8b57;
|
||||
}
|
||||
}
|
||||
.hexagon2 {
|
||||
background-color: #ffbf00;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #ffbf00;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #ffbf00;
|
||||
}
|
||||
}
|
||||
.hexagon3 {
|
||||
background-color: #a52a2a;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #a52a2a;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #a52a2a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
450
src/components/cockpit/terminalEvaluation/index1.vue
Normal file
450
src/components/cockpit/terminalEvaluation/index1.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--终端运行评价 -->
|
||||
<TableHeader
|
||||
:showReset="false"
|
||||
ref="TableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">终端统计</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon">
|
||||
<div style="color: #fff">100</div>
|
||||
<div class="mt10 divBot">总数</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon1">
|
||||
<div style="color: #fff">50</div>
|
||||
<div class="mt10 divBot">在运</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon hexagon2">
|
||||
<div style="color: #fff">25</div>
|
||||
<div class="mt10 divBot">检修</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon3">
|
||||
<div style="color: #fff">25</div>
|
||||
<div class="mt10 divBot">停运</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 2" class="ml15">
|
||||
<div class="title">终端运行评价</div>
|
||||
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<div>{{ typeof scope.item === 'object' ? scope.item.label : scope.item }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{ segmented == 0 ? '区域' : segmented == 1 ? '终端厂家' : '电网标志' }}
|
||||
</span>
|
||||
<span style="flex: 1">在运终端数</span>
|
||||
<span style="width: 80px">评价</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 105px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.integrity < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.targetName }}
|
||||
</span>
|
||||
|
||||
<!-- 在运终端数 -->
|
||||
<span style="flex: 1; color: #388e3c" class="text">
|
||||
{{ o.rangeDesc }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.integrity }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const monitoringPoints = ref({
|
||||
runNum: 110,
|
||||
abnormalNum: 10
|
||||
})
|
||||
const segmented = ref(0)
|
||||
const percentage = ref({})
|
||||
const segmentedList = ref([
|
||||
{
|
||||
label: '区域',
|
||||
value: 0,
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
label: '终端厂家',
|
||||
value: 1,
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
label: '电网标志',
|
||||
value: 2,
|
||||
num: 0
|
||||
}
|
||||
])
|
||||
const abnormal: any = ref([
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: '优秀'
|
||||
},
|
||||
{
|
||||
targetName: '唐山',
|
||||
rangeDesc: 21,
|
||||
length: 21,
|
||||
integrity: 92
|
||||
}
|
||||
])
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const value = ref(new Date())
|
||||
|
||||
const list = ref()
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/deviceRunEvaluate/getRunEvaluateInfo',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
if (prop.timeValue && Array.isArray(prop.timeValue)) {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue[1]
|
||||
}
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
list.value = tableStore.table.data
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
text-align: center;
|
||||
|
||||
// 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;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
: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%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.box1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.boxDiv {
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
|
||||
div:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
top: -10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.divBot {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.hexagon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 55px;
|
||||
background-color: #19a094;
|
||||
margin: 50px auto;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #19a094;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #19a094;
|
||||
}
|
||||
}
|
||||
|
||||
.hexagon::before,
|
||||
.hexagon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-left: 50px solid transparent;
|
||||
border-right: 50px solid transparent;
|
||||
}
|
||||
|
||||
.hexagon::before {
|
||||
bottom: 98%;
|
||||
}
|
||||
|
||||
.hexagon::after {
|
||||
top: 98%;
|
||||
}
|
||||
.hexagon1 {
|
||||
background-color: #2e8b57;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #2e8b57;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #2e8b57;
|
||||
}
|
||||
}
|
||||
.hexagon2 {
|
||||
background-color: #ffbf00;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #ffbf00;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #ffbf00;
|
||||
}
|
||||
}
|
||||
.hexagon3 {
|
||||
background-color: #a52a2a;
|
||||
&::before {
|
||||
border-bottom: 27.5px solid #a52a2a;
|
||||
}
|
||||
&::after {
|
||||
border-top: 27.5px solid #a52a2a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user