|
|
@@ -1,24 +1,21 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<CusModule title="告警信息">
|
|
|
- <BaseChart height="200px" width="100%" :option="pieOptions" />
|
|
|
+ <BaseChart height="200px" width="100%" :option="pieOptions"/>
|
|
|
<div class="custom-table">
|
|
|
<el-table :data="tableData" class="customer-table" style="width: 100%" height="650">
|
|
|
- <el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
+ <el-table-column type="index" label="序号" width="60" align="center"/>
|
|
|
<el-table-column prop="type" label="报警类型" align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-tag v-if="row.type == '预警'" type="info">预警</el-tag>
|
|
|
- <el-tag v-else-if="row.type == '一般'">一般</el-tag>
|
|
|
- <el-tag v-else-if="row.type == '严重'" type="warning">严重</el-tag>
|
|
|
- <el-tag v-else-if="row.type == '紧急'" type="danger">紧急</el-tag>
|
|
|
+ <dict-tag :options="dict.type.alarm_type" :value="row.alarmType"/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="content" label="报警内容" align="center" />
|
|
|
- <el-table-column prop="time" label="处理时间" align="center" />
|
|
|
+ <el-table-column prop="alarmMsg" label="报警内容" align="center"/>
|
|
|
+ <el-table-column prop="alarmTime" label="告警事件" align="center"/>
|
|
|
</el-table>
|
|
|
- <el-pagination :current-page="page.pageIndex" :page-size="100" :small="'small'" :background="true"
|
|
|
- layout="total, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange" />
|
|
|
+ <el-pagination :current-page="page.pageIndex" :page-size="page.pageSize" :small="'small'" :background="true"
|
|
|
+ layout="total, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"/>
|
|
|
</div>
|
|
|
</CusModule>
|
|
|
</div>
|
|
|
@@ -27,78 +24,56 @@
|
|
|
import CusModule from '../components/CusModule.vue';
|
|
|
import BaseChart from '@/components/BaseChart/index.vue'
|
|
|
import {mapState} from 'vuex';
|
|
|
+import {fetchCntDateAlarmType, listAlarmInfo} from "@/api/alarm/alarm-info";
|
|
|
+import {DateTool} from "@/utils/DateTool";
|
|
|
+import {ALARM_STATE} from "@/enums/alarm";
|
|
|
+import {ApiCode} from "@/api/apiEmums";
|
|
|
+
|
|
|
+const colorDic = {
|
|
|
+ 3: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF4949'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 2: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FFBD1F'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 1: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#1990FF'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 4: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2fe30f'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 5: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#737386'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 6: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(232,244,255,0.58)'
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
export default {
|
|
|
name: 'DeviceRight',
|
|
|
- data () {
|
|
|
+ dicts: ['alarm_type'],
|
|
|
+ data() {
|
|
|
return {
|
|
|
pieData: [],
|
|
|
tableData: [
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "紧急",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "电梯报警",
|
|
|
- type: "严重",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "路灯报警",
|
|
|
- type: "一般",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "空调报警",
|
|
|
- type: "一般",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "一般",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "预警",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "预警",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "预警",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "预警",
|
|
|
- },
|
|
|
- {
|
|
|
- code: "12321",
|
|
|
- time: "2023/02/23 12:02",
|
|
|
- content: "变压器报警",
|
|
|
- type: "预警",
|
|
|
- },
|
|
|
],
|
|
|
page: {
|
|
|
pageIndex: 1,
|
|
|
- pageNun: 10
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -107,62 +82,33 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState('userState', ['areaType']),
|
|
|
- pieOptions () {
|
|
|
+ pieOptions() {
|
|
|
return this.getPie3D(this.pieData, 0)// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- areaType () {
|
|
|
+ areaType() {
|
|
|
this.getPieData()
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
this.getPieData()
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSizeChange () {
|
|
|
-
|
|
|
+ handleSizeChange(size) {
|
|
|
+ this.page.pageIndex = 1
|
|
|
+ this.page.pageSize = size
|
|
|
+ this.getRealTimeAlarm()
|
|
|
},
|
|
|
- handleCurrentChange () {
|
|
|
-
|
|
|
+ handleCurrentChange(index) {
|
|
|
+ this.page.pageIndex = index
|
|
|
+ this.getRealTimeAlarm()
|
|
|
},
|
|
|
- getPieData () {
|
|
|
- const pieData = [
|
|
|
- {
|
|
|
- name: '紧急',
|
|
|
- value: Math.floor(Math.random() * 100),
|
|
|
- itemStyle: {
|
|
|
- color: '#FF4949'
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '严重',
|
|
|
- value: Math.floor(Math.random() * 100),
|
|
|
- itemStyle: {
|
|
|
- color: '#FFBD1F'
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '一般',
|
|
|
- value: Math.floor(Math.random() * 100),
|
|
|
- itemStyle: {
|
|
|
- color: '#1990FF'
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '预警',
|
|
|
- value: Math.floor(Math.random() * 100),
|
|
|
- itemStyle: {
|
|
|
- color: '#A1A2A7'
|
|
|
- },
|
|
|
- }]
|
|
|
- let totalValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
|
|
|
- this.pieData = pieData.map(item => ({
|
|
|
- ...item,
|
|
|
- proportion: ((item.value / totalValue) * 100).toFixed(2)
|
|
|
- }))
|
|
|
+ getPieData() {
|
|
|
+ this.getDateAlarmType()
|
|
|
+ this.getRealTimeAlarm()
|
|
|
},
|
|
|
- getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
|
|
|
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
|
|
const midRatio = (startRatio + endRatio) / 2;
|
|
|
const startRadian = startRatio * Math.PI * 2;
|
|
|
const endRadian = endRatio * Math.PI * 2;
|
|
|
@@ -190,7 +136,7 @@ export default {
|
|
|
step: Math.PI / 20,
|
|
|
},
|
|
|
|
|
|
- x (u, v) {
|
|
|
+ x(u, v) {
|
|
|
if (u < startRadian) {
|
|
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
}
|
|
|
@@ -200,7 +146,7 @@ export default {
|
|
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
},
|
|
|
|
|
|
- y (u, v) {
|
|
|
+ y(u, v) {
|
|
|
if (u < startRadian) {
|
|
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
}
|
|
|
@@ -210,7 +156,7 @@ export default {
|
|
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
},
|
|
|
|
|
|
- z (u, v) {
|
|
|
+ z(u, v) {
|
|
|
if (u < -Math.PI * 0.5) {
|
|
|
return Math.sin(u);
|
|
|
}
|
|
|
@@ -222,16 +168,16 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
- getPie3D (pieData, internalDiameterRatio) {
|
|
|
+ getPie3D(pieData, internalDiameterRatio) {
|
|
|
const series = [];
|
|
|
let sumValue = 0;
|
|
|
let startValue = 0;
|
|
|
let endValue = 0;
|
|
|
const legendData = [];
|
|
|
const k =
|
|
|
- typeof internalDiameterRatio !== 'undefined'
|
|
|
- ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
|
|
- : 1 / 3;
|
|
|
+ typeof internalDiameterRatio !== 'undefined'
|
|
|
+ ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
|
|
+ : 1 / 3;
|
|
|
for (let i = 0; i < pieData.length; i += 1) {
|
|
|
sumValue += pieData[i].value;
|
|
|
const seriesItem = {
|
|
|
@@ -254,8 +200,8 @@ export default {
|
|
|
typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
|
|
// eslint-disable-next-line no-unused-expressions
|
|
|
typeof pieData[i].itemStyle.opacity !== 'undefined'
|
|
|
- ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
|
|
- : null;
|
|
|
+ ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
|
|
+ : null;
|
|
|
|
|
|
seriesItem.itemStyle = itemStyle;
|
|
|
}
|
|
|
@@ -266,12 +212,12 @@ export default {
|
|
|
series[i].pieData.startRatio = startValue / sumValue;
|
|
|
series[i].pieData.endRatio = endValue / sumValue;
|
|
|
series[i].parametricEquation = this.getParametricEquation(
|
|
|
- series[i].pieData.startRatio,
|
|
|
- series[i].pieData.endRatio,
|
|
|
- false,
|
|
|
- false,
|
|
|
- k,
|
|
|
- 10//在此处传入饼图初始高度h
|
|
|
+ series[i].pieData.startRatio,
|
|
|
+ series[i].pieData.endRatio,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ k,
|
|
|
+ 10//在此处传入饼图初始高度h
|
|
|
);
|
|
|
startValue = endValue;
|
|
|
legendData.push(series[i].name);
|
|
|
@@ -333,7 +279,58 @@ export default {
|
|
|
series,
|
|
|
};
|
|
|
return option;
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ async getDateAlarmType() {
|
|
|
+ const {data} = await fetchCntDateAlarmType(
|
|
|
+ {
|
|
|
+ startRecTime: DateTool.now(),
|
|
|
+ areaCode: this.areaType,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const pieData = data.map(item => {
|
|
|
+ return {
|
|
|
+ name: this.dict.label.alarm_type[item.alarmType],
|
|
|
+ alarmType: item.alarmType,
|
|
|
+ value: item.cnt,
|
|
|
+ proportion: item.proportion,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ let totalValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
|
|
|
+ this.pieData = pieData.map(item => {
|
|
|
+ item.proportion = (item.value / totalValue * 100).toFixed(2)
|
|
|
+ let color = colorDic[item.alarmType] || colorDic['6']
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ ...color
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getRealTimeAlarm() {
|
|
|
+ let result = [];
|
|
|
+ const {
|
|
|
+ code,
|
|
|
+ rows,
|
|
|
+ total,
|
|
|
+ } = await listAlarmInfo({
|
|
|
+ pageNum: this.page.pageIndex,
|
|
|
+ pageSize: this.page.pageSize,
|
|
|
+ areaCode: this.areaType,
|
|
|
+ alarmStateList: [
|
|
|
+ ALARM_STATE.new.value, ALARM_STATE.disposing.value,
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ if (ApiCode.SUCCESS === code && rows && rows.length > 0) {
|
|
|
+ result = rows;
|
|
|
+ }
|
|
|
+ this.tableData = result;
|
|
|
+ this.page.total = total
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -379,7 +376,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
::v-deep.el-table tr,
|
|
|
- ::v-deep.el-table__body tr:hover>td {
|
|
|
+ ::v-deep.el-table__body tr:hover > td {
|
|
|
background-color: transparent !important;
|
|
|
}
|
|
|
|
