冀北问题修改
This commit is contained in:
@@ -54,6 +54,24 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">停运事件管理</div>
|
||||
<div class="code-name">&#xe65d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">在运设备</div>
|
||||
<div class="code-name">&#xe604;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">异常类_14非智能表在运异常</div>
|
||||
<div class="code-name">&#xe666;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">综合评价</div>
|
||||
@@ -234,9 +252,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1744179175277') format('woff2'),
|
||||
url('iconfont.woff?t=1744179175277') format('woff'),
|
||||
url('iconfont.ttf?t=1744179175277') format('truetype');
|
||||
src: url('iconfont.woff2?t=1764826411334') format('woff2'),
|
||||
url('iconfont.woff?t=1764826411334') format('woff'),
|
||||
url('iconfont.ttf?t=1764826411334') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
||||
@@ -262,6 +280,33 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-tingyunshijianguanli"></span>
|
||||
<div class="name">
|
||||
停运事件管理
|
||||
</div>
|
||||
<div class="code-name">.icon-tingyunshijianguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zaiyunshebei"></span>
|
||||
<div class="name">
|
||||
在运设备
|
||||
</div>
|
||||
<div class="code-name">.icon-zaiyunshebei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang"></span>
|
||||
<div class="name">
|
||||
异常类_14非智能表在运异常
|
||||
</div>
|
||||
<div class="code-name">.icon-yichanglei_14feizhinengbiaozaiyunyichang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zonghepingjia1"></span>
|
||||
<div class="name">
|
||||
@@ -532,6 +577,30 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-tingyunshijianguanli"></use>
|
||||
</svg>
|
||||
<div class="name">停运事件管理</div>
|
||||
<div class="code-name">#icon-tingyunshijianguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zaiyunshebei"></use>
|
||||
</svg>
|
||||
<div class="name">在运设备</div>
|
||||
<div class="code-name">#icon-zaiyunshebei</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yichanglei_14feizhinengbiaozaiyunyichang"></use>
|
||||
</svg>
|
||||
<div class="name">异常类_14非智能表在运异常</div>
|
||||
<div class="code-name">#icon-yichanglei_14feizhinengbiaozaiyunyichang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zonghepingjia1"></use>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3482754 */
|
||||
src: url('iconfont.woff2?t=1744179175277') format('woff2'),
|
||||
url('iconfont.woff?t=1744179175277') format('woff'),
|
||||
url('iconfont.ttf?t=1744179175277') format('truetype');
|
||||
font-family: 'iconfont';
|
||||
src: url('/src/assets/font/iconfont.woff2?t=1764826411334') format('woff2'),
|
||||
url('/src/assets/font/iconfont.woff?t=1764826411334') format('woff'),
|
||||
url('/src/assets/font/iconfont.ttf?t=1764826411334') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
@@ -13,6 +12,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-tingyunshijianguanli:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.icon-zaiyunshebei:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-yichanglei_14feizhinengbiaozaiyunyichang:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.icon-zonghepingjia1:before {
|
||||
content: "\e82f";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,6 +5,27 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "25458995",
|
||||
"name": "停运事件管理",
|
||||
"font_class": "tingyunshijianguanli",
|
||||
"unicode": "e65d",
|
||||
"unicode_decimal": 58973
|
||||
},
|
||||
{
|
||||
"icon_id": "35341056",
|
||||
"name": "在运设备",
|
||||
"font_class": "zaiyunshebei",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "22630860",
|
||||
"name": "异常类_14非智能表在运异常",
|
||||
"font_class": "yichanglei_14feizhinengbiaozaiyunyichang",
|
||||
"unicode": "e666",
|
||||
"unicode_decimal": 58982
|
||||
},
|
||||
{
|
||||
"icon_id": "32402696",
|
||||
"name": "综合评价",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -6,7 +6,7 @@
|
||||
</div> -->
|
||||
<TableHeader :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-option label="日期" value="date" />
|
||||
<el-option label="统计时间" value="date" />
|
||||
<el-option label="持续时长" value="duration" />
|
||||
<el-option label="循环" value="cycle" />
|
||||
<el-option label="无" value="null" />
|
||||
|
||||
@@ -364,6 +364,7 @@ watch(
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
|
||||
@@ -340,6 +340,7 @@ watch(
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
|
||||
@@ -177,7 +177,9 @@ const tableStore: any = new TableStore({
|
||||
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
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter(
|
||||
(k: any) => k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
)
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
@@ -338,6 +340,7 @@ watch(
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
.statistics {
|
||||
|
||||
@@ -18,24 +18,48 @@
|
||||
>
|
||||
<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
|
||||
class="box1"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 30px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div class="statistics">
|
||||
<div class="divBox div1">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">终端总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e">
|
||||
{{ statisticsList.allNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon1">
|
||||
<div style="color: #fff">{{ statisticsList.runNum }}</div>
|
||||
<div class="mt10 divBot">在运</div>
|
||||
<div class="divBox div2">
|
||||
<span class="iconfont icon-zaiyunshebei" style="color: #67c23a"></span>
|
||||
<span class="divBox_title">在运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #67c23a">
|
||||
{{ statisticsList.runNum }}
|
||||
</span>
|
||||
</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 class="statistics">
|
||||
<div class="divBox div3">
|
||||
<span
|
||||
class="iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang"
|
||||
style="color: #ffbf00"
|
||||
></span>
|
||||
<span class="divBox_title">调试终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #ffbf00">
|
||||
{{ statisticsList.checkNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox div4">
|
||||
<span class="iconfont icon-tingyunshijianguanli" style="color: #f56c6c"></span>
|
||||
<span class="divBox_title">停运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #f56c6c">
|
||||
{{ statisticsList.stopRunNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon3">
|
||||
<div style="color: #fff">{{ statisticsList.stopRunNum }}</div>
|
||||
<div class="mt10 divBot">停运</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +89,7 @@
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">完整性(%)</span>
|
||||
<span style="flex: 1">在线率(%)</span>
|
||||
<span style="flex: 1">合格率(%)</span>
|
||||
<span style="flex: 1">异常率(%)</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
@@ -205,7 +229,7 @@ const tableStore: any = new TableStore({
|
||||
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
|
||||
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
|
||||
|
||||
abnormal.value = tableStore.table.data
|
||||
abnormal.value = tableStore.table.data.filter((k: any) => k.name != '上送国网' && k.name != '非上送国网')
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
@@ -234,6 +258,7 @@ watch(
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
}
|
||||
@@ -344,32 +369,7 @@ watch(
|
||||
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;
|
||||
@@ -427,4 +427,44 @@ watch(
|
||||
border-top: 27.5px solid #a52a2a;
|
||||
}
|
||||
}
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.divBox {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.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;
|
||||
}
|
||||
.div1 {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
.div2 {
|
||||
background-color: #67c23a24;
|
||||
}
|
||||
.div3 {
|
||||
background-color: #ffbf0024;
|
||||
}
|
||||
.div4 {
|
||||
background-color: #f56c6c24;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
>
|
||||
<el-form-item v-if="datePicker" style="grid-column: span 2; max-width: 630px">
|
||||
<template #label>
|
||||
<el-checkbox v-if="showTimeAll" v-model="timeAll" label="时间" />
|
||||
<el-checkbox v-if="showTimeAll" v-model="timeAll" label="统计时间" />
|
||||
<span v-else>{{ dateLabel }}</span>
|
||||
</template>
|
||||
<DatePicker
|
||||
@@ -111,7 +111,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
showReset: true,
|
||||
showExport: false,
|
||||
showTimeAll: false,
|
||||
dateLabel: '时间'
|
||||
dateLabel: '统计日期'
|
||||
})
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
|
||||
@@ -362,3 +362,4 @@ export function getTimeOfTheMonth(key: string): [string, string] {
|
||||
throw new Error('Invalid key')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<pane style="background: #fff">
|
||||
<TableHeader :showSearch="false" v-show="props.rowList.id == undefined">
|
||||
<template #select>
|
||||
<el-form-item label="时间">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="default-main">
|
||||
<TableHeader :showSearch="false" v-show="flag">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker
|
||||
ref="datePickerRef"
|
||||
:nextFlag="false"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</div> -->
|
||||
<TableHeader :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="default-main">
|
||||
<TableHeader :showSearch="false" v-show="flag">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker
|
||||
ref="datePickerRef"
|
||||
:nextFlag="false"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<TableHeader date-picker ref="TableHeaderRef" >
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
@@ -474,6 +474,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<TableHeader date-picker ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
@@ -34,7 +34,11 @@
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">终端总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e" @click="totalTable(100001, '')">
|
||||
<span
|
||||
class="divBox_num text-style"
|
||||
style="color: #57bc6e"
|
||||
@click="totalTable(100001, '')"
|
||||
>
|
||||
{{ monitoringPoints.runNum }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -200,6 +204,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import '@/assets/font/iconfont.css'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
@@ -262,10 +267,13 @@ const tableStore = new TableStore({
|
||||
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
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter(
|
||||
(k: any) => k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
)
|
||||
// 合并子集数据 并去重
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data.citDetailList
|
||||
|
||||
.map((item: any) => item.detailList)
|
||||
.flat()
|
||||
.reduce((map: any, item: any) => {
|
||||
@@ -470,6 +478,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-form-item label="多监测点">
|
||||
<el-checkbox v-model="checked" @change="checkChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef" ></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标类型:">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<el-form-item label="多监测点">
|
||||
<el-checkbox v-model="checked" @change="checkChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef" :theCurrentTime="true"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标类型:">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-form-item label="多监测点">
|
||||
<el-checkbox v-model="checked" @change="checkChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标类型:">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="指标">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
|
||||
<span style="font-weight: 500">最新数据时间:</span>
|
||||
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
|
||||
<span style="font-weight: 500">统计日期:</span>
|
||||
<span style="color: var(--color-primary-default)">
|
||||
{{ getTimeOfTheMonth('3')[0] + '至' + getTimeOfTheMonth('3')[1] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
@@ -38,8 +42,16 @@
|
||||
</h3>
|
||||
<el-descriptions title="" border :column="2" size="small">
|
||||
<el-descriptions-item width="140px" label="告警原因">
|
||||
<span style="font-weight: 550"
|
||||
:style="TargetData.info == 0 ? 'color: #0e8780;' : TargetData.info == 3 ? 'color: #000' : 'color: #ff0000;'">
|
||||
<span
|
||||
style="font-weight: 550"
|
||||
:style="
|
||||
TargetData.info == 0
|
||||
? 'color: #0e8780;'
|
||||
: TargetData.info == 3
|
||||
? 'color: #000'
|
||||
: 'color: #ff0000;'
|
||||
"
|
||||
>
|
||||
{{
|
||||
TargetData.info == 1
|
||||
? '超标告警'
|
||||
@@ -73,8 +85,11 @@
|
||||
</h3>
|
||||
<div style="display: flex">
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts"
|
||||
@click="OnlineRate" />
|
||||
<MyEChart
|
||||
:style="`height: calc(${rowHeight} - 31px)`"
|
||||
:options="onLineCharts"
|
||||
@click="OnlineRate"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -93,14 +108,18 @@
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div>
|
||||
综合评估得分:
|
||||
<span class="conclusion" :class="dropList.assessData == '特质'
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
dropList.assessData == '特质'
|
||||
? 'background1'
|
||||
: dropList.assessData == '较差'
|
||||
? 'background2'
|
||||
: dropList.assessData == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
">
|
||||
"
|
||||
>
|
||||
{{ dropList.assessData }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -114,14 +133,18 @@
|
||||
<el-col :span="10" style="display: flex; align-items: center">
|
||||
<div style="width: 100%">
|
||||
评估得分:
|
||||
<span class="conclusion" :class="item.avg == '特质'
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
item.avg == '特质'
|
||||
? 'background1'
|
||||
: item.avg == '较差'
|
||||
? 'background2'
|
||||
: item.avg == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
">
|
||||
"
|
||||
>
|
||||
{{ item.avg }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -167,6 +190,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const router = useRouter()
|
||||
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
||||
import {
|
||||
@@ -522,7 +546,7 @@ const open = async (id: string) => {
|
||||
if (res.data[k] != '/') {
|
||||
judgment = false
|
||||
}
|
||||
flag += (res.data[k] == '/' ? 0 : res.data[k])
|
||||
flag += res.data[k] == '/' ? 0 : res.data[k]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -736,7 +760,7 @@ defineExpose({ open })
|
||||
}
|
||||
|
||||
.background3 {
|
||||
background-color: #A52a2a;
|
||||
background-color: #a52a2a;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -476,6 +476,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -518,6 +518,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -34,14 +34,45 @@
|
||||
<vxe-column field="targetName" title="指标类型" min-width="80px"></vxe-column>
|
||||
<vxe-column field="phaseType" title="相别" width="60px">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.phaseType=='T'?'/':row.phaseType }}
|
||||
{{ row.phaseType == 'T' ? '/' : row.phaseType }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="rangeDesc" title="合理范围" min-width="90px"></vxe-column>
|
||||
<vxe-column field="max" title="最大" width="85px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="min" title="最小" width="85px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="avg" title="平均" width="85px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="cp95" title="CP95" width="85px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column
|
||||
field="max"
|
||||
title="最大"
|
||||
width="85px"
|
||||
:formatter="formatter"
|
||||
v-if="showColumn"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="min"
|
||||
title="最小"
|
||||
width="85px"
|
||||
:formatter="formatter"
|
||||
v-if="showColumn"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="avg"
|
||||
title="平均"
|
||||
width="85px"
|
||||
:formatter="formatter"
|
||||
v-if="showColumn"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="cp95"
|
||||
title="CP95"
|
||||
width="85px"
|
||||
:formatter="formatter"
|
||||
v-if="showColumn"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="featureAmplitude"
|
||||
title="幅值"
|
||||
width="85px"
|
||||
:formatter="formatter"
|
||||
v-if="!showColumn"
|
||||
></vxe-column>
|
||||
</vxe-table>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
@@ -76,9 +107,10 @@ const pageNum = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const numKey = ref(0)
|
||||
const targetKey = ref('')
|
||||
const showColumn = ref(true)
|
||||
const open = (data: anyObj, time: string[], num: number) => {
|
||||
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
|
||||
title.value ='异常监测点详情'
|
||||
title.value = '异常监测点详情'
|
||||
TableData.value = []
|
||||
numKey.value = num
|
||||
targetKey.value = data.key
|
||||
@@ -105,6 +137,7 @@ const currentChangeEvent = () => {
|
||||
})
|
||||
.then(res => {
|
||||
TableData1.value = res.data
|
||||
showColumn.value = res.data[0]?.featureAmplitude == null ? true : false
|
||||
loading1.value = false
|
||||
pageNum.value = 1
|
||||
})
|
||||
|
||||
121
src/views/pqs/runManage/runEvaluate/components/statistics_JB.vue
Normal file
121
src/views/pqs/runManage/runEvaluate/components/statistics_JB.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div style="height: 145px" class="box1">
|
||||
<!-- <div class="boxDiv hexagon">
|
||||
<div class="text-style" @click="change('')">{{ props.params.allNum }}</div>
|
||||
<div class="mt10 divBot">总数</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon1">
|
||||
<div class="text-style" @click="change('运行')">{{ props.params.runNum }}</div>
|
||||
<div class="mt10 divBot">在运</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon2">
|
||||
<div class="text-style" @click="change('调试')">{{ props.params.checkNum }}</div>
|
||||
<div class="mt10 divBot">调试</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon3">
|
||||
<div class="text-style" @click="change('停运')">{{ props.params.stopRunNum }}</div>
|
||||
<div class="mt10 divBot">停运</div>
|
||||
</div> -->
|
||||
<div class="statistics">
|
||||
<div class="divBox div1">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">终端总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e" @click="change('')">
|
||||
{{ props.params.allNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox div2" style="width: 210px">
|
||||
<span class="iconfont icon-zaiyunshebei" style="color: #67c23a"></span>
|
||||
<span class="divBox_title">在运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #67c23a" @click="change('运行')">
|
||||
{{ props.params.runNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics">
|
||||
<div class="divBox div3">
|
||||
<span class="iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang" style="color: #ffbf00"></span>
|
||||
<span class="divBox_title">调试终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #ffbf00" @click="change('调试')">
|
||||
{{ props.params.checkNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox div4" style="width: 210px">
|
||||
<span class="iconfont icon-tingyunshijianguanli" style="color: #f56c6c"></span>
|
||||
<span class="divBox_title">停运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #f56c6c" @click="change('停运')">
|
||||
{{ props.params.stopRunNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { color } from '@/components/echarts/color'
|
||||
const emit = defineEmits(['change'])
|
||||
const height = mainHeight(330, 3)
|
||||
const props = defineProps({
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const change = (e: string) => {
|
||||
emit('change', e)
|
||||
}
|
||||
const info = () => {}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 210px;
|
||||
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;
|
||||
}
|
||||
.div1 {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
.div2 {
|
||||
background-color: #67c23a24;
|
||||
}
|
||||
.div3 {
|
||||
background-color: #ffbf0024;
|
||||
}
|
||||
.div4 {
|
||||
background-color: #f56c6c24;
|
||||
}
|
||||
}
|
||||
.text-style {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<TableHeader date-picker ref="TableHeaderRef" >
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
@@ -23,7 +23,7 @@
|
||||
</TableHeader>
|
||||
<div class="card-list pt10" v-loading="tableStore.table.loading">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 200px">
|
||||
<el-card style="height: 215px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>终端统计</span>
|
||||
@@ -68,7 +68,7 @@
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">完整性(%)</span>
|
||||
<span style="width: 80px">在线率(%)</span>
|
||||
<span style="width: 80px">合格率(%)</span>
|
||||
<span style="width: 80px">异常率(%)</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
@@ -165,7 +165,7 @@
|
||||
</vxe-column>
|
||||
<vxe-column field="integrityRate" title="完整性(%)" width="100px"></vxe-column>
|
||||
<vxe-column field="onLineRate" title="在线率(%)" width="100px"></vxe-column>
|
||||
<vxe-column field="passRate" title="合格率(%)" width="100px"></vxe-column>
|
||||
<vxe-column field="passRate" title="异常率(%)" width="100px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
@@ -191,7 +191,7 @@ import { onMounted, provide, ref } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import statistics from './components/statistics.vue'
|
||||
import statistics from './components/statistics_JB.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
|
||||
defineOptions({
|
||||
@@ -201,7 +201,7 @@ defineOptions({
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const pageHeight = mainHeight(97)
|
||||
const indicatorHeight = mainHeight(447)
|
||||
const indicatorHeight = mainHeight(462)
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
@@ -269,7 +269,9 @@ const tableStore = new TableStore({
|
||||
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
|
||||
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
|
||||
|
||||
abnormal.value = tableStore.table.data
|
||||
abnormal.value = tableStore.table.data.filter(
|
||||
(k: any) => k.name != '上送国网' && k.name != '非上送国网'
|
||||
)
|
||||
// 合并子集数据 并去重
|
||||
|
||||
totalTable(101, '')
|
||||
@@ -484,7 +486,7 @@ provide('tableStore', tableStore)
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 200px;
|
||||
width: 215x;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
@@ -195,16 +195,16 @@ const tableStore = new TableStore({
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
// {
|
||||
// name: 'edit',
|
||||
// title: '人工维护',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton',
|
||||
// click: async row => {
|
||||
// addFormRef.value.open(row)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'edit',
|
||||
title: '人工维护',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
addFormRef.value.open(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%" v-loading="loading">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="dianyazanjiangbaojimidu">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
|
||||
<el-tab-pane lazy label='ITIC曲线分析' name='1'>
|
||||
<el-tabs v-model="activeName" type="border-card" class="event-statistics" tab-position="left" :style="height">
|
||||
<el-tab-pane lazy label="ITIC曲线分析" name="1">
|
||||
<ITICquxianfenxi />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label='SEMI F47 分析' name='2'>
|
||||
<el-tab-pane lazy label="SEMI F47 分析" name="2">
|
||||
<SEMIF47fenxi />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label='电压暂降表及密度' name='3'>
|
||||
<el-tab-pane lazy label="电压暂降表及密度" name="3">
|
||||
<Dianyazanjiangbiaojimidu />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label='暂降分布统计' name='4'>
|
||||
<el-tab-pane lazy label="暂降分布统计" name="4">
|
||||
<Zanjiangfenbutongji />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label='暂降幅值概率分布' name='5'>
|
||||
<el-tab-pane lazy label="暂降幅值概率分布" name="5">
|
||||
<Zanjiangfuzhigailvfenbu />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label='持续时间概率分布' name='6'>
|
||||
<el-tab-pane lazy label="持续时间概率分布" name="6">
|
||||
<Chixushijiangailvfenbu />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import ITICquxianfenxi from './ITICquxianfenxi/index.vue'
|
||||
import SEMIF47fenxi from './SEMIF47fenxi/index.vue'
|
||||
@@ -29,12 +29,20 @@ import Dianyazanjiangbiaojimidu from './dianyazanjiangbiaojimidu/index.vue'
|
||||
import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
|
||||
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
|
||||
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
externalHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const activeName = ref('1')
|
||||
const height = mainHeight(84)
|
||||
|
||||
const height = ref(mainHeight(84 + props.externalHeight))
|
||||
// onMounted(() => {
|
||||
// height.value = mainHeight(84 + props.externalHeight)
|
||||
// console.log("🚀 ~ 84 + props.externalHeight:", 84 + props.externalHeight)
|
||||
// })
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
<style lang="scss">
|
||||
.event-statistics {
|
||||
.el-tabs__header.is-left {
|
||||
margin-right: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -4,19 +4,18 @@
|
||||
<!-- 表头 -->
|
||||
<TableHeader date-picker showExport>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon='Download' type='primary' @click='download'>下载波形</el-button>
|
||||
<el-button :icon="Download" type="primary" @click="download">下载波形</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- 表格 -->
|
||||
<Table ref='tableRef' :checkboxConfig='checkboxConfig' />
|
||||
|
||||
<Table ref="tableRef" :checkboxConfig="checkboxConfig" />
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior @backbxlb="backbxlb" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import { Download } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide, reactive } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
@@ -30,6 +29,12 @@ import { checkUser } from '@/api/user-boot/user'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { VxeTablePropTypes } from 'vxe-table'
|
||||
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
const props = defineProps({
|
||||
externalHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const view = ref(true)
|
||||
const waveFormRef = ref()
|
||||
const view2 = ref(false)
|
||||
@@ -38,13 +43,15 @@ const dictData = useDictData()
|
||||
const eventTypeOptions = dictData.getBasicData('Event_Statis')
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const tableStore = new TableStore({
|
||||
publicHeight: 60,
|
||||
publicHeight: 60 + props.externalHeight,
|
||||
url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{
|
||||
title: '序号', width: 80, formatter: (row: any) => {
|
||||
title: '序号',
|
||||
width: 80,
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
@@ -56,17 +63,21 @@ const tableStore = new TableStore({
|
||||
// { title: '暂降类型', field: 'advanceType', minWidth: '130' },
|
||||
{ title: '暂降原因', field: 'advanceReason', minWidth: '130' },
|
||||
{
|
||||
title: '触发类型', field: 'eventType', minWidth: '80', formatter: (row: any) => {
|
||||
title: '触发类型',
|
||||
field: 'eventType',
|
||||
minWidth: '80',
|
||||
formatter: (row: any) => {
|
||||
return eventTypeOptions.find(item => item.id === row.cellValue)?.name || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '暂降(骤升)幅值(%)', field: 'featureAmplitude', minWidth: '140',
|
||||
title: '暂降(骤升)幅值(%)',
|
||||
field: 'featureAmplitude',
|
||||
minWidth: '140',
|
||||
|
||||
formatter: (row: any) => {
|
||||
return (row.cellValue * 100).toFixed(2)
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
{ title: '持续时间(s)', field: 'duration', minWidth: '100' },
|
||||
// { title: '严重度', field: 'severity', minWidth: '80' },
|
||||
@@ -117,9 +128,7 @@ const tableStore = new TableStore({
|
||||
tableStore.table.params.lineId = monitoringPoint.state.lineId
|
||||
console.log('beforeSearchFun')
|
||||
},
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
loadCallback: () => {}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 0
|
||||
|
||||
@@ -27,7 +27,6 @@ import EventStatistics from './eventStatistics/index.vue'
|
||||
import EventStudy from './eventStudy/index.vue'
|
||||
import RunningCondition from './runningCondition/index.vue'
|
||||
import TransientReport from './transientReport/index.vue'
|
||||
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import router from '@/router'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
|
||||
130
src/views/pqs/voltageSags/monitoringPoint/online/index_JB.vue
Normal file
130
src/views/pqs/voltageSags/monitoringPoint/online/index_JB.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="default-main" style="padding: 10px">
|
||||
<splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<PointTree
|
||||
ref="pointTree"
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
:show-checkbox="monitoringPoint.state.showCheckBox"
|
||||
:default-checked-keys="monitoringPoint.state.lineIds"
|
||||
@check="handleCheckChange"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
<pane>
|
||||
<div style="position: relative; height: 100%">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="border-card"
|
||||
class="demo-tabs"
|
||||
style="height: 100%"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<el-tab-pane label="事件分析" name="3" lazy v-if="!isReload">
|
||||
<EventStudy :externalHeight='20'/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="事件统计" name="2" lazy v-if="!isReload">
|
||||
<EventStatistics :externalHeight='20'/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
|
||||
<RunningCondition :externalHeight='20'/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="暂态报告" name="5" lazy v-if="!isReload">
|
||||
<TransientReport />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import Navigation from './navigation/index.vue'
|
||||
import EventStatistics from './eventStatistics/index.vue'
|
||||
import EventStudy from './eventStudy/index.vue'
|
||||
import RunningCondition from './runningCondition/index.vue'
|
||||
import TransientReport from './transientReport/index.vue'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
import router from '@/router'
|
||||
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/monitor/online'
|
||||
})
|
||||
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const pointTree = ref()
|
||||
const size = ref(0)
|
||||
const isReload = ref(false)
|
||||
const height = mainHeight(40)
|
||||
const activeName = ref('3')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.level === 6) {
|
||||
monitoringPoint.setValue('lineId', data.id)
|
||||
monitoringPoint.setValue('pid', data.pids)
|
||||
monitoringPoint.setValue('lineName', data.alias)
|
||||
monitoringPoint.setValue('comFlag', data.comFlag)
|
||||
}
|
||||
}
|
||||
const handleCheckChange = (data: any, node: any) => {
|
||||
monitoringPoint.setValue(
|
||||
'lineIds',
|
||||
node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
|
||||
)
|
||||
}
|
||||
const handleTabChange = () => {
|
||||
monitoringPoint.setShowCheckBox(false)
|
||||
}
|
||||
watch(
|
||||
() => router.currentRoute.value.query.lineId,
|
||||
(newLineId, oldLineId) => {
|
||||
if (!newLineId) return
|
||||
// 在这里处理 lineId 的变化
|
||||
monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
|
||||
monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => monitoringPoint.state.lineId,
|
||||
() => {
|
||||
// 刷新页面
|
||||
isReload.value = true
|
||||
nextTick(() => {
|
||||
isReload.value = false
|
||||
})
|
||||
}
|
||||
)
|
||||
const changeTab = (e: string) => {
|
||||
activeName.value = e
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.monitoring-point {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="running-condition">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<div :style="height">
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<PointTree
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<!-- <div :style="height"></div> -->
|
||||
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
|
||||
@@ -29,7 +20,7 @@
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
|
||||
<div class="box" :style="`height: calc(${tableStore.table.height} + 65px)`">
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
@@ -140,6 +131,7 @@ import { mainHeight } from '@/utils/layout'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'TransientReport/monitoringpointReport'
|
||||
})
|
||||
@@ -174,6 +166,7 @@ const formd: any = ref({
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
const tableStore = new TableStore({
|
||||
publicHeight: 80,
|
||||
url: '',
|
||||
method: 'post',
|
||||
column: []
|
||||
@@ -185,58 +178,7 @@ onMounted(() => {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
// getList({
|
||||
// pageNum: 1,
|
||||
// pageSize: 100,
|
||||
// type: 0
|
||||
// }).then(res => {
|
||||
// templatePolicy.value = res.data.records
|
||||
// // 默认选中第一个
|
||||
// if (res.data.records && res.data.records.length > 0) {
|
||||
// value.value = res.data.records[0].id
|
||||
// // 触发 change 事件,加载对应的配置
|
||||
// changeFn(res.data.records[0].id)
|
||||
// }
|
||||
// })
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.level === 6) {
|
||||
dotList.value = data
|
||||
monitoringPoint.setValue('lineId', data.id)
|
||||
}
|
||||
}
|
||||
const changeFn = (val: any) => {
|
||||
formd.value = {
|
||||
xq: false,
|
||||
lb: false,
|
||||
mdbg: false,
|
||||
mdtx: false,
|
||||
sjdITIC: false,
|
||||
sjdF47: false,
|
||||
glfbfz: false,
|
||||
glfbsj: false,
|
||||
tjbg: false,
|
||||
tjtx: false,
|
||||
yybg: false,
|
||||
yytx: false,
|
||||
lxbg: false,
|
||||
lxtx: false,
|
||||
type: 0
|
||||
}
|
||||
let data = {
|
||||
id: val
|
||||
}
|
||||
|
||||
selectReleation(data).then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
for (let k in formd.value) {
|
||||
if (item.name == k) {
|
||||
formd.value[k] = true
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const exportEvent = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage({
|
||||
@@ -246,8 +188,8 @@ const exportEvent = () => {
|
||||
}
|
||||
let a = ''
|
||||
|
||||
formd.value.lineId = dotList.value.id
|
||||
formd.value.lineName = dotList.value.name
|
||||
formd.value.lineId = monitoringPoint.state.lineId
|
||||
formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
|
||||
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="formFlex">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item class="mr5">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="formFlex">
|
||||
<el-form-item label="日期">
|
||||
<el-form-item label="统计时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item class="mr5">
|
||||
|
||||
Reference in New Issue
Block a user