Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备监控二级页面

Browse Source
This commit is contained in:
zhujiyan
2024-07-23 17:28:31 +08:00
parent 76cd3461b3
commit 93b7a9ed4d
13 changed files with 2093 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -14,7 +14,7 @@
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_chartsitle">电流有效值</div>
<div class="right_charts_title">电流有效值</div>
<div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
@@ -22,7 +22,6 @@
</div>
<div class="view_bot">
<div class="view_bot_tables">
<!-- <tableInfo ref="tableInfoRef" /> -->
<!-- 表格数据 -->
<div v-if="tableData.length != 0">
<!-- div设计table -->
@@ -62,7 +61,6 @@
import { ref, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
import tableInfo from './components/tableInfo.vue'
import * as echarts from 'echarts'
import { split } from 'lodash-es'
const pieChartRef: any = ref()
@@ -159,642 +157,6 @@ const init = () => {
},
legend: [],
series: [
// {
// name: 'atitle +电压有效值',
// type: 'gauge',
// center: ['50%', '30%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#DAA520'],
// [0.5, '#DAA520'],
// [0.75, '#DAA520'],
// [1, '#DAA520']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name:' atitle + (kV)'
// }
// ]
// },
// {
// name: ' btitle + 电压有效值',
// type: 'gauge',
// center: ['20%', '60%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: ' btitle +(kV)'
// }
// ]
// },
// {
// name: 'ctitle + 电压有效值',
// type: 'gauge',
// center: ['20%', '90%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 180,
// endAngle: 90,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['40%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'ctitle + (kV)'
// }
// ]
// },
// {
// name: 'A相电流有效值',
// type: 'gauge',
// center: ['80%', '30%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#DAA520'],
// [0.5, '#DAA520'],
// [0.75, '#DAA520'],
// [1, '#DAA520']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'A相(A)'
// }
// ]
// },
// {
// name: 'B相电流有效值',
// type: 'gauge',
// center: ['80%', '60%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'B相(A)'
// }
// ]
// },
// {
// name: 'C相电流有效值',
// type: 'gauge',
// center: ['80%', '90%'], // 默认全局居中
// radius: '50%',
// min: 0,
// max: 180,
// startAngle: 90,
// endAngle: 0,
// splitNumber: 2,
// axisLine: {
// // 坐标轴线
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 5
// }
// },
// axisTick: {
// // 坐标轴小标记
// length: 12, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle控制线条样式
// color: 'auto'
// }
// },
// splitLine: {
// // 分隔线
// length: 20, // 属性length控制线长
// lineStyle: {
// // 属性lineStyle（详见lineStyle）控制线条样式
// color: 'auto'
// }
// },
// pointer: {
// width: 5
// },
// title: {
// offsetCenter: ['125%', '-55%'] // x, y，单位px
// },
// detail: {
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: 'bolder',
// offsetCenter: ['-45%', '-35%'],
// fontSize: '35px'
// },
// data: [
// {
// // value: [0],
// // name: 'C相(A)'
// }
// ]
// },
// {
// name: '基波电流相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '50%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 2
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '45%',
// width: 2
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'B相'
// }
// ]
// },
// {
// name: '基波电流相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '50%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 2
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '45%',
// width: 2
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'C相'
// }
// ]
// },
// {
// name: '基波电压相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '85%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#2E8B57'],
// [0.5, '#2E8B57'],
// [0.75, '#2E8B57'],
// [1, '#2E8B57']
// ],
// width: 1.5
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '75%',
// width: 4
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'B相'
// }
// ]
// },
// {
// name: '基波电压相位',
// type: 'gauge',
// // 表盘最小值
// min: 180,
// // 表盘最大值
// max: -180,
// // 表盘分割数
// splitNumber: 12,
// // 圆心位置
// center: ['50%', '50%'],
// // 半径
// radius: '85%',
// startAngle: 180,
// endAngle: -179.99,
// // 指针方向
// clockWise: true,
// title: false,
// // 表盘外框
// axisLine: {
// show: true,
// lineStyle: {
// color: [
// [0.25, '#A52a2a'],
// [0.5, '#A52a2a'],
// [0.75, '#A52a2a'],
// [1, '#A52a2a']
// ],
// width: 1.5
// }
// },
// // 表盘细分数
// axisTick: {
// show: true,
// splitNumber: 5,
// length: 6,
// lineStyle: {
// color: '#eee',
// width: 1,
// type: 'solid'
// }
// },
// // 分割线
// splitLine: {
// show: true,
// length: 10,
// lineStyle: {
// color: '#eee',
// width: 2,
// type: 'solid'
// }
// },
// // 分割线标识
// axisLabel: {
// show: false
// },
// // 指针设置
// pointer: {
// length: '75%',
// width: 4
// },
// detail: {
// show: false
// },
// data: [
// {
// value: 0,
// name: 'C相'
// }
// ]
// }
{
name: '基波电流相位',
type: 'gauge',
@@ -818,10 +180,10 @@ const init = () => {
show: true,
lineStyle: {
color: [
[0.25, '#1E9FF4'],
[0.5, '#1E9FF4'],
[0.75, '#1E9FF4'],
[1, '#1E9FF4']
[0.25, '#9D322D'],
[0.5, '#9D322D'],
[0.75, '#9D322D'],
[1, '#9D322D']
],
width: 2
}
@@ -832,7 +194,7 @@ const init = () => {
splitNumber: 5,
length: 4,
lineStyle: {
color: '#1E9FF4',
color: '#9D322D',
width: 1,
type: 'solid'
}
@@ -842,7 +204,7 @@ const init = () => {
show: true,
length: 10,
lineStyle: {
color: '#1E9FF4',
color: '#9D322D',
width: 2,
type: 'solid'
}
@@ -1003,7 +365,6 @@ const init = () => {
}
}
//接收父组件传递的table数据
const tableInfoRef: any = ref(null)
const dataList: any = ref([])
const listV: any = ref([])
const listA: any = ref([])