Compare commits
10 Commits
a8ec91482a
...
e7f7c8b537
| Author | SHA1 | Date | |
|---|---|---|---|
|
e7f7c8b537 | ||
|
|
6fcf99284d | ||
|
|
868463aef9 | ||
|
|
47adb54dee | ||
|
|
c520761c0e | ||
|
|
8b23cea38d | ||
|
|
db6594cdf4 | ||
|
|
82e41eefdb | ||
|
|
b48d247fcf | ||
|
|
345e954756 |
@@ -48,3 +48,19 @@ export function displayHistoryData(data: any) {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,71 +1,72 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
const SYSTEM_PREFIX = '/system-boot'
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param file
|
||||
*/
|
||||
export const uploadFile = (file: any, path: string) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('path', path)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/upload',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
export const deleteFile = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/delete',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
export const downloadFile = (filePath: any) => {
|
||||
// let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/download',
|
||||
method: 'GET',
|
||||
params: filePath,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件的短期url展示
|
||||
*/
|
||||
export const getFileUrl = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据获取文件的一个短期url及文件名
|
||||
*/
|
||||
export const getFileNameAndFilePath = (query: any) => {
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
const SYSTEM_PREFIX = '/system-boot'
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param file
|
||||
*/
|
||||
export const uploadFile = (file: any, path: string) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('path', path)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/upload',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
export const deleteFile = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/delete',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
export const downloadFile = (filePath: any) => {
|
||||
// let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/download',
|
||||
method: 'GET',
|
||||
params: filePath,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件的短期url展示
|
||||
*/
|
||||
export const getFileUrl = (params:any) => {
|
||||
let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据获取文件的一个短期url及文件名
|
||||
*/
|
||||
export const getFileNameAndFilePath = (query: any) => {
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,321 +1,322 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
// import { nextTick } from 'process'
|
||||
const emit = defineEmits(['triggerPoint', 'group'])
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18,
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// label: {
|
||||
// color: '#fff',
|
||||
// fontSize: 16
|
||||
// }
|
||||
// },
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
confine: true,
|
||||
formatter: function (params: any) {
|
||||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||||
params?.forEach((item: any) => {
|
||||
const value =
|
||||
item.value === 3.14159 || item.value === 0.14159
|
||||
? '暂无数据'
|
||||
: Math.round(item.value * 100) / 100 // 处理特殊值
|
||||
tips += `<div style=" display: flex;justify-content: space-between;">
|
||||
<span>${item.marker}
|
||||
${item.seriesName}:
|
||||
</span> ${value}
|
||||
</div>` // 统一格式
|
||||
})
|
||||
return tips
|
||||
},
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
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' // 自定义图标路径
|
||||
},
|
||||
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
emphasis: {
|
||||
iconStyle: {
|
||||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||||
}
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
// chart.group = 'group'
|
||||
emit('group',chart)
|
||||
// 添加点击事件
|
||||
chart.on('click', function (params) {
|
||||
if (params.seriesName == '暂态触发点') {
|
||||
emit('triggerPoint', params.data)
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
}
|
||||
const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 10
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
const setOptions = (options: any) => {
|
||||
chart.setOption(options)
|
||||
}
|
||||
const getChart = () => {
|
||||
return chart
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart, setOptions, getChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
// import { nextTick } from 'process'
|
||||
const emit = defineEmits(['triggerPoint', 'group'])
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18,
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// label: {
|
||||
// color: '#fff',
|
||||
// fontSize: 16
|
||||
// }
|
||||
// },
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
confine: true,
|
||||
formatter: function (params: any) {
|
||||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||||
params?.forEach((item: any) => {
|
||||
const value =
|
||||
item.value === 3.14159 || item.value === 0.14159
|
||||
? '暂无数据'
|
||||
: Math.round(item.value * 100) / 100 // 处理特殊值
|
||||
tips += `<div style=" display: flex;justify-content: space-between;">
|
||||
<span>${item.marker}
|
||||
${item.seriesName}:
|
||||
</span> ${value}
|
||||
</div>` // 统一格式
|
||||
})
|
||||
return tips
|
||||
},
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
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' // 自定义图标路径
|
||||
},
|
||||
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
emphasis: {
|
||||
iconStyle: {
|
||||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||||
}
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
// chart.group = 'group'
|
||||
emit('group', chart, chartRef.value)
|
||||
// 添加点击事件
|
||||
chart.on('click', function (params) {
|
||||
if (params.seriesName == '暂态触发点') {
|
||||
emit('triggerPoint', params.data)
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
}
|
||||
const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 10
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
const setOptions = (options: any) => {
|
||||
chart.setOption(options)
|
||||
}
|
||||
const getChart = () => {
|
||||
return chart
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart, setOptions, getChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,251 +1,259 @@
|
||||
<template>
|
||||
<!-- text -->
|
||||
<div v-if="field.render == 'renderFormatter'">
|
||||
{{ fieldValue }}
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue" :name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
|
||||
:active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect ||'light'" size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
|
||||
:renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
||||
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
||||
:loading="props.row.loading || false" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title" placement="top">
|
||||
<el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
|
||||
v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
||||
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
||||
}">
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6+.el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- text -->
|
||||
<div v-if="field.render == 'renderFormatter'">
|
||||
{{ fieldValue }}
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue"
|
||||
:name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
|
||||
:active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect || 'light'"
|
||||
size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
|
||||
:renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
||||
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
||||
:loading="props.row.loading || false" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title" placement="top">
|
||||
<el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
|
||||
v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
||||
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
||||
}">
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
const getUrl = (url: string) => {
|
||||
getFileUrl({ filePath: url }).then(res => {
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6+.el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -83,7 +83,6 @@ import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import router from '@/router'
|
||||
import globalPopUp from './globalPopUp.vue'
|
||||
import { routePush } from '@/utils/router'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
import html2canvas from 'html2canvas'
|
||||
import PopupPwd from './popup/password.vue'
|
||||
import AdminInfo from './popup/adminInfo.vue'
|
||||
|
||||
158
src/main.ts
158
src/main.ts
@@ -1,79 +1,79 @@
|
||||
import { createApp, reactive } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from '@/stores/index'
|
||||
import { registerIcons } from '@/utils/common'
|
||||
import mitt from 'mitt'
|
||||
import VXETable from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import '@/styles/index.scss'
|
||||
import '@/assets/font/iconfont.css'
|
||||
import { ElDialog } from 'element-plus'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
import BaiduMapOffline from 'vue-baidu-map-offline'
|
||||
import ExcelJS from 'exceljs'
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
// 方式1：NPM 安装，注入 ExcelJS 对象
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
})
|
||||
window.XEUtils = XEUtils
|
||||
|
||||
// 初始化多语言
|
||||
import { setupI18n } from '@/plugins/vueI18n'
|
||||
|
||||
// 引入 form-create
|
||||
import { setupFormCreate } from '@/plugins/formCreate'
|
||||
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
|
||||
//开启离线地图
|
||||
// app.use(BaiduMapOffline, {
|
||||
// offline: true,
|
||||
// offlineConfig: {
|
||||
// imgext: '.png',
|
||||
// customstyle: '',
|
||||
// tiles_dir: '',
|
||||
// tiles_hybrid: '',
|
||||
// tiles_self: '',
|
||||
// tiles_v_dir: '',
|
||||
// tiles_satellite_dir: '',
|
||||
// tiles_road_dir: '',
|
||||
// tiles_v_road_dir: '',
|
||||
// home: './plugin/offline/'
|
||||
// }
|
||||
// })
|
||||
app.use(BaiduMap, {
|
||||
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||
v: '3.0'
|
||||
})
|
||||
|
||||
await setupI18n(app)
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(ElementPlus)
|
||||
app.use(VXETable)
|
||||
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
||||
registerIcons(app) // icons
|
||||
|
||||
app.config.globalProperties.eventBus = mitt()
|
||||
// 配置全局变量
|
||||
app.config.globalProperties.$allVariables = reactive({
|
||||
butLoading: false
|
||||
})
|
||||
setupFormCreate(app)
|
||||
|
||||
await router.isReady()
|
||||
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
setupAll()
|
||||
import { createApp, reactive } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from '@/stores/index'
|
||||
import { registerIcons } from '@/utils/common'
|
||||
import mitt from 'mitt'
|
||||
import VXETable from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import '@/styles/index.scss'
|
||||
import '@/assets/font/iconfont.css'
|
||||
import { ElDialog } from 'element-plus'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
import BaiduMapOffline from 'vue-baidu-map-offline'
|
||||
import ExcelJS from 'exceljs'
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
// 方式1：NPM 安装，注入 ExcelJS 对象
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
})
|
||||
window.XEUtils = XEUtils
|
||||
|
||||
// 初始化多语言
|
||||
import { setupI18n } from '@/plugins/vueI18n'
|
||||
|
||||
// 引入 form-create
|
||||
import { setupFormCreate } from '@/plugins/formCreate'
|
||||
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
|
||||
//开启离线地图
|
||||
app.use(BaiduMapOffline, {
|
||||
offline: true,
|
||||
offlineConfig: {
|
||||
imgext: '.png',
|
||||
customstyle: '',
|
||||
tiles_dir: '',
|
||||
tiles_hybrid: '',
|
||||
tiles_self: '',
|
||||
tiles_v_dir: '',
|
||||
tiles_satellite_dir: '',
|
||||
tiles_road_dir: '',
|
||||
tiles_v_road_dir: '',
|
||||
home: './plugin/offline/'
|
||||
}
|
||||
})
|
||||
app.use(BaiduMap, {
|
||||
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||
v: '3.0'
|
||||
})
|
||||
|
||||
await setupI18n(app)
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(ElementPlus)
|
||||
app.use(VXETable)
|
||||
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
||||
registerIcons(app) // icons
|
||||
|
||||
app.config.globalProperties.eventBus = mitt()
|
||||
// 配置全局变量
|
||||
app.config.globalProperties.$allVariables = reactive({
|
||||
butLoading: false
|
||||
})
|
||||
setupFormCreate(app)
|
||||
|
||||
await router.isReady()
|
||||
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
setupAll()
|
||||
|
||||
@@ -347,12 +347,12 @@ const onSubmit = async () => {
|
||||
}))
|
||||
|
||||
// 设置有功功率图表
|
||||
setEChart(1, res1.data.data, '有功功率', 'kW')
|
||||
setEChart(1, res1.data.data, '有功功率', 'W')
|
||||
|
||||
// 获取无功功率数据并设置图表
|
||||
const res2 = await queryCarryCapacityQData(form)
|
||||
q_βminMap.value = res2.data.q_βminMap
|
||||
setEChart(2, res2.data.data, '无功功率', 'kVar')
|
||||
setEChart(2, res2.data.data, '无功功率', 'Var')
|
||||
|
||||
// 获取谐波电流数据并设置图表
|
||||
const res3 = await queryCarryCapacityIData(form)
|
||||
|
||||
@@ -69,7 +69,7 @@ const tableStore = new TableStore({
|
||||
},
|
||||
|
||||
{
|
||||
title: '日志错误码',
|
||||
title: '日志类型',
|
||||
field: 'codeName',
|
||||
minWidth: '180',
|
||||
formatter: (row: any) => {
|
||||
|
||||
@@ -1,464 +1,465 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-card>
|
||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
||||
<el-form-item label="页面名称:" prop="pageName">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="form.pageName"
|
||||
placeholder="请输入页面名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="页面排序:" prop="sort">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit-number
|
||||
v-model.trim.number="form.sort"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注:" class="top">
|
||||
<el-input
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
:rows="1"
|
||||
placeholder="请输入内容"
|
||||
v-model.trim="form.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="width: 100%; display: flex; justify-content: end">
|
||||
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
||||
<back-component />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt10" :style="height">
|
||||
<div style="display: flex">
|
||||
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
||||
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
||||
<el-collapse-item
|
||||
v-for="item in treeComponents"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:name="item.id"
|
||||
>
|
||||
<el-collapse v-model="activeNames1" class="ml20">
|
||||
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
|
||||
<div class="Box">
|
||||
<div
|
||||
v-for="(s, index) in k.children"
|
||||
:key="index"
|
||||
class="mr10 mb10 imgBox"
|
||||
draggable="true"
|
||||
unselectable="on"
|
||||
@drag="drag(s)"
|
||||
@dragend="dragEnd(s)"
|
||||
>
|
||||
<div class="textName">{{ s.name }}</div>
|
||||
<img :src="s.image" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div style="flex: 1" ref="wrapper">
|
||||
<GridLayout
|
||||
class="GridLayout"
|
||||
ref="gridLayout"
|
||||
v-model:layout="layout"
|
||||
style="width: 100%"
|
||||
:style="{ height: GridHeight + 'px' }"
|
||||
:row-height="rowHeight"
|
||||
:col-num="12"
|
||||
:vertical-compact="false"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="imgBox">
|
||||
<div class="textName">{{ item.name }}</div>
|
||||
<img
|
||||
:src="getImg(item.path)"
|
||||
:style="{
|
||||
height:
|
||||
item.h * rowHeight -
|
||||
(item.h == 1
|
||||
? 30
|
||||
: item.h == 2
|
||||
? 20
|
||||
: item.h == 3
|
||||
? 10
|
||||
: item.h == 4
|
||||
? -0
|
||||
: item.h == 5
|
||||
? -10
|
||||
: -20) +
|
||||
'px'
|
||||
}"
|
||||
/>
|
||||
<CloseBold class="remove" @click="removeItem(item.i)" />
|
||||
</div>
|
||||
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
||||
-->
|
||||
</template>
|
||||
</GridLayout>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import type { CollapseIconPositionType } from 'element-plus'
|
||||
import { componentTree } from '@/api/user-boot/user'
|
||||
import { GridLayout, GridItem } from 'grid-layout-plus'
|
||||
import { throttle } from 'lodash-es'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
||||
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import html2canvas from 'html2canvas'
|
||||
const { go } = useRouter()
|
||||
const { query } = useRoute()
|
||||
const height = mainHeight(108)
|
||||
const indicatorHeight = mainHeight(128)
|
||||
const rowHeight = ref(0)
|
||||
const GridHeight = ref(0)
|
||||
const position = ref<CollapseIconPositionType>('left')
|
||||
const form: any = reactive({
|
||||
pageName: '',
|
||||
thumbnail: '',
|
||||
containerConfig: [],
|
||||
sort: '100',
|
||||
id: '',
|
||||
remark: ''
|
||||
})
|
||||
const activeNames = ref([])
|
||||
const activeNames1 = ref([])
|
||||
const rules = {
|
||||
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
||||
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
}
|
||||
const formRef = ref()
|
||||
const layout: any = ref([
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
|
||||
])
|
||||
const treeComponents: any = ref([]) //组件树
|
||||
const treeComponentsCopy: any = ref([]) //组件树
|
||||
const info = () => {
|
||||
activeNames.value = []
|
||||
activeNames1.value = []
|
||||
componentTree().then(res => {
|
||||
treeComponents.value = res.data
|
||||
activeNames.value = treeComponents.value.map(item => item.id)
|
||||
res.data.forEach(item => {
|
||||
item.children.forEach(k => {
|
||||
activeNames1.value.push(k.id)
|
||||
})
|
||||
})
|
||||
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
|
||||
})
|
||||
|
||||
if (query.id) {
|
||||
queryById({ id: query.id }).then(res => {
|
||||
layout.value = JSON.parse(res.data.containerConfig)
|
||||
form.pageName = res.data.pageName
|
||||
form.sort = res.data.sort
|
||||
form.remark = res.data.remark
|
||||
form.id = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 扁平化树
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 删除拖拽
|
||||
const removeItem = (id: string) => {
|
||||
const index = layout.value.findIndex(item => item.i === id)
|
||||
|
||||
if (index > -1) {
|
||||
layout.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
const wrapper = ref<HTMLElement>()
|
||||
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
||||
|
||||
const mouseAt = { x: -1, y: -1 }
|
||||
|
||||
function syncMousePosition(event: MouseEvent) {
|
||||
mouseAt.x = event.clientX
|
||||
mouseAt.y = event.clientY
|
||||
}
|
||||
|
||||
const dropId = 'drop'
|
||||
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
|
||||
|
||||
const drag = throttle(row => {
|
||||
// console.log("🚀 ~ drag ~ row:", row)
|
||||
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
|
||||
layout.value.push({
|
||||
x: (layout.value.length * 2) % 6,
|
||||
y: layout.value.length + 6, // puts it at the bottom
|
||||
w: 4,
|
||||
h: 2,
|
||||
i: dropId
|
||||
})
|
||||
}
|
||||
|
||||
const index = layout.value.findIndex(item => item.i === dropId)
|
||||
|
||||
if (index !== -1) {
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
|
||||
if (!item) return
|
||||
|
||||
try {
|
||||
item.wrapper.style.display = 'none'
|
||||
} catch (e) {}
|
||||
|
||||
Object.assign(item.state, {
|
||||
top: mouseAt.y - parentRect.top,
|
||||
left: mouseAt.x - parentRect.left
|
||||
})
|
||||
const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
dragItem.i = String(index)
|
||||
dragItem.x = layout.value[index].x
|
||||
dragItem.y = layout.value[index].y
|
||||
} else {
|
||||
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function dragEnd(row: any) {
|
||||
console.log('🚀 ~ drag ~ row:', row)
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
layout.value.push({
|
||||
x: dragItem.x,
|
||||
y: dragItem.y,
|
||||
w: dragItem.w,
|
||||
h: dragItem.h,
|
||||
i: dragItem.i,
|
||||
name: row.name,
|
||||
path: row.path,
|
||||
icon: row.icon,
|
||||
timeKey: row.timeKey
|
||||
})
|
||||
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
if (!item) return
|
||||
try {
|
||||
item.wrapper.style.display = ''
|
||||
} catch (e) {}
|
||||
}
|
||||
// 保存
|
||||
const onSubmit = () => {
|
||||
if (layout.value.length == 0) {
|
||||
return ElMessage.warning('页面设计不能为空!')
|
||||
}
|
||||
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
||||
if (maxValue > 6) {
|
||||
return ElMessage.warning('组件不能超出当前容器!')
|
||||
}
|
||||
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
let url = ''
|
||||
await html2canvas(document.querySelector('.GridLayout'), {
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
url = canvas.toDataURL('image/png')
|
||||
})
|
||||
|
||||
if (valid) {
|
||||
if (form.id == '') {
|
||||
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('新增页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('修改页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const getImg = throttle((path: string) => {
|
||||
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
||||
})
|
||||
onMounted(() => {
|
||||
info()
|
||||
|
||||
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
||||
rowHeight.value = GridHeight.value / 6 - 11.5
|
||||
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
||||
document.addEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
// onMounted(() => {
|
||||
|
||||
// // document.addEventListener('dragover', syncMousePosition)
|
||||
// })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form-four {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.el-form-item__content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.el-select,
|
||||
.el-cascader,
|
||||
.el-input__inner,
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px 20px 12px;
|
||||
}
|
||||
.Box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.imgBox {
|
||||
// padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
background-color: var(--el-card-bg-color);
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
border-radius: var(--el-card-border-radius);
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration) 0.3s;
|
||||
.textName {
|
||||
padding: 2px 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
user-select: none; /* 标准属性 */
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
}
|
||||
.vgl-layout {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 2px;
|
||||
width: 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vgl-layout::before {
|
||||
position: absolute;
|
||||
width: calc(100% - 5px);
|
||||
height: calc(100% - 5px);
|
||||
margin: 5px;
|
||||
content: '';
|
||||
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
|
||||
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
|
||||
background-repeat: repeat;
|
||||
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #fff;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-card>
|
||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
||||
<el-form-item label="页面名称:" prop="pageName">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="form.pageName"
|
||||
placeholder="请输入页面名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="页面排序:" prop="sort">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit-number
|
||||
v-model.trim.number="form.sort"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注:" class="top">
|
||||
<el-input
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
:rows="1"
|
||||
placeholder="请输入内容"
|
||||
v-model.trim="form.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="width: 100%; display: flex; justify-content: end">
|
||||
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
||||
<back-component />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt10" :style="height">
|
||||
<div style="display: flex">
|
||||
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
||||
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
||||
<el-collapse-item
|
||||
v-for="item in treeComponents"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:name="item.id"
|
||||
>
|
||||
<el-collapse v-model="activeNames1" class="ml20">
|
||||
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
|
||||
<div class="Box">
|
||||
<div
|
||||
v-for="(s, index) in k.children"
|
||||
:key="index"
|
||||
class="mr10 mb10 imgBox"
|
||||
draggable="true"
|
||||
unselectable="on"
|
||||
@drag="drag(s)"
|
||||
@dragend="dragEnd(s)"
|
||||
>
|
||||
<div class="textName">{{ s.name }}</div>
|
||||
<img :src="s.image" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div style="flex: 1" ref="wrapper">
|
||||
<GridLayout
|
||||
class="GridLayout"
|
||||
ref="gridLayout"
|
||||
v-model:layout="layout"
|
||||
style="width: 100%"
|
||||
:style="{ height: GridHeight + 'px' }"
|
||||
:row-height="rowHeight"
|
||||
:col-num="12"
|
||||
prevent-collision
|
||||
:vertical-compact="false"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="imgBox">
|
||||
<div class="textName">{{ item.name }}</div>
|
||||
<img
|
||||
:src="getImg(item.path)"
|
||||
:style="{
|
||||
height:
|
||||
item.h * rowHeight -
|
||||
(item.h == 1
|
||||
? 30
|
||||
: item.h == 2
|
||||
? 20
|
||||
: item.h == 3
|
||||
? 10
|
||||
: item.h == 4
|
||||
? -0
|
||||
: item.h == 5
|
||||
? -10
|
||||
: -20) +
|
||||
'px'
|
||||
}"
|
||||
/>
|
||||
<CloseBold class="remove" @click="removeItem(item.i)" />
|
||||
</div>
|
||||
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
||||
-->
|
||||
</template>
|
||||
</GridLayout>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import type { CollapseIconPositionType } from 'element-plus'
|
||||
import { componentTree } from '@/api/user-boot/user'
|
||||
import { GridLayout, GridItem } from 'grid-layout-plus'
|
||||
import { throttle } from 'lodash-es'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
||||
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import html2canvas from 'html2canvas'
|
||||
const { go } = useRouter()
|
||||
const { query } = useRoute()
|
||||
const height = mainHeight(108)
|
||||
const indicatorHeight = mainHeight(128)
|
||||
const rowHeight = ref(0)
|
||||
const GridHeight = ref(0)
|
||||
const position = ref<CollapseIconPositionType>('left')
|
||||
const form: any = reactive({
|
||||
pageName: '',
|
||||
thumbnail: '',
|
||||
containerConfig: [],
|
||||
sort: '100',
|
||||
id: '',
|
||||
remark: ''
|
||||
})
|
||||
const activeNames = ref([])
|
||||
const activeNames1 = ref([])
|
||||
const rules = {
|
||||
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
||||
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
}
|
||||
const formRef = ref()
|
||||
const layout: any = ref([
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
|
||||
])
|
||||
const treeComponents: any = ref([]) //组件树
|
||||
const treeComponentsCopy: any = ref([]) //组件树
|
||||
const info = () => {
|
||||
activeNames.value = []
|
||||
activeNames1.value = []
|
||||
componentTree().then(res => {
|
||||
treeComponents.value = res.data
|
||||
activeNames.value = treeComponents.value.map(item => item.id)
|
||||
res.data.forEach(item => {
|
||||
item.children.forEach(k => {
|
||||
activeNames1.value.push(k.id)
|
||||
})
|
||||
})
|
||||
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
|
||||
})
|
||||
|
||||
if (query.id) {
|
||||
queryById({ id: query.id }).then(res => {
|
||||
layout.value = JSON.parse(res.data.containerConfig)
|
||||
form.pageName = res.data.pageName
|
||||
form.sort = res.data.sort
|
||||
form.remark = res.data.remark
|
||||
form.id = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 扁平化树
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 删除拖拽
|
||||
const removeItem = (id: string) => {
|
||||
const index = layout.value.findIndex(item => item.i === id)
|
||||
|
||||
if (index > -1) {
|
||||
layout.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
const wrapper = ref<HTMLElement>()
|
||||
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
||||
|
||||
const mouseAt = { x: -1, y: -1 }
|
||||
|
||||
function syncMousePosition(event: MouseEvent) {
|
||||
mouseAt.x = event.clientX
|
||||
mouseAt.y = event.clientY
|
||||
}
|
||||
|
||||
const dropId = 'drop'
|
||||
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
|
||||
|
||||
const drag = throttle(row => {
|
||||
// console.log("🚀 ~ drag ~ row:", row)
|
||||
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
|
||||
layout.value.push({
|
||||
x: (layout.value.length * 2) % 6,
|
||||
y: layout.value.length + 6, // puts it at the bottom
|
||||
w: 4,
|
||||
h: 2,
|
||||
i: dropId
|
||||
})
|
||||
}
|
||||
|
||||
const index = layout.value.findIndex(item => item.i === dropId)
|
||||
|
||||
if (index !== -1) {
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
|
||||
if (!item) return
|
||||
|
||||
try {
|
||||
item.wrapper.style.display = 'none'
|
||||
} catch (e) {}
|
||||
|
||||
Object.assign(item.state, {
|
||||
top: mouseAt.y - parentRect.top,
|
||||
left: mouseAt.x - parentRect.left
|
||||
})
|
||||
const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
dragItem.i = String(index)
|
||||
dragItem.x = layout.value[index].x
|
||||
dragItem.y = layout.value[index].y
|
||||
} else {
|
||||
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function dragEnd(row: any) {
|
||||
console.log('🚀 ~ drag ~ row:', row)
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
layout.value.push({
|
||||
x: dragItem.x,
|
||||
y: dragItem.y,
|
||||
w: dragItem.w,
|
||||
h: dragItem.h,
|
||||
i: dragItem.i,
|
||||
name: row.name,
|
||||
path: row.path,
|
||||
icon: row.icon,
|
||||
timeKey: row.timeKey
|
||||
})
|
||||
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
if (!item) return
|
||||
try {
|
||||
item.wrapper.style.display = ''
|
||||
} catch (e) {}
|
||||
}
|
||||
// 保存
|
||||
const onSubmit = () => {
|
||||
if (layout.value.length == 0) {
|
||||
return ElMessage.warning('页面设计不能为空!')
|
||||
}
|
||||
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
||||
if (maxValue > 6) {
|
||||
return ElMessage.warning('组件不能超出当前容器!')
|
||||
}
|
||||
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
let url = ''
|
||||
await html2canvas(document.querySelector('.GridLayout'), {
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
url = canvas.toDataURL('image/png')
|
||||
})
|
||||
|
||||
if (valid) {
|
||||
if (form.id == '') {
|
||||
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('新增页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('修改页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const getImg = throttle((path: string) => {
|
||||
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
||||
})
|
||||
onMounted(() => {
|
||||
info()
|
||||
|
||||
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
||||
rowHeight.value = GridHeight.value / 6 - 11.5
|
||||
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
||||
document.addEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
// onMounted(() => {
|
||||
|
||||
// // document.addEventListener('dragover', syncMousePosition)
|
||||
// })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form-four {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.el-form-item__content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.el-select,
|
||||
.el-cascader,
|
||||
.el-input__inner,
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px 20px 12px;
|
||||
}
|
||||
.Box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.imgBox {
|
||||
// padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
background-color: var(--el-card-bg-color);
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
border-radius: var(--el-card-border-radius);
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration) 0.3s;
|
||||
.textName {
|
||||
padding: 2px 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
user-select: none; /* 标准属性 */
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
}
|
||||
.vgl-layout {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 2px;
|
||||
width: 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vgl-layout::before {
|
||||
position: absolute;
|
||||
width: calc(100% - 5px);
|
||||
height: calc(100% - 5px);
|
||||
margin: 5px;
|
||||
content: '';
|
||||
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
|
||||
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
|
||||
background-repeat: repeat;
|
||||
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #fff;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable
|
||||
placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
|
||||
<Table ref="tableRef" isGroup/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { ref, onMounted, provide, reactive } 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'
|
||||
|
||||
const tableRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
showPage: true, // 确保启用分页
|
||||
column: [
|
||||
{
|
||||
title: '典型设备',
|
||||
children: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '名称',minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级',minWidth: 100 },
|
||||
{ field: 'capacity', title: '容量',minWidth: 100 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '各次谐波阻抗 (Ω)',
|
||||
width: 1800,
|
||||
children: Array.from({ length: 24 }, (_, i) => ({
|
||||
field: `i${i + 2}`,
|
||||
title: `${i + 2}次`,
|
||||
minWidth: 100
|
||||
}))
|
||||
}
|
||||
],
|
||||
// 在请求发送前处理参数
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.pageSize = 100
|
||||
},
|
||||
resetCallback: () => {
|
||||
tableStore.table.params.searchValue = ''
|
||||
},
|
||||
})
|
||||
|
||||
tableStore.table.params.type = 0
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
|
||||
// 暴露查询方法给父组件调用
|
||||
const queryData = () => {
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
queryData
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
74
src/views/pqs/database/model/components/harmonicSources.vue
Normal file
74
src/views/pqs/database/model/components/harmonicSources.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable
|
||||
placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { ref, onMounted, provide, reactive } 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'
|
||||
|
||||
const tableRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '谐波源',
|
||||
children: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '名称',minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级',minWidth: 200 },
|
||||
{ field: 'capacity', title: '容量',minWidth: 200 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '各次谐波电流含量（%）',
|
||||
width: 1800,
|
||||
children: Array.from({ length: 24 }, (_, i) => ({
|
||||
field: `i${i + 2}`,
|
||||
title: `${i + 2}次`,
|
||||
minWidth: 100
|
||||
}))
|
||||
}
|
||||
],
|
||||
// 在请求发送前处理参数
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.pageSize = 100
|
||||
},
|
||||
resetCallback: () => {
|
||||
tableStore.table.params.searchValue = ''
|
||||
},
|
||||
})
|
||||
|
||||
tableStore.table.params.type = 1
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 暴露查询方法给父组件调用
|
||||
const queryData = () => {
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
queryData
|
||||
})
|
||||
|
||||
</script>
|
||||
47
src/views/pqs/database/model/index.vue
Normal file
47
src/views/pqs/database/model/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-tabs v-model="activeName" type="border-card" @tab-change="handleTabChange">
|
||||
<el-tab-pane label="谐波阻抗模型库" name="1">
|
||||
<HarmonicImpedanceTable ref="harmonicImpedanceRef" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波源模型库" name="2">
|
||||
<HarmonicSourcesTable ref="harmonicSourcesRef" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import HarmonicSourcesTable from './components/harmonicSources.vue'
|
||||
import HarmonicImpedanceTable from './components/harmonicImpedance.vue'
|
||||
defineOptions({
|
||||
name: 'database/model'
|
||||
})
|
||||
const activeName = ref('1')
|
||||
|
||||
// 获取子组件引用
|
||||
const harmonicImpedanceRef = ref<InstanceType<typeof HarmonicImpedanceTable>>()
|
||||
const harmonicSourcesRef = ref<InstanceType<typeof HarmonicSourcesTable>>()
|
||||
|
||||
const layout = mainHeight(63) as any
|
||||
|
||||
// 添加 tab 切换处理函数
|
||||
const handleTabChange = (tabName: string) => {
|
||||
if (tabName === '1') {
|
||||
// 调用谐波阻抗数据库查询接口
|
||||
harmonicImpedanceRef.value?.queryData()
|
||||
} else if (tabName === '2') {
|
||||
// 调用谐波源数据库查询接口
|
||||
harmonicSourcesRef.value?.queryData()
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时初始化数据
|
||||
onMounted(() => {
|
||||
// 默认加载第一个 tab 的数据
|
||||
handleTabChange(activeName.value)
|
||||
})
|
||||
</script>
|
||||
@@ -47,7 +47,7 @@ import Table from '@/components/table/index.vue'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import completenessDetails from './completenessDetails.vue'
|
||||
import { genFileId, ElMessage } from 'element-plus'
|
||||
import { uploadUserData ,deleteUserDataByIds} from '@/api/advance-boot/division'
|
||||
import { uploadUserData, deleteUserDataByIds } from '@/api/advance-boot/division'
|
||||
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'division/aListOfLoadData'
|
||||
@@ -78,6 +78,9 @@ const tableStore = new TableStore({
|
||||
title: '完整性详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
disabled: row => {
|
||||
return row.integrity == 1
|
||||
},
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
completenessDetailsRef.value.open(row.id)
|
||||
@@ -129,7 +132,7 @@ const submitupload = () => {
|
||||
ElMessage.warning('请上传文件！')
|
||||
return
|
||||
}
|
||||
ElMessage.info('上传中,请稍等...')
|
||||
ElMessage.info('上传中,请稍等...')
|
||||
const formData = new FormData()
|
||||
formData.append('file', fileList.value[0].raw)
|
||||
loading.value = true
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
|
||||
<TableHeader :showReset="false" ref="TableHeaderRef">
|
||||
<template #select>
|
||||
@@ -13,11 +12,9 @@
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef"></Table>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
@@ -33,15 +30,20 @@ const tableStore = new TableStore({
|
||||
{ title: '数据名', field: 'name' },
|
||||
{ title: '用户名', field: 'userName' },
|
||||
{ title: '测量点局号', field: 'lineNo' },
|
||||
{ title: '日期', field: 'upDataTime' },
|
||||
{ title: '完整性', field: 'integrity' },
|
||||
{ title: '日期', field: 'updateTime' },
|
||||
{
|
||||
title: '完整性(%)',
|
||||
field: 'integrity',
|
||||
formatter: (row: any) => {
|
||||
return Math.floor(row.cellValue * 10000) / 100
|
||||
}
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
setTimeout(() => {
|
||||
tableStore.table.height = mainHeight(0,2).height as any
|
||||
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
||||
|
||||
}, 0)
|
||||
tableStore.table.height = mainHeight(0, 2).height as any
|
||||
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
||||
}, 0)
|
||||
// setTimeout(() => { tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
|
||||
}
|
||||
})
|
||||
@@ -49,17 +51,12 @@ const tableStore = new TableStore({
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
const open = (id: string) => {
|
||||
|
||||
tableStore.table.params.userDataId = id
|
||||
dialogVisible.value = true
|
||||
|
||||
tableStore.index()
|
||||
|
||||
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
<div class="title">
|
||||
贡献度计算
|
||||
<div style="font-size: 14px; font-weight: 500">
|
||||
{{ dotList.alias || '' }}
|
||||
<!-- {{ dotList.alias || '' }} -->
|
||||
<span class="monitoring-point">当前位置：{{ dotList.alias || '' }}</span>
|
||||
<back-component />
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +46,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷数据:">
|
||||
<el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据">
|
||||
<el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
|
||||
<el-option
|
||||
v-for="item in loadDataOptions"
|
||||
:key="item.id"
|
||||
@@ -61,7 +62,7 @@
|
||||
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
|
||||
</el-form-item>
|
||||
</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">
|
||||
<div class="pd10">
|
||||
<div>
|
||||
@@ -75,31 +76,93 @@
|
||||
format="YYYY-MM-DD"
|
||||
date-format="YYYY-MM-DD"
|
||||
time-format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled-date="handleDisabledDate"
|
||||
/>
|
||||
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
|
||||
执行
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.showExecute">
|
||||
<el-form :inline="true" v-model="item.form" class="mt10">
|
||||
<el-form-item label="限值:">
|
||||
<el-input v-model="item.form.limit" placeholder="请输入限值" />
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点一:">
|
||||
<el-input v-model="item.form.time1" placeholder="请输入时间点一" />
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点二:">
|
||||
<el-input v-model="item.form.time2" placeholder="请输入时间点二" />
|
||||
<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>
|
||||
</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 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>
|
||||
</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>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -112,14 +175,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
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 { ElMessage } from 'element-plus'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { getHistoryHarmData } from '@/api/advance-boot/division'
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { timeFormat } from '@/utils/common'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
defineOptions({
|
||||
name: 'division/compute'
|
||||
})
|
||||
@@ -132,23 +198,29 @@ const size = ref(0)
|
||||
const showTabs = ref(false)
|
||||
const loadDataOptions: any = ref([])
|
||||
const form: any = reactive({
|
||||
type: '0',
|
||||
type: '1',
|
||||
index: [],
|
||||
loadData: ''
|
||||
loadDataId: ''
|
||||
})
|
||||
const code = ref(3)
|
||||
const xAxisData = ref([])
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const tabList: any = ref([])
|
||||
const activeName = ref(0)
|
||||
const xValue = ref('')
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.level == 6) {
|
||||
dotList.value = data
|
||||
}
|
||||
}
|
||||
// 设置时间
|
||||
const timeFrame = ref(['', ''])
|
||||
// 处理日期禁用逻辑
|
||||
const handleDisabledDate = date => {
|
||||
// 定义时间边界
|
||||
const startLimit = new Date(tabList.value[0].time[0]).getTime()
|
||||
const endLimit = new Date(tabList.value[0].time[1]).setHours(23, 59, 59, 999)
|
||||
const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
|
||||
const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
|
||||
|
||||
// 如果日期不存在（选择今天时可能出现），不禁用
|
||||
if (!date) return false
|
||||
@@ -156,16 +228,26 @@ const handleDisabledDate = date => {
|
||||
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期
|
||||
return date.getTime() < startLimit || date.getTime() > endLimit
|
||||
}
|
||||
// 这是按钮变色
|
||||
const setCode = (num: number) => {
|
||||
if (code.value == num) {
|
||||
return (code.value = 3)
|
||||
}
|
||||
code.value = num
|
||||
}
|
||||
// 确定
|
||||
const submit = () => {
|
||||
if (form.loadData == '') {
|
||||
if (form.loadDataId == '') {
|
||||
return ElMessage.warning('请选择负荷数据')
|
||||
}
|
||||
if (form.index.length == 0) {
|
||||
return ElMessage.warning('请选择谐波次数')
|
||||
}
|
||||
|
||||
if (form.index.length == 0) {
|
||||
showTabs.value = false
|
||||
} 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
|
||||
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
|
||||
tabList.value = []
|
||||
@@ -179,24 +261,311 @@ const submit = () => {
|
||||
limit: '',
|
||||
time1: '',
|
||||
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
|
||||
}
|
||||
}
|
||||
// 执行
|
||||
const execute = (item: any, index: number) => {
|
||||
getHistoryHarmData({
|
||||
const execute = async (item: any, index: number) => {
|
||||
tabList.value[activeName.value].showDynamic = false
|
||||
loading.value = true
|
||||
await getHistoryHarmData({
|
||||
searchBeginTime: item.time[0],
|
||||
searchEndTime: item.time[1],
|
||||
type: form.type,
|
||||
time: item.key,
|
||||
// userDataId:form.loadData,
|
||||
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(() => {
|
||||
@@ -229,4 +598,32 @@ onMounted(() => {
|
||||
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>
|
||||
|
||||
@@ -1,53 +1,175 @@
|
||||
<!-- 详情 -->
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<div class="title">
|
||||
详情
|
||||
<div style="font-size: 14px;font-weight: 500;">
|
||||
{{ query.name || '' }}
|
||||
<back-component />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { displayHistoryData } from '@/api/advance-boot/division';
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { id } from 'element-plus/es/locale';
|
||||
const { query } = useRoute() // 查询参数
|
||||
const dotList: any = ref({})
|
||||
const height = mainHeight(20)
|
||||
|
||||
const tabList: any = ref([])
|
||||
const init = () => {
|
||||
displayHistoryData({
|
||||
id: query.id,
|
||||
time:query.time
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 550;
|
||||
}
|
||||
</style>
|
||||
<!-- 详情 -->
|
||||
<template>
|
||||
<div class="default-main pd10">
|
||||
<div class="title">
|
||||
<!-- <div style="font-size: 14px; font-weight: 500">
|
||||
|
||||
</div> -->
|
||||
<span class="monitoring-point">{{ query.name || '' }}</span>
|
||||
<back-component />
|
||||
</div>
|
||||
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:label="item.name + '次谐波'"
|
||||
:style="height"
|
||||
:name="index"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div style="height: calc(100vh - 250px); overflow-y: auto">
|
||||
<div
|
||||
class="box boxTab mb10"
|
||||
:style="{
|
||||
height: `calc((100vh - 280px) / ${
|
||||
item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
|
||||
})`
|
||||
}"
|
||||
v-for="(value, i) in item.dynamicOptions"
|
||||
:key="i"
|
||||
>
|
||||
<MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
|
||||
<div style="width: 500px">
|
||||
<vxe-table ref="tableRef" :data="item.list[i]" 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>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
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>
|
||||
|
||||
@@ -63,8 +63,6 @@ const tableStore = new TableStore({
|
||||
|
||||
click: row => {
|
||||
console.log("🚀 ~ row:", row)
|
||||
|
||||
// push('/admin/division/detail')
|
||||
push({
|
||||
path: "/admin/division/detail",
|
||||
query: {
|
||||
|
||||
@@ -0,0 +1,493 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader datePicker ref="TableHeaderRef" @selectChange="handleTableHeaderSelectChange">
|
||||
<template #select>
|
||||
|
||||
<el-form-item label="区域">
|
||||
<el-cascader
|
||||
v-bind="$attrs"
|
||||
:options="areOptions"
|
||||
:props="cascaderProps"
|
||||
v-model="selectedArea"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
@change="handleStatisticalTypeChange"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电网标志">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.powerFlag"
|
||||
placeholder="请选择电网标志"
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option label="全部" value="0"></el-option>
|
||||
<el-option label="电网侧" value="1"></el-option>
|
||||
<el-option label="非电网侧" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入变电站/终端/监测点"
|
||||
clearable
|
||||
@input="handleFilterChange"
|
||||
:show-word-limit=true
|
||||
:maxlength="32"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div v-loading="tableStore.table.loading" class="main-container">
|
||||
<vxe-table
|
||||
class="full-height-table"
|
||||
ref="positioningtableRef"
|
||||
auto-resize
|
||||
:data="tableStore.table.data"
|
||||
v-bind="defaultAttribute"
|
||||
:height="tableHeight"
|
||||
resizable
|
||||
show-overflow
|
||||
>
|
||||
<vxe-column title="序号" width="80" type="seq" align="center"></vxe-column>
|
||||
<vxe-column field="gdName" title="供电公司" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150" ></vxe-column>
|
||||
<vxe-column field="devName" title="终端名称" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号" align="center" min-width="150" ></vxe-column>
|
||||
<vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" align="center" min-width="150"></vxe-column>
|
||||
<vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="objName" title="监测对象名称" align="center" min-width="150"></vxe-column>
|
||||
<vxe-column field="interval" title="统计间隔" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率(%)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="integrity" title="完整率(%)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="harmonicValue" :title="harmonicValueTitle" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="upCounts" title="暂升次数(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="downCounts" title="电压暂降(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<!-- 修改分页控件 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page="tableStore.table.params.pageNum"
|
||||
:page-size="tableStore.table.params.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
background
|
||||
layout="sizes, total, prev, pager, next, jumper"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, onBeforeUnmount, computed, reactive, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { debounce } from 'lodash-es'
|
||||
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport'
|
||||
})
|
||||
|
||||
const dictData = useDictData()
|
||||
const options = dictData.getBasicData('Pollution_Calc')
|
||||
const tableHeight = ref(500) // 默认高度
|
||||
const positioningtableRef = ref()
|
||||
// 添加区域选择的响应式变量
|
||||
const selectedArea = ref()
|
||||
const areOptions:any = dictData.state.area
|
||||
const allData = ref<PollutionItem[]>([])
|
||||
const TableHeaderRef = ref()
|
||||
// 添加响应式标题变量
|
||||
const harmonicValueTitle = ref('谐波电压污染值')
|
||||
const searchKeyword = ref('')
|
||||
|
||||
const cascaderProps = {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
}
|
||||
|
||||
// 存储所有数据
|
||||
interface PollutionItem {
|
||||
gdName?: string
|
||||
subStationName?: string
|
||||
devName?: string
|
||||
lineName?: string
|
||||
powerFlag?: string
|
||||
}
|
||||
|
||||
// 格式化一类监测点字段
|
||||
const formatMonitorId = (row: any) => {
|
||||
return row.row.monitorId || '/'
|
||||
}
|
||||
|
||||
// 处理 TableHeader 展开/收起事件
|
||||
const handleTableHeaderSelectChange = (isExpanded: boolean) => {
|
||||
if(isExpanded){
|
||||
tableHeight.value = tableHeight.value - 55
|
||||
}else{
|
||||
tableHeight.value = tableHeight.value + 55
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const calculateTableHeight = () => {
|
||||
const windowHeight = window.innerHeight
|
||||
const headerHeight = 120
|
||||
const paginationHeight = 80 // 增加分页控件高度预留
|
||||
const padding = 30 // 增加padding避免被遮挡
|
||||
const calculatedHeight = windowHeight - headerHeight - paginationHeight - padding
|
||||
tableHeight.value = Math.max(calculatedHeight, 300)
|
||||
}
|
||||
|
||||
// 防抖处理窗口大小变化
|
||||
const debouncedCalculateTableHeight = debounce(() => {
|
||||
calculateTableHeight()
|
||||
}, 300)
|
||||
|
||||
// 计算过滤后的数据
|
||||
const filteredData = computed(() => {
|
||||
let result = [...allData.value]
|
||||
|
||||
// 区域过滤
|
||||
if (selectedArea.value) {
|
||||
// 查找匹配的区域名称
|
||||
let areaName = ''
|
||||
let areaLevel = -1
|
||||
const findAreaName = (areas: any[]) => {
|
||||
for (const area of areas) {
|
||||
|
||||
if (area.id === selectedArea.value) {
|
||||
areaName = area.name
|
||||
areaLevel = area.level !== undefined ? area.level : -1
|
||||
break
|
||||
}
|
||||
if (area.children && area.children.length > 0) {
|
||||
findAreaName(area.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
findAreaName(areOptions)
|
||||
|
||||
// 根据区域名称过滤数据，但只有当层级大于1时才过滤
|
||||
if (areaName && areaLevel > 1) {
|
||||
result = result.filter(item => item.gdName && item.gdName.includes(areaName))
|
||||
}
|
||||
}
|
||||
|
||||
// 电网标志过滤
|
||||
if (tableStore.table.params.powerFlag === '1') {
|
||||
// 电网侧
|
||||
result = result.filter(item => item.powerFlag && !item.powerFlag.includes('非'))
|
||||
} else if (tableStore.table.params.powerFlag === '2') {
|
||||
// 非电网侧
|
||||
result = result.filter(item => item.powerFlag && item.powerFlag.includes('非'))
|
||||
}
|
||||
// '0' 表示全部，不过滤
|
||||
|
||||
// 统一搜索过滤
|
||||
if (searchKeyword.value) {
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
result = result.filter(item =>
|
||||
(item.subStationName && item.subStationName.toLowerCase().includes(keyword)) ||
|
||||
(item.devName && item.devName.toLowerCase().includes(keyword)) ||
|
||||
(item.lineName && item.lineName.toLowerCase().includes(keyword))
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
// 计算当前页数据
|
||||
const currentPageData = computed(() => {
|
||||
const pageSize = tableStore.table.params.pageSize
|
||||
const pageNum = tableStore.table.params.pageNum
|
||||
const start = (pageNum - 1) * pageSize
|
||||
const end = start + pageSize
|
||||
return filteredData.value.slice(start, end)
|
||||
})
|
||||
|
||||
// 更新总条数
|
||||
const updateTotal = computed(() => {
|
||||
return filteredData.value.length
|
||||
})
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/PollutionSubstation/downPollutionLineCalc',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
//delete tableStore.table.params.statisticalType
|
||||
delete tableStore.table.params.deptIndex
|
||||
delete tableStore.table.params.interval
|
||||
delete tableStore.table.params.searchEndTime
|
||||
delete tableStore.table.params.searchBeginTime
|
||||
delete tableStore.table.params.timeFlag
|
||||
},
|
||||
loadCallback: () => {
|
||||
// 将所有数据存储到 allData 中
|
||||
allData.value = tableStore.table.data || []
|
||||
// 更新总条数
|
||||
tableStore.table.total = updateTotal.value
|
||||
// 更新当前页数据
|
||||
tableStore.table.data = currentPageData.value
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 监听区域选项变化，设置默认值
|
||||
watch(
|
||||
() => areOptions,
|
||||
(newOptions) => {
|
||||
if (newOptions && newOptions.length > 0) {
|
||||
// 设置默认选中第一项
|
||||
selectedArea.value = newOptions[0].id
|
||||
tableStore.table.params.id = newOptions[0].id
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 初始化统计类型
|
||||
watch(
|
||||
() => options,
|
||||
(newOptions) => {
|
||||
if (newOptions && newOptions.length > 0) {
|
||||
// 检查是否已经设置了统计类型
|
||||
if (!tableStore.table.params.statisticalType) {
|
||||
tableStore.table.params.statisticalType = newOptions[0]
|
||||
tableStore.table.params.ids = [newOptions[0].id]
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
|
||||
tableStore.table.params.powerFlag = "0"
|
||||
tableStore.table.params.isUpToGrid = 0
|
||||
tableStore.table.params.type = 1
|
||||
|
||||
// 监听统计类型变化，同步更新ids
|
||||
const handleStatisticalTypeChange = (newVal: { id: any }) => {
|
||||
console.log("统计类型变化", newVal)
|
||||
if (newVal) {
|
||||
tableStore.table.params.ids = [newVal.id]
|
||||
// 根据统计类型动态更新标题
|
||||
if (newVal.name) {
|
||||
harmonicValueTitle.value = newVal.name + '污染值'
|
||||
}
|
||||
}
|
||||
// 重新调用接口
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
// 处理过滤条件变化
|
||||
const handleFilterChange = () => {
|
||||
// 重置分页到第一页
|
||||
tableStore.table.params.pageNum = 1
|
||||
// 更新数据和总条数
|
||||
tableStore.table.data = currentPageData.value
|
||||
tableStore.table.total = updateTotal.value
|
||||
}
|
||||
|
||||
// 分页事件处理
|
||||
const handleSizeChange = (val: number) => {
|
||||
tableStore.table.params.pageSize = val
|
||||
tableStore.table.params.pageNum = 1
|
||||
tableStore.table.data = currentPageData.value
|
||||
tableStore.table.total = updateTotal.value
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
tableStore.table.params.pageNum = val
|
||||
tableStore.table.data = currentPageData.value
|
||||
tableStore.table.total = updateTotal.value
|
||||
}
|
||||
|
||||
// 导出
|
||||
const exportEvent = () => {
|
||||
// 获取当前过滤后的所有数据
|
||||
const allFilteredData = filteredData.value;
|
||||
|
||||
// 使用 vxe-table 的导出功能
|
||||
positioningtableRef.value.exportData({
|
||||
filename: '污染值报告',
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx',
|
||||
useStyle: true,
|
||||
data: allFilteredData,
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
|
||||
|
||||
calculateTableHeight()
|
||||
window.addEventListener('resize', debouncedCalculateTableHeight)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', debouncedCalculateTableHeight)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.default-main {
|
||||
height: calc(100vh - 20px); /* 减去一些边距避免被任务栏遮挡 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.full-height-table {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep .vxe-table {
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep .vxe-table--body-wrapper {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex: 0 0 auto; /* 不伸缩，保持固定高度 */
|
||||
display: flex;
|
||||
justify-content: center; /* 居中对齐 */
|
||||
align-items: center;
|
||||
min-height: 60px;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ebeef5;
|
||||
z-index: 100; /* 提高层级确保可见 */
|
||||
position: relative; /* 确保定位上下文 */
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep .el-pagination {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.el-pagination__sizes {
|
||||
.el-select {
|
||||
min-width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
margin-right: auto; /* 关键：将总共条数推到左侧 */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 将除了 sizes 和 total 之外的所有元素都推到最右边 */
|
||||
.btn-prev,
|
||||
.btn-pager,
|
||||
.btn-next,
|
||||
.el-pagination__jump {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-prev {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-pagination__editor {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式处理 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.pagination-container {
|
||||
padding: 8px 10px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
:deep .el-pagination {
|
||||
.el-pagination__sizes {
|
||||
.el-select {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
:deep .el-pagination {
|
||||
.el-pagination__sizes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-pager {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,202 +1,211 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||
<el-option
|
||||
v-for="item in searchTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options1" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: []
|
||||
})
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
id: monitoringPoint.state.lineId,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
periodBeginTime: '',
|
||||
periodEndTime: ''
|
||||
})
|
||||
const searchType = ref('')
|
||||
const searchTypeOptions = [
|
||||
{
|
||||
label: '同比',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '环比',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const options1 = ref({})
|
||||
const options2 = ref({})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
if (searchType.value == '1') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else if (searchType.value == '2') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else {
|
||||
formData.periodBeginTime = ''
|
||||
formData.periodEndTime = ''
|
||||
}
|
||||
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
||||
.then((res: any) => {
|
||||
handlerOptions1(res[0].data)
|
||||
handlerOptions2(res[1].data)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const handlerOptions1 = (data: any) => {
|
||||
options1.value = {
|
||||
title: {
|
||||
text: '运行状态'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var res = params[0].data[0] + '<br/>终端运行状态为：'
|
||||
var texts = ''
|
||||
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
||||
texts = '退出'
|
||||
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
||||
texts = '中断'
|
||||
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||
texts = '正常'
|
||||
}
|
||||
res = res + texts
|
||||
return res
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
// data: data.updateTime
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value: number) {
|
||||
var texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中断运行状态',
|
||||
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
|
||||
type: 'line',
|
||||
step: 'end'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const handlerOptions2 = (data: any) => {
|
||||
options2.value = {
|
||||
title: {
|
||||
text: '在线率和完整性'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: formData.periodBeginTime
|
||||
? [
|
||||
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
||||
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
||||
]
|
||||
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
data: data.onlineRateData,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '完整性',
|
||||
data: data.integrityData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style></style>
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||
<el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options1" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: []
|
||||
})
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
id: monitoringPoint.state.lineId,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
periodBeginTime: '',
|
||||
periodEndTime: ''
|
||||
})
|
||||
const searchType = ref('')
|
||||
const searchTypeOptions = [
|
||||
{
|
||||
label: '同比',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '环比',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const options1 = ref({})
|
||||
const options2 = ref({})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
if (searchType.value == '1') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else if (searchType.value == '2') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else {
|
||||
formData.periodBeginTime = ''
|
||||
formData.periodEndTime = ''
|
||||
}
|
||||
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
||||
.then((res: any) => {
|
||||
handlerOptions1(res[0].data)
|
||||
handlerOptions2(res[1].data)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const handlerOptions1 = (data: any) => {
|
||||
options1.value = {
|
||||
title: {
|
||||
text: '运行状态'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var res = params[0].data[0] + '<br/>终端运行状态为：'
|
||||
var texts = ''
|
||||
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
||||
texts = '退出'
|
||||
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
||||
texts = '中断'
|
||||
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||
texts = '正常'
|
||||
}
|
||||
res = res + texts
|
||||
return res
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
// data: data.updateTime
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value: number) {
|
||||
var texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中断运行状态',
|
||||
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
|
||||
type: 'line',
|
||||
step: 'end'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const handlerOptions2 = (data: any) => {
|
||||
let title = ''
|
||||
if (data.integrityData.some((item: any) => item > 100)) {
|
||||
title = '数据存在异常，已进行转换处理'
|
||||
data.integrityData = data.integrityData.map(item => {
|
||||
return item > 100 ? 100 : item;
|
||||
});
|
||||
}
|
||||
|
||||
options2.value = {
|
||||
title: {
|
||||
text: '在线率和完整性',
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: 'red' // 设置副标题颜色为红色
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: formData.periodBeginTime
|
||||
? [
|
||||
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
||||
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
||||
]
|
||||
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
data: data.onlineRateData,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '完整性',
|
||||
data: data.integrityData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -116,6 +116,7 @@
|
||||
|
||||
<el-input-number
|
||||
v-else-if="item.field == 'powerFactor'"
|
||||
style="width: 100%"
|
||||
v-model="form[item.field]"
|
||||
:min="0.1"
|
||||
:max="0.9"
|
||||
@@ -123,15 +124,22 @@
|
||||
:precision="1"
|
||||
placeholder="请输入功率因数"
|
||||
/>
|
||||
|
||||
<el-input-number
|
||||
|
||||
v-else-if="item.field == 'flickerCoeff' || item.field == 's'"
|
||||
style="width: 100%"
|
||||
v-model="form[item.field]"
|
||||
show-word-limit
|
||||
:min="0"
|
||||
:max="99"
|
||||
placeholder="请输入值"
|
||||
/>
|
||||
<el-input-number
|
||||
v-else-if="
|
||||
item.field == 'transNum' ||
|
||||
item.field == 'capacitorNum' ||
|
||||
item.field == 'capacitorCapacity' ||
|
||||
item.field == 'capacitorReactance' ||
|
||||
item.field == 'flickerCoeff' ||
|
||||
item.field == 's'||
|
||||
item.field == 'transhighCapacity'||
|
||||
item.field == 'transImpedance'||
|
||||
item.field == 'nonlinearloadPower' ||
|
||||
@@ -142,6 +150,7 @@
|
||||
v-model="form[item.field]"
|
||||
show-word-limit
|
||||
:min="1"
|
||||
:max="9999"
|
||||
placeholder="请输入值"
|
||||
></el-input-number>
|
||||
|
||||
|
||||
@@ -1,267 +1,267 @@
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div style='height: 100%; overflow: hidden'>
|
||||
<div class='switch-tab'>
|
||||
<el-radio-group v-model='radio' size='small'>
|
||||
<el-radio-button value='三维图'>三维图</el-radio-button>
|
||||
<el-radio-button value='表格'>表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<Table ref='tableRef' height='auto' isGroup />
|
||||
<SecondSheet v-if="radio === '三维图'">
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</SecondSheet>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { ref, provide } from 'vue'
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
|
||||
const radio = ref('三维图')
|
||||
const options = ref()
|
||||
const apiData = ref()
|
||||
const tableStore3D = new TableStore({
|
||||
showPage: false,
|
||||
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||
url: '/advance-boot/sgEvent/3DList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '电压暂降频次统计表',
|
||||
children: [
|
||||
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
||||
{
|
||||
title: '持续时间(s)',
|
||||
field: 'loginName',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
const eventCount = tableStore3D.table.data.values
|
||||
tableStore3D.table.data = {
|
||||
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
|
||||
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
|
||||
values: [
|
||||
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
|
||||
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
|
||||
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
|
||||
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
|
||||
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
|
||||
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
|
||||
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
|
||||
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
|
||||
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
||||
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
|
||||
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
|
||||
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
|
||||
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
|
||||
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
||||
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
|
||||
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
|
||||
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
|
||||
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
|
||||
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
||||
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
|
||||
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
|
||||
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
|
||||
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
|
||||
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
||||
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
|
||||
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
|
||||
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
|
||||
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
|
||||
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
||||
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
||||
],
|
||||
table: {
|
||||
total: 6,
|
||||
rows: [
|
||||
{
|
||||
amplitude: '0.8~0.9',
|
||||
d001_002s: eventCount[0][2],
|
||||
d002_005s: eventCount[1][2],
|
||||
d005_007s: eventCount[2][2],
|
||||
d007_010s: eventCount[3][2],
|
||||
d010_100s: eventCount[4][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.7~0.8',
|
||||
d001_002s: eventCount[5][2],
|
||||
d002_005s: eventCount[6][2],
|
||||
d005_007s: eventCount[7][2],
|
||||
d007_010s: eventCount[8][2],
|
||||
d010_100s: eventCount[9][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.6~0.7',
|
||||
d001_002s: eventCount[10][2],
|
||||
d002_005s: eventCount[11][2],
|
||||
d005_007s: eventCount[12][2],
|
||||
d007_010s: eventCount[13][2],
|
||||
d010_100s: eventCount[14][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.5~0.6',
|
||||
d001_002s: eventCount[15][2],
|
||||
d002_005s: eventCount[16][2],
|
||||
d005_007s: eventCount[17][2],
|
||||
d007_010s: eventCount[18][2],
|
||||
d010_100s: eventCount[19][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.4~0.5',
|
||||
d001_002s: eventCount[20][2],
|
||||
d002_005s: eventCount[21][2],
|
||||
d005_007s: eventCount[22][2],
|
||||
d007_010s: eventCount[23][2],
|
||||
d010_100s: eventCount[24][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.1~0.4',
|
||||
d001_002s: eventCount[25][2],
|
||||
d002_005s: eventCount[26][2],
|
||||
d005_007s: eventCount[27][2],
|
||||
d007_010s: eventCount[28][2],
|
||||
d010_100s: eventCount[29][2]
|
||||
}
|
||||
],
|
||||
code: 200,
|
||||
msg: '查询成功'
|
||||
}
|
||||
}
|
||||
apiData.value = tableStore3D.table.data
|
||||
tableStore3D.table.column![0].children![1].children = []
|
||||
tableStore3D.table.column![0].children![1].children!.push(
|
||||
...(apiData.value.durations.map((item: string) => {
|
||||
return {
|
||||
title: item,
|
||||
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
||||
}
|
||||
}) as any[])
|
||||
)
|
||||
tableStore3D.table.data = apiData.value.table.rows
|
||||
initEchart()
|
||||
}
|
||||
})
|
||||
// 注入到子组件
|
||||
provide('tableStore3D', tableStore3D)
|
||||
|
||||
const initEchart = () => {
|
||||
options.value = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
let tips = ''
|
||||
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
|
||||
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
|
||||
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
xAxis3D: {
|
||||
name: '暂降幅值(p.u.)',
|
||||
type: 'category',
|
||||
data: apiData.value.amplitudes
|
||||
},
|
||||
yAxis3D: {
|
||||
name: '持续时间(s)',
|
||||
type: 'category',
|
||||
data: apiData.value.durations
|
||||
},
|
||||
zAxis3D: {
|
||||
name: '次数',
|
||||
type: 'value'
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2,
|
||||
shadow: true
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: apiData.value.values.map((item: [string, string, string]) => {
|
||||
return [
|
||||
apiData.value.amplitudes.indexOf(item[0]),
|
||||
apiData.value.durations.indexOf(item[1]),
|
||||
item[2]
|
||||
]
|
||||
}),
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
const search = (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore3D获取参数
|
||||
tableStore3D.table.params.searchBeginTime = beginTime
|
||||
tableStore3D.table.params.searchEndTime = endTime
|
||||
tableStore3D.table.params.userId = id
|
||||
tableStore3D.index()
|
||||
}
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.switch-tab {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 4px;
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div style='height: 100%; overflow: hidden' >
|
||||
<div class='switch-tab'>
|
||||
<el-radio-group v-model='radio' >
|
||||
<el-radio-button value='三维图'>三维图</el-radio-button>
|
||||
<el-radio-button value='表格'>表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<Table ref='tableRef' isGroup />
|
||||
<SecondSheet v-if="radio === '三维图'">
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</SecondSheet>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { ref, provide } from 'vue'
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
|
||||
const radio = ref('三维图')
|
||||
const options = ref()
|
||||
const apiData = ref()
|
||||
const tableStore3D = new TableStore({
|
||||
showPage: false,
|
||||
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||
url: '/advance-boot/sgEvent/3DList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '电压暂降频次统计表',
|
||||
children: [
|
||||
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
||||
{
|
||||
title: '持续时间(s)',
|
||||
field: 'loginName',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
const eventCount = tableStore3D.table.data.values
|
||||
tableStore3D.table.data = {
|
||||
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
|
||||
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
|
||||
values: [
|
||||
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
|
||||
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
|
||||
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
|
||||
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
|
||||
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
|
||||
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
|
||||
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
|
||||
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
|
||||
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
||||
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
|
||||
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
|
||||
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
|
||||
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
|
||||
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
||||
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
|
||||
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
|
||||
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
|
||||
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
|
||||
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
||||
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
|
||||
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
|
||||
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
|
||||
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
|
||||
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
||||
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
|
||||
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
|
||||
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
|
||||
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
|
||||
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
||||
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
||||
],
|
||||
table: {
|
||||
total: 6,
|
||||
rows: [
|
||||
{
|
||||
amplitude: '0.8~0.9',
|
||||
d001_002s: eventCount[0][2],
|
||||
d002_005s: eventCount[1][2],
|
||||
d005_007s: eventCount[2][2],
|
||||
d007_010s: eventCount[3][2],
|
||||
d010_100s: eventCount[4][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.7~0.8',
|
||||
d001_002s: eventCount[5][2],
|
||||
d002_005s: eventCount[6][2],
|
||||
d005_007s: eventCount[7][2],
|
||||
d007_010s: eventCount[8][2],
|
||||
d010_100s: eventCount[9][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.6~0.7',
|
||||
d001_002s: eventCount[10][2],
|
||||
d002_005s: eventCount[11][2],
|
||||
d005_007s: eventCount[12][2],
|
||||
d007_010s: eventCount[13][2],
|
||||
d010_100s: eventCount[14][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.5~0.6',
|
||||
d001_002s: eventCount[15][2],
|
||||
d002_005s: eventCount[16][2],
|
||||
d005_007s: eventCount[17][2],
|
||||
d007_010s: eventCount[18][2],
|
||||
d010_100s: eventCount[19][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.4~0.5',
|
||||
d001_002s: eventCount[20][2],
|
||||
d002_005s: eventCount[21][2],
|
||||
d005_007s: eventCount[22][2],
|
||||
d007_010s: eventCount[23][2],
|
||||
d010_100s: eventCount[24][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.1~0.4',
|
||||
d001_002s: eventCount[25][2],
|
||||
d002_005s: eventCount[26][2],
|
||||
d005_007s: eventCount[27][2],
|
||||
d007_010s: eventCount[28][2],
|
||||
d010_100s: eventCount[29][2]
|
||||
}
|
||||
],
|
||||
code: 200,
|
||||
msg: '查询成功'
|
||||
}
|
||||
}
|
||||
apiData.value = tableStore3D.table.data
|
||||
tableStore3D.table.column![0].children![1].children = []
|
||||
tableStore3D.table.column![0].children![1].children!.push(
|
||||
...(apiData.value.durations.map((item: string) => {
|
||||
return {
|
||||
title: item,
|
||||
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
||||
}
|
||||
}) as any[])
|
||||
)
|
||||
tableStore3D.table.data = apiData.value.table.rows
|
||||
initEchart()
|
||||
}
|
||||
})
|
||||
// 注入到子组件
|
||||
provide('tableStore3D', tableStore3D)
|
||||
|
||||
const initEchart = () => {
|
||||
options.value = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
let tips = ''
|
||||
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
|
||||
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
|
||||
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
xAxis3D: {
|
||||
name: '暂降幅值(p.u.)',
|
||||
type: 'category',
|
||||
data: apiData.value.amplitudes
|
||||
},
|
||||
yAxis3D: {
|
||||
name: '持续时间(s)',
|
||||
type: 'category',
|
||||
data: apiData.value.durations
|
||||
},
|
||||
zAxis3D: {
|
||||
name: '次数',
|
||||
type: 'value'
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2,
|
||||
shadow: true
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: apiData.value.values.map((item: [string, string, string]) => {
|
||||
return [
|
||||
apiData.value.amplitudes.indexOf(item[0]),
|
||||
apiData.value.durations.indexOf(item[1]),
|
||||
item[2]
|
||||
]
|
||||
}),
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
const search = (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore3D获取参数
|
||||
tableStore3D.table.params.searchBeginTime = beginTime
|
||||
tableStore3D.table.params.searchEndTime = endTime
|
||||
tableStore3D.table.params.userId = id
|
||||
tableStore3D.index()
|
||||
}
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.switch-tab {
|
||||
position: absolute;
|
||||
right: 345px;
|
||||
top: -37px;
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,343 +1,343 @@
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div class='tolerance-curve'>
|
||||
<el-form label-width='auto' :inline='true'>
|
||||
<el-form-item label='生产线'>
|
||||
<el-select v-model='form.productLineId'>
|
||||
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
||||
:value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='终端'>
|
||||
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
||||
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='敏感元器件'>
|
||||
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
|
||||
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='display: flex; flex: 1'>
|
||||
<el-form label-width='auto' label-position='top'>
|
||||
<!-- <el-form-item label='耐受曲线'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label='上限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='下限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1' class='ml10'>
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
||||
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
||||
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
||||
|
||||
|
||||
const searchBeginTime = ref()
|
||||
const searchEndTime = ref()
|
||||
const userId = ref()
|
||||
|
||||
const form = reactive({
|
||||
num: 1,
|
||||
productLineId: '',
|
||||
machineId: '',
|
||||
unitId: ''
|
||||
})
|
||||
const productLineOptions = ref()
|
||||
const machineOptions = ref()
|
||||
const unitOptions = ref()
|
||||
const unit = ref({
|
||||
'vtcTimeUpper': 0,
|
||||
'vtcAmpUpper': 0,
|
||||
'vtcTimeLower': 0,
|
||||
'vtcAmpLower': 0
|
||||
})
|
||||
const overEvent = ref([])
|
||||
const unOverEvent = ref([])
|
||||
const unKnownEvent = ref([])
|
||||
const overEventColor = ref('#A52a2a')
|
||||
const unOverEventColor = ref('#61a0a8')
|
||||
const unKnownEventColor = ref('#d48265')
|
||||
const eventData = ref()
|
||||
const search = async (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore获取参数
|
||||
searchBeginTime.value = beginTime
|
||||
searchEndTime.value = endTime
|
||||
userId.value = id
|
||||
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
|
||||
await querySgProductLineByUserId(id).then((res: any) => {
|
||||
productLineOptions.value = res.data
|
||||
form.productLineId = productLineOptions.value[0].id
|
||||
})
|
||||
|
||||
//根据生产线获取终端数据
|
||||
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
||||
machineOptions.value = res.data
|
||||
if (machineOptions.value.length > 0) {
|
||||
form.machineId = machineOptions.value[0].id
|
||||
}
|
||||
})
|
||||
|
||||
//根据终端获取元器件数据
|
||||
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
||||
unitOptions.value = res.data
|
||||
if (unitOptions.value.length > 0) {
|
||||
form.unitId = unitOptions.value[0].id
|
||||
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const data = {
|
||||
searchBeginTime: beginTime,
|
||||
searchEndTime: endTime,
|
||||
productId: form.productLineId
|
||||
}
|
||||
|
||||
await getEventDataByProductLineId(data).then((res: any) => {
|
||||
eventData.value = res.data
|
||||
reDrawPic()
|
||||
})
|
||||
|
||||
}
|
||||
const changeUnit = (id: any) => {
|
||||
if (id == undefined) return
|
||||
let list = unitOptions.value.filter((item: any) => item.id == id)
|
||||
unit.value = JSON.parse(JSON.stringify(list[0]))
|
||||
reDrawPic()
|
||||
|
||||
}
|
||||
|
||||
const options = ref()
|
||||
const initOptions = () => {
|
||||
options.value = {
|
||||
legend: {
|
||||
data: ['越限事件', '未越限事件', '不确定事件'],
|
||||
left: '10px'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[3] == undefined) {
|
||||
return
|
||||
}
|
||||
let relVal = ''
|
||||
relVal += '<font style=\'color:' + '\'>进线:' + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>发生时刻:' + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>持续时间:' + ' ' + ' ' + a[0].value[0].toFixed(2) + 's</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>特征幅值:' + ' ' + ' ' + a[0].value[1] + 'p.u.</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '持续时间/s',
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
name: '幅值/p.u.',
|
||||
max: 1,
|
||||
min: 0,
|
||||
splitLine: { show: false }
|
||||
},
|
||||
grid: {
|
||||
right: '78px',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeUpper / 1000, 0],
|
||||
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
||||
[1000, unit.value.vtcAmpUpper]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeLower / 1000, 0],
|
||||
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
||||
[1000, unit.value.vtcAmpLower]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: overEvent.value
|
||||
},
|
||||
{
|
||||
name: '未越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unOverEvent.value
|
||||
},
|
||||
{
|
||||
name: '不确定事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unKnownEvent.value
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reDrawPic = () => {
|
||||
//清洗要显示的数据
|
||||
if (eventData.value.length > 0) {
|
||||
unOverEvent.value = []
|
||||
overEvent.value = []
|
||||
unKnownEvent.value = []
|
||||
for (let event of eventData.value) {
|
||||
//判断落在哪个区域内
|
||||
let eventTime = Number(event.duration) / 1000
|
||||
let eventAmplitude = Number(event.featureAmplitude)
|
||||
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
||||
//未越限
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unOverEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unOverEvent.value.push(dataTemp)
|
||||
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
||||
//故障阶段
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: overEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
overEvent.value.push(dataTemp)
|
||||
} else {
|
||||
//不确定事件
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unKnownEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unKnownEvent.value.push(dataTemp)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
//初始化图表
|
||||
initOptions()
|
||||
}
|
||||
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.tolerance-curve {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.el-form-item__label-wrap {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
width: 185px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div class='tolerance-curve'>
|
||||
<el-form label-width='auto' :inline='true'>
|
||||
<el-form-item label='生产线'>
|
||||
<el-select v-model='form.productLineId'>
|
||||
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
||||
:value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='终端'>
|
||||
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
||||
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='敏感元器件'>
|
||||
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
|
||||
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='display: flex; flex: 1'>
|
||||
<el-form label-width='auto' label-position='top'>
|
||||
<!-- <el-form-item label='耐受曲线'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label='上限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='下限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1' class='ml10'>
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
||||
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
||||
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
||||
|
||||
|
||||
const searchBeginTime = ref()
|
||||
const searchEndTime = ref()
|
||||
const userId = ref()
|
||||
|
||||
const form = reactive({
|
||||
num: 1,
|
||||
productLineId: '',
|
||||
machineId: '',
|
||||
unitId: ''
|
||||
})
|
||||
const productLineOptions = ref()
|
||||
const machineOptions = ref()
|
||||
const unitOptions = ref()
|
||||
const unit = ref({
|
||||
'vtcTimeUpper': 0,
|
||||
'vtcAmpUpper': 0,
|
||||
'vtcTimeLower': 0,
|
||||
'vtcAmpLower': 0
|
||||
})
|
||||
const overEvent = ref([])
|
||||
const unOverEvent = ref([])
|
||||
const unKnownEvent = ref([])
|
||||
const overEventColor = ref('#A52a2a')
|
||||
const unOverEventColor = ref('#61a0a8')
|
||||
const unKnownEventColor = ref('#d48265')
|
||||
const eventData = ref()
|
||||
const search = async (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore获取参数
|
||||
searchBeginTime.value = beginTime
|
||||
searchEndTime.value = endTime
|
||||
userId.value = id
|
||||
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
|
||||
await querySgProductLineByUserId(id).then((res: any) => {
|
||||
productLineOptions.value = res.data
|
||||
form.productLineId = productLineOptions.value[0].id
|
||||
})
|
||||
|
||||
//根据生产线获取终端数据
|
||||
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
||||
machineOptions.value = res.data
|
||||
if (machineOptions.value.length > 0) {
|
||||
form.machineId = machineOptions.value[0].id
|
||||
}
|
||||
})
|
||||
|
||||
//根据终端获取元器件数据
|
||||
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
||||
unitOptions.value = res.data
|
||||
if (unitOptions.value.length > 0) {
|
||||
form.unitId = unitOptions.value[0].id
|
||||
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const data = {
|
||||
searchBeginTime: beginTime,
|
||||
searchEndTime: endTime,
|
||||
productId: form.productLineId
|
||||
}
|
||||
|
||||
await getEventDataByProductLineId(data).then((res: any) => {
|
||||
eventData.value = res.data
|
||||
reDrawPic()
|
||||
})
|
||||
|
||||
}
|
||||
const changeUnit = (id: any) => {
|
||||
if (id == undefined) return
|
||||
let list = unitOptions.value.filter((item: any) => item.id == id)
|
||||
unit.value = JSON.parse(JSON.stringify(list[0]))
|
||||
reDrawPic()
|
||||
|
||||
}
|
||||
|
||||
const options = ref()
|
||||
const initOptions = () => {
|
||||
options.value = {
|
||||
legend: {
|
||||
data: ['越限事件', '未越限事件', '不确定事件'],
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[3] == undefined) {
|
||||
return
|
||||
}
|
||||
let relVal = ''
|
||||
relVal += '<font style=\'color:' + '\'>进线:' + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>发生时刻:' + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>持续时间:' + ' ' + ' ' + a[0].value[0].toFixed(2) + 's</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>特征幅值:' + ' ' + ' ' + a[0].value[1] + 'p.u.</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '持续时间/s',
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
name: '幅值/p.u.',
|
||||
max: 1,
|
||||
min: 0,
|
||||
splitLine: { show: false }
|
||||
},
|
||||
grid: {
|
||||
right: '78px',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeUpper / 1000, 0],
|
||||
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
||||
[1000, unit.value.vtcAmpUpper]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeLower / 1000, 0],
|
||||
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
||||
[1000, unit.value.vtcAmpLower]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: overEvent.value
|
||||
},
|
||||
{
|
||||
name: '未越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unOverEvent.value
|
||||
},
|
||||
{
|
||||
name: '不确定事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unKnownEvent.value
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reDrawPic = () => {
|
||||
//清洗要显示的数据
|
||||
if (eventData.value.length > 0) {
|
||||
unOverEvent.value = []
|
||||
overEvent.value = []
|
||||
unKnownEvent.value = []
|
||||
for (let event of eventData.value) {
|
||||
//判断落在哪个区域内
|
||||
let eventTime = Number(event.duration) / 1000
|
||||
let eventAmplitude = Number(event.featureAmplitude)
|
||||
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
||||
//未越限
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unOverEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unOverEvent.value.push(dataTemp)
|
||||
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
||||
//故障阶段
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: overEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
overEvent.value.push(dataTemp)
|
||||
} else {
|
||||
//不确定事件
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unKnownEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unKnownEvent.value.push(dataTemp)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
//初始化图表
|
||||
initOptions()
|
||||
}
|
||||
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.tolerance-curve {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.el-form-item__label-wrap {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
width: 185px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,250 +1,252 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
|
||||
<el-tab-pane label="基本信息" name="user">
|
||||
<el-form-item label="用户名" prop="userName" >
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重点用户">
|
||||
<el-select v-model="form.keyUser">
|
||||
<el-option label="重要" value="1" />
|
||||
<el-option label="不重要" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="所在地区" prop="addr">
|
||||
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业照片">
|
||||
<div>
|
||||
<el-image
|
||||
style="width: 200px; height: 200px"
|
||||
:src="userLogo.url"
|
||||
:preview-src-list="[userLogo.url]"
|
||||
v-if="userLogo.url"
|
||||
></el-image>
|
||||
<el-upload
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
accept=".png,.jpg"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="进线" name="incomingLine">
|
||||
<IncomingTable ref="incomingTable"></IncomingTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, reactive, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
||||
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
||||
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
||||
import IncomingTable from './IncomingTable.vue'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const areaRef = ref()
|
||||
const formRef = ref()
|
||||
const tab = ref('user')
|
||||
|
||||
//进线表格子组件
|
||||
const incomingTable = ref()
|
||||
|
||||
const userLogo = reactive({
|
||||
url: '',
|
||||
name: ''
|
||||
})
|
||||
|
||||
const dialogVisibleLogo = ref(false)
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
id: '',
|
||||
userName: '',
|
||||
keyUser: '1',
|
||||
industry: '',
|
||||
addr: [],
|
||||
addrStrOption: '',
|
||||
addrDetail: '',
|
||||
concact: '',
|
||||
remark: '',
|
||||
userLogo: ''
|
||||
})
|
||||
|
||||
//form表单校验规则
|
||||
const rules = {
|
||||
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
||||
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
||||
}
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
tab.value = 'user'
|
||||
title.value = text
|
||||
//默认选中第一个tab
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.addr = data.addr.split('/')
|
||||
form.keyUser = String(data.keyUser)
|
||||
if (form.userLogo) {
|
||||
userLogo.url = fullUrl(form.userLogo)
|
||||
// 图片的name我不知道
|
||||
}
|
||||
//待子组件渲染完毕
|
||||
nextTick(() => {
|
||||
incomingTable.value.getTableData(form.id)
|
||||
})
|
||||
} else {
|
||||
resetForm()
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
userLogo.url = ''
|
||||
form.keyUser = '1'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将联级选择的区域数组转为字符串
|
||||
*/
|
||||
const reValueAddr = () => {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片上传
|
||||
* @param e
|
||||
*/
|
||||
const chooseImage = (e: any) => {
|
||||
uploadFile(e.raw, 'sgGovern/').then(res => {
|
||||
userLogo.name = res.data.name
|
||||
userLogo.url = res.data.url
|
||||
form.userLogo = res.data.name
|
||||
ElMessage.success('新增成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
|
||||
*/
|
||||
const handleRemove = (e: any, userLogo: any) => {
|
||||
form.userLogo = ''
|
||||
userLogo.value = []
|
||||
deleteFile(e.name).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
const handlePictureCardPreview = () => {
|
||||
dialogVisibleLogo.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交用户表单数据
|
||||
*/
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
await updateSgUser(form)
|
||||
ElMessage.success('更新成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
dialogVisible.value = false
|
||||
} else {
|
||||
await addSgUser(form).then(res => {
|
||||
form.id = res.data
|
||||
//查询进线数据，避免一直处于loading状态
|
||||
incomingTable.value.getTableData(form.id)
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
tab.value='incomingLine'
|
||||
dialogVisible.value = true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/************针对tab切换*************/
|
||||
const checkUserId = (tab: any, event: any) => {
|
||||
if (tab == 'user') {
|
||||
return true
|
||||
}
|
||||
if (form.id) {
|
||||
return true
|
||||
} else {
|
||||
ElMessage.error('请先创建用户基础信息！')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload-list__item {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
|
||||
<el-tab-pane label="基本信息" name="user">
|
||||
<el-form-item label="用户名" prop="userName" >
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重点用户">
|
||||
<el-select v-model="form.keyUser">
|
||||
<el-option label="重要" value="1" />
|
||||
<el-option label="不重要" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="所在地区" prop="addr">
|
||||
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业照片">
|
||||
<div>
|
||||
<el-image
|
||||
style="width: 200px; height: 200px"
|
||||
:src="userLogo.url"
|
||||
:preview-src-list="[userLogo.url]"
|
||||
v-if="userLogo.url"
|
||||
></el-image>
|
||||
<el-upload
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
accept=".png,.jpg"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="进线" name="incomingLine">
|
||||
<IncomingTable ref="incomingTable"></IncomingTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, reactive, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
||||
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
||||
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
||||
import IncomingTable from './IncomingTable.vue'
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const areaRef = ref()
|
||||
const formRef = ref()
|
||||
const tab = ref('user')
|
||||
|
||||
//进线表格子组件
|
||||
const incomingTable = ref()
|
||||
|
||||
const userLogo = reactive({
|
||||
url: '',
|
||||
name: ''
|
||||
})
|
||||
|
||||
const dialogVisibleLogo = ref(false)
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
id: '',
|
||||
userName: '',
|
||||
keyUser: '1',
|
||||
industry: '',
|
||||
addr: [],
|
||||
addrStrOption: '',
|
||||
addrDetail: '',
|
||||
concact: '',
|
||||
remark: '',
|
||||
userLogo: ''
|
||||
})
|
||||
|
||||
//form表单校验规则
|
||||
const rules = {
|
||||
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
||||
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
||||
}
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
tab.value = 'user'
|
||||
title.value = text
|
||||
//默认选中第一个tab
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.addr = data.addr.split('/')
|
||||
form.keyUser = String(data.keyUser)
|
||||
if (form.userLogo) {
|
||||
getFileUrl({filePath:form.userLogo}).then(res=>{
|
||||
userLogo.url=res.data
|
||||
})
|
||||
// 图片的name我不知道
|
||||
}
|
||||
//待子组件渲染完毕
|
||||
nextTick(() => {
|
||||
incomingTable.value.getTableData(form.id)
|
||||
})
|
||||
} else {
|
||||
resetForm()
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
userLogo.url = ''
|
||||
form.keyUser = '1'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将联级选择的区域数组转为字符串
|
||||
*/
|
||||
const reValueAddr = () => {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片上传
|
||||
* @param e
|
||||
*/
|
||||
const chooseImage = (e: any) => {
|
||||
uploadFile(e.raw, 'sgGovern/').then(res => {
|
||||
userLogo.name = res.data.name
|
||||
userLogo.url = res.data.url
|
||||
form.userLogo = res.data.name
|
||||
ElMessage.success('新增成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
|
||||
*/
|
||||
const handleRemove = (e: any, userLogo: any) => {
|
||||
form.userLogo = ''
|
||||
userLogo.value = []
|
||||
deleteFile(e.name).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
const handlePictureCardPreview = () => {
|
||||
dialogVisibleLogo.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交用户表单数据
|
||||
*/
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
await updateSgUser(form)
|
||||
ElMessage.success('更新成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
dialogVisible.value = false
|
||||
} else {
|
||||
await addSgUser(form).then(res => {
|
||||
form.id = res.data
|
||||
//查询进线数据，避免一直处于loading状态
|
||||
incomingTable.value.getTableData(form.id)
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
tab.value='incomingLine'
|
||||
dialogVisible.value = true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/************针对tab切换*************/
|
||||
const checkUserId = (tab: any, event: any) => {
|
||||
if (tab == 'user') {
|
||||
return true
|
||||
}
|
||||
if (form.id) {
|
||||
return true
|
||||
} else {
|
||||
ElMessage.error('请先创建用户基础信息！')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload-list__item {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,115 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">接口权限列表</div>
|
||||
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入菜单名称"
|
||||
class="ml10" clearable @input="search" />
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupApi from './popupApi.vue'
|
||||
import { deleteMenu } from '@/api/user-boot/function'
|
||||
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/api'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const apiList = ref([])
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/getButtonById',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{ title: '普通接口/接口名称', field: 'name', },
|
||||
{
|
||||
title: '接口类型', field: 'type', formatter: row => {
|
||||
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
||||
}
|
||||
},
|
||||
{ title: 'URL接口路径', field: 'path' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑接口权限', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteMenu(row.id).then(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
apiList.value = tableStore.table.data
|
||||
search()
|
||||
}
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
tableStore.table.params.id = props.id
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增接口权限', {
|
||||
pid: props.id
|
||||
})
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = apiList.value.filter(
|
||||
(item: any) =>
|
||||
!tableStore.table.params.searchValue ||
|
||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||
)
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">接口权限列表</div>
|
||||
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入关键字"
|
||||
class="ml10" clearable @input="search" />
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupApi from './popupApi.vue'
|
||||
import { deleteMenu } from '@/api/user-boot/function'
|
||||
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/api'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const apiList = ref([])
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/getButtonById',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{ title: '普通接口/接口名称', field: 'name', },
|
||||
{
|
||||
title: '接口类型', field: 'type', formatter: row => {
|
||||
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
||||
}
|
||||
},
|
||||
{ title: 'URL接口路径', field: 'path' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑接口权限', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteMenu(row.id).then(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
apiList.value = tableStore.table.data
|
||||
search()
|
||||
}
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
tableStore.table.params.id = props.id
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增接口权限', {
|
||||
pid: props.id
|
||||
})
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = apiList.value.filter(
|
||||
(item: any) =>
|
||||
!tableStore.table.params.searchValue ||
|
||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||
)
|
||||
}
|
||||
</script>
|
||||
@@ -1,84 +1,84 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
remark: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
form.name = val.replace(/\s+/g, '')
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
remark: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
form.name = val.replace(/\s+/g, '')
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
110
vite.config.ts
110
vite.config.ts
@@ -1,54 +1,56 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import { svgBuilder } from '/@/components/icon/svg/index'
|
||||
|
||||
import path from 'path'
|
||||
|
||||
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
svgBuilder('./src/assets/icons/'),
|
||||
vueJsx(),
|
||||
AutoImport({
|
||||
//自动引入
|
||||
imports: ['vue', 'vue-router', 'pinia']
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
||||
// target: 'http://10.118.135.128:10215', ///hsw
|
||||
target: 'http://192.168.1.29:10215', ///hsw
|
||||
// target: 'http://10.119.65.152:10215', //数据中心
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
|
||||
},
|
||||
'/api-docx': {
|
||||
// 文件服务器地址
|
||||
target: 'http://192.168.1.22:9009',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api-docx/, '')
|
||||
},
|
||||
'/map': {
|
||||
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
||||
target: 'http://192.168.1.125:9009', //hsw
|
||||
// target: 'http://192.168.1.125:8088', //数据中心
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'/@': nodeResolve('.src'),
|
||||
'@': nodeResolve('src'),
|
||||
'~': nodeResolve('public')
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import { svgBuilder } from '/@/components/icon/svg/index'
|
||||
|
||||
import path from 'path'
|
||||
|
||||
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
svgBuilder('./src/assets/icons/'),
|
||||
vueJsx(),
|
||||
AutoImport({
|
||||
//自动引入
|
||||
imports: ['vue', 'vue-router', 'pinia']
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
||||
// target: 'http://10.118.135.128:10215', ///hsw
|
||||
target: 'http://192.168.1.67:10215', ///hsw
|
||||
// target: 'http://192.168.1.68:10215', ///hsw
|
||||
// target: 'http://10.119.65.152:10215', //数据中心
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
|
||||
},
|
||||
'/api-docx': {
|
||||
// 文件服务器地址
|
||||
target: 'http://192.168.1.68:9009',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api-docx/, '')
|
||||
},
|
||||
'/map': {
|
||||
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
||||
target: 'http://192.168.1.125:9009', //hsw
|
||||
// target: 'http://192.168.1.125:8088', //数据中心
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'/@': nodeResolve('.src'),
|
||||
'@': nodeResolve('src'),
|
||||
'~': nodeResolve('public')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user