驾驶舱功能开发
This commit is contained in:
105
src/views/cockpit/TerminalLog.vue
Normal file
105
src/views/cockpit/TerminalLog.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div >
|
||||
<!--终端运维日志 -->
|
||||
<TableHeader datePicker showExport style="display: none">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日志类型">
|
||||
<el-select v-model="tableStore.table.params.type" clearable placeholder="请选择日志类型">
|
||||
<el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入筛选数据" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary" icon="el-icon-Sort" @click="changePush">台账变更推送</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef"></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
|
||||
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ledgerChangePush } from '@/api/device-boot/terminalTree'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const fontdveoption = dictData.getBasicData('Dev_Ops')
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/pqsTerminalLogs/getList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
// { title: '名称', field: 'name', width: '200' },
|
||||
{
|
||||
title: '日志类型',
|
||||
field: 'logsType',
|
||||
width: '100',
|
||||
formatter: (row: any) => {
|
||||
return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '更改人员',
|
||||
field: 'createBy',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '更改时间',
|
||||
field: 'updateTime',
|
||||
width: '140'
|
||||
},
|
||||
|
||||
{ title: '描述', field: 'terminalDescribe' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
// 变更推送
|
||||
const changePush = () => {
|
||||
ElMessageBox.confirm('当前操作会把存在变动的装置测点推送至前置，是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
ledgerChangePush().then(res => {
|
||||
// ElMessage.success(res.message)
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
}
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
263
src/views/cockpit/qualifiedRate.vue
Normal file
263
src/views/cockpit/qualifiedRate.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<!-- 稳态合格率统计图 -->
|
||||
<my-echart :style="{ width: prop.width, height: prop.height }" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
|
||||
const itemStyle = {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#cccccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||||
params.forEach((item: any) => {
|
||||
const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
|
||||
tips += `<div style=" display: flex;justify-content: space-between;">
|
||||
<span>${item.marker}
|
||||
${item.seriesName}:
|
||||
</span> ${value}
|
||||
</div>` // 统一格式
|
||||
})
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '频率偏差',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.freqOffset,
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#CC0000'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '闪变',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.flicker
|
||||
},
|
||||
{
|
||||
name: '三相电压不平衡',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.voltageUnbalance
|
||||
},
|
||||
{
|
||||
name: '谐波电压',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.harmonicVoltage
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.voltageOffset
|
||||
},
|
||||
{
|
||||
name: '谐波电流',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.harmonicCurrent
|
||||
},
|
||||
{
|
||||
name: '负序电流',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.negativeCurrent
|
||||
},
|
||||
{
|
||||
name: '间谐波电压含有率',
|
||||
type: 'bar',
|
||||
itemStyle: itemStyle,
|
||||
data: tableStore.table.data.interHarmonic
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.searchBeginTime = getTimeOfTheMonth()[0]
|
||||
tableStore.table.params.searchEndTime = getTimeOfTheMonth()[1]
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
tableStore.table.params.powerFlag = 0
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
98
src/views/cockpit/testEchart.vue
Normal file
98
src/views/cockpit/testEchart.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: prop.height }" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, provide } from 'vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const echartList = ref({})
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const distributionData: any = ref([])
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/area/getAreaLineDetail',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
tabulation(tableStore.table.data)
|
||||
histogram(tableStore.table.data)
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
distributionData.value = []
|
||||
for (var i = 0; i < res.areaValue.length; i++) {
|
||||
distributionData.value.push({
|
||||
qy: res.areaValue[i][0],
|
||||
jcd: res.areaValue[i][1],
|
||||
zc: res.areaValue[i][2],
|
||||
zd: res.areaValue[i][3]
|
||||
})
|
||||
}
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: '区域'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
// console.log(params);
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: distributionData.value.map((item: any) => item.qy)
|
||||
},
|
||||
yAxis: {
|
||||
name: '监测点数（个）' // 给X轴加单位
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
data: distributionData.value.map((item: any) => item.jcd),
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#07CCCA'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: '#000'
|
||||
},
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user