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

联调谐波责任划分页面

Browse Source
This commit is contained in:
guanj
2025-09-05 16:03:31 +08:00
parent 345e954756
commit b48d247fcf
6 changed files with 938 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/advance-boot/division.ts
View File

@@ -48,3 +48,19 @@ export function displayHistoryData(data: any) {
params: data params: data
}) })
} }
//生成谐波责任指标
export function getResponsibilityData(data: any) {
return createAxios({
url: '/advance-boot/responsibility/getResponsibilityData',
method: 'post',
data
})
}
//生成动态谐波责任数据
export function getDynamicData(data: any) {
return createAxios({
url: '/advance-boot/responsibility/getDynamicData',
method: 'post',
data
})
}

643
src/components/echarts/MyEchart.vue
View File

@@ -1,321 +1,322 @@
<template> <template>
<div class="chart"> <div class="chart">
<div ref="chartRef" class="my-chart" /> <div ref="chartRef" class="my-chart" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue' import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
// import echarts from './echarts' // import echarts from './echarts'
import * as echarts from 'echarts' // 全引入 import * as echarts from 'echarts' // 全引入
import 'echarts-gl' import 'echarts-gl'
import 'echarts-liquidfill' import 'echarts-liquidfill'
import 'echarts/lib/component/dataZoom' import 'echarts/lib/component/dataZoom'
import { color, gradeColor3 } from './color' import { color, gradeColor3 } from './color'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
const config = useConfig() const config = useConfig()
// import { nextTick } from 'process' // import { nextTick } from 'process'
const emit = defineEmits(['triggerPoint', 'group']) const emit = defineEmits(['triggerPoint', 'group'])
color[0] = config.layout.elementUiPrimary[0] color[0] = config.layout.elementUiPrimary[0]
const chartRef = ref<HTMLDivElement>() const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options', 'isInterVal', 'pieInterVal']) const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
let chart: echarts.ECharts | any = null let chart: echarts.ECharts | any = null
const resizeHandler = () => { const resizeHandler = () => {
// 不在视野中的时候不进行resize // 不在视野中的时候不进行resize
if (!chartRef.value) return if (!chartRef.value) return
if (chartRef.value.offsetHeight == 0) return if (chartRef.value.offsetHeight == 0) return
chart.getZr().painter.getViewportRoot().style.display = 'none' chart.getZr().painter.getViewportRoot().style.display = 'none'
requestAnimationFrame(() => { requestAnimationFrame(() => {
chart.resize() chart.resize()
chart.getZr().painter.getViewportRoot().style.display = '' chart.getZr().painter.getViewportRoot().style.display = ''
}) })
} }
const initChart = () => { const initChart = () => {
if (!props.isInterVal && !props.pieInterVal) { if (!props.isInterVal && !props.pieInterVal) {
chart?.dispose() chart?.dispose()
} }
// chart?.dispose() // chart?.dispose()
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement) chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
const options = { const options = {
title: { title: {
left: 'center', left: 'center',
// textStyle: { // textStyle: {
color: '#000', color: '#000',
fontSize: 18, fontSize: 18,
// }, // },
...(props.options?.title || null) ...(props.options?.title || null)
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
// axisPointer: { // axisPointer: {
// type: 'shadow', // type: 'shadow',
// label: { // label: {
// color: '#fff', // color: '#fff',
// fontSize: 16 // fontSize: 16
// } // }
// }, // },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontStyle: 'normal', fontStyle: 'normal',
opacity: 0.35, opacity: 0.35,
fontSize: 14 fontSize: 14
}, },
backgroundColor: 'rgba(0,0,0,0.55)', backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0, borderWidth: 0,
confine: true, confine: true,
formatter: function (params: any) { formatter: function (params: any) {
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗 let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
params?.forEach((item: any) => { params?.forEach((item: any) => {
const value = const value =
item.value === 3.14159 || item.value === 0.14159 item.value === 3.14159 || item.value === 0.14159
? '暂无数据' ? '暂无数据'
: Math.round(item.value * 100) / 100 // 处理特殊值 : Math.round(item.value * 100) / 100 // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;"> tips += `<div style=" display: flex;justify-content: space-between;">
<span>${item.marker} <span>${item.marker}
${item.seriesName}: ${item.seriesName}:
</span>　${value} </span>　${value}
</div>` // 统一格式 </div>` // 统一格式
}) })
return tips return tips
}, },
...(props.options?.tooltip || null) ...(props.options?.tooltip || null)
}, },
toolbox: { toolbox: {
right: 20, right: 20,
top: 15, top: 15,
feature: { feature: {
saveAsImage: { saveAsImage: {
title: '', // 按钮标题 title: '', // 按钮标题
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径 icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
}, },
...(props.options?.toolbox?.featureProps || null) ...(props.options?.toolbox?.featureProps || null)
}, },
emphasis: { emphasis: {
iconStyle: { iconStyle: {
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色 borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色 color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
} }
}, },
// }, // },
...(props.options?.toolbox || null) ...(props.options?.toolbox || null)
}, },
legend: { legend: {
right: 50, right: 50,
top: 25, top: 25,
itemGap: 10, itemGap: 10,
itemStyle: {}, itemStyle: {},
// textStyle: { // textStyle: {
fontSize: 12, fontSize: 12,
padding: [2, 0, 0, 0], //[上、右、下、左] padding: [2, 0, 0, 0], //[上、右、下、左]
// }, // },
itemWidth: 15, itemWidth: 15,
itemHeight: 10, itemHeight: 10,
...(props.options?.legend || null) ...(props.options?.legend || null)
}, },
grid: { grid: {
top: '50px', top: '50px',
left: '30px', left: '30px',
right: '70px', right: '70px',
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px', bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
containLabel: true, containLabel: true,
...(props.options?.grid || null) ...(props.options?.grid || null)
}, },
xAxis: props.options?.xAxis ? handlerXAxis() : null, xAxis: props.options?.xAxis ? handlerXAxis() : null,
yAxis: props.options?.yAxis ? handlerYAxis() : null, yAxis: props.options?.yAxis ? handlerYAxis() : null,
dataZoom: props.options?.dataZoom || [ dataZoom: props.options?.dataZoom || [
{ {
type: 'inside', type: 'inside',
height: 13, height: 13,
start: 0, start: 0,
bottom: '20px', bottom: '20px',
end: 100 end: 100
}, },
{ {
start: 0, start: 0,
height: 13, height: 13,
bottom: '20px', bottom: '20px',
end: 100 end: 100
} }
], ],
color: props.options?.color || color, color: props.options?.color || color,
series: props.options?.series, series: props.options?.series,
...props.options?.options ...props.options?.options
} }
// console.log(options.series,"获取x轴"); // console.log(options.series,"获取x轴");
handlerBar(options) handlerBar(options)
// 处理柱状图 // 处理柱状图
chart.setOption(options, true) chart.setOption(options, true)
// chart.group = 'group' // chart.group = 'group'
emit('group',chart) emit('group', chart, chartRef.value)
// 添加点击事件 // 添加点击事件
chart.on('click', function (params) { chart.on('click', function (params) {
if (params.seriesName == '暂态触发点') { if (params.seriesName == '暂态触发点') {
emit('triggerPoint', params.data) emit('triggerPoint', params.data)
} }
}) })
setTimeout(() => {
chart.resize() setTimeout(() => {
}, 0) chart.resize()
} }, 0)
const handlerBar = (options: any) => { }
if (Array.isArray(options.series)) { const handlerBar = (options: any) => {
options.series.forEach((item: any) => { if (Array.isArray(options.series)) {
if (item.type === 'bar') { options.series.forEach((item: any) => {
item.barMinHeight = 10 if (item.type === 'bar') {
item.barMaxWidth = 20 item.barMinHeight = 10
item.itemStyle = Object.assign( item.barMaxWidth = 20
{ item.itemStyle = Object.assign(
color: (params: any) => { {
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) { color: (params: any) => {
return '#ccc' if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
} else { return '#ccc'
return props.options?.color } else {
? props.options?.color[params.seriesIndex] return props.options?.color
: color[params.seriesIndex] ? props.options?.color[params.seriesIndex]
} : color[params.seriesIndex]
} }
}, }
item.itemStyle },
) item.itemStyle
} )
}) }
} })
} }
const handlerYAxis = () => { }
let temp = { const handlerYAxis = () => {
type: 'value', let temp = {
nameGap: 15, type: 'value',
nameTextStyle: { nameGap: 15,
color: '#000' nameTextStyle: {
}, color: '#000'
splitNumber: 5, },
minInterval: 1, splitNumber: 5,
axisLine: { minInterval: 1,
show: true, axisLine: {
lineStyle: { show: true,
color: '#000' lineStyle: {
} color: '#000'
}, }
axisLabel: { },
color: '#000', axisLabel: {
fontSize: 14, color: '#000',
formatter: function (value) { fontSize: 14,
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数 formatter: function (value) {
} return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
}, }
splitLine: { },
lineStyle: { splitLine: {
// 使用深浅的间隔色 lineStyle: {
color: ['#ccc'], // 使用深浅的间隔色
type: 'dashed', color: ['#ccc'],
opacity: 0.5 type: 'dashed',
} opacity: 0.5
} }
} }
// props.options?.xAxis 是数组还是对象 }
if (Array.isArray(props.options?.yAxis)) { // props.options?.xAxis 是数组还是对象
return props.options?.yAxis.map((item: any) => { if (Array.isArray(props.options?.yAxis)) {
return { return props.options?.yAxis.map((item: any) => {
...temp, return {
...item ...temp,
} ...item
}) }
} else { })
return { } else {
...temp, return {
...props.options?.yAxis ...temp,
} ...props.options?.yAxis
} }
} }
const handlerXAxis = () => { }
let temp = { const handlerXAxis = () => {
type: 'category', let temp = {
axisTick: { show: false }, type: 'category',
nameTextStyle: { axisTick: { show: false },
color: '#000' nameTextStyle: {
}, color: '#000'
axisLine: { },
// lineStyle: { axisLine: {
color: '#000' // lineStyle: {
// } color: '#000'
}, // }
axisLabel: { },
// textStyle: { axisLabel: {
fontFamily: 'dinproRegular', // textStyle: {
color: '#000', fontFamily: 'dinproRegular',
fontSize: '12' color: '#000',
// } fontSize: '12'
} // }
// boundaryGap: false, }
} // boundaryGap: false,
// props.options?.xAxis 是数组还是对象 }
if (Array.isArray(props.options?.xAxis)) { // props.options?.xAxis 是数组还是对象
return props.options?.xAxis.map((item: any) => { if (Array.isArray(props.options?.xAxis)) {
return { return props.options?.xAxis.map((item: any) => {
...temp, return {
...item ...temp,
} ...item
}) }
} else { })
return { } else {
...temp, return {
...props.options?.xAxis ...temp,
} ...props.options?.xAxis
} }
} }
}
let throttle: ReturnType<typeof setTimeout>
// 动态计算table高度 let throttle: ReturnType<typeof setTimeout>
const resizeObserver = new ResizeObserver(entries => { // 动态计算table高度
for (const entry of entries) { const resizeObserver = new ResizeObserver(entries => {
if (throttle) { for (const entry of entries) {
clearTimeout(throttle) if (throttle) {
} clearTimeout(throttle)
throttle = setTimeout(() => { }
resizeHandler() throttle = setTimeout(() => {
}, 100) resizeHandler()
} }, 100)
}) }
const setOptions = (options: any) => { })
chart.setOption(options) const setOptions = (options: any) => {
} chart.setOption(options)
const getChart = () => { }
return chart const getChart = () => {
} return chart
onMounted(() => { }
initChart() onMounted(() => {
resizeObserver.observe(chartRef.value!) initChart()
}) resizeObserver.observe(chartRef.value!)
defineExpose({ initChart, setOptions, getChart }) })
onBeforeUnmount(() => { defineExpose({ initChart, setOptions, getChart })
resizeObserver.unobserve(chartRef.value!) onBeforeUnmount(() => {
chart?.dispose() resizeObserver.unobserve(chartRef.value!)
}) chart?.dispose()
watch( })
() => props.options, watch(
(newVal, oldVal) => { () => props.options,
initChart() (newVal, oldVal) => {
} initChart()
) }
</script> )
</script>
<style lang="scss" scoped>
.chart { <style lang="scss" scoped>
width: 100%; .chart {
height: 100%; width: 100%;
position: relative; height: 100%;
position: relative;
.el-button {
position: absolute; .el-button {
right: 0px; position: absolute;
top: -60px; right: 0px;
} top: -60px;
}
.my-chart {
height: 100%; .my-chart {
width: 100%; height: 100%;
} width: 100%;
} }
</style> }
</style>

2
src/views/pqs/business/log/frontLog/index.vue
View File

@@ -69,7 +69,7 @@ const tableStore = new TableStore({
}, },
{ {
title: '日志错误码', title: '日志类型',
field: 'codeName', field: 'codeName',
minWidth: '180', minWidth: '180',
formatter: (row: any) => { formatter: (row: any) => {

455
src/views/pqs/harmonicMonitoring/detailed/division/components/compute.vue
View File

@@ -4,7 +4,8 @@
<div class="title"> <div class="title">
贡献度计算 贡献度计算
<div style="font-size: 14px; font-weight: 500"> <div style="font-size: 14px; font-weight: 500">
{{ dotList.alias || '' }} <!-- {{ dotList.alias || '' }} -->
<span class="monitoring-point">当前位置：{{ dotList.alias || '' }}</span>
<back-component /> <back-component />
</div> </div>
</div> </div>
@@ -45,7 +46,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="负荷数据:"> <el-form-item label="负荷数据:">
<el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据"> <el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
<el-option <el-option
v-for="item in loadDataOptions" v-for="item in loadDataOptions"
:key="item.id" :key="item.id"
@@ -61,7 +62,7 @@
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button> <el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tabs v-model="activeName" type="card" class="demo-tabs" v-if="showTabs"> <el-tabs v-model="activeName" type="border-card" class="mr10" v-if="showTabs">
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index"> <el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
<div class="pd10"> <div class="pd10">
<div> <div>
@@ -75,31 +76,93 @@
format="YYYY-MM-DD" format="YYYY-MM-DD"
date-format="YYYY-MM-DD" date-format="YYYY-MM-DD"
time-format="YYYY-MM-DD" time-format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled-date="handleDisabledDate" :disabled-date="handleDisabledDate"
/> />
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)"> <el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
执行 执行
</el-button> </el-button>
</div> </div>
<div v-if="item.showExecute"> <div v-if="item.showEcahr == 1" class="harmonicButton">
<el-form :inline="true" v-model="item.form" class="mt10"> <el-form :inline="true" v-model="item.form">
<el-form-item label="限值:"> <el-form-item label="限值:" v-if="item.showDynamic">
<el-input v-model="item.form.limit" placeholder="请输入限值" /> <el-input v-model="item.form.limit" placeholder="请选择限值" disabled>
<template #append>
<el-button
:icon="Edit"
:class="[code == 0 ? 'frontBox' : '']"
@click="setCode(0)"
/>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="时间点一:"> <el-form-item label="时间点一:" v-if="item.showDynamic">
<el-input v-model="item.form.time1" placeholder="请输入时间点一" /> <el-input v-model="item.form.time1" placeholder="请选择时间点一" disabled>
<template #append>
<el-button
:icon="Edit"
:class="[code == 1 ? 'frontBox' : '']"
@click="setCode(1)"
/>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="时间点二:"> <el-form-item label="时间点二:" v-if="item.showDynamic">
<el-input v-model="item.form.time2" placeholder="请输入时间点二" /> <el-input v-model="item.form.time2" placeholder="请选择时间点二" disabled>
<template #append>
<el-button
:icon="Edit"
:class="[code == 2 ? 'frontBox' : '']"
@click="setCode(2)"
/>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-Document"> <el-button
type="primary"
icon="el-icon-Document"
@click="generateFn"
v-if="!item.showDynamic"
>
生成动态谐波责任数据 生成动态谐波责任数据
</el-button> </el-button>
<el-button type="primary" icon="el-icon-Document">生成谐波责任指标</el-button> <el-button
type="primary"
icon="el-icon-Document"
v-else
@click="generateMetrics"
>
生成谐波责任指标
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="box" v-loading="loading">
<MyEChart :options="item.options" v-if="item.showEcahr == 1" @group="group" />
<el-empty description="时间范围内无谐波数据" v-if="item.showEcahr == 2" />
</div>
<!-- 生成动态谐波责任数据 -->
<div class="box boxTab" v-loading="loading1">
<MyEChart :options="item.dynamicOptions" style="flex: 1" v-if="item.showDynamic" />
<div style="width: 500px">
<vxe-table
v-if="item.showDynamic"
ref="tableRef"
:data="item.dynamicData"
height="auto"
v-bind="defaultAttribute"
>
<vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
<vxe-column field="responsibilityData" title="责任数据(%)" width="120">
<template v-slot="{ row }">
{{ Math.floor(row.responsibilityData * 10000) / 10000 }}
</template>
</vxe-column>
</vxe-table>
</div>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -112,14 +175,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import 'splitpanes/dist/splitpanes.css' import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from 'splitpanes'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import PointTree from '@/components/tree/pqs/pointTree.vue' import PointTree from '@/components/tree/pqs/pointTree.vue'
import BackComponent from '@/components/icon/back/index.vue' import BackComponent from '@/components/icon/back/index.vue'
import { harmonicOptions } from '@/utils/dictionary' import { harmonicOptions } from '@/utils/dictionary'
import { userDataList } from '@/api/advance-boot/division' import { userDataList, getHistoryHarmData, getDynamicData, getResponsibilityData } from '@/api/advance-boot/division'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { formatDate } from '@/utils/formatTime' import { Edit } from '@element-plus/icons-vue'
import { getHistoryHarmData } from '@/api/advance-boot/division' import MyEChart from '@/components/echarts/MyEchart.vue'
import { timeFormat } from '@/utils/common'
import { yMethod } from '@/utils/echartMethod'
defineOptions({ defineOptions({
name: 'division/compute' name: 'division/compute'
}) })
@@ -132,23 +198,29 @@ const size = ref(0)
const showTabs = ref(false) const showTabs = ref(false)
const loadDataOptions: any = ref([]) const loadDataOptions: any = ref([])
const form: any = reactive({ const form: any = reactive({
type: '0', type: '1',
index: [], index: [],
loadData: '' loadDataId: ''
}) })
const code = ref(3)
const xAxisData = ref([])
const loading = ref(false)
const loading1 = ref(false)
const tabList: any = ref([]) const tabList: any = ref([])
const activeName = ref(0) const activeName = ref(0)
const xValue = ref('')
const handleNodeClick = (data: any, node: any) => { const handleNodeClick = (data: any, node: any) => {
if (data.level == 6) { if (data.level == 6) {
dotList.value = data dotList.value = data
} }
} }
// 设置时间 // 设置时间
const timeFrame = ref(['', ''])
// 处理日期禁用逻辑 // 处理日期禁用逻辑
const handleDisabledDate = date => { const handleDisabledDate = date => {
// 定义时间边界 // 定义时间边界
const startLimit = new Date(tabList.value[0].time[0]).getTime() const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
const endLimit = new Date(tabList.value[0].time[1]).setHours(23, 59, 59, 999) const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
// 如果日期不存在（选择今天时可能出现），不禁用 // 如果日期不存在（选择今天时可能出现），不禁用
if (!date) return false if (!date) return false
@@ -156,16 +228,26 @@ const handleDisabledDate = date => {
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期 // 禁用 2025-08-01 之前和 2025-08-31 之后的日期
return date.getTime() < startLimit || date.getTime() > endLimit return date.getTime() < startLimit || date.getTime() > endLimit
} }
// 这是按钮变色
const setCode = (num: number) => {
if (code.value == num) {
return (code.value = 3)
}
code.value = num
}
// 确定 // 确定
const submit = () => { const submit = () => {
if (form.loadData == '') { if (form.loadDataId == '') {
return ElMessage.warning('请选择负荷数据') return ElMessage.warning('请选择负荷数据')
} }
if (form.index.length == 0) {
return ElMessage.warning('请选择谐波次数')
}
if (form.index.length == 0) { if (form.index.length == 0) {
showTabs.value = false showTabs.value = false
} else { } else {
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadData)[0] let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadDataId)[0]
showTabs.value = true showTabs.value = true
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b) let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
tabList.value = [] tabList.value = []
@@ -179,24 +261,311 @@ const submit = () => {
limit: '', limit: '',
time1: '', time1: '',
time2: '' time2: ''
} },
showEcahr: 3, //1显示echart 2显示无数据 3什么都没有
options: {},
dynamicOptions: {}, //动态echarts
dynamicList: {}, //动态echarts
showDynamic: false //动态执行展示
}) })
timeFrame.value = [timeList.startTime, timeList.endTime]
}) })
// tabList.value = code.value = 3
activeName.value = 0 activeName.value = 0
} }
} }
// 执行 // 执行
const execute = (item: any, index: number) => { const execute = async (item: any, index: number) => {
getHistoryHarmData({ tabList.value[activeName.value].showDynamic = false
loading.value = true
await getHistoryHarmData({
searchBeginTime: item.time[0], searchBeginTime: item.time[0],
searchEndTime: item.time[1], searchEndTime: item.time[1],
type: form.type, type: form.type,
time: item.key, time: item.key,
// userDataId:form.loadData,
lineId: dotList.value.id lineId: dotList.value.id
}).then((res: any) => {}) })
tabList.value[index].showExecute = true .then((res: any) => {
let [min, max] = yMethod(res.data.historyData.map((item: any) => item.value + 0.1))
xAxisData.value = res.data.historyData.map((item: any) => item.time)
tabList.value[index].options = {
title: {
text: ''
},
xAxis: {
type: 'time',
name: '时间',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
tooltip: {
formatter(params: any) {
xValue.value = params[0].value[0]
let str = params[0].value[0] + '<br/>'
for (let i = 0; i < params.length; i++) {
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
}
return str
}
},
grid: {
top: 30
},
legend: {
show: false
},
yAxis: {
name: form.type == 1 ? '%' : 'A',
min: min,
max: max
},
toolbox: {
show: false
},
series: [
{
name: item.key + (form.type == 1 ? '次谐波电压' : '次谐波电流'),
data: res.data.historyData.map((item: any) => [
item.time,
Math.floor(item.value * 10000) / 10000
]),
type: 'line',
symbol: 'none',
markLine: {
symbol: 'none', // 去除箭头
label: {
show: false // 隐藏标签
},
data: [
{
yAxis: ''
},
{
xAxis: ''
},
{
xAxis: ''
}
],
// 样式配置
lineStyle: {
color: 'red',
type: 'dashed' // 虚线
}
}
}
]
}
tabList.value[index].showEcahr = 1
loading.value = false
})
.catch(() => {
tabList.value[index].showEcahr = 2
loading.value = false
})
}
const resDataId = ref('')
// 生成动态谐波责任数据
const generateFn = async () => {
loading1.value = true
await getDynamicData({
lineId: dotList.value.id,
searchBeginTime: tabList.value[activeName.value].time[0],
searchEndTime: tabList.value[activeName.value].time[1],
time: tabList.value[activeName.value].key,
type: form.type,
userDataId: form.loadDataId
})
.then((res: any) => {
resDataId.value = res.data.responsibilityDataIndex
tabList.value[activeName.value].dynamicData = res.data.responsibilities
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
let series: any[] = []
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
res.data.datas.forEach((item: any) => {
series.push({
name: item.customerName,
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
type: 'line',
symbol: 'none'
})
})
tabList.value[activeName.value].dynamicOptions = {
title: {
text: ''
},
xAxis: {
type: 'time',
name: '时间',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
tooltip: {
formatter(params: any) {
let str = params[0].value[0] + '<br/>'
for (let i = 0; i < params.length; i++) {
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
}
return str
}
},
grid: {
top: 30
},
legend: {
show: false
},
yAxis: {
name: form.type == 1 ? '%' : 'A',
min: min,
max: max
},
toolbox: {
show: false
},
options: {
series: series
}
}
tabList.value[activeName.value].showDynamic = true
})
.catch(() => {
loading1.value = false
})
loading1.value = false
}
// 生成指标
const generateMetrics = async () => {
if (tabList.value[activeName.value].form.limit == '') return ElMessage.warning('请选择限值!')
if (tabList.value[activeName.value].form.time1 == '') return ElMessage.warning('请选择时间一!')
if (tabList.value[activeName.value].form.time2 == '') return ElMessage.warning('请选择时间二!')
loading1.value = true
await getResponsibilityData({
limitEndTime: tabList.value[activeName.value].form.time2,
limitStartTime: tabList.value[activeName.value].form.time1,
limitValue: tabList.value[activeName.value].form.limit,
resDataId: resDataId.value,
time: tabList.value[activeName.value].key,
type: form.type
})
.then((res: any) => {
tabList.value[activeName.value].dynamicData = res.data.responsibilities
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
let series: any[] = []
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
res.data.datas.forEach((item: any) => {
series.push({
name: item.customerName,
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
type: 'line',
symbol: 'none'
})
})
tabList.value[activeName.value].dynamicOptions = {
title: {
text: ''
},
xAxis: {
type: 'time',
name: '时间',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
tooltip: {
formatter(params: any) {
let str = params[0].value[0] + '<br/>'
for (let i = 0; i < params.length; i++) {
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
}
return str
}
},
grid: {
top: 30
},
legend: {
show: false
},
yAxis: {
name: form.type == 1 ? '%' : 'A',
min: min,
max: max
},
toolbox: {
show: false
},
options: {
series: series
}
}
tabList.value[activeName.value].showDynamic = true
})
.catch(() => {
loading1.value = false
})
loading1.value = false
}
// 监听echart点击
const group = (chart: any, myChartDom: any) => {
myChartDom.addEventListener('click', function (event: any) {
// 获取点击位置相对于图表容器的坐标
const rect = myChartDom.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const pointInPixel = [x, y]
// 转换为逻辑坐标（相对于图表坐标系）
const pointInGrid = chart.convertFromPixel({ gridIndex: 0 }, pointInPixel)
// 计算X轴和Y轴的对应数据
// 处理X轴数据（分类轴）
// 处理Y轴数据（数值轴）
let yValue = pointInGrid[1].toFixed(4)
// xValue = timeFormat(pointInGrid[0].toFixed(0) - 0)
if (code.value == 0) {
tabList.value[activeName.value].form.limit = yValue
tabList.value[activeName.value].options.series[0].markLine.data[0].yAxis = yValue
chart.setOption(tabList.value[activeName.value].options)
} else if (code.value == 1) {
tabList.value[activeName.value].form.time1 = xValue.value
tabList.value[activeName.value].options.series[0].markLine.data[1].xAxis = xValue.value
chart.setOption(tabList.value[activeName.value].options)
} else if (code.value == 2) {
tabList.value[activeName.value].form.time2 = xValue.value
tabList.value[activeName.value].options.series[0].markLine.data[2].xAxis = xValue.value
chart.setOption(tabList.value[activeName.value].options)
}
// 控制台输出详细信息
// console.log('点击事件详情:', {
// X轴数据: xValue,
// Y轴数据: yValue
// })
})
} }
onMounted(() => { onMounted(() => {
@@ -229,4 +598,32 @@ onMounted(() => {
width: 300px; width: 300px;
} }
} }
.monitoring-point {
font-size: 14px;
font-weight: 700;
color: var(--el-color-primary);
}
.box {
// height: 280px;
height: calc((100vh - 370px) / 2);
}
.boxTab {
display: flex;
}
.harmonicButton {
height: 42px;
display: flex;
justify-content: end;
align-items: center;
}
:deep(.el-tabs__content) {
height: calc(100vh - 265px);
}
:deep(.el-input-group__append, .el-input-group__prepend) {
background-color: #ffffff00;
}
:deep(.frontBox) {
background-color: var(--el-color-primary) !important;
color: #fff !important;
}
</style> </style>

226
src/views/pqs/harmonicMonitoring/detailed/division/components/detail.vue
View File

@@ -1,53 +1,173 @@
<!-- 详情 --> <!-- 详情 -->
<template> <template>
<div class="default-main" :style="height"> <div class="default-main pd10">
<div class="title"> <div class="title">
详情 <!-- <div style="font-size: 14px; font-weight: 500">
<div style="font-size: 14px;font-weight: 500;">
{{ query.name || '' }} </div> -->
<back-component /> <span class="monitoring-point"> {{ query.name || '' }}</span>
</div> <back-component />
</div> </div>
<el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
<el-tab-pane
v-for="(item, index) in tabList"
</div> :key="index"
:label="item.name + '次谐波'"
</template> :style="height"
<script setup lang='ts'> :name="index"
import { ref, reactive, onMounted, onUnmounted } from 'vue' v-loading="loading"
import { mainHeight } from '@/utils/layout' >
import { displayHistoryData } from '@/api/advance-boot/division'; <div style="height: calc(100vh - 250px); overflow-y: auto">
import BackComponent from '@/components/icon/back/index.vue' <div
import { useRouter } from 'vue-router' class="box boxTab mb10"
import { ElMessage } from 'element-plus' :style="`height: calc((100vh - 280px) / ${
import { id } from 'element-plus/es/locale'; item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
const { query } = useRoute() // 查询参数 })`"
const dotList: any = ref({}) v-for="(value, i) in item.dynamicOptions"
const height = mainHeight(20) :key="i"
>
const tabList: any = ref([]) <MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
const init = () => { <div style="width: 500px">
displayHistoryData({ <vxe-table ref="tableRef" :data="item.list[i]" height="auto" v-bind="defaultAttribute">
id: query.id, <vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
time:query.time <vxe-column field="responsibilityData" title="责任数据(%)" width="120">
}) <template v-slot="{ row }">
{{ Math.floor(row.responsibilityData * 10000) / 10000 }}
</template>
</vxe-column>
} </vxe-table>
</div>
onMounted(() => { </div>
init() </div>
}) </el-tab-pane>
</script> </el-tabs>
<style lang="scss" scoped> </div>
.title { </template>
display: flex; <script setup lang="ts">
justify-content: space-between; import { ref, reactive, onMounted, onUnmounted } from 'vue'
padding: 10px; import { mainHeight } from '@/utils/layout'
font-size: 16px; import { defaultAttribute } from '@/components/table/defaultAttribute'
font-weight: 550; import BackComponent from '@/components/icon/back/index.vue'
} import MyEChart from '@/components/echarts/MyEchart.vue'
</style> import { timeFormat } from '@/utils/common'
import { yMethod } from '@/utils/echartMethod'
import { displayHistoryData } from '@/api/advance-boot/division'
const { query } = useRoute() // 查询参数
const height = mainHeight(155)
const activeName = ref(0)
const tabList: any = ref([])
const loading: any = ref(false)
const init = () => {
let data = (Array.isArray(query.time) ? query.time[0] : query.time)?.split(',') ?? []
tabList.value = []
data.forEach((item: any) => {
tabList.value.push({
name: item,
dynamicOptions: [],
list: []
})
})
activeName.value = 0
generateFn(0)
}
// 生成动态谐波责任数据
const generateFn = async (e: any) => {
if (tabList.value[e].dynamicOptions.length != 0) return
loading.value = true
await displayHistoryData({
id: query.id,
time: tabList.value[e].name
})
.then((res: any) => {
res.data.forEach((item: any) => {
tabList.value[e].list.push(item.responsibilities)
let [min, max] = yMethod(item.datas.map((k: any) => k.valueDatas).flat())
let series: any[] = []
let time: any[] = item.timeDatas.map((k: any) => timeFormat(k))
item.datas.forEach((k: any) => {
series.push({
name: k.customerName,
data: k.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
type: 'line',
symbol: 'none'
})
})
tabList.value[e].dynamicOptions.push({
title: {
text: `时间：${item.limitSTime} 至${item.limitETime}　限值：${item.limitValue}`
},
xAxis: {
type: 'time',
name: '时间',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
tooltip: {
formatter(params: any) {
let str = params[0].value[0] + '<br/>'
for (let i = 0; i < params.length; i++) {
str =
str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
}
return str
}
},
grid: {
top: 30
},
legend: {
show: false
},
yAxis: {
min: min,
max: max
},
toolbox: {
show: false
},
options: {
series: series
}
})
})
})
.catch(() => {
loading.value = false
})
loading.value = false
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.title {
display: flex;
justify-content: end;
align-items: center;
padding: 10px;
font-size: 16px;
font-weight: 550;
color: var(--el-color-primary);
}
.monitoring-point {
font-size: 14px;
font-weight: 700;
}
.boxTab {
display: flex;
}
</style>

2
src/views/pqs/harmonicMonitoring/detailed/division/index.vue
View File

@@ -63,8 +63,6 @@ const tableStore = new TableStore({
click: row => { click: row => {
console.log("🚀 ~ row:", row) console.log("🚀 ~ row:", row)
// push('/admin/division/detail')
push({ push({
path: "/admin/division/detail", path: "/admin/division/detail",
query: { query: {