2025-09-03 20:57:28 +08:00
|
|
|
|
<!-- 贡献度计算 -->
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="default-main" :style="height">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
贡献度计算
|
|
|
|
|
|
<div style="font-size: 14px; font-weight: 500">
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<!-- {{ dotList.alias || '' }} -->
|
2025-12-15 09:33:34 +08:00
|
|
|
|
<span class="monitoring-point1">当前位置：{{ dotList.alias || '' }}</span>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
<back-component />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<splitpanes :style="heightB" class="default-theme" id="navigation-splitpanes">
|
|
|
|
|
|
<pane :size="size">
|
|
|
|
|
|
<PointTree
|
|
|
|
|
|
:showSelect="false"
|
|
|
|
|
|
:default-expand-all="false"
|
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
|
@init="handleNodeClick"
|
|
|
|
|
|
></PointTree>
|
|
|
|
|
|
</pane>
|
|
|
|
|
|
<pane style="background: #fff" :style="heightB" :size="100 - size">
|
|
|
|
|
|
<el-form :model="form" inline label-width="auto">
|
|
|
|
|
|
<el-form-item label="谐波类型:">
|
|
|
|
|
|
<el-radio-group v-model="form.type">
|
|
|
|
|
|
<el-radio-button label="谐波电压" value="1" />
|
|
|
|
|
|
<el-radio-button label="谐波电流" value="0" />
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="谐波次数:">
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
v-model="form.index"
|
|
|
|
|
|
filterable
|
|
|
|
|
|
multiple
|
|
|
|
|
|
:multiple-limit="5"
|
|
|
|
|
|
collapse-tags
|
|
|
|
|
|
collapse-tags-tooltip
|
|
|
|
|
|
clearable
|
|
|
|
|
|
placeholder="请选择次数"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in harmonic"
|
|
|
|
|
|
:key="item.value"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
></el-option>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="负荷数据:">
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
|
2025-09-03 20:57:28 +08:00
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in loadDataOptions"
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
></el-option>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-Plus" @click="push('/admin/division/aListOfLoadData')">
|
|
|
|
|
|
新增
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-tabs v-model="activeName" type="border-card" class="mr10" v-if="showTabs">
|
2025-09-03 20:57:28 +08:00
|
|
|
|
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
|
|
|
|
|
|
<div class="pd10">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<span style="color: var(--el-text-color-regular)">时间范围:</span>
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
v-model="item.time"
|
|
|
|
|
|
class="mr10 ml10"
|
|
|
|
|
|
type="daterange"
|
|
|
|
|
|
start-placeholder="起始时间"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
|
date-format="YYYY-MM-DD"
|
|
|
|
|
|
time-format="YYYY-MM-DD"
|
2025-09-05 16:03:31 +08:00
|
|
|
|
value-format="YYYY-MM-DD"
|
2025-09-03 20:57:28 +08:00
|
|
|
|
:disabled-date="handleDisabledDate"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
|
|
|
|
|
|
执行
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</div>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<div v-if="item.showEcahr == 1" class="harmonicButton">
|
|
|
|
|
|
<el-form :inline="true" v-model="item.form">
|
|
|
|
|
|
<el-form-item label="限值:" v-if="item.showDynamic">
|
|
|
|
|
|
<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>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</el-form-item>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-form-item label="时间点一:" v-if="item.showDynamic">
|
|
|
|
|
|
<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>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</el-form-item>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-form-item label="时间点二:" v-if="item.showDynamic">
|
|
|
|
|
|
<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>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-button
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
icon="el-icon-Document"
|
|
|
|
|
|
@click="generateFn"
|
|
|
|
|
|
v-if="!item.showDynamic"
|
|
|
|
|
|
>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
生成动态谐波责任数据
|
|
|
|
|
|
</el-button>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
<el-button
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
icon="el-icon-Document"
|
|
|
|
|
|
v-else
|
|
|
|
|
|
@click="generateMetrics"
|
|
|
|
|
|
>
|
|
|
|
|
|
生成谐波责任指标
|
|
|
|
|
|
</el-button>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
</div>
|
2025-09-05 16:03:31 +08:00
|
|
|
|
|
|
|
|
|
|
<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>
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
</pane>
|
|
|
|
|
|
</splitpanes>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import 'splitpanes/dist/splitpanes.css'
|
|
|
|
|
|
import { Splitpanes, Pane } from 'splitpanes'
|
2025-09-05 16:03:31 +08:00
|
|
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
2025-09-03 20:57:28 +08:00
|
|
|
|
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
|
|
|
|
|
import BackComponent from '@/components/icon/back/index.vue'
|
|
|
|
|
|
import { harmonicOptions } from '@/utils/dictionary'
|
2025-09-05 16:03:31 +08:00
|
|
|
|
import { userDataList, getHistoryHarmData, getDynamicData, getResponsibilityData } from '@/api/advance-boot/division'
|
2025-09-03 20:57:28 +08:00
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
2025-09-05 16:03:31 +08:00
|
|
|
|
import { Edit } from '@element-plus/icons-vue'
|
|
|
|
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
|
|
|
|
import { timeFormat } from '@/utils/common'
|
|
|
|
|
|
import { yMethod } from '@/utils/echartMethod'
|
2025-09-03 20:57:28 +08:00
|
|
|
|
defineOptions({
|
|
|
|
|
|
name: 'division/compute'
|
|
|
|
|
|
})
|
|
|
|
|
|
const { push } = useRouter()
|
|
|
|
|
|
const dotList: any = ref({})
|
|
|
|
|
|
const height = mainHeight(20)
|
|
|
|
|
|
const heightB = mainHeight(70)
|
|
|
|
|
|
const harmonic = harmonicOptions.slice(1)
|
2026-01-08 14:52:01 +08:00
|
|
|
|
const size = ref(19)
|
2025-09-03 20:57:28 +08:00
|
|
|
|
const showTabs = ref(false)
|
|
|
|
|
|
const loadDataOptions: any = ref([])
|
|
|
|
|
|
const form: any = reactive({
|
2025-09-05 16:03:31 +08:00
|
|
|
|
type: '1',
|
2025-09-03 20:57:28 +08:00
|
|
|
|
index: [],
|
2025-09-05 16:03:31 +08:00
|
|
|
|
loadDataId: ''
|
2025-09-03 20:57:28 +08:00
|
|
|
|
})
|
2025-09-05 16:03:31 +08:00
|
|
|
|
const code = ref(3)
|
|
|
|
|
|
const xAxisData = ref([])
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
|
const loading1 = ref(false)
|
2025-09-03 20:57:28 +08:00
|
|
|
|
const tabList: any = ref([])
|
|
|
|
|
|
const activeName = ref(0)
|
2025-09-05 16:03:31 +08:00
|
|
|
|
const xValue = ref('')
|
2025-09-03 20:57:28 +08:00
|
|
|
|
const handleNodeClick = (data: any, node: any) => {
|
|
|
|
|
|
if (data.level == 6) {
|
|
|
|
|
|
dotList.value = data
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 设置时间
|
2025-09-05 16:03:31 +08:00
|
|
|
|
const timeFrame = ref(['', ''])
|
2025-09-03 20:57:28 +08:00
|
|
|
|
// 处理日期禁用逻辑
|
|
|
|
|
|
const handleDisabledDate = date => {
|
|
|
|
|
|
// 定义时间边界
|
2025-09-05 16:03:31 +08:00
|
|
|
|
const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
|
|
|
|
|
|
const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
|
2025-09-03 20:57:28 +08:00
|
|
|
|
|
|
|
|
|
|
// 如果日期不存在（选择今天时可能出现），不禁用
|
|
|
|
|
|
if (!date) return false
|
|
|
|
|
|
|
|
|
|
|
|
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期
|
|
|
|
|
|
return date.getTime() < startLimit || date.getTime() > endLimit
|
|
|
|
|
|
}
|
2025-09-05 16:03:31 +08:00
|
|
|
|
// 这是按钮变色
|
|
|
|
|
|
const setCode = (num: number) => {
|
|
|
|
|
|
if (code.value == num) {
|
|
|
|
|
|
return (code.value = 3)
|
|
|
|
|
|
}
|
|
|
|
|
|
code.value = num
|
|
|
|
|
|
}
|
2025-09-03 20:57:28 +08:00
|
|
|
|
// 确定
|
|
|
|
|
|
const submit = () => {
|
2025-09-05 16:03:31 +08:00
|
|
|
|
if (form.loadDataId == '') {
|
2025-09-03 20:57:28 +08:00
|
|
|
|
return ElMessage.warning('请选择负荷数据')
|
|
|
|
|
|
}
|
2025-09-05 16:03:31 +08:00
|
|
|
|
if (form.index.length == 0) {
|
|
|
|
|
|
return ElMessage.warning('请选择谐波次数')
|
|
|
|
|
|
}
|
2025-09-03 20:57:28 +08:00
|
|
|
|
|
|
|
|
|
|
if (form.index.length == 0) {
|
|
|
|
|
|
showTabs.value = false
|
|
|
|
|
|
} else {
|
2025-09-05 16:03:31 +08:00
|
|
|
|
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadDataId)[0]
|
2025-09-03 20:57:28 +08:00
|
|
|
|
showTabs.value = true
|
|
|
|
|
|
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
|
|
|
|
|
|
tabList.value = []
|
|
|
|
|
|
list.forEach((item: any) => {
|
|
|
|
|
|
tabList.value.push({
|
|
|
|
|
|
label: item + '次谐波',
|
|
|
|
|
|
key: item,
|
|
|
|
|
|
time: [timeList.startTime, timeList.endTime],
|
|
|
|
|
|
showExecute: false,
|
|
|
|
|
|
form: {
|
|
|
|
|
|
limit: '',
|
|
|
|
|
|
time1: '',
|
|
|
|
|
|
time2: ''
|
2025-09-05 16:03:31 +08:00
|
|
|
|
},
|
|
|
|
|
|
showEcahr: 3, //1显示echart 2显示无数据 3什么都没有
|
|
|
|
|
|
options: {},
|
|
|
|
|
|
dynamicOptions: {}, //动态echarts
|
|
|
|
|
|
dynamicList: {}, //动态echarts
|
|
|
|
|
|
showDynamic: false //动态执行展示
|
2025-09-03 20:57:28 +08:00
|
|
|
|
})
|
2025-09-05 16:03:31 +08:00
|
|
|
|
timeFrame.value = [timeList.startTime, timeList.endTime]
|
2025-09-03 20:57:28 +08:00
|
|
|
|
})
|
2025-09-05 16:03:31 +08:00
|
|
|
|
code.value = 3
|
2025-09-03 20:57:28 +08:00
|
|
|
|
activeName.value = 0
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 执行
|
2025-09-05 16:03:31 +08:00
|
|
|
|
const execute = async (item: any, index: number) => {
|
|
|
|
|
|
tabList.value[activeName.value].showDynamic = false
|
|
|
|
|
|
loading.value = true
|
|
|
|
|
|
await getHistoryHarmData({
|
2025-09-03 20:57:28 +08:00
|
|
|
|
searchBeginTime: item.time[0],
|
|
|
|
|
|
searchEndTime: item.time[1],
|
|
|
|
|
|
type: form.type,
|
|
|
|
|
|
time: item.key,
|
|
|
|
|
|
lineId: dotList.value.id
|
2025-09-05 16:03:31 +08:00
|
|
|
|
})
|
|
|
|
|
|
.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
|
|
|
|
|
|
// })
|
|
|
|
|
|
})
|
2025-09-03 20:57:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
const dom = document.getElementById('navigation-splitpanes')
|
|
|
|
|
|
if (dom) {
|
2025-12-09 20:04:55 +08:00
|
|
|
|
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
2025-09-03 20:57:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
userDataList({
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
pageSize: 10000,
|
|
|
|
|
|
searchValue: ''
|
|
|
|
|
|
}).then((res: any) => {
|
|
|
|
|
|
loadDataOptions.value = res.data.records
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 550;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.upload-demo) {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.el-upload-list__item-info {
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-12-15 09:33:34 +08:00
|
|
|
|
.monitoring-point1 {
|
2025-09-05 16:03:31 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
2025-09-03 20:57:28 +08:00
|
|
|
|
</style>
|
