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-22 10:35:01 +08:00
parent 33a41b9d7a
commit bccf61c6d1
31 changed files with 180231 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,29 +3,57 @@
<div class="view_top">
<!-- 左侧仪表盘 -->
<div class="view_top_left">
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="left_charts_title">电压有效值</div>
<div class="left_charts"><MyEchart ref="pieChart1" :options="echartsDataV1"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChart2" :options="echartsDataV2"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChart3" :options="echartsDataV3"></MyEchart></div>
</div>
<div class="view_top_mid">
<div class="mid_charts"><MyEchart ref="pieChartRef" :options="echartsData1"></MyEchart></div>
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts"><MyEchart :options="echartsData1"></MyEchart></div>
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
<div class="right_chartsitle">电流有效值</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>
</div>
</div>
<div class="view_bot">
<div class="view_bot_tables">
<tableInfo ref="tableInfoRef1" />
</div>
<div class="view_bot_tables">
<tableInfo ref="tableInfoRef2" />
</div>
<div class="view_bot_tables">
<tableInfo ref="tableInfoRef3" />
<!-- <tableInfo ref="tableInfoRef" /> -->
<!-- 表格数据 -->
<div v-if="tableData.length != 0">
<!-- div设计table -->
<div class="table" v-for="(item, index) in columnsData" :key="index">
<!-- 单层表头 -->
<div class="thead">
<div class="thead_top">
{{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
</div>
<div class="thead_bot">
<div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
{{ vv.phase + '相 ' }}
</div>
</div>
</div>
<!-- 有合并表头的数据 -->
<div class="tbody">
<div class="tbody_cell" v-for="(vv, key) in item" :key="key">
{{
tableData.find(item => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
? tableData.find(item => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
: '/'
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -33,12 +61,27 @@
<script lang="ts" setup>
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()
const pieChart1: any = ref()
const pieChart2: any = ref()
const pieChart3: any = ref()
const pieChart4: any = ref()
const pieChart5: any = ref()
const pieChart6: any = ref()
const echartsData: any = ref({})
const echartsData1: any = ref({})
//电压有效值
const echartsDataV1: any = ref({})
const echartsDataV2: any = ref({})
const echartsDataV3: any = ref({})
//电流有效值
const echartsDataA1: any = ref({})
const echartsDataA2: any = ref({})
const echartsDataA3: any = ref({})
//渲染echarts
const init = () => {
echartsData.value = {
@@ -87,251 +130,22 @@ const init = () => {
data: [
{
value: 15,
name: '违规率'
name: 'A相'
}
]
}
]
}
}
echartsDataV1.value = echartsData.value
echartsDataV2.value = echartsData.value
echartsDataV3.value = echartsData.value
echartsDataA1.value = echartsData.value
echartsDataA2.value = echartsData.value
echartsDataA3.value = echartsData.value
//中间指针图
echartsData1.value = {
// options: {
// // backgroundColor: '#001533',
// tooltip: {
// format: function (params) {
// console.log(params)
// }
// },
// series: [
// //外圈
// {
// radius: '100%',
// min: -150,
// max: 180,
// startAngle: -90,
// endAngle: 270,
// pointer: {
// show: true,
// length: '80%',
// radius: '20%',
// width: 6 //指针粗细
// },
// itemStyle: {
// normal: {
// color: 'rgb(0,191,255)'
// }
// },
// // axisLine: {
// // show: true,
// // fontSize: 20,
// // lineStyle: {
// // width: 0,
// // color: [[1, '#01b4e0']]
// // }
// // },
// axisLine: {
// show: true,
// // 坐标轴线
// lineStyle: {
// color: [[1, '#F42E47']], // 属性lineStyle控制线条样式
// width: 2
// },
// interval: 0
// },
// splitLine: {
// length: 10,
// lineStyle: {
// width: 2,
// color: '#01b4e0',
// distance: 5
// }, //刻度节点线
// splitNumber: 5
// },
// splitNumber: 11,
// axisTick: {
// show: false
// },
// axisLabel: {
// show: true,
// fontSize: 14,
// color: '#000',
// formatter: function (v: any) {
// console.log(v, '00000000000')
// switch (v + '') {
// case '-122.5':
// return '-120'
// case '-95':
// return '-90'
// case '-60':
// return '-60'
// case '-67.5':
// return '-60'
// case '-40':
// return '-30'
// case '-12.5':
// return '0'
// case '42.5':
// return '30'
// case '70':
// return '60'
// case '97.5':
// return '90'
// case '125':
// return '120'
// case '152.5':
// return '150'
// case '-180':
// return ''
// case '180':
// return '180'
// default:
// return v
// }
// }
// },
// detail: {
// show: false,
// textStyle: {
// fontSize: 30,
// fontWeight: '700',
// color: '#67d9fe'
// }
// },
// data: [
// {
// name: '',
// value: 150,
// itemStyle: {
// color: 'red'
// }
// },
// {
// name: '',
// value: 60,
// itemStyle: {
// color: '#DAA521'
// }
// },
// {
// name: '',
// value: 90,
// itemStyle: {
// color: 'green'
// }
// }
// ]
// },
// //内圈
// {
// radius: '50%',
// splitNumber: 11,
// startAngle: 0,
// endAngle: 360,
// min: -150,
// max: 180,
// axisLine: {
// show: true,
// // 坐标轴线
// lineStyle: {
// color: [[1, '#1C9EE9']], // 属性lineStyle控制线条样式
// width: 2,
// type: 'dashed'
// }
// },
// pointer: {
// show: true,
// length: '80%',
// radius: '20%',
// width: 8 //指针粗细
// },
// itemStyle: {
// // show: false,
// normal: {
// color: 'rgb(0,191,255)'
// }
// },
// splitLine: {
// length: 5,
// interval: 30,
// lineStyle: {
// width: 2,
// color: 'green',
// distance: -20
// } //刻度节点线
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// show: true,
// itemStyle: {
// interval: 0
// },
// formatter: function (v: any) {
// console.log(v, '00000000000')
// switch (v + '') {
// case '-122.5':
// return '-120'
// case '-95':
// return '-90'
// case '-60':
// return '-60'
// case '-67.5':
// return '-60'
// case '-40':
// return '-30'
// case '-12.5':
// return '0'
// case '42.5':
// return '30'
// case '70':
// return '60'
// case '97.5':
// return '90'
// case '125':
// return '120'
// case '152.5':
// return '150'
// case '-180':
// return ''
// case '180':
// return '180'
// default:
// return v
// }
// }
// },
// detail: {
// show: false
// },
// data: [
// {
// name: '',
// value: 110,
// itemStyle: {
// color: 'red'
// }
// },
// {
// name: '',
// value: 70,
// itemStyle: {
// color: '#DAA521'
// }
// },
// {
// name: '',
// value: 20,
// itemStyle: {
// color: 'green'
// }
// }
// ]
// }
// ]
// }
options: {
grid: {
top: 230
@@ -1102,7 +916,7 @@ const init = () => {
show: true,
lineStyle: {
color: [
[0.25, '#9D322D'],
[0.25, '#9D322D'],
[0.5, '#9D322D'],
[0.75, '#9D322D'],
[1, '#9D322D']
@@ -1186,32 +1000,125 @@ const init = () => {
echartsData1.value.options.series[i].startAngle = 90
echartsData1.value.options.series[i].endAngle = -270
echartsData1.value.options.series[i].center = ['50%', '50%']
// option.series[i].axisTick = {show: false};
// option.series[i].axisLabel = {show: false};
// optionThree.series[i].pointer = {show: false};
// optionThree.series[i].detail = {show: false};
}
}
//渲染table表头
const tableInfoRef1: any = ref(null)
const tableInfoRef2: any = ref(null)
const tableInfoRef3: any = ref(null)
const initTableHead = () => {
const list: any = []
for (let index = 0; index < 1; index++) {
list.push({
a: Math.floor(Math.random() * (100 + 1)),
b: Math.floor(Math.random() * (100 + 1)),
c: Math.floor(Math.random() * (100 + 1))
//接收父组件传递的table数据
const tableInfoRef: any = ref(null)
const dataList: any = ref([])
const listV: any = ref([])
const listA: any = ref([])
const loading = ref(false)
//定义表格所需要的数据
const tableData: any = ref([])
loading.value = true
const columnsData: any = ref([])
const getColumns = () => {
getRealTimeTableList().then(res => {
columnsData.value = res.data
})
}
//处理表格数据
const getTableData = (list: any) => {
tableData.value = list
loading.value = false
columnsData.value.map((item: any) => {
item.map((vv: any) => {
vv.statisticalData = list.find((kk: any) => {
return kk.anotherName == vv.showName && kk.phase == vv.phase
})?.statisticalData
})
}
tableInfoRef1.value.getTableData(0, list)
tableInfoRef2.value.getTableData(1, list)
tableInfoRef3.value.getTableData(2, list)
})
}
//获取实时数据
const getRealTimeData = (val: any) => {
dataList.value = val
dataList.value.map((item: any, index: any) => {
if (item.anotherName == '相电压总有效值') {
listV.value.push(item)
}
if (item.anotherName == '线电压总有效值') {
listA.value.push(item)
}
})
echartsDataV1.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'A'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'A'
})?.statisticalData
}
]
pieChart1.value.initChart()
echartsDataV2.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'B'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'B'
})?.statisticalData
}
]
pieChart2.value.initChart()
echartsDataV3.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'C'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'C'
})?.statisticalData
}
]
pieChart3.value.initChart()
echartsDataA1.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'AB'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'AB'
})?.statisticalData
}
]
pieChart4.value.initChart()
echartsDataA2.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'BC'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'BC'
})?.statisticalData
}
]
pieChart5.value.initChart()
echartsDataA3.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'CA'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'CA'
})?.statisticalData
}
]
pieChart6.value.initChart()
getColumns()
getTableData(val)
}
defineExpose({ getRealTimeData })
onMounted(() => {
init()
initTableHead()
})
</script>
<style lang="scss" scoped>
@@ -1232,16 +1139,18 @@ onMounted(() => {
.view_top_right {
width: 30%;
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #eee;
.left_charts,
.right_charts {
flex: none;
width: 100%;
height: 120px;
border: 1px solid #eee;
margin-bottom: 10px;
margin-bottom: 16px;
padding: 10px;
}
}
@@ -1250,11 +1159,23 @@ onMounted(() => {
border: 1px solid #eee;
margin: 0 10px;
padding: 10px;
height: 450px;
.mid_charts {
width: 100%;
height: 100%;
}
}
.left_charts_title,
.mid_charts_title,
.right_charts_title {
width: 100%;
height: 20px;
text-align: left;
font-weight: 800;
font-weight: 16px;
line-height: 20px;
}
}
.view_bot {
min-height: 300px;
@@ -1268,4 +1189,58 @@ onMounted(() => {
.view::-webkit-scrollbar {
display: none;
}
.table {
width: 100%;
height: 120px;
border: 1px solid #eee;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
display: flex;
flex-direction: column;
.thead {
width: 100%;
height: auto;
background: #f4f6f9;
text-align: center;
display: flex;
flex-direction: column;
.thead_top {
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
color: #111;
font-size: 14px;
font-weight: 800;
}
.thead_bot {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
color: #111;
font-size: 14px;
font-weight: 800;
.thead_bot_cell {
flex: 1;
border: 1px solid #eee;
}
}
}
.tbody {
flex: 1;
display: flex;
text-align: center;
.tbody_cell {
flex: 1;
text-align: center;
line-height: 40px;
border: 1px solid #eee;
border-bottom: 0;
}
}
.tbody:hover {
background: #f4f6f9;
}
}
</style>