Compare commits
22 Commits
a8ec91482a
...
2025-09
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1bde44902f | ||
|
|
11f0c2ee50 | ||
|
|
262b593d86 | ||
|
|
a895684364 | ||
|
|
29a90a36af | ||
|
|
bf141fbaa4 | ||
|
|
d6ef23c642 | ||
|
|
dd3d829820 | ||
|
|
70505ac356 | ||
|
|
a7e3cebb6f | ||
|
|
0bb7577a92 | ||
|
|
ccf3bf27f4 | ||
|
|
e7f7c8b537 | ||
|
|
6fcf99284d | ||
|
|
868463aef9 | ||
|
|
47adb54dee | ||
|
|
c520761c0e | ||
|
|
8b23cea38d | ||
|
|
db6594cdf4 | ||
|
|
82e41eefdb | ||
|
|
b48d247fcf | ||
|
|
345e954756 |
26
src/api/admin/user.js
Normal file
26
src/api/admin/user.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
|
// 密码规则修改
|
||||||
|
export function ruleUpdate(data) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/user-boot/password/ruleUpdate',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取密码规则
|
||||||
|
export function getRule(data) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/user-boot/password/getRule',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 解锁超级管理员
|
||||||
|
export function unlockRoot(data) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/user-boot/password/unlockRoot',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -48,3 +48,19 @@ export function displayHistoryData(data: any) {
|
|||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//生成谐波责任指标
|
||||||
|
export function getResponsibilityData(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/advance-boot/responsibility/getResponsibilityData',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//生成动态谐波责任数据
|
||||||
|
export function getDynamicData(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/advance-boot/responsibility/getDynamicData',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
62
src/api/auditManage/auditList.ts
Normal file
62
src/api/auditManage/auditList.ts
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
|
//筛选下拉列表参数
|
||||||
|
export function getAllUserList() {
|
||||||
|
return createAxios({
|
||||||
|
url: "/user-boot/user/getAllUserSimpleList",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//审计日志列表
|
||||||
|
export function getAuditLog(data:any) {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/getAuditLog",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//审计日志统计
|
||||||
|
export function censusAuditLog(data:any) {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/censusAuditLog",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//日志文件备份
|
||||||
|
export function logFileWriter(data:any) {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/logFileWriter",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//日志文件恢复
|
||||||
|
export function recoverLogFile(data:any) {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/recoverLogFile",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//获取在线用户
|
||||||
|
export function getOnlineUsers(data:any) {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/getOnlineUsers",
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//获取表空间大小
|
||||||
|
export function getMemoInfo() {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/audit/getMemoInfo",
|
||||||
|
method: "post",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function getSysConfig() {
|
||||||
|
return createAxios({
|
||||||
|
url: "/system-boot/config/getSysConfig",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
}
|
||||||
99
src/api/device-boot/transformerStrategy.ts
Normal file
99
src/api/device-boot/transformerStrategy.ts
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 变压器台账分页查询
|
||||||
|
export function transformerPage(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/transformerPage',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页查询变压器策略
|
||||||
|
export function flgployPage(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTflgploy/flgployPage',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//变压器台账新增
|
||||||
|
export function insertTransformer(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/insertTransformer',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//新增变压器策略
|
||||||
|
export function insertFlgPloy(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTflgploy/insertFlgPloy',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//变压器台账修改
|
||||||
|
export function updateTransformer(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/updateTransformer',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//变压器策略详情
|
||||||
|
export function getFlgPloyInfo(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTflgploy/getFlgPloyInfo',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//修改变压器策略
|
||||||
|
export function updateFlgPloy(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTflgploy/updateFlgPloy',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//变压器台账删除
|
||||||
|
export function delTransformer(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/delTransformer',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//删除变压器策略
|
||||||
|
export function delFlgPloy(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTflgploy/delFlgPloy',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取变压器台账 树
|
||||||
|
export function getTransformerTree() {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/getTransformerTree',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取上下节点信息
|
||||||
|
export function getGeneratrix(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/getGeneratrix',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//变电站节点维护
|
||||||
|
export function nodeMaintenance(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/device-boot/pqsTransformer/nodeMaintenance',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -1,71 +1,72 @@
|
|||||||
import createAxios from '@/utils/request'
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
const SYSTEM_PREFIX = '/system-boot'
|
const SYSTEM_PREFIX = '/system-boot'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 上传文件
|
* 上传文件
|
||||||
* @param file
|
* @param file
|
||||||
*/
|
*/
|
||||||
export const uploadFile = (file: any, path: string) => {
|
export const uploadFile = (file: any, path: string) => {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('file', file)
|
form.append('file', file)
|
||||||
form.append('path', path)
|
form.append('path', path)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: SYSTEM_PREFIX + '/file/upload',
|
url: SYSTEM_PREFIX + '/file/upload',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data'
|
'Content-Type': 'multipart/form-data'
|
||||||
},
|
},
|
||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除文件
|
* 删除文件
|
||||||
*/
|
*/
|
||||||
export const deleteFile = (filePath: string) => {
|
export const deleteFile = (filePath: string) => {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('filePath', filePath)
|
form.append('filePath', filePath)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: SYSTEM_PREFIX + '/file/delete',
|
url: SYSTEM_PREFIX + '/file/delete',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 下载文件
|
* 下载文件
|
||||||
*/
|
*/
|
||||||
export const downloadFile = (filePath: any) => {
|
export const downloadFile = (filePath: any) => {
|
||||||
// let form = new FormData()
|
// let form = new FormData()
|
||||||
// form.append('filePath', filePath)
|
// form.append('filePath', filePath)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: SYSTEM_PREFIX + '/file/download',
|
url: SYSTEM_PREFIX + '/file/download',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: filePath,
|
params: filePath,
|
||||||
responseType: 'blob'
|
responseType: 'blob'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取文件的短期url展示
|
* 获取文件的短期url展示
|
||||||
*/
|
*/
|
||||||
export const getFileUrl = (filePath: string) => {
|
export const getFileUrl = (params:any) => {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('filePath', filePath)
|
// form.append('filePath', filePath)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||||
method: 'POST'
|
method: 'get',
|
||||||
})
|
params
|
||||||
}
|
})
|
||||||
|
}
|
||||||
/**
|
|
||||||
* 根据获取文件的一个短期url及文件名
|
/**
|
||||||
*/
|
* 根据获取文件的一个短期url及文件名
|
||||||
export const getFileNameAndFilePath = (query: any) => {
|
*/
|
||||||
return createAxios({
|
export const getFileNameAndFilePath = (query: any) => {
|
||||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
return createAxios({
|
||||||
method: 'GET',
|
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||||
params: query
|
method: 'GET',
|
||||||
})
|
params: query
|
||||||
}
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,321 +1,322 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<div ref="chartRef" class="my-chart" />
|
<div ref="chartRef" class="my-chart" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||||
// import echarts from './echarts'
|
// import echarts from './echarts'
|
||||||
import * as echarts from 'echarts' // 全引入
|
import * as echarts from 'echarts' // 全引入
|
||||||
import 'echarts-gl'
|
import 'echarts-gl'
|
||||||
import 'echarts-liquidfill'
|
import 'echarts-liquidfill'
|
||||||
import 'echarts/lib/component/dataZoom'
|
import 'echarts/lib/component/dataZoom'
|
||||||
import { color, gradeColor3 } from './color'
|
import { color, gradeColor3 } from './color'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
// import { nextTick } from 'process'
|
// import { nextTick } from 'process'
|
||||||
const emit = defineEmits(['triggerPoint', 'group'])
|
const emit = defineEmits(['triggerPoint', 'group'])
|
||||||
color[0] = config.layout.elementUiPrimary[0]
|
color[0] = config.layout.elementUiPrimary[0]
|
||||||
const chartRef = ref<HTMLDivElement>()
|
const chartRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||||
let chart: echarts.ECharts | any = null
|
let chart: echarts.ECharts | any = null
|
||||||
const resizeHandler = () => {
|
const resizeHandler = () => {
|
||||||
// 不在视野中的时候不进行resize
|
// 不在视野中的时候不进行resize
|
||||||
if (!chartRef.value) return
|
if (!chartRef.value) return
|
||||||
if (chartRef.value.offsetHeight == 0) return
|
if (chartRef.value.offsetHeight == 0) return
|
||||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
chart.resize()
|
chart.resize()
|
||||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const initChart = () => {
|
const initChart = () => {
|
||||||
if (!props.isInterVal && !props.pieInterVal) {
|
if (!props.isInterVal && !props.pieInterVal) {
|
||||||
chart?.dispose()
|
chart?.dispose()
|
||||||
}
|
}
|
||||||
// chart?.dispose()
|
// chart?.dispose()
|
||||||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||||||
const options = {
|
const options = {
|
||||||
title: {
|
title: {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
color: '#000',
|
color: '#000',
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
// },
|
// },
|
||||||
...(props.options?.title || null)
|
...(props.options?.title || null)
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
// axisPointer: {
|
// axisPointer: {
|
||||||
// type: 'shadow',
|
// type: 'shadow',
|
||||||
// label: {
|
// label: {
|
||||||
// color: '#fff',
|
// color: '#fff',
|
||||||
// fontSize: 16
|
// fontSize: 16
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
opacity: 0.35,
|
opacity: 0.35,
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
confine: true,
|
confine: true,
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||||||
params?.forEach((item: any) => {
|
params?.forEach((item: any) => {
|
||||||
const value =
|
const value =
|
||||||
item.value === 3.14159 || item.value === 0.14159
|
item.value === 3.14159 || item.value === 0.14159
|
||||||
? '暂无数据'
|
? '暂无数据'
|
||||||
: Math.round(item.value * 100) / 100 // 处理特殊值
|
: Math.round(item.value * 100) / 100 // 处理特殊值
|
||||||
tips += `<div style=" display: flex;justify-content: space-between;">
|
tips += `<div style=" display: flex;justify-content: space-between;">
|
||||||
<span>${item.marker}
|
<span>${item.marker}
|
||||||
${item.seriesName}:
|
${item.seriesName}:
|
||||||
</span> ${value}
|
</span> ${value}
|
||||||
</div>` // 统一格式
|
</div>` // 统一格式
|
||||||
})
|
})
|
||||||
return tips
|
return tips
|
||||||
},
|
},
|
||||||
...(props.options?.tooltip || null)
|
...(props.options?.tooltip || null)
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
right: 20,
|
right: 20,
|
||||||
top: 15,
|
top: 15,
|
||||||
feature: {
|
feature: {
|
||||||
saveAsImage: {
|
saveAsImage: {
|
||||||
title: '', // 按钮标题
|
title: '', // 按钮标题
|
||||||
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
|
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
|
||||||
},
|
},
|
||||||
|
|
||||||
...(props.options?.toolbox?.featureProps || null)
|
...(props.options?.toolbox?.featureProps || null)
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
iconStyle: {
|
iconStyle: {
|
||||||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||||||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// },
|
// },
|
||||||
...(props.options?.toolbox || null)
|
...(props.options?.toolbox || null)
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
right: 50,
|
right: 50,
|
||||||
top: 25,
|
top: 25,
|
||||||
itemGap: 10,
|
itemGap: 10,
|
||||||
itemStyle: {},
|
itemStyle: {},
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||||
// },
|
// },
|
||||||
itemWidth: 15,
|
itemWidth: 15,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
...(props.options?.legend || null)
|
...(props.options?.legend || null)
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '50px',
|
top: '50px',
|
||||||
left: '30px',
|
left: '30px',
|
||||||
right: '70px',
|
right: '70px',
|
||||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
...(props.options?.grid || null)
|
...(props.options?.grid || null)
|
||||||
},
|
},
|
||||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||||
dataZoom: props.options?.dataZoom || [
|
dataZoom: props.options?.dataZoom || [
|
||||||
{
|
{
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: props.options?.color || color,
|
color: props.options?.color || color,
|
||||||
series: props.options?.series,
|
series: props.options?.series,
|
||||||
...props.options?.options
|
...props.options?.options
|
||||||
}
|
}
|
||||||
// console.log(options.series,"获取x轴");
|
// console.log(options.series,"获取x轴");
|
||||||
handlerBar(options)
|
handlerBar(options)
|
||||||
// 处理柱状图
|
// 处理柱状图
|
||||||
chart.setOption(options, true)
|
chart.setOption(options, true)
|
||||||
// chart.group = 'group'
|
// chart.group = 'group'
|
||||||
emit('group',chart)
|
emit('group', chart, chartRef.value)
|
||||||
// 添加点击事件
|
// 添加点击事件
|
||||||
chart.on('click', function (params) {
|
chart.on('click', function (params) {
|
||||||
if (params.seriesName == '暂态触发点') {
|
if (params.seriesName == '暂态触发点') {
|
||||||
emit('triggerPoint', params.data)
|
emit('triggerPoint', params.data)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
|
||||||
chart.resize()
|
setTimeout(() => {
|
||||||
}, 0)
|
chart.resize()
|
||||||
}
|
}, 0)
|
||||||
const handlerBar = (options: any) => {
|
}
|
||||||
if (Array.isArray(options.series)) {
|
const handlerBar = (options: any) => {
|
||||||
options.series.forEach((item: any) => {
|
if (Array.isArray(options.series)) {
|
||||||
if (item.type === 'bar') {
|
options.series.forEach((item: any) => {
|
||||||
item.barMinHeight = 10
|
if (item.type === 'bar') {
|
||||||
item.barMaxWidth = 20
|
item.barMinHeight = 10
|
||||||
item.itemStyle = Object.assign(
|
item.barMaxWidth = 20
|
||||||
{
|
item.itemStyle = Object.assign(
|
||||||
color: (params: any) => {
|
{
|
||||||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
color: (params: any) => {
|
||||||
return '#ccc'
|
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||||||
} else {
|
return '#ccc'
|
||||||
return props.options?.color
|
} else {
|
||||||
? props.options?.color[params.seriesIndex]
|
return props.options?.color
|
||||||
: color[params.seriesIndex]
|
? props.options?.color[params.seriesIndex]
|
||||||
}
|
: color[params.seriesIndex]
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
item.itemStyle
|
},
|
||||||
)
|
item.itemStyle
|
||||||
}
|
)
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
const handlerYAxis = () => {
|
}
|
||||||
let temp = {
|
const handlerYAxis = () => {
|
||||||
type: 'value',
|
let temp = {
|
||||||
nameGap: 15,
|
type: 'value',
|
||||||
nameTextStyle: {
|
nameGap: 15,
|
||||||
color: '#000'
|
nameTextStyle: {
|
||||||
},
|
color: '#000'
|
||||||
splitNumber: 5,
|
},
|
||||||
minInterval: 1,
|
splitNumber: 5,
|
||||||
axisLine: {
|
minInterval: 1,
|
||||||
show: true,
|
axisLine: {
|
||||||
lineStyle: {
|
show: true,
|
||||||
color: '#000'
|
lineStyle: {
|
||||||
}
|
color: '#000'
|
||||||
},
|
}
|
||||||
axisLabel: {
|
},
|
||||||
color: '#000',
|
axisLabel: {
|
||||||
fontSize: 14,
|
color: '#000',
|
||||||
formatter: function (value) {
|
fontSize: 14,
|
||||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
formatter: function (value) {
|
||||||
}
|
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||||
},
|
}
|
||||||
splitLine: {
|
},
|
||||||
lineStyle: {
|
splitLine: {
|
||||||
// 使用深浅的间隔色
|
lineStyle: {
|
||||||
color: ['#ccc'],
|
// 使用深浅的间隔色
|
||||||
type: 'dashed',
|
color: ['#ccc'],
|
||||||
opacity: 0.5
|
type: 'dashed',
|
||||||
}
|
opacity: 0.5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// props.options?.xAxis 是数组还是对象
|
}
|
||||||
if (Array.isArray(props.options?.yAxis)) {
|
// props.options?.xAxis 是数组还是对象
|
||||||
return props.options?.yAxis.map((item: any) => {
|
if (Array.isArray(props.options?.yAxis)) {
|
||||||
return {
|
return props.options?.yAxis.map((item: any) => {
|
||||||
...temp,
|
return {
|
||||||
...item
|
...temp,
|
||||||
}
|
...item
|
||||||
})
|
}
|
||||||
} else {
|
})
|
||||||
return {
|
} else {
|
||||||
...temp,
|
return {
|
||||||
...props.options?.yAxis
|
...temp,
|
||||||
}
|
...props.options?.yAxis
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handlerXAxis = () => {
|
}
|
||||||
let temp = {
|
const handlerXAxis = () => {
|
||||||
type: 'category',
|
let temp = {
|
||||||
axisTick: { show: false },
|
type: 'category',
|
||||||
nameTextStyle: {
|
axisTick: { show: false },
|
||||||
color: '#000'
|
nameTextStyle: {
|
||||||
},
|
color: '#000'
|
||||||
axisLine: {
|
},
|
||||||
// lineStyle: {
|
axisLine: {
|
||||||
color: '#000'
|
// lineStyle: {
|
||||||
// }
|
color: '#000'
|
||||||
},
|
// }
|
||||||
axisLabel: {
|
},
|
||||||
// textStyle: {
|
axisLabel: {
|
||||||
fontFamily: 'dinproRegular',
|
// textStyle: {
|
||||||
color: '#000',
|
fontFamily: 'dinproRegular',
|
||||||
fontSize: '12'
|
color: '#000',
|
||||||
// }
|
fontSize: '12'
|
||||||
}
|
// }
|
||||||
// boundaryGap: false,
|
}
|
||||||
}
|
// boundaryGap: false,
|
||||||
// props.options?.xAxis 是数组还是对象
|
}
|
||||||
if (Array.isArray(props.options?.xAxis)) {
|
// props.options?.xAxis 是数组还是对象
|
||||||
return props.options?.xAxis.map((item: any) => {
|
if (Array.isArray(props.options?.xAxis)) {
|
||||||
return {
|
return props.options?.xAxis.map((item: any) => {
|
||||||
...temp,
|
return {
|
||||||
...item
|
...temp,
|
||||||
}
|
...item
|
||||||
})
|
}
|
||||||
} else {
|
})
|
||||||
return {
|
} else {
|
||||||
...temp,
|
return {
|
||||||
...props.options?.xAxis
|
...temp,
|
||||||
}
|
...props.options?.xAxis
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
let throttle: ReturnType<typeof setTimeout>
|
|
||||||
// 动态计算table高度
|
let throttle: ReturnType<typeof setTimeout>
|
||||||
const resizeObserver = new ResizeObserver(entries => {
|
// 动态计算table高度
|
||||||
for (const entry of entries) {
|
const resizeObserver = new ResizeObserver(entries => {
|
||||||
if (throttle) {
|
for (const entry of entries) {
|
||||||
clearTimeout(throttle)
|
if (throttle) {
|
||||||
}
|
clearTimeout(throttle)
|
||||||
throttle = setTimeout(() => {
|
}
|
||||||
resizeHandler()
|
throttle = setTimeout(() => {
|
||||||
}, 100)
|
resizeHandler()
|
||||||
}
|
}, 100)
|
||||||
})
|
}
|
||||||
const setOptions = (options: any) => {
|
})
|
||||||
chart.setOption(options)
|
const setOptions = (options: any) => {
|
||||||
}
|
chart.setOption(options)
|
||||||
const getChart = () => {
|
}
|
||||||
return chart
|
const getChart = () => {
|
||||||
}
|
return chart
|
||||||
onMounted(() => {
|
}
|
||||||
initChart()
|
onMounted(() => {
|
||||||
resizeObserver.observe(chartRef.value!)
|
initChart()
|
||||||
})
|
resizeObserver.observe(chartRef.value!)
|
||||||
defineExpose({ initChart, setOptions, getChart })
|
})
|
||||||
onBeforeUnmount(() => {
|
defineExpose({ initChart, setOptions, getChart })
|
||||||
resizeObserver.unobserve(chartRef.value!)
|
onBeforeUnmount(() => {
|
||||||
chart?.dispose()
|
resizeObserver.unobserve(chartRef.value!)
|
||||||
})
|
chart?.dispose()
|
||||||
watch(
|
})
|
||||||
() => props.options,
|
watch(
|
||||||
(newVal, oldVal) => {
|
() => props.options,
|
||||||
initChart()
|
(newVal, oldVal) => {
|
||||||
}
|
initChart()
|
||||||
)
|
}
|
||||||
</script>
|
)
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chart {
|
<style lang="scss" scoped>
|
||||||
width: 100%;
|
.chart {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
position: relative;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
.el-button {
|
|
||||||
position: absolute;
|
.el-button {
|
||||||
right: 0px;
|
position: absolute;
|
||||||
top: -60px;
|
right: 0px;
|
||||||
}
|
top: -60px;
|
||||||
|
}
|
||||||
.my-chart {
|
|
||||||
height: 100%;
|
.my-chart {
|
||||||
width: 100%;
|
height: 100%;
|
||||||
}
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,251 +1,259 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- text -->
|
<!-- text -->
|
||||||
<div v-if="field.render == 'renderFormatter'">
|
<div v-if="field.render == 'renderFormatter'">
|
||||||
{{ fieldValue }}
|
{{ fieldValue }}
|
||||||
</div>
|
</div>
|
||||||
<!-- Icon -->
|
<!-- Icon -->
|
||||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue" :name="fieldValue ? fieldValue : field.default ?? ''" />
|
<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)"
|
<!-- switch -->
|
||||||
:model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
|
<el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
|
||||||
:active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
|
: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">
|
<!-- image -->
|
||||||
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||||
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"></el-image>
|
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
||||||
</div>
|
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"></el-image>
|
||||||
|
</div>
|
||||||
<!-- tag -->
|
|
||||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
<!-- tag -->
|
||||||
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect ||'light'" size="small">
|
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect || 'light'"
|
||||||
</el-tag>
|
size="small">
|
||||||
</div>
|
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||||
|
</el-tag>
|
||||||
<!-- datetime -->
|
</div>
|
||||||
<div v-if="field.render == 'datetime'">
|
|
||||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
<!-- datetime -->
|
||||||
</div>
|
<div v-if="field.render == 'datetime'">
|
||||||
|
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||||
<!-- color -->
|
</div>
|
||||||
<div v-if="field.render == 'color'">
|
|
||||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
<!-- color -->
|
||||||
</div>
|
<div v-if="field.render == 'color'">
|
||||||
|
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||||
<!-- customTemplate 自定义模板 -->
|
</div>
|
||||||
<div v-if="field.render == 'customTemplate'"
|
|
||||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></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" />
|
<!-- 自定义组件/函数渲染 -->
|
||||||
|
<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">
|
<!-- 按钮组 -->
|
||||||
<!-- 常规按钮 -->
|
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||||
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||||
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
<!-- 常规按钮 -->
|
||||||
:loading="props.row.loading || false" v-bind="btn.attr">
|
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
||||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
||||||
</el-button>
|
: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"
|
<el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
|
||||||
v-bind="btn.attr">
|
:content="btn.title" placement="top">
|
||||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
<el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
|
||||||
{{ btn.text || btn.title }}
|
v-bind="btn.attr">
|
||||||
</div>
|
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||||
</el-button>
|
{{ btn.text || btn.title }}
|
||||||
</el-tooltip>
|
</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>
|
<el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
|
||||||
<div style="display: inline-block">
|
v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
|
||||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
<template #reference>
|
||||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
<div style="display: inline-block">
|
||||||
{{ btn.text || btn.title }}
|
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||||
</div>
|
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||||
</el-button>
|
{{ btn.text || btn.title }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</el-button>
|
||||||
</el-popconfirm>
|
</div>
|
||||||
|
</template>
|
||||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
</el-popconfirm>
|
||||||
<el-button link type="primary" class="table-operate">
|
|
||||||
<div class="table-operate-text">更多</div>
|
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||||
</el-button>
|
<el-button link type="primary" class="table-operate">
|
||||||
<template #dropdown>
|
<div class="table-operate-text">更多</div>
|
||||||
<el-dropdown-menu>
|
</el-button>
|
||||||
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
<template #dropdown>
|
||||||
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
<el-dropdown-menu>
|
||||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
||||||
}">
|
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
||||||
{{ item.text }}
|
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
||||||
</el-dropdown-item>
|
}">
|
||||||
</el-dropdown-menu>
|
{{ item.text }}
|
||||||
</template>
|
</el-dropdown-item>
|
||||||
</el-dropdown>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</el-dropdown>
|
||||||
</template>
|
</template>
|
||||||
|
</div>
|
||||||
<script setup lang="ts">
|
</template>
|
||||||
import { ref, inject } from 'vue'
|
|
||||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
<script setup lang="ts">
|
||||||
import type TableStoreClass from '@/utils/tableStore'
|
import { ref, inject } from 'vue'
|
||||||
import { fullUrl, timeFormat } from '@/utils/common'
|
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||||
import type { VxeColumnProps } from 'vxe-table'
|
import type TableStoreClass from '@/utils/tableStore'
|
||||||
|
import { fullUrl, timeFormat } from '@/utils/common'
|
||||||
const TableStore = inject('tableStore') as TableStoreClass
|
import { getFileUrl } from '@/api/system-boot/file'
|
||||||
|
import type { VxeColumnProps } from 'vxe-table'
|
||||||
interface Props {
|
|
||||||
row: TableRow
|
const TableStore = inject('tableStore') as TableStoreClass
|
||||||
field: TableColumn
|
|
||||||
column: VxeColumnProps
|
interface Props {
|
||||||
index: number
|
row: TableRow
|
||||||
}
|
field: TableColumn
|
||||||
const props = defineProps<Props>()
|
column: VxeColumnProps
|
||||||
|
index: number
|
||||||
// 字段值(单元格值)
|
}
|
||||||
const fieldName = ref(props.field.field)
|
const props = defineProps<Props>()
|
||||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
|
||||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
// 字段值(单元格值)
|
||||||
let fieldNameArr = fieldName.value.split('.')
|
const fieldName = ref(props.field.field)
|
||||||
let val: any = ref(props.row[fieldNameArr[0]])
|
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
let fieldNameArr = fieldName.value.split('.')
|
||||||
}
|
let val: any = ref(props.row[fieldNameArr[0]])
|
||||||
fieldValue.value = val.value
|
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||||
}
|
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||||
|
}
|
||||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
fieldValue.value = val.value
|
||||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
}
|
||||||
}
|
|
||||||
|
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||||
const onChangeField = (row: any, value: any) => {
|
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||||
row.onChangeField && row.onChangeField(props.row, value)
|
}
|
||||||
|
|
||||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
const onChangeField = (row: any, value: any) => {
|
||||||
}
|
row.onChangeField && row.onChangeField(props.row, value)
|
||||||
|
|
||||||
const onButtonClick = (btn: OptButton) => {
|
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||||
btn.click && btn.click(props.row, props.field)
|
}
|
||||||
}
|
const getUrl = (url: string) => {
|
||||||
|
getFileUrl({ filePath: url }).then(res => {
|
||||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
return res.data
|
||||||
return custom && custom[value] ? custom[value] : ''
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
const onButtonClick = (btn: OptButton) => {
|
||||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
btn.click && btn.click(props.row, props.field)
|
||||||
const buttons = ref<any[]>([])
|
}
|
||||||
if (buttonsFilter.length > 3) {
|
|
||||||
buttonsFilter?.forEach((btn, index) => {
|
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||||
btn.text = btn.text || btn.title
|
return custom && custom[value] ? custom[value] : ''
|
||||||
if (index < 2) {
|
}
|
||||||
buttons.value.push(btn)
|
|
||||||
} else {
|
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||||
if (buttons.value.length > 2) {
|
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
const buttons = ref<any[]>([])
|
||||||
} else {
|
if (buttonsFilter.length > 3) {
|
||||||
buttons.value.push({
|
buttonsFilter?.forEach((btn, index) => {
|
||||||
render: 'dropdown',
|
btn.text = btn.text || btn.title
|
||||||
buttons: [btn]
|
if (index < 2) {
|
||||||
})
|
buttons.value.push(btn)
|
||||||
}
|
} else {
|
||||||
}
|
if (buttons.value.length > 2) {
|
||||||
})
|
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||||
} else {
|
} else {
|
||||||
buttons.value = buttonsFilter
|
buttons.value.push({
|
||||||
}
|
render: 'dropdown',
|
||||||
const handlerCommand = (item: OptButton) => {
|
buttons: [btn]
|
||||||
switch (item.render) {
|
})
|
||||||
case 'basicButton':
|
}
|
||||||
onButtonClick(item)
|
}
|
||||||
break
|
})
|
||||||
case 'confirmButton':
|
} else {
|
||||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
buttons.value = buttonsFilter
|
||||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
}
|
||||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
const handlerCommand = (item: OptButton) => {
|
||||||
type: 'warning'
|
switch (item.render) {
|
||||||
}).then(() => {
|
case 'basicButton':
|
||||||
onButtonClick(item)
|
onButtonClick(item)
|
||||||
})
|
break
|
||||||
default:
|
case 'confirmButton':
|
||||||
break
|
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||||
}
|
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||||
}
|
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||||
</script>
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
<style scoped lang="scss">
|
onButtonClick(item)
|
||||||
.m-10 {
|
})
|
||||||
margin: 4px;
|
default:
|
||||||
}
|
break
|
||||||
|
}
|
||||||
.ba-render-image {
|
}
|
||||||
text-align: center;
|
</script>
|
||||||
}
|
|
||||||
|
<style scoped lang="scss">
|
||||||
.images-item {
|
.m-10 {
|
||||||
width: 50px;
|
margin: 4px;
|
||||||
margin: 0 5px;
|
}
|
||||||
}
|
|
||||||
|
.ba-render-image {
|
||||||
.el-image {
|
text-align: center;
|
||||||
height: 36px;
|
}
|
||||||
// width: 36px;
|
|
||||||
}
|
.images-item {
|
||||||
|
width: 50px;
|
||||||
.table-operate-text {
|
margin: 0 5px;
|
||||||
padding-left: 5px;
|
}
|
||||||
font-size: 12px;
|
|
||||||
}
|
.el-image {
|
||||||
|
height: 36px;
|
||||||
.table-operate {
|
// width: 36px;
|
||||||
padding: 4px 5px;
|
}
|
||||||
height: auto;
|
|
||||||
}
|
.table-operate-text {
|
||||||
|
padding-left: 5px;
|
||||||
.cn-render-buttons {
|
font-size: 12px;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
.table-operate {
|
||||||
|
padding: 4px 5px;
|
||||||
.icon {
|
height: auto;
|
||||||
font-size: 12px !important;
|
}
|
||||||
// color: var(--ba-bg-color-overlay) !important;
|
|
||||||
}
|
.cn-render-buttons {
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.move-button {
|
justify-content: center;
|
||||||
cursor: move;
|
|
||||||
}
|
.icon {
|
||||||
|
font-size: 12px !important;
|
||||||
.ml-6 {
|
// color: var(--ba-bg-color-overlay) !important;
|
||||||
display: inline-flex;
|
}
|
||||||
vertical-align: middle;
|
}
|
||||||
margin-left: 6px;
|
|
||||||
}
|
.move-button {
|
||||||
|
cursor: move;
|
||||||
.ml-6+.el-button {
|
}
|
||||||
margin-left: 6px;
|
|
||||||
}
|
.ml-6 {
|
||||||
|
display: inline-flex;
|
||||||
.ba-render-color {
|
vertical-align: middle;
|
||||||
height: 25px;
|
margin-left: 6px;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
.ml-6+.el-button {
|
||||||
.cn-render-buttons {
|
margin-left: 6px;
|
||||||
:deep(.el-button) {
|
}
|
||||||
margin-left: 0;
|
|
||||||
}
|
.ba-render-color {
|
||||||
}
|
height: 25px;
|
||||||
</style>
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-render-buttons {
|
||||||
|
:deep(.el-button) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
234
src/components/table/indexClick.vue
Normal file
234
src/components/table/indexClick.vue
Normal file
@@ -0,0 +1,234 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
|
||||||
|
<vxe-table
|
||||||
|
ref="tableRef"
|
||||||
|
height="auto"
|
||||||
|
:key="key"
|
||||||
|
:data="tableStore.table.data"
|
||||||
|
v-loading="tableStore.table.loading"
|
||||||
|
v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||||
|
@checkbox-all="selectChangeEvent"
|
||||||
|
@checkbox-change="selectChangeEvent"
|
||||||
|
:showOverflow="showOverflow"
|
||||||
|
@sort-change="handleSortChange"
|
||||||
|
>
|
||||||
|
<!-- Column 组件内部是 el-table-column -->
|
||||||
|
<template v-if="isGroup">
|
||||||
|
<GroupColumn :column="tableStore.table.column" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<Column
|
||||||
|
:attr="item"
|
||||||
|
:key="key + '-column'"
|
||||||
|
v-for="(item, key) in tableStore.table.column"
|
||||||
|
:tree-node="item.treeNode"
|
||||||
|
>
|
||||||
|
<!-- tableStore 预设的列 render 方案 -->
|
||||||
|
<template v-if="item.render" #default="scope">
|
||||||
|
<FieldRender
|
||||||
|
:field="item"
|
||||||
|
:row="scope.row"
|
||||||
|
:column="scope.column"
|
||||||
|
:index="scope.rowIndex"
|
||||||
|
:key="
|
||||||
|
key +
|
||||||
|
'-' +
|
||||||
|
item.render +
|
||||||
|
'-' +
|
||||||
|
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 支持可点击和下划线的列 -->
|
||||||
|
<template v-else-if="item.clickable" #default="scope">
|
||||||
|
<span
|
||||||
|
:class="{ 'clickable-underline':item.clickable }"
|
||||||
|
@click="item.clickable ? handleCellClick(scope.row, scope.column) : undefined"
|
||||||
|
>
|
||||||
|
{{ item.field ? scope.row[item.field] : '' }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</template>
|
||||||
|
<slot name="columns"></slot>
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tableStore.showPage" class="table-pagination">
|
||||||
|
<el-pagination
|
||||||
|
:currentPage="tableStore.table.params!.pageNum"
|
||||||
|
:page-size="tableStore.table.params!.pageSize"
|
||||||
|
:page-sizes="pageSizes"
|
||||||
|
background
|
||||||
|
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||||
|
:total="tableStore.table.total"
|
||||||
|
@size-change="onTableSizeChange"
|
||||||
|
@current-change="onTableCurrentChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
|
||||||
|
import type { ElTable } from 'element-plus'
|
||||||
|
import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
|
||||||
|
import FieldRender from '@/components/table/fieldRender/index.vue'
|
||||||
|
import Column from '@/components/table/column/index.vue'
|
||||||
|
import GroupColumn from '@/components/table/column/groupColumn.vue'
|
||||||
|
import { useConfig } from '@/stores/config'
|
||||||
|
import type TableStoreClass from '@/utils/tableStore'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
|
||||||
|
const config = useConfig()
|
||||||
|
const tableRef = ref<VxeTableInstance>()
|
||||||
|
const tableStore = inject('tableStore') as TableStoreClass
|
||||||
|
const router = useRouter()
|
||||||
|
const key = ref(0)
|
||||||
|
|
||||||
|
const clickedRow = ref<any>(null)
|
||||||
|
const clickedColumn = ref<any>(null)
|
||||||
|
|
||||||
|
const emit = defineEmits(['cell-click'])
|
||||||
|
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||||
|
isGroup?: boolean
|
||||||
|
showOverflow?: boolean
|
||||||
|
height?: string | boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
isGroup: false,
|
||||||
|
showOverflow: true,
|
||||||
|
height: false
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||||
|
})
|
||||||
|
// console.log(props)
|
||||||
|
const onTableSizeChange = (val: number) => {
|
||||||
|
tableStore.onTableAction('page-size-change', { size: val })
|
||||||
|
}
|
||||||
|
|
||||||
|
const onTableCurrentChange = (val: number) => {
|
||||||
|
tableStore.onTableAction('current-page-change', { page: val })
|
||||||
|
}
|
||||||
|
|
||||||
|
const pageSizes = computed(() => {
|
||||||
|
let defaultSizes = [10, 20, 50, 100, 200]
|
||||||
|
if (tableStore.table.params!.pageSize) {
|
||||||
|
if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
|
||||||
|
defaultSizes.push(tableStore.table.params!.pageSize)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return defaultSizes
|
||||||
|
})
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 记录选择的项
|
||||||
|
*/
|
||||||
|
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
||||||
|
const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
|
||||||
|
tableStore.onTableAction('selection-change', records)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRef = () => {
|
||||||
|
return tableRef.value
|
||||||
|
}
|
||||||
|
// 排序
|
||||||
|
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
|
||||||
|
// console.log('排序列:', column?.property);
|
||||||
|
// console.log('排序顺序:', order);
|
||||||
|
// tableStore.onTableAction('sortable', { column, order })
|
||||||
|
tableStore.table.params.sortBy = column?.property
|
||||||
|
tableStore.table.params.orderBy = order
|
||||||
|
tableStore.table.params.pageNum = 1
|
||||||
|
|
||||||
|
tableStore.index()
|
||||||
|
key.value += 1
|
||||||
|
// // 在这里可以根据 column 和 order 进行相应的数据排序操作
|
||||||
|
// if (order === 'asc') {
|
||||||
|
// } else if (order === 'desc') {
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单元格点击事件处理函数
|
||||||
|
const handleCellClick = (row: any, column: any) => {
|
||||||
|
clickedRow.value = row
|
||||||
|
clickedColumn.value = column
|
||||||
|
// 触发自定义事件,通知父组件显示 dialog
|
||||||
|
emit('cell-click', row, column)
|
||||||
|
// 你也可以在这里触发一个自定义事件或调用 tableStore 的方法
|
||||||
|
// tableStore.onTableAction('cell-click', { row, column })
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => tableStore.table.allFlag,
|
||||||
|
newVal => {
|
||||||
|
if (tableStore.table.allFlag) {
|
||||||
|
tableRef.value?.exportData({
|
||||||
|
filename:
|
||||||
|
tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
|
||||||
|
sheetName: 'Sheet1',
|
||||||
|
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||||
|
useStyle: true,
|
||||||
|
data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
|
||||||
|
columnFilterMethod: function (column: any) {
|
||||||
|
return !(
|
||||||
|
column.column.title === undefined ||
|
||||||
|
column.column.title === '序号' ||
|
||||||
|
column.column.title === '操作'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
tableStore.table.allFlag = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => tableStore.table.data,
|
||||||
|
newVal => {
|
||||||
|
tableStore.onTableAction('selection-change', [])
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
getRef
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ba-data-table :deep(.el-button + .el-button) {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ba-data-table :deep(.table-header-cell) .cell {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-pagination {
|
||||||
|
height: 58px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: var(--ba-bg-color-overlay);
|
||||||
|
padding: 13px 15px;
|
||||||
|
border-left: 1px solid #e4e7e9;
|
||||||
|
border-right: 1px solid #e4e7e9;
|
||||||
|
border-bottom: 1px solid #e4e7e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加可点击和下划线单元格样式 */
|
||||||
|
.clickable-underline {
|
||||||
|
text-decoration: underline; /* 下划线 */
|
||||||
|
cursor: pointer; /* 鼠标指针 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable-underline:hover {
|
||||||
|
color: #66b1ff; /* 悬停时的颜色 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/components/tree/pqs/deviceTree.vue
Normal file
43
src/components/tree/pqs/deviceTree.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="point-tree">
|
||||||
|
<div style="flex: 1; overflow: hidden">
|
||||||
|
<Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { nextTick, onMounted, ref, useAttrs } from 'vue'
|
||||||
|
import Tree from '../index.vue'
|
||||||
|
import { getTransformerTree } from '@/api/device-boot/transformerStrategy'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'pms/deviceTree'
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['init'])
|
||||||
|
const attrs = useAttrs()
|
||||||
|
|
||||||
|
const tree = ref()
|
||||||
|
const treeRef = ref()
|
||||||
|
|
||||||
|
const loadData = () => {
|
||||||
|
getTransformerTree().then(res => {
|
||||||
|
tree.value = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
loadData()
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
loadData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.point-tree {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -83,7 +83,6 @@ import { useAdminInfo } from '@/stores/adminInfo'
|
|||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import globalPopUp from './globalPopUp.vue'
|
import globalPopUp from './globalPopUp.vue'
|
||||||
import { routePush } from '@/utils/router'
|
import { routePush } from '@/utils/router'
|
||||||
import { fullUrl } from '@/utils/common'
|
|
||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
import PopupPwd from './popup/password.vue'
|
import PopupPwd from './popup/password.vue'
|
||||||
import AdminInfo from './popup/adminInfo.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 { createApp, reactive } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import pinia from '@/stores/index'
|
import pinia from '@/stores/index'
|
||||||
import { registerIcons } from '@/utils/common'
|
import { registerIcons } from '@/utils/common'
|
||||||
import mitt from 'mitt'
|
import mitt from 'mitt'
|
||||||
import VXETable from 'vxe-table'
|
import VXETable from 'vxe-table'
|
||||||
import XEUtils from 'xe-utils'
|
import XEUtils from 'xe-utils'
|
||||||
import 'vxe-table/lib/style.css'
|
import 'vxe-table/lib/style.css'
|
||||||
import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import 'element-plus/theme-chalk/display.css'
|
import 'element-plus/theme-chalk/display.css'
|
||||||
import '@fortawesome/fontawesome-free/css/all.css'
|
import '@fortawesome/fontawesome-free/css/all.css'
|
||||||
import '@/styles/index.scss'
|
import '@/styles/index.scss'
|
||||||
import '@/assets/font/iconfont.css'
|
import '@/assets/font/iconfont.css'
|
||||||
import { ElDialog } from 'element-plus'
|
import { ElDialog } from 'element-plus'
|
||||||
import BaiduMap from 'vue-baidu-map-3x'
|
import BaiduMap from 'vue-baidu-map-3x'
|
||||||
import BaiduMapOffline from 'vue-baidu-map-offline'
|
import BaiduMapOffline from 'vue-baidu-map-offline'
|
||||||
import ExcelJS from 'exceljs'
|
import ExcelJS from 'exceljs'
|
||||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||||
// 方式1:NPM 安装,注入 ExcelJS 对象
|
// 方式1:NPM 安装,注入 ExcelJS 对象
|
||||||
VXETable.use(VXETablePluginExportXLSX, {
|
VXETable.use(VXETablePluginExportXLSX, {
|
||||||
ExcelJS
|
ExcelJS
|
||||||
})
|
})
|
||||||
window.XEUtils = XEUtils
|
window.XEUtils = XEUtils
|
||||||
|
|
||||||
// 初始化多语言
|
// 初始化多语言
|
||||||
import { setupI18n } from '@/plugins/vueI18n'
|
import { setupI18n } from '@/plugins/vueI18n'
|
||||||
|
|
||||||
// 引入 form-create
|
// 引入 form-create
|
||||||
import { setupFormCreate } from '@/plugins/formCreate'
|
import { setupFormCreate } from '@/plugins/formCreate'
|
||||||
|
|
||||||
// 创建实例
|
// 创建实例
|
||||||
const setupAll = async () => {
|
const setupAll = async () => {
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
//开启离线地图
|
//开启离线地图
|
||||||
// app.use(BaiduMapOffline, {
|
app.use(BaiduMapOffline, {
|
||||||
// offline: true,
|
offline: true,
|
||||||
// offlineConfig: {
|
offlineConfig: {
|
||||||
// imgext: '.png',
|
imgext: '.png',
|
||||||
// customstyle: '',
|
customstyle: '',
|
||||||
// tiles_dir: '',
|
tiles_dir: '',
|
||||||
// tiles_hybrid: '',
|
tiles_hybrid: '',
|
||||||
// tiles_self: '',
|
tiles_self: '',
|
||||||
// tiles_v_dir: '',
|
tiles_v_dir: '',
|
||||||
// tiles_satellite_dir: '',
|
tiles_satellite_dir: '',
|
||||||
// tiles_road_dir: '',
|
tiles_road_dir: '',
|
||||||
// tiles_v_road_dir: '',
|
tiles_v_road_dir: '',
|
||||||
// home: './plugin/offline/'
|
home: './plugin/offline/'
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
app.use(BaiduMap, {
|
app.use(BaiduMap, {
|
||||||
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
||||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||||
v: '3.0'
|
v: '3.0'
|
||||||
})
|
})
|
||||||
|
|
||||||
await setupI18n(app)
|
await setupI18n(app)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
app.use(ElementPlus)
|
app.use(ElementPlus)
|
||||||
app.use(VXETable)
|
app.use(VXETable)
|
||||||
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
||||||
registerIcons(app) // icons
|
registerIcons(app) // icons
|
||||||
|
|
||||||
app.config.globalProperties.eventBus = mitt()
|
app.config.globalProperties.eventBus = mitt()
|
||||||
// 配置全局变量
|
// 配置全局变量
|
||||||
app.config.globalProperties.$allVariables = reactive({
|
app.config.globalProperties.$allVariables = reactive({
|
||||||
butLoading: false
|
butLoading: false
|
||||||
})
|
})
|
||||||
setupFormCreate(app)
|
setupFormCreate(app)
|
||||||
|
|
||||||
await router.isReady()
|
await router.isReady()
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
}
|
}
|
||||||
|
|
||||||
setupAll()
|
setupAll()
|
||||||
|
|||||||
@@ -243,6 +243,26 @@ export const adminBaseRoute = {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'BusinessAdministrator/TerminalManagement',
|
||||||
|
name: '变压器策略',
|
||||||
|
meta: {
|
||||||
|
title: pageTitle('runManage'),
|
||||||
|
icon: 'ep:management',
|
||||||
|
alwaysShow: true
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'addLedger',
|
||||||
|
component: () =>
|
||||||
|
import('@/views/pqs/business/terminal/transformerStrategy/components/addLedger.vue'),
|
||||||
|
name: '变压器台账配置',
|
||||||
|
meta: {
|
||||||
|
title: pageTitle('router.addLedger')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/boX',
|
path: '/boX',
|
||||||
name: 'boX',
|
name: 'boX',
|
||||||
@@ -337,6 +357,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<my-echart class="tall" :options="echartList_1" :style="{ width: prop.width, height: halfHeight }" />
|
||||||
|
<vxe-table ref="tableRef" :data="tableData" height="auto" :style="{ width: prop.width, height: halfHeight }">
|
||||||
|
<vxe-column type="seq" title="序号"></vxe-column>
|
||||||
|
<vxe-column field="srbName" align="center" title="部门"></vxe-column>
|
||||||
|
<!-- <vxe-column width="200" title="操作">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" size="small" link @click="tactics(row.id, 0)">自动</el-button>
|
||||||
|
<el-button type="primary" size="small" link @click="tactics(row.id, 1)">手动</el-button>
|
||||||
|
<el-button type="primary" size="small" link @click="tactics(row.id, 2)">排除</el-button>
|
||||||
|
</template>
|
||||||
|
</vxe-column> -->
|
||||||
|
</vxe-table>
|
||||||
|
<!-- <Table ref="tableRef" :style="{ width: prop.width, height: halfHeight }"></Table> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted, provide } from 'vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
const echartList_1 = ref({})
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
const prop = defineProps({
|
||||||
|
width: { type: String },
|
||||||
|
height: { type: String },
|
||||||
|
timeKey: { type: String }
|
||||||
|
})
|
||||||
|
|
||||||
|
const halfHeight = computed(() => {
|
||||||
|
const h = parseFloat(prop.height || '400')
|
||||||
|
return `${h / 2}px`
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableData = ref([])
|
||||||
|
|
||||||
|
const dictData = useDictData()
|
||||||
|
const distributionData: any = ref([])
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/event-boot/area/getAreaLineDetail',
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
loadCallback: () => {
|
||||||
|
tabulation(tableStore.table.data)
|
||||||
|
histogram(tableStore.table.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||||
|
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
||||||
|
tableStore.table.params.monitorFlag = 2
|
||||||
|
tableStore.table.params.powerFlag = 2
|
||||||
|
tableStore.table.params.serverName = 'event-boot'
|
||||||
|
// 表格数据处理
|
||||||
|
const tabulation = (res: any) => {
|
||||||
|
tableData.value = res.substationDetailVOList
|
||||||
|
distributionData.value = []
|
||||||
|
for (var i = 0; i < res.areaValue.length; i++) {
|
||||||
|
distributionData.value.push({
|
||||||
|
qy: res.areaValue[i][0],
|
||||||
|
jcd: res.areaValue[i][1],
|
||||||
|
zc: res.areaValue[i][2],
|
||||||
|
zd: res.areaValue[i][3]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 柱状图数据处理
|
||||||
|
const histogram = (res: any) => {
|
||||||
|
echartList_1.value = {
|
||||||
|
title: {
|
||||||
|
text: '区域'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
// console.log(params);
|
||||||
|
var tips = ''
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
tips += params[i].name + '</br/>'
|
||||||
|
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||||
|
}
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
name: '(区域)',
|
||||||
|
data: distributionData.value.map((item: any) => item.qy)
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '监测点数(个)' // 给X轴加单位
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: '暂降次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: distributionData.value.map((item: any) => item.jcd),
|
||||||
|
barMaxWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#07CCCA'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
//数值样式
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
// watch(
|
||||||
|
// () => prop.timeKey,
|
||||||
|
// val => {
|
||||||
|
// tableStore.index()
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--主要监测点列表 -->
|
||||||
|
<TableHeader :showReset="false" ref="TableHeaderRef">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" @cell-click="handleCellClick"></Table>
|
||||||
|
<!-- 弹框组件 -->
|
||||||
|
<el-dialog v-model="dialogVisible" title="详情信息" width="800px" append-to-body destroy-on-close>
|
||||||
|
<p>行数据: {{ selectedRow }}</p>
|
||||||
|
<p>列数据: {{ selectedColumn }}</p>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||||
|
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/indexClick.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||||
|
const prop = defineProps({
|
||||||
|
width: { type: String },
|
||||||
|
height: { type: String },
|
||||||
|
timeKey: { type: String }
|
||||||
|
})
|
||||||
|
const dictData = useDictData()
|
||||||
|
const fontdveoption = dictData.getBasicData('Dev_Ops')
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const selectedRow = ref(null)
|
||||||
|
const selectedColumn = ref(null)
|
||||||
|
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/device-boot/pqsTerminalLogs/getList',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
field: 'index',
|
||||||
|
title: '序号',
|
||||||
|
width: '60',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '名称', field: 'createBy', width: '200', clickable: true },
|
||||||
|
{
|
||||||
|
title: '日志类型',
|
||||||
|
field: 'logsType',
|
||||||
|
width: '100',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: '更改人员',
|
||||||
|
// field: 'createBy',
|
||||||
|
// width: '100'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '更改时间',
|
||||||
|
field: 'updateTime',
|
||||||
|
width: '140'
|
||||||
|
},
|
||||||
|
|
||||||
|
{ title: '描述', field: 'terminalDescribe' }
|
||||||
|
],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
const timeKey = prop.timeKey ?? ''
|
||||||
|
tableStore.table.params.searchBeginTime = getTimeOfTheMonth(timeKey)[0]
|
||||||
|
tableStore.table.params.searchEndTime = getTimeOfTheMonth(timeKey)[1]
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
provide('tableRef', tableRef)
|
||||||
|
tableStore.table.params.type = ''
|
||||||
|
tableStore.table.params.searchValue = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleCellClick = (row: any, column: any) => {
|
||||||
|
selectedRow.value = row
|
||||||
|
selectedColumn.value = column
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => prop.timeKey,
|
||||||
|
val => {
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
233
src/views/pqs/auditManage/auditList/index.vue
Normal file
233
src/views/pqs/auditManage/auditList/index.vue
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<div v-show="flg">
|
||||||
|
<TableHeader datePicker showExport ref="TableHeaderRef">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form :inline="true" label-width="90px" class="">
|
||||||
|
<el-form-item label="用户名:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.loginName"
|
||||||
|
placeholder="用户名"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in userName"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.loginName"
|
||||||
|
:value="item.loginName"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件类型:">
|
||||||
|
<el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in eventType"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="操作类型:">
|
||||||
|
<el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in operationType"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="操作结果:">
|
||||||
|
<el-select v-model="tableStore.table.params.result" placeholder="操作结果" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in resultList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button type="primary" @click="backups" :icon="DocumentCopy">文件备份</el-button>
|
||||||
|
<el-button type="primary" @click="details" :icon="Tickets">统计</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" />
|
||||||
|
</div>
|
||||||
|
<div v-if="!flg">
|
||||||
|
<Statistics @back="onSubmit" ref="statistics" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { getAllUserList, logFileWriter, recoverLogFile, getMemoInfo, getSysConfig } from '@/api/auditManage/auditList'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import Statistics from './statistics.vue'
|
||||||
|
import { DocumentCopy, Tickets } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'BusinessAdministrator/Audit/Operations/Management'
|
||||||
|
})
|
||||||
|
|
||||||
|
interface UserInfo {
|
||||||
|
id: number | string
|
||||||
|
loginName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const userName = ref<UserInfo[]>([])
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
// 其他响应式数据
|
||||||
|
const loading = ref(false)
|
||||||
|
const statistics = ref()
|
||||||
|
|
||||||
|
const flg = ref(true)
|
||||||
|
const showMqtt = ref(false)
|
||||||
|
const zoom = ref('') //图表焦点校验
|
||||||
|
|
||||||
|
const resultList = ref([
|
||||||
|
{ id: 1, label: '成功' },
|
||||||
|
{ id: 0, label: '失败' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const eventType = ref([
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
label: '业务事件类型'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '系统事件类型'
|
||||||
|
}
|
||||||
|
]) //事件类型
|
||||||
|
const operationType = ref([
|
||||||
|
{ id: 1, value: '查询' },
|
||||||
|
{ id: 2, value: '新增' },
|
||||||
|
{ id: 3, value: '更新' },
|
||||||
|
{ id: 4, value: '删除' },
|
||||||
|
{ id: 5, value: '认证' },
|
||||||
|
{ id: 6, value: '注销' },
|
||||||
|
{ id: 7, value: '上传' },
|
||||||
|
{ id: 8, value: '下载' },
|
||||||
|
{ id: 9, value: '越权访问' }
|
||||||
|
]) //操作类型
|
||||||
|
|
||||||
|
const statisticsTotal = ref(undefined)
|
||||||
|
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/system-boot/audit/getAuditLog',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
field: 'create_time',
|
||||||
|
title: '操作时间',
|
||||||
|
sortable: true,
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.row.time
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ field: 'userName', title: '操作人员' },
|
||||||
|
{
|
||||||
|
field: 'operate_type',
|
||||||
|
title: '操作类型',
|
||||||
|
sortable: true,
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.row.operate
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ field: 'describe', title: '事件描述' },
|
||||||
|
{ field: 'type', title: '事件类型', sortable: true },
|
||||||
|
{ field: 'result', title: '操作结果', sortable: true },
|
||||||
|
{ field: 'ip', title: '操作IP' },
|
||||||
|
{ field: 'level', title: '事件等级', sortable: true }
|
||||||
|
],
|
||||||
|
loadCallback: () => {
|
||||||
|
getLogSize()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.loginName = ''
|
||||||
|
tableStore.table.params.type = ''
|
||||||
|
tableStore.table.params.operateType = ''
|
||||||
|
tableStore.table.params.result = null
|
||||||
|
tableStore.table.params.sortBy = ''
|
||||||
|
tableStore.table.params.orderBy = ''
|
||||||
|
tableStore.table.params.pageSize = 100
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
search()
|
||||||
|
onSubmit()
|
||||||
|
})
|
||||||
|
|
||||||
|
//下拉框查询
|
||||||
|
const search = () => {
|
||||||
|
getAllUserList().then(res => {
|
||||||
|
userName.value = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 统计
|
||||||
|
const details = () => {
|
||||||
|
flg.value = false
|
||||||
|
nextTick(() => {
|
||||||
|
statistics.value.tableStore.index()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const onSubmit = async () => {
|
||||||
|
flg.value = true
|
||||||
|
await tableStore.index()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询日志大小
|
||||||
|
const getLogSize = () => {
|
||||||
|
getMemoInfo().then(res => {
|
||||||
|
getSysConfig().then(re => {
|
||||||
|
if (res.data > re.data.logSize) {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
duration: 0,
|
||||||
|
message: '日志表存储空间已超过' + re.data.logSize + '(M)请及时备份清理!',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 备份
|
||||||
|
const backups = async () => {
|
||||||
|
loading.value = true
|
||||||
|
await logFileWriter({}).then(res => {})
|
||||||
|
setTimeout(() => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '文件备份成功'
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 恢复
|
||||||
|
const restore = () => {
|
||||||
|
loading.value = true
|
||||||
|
recoverLogFile({}).then(res => {})
|
||||||
|
setTimeout(() => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '文件恢复成功'
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
}, 50000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
127
src/views/pqs/auditManage/auditList/statistics.vue
Normal file
127
src/views/pqs/auditManage/auditList/statistics.vue
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form :inline="true" label-width="90px" class="">
|
||||||
|
<el-form-item label="用户名:">
|
||||||
|
<el-select v-model="tableStore.table.params.loginName" placeholder="用户名" clearable filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in userName"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.loginName"
|
||||||
|
:value="item.loginName"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件类型:">
|
||||||
|
<el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in eventType"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="操作类型:">
|
||||||
|
<el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in operationType"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button @click="back" :icon="Back">返回</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef_1" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { getAllUserList } from '@/api/auditManage/auditList'
|
||||||
|
import { Back } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
// defineOptions({
|
||||||
|
// name: 'admin/BusinessAdministrator/Audit/Operations/Management'
|
||||||
|
// })
|
||||||
|
|
||||||
|
interface UserInfo {
|
||||||
|
id: number | string
|
||||||
|
loginName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['back'])
|
||||||
|
|
||||||
|
const userName = ref<UserInfo[]>([])
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
const flg = ref(true)
|
||||||
|
|
||||||
|
const eventType = ref([
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
label: '业务事件类型'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '系统事件类型'
|
||||||
|
}
|
||||||
|
]) //事件类型
|
||||||
|
const operationType = ref([
|
||||||
|
{ id: 1, value: '查询' },
|
||||||
|
{ id: 2, value: '新增' },
|
||||||
|
{ id: 3, value: '更新' },
|
||||||
|
{ id: 4, value: '删除' },
|
||||||
|
{ id: 5, value: '认证' },
|
||||||
|
{ id: 6, value: '注销' },
|
||||||
|
{ id: 7, value: '上传' },
|
||||||
|
{ id: 8, value: '下载' },
|
||||||
|
{ id: 9, value: '越权访问' }
|
||||||
|
]) //操作类型
|
||||||
|
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/system-boot/audit/censusAuditLog',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
// 根据实际统计表格的列来定义
|
||||||
|
{ field: 'loginName', title: '操作人员' },
|
||||||
|
{ field: 'operateType', title: '事件类型' },
|
||||||
|
{ field: 'count', title: '事件总数' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.loginName = ''
|
||||||
|
tableStore.table.params.type = ''
|
||||||
|
tableStore.table.params.operateType = ''
|
||||||
|
tableStore.table.params.result = null
|
||||||
|
tableStore.table.params.sortBy = ''
|
||||||
|
tableStore.table.params.orderBy = ''
|
||||||
|
tableStore.table.params.pageSize = 100
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
search()
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
//下拉框查询
|
||||||
|
const search = () => {
|
||||||
|
getAllUserList().then(res => {
|
||||||
|
userName.value = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//返回
|
||||||
|
const back = () => {
|
||||||
|
flg.value = true
|
||||||
|
// 触发父组件的 onSubmit 方法
|
||||||
|
emit('back')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
55
src/views/pqs/auditManage/onlineUsers/index.vue
Normal file
55
src/views/pqs/auditManage/onlineUsers/index.vue
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<TableHeader select :showReset="false" showExport ref="TableHeaderRef"></TableHeader>
|
||||||
|
<Table ref="tableRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
defineOptions({
|
||||||
|
name: 'BusinessAdministrator/Audit/Operations/onlineUsers'
|
||||||
|
})
|
||||||
|
|
||||||
|
const formTabRef = ref()
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const show = ref(false)
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/system-boot/audit/getOnlineUsers',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
// {
|
||||||
|
// field: 'index',
|
||||||
|
// title: '序号',
|
||||||
|
// width: '80',
|
||||||
|
// formatter: (row: any) => {
|
||||||
|
// return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{ field: 'name', title: '昵称' },
|
||||||
|
{ field: 'loginName', title: '登录名' },
|
||||||
|
{
|
||||||
|
field: 'phone',
|
||||||
|
title: '手机号',
|
||||||
|
formatter(row: any) {
|
||||||
|
return row.phone ? row.phone : '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ field: 'time', title: '登录过期时间' },
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
title: '状态',
|
||||||
|
formatter(row: any) {
|
||||||
|
return row.status ? row.status : '在线'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
43
src/views/pqs/auditManage/userInfo/index.vue
Normal file
43
src/views/pqs/auditManage/userInfo/index.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<TableHeader datePicker :showReset="false" showExport ref="TableHeaderRef">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label="筛选数据">
|
||||||
|
<el-input v-model="tableStore.table.params.loginName" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
defineOptions({
|
||||||
|
name: 'BusinessAdministrator/Audit/Operations/userLoginInformation'
|
||||||
|
})
|
||||||
|
|
||||||
|
const formTabRef = ref()
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/system-boot/audit/getAuditLog',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ field: 'userName', title: '登录用户' },
|
||||||
|
{ field: 'ip', title: '登录ip' },
|
||||||
|
{ field: 'time', title: '登录时间' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.loginName = ''
|
||||||
|
tableStore.table.params.operateType = '认证'
|
||||||
|
tableStore.table.params.searchBeginTime = ''
|
||||||
|
tableStore.table.params.searchEndTime = ''
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -347,12 +347,12 @@ const onSubmit = async () => {
|
|||||||
}))
|
}))
|
||||||
|
|
||||||
// 设置有功功率图表
|
// 设置有功功率图表
|
||||||
setEChart(1, res1.data.data, '有功功率', 'kW')
|
setEChart(1, res1.data.data, '有功功率', 'W')
|
||||||
|
|
||||||
// 获取无功功率数据并设置图表
|
// 获取无功功率数据并设置图表
|
||||||
const res2 = await queryCarryCapacityQData(form)
|
const res2 = await queryCarryCapacityQData(form)
|
||||||
q_βminMap.value = res2.data.q_βminMap
|
q_βminMap.value = res2.data.q_βminMap
|
||||||
setEChart(2, res2.data.data, '无功功率', 'kVar')
|
setEChart(2, res2.data.data, '无功功率', 'Var')
|
||||||
|
|
||||||
// 获取谐波电流数据并设置图表
|
// 获取谐波电流数据并设置图表
|
||||||
const res3 = await queryCarryCapacityIData(form)
|
const res3 = await queryCarryCapacityIData(form)
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ const tableStore = new TableStore({
|
|||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '日志错误码',
|
title: '日志类型',
|
||||||
field: 'codeName',
|
field: 'codeName',
|
||||||
minWidth: '180',
|
minWidth: '180',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
|
|||||||
@@ -0,0 +1,691 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<div class="title">
|
||||||
|
变压器台账配置
|
||||||
|
<back-component />
|
||||||
|
</div>
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="5">
|
||||||
|
<div style="margin: 10px; border-right: 1px solid">
|
||||||
|
<div style="overflow-y: auto" class="xiaoshou" :style="height1">
|
||||||
|
<!-- <el-tree
|
||||||
|
class="filter-tree xiaoshou"
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="数据加载中"
|
||||||
|
:style="'height:' + vh2 + 'px'"
|
||||||
|
:data="treeMenuData"
|
||||||
|
:props="{ children: 'children', label: 'name' }"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:highlight-current="true"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
@node-click="handleNodeClick1"
|
||||||
|
ref="menuTree"
|
||||||
|
node-key="id"
|
||||||
|
>
|
||||||
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
||||||
|
<i :class="data.icon"></i>
|
||||||
|
<span class="title" :title="node.label">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</el-tree> -->
|
||||||
|
<DeviceTree
|
||||||
|
:default-expand-all="true"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
@init="handleNodeClick"
|
||||||
|
ref="menuTree"
|
||||||
|
></DeviceTree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="19">
|
||||||
|
<div class="mt10">
|
||||||
|
<TableHeader showExport :showSearch="false" ref="TableHeaderRef">
|
||||||
|
<template v-slot:select>
|
||||||
|
<span style="font-size: 14px; line-height: 40px; color: red;">
|
||||||
|
所选变电站:
|
||||||
|
<span style="color: black">{{ subName }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button type="primary" class="ml10" @click="transformerAdd" :icon="Plus">
|
||||||
|
新增变压器信息
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<div>
|
||||||
|
<!-- 为分页留出空间 -->
|
||||||
|
<Table ref="tableRef" height="calc(100vh - 308px)" :row-config="{ isCurrent: true, isHover: true }"></Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<!-- 变压器信息新增/修改 -->
|
||||||
|
<el-dialog
|
||||||
|
draggable
|
||||||
|
:title="transformerTitle"
|
||||||
|
v-model="transformerInformation"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
width="700px"
|
||||||
|
v-if="transformerInformation"
|
||||||
|
:before-close="resetForm"
|
||||||
|
>
|
||||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
|
||||||
|
<el-form-item label="变压器名:" prop="tfName">
|
||||||
|
<el-input v-model="ruleForm.tfName" placeholder="请输入" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="接线方式:" prop="wiring" class="top">
|
||||||
|
<el-select style="width: 100%" v-model="ruleForm.wiring" clearable placeholder="请选择接线方式">
|
||||||
|
<el-option
|
||||||
|
v-for="item in connectionType"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述:" class="top">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.tfDescribe"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="mt20 ml20">
|
||||||
|
<el-button @click="transformerInformation = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
<!-- 节点维护 -->
|
||||||
|
<el-dialog
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:title="maintenanceTitle"
|
||||||
|
v-model="nodemaintenanceInformation"
|
||||||
|
width="65%"
|
||||||
|
v-if="nodemaintenanceInformation"
|
||||||
|
>
|
||||||
|
<el-row :gutter="20" v-loading="isLoading3" element-loading-text="数据加载中">
|
||||||
|
<el-col :span="8">
|
||||||
|
<div style="border-right: 1px solid; height: 100%" class="xiaoshou">
|
||||||
|
<div style="overflow-y: auto; height: 100%; overflow-x: auto;max-height: 350px;" class="tree mr10 xiaoshou">
|
||||||
|
<el-input placeholder="输入关键字检索" v-model="filterText1" clearable></el-input>
|
||||||
|
<el-tree
|
||||||
|
style="cursor: pointer;display: inline-block;"
|
||||||
|
:data="treeMenuLeftData"
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="数据加载中"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
ref="menuTreeLeft"
|
||||||
|
highlight-current
|
||||||
|
:check-strictly="true"
|
||||||
|
:expand-on-click-node="true"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
:props="{ children: 'children', label: 'name' }"
|
||||||
|
@check="checkLeft"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span class="span-ellipsis">
|
||||||
|
<i :class="data.icon"></i>
|
||||||
|
<span class="title_1" :title="node.label">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form :model="messageInfo" label-width="90px">
|
||||||
|
<el-form-item label="变压器名称:">
|
||||||
|
<el-input disabled v-model="messageInfo.tfName" placeholder="变压器名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="变电站:" class="top">
|
||||||
|
<el-input disabled v-model="messageInfo.subIndexName" placeholder="变电站"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="接线方式:" class="top">
|
||||||
|
<el-input disabled v-model="messageInfo.wiring" placeholder="接线方式"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="更新人:" class="top">
|
||||||
|
<el-input disabled v-model="messageInfo.updateBy" placeholder="更新人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="更新时间:" class="top">
|
||||||
|
<el-input disabled v-model="messageInfo.updateTime" placeholder="更新时间"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div style="border-left: 1px solid; height: 100%" class="xiaoshou">
|
||||||
|
<div style="overflow-y: auto; height: 100%;overflow-x: auto;max-height: 350px;" class="ml10 tree xiaoshou">
|
||||||
|
<el-input placeholder="输入关键字检索" v-model="filterText2" clearable></el-input>
|
||||||
|
<el-tree
|
||||||
|
style="cursor: pointer"
|
||||||
|
:data="treeMenuRightData"
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="数据加载中"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
ref="menuTreeRight"
|
||||||
|
:check-strictly="true"
|
||||||
|
highlight-current
|
||||||
|
:expand-on-click-node="true"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
:props="{ children: 'children', label: 'name' }"
|
||||||
|
@check="checkRight"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span class="span-ellipsis">
|
||||||
|
<i :class="data.icon"></i>
|
||||||
|
<span class="title_1" :title="node.label">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="border-top: #dddfe5 solid 1px; margin-top: 10px; margin-bottom: 5px"></div>
|
||||||
|
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
|
||||||
|
<el-button @click="nodemaintenanceInformation = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="maintenanceOnsubmit">提交</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from 'vue'
|
||||||
|
import BackComponent from '@/components/icon/back/index.vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import DeviceTree from '@/components/tree/pqs/deviceTree.vue'
|
||||||
|
import { Plus, Setting } from '@element-plus/icons-vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import {
|
||||||
|
insertTransformer,
|
||||||
|
updateTransformer,
|
||||||
|
delTransformer,
|
||||||
|
nodeMaintenance,
|
||||||
|
getGeneratrix
|
||||||
|
} from '@/api/device-boot/transformerStrategy'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { calc } from '@/api/advance-boot/sgGroven/sgScheme'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'BusinessAdministrator/TerminalManagement/addLedger'
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
const dictData = useDictData()
|
||||||
|
|
||||||
|
const connectionType = dictData.getBasicData('Dev_Connect')
|
||||||
|
|
||||||
|
// 新增、修改
|
||||||
|
const transformerTitle = ref('新增变压器信息')
|
||||||
|
|
||||||
|
const transformerInformation = ref(false)
|
||||||
|
|
||||||
|
const ruleFormRef = ref()
|
||||||
|
|
||||||
|
const menuTree = ref()
|
||||||
|
|
||||||
|
const ruleForm = reactive({
|
||||||
|
tfName: '',
|
||||||
|
wiring: '',
|
||||||
|
subIndex: '',
|
||||||
|
tfDescribe: ''
|
||||||
|
})
|
||||||
|
// 树选择
|
||||||
|
const subName = ref('')
|
||||||
|
|
||||||
|
const parentId = ref('')
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
tfName: [{ required: true, message: '请输入变压器名', trigger: 'blur' }],
|
||||||
|
wiring: [{ required: true, message: '请选择接线方式', trigger: 'change' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 变压器节点维护
|
||||||
|
interface TreeNode {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
icon?: string
|
||||||
|
level?: number
|
||||||
|
disabled?: boolean
|
||||||
|
children?: TreeNode[]
|
||||||
|
}
|
||||||
|
const maintenanceTitle = ref('变压器节点维护')
|
||||||
|
const nodemaintenanceInformation = ref(false)
|
||||||
|
const loading = ref(false)
|
||||||
|
const isLoading3 = ref(false)
|
||||||
|
const filterText1 = ref('')
|
||||||
|
const filterText2 = ref('')
|
||||||
|
const menuTreeLeft = ref()
|
||||||
|
const menuTreeRight = ref()
|
||||||
|
const treeMenuLeftData = ref<TreeNode[]>([])
|
||||||
|
const treeMenuRightData = ref<TreeNode[]>([])
|
||||||
|
const messageInfo = reactive({
|
||||||
|
tfName: '',
|
||||||
|
subIndexName: '',
|
||||||
|
wiring: '',
|
||||||
|
updateBy: '',
|
||||||
|
updateTime: ''
|
||||||
|
})
|
||||||
|
const bind = ref<any[]>([])
|
||||||
|
const bindLevel = ref<number>(0)
|
||||||
|
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/pqsTransformer/transformerPage',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ title: '变压器名称', field: 'tfName' },
|
||||||
|
{ title: '变电站', field: 'subIndexName' },
|
||||||
|
{
|
||||||
|
title: '接线方式',
|
||||||
|
field: 'wiring',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
if (row.column.property == 'wiring') {
|
||||||
|
let title = ''
|
||||||
|
connectionType.forEach(item => {
|
||||||
|
if (item.id == row.row.wiring) {
|
||||||
|
title = item.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return title
|
||||||
|
} else {
|
||||||
|
return row.row[row.column.property]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '更新人', field: 'updateBy' },
|
||||||
|
{ title: '更新时间', field: 'updateTime' },
|
||||||
|
// {
|
||||||
|
// title: '等级',
|
||||||
|
// field: 'nodeGrade',
|
||||||
|
// render: 'tag',
|
||||||
|
// custom: {
|
||||||
|
// 0: 'success',
|
||||||
|
// 1: 'warning',
|
||||||
|
// 2: 'info'
|
||||||
|
// },
|
||||||
|
// replaceValue: {
|
||||||
|
// 0: '极重要',
|
||||||
|
// 1: '普通',
|
||||||
|
// 2: '备用'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '描述',
|
||||||
|
field: 'tfDescribe'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
width: '180',
|
||||||
|
render: 'buttons',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
name: 'maintenance',
|
||||||
|
title: '节点维护',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-Share',
|
||||||
|
render: 'basicButton',
|
||||||
|
click: async row => {
|
||||||
|
nodemaintenanceInformation.value = true
|
||||||
|
maintenance(JSON.parse(JSON.stringify(row)))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'edit',
|
||||||
|
title: '编辑',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton',
|
||||||
|
click: row => {
|
||||||
|
transformerInformation.value = true
|
||||||
|
transformerTitle.value = '修改变压器信息'
|
||||||
|
Object.assign(ruleForm, JSON.parse(JSON.stringify(row)))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'del',
|
||||||
|
title: '删除',
|
||||||
|
type: 'danger',
|
||||||
|
icon: 'el-icon-Delete',
|
||||||
|
render: 'confirmButton',
|
||||||
|
popconfirm: {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
confirmButtonType: 'danger',
|
||||||
|
title: '确定删除吗?'
|
||||||
|
},
|
||||||
|
click: row => {
|
||||||
|
delTransformer([row.tfIndex]).then(res => {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// beforeSearchFun: () => {
|
||||||
|
// for (let key in tableStore.table.params) {
|
||||||
|
// if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
|
||||||
|
// delete tableStore.table.params[key]
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
loadCallback: () => {}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.searchValue = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
|
||||||
|
const height = mainHeight(20)
|
||||||
|
const height1 = mainHeight(85)
|
||||||
|
const height2 = mainHeight(300)
|
||||||
|
|
||||||
|
//变压器新增
|
||||||
|
const transformerAdd = () => {
|
||||||
|
ruleForm.tfName = ''
|
||||||
|
ruleForm.wiring = ''
|
||||||
|
ruleForm.tfDescribe = ''
|
||||||
|
if (subName.value == '') {
|
||||||
|
ElMessage({
|
||||||
|
type: 'warning',
|
||||||
|
message: '请选择变电站'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
transformerTitle.value = '新增变压器信息'
|
||||||
|
transformerInformation.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
ruleFormRef.value.clearValidate()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 树选择
|
||||||
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
|
if (node.level == 4) {
|
||||||
|
subName.value =
|
||||||
|
node.parent.parent.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.parent.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.data.name
|
||||||
|
ruleForm.subIndex = node.data.id
|
||||||
|
tableStore.table.params.searchValue = node.data.id
|
||||||
|
parentId.value = node.data.id
|
||||||
|
} else if (node.level == 5) {
|
||||||
|
subName.value =
|
||||||
|
node.parent.parent.parent.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.parent.parent.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.parent.parent.data.name +
|
||||||
|
`>` +
|
||||||
|
node.parent.data.name
|
||||||
|
ruleForm.subIndex = node.parent.data.id
|
||||||
|
tableStore.table.params.searchValue = node.data.id
|
||||||
|
parentId.value = node.parent.data.id
|
||||||
|
} else {
|
||||||
|
tableStore.table.params.searchValue = ''
|
||||||
|
}
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
transformerInformation.value = false
|
||||||
|
Object.assign(ruleForm, {
|
||||||
|
tfName: '',
|
||||||
|
wiring: '',
|
||||||
|
subIndex: '',
|
||||||
|
tfDescribe: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 确认
|
||||||
|
const onSubmit = () => {
|
||||||
|
ruleFormRef.value.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
if (transformerTitle.value == '新增变压器信息') {
|
||||||
|
insertTransformer(ruleForm).then(res => {
|
||||||
|
ElMessage.success('新增变压器信息成功')
|
||||||
|
resetForm()
|
||||||
|
menuTree.value.loadData()
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
ElMessageBox.confirm('是否确认修改?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
updateTransformer(ruleForm).then(res => {
|
||||||
|
ElMessage.success('修改成功')
|
||||||
|
resetForm()
|
||||||
|
menuTree.value.loadData()
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 变压器维护
|
||||||
|
const maintenance = (val: any) => {
|
||||||
|
maintenanceTitle.value = '变压器节点维护'
|
||||||
|
maintenanceData.upNode = ''
|
||||||
|
maintenanceData.downNode = ''
|
||||||
|
maintenanceData.tfIndex = val.tfIndex
|
||||||
|
isLoading3.value = true
|
||||||
|
getGeneratrix({
|
||||||
|
id: val.tfIndex,
|
||||||
|
subId: val.subIndex
|
||||||
|
}).then(res => {
|
||||||
|
bind.value = res.data.bind
|
||||||
|
treeMenuLeftData.value = res.data.upNode
|
||||||
|
treeMenuRightData.value = res.data.downNode
|
||||||
|
setDisabled(treeMenuRightData.value)
|
||||||
|
setDisabled(treeMenuLeftData.value)
|
||||||
|
isLoading3.value = false
|
||||||
|
if (treeMenuLeftData.value && treeMenuLeftData.value.length > 0) {
|
||||||
|
treeMenuLeftData.value[0].children?.forEach(item => {
|
||||||
|
item.children?.forEach(item1 => {
|
||||||
|
item1.children?.forEach(item2 => {
|
||||||
|
item2.children?.forEach(item3 => {
|
||||||
|
if (item3.level != null) {
|
||||||
|
menuTreeLeft.value?.setCheckedKeys([item3.id])
|
||||||
|
maintenanceData.upNode = item3.id
|
||||||
|
bindLevel.value = item3.level
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (treeMenuRightData.value && treeMenuRightData.value.length > 0) {
|
||||||
|
treeMenuRightData.value[0].children?.forEach(item => {
|
||||||
|
item.children?.forEach(item1 => {
|
||||||
|
item1.children?.forEach(item2 => {
|
||||||
|
item2.children?.forEach(item3 => {
|
||||||
|
if (item3.level != null) {
|
||||||
|
menuTreeRight.value?.setCheckedKeys([item3.id])
|
||||||
|
maintenanceData.downNode = item3.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
nodemaintenanceInformation.value = true
|
||||||
|
})
|
||||||
|
Object.assign(messageInfo, JSON.parse(JSON.stringify(val)))
|
||||||
|
connectionType.forEach(item => {
|
||||||
|
if (messageInfo.wiring == item.id) {
|
||||||
|
messageInfo.wiring = item.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//设置禁选
|
||||||
|
const setDisabled = (treeData: any[]) => {
|
||||||
|
treeData.forEach((item) => {
|
||||||
|
item.disabled = true;
|
||||||
|
item.children.forEach((item1:any) => {
|
||||||
|
item1.disabled = true;
|
||||||
|
item1.children.forEach((item2:any) => {
|
||||||
|
item2.disabled = true;
|
||||||
|
item2.children.forEach((item3:any) => {
|
||||||
|
item3.disabled = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [filterText1.value, filterText2.value],
|
||||||
|
([newVal1, newVal2]) => {
|
||||||
|
menuTreeLeft.value.filter(newVal1)
|
||||||
|
menuTreeRight.value.filter(newVal2)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/**筛选节点 */
|
||||||
|
const filterNode = (value: any, data: any, node: any) => {
|
||||||
|
if (!value) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
let _array: boolean[] = [] // 显式声明类型为 boolean[]
|
||||||
|
getReturnNode(node, _array, value)
|
||||||
|
let result = false
|
||||||
|
_array.forEach(item => {
|
||||||
|
result = result || item
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
const getReturnNode = (node: any, _array: boolean[], value: string) => {
|
||||||
|
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
|
||||||
|
isPass ? _array.push(isPass) : ''
|
||||||
|
if (!isPass && node.level !== 1 && node.parent) {
|
||||||
|
getReturnNode(node.parent, _array, value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const maintenanceData = reactive({
|
||||||
|
upNode: '',
|
||||||
|
downNode: '',
|
||||||
|
tfIndex: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//上节点选择
|
||||||
|
const checkLeft = (checkedNodes: any, checkedKeys: any) => {
|
||||||
|
maintenanceData.upNode = checkedNodes.id
|
||||||
|
if (maintenanceData.upNode === maintenanceData.downNode) {
|
||||||
|
menuTreeRight.value?.setCheckedKeys([])
|
||||||
|
maintenanceData.downNode = ''
|
||||||
|
}
|
||||||
|
if (checkedKeys.checkedKeys.length > 1) {
|
||||||
|
menuTreeLeft.value?.setCheckedKeys([checkedNodes.id])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//下节点选择
|
||||||
|
const checkRight = (checkedNodes: any, checkedKeys: any) => {
|
||||||
|
maintenanceData.downNode = checkedNodes.id
|
||||||
|
if (maintenanceData.downNode === maintenanceData.upNode) {
|
||||||
|
menuTreeLeft.value?.setCheckedKeys([])
|
||||||
|
maintenanceData.upNode = ''
|
||||||
|
}
|
||||||
|
if (checkedKeys.checkedKeys.length > 1) {
|
||||||
|
menuTreeRight.value?.setCheckedKeys([checkedNodes.id])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//节点维护提交
|
||||||
|
const maintenanceOnsubmit = () => {
|
||||||
|
for (let i = 0; i < bind.value.length; i++) {
|
||||||
|
if (bind.value[i][0] == maintenanceData.upNode) {
|
||||||
|
for (let j = 0; j < bind.value.length; j++) {
|
||||||
|
if (bind.value[j][1] == maintenanceData.downNode) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'warning',
|
||||||
|
message: '上下节点无法选择相同母线!!!'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bindLevel.value != 5) {
|
||||||
|
for (let i = 0; i < bind.value.length; i++) {
|
||||||
|
if (maintenanceData.upNode == bind.value[i][1] && maintenanceData.downNode == bind.value[i][0]) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'warning',
|
||||||
|
message: '上下节点无法选择相同母线!!!'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeMaintenance(maintenanceData).then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '维护成功'
|
||||||
|
})
|
||||||
|
nodemaintenanceInformation.value = false
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xiaoshou {
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-ellipsis {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree {
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 540 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
337
src/views/pqs/business/terminal/transformerStrategy/index.vue
Normal file
337
src/views/pqs/business/terminal/transformerStrategy/index.vue
Normal file
@@ -0,0 +1,337 @@
|
|||||||
|
<!-- 变压器策略 -->
|
||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<TableHeader showExport :showSearch="false" ref="TableHeaderRef">
|
||||||
|
<template v-slot:select></template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
class="ml10"
|
||||||
|
@click="push('/admin/BusinessAdministrator/TerminalManagement/addLedger')"
|
||||||
|
:icon="Setting"
|
||||||
|
>
|
||||||
|
变压器台账配置
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" class="ml10" @click="add" :icon="Plus">新增策略</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }"></Table>
|
||||||
|
<el-dialog
|
||||||
|
draggable
|
||||||
|
:title="dialogTitle"
|
||||||
|
v-model="dialogFormVisible"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
width="700px"
|
||||||
|
:before-close="resetForm"
|
||||||
|
v-if="dialogFormVisible"
|
||||||
|
>
|
||||||
|
<el-row :gutter="20" v-loading="isLoading1" element-loading-text="数据加载中">
|
||||||
|
<el-col :span="10">
|
||||||
|
<div style="margin: 10px; overflow-y: auto; border-right: 1px solid" class="xiaoshou">
|
||||||
|
<el-tree
|
||||||
|
style="cursor: pointer; height: 380px"
|
||||||
|
:data="treeMenuData"
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="数据加载中"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
ref="menuTree"
|
||||||
|
highlight-current
|
||||||
|
:expand-on-click-node="true"
|
||||||
|
default-expand-all
|
||||||
|
:props="{ children: 'children', label: 'name' }"
|
||||||
|
@check="check"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span class="span-ellipsis">
|
||||||
|
<i :class="data.icon"></i>
|
||||||
|
<span class="title" :title="node.label">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="14">
|
||||||
|
<div class="box">
|
||||||
|
<el-form :model="form" label-width="100px" ref="ruleFormRef">
|
||||||
|
<el-form-item label="名称:">
|
||||||
|
<el-input v-model="form.tpName" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述:" class="mt20">
|
||||||
|
<el-input v-model="form.tfDescribe" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="mt20 ml20">
|
||||||
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
|
||||||
|
import { Plus, Setting } from '@element-plus/icons-vue'
|
||||||
|
import {
|
||||||
|
getFlgPloyInfo,
|
||||||
|
insertFlgPloy,
|
||||||
|
updateFlgPloy,
|
||||||
|
delFlgPloy,
|
||||||
|
getTransformerTree
|
||||||
|
} from '@/api/device-boot/transformerStrategy'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { ElButton } from 'element-plus'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
defineOptions({
|
||||||
|
name: '/BusinessAdministrator/TerminalManagement/transformerStrategy'
|
||||||
|
})
|
||||||
|
const { push } = useRouter()
|
||||||
|
const fontdveoption: any = ref([
|
||||||
|
{ id: 0, name: '极重要' },
|
||||||
|
{ id: 1, name: '普通' },
|
||||||
|
{ id: 2, name: '备用' }
|
||||||
|
])
|
||||||
|
const statusoption: any = ref([
|
||||||
|
{ id: 0, name: '未启用' },
|
||||||
|
{ id: 1, name: '启用' }
|
||||||
|
])
|
||||||
|
const height = mainHeight(70)
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
|
||||||
|
const ruleFormRef = ref()
|
||||||
|
|
||||||
|
const form: any = ref({
|
||||||
|
tpName: '',
|
||||||
|
tfDescribe: '',
|
||||||
|
tpIndex: '',
|
||||||
|
tfIndexs: []
|
||||||
|
})
|
||||||
|
|
||||||
|
const isLoading1 = ref(false)
|
||||||
|
const treeMenuData = ref([])
|
||||||
|
const menuTree = ref()
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
|
||||||
|
ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
|
||||||
|
nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
|
||||||
|
nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
|
||||||
|
maxProcessNum: [{ required: true, message: '最大进程数不可为空', trigger: 'blur' }],
|
||||||
|
sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
|
||||||
|
remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false)
|
||||||
|
|
||||||
|
const dialogTitle = ref('新增前置机')
|
||||||
|
const processId = ref('')
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/pqsTflgploy/flgployPage',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ title: '变压器策略名称', field: 'tpName' },
|
||||||
|
{ title: '更新时间', field: 'updateTime' },
|
||||||
|
// {
|
||||||
|
// title: '等级',
|
||||||
|
// field: 'nodeGrade',
|
||||||
|
// render: 'tag',
|
||||||
|
// custom: {
|
||||||
|
// 0: 'success',
|
||||||
|
// 1: 'warning',
|
||||||
|
// 2: 'info'
|
||||||
|
// },
|
||||||
|
// replaceValue: {
|
||||||
|
// 0: '极重要',
|
||||||
|
// 1: '普通',
|
||||||
|
// 2: '备用'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '变压器策略描述',
|
||||||
|
field: 'tfDescribe'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
width: '180',
|
||||||
|
render: 'buttons',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
name: 'edit',
|
||||||
|
title: '编辑',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton',
|
||||||
|
|
||||||
|
click: async row => {
|
||||||
|
dialogFormVisible.value = true
|
||||||
|
dialogTitle.value = '修改策略信息'
|
||||||
|
form.value = JSON.parse(JSON.stringify(row))
|
||||||
|
getFlgPloyInfo({ id: row.tpIndex }).then(res => {
|
||||||
|
menuTree.value.setCheckedKeys(res.data.tfIndexs)
|
||||||
|
form.value.tfIndexs = res.data.tfIndexs
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: 'edit',
|
||||||
|
// title: '重启',
|
||||||
|
// type: 'warning',
|
||||||
|
// icon: 'el-icon-Delete',
|
||||||
|
// render: 'confirmButton',
|
||||||
|
// popconfirm: {
|
||||||
|
// confirmButtonText: '确认',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// confirmButtonType: 'warning',
|
||||||
|
// title: '确定重启吗?'
|
||||||
|
// },
|
||||||
|
// click: row => {
|
||||||
|
// askRestartProcess({
|
||||||
|
// deviceRebootType: null,
|
||||||
|
// nodeId: row.id,
|
||||||
|
// processNo: 1
|
||||||
|
// }).then(res => {
|
||||||
|
// ElMessage.success('重启成功')
|
||||||
|
// tableStore.index()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'del',
|
||||||
|
title: '删除',
|
||||||
|
type: 'danger',
|
||||||
|
icon: 'el-icon-Delete',
|
||||||
|
render: 'confirmButton',
|
||||||
|
popconfirm: {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
confirmButtonType: 'danger',
|
||||||
|
title: '确定删除吗?'
|
||||||
|
},
|
||||||
|
click: row => {
|
||||||
|
delFlgPloy({ ids: row.tpIndex }).then(res => {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// beforeSearchFun: () => {
|
||||||
|
// for (let key in tableStore.table.params) {
|
||||||
|
// if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
|
||||||
|
// delete tableStore.table.params[key]
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
loadCallback: () => {}
|
||||||
|
})
|
||||||
|
const nodeId = ref('')
|
||||||
|
|
||||||
|
const treeRef = ref()
|
||||||
|
|
||||||
|
// tableStore.table.params.orderBy = 'desc'
|
||||||
|
// tableStore.table.params.nodeGrade = ''
|
||||||
|
// tableStore.table.params.searchState = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
// 变压器台账配置
|
||||||
|
const set = () => {
|
||||||
|
push({
|
||||||
|
path: 'addLedger',
|
||||||
|
query: {}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const add = () => {
|
||||||
|
dialogFormVisible.value = true
|
||||||
|
dialogTitle.value = '新增策略信息'
|
||||||
|
form.value = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
dialogFormVisible.value = false
|
||||||
|
form.value = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTree = () => {
|
||||||
|
isLoading1.value = true
|
||||||
|
getTransformerTree().then(res => {
|
||||||
|
treeMenuData.value = res.data
|
||||||
|
isLoading1.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认
|
||||||
|
const onSubmit = () => {
|
||||||
|
ruleFormRef.value.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
if (dialogTitle.value == '新增策略信息') {
|
||||||
|
insertFlgPloy(form.value).then(res => {
|
||||||
|
ElMessage.success('新增策略信息成功')
|
||||||
|
resetForm()
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
ElMessageBox.confirm('是否确认修改?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
updateFlgPloy(form.value).then(res => {
|
||||||
|
ElMessage.success('修改成功')
|
||||||
|
resetForm()
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//树多选
|
||||||
|
const check = (currentNode: any, checkedInfo: any) => {
|
||||||
|
form.value.tfIndexs = checkedInfo.checkedNodes
|
||||||
|
.filter((item: any) => !item.children || item.children.length === 0)
|
||||||
|
.map((item: any) => item.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getTree()
|
||||||
|
setTimeout(() => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
right: 60px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 300px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xiaoshou {
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ::-webkit-scrollbar {
|
||||||
|
// width: 8px !important;
|
||||||
|
// height: 14px;
|
||||||
|
// }
|
||||||
|
</style>
|
||||||
@@ -1,464 +1,465 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pd10">
|
<div class="pd10">
|
||||||
<el-card>
|
<el-card>
|
||||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
||||||
<el-form-item label="页面名称:" prop="pageName">
|
<el-form-item label="页面名称:" prop="pageName">
|
||||||
<el-input
|
<el-input
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
v-model.trim="form.pageName"
|
v-model.trim="form.pageName"
|
||||||
placeholder="请输入页面名称"
|
placeholder="请输入页面名称"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="页面排序:" prop="sort">
|
<el-form-item label="页面排序:" prop="sort">
|
||||||
<el-input
|
<el-input
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
show-word-limit-number
|
show-word-limit-number
|
||||||
v-model.trim.number="form.sort"
|
v-model.trim.number="form.sort"
|
||||||
:min="0"
|
:min="0"
|
||||||
:step="1"
|
:step="1"
|
||||||
step-strictly
|
step-strictly
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="备注:" class="top">
|
<el-form-item label="备注:" class="top">
|
||||||
<el-input
|
<el-input
|
||||||
maxlength="300"
|
maxlength="300"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="1"
|
:rows="1"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
v-model.trim="form.remark"
|
v-model.trim="form.remark"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<div style="width: 100%; display: flex; justify-content: end">
|
<div style="width: 100%; display: flex; justify-content: end">
|
||||||
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
||||||
<back-component />
|
<back-component />
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card class="mt10" :style="height">
|
<el-card class="mt10" :style="height">
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
||||||
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
||||||
<el-collapse-item
|
<el-collapse-item
|
||||||
v-for="item in treeComponents"
|
v-for="item in treeComponents"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:title="item.name"
|
:title="item.name"
|
||||||
:name="item.id"
|
:name="item.id"
|
||||||
>
|
>
|
||||||
<el-collapse v-model="activeNames1" class="ml20">
|
<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">
|
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
|
||||||
<div class="Box">
|
<div class="Box">
|
||||||
<div
|
<div
|
||||||
v-for="(s, index) in k.children"
|
v-for="(s, index) in k.children"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="mr10 mb10 imgBox"
|
class="mr10 mb10 imgBox"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
unselectable="on"
|
unselectable="on"
|
||||||
@drag="drag(s)"
|
@drag="drag(s)"
|
||||||
@dragend="dragEnd(s)"
|
@dragend="dragEnd(s)"
|
||||||
>
|
>
|
||||||
<div class="textName">{{ s.name }}</div>
|
<div class="textName">{{ s.name }}</div>
|
||||||
<img :src="s.image" style="width: 180px" />
|
<img :src="s.image" style="width: 180px" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 1" ref="wrapper">
|
<div style="flex: 1" ref="wrapper">
|
||||||
<GridLayout
|
<GridLayout
|
||||||
class="GridLayout"
|
class="GridLayout"
|
||||||
ref="gridLayout"
|
ref="gridLayout"
|
||||||
v-model:layout="layout"
|
v-model:layout="layout"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
:style="{ height: GridHeight + 'px' }"
|
:style="{ height: GridHeight + 'px' }"
|
||||||
:row-height="rowHeight"
|
:row-height="rowHeight"
|
||||||
:col-num="12"
|
:col-num="12"
|
||||||
:vertical-compact="false"
|
prevent-collision
|
||||||
>
|
:vertical-compact="false"
|
||||||
<template #item="{ item }">
|
>
|
||||||
<div class="imgBox">
|
<template #item="{ item }">
|
||||||
<div class="textName">{{ item.name }}</div>
|
<div class="imgBox">
|
||||||
<img
|
<div class="textName">{{ item.name }}</div>
|
||||||
:src="getImg(item.path)"
|
<img
|
||||||
:style="{
|
:src="getImg(item.path)"
|
||||||
height:
|
:style="{
|
||||||
item.h * rowHeight -
|
height:
|
||||||
(item.h == 1
|
item.h * rowHeight -
|
||||||
? 30
|
(item.h == 1
|
||||||
: item.h == 2
|
? 30
|
||||||
? 20
|
: item.h == 2
|
||||||
: item.h == 3
|
? 20
|
||||||
? 10
|
: item.h == 3
|
||||||
: item.h == 4
|
? 10
|
||||||
? -0
|
: item.h == 4
|
||||||
: item.h == 5
|
? -0
|
||||||
? -10
|
: item.h == 5
|
||||||
: -20) +
|
? -10
|
||||||
'px'
|
: -20) +
|
||||||
}"
|
'px'
|
||||||
/>
|
}"
|
||||||
<CloseBold class="remove" @click="removeItem(item.i)" />
|
/>
|
||||||
</div>
|
<CloseBold class="remove" @click="removeItem(item.i)" />
|
||||||
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
</div>
|
||||||
-->
|
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
||||||
</template>
|
-->
|
||||||
</GridLayout>
|
</template>
|
||||||
</div>
|
</GridLayout>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</template>
|
</div>
|
||||||
<script setup lang="ts">
|
</template>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
import BackComponent from '@/components/icon/back/index.vue'
|
import { useRouter } from 'vue-router'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import BackComponent from '@/components/icon/back/index.vue'
|
||||||
import type { CollapseIconPositionType } from 'element-plus'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import { componentTree } from '@/api/user-boot/user'
|
import type { CollapseIconPositionType } from 'element-plus'
|
||||||
import { GridLayout, GridItem } from 'grid-layout-plus'
|
import { componentTree } from '@/api/user-boot/user'
|
||||||
import { throttle } from 'lodash-es'
|
import { GridLayout, GridItem } from 'grid-layout-plus'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { throttle } from 'lodash-es'
|
||||||
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
||||||
import html2canvas from 'html2canvas'
|
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
||||||
const { go } = useRouter()
|
import html2canvas from 'html2canvas'
|
||||||
const { query } = useRoute()
|
const { go } = useRouter()
|
||||||
const height = mainHeight(108)
|
const { query } = useRoute()
|
||||||
const indicatorHeight = mainHeight(128)
|
const height = mainHeight(108)
|
||||||
const rowHeight = ref(0)
|
const indicatorHeight = mainHeight(128)
|
||||||
const GridHeight = ref(0)
|
const rowHeight = ref(0)
|
||||||
const position = ref<CollapseIconPositionType>('left')
|
const GridHeight = ref(0)
|
||||||
const form: any = reactive({
|
const position = ref<CollapseIconPositionType>('left')
|
||||||
pageName: '',
|
const form: any = reactive({
|
||||||
thumbnail: '',
|
pageName: '',
|
||||||
containerConfig: [],
|
thumbnail: '',
|
||||||
sort: '100',
|
containerConfig: [],
|
||||||
id: '',
|
sort: '100',
|
||||||
remark: ''
|
id: '',
|
||||||
})
|
remark: ''
|
||||||
const activeNames = ref([])
|
})
|
||||||
const activeNames1 = ref([])
|
const activeNames = ref([])
|
||||||
const rules = {
|
const activeNames1 = ref([])
|
||||||
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
const rules = {
|
||||||
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
||||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
||||||
}
|
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||||
const formRef = ref()
|
}
|
||||||
const layout: any = ref([
|
const formRef = ref()
|
||||||
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
|
const layout: any = ref([
|
||||||
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
|
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
|
||||||
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
|
||||||
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
|
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
||||||
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
|
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
|
||||||
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
|
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
|
||||||
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
|
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
|
||||||
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
|
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
|
||||||
// { x: 8, y: 0, w: 4, h: 2, i: '8', 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 treeComponents: any = ref([]) //组件树
|
||||||
const info = () => {
|
const treeComponentsCopy: any = ref([]) //组件树
|
||||||
activeNames.value = []
|
const info = () => {
|
||||||
activeNames1.value = []
|
activeNames.value = []
|
||||||
componentTree().then(res => {
|
activeNames1.value = []
|
||||||
treeComponents.value = res.data
|
componentTree().then(res => {
|
||||||
activeNames.value = treeComponents.value.map(item => item.id)
|
treeComponents.value = res.data
|
||||||
res.data.forEach(item => {
|
activeNames.value = treeComponents.value.map(item => item.id)
|
||||||
item.children.forEach(k => {
|
res.data.forEach(item => {
|
||||||
activeNames1.value.push(k.id)
|
item.children.forEach(k => {
|
||||||
})
|
activeNames1.value.push(k.id)
|
||||||
})
|
})
|
||||||
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
|
})
|
||||||
})
|
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
|
||||||
|
})
|
||||||
if (query.id) {
|
|
||||||
queryById({ id: query.id }).then(res => {
|
if (query.id) {
|
||||||
layout.value = JSON.parse(res.data.containerConfig)
|
queryById({ id: query.id }).then(res => {
|
||||||
form.pageName = res.data.pageName
|
layout.value = JSON.parse(res.data.containerConfig)
|
||||||
form.sort = res.data.sort
|
form.pageName = res.data.pageName
|
||||||
form.remark = res.data.remark
|
form.sort = res.data.sort
|
||||||
form.id = res.data.id
|
form.remark = res.data.remark
|
||||||
})
|
form.id = res.data.id
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 扁平化树
|
|
||||||
const tree2List = (list: any, id: any) => {
|
// 扁平化树
|
||||||
//存储结果的数组
|
const tree2List = (list: any, id: any) => {
|
||||||
let arr: any = []
|
//存储结果的数组
|
||||||
// 遍历 tree 数组
|
let arr: any = []
|
||||||
list.forEach((item: any) => {
|
// 遍历 tree 数组
|
||||||
item.uPid = id
|
list.forEach((item: any) => {
|
||||||
item.uId = Math.random() * 1000
|
item.uPid = id
|
||||||
// 判断item是否存在children
|
item.uId = Math.random() * 1000
|
||||||
if (!item.children) return arr.push(item)
|
// 判断item是否存在children
|
||||||
// 函数递归,对children数组进行tree2List的转换
|
if (!item.children) return arr.push(item)
|
||||||
const children = tree2List(item.children, item.uId)
|
// 函数递归,对children数组进行tree2List的转换
|
||||||
// 删除item的children属性
|
const children = tree2List(item.children, item.uId)
|
||||||
delete item.children
|
// 删除item的children属性
|
||||||
// 把item和children数组添加至结果数组
|
delete item.children
|
||||||
//..children: 意思是把children数组展开
|
// 把item和children数组添加至结果数组
|
||||||
arr.push(item, ...children)
|
//..children: 意思是把children数组展开
|
||||||
})
|
arr.push(item, ...children)
|
||||||
// 返回结果数组
|
})
|
||||||
return arr
|
// 返回结果数组
|
||||||
}
|
return arr
|
||||||
// 删除拖拽
|
}
|
||||||
const removeItem = (id: string) => {
|
// 删除拖拽
|
||||||
const index = layout.value.findIndex(item => item.i === id)
|
const removeItem = (id: string) => {
|
||||||
|
const index = layout.value.findIndex(item => item.i === id)
|
||||||
if (index > -1) {
|
|
||||||
layout.value.splice(index, 1)
|
if (index > -1) {
|
||||||
}
|
layout.value.splice(index, 1)
|
||||||
}
|
}
|
||||||
const wrapper = ref<HTMLElement>()
|
}
|
||||||
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
const wrapper = ref<HTMLElement>()
|
||||||
|
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
||||||
const mouseAt = { x: -1, y: -1 }
|
|
||||||
|
const mouseAt = { x: -1, y: -1 }
|
||||||
function syncMousePosition(event: MouseEvent) {
|
|
||||||
mouseAt.x = event.clientX
|
function syncMousePosition(event: MouseEvent) {
|
||||||
mouseAt.y = event.clientY
|
mouseAt.x = event.clientX
|
||||||
}
|
mouseAt.y = event.clientY
|
||||||
|
}
|
||||||
const dropId = 'drop'
|
|
||||||
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
|
const dropId = 'drop'
|
||||||
|
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
|
||||||
const drag = throttle(row => {
|
|
||||||
// console.log("🚀 ~ drag ~ row:", row)
|
const drag = throttle(row => {
|
||||||
|
// console.log("🚀 ~ drag ~ row:", row)
|
||||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
|
||||||
|
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||||
if (!parentRect || !gridLayout.value) return
|
|
||||||
|
if (!parentRect || !gridLayout.value) return
|
||||||
const mouseInGrid =
|
|
||||||
mouseAt.x > parentRect.left &&
|
const mouseInGrid =
|
||||||
mouseAt.x < parentRect.right &&
|
mouseAt.x > parentRect.left &&
|
||||||
mouseAt.y > parentRect.top &&
|
mouseAt.x < parentRect.right &&
|
||||||
mouseAt.y < parentRect.bottom
|
mouseAt.y > parentRect.top &&
|
||||||
|
mouseAt.y < parentRect.bottom
|
||||||
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
|
|
||||||
layout.value.push({
|
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
|
||||||
x: (layout.value.length * 2) % 6,
|
layout.value.push({
|
||||||
y: layout.value.length + 6, // puts it at the bottom
|
x: (layout.value.length * 2) % 6,
|
||||||
w: 4,
|
y: layout.value.length + 6, // puts it at the bottom
|
||||||
h: 2,
|
w: 4,
|
||||||
i: dropId
|
h: 2,
|
||||||
})
|
i: dropId
|
||||||
}
|
})
|
||||||
|
}
|
||||||
const index = layout.value.findIndex(item => item.i === dropId)
|
|
||||||
|
const index = layout.value.findIndex(item => item.i === dropId)
|
||||||
if (index !== -1) {
|
|
||||||
const item = gridLayout.value.getItem(dropId)
|
if (index !== -1) {
|
||||||
|
const item = gridLayout.value.getItem(dropId)
|
||||||
if (!item) return
|
|
||||||
|
if (!item) return
|
||||||
try {
|
|
||||||
item.wrapper.style.display = 'none'
|
try {
|
||||||
} catch (e) {}
|
item.wrapper.style.display = 'none'
|
||||||
|
} catch (e) {}
|
||||||
Object.assign(item.state, {
|
|
||||||
top: mouseAt.y - parentRect.top,
|
Object.assign(item.state, {
|
||||||
left: mouseAt.x - parentRect.left
|
top: mouseAt.y - parentRect.top,
|
||||||
})
|
left: mouseAt.x - parentRect.left
|
||||||
const newPos = item.calcXY(mouseAt.y - parentRect.top, 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)
|
if (mouseInGrid) {
|
||||||
dragItem.i = String(index)
|
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||||
dragItem.x = layout.value[index].x
|
dragItem.i = String(index)
|
||||||
dragItem.y = layout.value[index].y
|
dragItem.x = layout.value[index].x
|
||||||
} else {
|
dragItem.y = layout.value[index].y
|
||||||
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
} else {
|
||||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
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)
|
function dragEnd(row: any) {
|
||||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
console.log('🚀 ~ drag ~ row:', row)
|
||||||
|
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||||
if (!parentRect || !gridLayout.value) return
|
|
||||||
|
if (!parentRect || !gridLayout.value) return
|
||||||
const mouseInGrid =
|
|
||||||
mouseAt.x > parentRect.left &&
|
const mouseInGrid =
|
||||||
mouseAt.x < parentRect.right &&
|
mouseAt.x > parentRect.left &&
|
||||||
mouseAt.y > parentRect.top &&
|
mouseAt.x < parentRect.right &&
|
||||||
mouseAt.y < parentRect.bottom
|
mouseAt.y > parentRect.top &&
|
||||||
|
mouseAt.y < parentRect.bottom
|
||||||
if (mouseInGrid) {
|
|
||||||
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
if (mouseInGrid) {
|
||||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||||
} else {
|
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||||
return
|
} else {
|
||||||
}
|
return
|
||||||
|
}
|
||||||
layout.value.push({
|
|
||||||
x: dragItem.x,
|
layout.value.push({
|
||||||
y: dragItem.y,
|
x: dragItem.x,
|
||||||
w: dragItem.w,
|
y: dragItem.y,
|
||||||
h: dragItem.h,
|
w: dragItem.w,
|
||||||
i: dragItem.i,
|
h: dragItem.h,
|
||||||
name: row.name,
|
i: dragItem.i,
|
||||||
path: row.path,
|
name: row.name,
|
||||||
icon: row.icon,
|
path: row.path,
|
||||||
timeKey: row.timeKey
|
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)
|
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||||
if (!item) return
|
const item = gridLayout.value.getItem(dropId)
|
||||||
try {
|
if (!item) return
|
||||||
item.wrapper.style.display = ''
|
try {
|
||||||
} catch (e) {}
|
item.wrapper.style.display = ''
|
||||||
}
|
} catch (e) {}
|
||||||
// 保存
|
}
|
||||||
const onSubmit = () => {
|
// 保存
|
||||||
if (layout.value.length == 0) {
|
const onSubmit = () => {
|
||||||
return ElMessage.warning('页面设计不能为空!')
|
if (layout.value.length == 0) {
|
||||||
}
|
return ElMessage.warning('页面设计不能为空!')
|
||||||
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
}
|
||||||
if (maxValue > 6) {
|
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
||||||
return ElMessage.warning('组件不能超出当前容器!')
|
if (maxValue > 6) {
|
||||||
}
|
return ElMessage.warning('组件不能超出当前容器!')
|
||||||
|
}
|
||||||
formRef.value.validate(async (valid: boolean) => {
|
|
||||||
let url = ''
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
await html2canvas(document.querySelector('.GridLayout'), {
|
let url = ''
|
||||||
useCORS: true
|
await html2canvas(document.querySelector('.GridLayout'), {
|
||||||
}).then(canvas => {
|
useCORS: true
|
||||||
url = canvas.toDataURL('image/png')
|
}).then(canvas => {
|
||||||
})
|
url = canvas.toDataURL('image/png')
|
||||||
|
})
|
||||||
if (valid) {
|
|
||||||
if (form.id == '') {
|
if (valid) {
|
||||||
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
if (form.id == '') {
|
||||||
(res: any) => {
|
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||||
ElMessage.success('新增页面成功!')
|
(res: any) => {
|
||||||
go(-1)
|
ElMessage.success('新增页面成功!')
|
||||||
}
|
go(-1)
|
||||||
)
|
}
|
||||||
} else {
|
)
|
||||||
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
} else {
|
||||||
(res: any) => {
|
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||||
ElMessage.success('修改页面成功!')
|
(res: any) => {
|
||||||
go(-1)
|
ElMessage.success('修改页面成功!')
|
||||||
}
|
go(-1)
|
||||||
)
|
}
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
const getImg = throttle((path: string) => {
|
}
|
||||||
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
const getImg = throttle((path: string) => {
|
||||||
})
|
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
||||||
onMounted(() => {
|
})
|
||||||
info()
|
onMounted(() => {
|
||||||
|
info()
|
||||||
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
|
||||||
rowHeight.value = GridHeight.value / 6 - 11.5
|
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
||||||
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
rowHeight.value = GridHeight.value / 6 - 11.5
|
||||||
document.addEventListener('dragover', syncMousePosition)
|
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
||||||
})
|
document.addEventListener('dragover', syncMousePosition)
|
||||||
|
})
|
||||||
onBeforeUnmount(() => {
|
|
||||||
document.removeEventListener('dragover', syncMousePosition)
|
onBeforeUnmount(() => {
|
||||||
})
|
document.removeEventListener('dragover', syncMousePosition)
|
||||||
// onMounted(() => {
|
})
|
||||||
|
// onMounted(() => {
|
||||||
// // document.addEventListener('dragover', syncMousePosition)
|
|
||||||
// })
|
// // document.addEventListener('dragover', syncMousePosition)
|
||||||
</script>
|
// })
|
||||||
<style lang="scss" scoped>
|
</script>
|
||||||
.form-four {
|
<style lang="scss" scoped>
|
||||||
display: flex;
|
.form-four {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-wrap: wrap;
|
||||||
.el-form-item {
|
justify-content: space-between;
|
||||||
display: flex;
|
.el-form-item {
|
||||||
flex: 1;
|
display: flex;
|
||||||
align-items: center;
|
flex: 1;
|
||||||
.el-form-item__content {
|
align-items: center;
|
||||||
width: 100%;
|
.el-form-item__content {
|
||||||
flex: 1;
|
width: 100%;
|
||||||
.el-select,
|
flex: 1;
|
||||||
.el-cascader,
|
.el-select,
|
||||||
.el-input__inner,
|
.el-cascader,
|
||||||
.el-date-editor {
|
.el-input__inner,
|
||||||
width: 100%;
|
.el-date-editor {
|
||||||
}
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:deep(.el-card__body) {
|
}
|
||||||
padding: 20px 20px 12px;
|
:deep(.el-card__body) {
|
||||||
}
|
padding: 20px 20px 12px;
|
||||||
.Box {
|
}
|
||||||
display: flex;
|
.Box {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
.imgBox {
|
}
|
||||||
// padding: 10px;
|
.imgBox {
|
||||||
display: flex;
|
// padding: 10px;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
box-shadow: var(--el-box-shadow-light);
|
|
||||||
--el-card-border-color: var(--el-border-color-light);
|
box-shadow: var(--el-box-shadow-light);
|
||||||
--el-card-border-radius: 4px;
|
--el-card-border-color: var(--el-border-color-light);
|
||||||
--el-card-padding: 20px;
|
--el-card-border-radius: 4px;
|
||||||
--el-card-bg-color: var(--el-fill-color-blank);
|
--el-card-padding: 20px;
|
||||||
background-color: var(--el-card-bg-color);
|
--el-card-bg-color: var(--el-fill-color-blank);
|
||||||
border: 1px solid var(--el-card-border-color);
|
background-color: var(--el-card-bg-color);
|
||||||
border-radius: var(--el-card-border-radius);
|
border: 1px solid var(--el-card-border-color);
|
||||||
color: var(--el-text-color-primary);
|
border-radius: var(--el-card-border-radius);
|
||||||
overflow: hidden;
|
color: var(--el-text-color-primary);
|
||||||
transition: var(--el-transition-duration) 0.3s;
|
overflow: hidden;
|
||||||
.textName {
|
transition: var(--el-transition-duration) 0.3s;
|
||||||
padding: 2px 5px;
|
.textName {
|
||||||
background-color: var(--el-color-primary);
|
padding: 2px 5px;
|
||||||
color: #fff;
|
background-color: var(--el-color-primary);
|
||||||
}
|
color: #fff;
|
||||||
user-select: none; /* 标准属性 */
|
}
|
||||||
-webkit-user-select: none; /* Chrome/Safari */
|
user-select: none; /* 标准属性 */
|
||||||
-moz-user-select: none; /* Firefox */
|
-webkit-user-select: none; /* Chrome/Safari */
|
||||||
-ms-user-select: none; /* IE/Edge */
|
-moz-user-select: none; /* Firefox */
|
||||||
}
|
-ms-user-select: none; /* IE/Edge */
|
||||||
.vgl-layout {
|
}
|
||||||
background-color: #eee;
|
.vgl-layout {
|
||||||
}
|
background-color: #eee;
|
||||||
|
}
|
||||||
.remove {
|
|
||||||
position: absolute;
|
.remove {
|
||||||
top: 5px;
|
position: absolute;
|
||||||
right: 2px;
|
top: 5px;
|
||||||
width: 16px;
|
right: 2px;
|
||||||
color: #fff;
|
width: 16px;
|
||||||
cursor: pointer;
|
color: #fff;
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
.vgl-layout::before {
|
|
||||||
position: absolute;
|
.vgl-layout::before {
|
||||||
width: calc(100% - 5px);
|
position: absolute;
|
||||||
height: calc(100% - 5px);
|
width: calc(100% - 5px);
|
||||||
margin: 5px;
|
height: calc(100% - 5px);
|
||||||
content: '';
|
margin: 5px;
|
||||||
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
|
content: '';
|
||||||
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
|
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
|
||||||
background-repeat: repeat;
|
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
|
||||||
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
|
background-repeat: repeat;
|
||||||
}
|
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
|
||||||
|
}
|
||||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
|
||||||
background-color: #fff;
|
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||||
border: 1px solid black;
|
background-color: #fff;
|
||||||
}
|
border: 1px solid black;
|
||||||
</style>
|
}
|
||||||
|
</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 BackComponent from '@/components/icon/back/index.vue'
|
||||||
import completenessDetails from './completenessDetails.vue'
|
import completenessDetails from './completenessDetails.vue'
|
||||||
import { genFileId, ElMessage } from 'element-plus'
|
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'
|
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'division/aListOfLoadData'
|
name: 'division/aListOfLoadData'
|
||||||
@@ -78,6 +78,9 @@ const tableStore = new TableStore({
|
|||||||
title: '完整性详情',
|
title: '完整性详情',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-Plus',
|
icon: 'el-icon-Plus',
|
||||||
|
disabled: row => {
|
||||||
|
return row.integrity == 1
|
||||||
|
},
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
click: row => {
|
click: row => {
|
||||||
completenessDetailsRef.value.open(row.id)
|
completenessDetailsRef.value.open(row.id)
|
||||||
@@ -129,7 +132,7 @@ const submitupload = () => {
|
|||||||
ElMessage.warning('请上传文件!')
|
ElMessage.warning('请上传文件!')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
ElMessage.info('上传中,请稍等...')
|
ElMessage.info('上传中,请稍等...')
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', fileList.value[0].raw)
|
formData.append('file', fileList.value[0].raw)
|
||||||
loading.value = true
|
loading.value = true
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
|
<el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
|
||||||
<TableHeader :showReset="false" ref="TableHeaderRef">
|
<TableHeader :showReset="false" ref="TableHeaderRef">
|
||||||
<template #select>
|
<template #select>
|
||||||
@@ -13,11 +12,9 @@
|
|||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef"></Table>
|
<Table ref="tableRef"></Table>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
@@ -33,15 +30,20 @@ const tableStore = new TableStore({
|
|||||||
{ title: '数据名', field: 'name' },
|
{ title: '数据名', field: 'name' },
|
||||||
{ title: '用户名', field: 'userName' },
|
{ title: '用户名', field: 'userName' },
|
||||||
{ title: '测量点局号', field: 'lineNo' },
|
{ title: '测量点局号', field: 'lineNo' },
|
||||||
{ title: '日期', field: 'upDataTime' },
|
{ title: '日期', field: 'updateTime' },
|
||||||
{ title: '完整性', field: 'integrity' },
|
{
|
||||||
|
title: '完整性(%)',
|
||||||
|
field: 'integrity',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return Math.floor(row.cellValue * 10000) / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
],
|
],
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tableStore.table.height = mainHeight(0,2).height as any
|
tableStore.table.height = mainHeight(0, 2).height as any
|
||||||
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
||||||
|
}, 0)
|
||||||
}, 0)
|
|
||||||
// setTimeout(() => { tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
|
// setTimeout(() => { tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -49,17 +51,12 @@ const tableStore = new TableStore({
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.searchValue = ''
|
||||||
const open = (id: string) => {
|
const open = (id: string) => {
|
||||||
|
|
||||||
tableStore.table.params.userDataId = id
|
tableStore.table.params.userDataId = id
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
|
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -4,7 +4,8 @@
|
|||||||
<div class="title">
|
<div class="title">
|
||||||
贡献度计算
|
贡献度计算
|
||||||
<div style="font-size: 14px; font-weight: 500">
|
<div style="font-size: 14px; font-weight: 500">
|
||||||
{{ dotList.alias || '' }}
|
<!-- {{ dotList.alias || '' }} -->
|
||||||
|
<span class="monitoring-point">当前位置:{{ dotList.alias || '' }}</span>
|
||||||
<back-component />
|
<back-component />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,7 +46,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负荷数据:">
|
<el-form-item label="负荷数据:">
|
||||||
<el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据">
|
<el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in loadDataOptions"
|
v-for="item in loadDataOptions"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@@ -61,7 +62,7 @@
|
|||||||
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
|
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" v-if="showTabs">
|
<el-tabs v-model="activeName" type="border-card" class="mr10" v-if="showTabs">
|
||||||
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
|
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
|
||||||
<div class="pd10">
|
<div class="pd10">
|
||||||
<div>
|
<div>
|
||||||
@@ -75,31 +76,93 @@
|
|||||||
format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
||||||
date-format="YYYY-MM-DD"
|
date-format="YYYY-MM-DD"
|
||||||
time-format="YYYY-MM-DD"
|
time-format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
:disabled-date="handleDisabledDate"
|
:disabled-date="handleDisabledDate"
|
||||||
/>
|
/>
|
||||||
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
|
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
|
||||||
执行
|
执行
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.showExecute">
|
<div v-if="item.showEcahr == 1" class="harmonicButton">
|
||||||
<el-form :inline="true" v-model="item.form" class="mt10">
|
<el-form :inline="true" v-model="item.form">
|
||||||
<el-form-item label="限值:">
|
<el-form-item label="限值:" v-if="item.showDynamic">
|
||||||
<el-input v-model="item.form.limit" placeholder="请输入限值" />
|
<el-input v-model="item.form.limit" placeholder="请选择限值" disabled>
|
||||||
|
<template #append>
|
||||||
|
<el-button
|
||||||
|
:icon="Edit"
|
||||||
|
:class="[code == 0 ? 'frontBox' : '']"
|
||||||
|
@click="setCode(0)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="时间点一:">
|
<el-form-item label="时间点一:" v-if="item.showDynamic">
|
||||||
<el-input v-model="item.form.time1" placeholder="请输入时间点一" />
|
<el-input v-model="item.form.time1" placeholder="请选择时间点一" disabled>
|
||||||
|
<template #append>
|
||||||
|
<el-button
|
||||||
|
:icon="Edit"
|
||||||
|
:class="[code == 1 ? 'frontBox' : '']"
|
||||||
|
@click="setCode(1)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="时间点二:">
|
<el-form-item label="时间点二:" v-if="item.showDynamic">
|
||||||
<el-input v-model="item.form.time2" placeholder="请输入时间点二" />
|
<el-input v-model="item.form.time2" placeholder="请选择时间点二" disabled>
|
||||||
|
<template #append>
|
||||||
|
<el-button
|
||||||
|
:icon="Edit"
|
||||||
|
:class="[code == 2 ? 'frontBox' : '']"
|
||||||
|
@click="setCode(2)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-Document">
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-Document"
|
||||||
|
@click="generateFn"
|
||||||
|
v-if="!item.showDynamic"
|
||||||
|
>
|
||||||
生成动态谐波责任数据
|
生成动态谐波责任数据
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" icon="el-icon-Document">生成谐波责任指标</el-button>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-Document"
|
||||||
|
v-else
|
||||||
|
@click="generateMetrics"
|
||||||
|
>
|
||||||
|
生成谐波责任指标
|
||||||
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="box" v-loading="loading">
|
||||||
|
<MyEChart :options="item.options" v-if="item.showEcahr == 1" @group="group" />
|
||||||
|
<el-empty description="时间范围内无谐波数据" v-if="item.showEcahr == 2" />
|
||||||
|
</div>
|
||||||
|
<!-- 生成动态谐波责任数据 -->
|
||||||
|
<div class="box boxTab" v-loading="loading1">
|
||||||
|
<MyEChart :options="item.dynamicOptions" style="flex: 1" v-if="item.showDynamic" />
|
||||||
|
<div style="width: 500px">
|
||||||
|
<vxe-table
|
||||||
|
v-if="item.showDynamic"
|
||||||
|
ref="tableRef"
|
||||||
|
:data="item.dynamicData"
|
||||||
|
height="auto"
|
||||||
|
v-bind="defaultAttribute"
|
||||||
|
>
|
||||||
|
<vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
|
||||||
|
<vxe-column field="responsibilityData" title="责任数据(%)" width="120">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
{{ Math.floor(row.responsibilityData * 10000) / 10000 }}
|
||||||
|
</template>
|
||||||
|
</vxe-column>
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
@@ -112,14 +175,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import 'splitpanes/dist/splitpanes.css'
|
import 'splitpanes/dist/splitpanes.css'
|
||||||
import { Splitpanes, Pane } from 'splitpanes'
|
import { Splitpanes, Pane } from 'splitpanes'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||||
import BackComponent from '@/components/icon/back/index.vue'
|
import BackComponent from '@/components/icon/back/index.vue'
|
||||||
import { harmonicOptions } from '@/utils/dictionary'
|
import { harmonicOptions } from '@/utils/dictionary'
|
||||||
import { userDataList } from '@/api/advance-boot/division'
|
import { userDataList, getHistoryHarmData, getDynamicData, getResponsibilityData } from '@/api/advance-boot/division'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { formatDate } from '@/utils/formatTime'
|
import { Edit } from '@element-plus/icons-vue'
|
||||||
import { getHistoryHarmData } from '@/api/advance-boot/division'
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { timeFormat } from '@/utils/common'
|
||||||
|
import { yMethod } from '@/utils/echartMethod'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'division/compute'
|
name: 'division/compute'
|
||||||
})
|
})
|
||||||
@@ -132,23 +198,29 @@ const size = ref(0)
|
|||||||
const showTabs = ref(false)
|
const showTabs = ref(false)
|
||||||
const loadDataOptions: any = ref([])
|
const loadDataOptions: any = ref([])
|
||||||
const form: any = reactive({
|
const form: any = reactive({
|
||||||
type: '0',
|
type: '1',
|
||||||
index: [],
|
index: [],
|
||||||
loadData: ''
|
loadDataId: ''
|
||||||
})
|
})
|
||||||
|
const code = ref(3)
|
||||||
|
const xAxisData = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const loading1 = ref(false)
|
||||||
const tabList: any = ref([])
|
const tabList: any = ref([])
|
||||||
const activeName = ref(0)
|
const activeName = ref(0)
|
||||||
|
const xValue = ref('')
|
||||||
const handleNodeClick = (data: any, node: any) => {
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
if (data.level == 6) {
|
if (data.level == 6) {
|
||||||
dotList.value = data
|
dotList.value = data
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 设置时间
|
// 设置时间
|
||||||
|
const timeFrame = ref(['', ''])
|
||||||
// 处理日期禁用逻辑
|
// 处理日期禁用逻辑
|
||||||
const handleDisabledDate = date => {
|
const handleDisabledDate = date => {
|
||||||
// 定义时间边界
|
// 定义时间边界
|
||||||
const startLimit = new Date(tabList.value[0].time[0]).getTime()
|
const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
|
||||||
const endLimit = new Date(tabList.value[0].time[1]).setHours(23, 59, 59, 999)
|
const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
|
||||||
|
|
||||||
// 如果日期不存在(选择今天时可能出现),不禁用
|
// 如果日期不存在(选择今天时可能出现),不禁用
|
||||||
if (!date) return false
|
if (!date) return false
|
||||||
@@ -156,16 +228,26 @@ const handleDisabledDate = date => {
|
|||||||
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期
|
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期
|
||||||
return date.getTime() < startLimit || date.getTime() > endLimit
|
return date.getTime() < startLimit || date.getTime() > endLimit
|
||||||
}
|
}
|
||||||
|
// 这是按钮变色
|
||||||
|
const setCode = (num: number) => {
|
||||||
|
if (code.value == num) {
|
||||||
|
return (code.value = 3)
|
||||||
|
}
|
||||||
|
code.value = num
|
||||||
|
}
|
||||||
// 确定
|
// 确定
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
if (form.loadData == '') {
|
if (form.loadDataId == '') {
|
||||||
return ElMessage.warning('请选择负荷数据')
|
return ElMessage.warning('请选择负荷数据')
|
||||||
}
|
}
|
||||||
|
if (form.index.length == 0) {
|
||||||
|
return ElMessage.warning('请选择谐波次数')
|
||||||
|
}
|
||||||
|
|
||||||
if (form.index.length == 0) {
|
if (form.index.length == 0) {
|
||||||
showTabs.value = false
|
showTabs.value = false
|
||||||
} else {
|
} else {
|
||||||
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadData)[0]
|
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadDataId)[0]
|
||||||
showTabs.value = true
|
showTabs.value = true
|
||||||
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
|
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
|
||||||
tabList.value = []
|
tabList.value = []
|
||||||
@@ -179,24 +261,311 @@ const submit = () => {
|
|||||||
limit: '',
|
limit: '',
|
||||||
time1: '',
|
time1: '',
|
||||||
time2: ''
|
time2: ''
|
||||||
}
|
},
|
||||||
|
showEcahr: 3, //1显示echart 2显示无数据 3什么都没有
|
||||||
|
options: {},
|
||||||
|
dynamicOptions: {}, //动态echarts
|
||||||
|
dynamicList: {}, //动态echarts
|
||||||
|
showDynamic: false //动态执行展示
|
||||||
})
|
})
|
||||||
|
timeFrame.value = [timeList.startTime, timeList.endTime]
|
||||||
})
|
})
|
||||||
// tabList.value =
|
code.value = 3
|
||||||
activeName.value = 0
|
activeName.value = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 执行
|
// 执行
|
||||||
const execute = (item: any, index: number) => {
|
const execute = async (item: any, index: number) => {
|
||||||
getHistoryHarmData({
|
tabList.value[activeName.value].showDynamic = false
|
||||||
|
loading.value = true
|
||||||
|
await getHistoryHarmData({
|
||||||
searchBeginTime: item.time[0],
|
searchBeginTime: item.time[0],
|
||||||
searchEndTime: item.time[1],
|
searchEndTime: item.time[1],
|
||||||
type: form.type,
|
type: form.type,
|
||||||
time: item.key,
|
time: item.key,
|
||||||
// userDataId:form.loadData,
|
|
||||||
lineId: dotList.value.id
|
lineId: dotList.value.id
|
||||||
}).then((res: any) => {})
|
})
|
||||||
tabList.value[index].showExecute = true
|
.then((res: any) => {
|
||||||
|
let [min, max] = yMethod(res.data.historyData.map((item: any) => item.value + 0.1))
|
||||||
|
xAxisData.value = res.data.historyData.map((item: any) => item.time)
|
||||||
|
tabList.value[index].options = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter(params: any) {
|
||||||
|
xValue.value = params[0].value[0]
|
||||||
|
let str = params[0].value[0] + '<br/>'
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
str = str + params[i].marker + params[i].seriesName + ':' + params[i].value[1] + '<br/>'
|
||||||
|
}
|
||||||
|
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: form.type == 1 ? '%' : 'A',
|
||||||
|
min: min,
|
||||||
|
max: max
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: item.key + (form.type == 1 ? '次谐波电压' : '次谐波电流'),
|
||||||
|
data: res.data.historyData.map((item: any) => [
|
||||||
|
item.time,
|
||||||
|
Math.floor(item.value * 10000) / 10000
|
||||||
|
]),
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
markLine: {
|
||||||
|
symbol: 'none', // 去除箭头
|
||||||
|
label: {
|
||||||
|
show: false // 隐藏标签
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxis: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxis: ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 样式配置
|
||||||
|
lineStyle: {
|
||||||
|
color: 'red',
|
||||||
|
type: 'dashed' // 虚线
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
tabList.value[index].showEcahr = 1
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
tabList.value[index].showEcahr = 2
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const resDataId = ref('')
|
||||||
|
// 生成动态谐波责任数据
|
||||||
|
const generateFn = async () => {
|
||||||
|
loading1.value = true
|
||||||
|
await getDynamicData({
|
||||||
|
lineId: dotList.value.id,
|
||||||
|
searchBeginTime: tabList.value[activeName.value].time[0],
|
||||||
|
searchEndTime: tabList.value[activeName.value].time[1],
|
||||||
|
time: tabList.value[activeName.value].key,
|
||||||
|
type: form.type,
|
||||||
|
userDataId: form.loadDataId
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
resDataId.value = res.data.responsibilityDataIndex
|
||||||
|
tabList.value[activeName.value].dynamicData = res.data.responsibilities
|
||||||
|
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
|
||||||
|
let series: any[] = []
|
||||||
|
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
|
||||||
|
res.data.datas.forEach((item: any) => {
|
||||||
|
series.push({
|
||||||
|
name: item.customerName,
|
||||||
|
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
tabList.value[activeName.value].dynamicOptions = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter(params: any) {
|
||||||
|
let str = params[0].value[0] + '<br/>'
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
str = str + params[i].marker + params[i].seriesName + ':' + params[i].value[1] + '<br/>'
|
||||||
|
}
|
||||||
|
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: form.type == 1 ? '%' : 'A',
|
||||||
|
min: min,
|
||||||
|
max: max
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
series: series
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tabList.value[activeName.value].showDynamic = true
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
loading1.value = false
|
||||||
|
})
|
||||||
|
loading1.value = false
|
||||||
|
}
|
||||||
|
// 生成指标
|
||||||
|
const generateMetrics = async () => {
|
||||||
|
if (tabList.value[activeName.value].form.limit == '') return ElMessage.warning('请选择限值!')
|
||||||
|
if (tabList.value[activeName.value].form.time1 == '') return ElMessage.warning('请选择时间一!')
|
||||||
|
if (tabList.value[activeName.value].form.time2 == '') return ElMessage.warning('请选择时间二!')
|
||||||
|
loading1.value = true
|
||||||
|
await getResponsibilityData({
|
||||||
|
limitEndTime: tabList.value[activeName.value].form.time2,
|
||||||
|
limitStartTime: tabList.value[activeName.value].form.time1,
|
||||||
|
limitValue: tabList.value[activeName.value].form.limit,
|
||||||
|
resDataId: resDataId.value,
|
||||||
|
time: tabList.value[activeName.value].key,
|
||||||
|
type: form.type
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
tabList.value[activeName.value].dynamicData = res.data.responsibilities
|
||||||
|
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
|
||||||
|
let series: any[] = []
|
||||||
|
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
|
||||||
|
res.data.datas.forEach((item: any) => {
|
||||||
|
series.push({
|
||||||
|
name: item.customerName,
|
||||||
|
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
tabList.value[activeName.value].dynamicOptions = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter(params: any) {
|
||||||
|
let str = params[0].value[0] + '<br/>'
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
str = str + params[i].marker + params[i].seriesName + ':' + params[i].value[1] + '<br/>'
|
||||||
|
}
|
||||||
|
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: form.type == 1 ? '%' : 'A',
|
||||||
|
min: min,
|
||||||
|
max: max
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
series: series
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tabList.value[activeName.value].showDynamic = true
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
loading1.value = false
|
||||||
|
})
|
||||||
|
loading1.value = false
|
||||||
|
}
|
||||||
|
// 监听echart点击
|
||||||
|
const group = (chart: any, myChartDom: any) => {
|
||||||
|
myChartDom.addEventListener('click', function (event: any) {
|
||||||
|
// 获取点击位置相对于图表容器的坐标
|
||||||
|
const rect = myChartDom.getBoundingClientRect()
|
||||||
|
const x = event.clientX - rect.left
|
||||||
|
const y = event.clientY - rect.top
|
||||||
|
const pointInPixel = [x, y]
|
||||||
|
// 转换为逻辑坐标(相对于图表坐标系)
|
||||||
|
const pointInGrid = chart.convertFromPixel({ gridIndex: 0 }, pointInPixel)
|
||||||
|
// 计算X轴和Y轴的对应数据
|
||||||
|
|
||||||
|
// 处理X轴数据(分类轴)
|
||||||
|
|
||||||
|
// 处理Y轴数据(数值轴)
|
||||||
|
let yValue = pointInGrid[1].toFixed(4)
|
||||||
|
// xValue = timeFormat(pointInGrid[0].toFixed(0) - 0)
|
||||||
|
if (code.value == 0) {
|
||||||
|
tabList.value[activeName.value].form.limit = yValue
|
||||||
|
tabList.value[activeName.value].options.series[0].markLine.data[0].yAxis = yValue
|
||||||
|
chart.setOption(tabList.value[activeName.value].options)
|
||||||
|
} else if (code.value == 1) {
|
||||||
|
tabList.value[activeName.value].form.time1 = xValue.value
|
||||||
|
tabList.value[activeName.value].options.series[0].markLine.data[1].xAxis = xValue.value
|
||||||
|
chart.setOption(tabList.value[activeName.value].options)
|
||||||
|
} else if (code.value == 2) {
|
||||||
|
tabList.value[activeName.value].form.time2 = xValue.value
|
||||||
|
tabList.value[activeName.value].options.series[0].markLine.data[2].xAxis = xValue.value
|
||||||
|
chart.setOption(tabList.value[activeName.value].options)
|
||||||
|
}
|
||||||
|
// 控制台输出详细信息
|
||||||
|
// console.log('点击事件详情:', {
|
||||||
|
// X轴数据: xValue,
|
||||||
|
// Y轴数据: yValue
|
||||||
|
// })
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@@ -229,4 +598,32 @@ onMounted(() => {
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.monitoring-point {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
// height: 280px;
|
||||||
|
height: calc((100vh - 370px) / 2);
|
||||||
|
}
|
||||||
|
.boxTab {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.harmonicButton {
|
||||||
|
height: 42px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
height: calc(100vh - 265px);
|
||||||
|
}
|
||||||
|
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||||||
|
background-color: #ffffff00;
|
||||||
|
}
|
||||||
|
:deep(.frontBox) {
|
||||||
|
background-color: var(--el-color-primary) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,53 +1,175 @@
|
|||||||
<!-- 详情 -->
|
<!-- 详情 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="default-main" :style="height">
|
<div class="default-main pd10">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
详情
|
<!-- <div style="font-size: 14px; font-weight: 500">
|
||||||
<div style="font-size: 14px;font-weight: 500;">
|
|
||||||
{{ query.name || '' }}
|
</div> -->
|
||||||
<back-component />
|
<span class="monitoring-point">{{ query.name || '' }}</span>
|
||||||
</div>
|
<back-component />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="(item, index) in tabList"
|
||||||
</div>
|
:key="index"
|
||||||
|
:label="item.name + '次谐波'"
|
||||||
</template>
|
:style="height"
|
||||||
<script setup lang='ts'>
|
:name="index"
|
||||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
v-loading="loading"
|
||||||
import { mainHeight } from '@/utils/layout'
|
>
|
||||||
import { displayHistoryData } from '@/api/advance-boot/division';
|
<div style="height: calc(100vh - 250px); overflow-y: auto">
|
||||||
import BackComponent from '@/components/icon/back/index.vue'
|
<div
|
||||||
import { useRouter } from 'vue-router'
|
class="box boxTab mb10"
|
||||||
import { ElMessage } from 'element-plus'
|
:style="{
|
||||||
import { id } from 'element-plus/es/locale';
|
height: `calc((100vh - 280px) / ${
|
||||||
const { query } = useRoute() // 查询参数
|
item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
|
||||||
const dotList: any = ref({})
|
})`
|
||||||
const height = mainHeight(20)
|
}"
|
||||||
|
v-for="(value, i) in item.dynamicOptions"
|
||||||
const tabList: any = ref([])
|
:key="i"
|
||||||
const init = () => {
|
>
|
||||||
displayHistoryData({
|
<MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
|
||||||
id: query.id,
|
<div style="width: 500px">
|
||||||
time:query.time
|
<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>
|
||||||
onMounted(() => {
|
</vxe-table>
|
||||||
init()
|
</div>
|
||||||
})
|
</div>
|
||||||
</script>
|
</div>
|
||||||
<style lang="scss" scoped>
|
</el-tab-pane>
|
||||||
.title {
|
</el-tabs>
|
||||||
display: flex;
|
</div>
|
||||||
justify-content: space-between;
|
</template>
|
||||||
padding: 10px;
|
<script setup lang="ts">
|
||||||
font-size: 16px;
|
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||||
font-weight: 550;
|
import { mainHeight } from '@/utils/layout'
|
||||||
}
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
</style>
|
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 => {
|
click: row => {
|
||||||
console.log("🚀 ~ row:", row)
|
console.log("🚀 ~ row:", row)
|
||||||
|
|
||||||
// push('/admin/division/detail')
|
|
||||||
push({
|
push({
|
||||||
path: "/admin/division/detail",
|
path: "/admin/division/detail",
|
||||||
query: {
|
query: {
|
||||||
|
|||||||
@@ -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>
|
<template>
|
||||||
<div style="display: flex; flex-direction: column; height: 100%">
|
<div style="display: flex; flex-direction: column; height: 100%">
|
||||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="日期">
|
<el-form-item label="日期">
|
||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="对比">
|
<el-form-item label="对比">
|
||||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||||
<el-option
|
<el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
|
||||||
v-for="item in searchTypeOptions"
|
:value="item.value" />
|
||||||
:key="item.value"
|
</el-select>
|
||||||
:label="item.label"
|
</el-form-item>
|
||||||
:value="item.value"
|
</template>
|
||||||
/>
|
<template v-slot:operation>
|
||||||
</el-select>
|
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||||
</el-form-item>
|
</template>
|
||||||
</template>
|
</TableHeader>
|
||||||
<template v-slot:operation>
|
|
||||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
||||||
</template>
|
<div style="flex: 1">
|
||||||
</TableHeader>
|
<my-echart :options="options1" />
|
||||||
|
</div>
|
||||||
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
<div style="flex: 1">
|
||||||
<div style="flex: 1">
|
<my-echart :options="options2" />
|
||||||
<my-echart :options="options1" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 1">
|
</div>
|
||||||
<my-echart :options="options2" />
|
</template>
|
||||||
</div>
|
<script setup lang="ts">
|
||||||
</div>
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
</div>
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
</template>
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
<script setup lang="ts">
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
const tableStore = new TableStore({
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
url: '',
|
||||||
import TableStore from '@/utils/tableStore'
|
method: 'POST',
|
||||||
const tableStore = new TableStore({
|
column: []
|
||||||
url: '',
|
})
|
||||||
method: 'POST',
|
const datePickerRef = ref()
|
||||||
column: []
|
const monitoringPoint = useMonitoringPoint()
|
||||||
})
|
const loading = ref(true)
|
||||||
const datePickerRef = ref()
|
const formData = reactive({
|
||||||
const monitoringPoint = useMonitoringPoint()
|
id: monitoringPoint.state.lineId,
|
||||||
const loading = ref(true)
|
searchBeginTime: '',
|
||||||
const formData = reactive({
|
searchEndTime: '',
|
||||||
id: monitoringPoint.state.lineId,
|
periodBeginTime: '',
|
||||||
searchBeginTime: '',
|
periodEndTime: ''
|
||||||
searchEndTime: '',
|
})
|
||||||
periodBeginTime: '',
|
const searchType = ref('')
|
||||||
periodEndTime: ''
|
const searchTypeOptions = [
|
||||||
})
|
{
|
||||||
const searchType = ref('')
|
label: '同比',
|
||||||
const searchTypeOptions = [
|
value: '1'
|
||||||
{
|
},
|
||||||
label: '同比',
|
{
|
||||||
value: '1'
|
label: '环比',
|
||||||
},
|
value: '2'
|
||||||
{
|
}
|
||||||
label: '环比',
|
]
|
||||||
value: '2'
|
const options1 = ref({})
|
||||||
}
|
const options2 = ref({})
|
||||||
]
|
onMounted(() => {
|
||||||
const options1 = ref({})
|
init()
|
||||||
const options2 = ref({})
|
})
|
||||||
onMounted(() => {
|
const init = () => {
|
||||||
init()
|
loading.value = true
|
||||||
})
|
formData.id = monitoringPoint.state.lineId
|
||||||
const init = () => {
|
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||||
loading.value = true
|
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||||
formData.id = monitoringPoint.state.lineId
|
if (searchType.value == '1') {
|
||||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
formData.searchBeginTime,
|
||||||
if (searchType.value == '1') {
|
formData.searchEndTime
|
||||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
)
|
||||||
formData.searchBeginTime,
|
} else if (searchType.value == '2') {
|
||||||
formData.searchEndTime
|
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||||
)
|
formData.searchBeginTime,
|
||||||
} else if (searchType.value == '2') {
|
formData.searchEndTime
|
||||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
)
|
||||||
formData.searchBeginTime,
|
} else {
|
||||||
formData.searchEndTime
|
formData.periodBeginTime = ''
|
||||||
)
|
formData.periodEndTime = ''
|
||||||
} else {
|
}
|
||||||
formData.periodBeginTime = ''
|
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
||||||
formData.periodEndTime = ''
|
.then((res: any) => {
|
||||||
}
|
handlerOptions1(res[0].data)
|
||||||
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
handlerOptions2(res[1].data)
|
||||||
.then((res: any) => {
|
loading.value = false
|
||||||
handlerOptions1(res[0].data)
|
})
|
||||||
handlerOptions2(res[1].data)
|
.catch(() => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
.catch(() => {
|
}
|
||||||
loading.value = false
|
const handlerOptions1 = (data: any) => {
|
||||||
})
|
options1.value = {
|
||||||
}
|
title: {
|
||||||
const handlerOptions1 = (data: any) => {
|
text: '运行状态'
|
||||||
options1.value = {
|
},
|
||||||
title: {
|
legend: {
|
||||||
text: '运行状态'
|
show: false
|
||||||
},
|
},
|
||||||
legend: {
|
tooltip: {
|
||||||
show: false
|
formatter: function (params: any) {
|
||||||
},
|
var res = params[0].data[0] + '<br/>终端运行状态为:'
|
||||||
tooltip: {
|
var texts = ''
|
||||||
formatter: function (params: any) {
|
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
||||||
var res = params[0].data[0] + '<br/>终端运行状态为:'
|
texts = '退出'
|
||||||
var texts = ''
|
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
||||||
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
texts = '中断'
|
||||||
texts = '退出'
|
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||||
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
texts = '正常'
|
||||||
texts = '中断'
|
}
|
||||||
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
res = res + texts
|
||||||
texts = '正常'
|
return res
|
||||||
}
|
}
|
||||||
res = res + texts
|
},
|
||||||
return res
|
xAxis: {
|
||||||
}
|
// type: 'category',
|
||||||
},
|
// data: data.updateTime
|
||||||
xAxis: {
|
type: 'time',
|
||||||
// type: 'category',
|
name: '时间',
|
||||||
// data: data.updateTime
|
//
|
||||||
type: 'time',
|
axisLabel: {
|
||||||
name: '时间',
|
formatter: {
|
||||||
//
|
day: '{MM}-{dd}',
|
||||||
axisLabel: {
|
month: '{MM}',
|
||||||
formatter: {
|
year: '{yyyy}'
|
||||||
day: '{MM}-{dd}',
|
}
|
||||||
month: '{MM}',
|
}
|
||||||
year: '{yyyy}'
|
},
|
||||||
}
|
yAxis: {
|
||||||
}
|
name: '状态',
|
||||||
},
|
type: 'value',
|
||||||
yAxis: {
|
axisLabel: {
|
||||||
name: '状态',
|
// 这里重新定义就可以
|
||||||
type: 'value',
|
formatter: function (value: number) {
|
||||||
axisLabel: {
|
var texts = []
|
||||||
// 这里重新定义就可以
|
if (value === 2) {
|
||||||
formatter: function (value: number) {
|
texts.push('退出')
|
||||||
var texts = []
|
} else if (value === 0) {
|
||||||
if (value === 2) {
|
texts.push('中断')
|
||||||
texts.push('退出')
|
} else if (value === 1) {
|
||||||
} else if (value === 0) {
|
texts.push('正常')
|
||||||
texts.push('中断')
|
}
|
||||||
} else if (value === 1) {
|
return texts
|
||||||
texts.push('正常')
|
}
|
||||||
}
|
}
|
||||||
return texts
|
},
|
||||||
}
|
series: [
|
||||||
}
|
{
|
||||||
},
|
name: '中断运行状态',
|
||||||
series: [
|
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
|
||||||
{
|
type: 'line',
|
||||||
name: '中断运行状态',
|
step: 'end'
|
||||||
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)) {
|
||||||
const handlerOptions2 = (data: any) => {
|
title = '数据存在异常,已进行转换处理'
|
||||||
options2.value = {
|
data.integrityData = data.integrityData.map(item => {
|
||||||
title: {
|
return item > 100 ? 100 : item;
|
||||||
text: '在线率和完整性'
|
});
|
||||||
},
|
}
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
options2.value = {
|
||||||
data: formData.periodBeginTime
|
title: {
|
||||||
? [
|
text: '在线率和完整性',
|
||||||
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
subtext: title,
|
||||||
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
subtextStyle: {
|
||||||
]
|
color: 'red' // 设置副标题颜色为红色
|
||||||
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
xAxis: {
|
||||||
name: '%',
|
type: 'category',
|
||||||
type: 'value'
|
data: formData.periodBeginTime
|
||||||
},
|
? [
|
||||||
series: [
|
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
||||||
{
|
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
||||||
name: '在线率',
|
]
|
||||||
data: data.onlineRateData,
|
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
||||||
type: 'bar'
|
},
|
||||||
},
|
yAxis: {
|
||||||
{
|
name: '%',
|
||||||
name: '完整性',
|
type: 'value'
|
||||||
data: data.integrityData,
|
},
|
||||||
type: 'bar'
|
series: [
|
||||||
}
|
{
|
||||||
]
|
name: '在线率',
|
||||||
}
|
data: data.onlineRateData,
|
||||||
}
|
type: 'bar'
|
||||||
provide('tableStore', tableStore)
|
},
|
||||||
</script>
|
{
|
||||||
<style></style>
|
name: '完整性',
|
||||||
|
data: data.integrityData,
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
|
|||||||
@@ -126,8 +126,11 @@ const LngLat = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
import { getAssessOverview } from '@/api/device-boot/panorama'
|
import { getAssessOverview } from '@/api/device-boot/panorama'
|
||||||
narimap.publicKey =
|
// narimap.publicKey =
|
||||||
'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
|
// 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
|
||||||
|
narimap.publicKey =
|
||||||
|
'JBb74325ae94dc49358b7d699660b692'
|
||||||
|
|
||||||
narimap.Require(
|
narimap.Require(
|
||||||
[
|
[
|
||||||
'PSRMap',
|
'PSRMap',
|
||||||
|
|||||||
@@ -116,6 +116,7 @@
|
|||||||
|
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-else-if="item.field == 'powerFactor'"
|
v-else-if="item.field == 'powerFactor'"
|
||||||
|
style="width: 100%"
|
||||||
v-model="form[item.field]"
|
v-model="form[item.field]"
|
||||||
:min="0.1"
|
:min="0.1"
|
||||||
:max="0.9"
|
:max="0.9"
|
||||||
@@ -123,15 +124,22 @@
|
|||||||
:precision="1"
|
:precision="1"
|
||||||
placeholder="请输入功率因数"
|
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
|
<el-input-number
|
||||||
v-else-if="
|
v-else-if="
|
||||||
item.field == 'transNum' ||
|
item.field == 'transNum' ||
|
||||||
item.field == 'capacitorNum' ||
|
item.field == 'capacitorNum' ||
|
||||||
item.field == 'capacitorCapacity' ||
|
item.field == 'capacitorCapacity' ||
|
||||||
item.field == 'capacitorReactance' ||
|
item.field == 'capacitorReactance' ||
|
||||||
item.field == 'flickerCoeff' ||
|
|
||||||
item.field == 's'||
|
|
||||||
item.field == 'transhighCapacity'||
|
item.field == 'transhighCapacity'||
|
||||||
item.field == 'transImpedance'||
|
item.field == 'transImpedance'||
|
||||||
item.field == 'nonlinearloadPower' ||
|
item.field == 'nonlinearloadPower' ||
|
||||||
@@ -142,6 +150,7 @@
|
|||||||
v-model="form[item.field]"
|
v-model="form[item.field]"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
:min="1"
|
:min="1"
|
||||||
|
:max="9999"
|
||||||
placeholder="请输入值"
|
placeholder="请输入值"
|
||||||
></el-input-number>
|
></el-input-number>
|
||||||
|
|
||||||
|
|||||||
@@ -1,267 +1,267 @@
|
|||||||
<template>
|
<template>
|
||||||
<SecondSheet>
|
<SecondSheet>
|
||||||
<div style='height: 100%; overflow: hidden'>
|
<div style='height: 100%; overflow: hidden' >
|
||||||
<div class='switch-tab'>
|
<div class='switch-tab'>
|
||||||
<el-radio-group v-model='radio' size='small'>
|
<el-radio-group v-model='radio' >
|
||||||
<el-radio-button value='三维图'>三维图</el-radio-button>
|
<el-radio-button value='三维图'>三维图</el-radio-button>
|
||||||
<el-radio-button value='表格'>表格</el-radio-button>
|
<el-radio-button value='表格'>表格</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
<Table ref='tableRef' height='auto' isGroup />
|
<Table ref='tableRef' isGroup />
|
||||||
<SecondSheet v-if="radio === '三维图'">
|
<SecondSheet v-if="radio === '三维图'">
|
||||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||||
</SecondSheet>
|
</SecondSheet>
|
||||||
</div>
|
</div>
|
||||||
</SecondSheet>
|
</SecondSheet>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import { ref, provide } from 'vue'
|
import { ref, provide } from 'vue'
|
||||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
|
||||||
const radio = ref('三维图')
|
const radio = ref('三维图')
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const apiData = ref()
|
const apiData = ref()
|
||||||
const tableStore3D = new TableStore({
|
const tableStore3D = new TableStore({
|
||||||
showPage: false,
|
showPage: false,
|
||||||
// 若页面表格高度需要调整,请修改publicHeight(内容区域除表格外其他内容的高度)
|
// 若页面表格高度需要调整,请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||||
url: '/advance-boot/sgEvent/3DList',
|
url: '/advance-boot/sgEvent/3DList',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
title: '电压暂降频次统计表',
|
title: '电压暂降频次统计表',
|
||||||
children: [
|
children: [
|
||||||
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
||||||
{
|
{
|
||||||
title: '持续时间(s)',
|
title: '持续时间(s)',
|
||||||
field: 'loginName',
|
field: 'loginName',
|
||||||
children: []
|
children: []
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
const eventCount = tableStore3D.table.data.values
|
const eventCount = tableStore3D.table.data.values
|
||||||
tableStore3D.table.data = {
|
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'],
|
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'],
|
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
|
||||||
values: [
|
values: [
|
||||||
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
|
['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.02~0.05', eventCount[1][2]],
|
||||||
['0.8~0.9', '0.05~0.07', eventCount[2][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.07~0.10', eventCount[3][2]],
|
||||||
['0.8~0.9', '0.10~1.00', eventCount[4][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.01~0.02', eventCount[5][2]],
|
||||||
['0.7~0.8', '0.02~0.05', eventCount[6][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.05~0.07', eventCount[7][2]],
|
||||||
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
||||||
['0.7~0.8', '0.10~1.00', eventCount[9][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.01~0.02', eventCount[10][2]],
|
||||||
['0.6~0.7', '0.02~0.05', eventCount[11][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.05~0.07', eventCount[12][2]],
|
||||||
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
||||||
['0.6~0.7', '0.10~1.00', eventCount[14][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.01~0.02', eventCount[15][2]],
|
||||||
['0.5~0.6', '0.02~0.05', eventCount[16][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.05~0.07', eventCount[17][2]],
|
||||||
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
||||||
['0.5~0.6', '0.10~1.00', eventCount[19][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.01~0.02', eventCount[20][2]],
|
||||||
['0.4~0.5', '0.02~0.05', eventCount[21][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.05~0.07', eventCount[22][2]],
|
||||||
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
||||||
['0.4~0.5', '0.10~1.00', eventCount[24][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.01~0.02', eventCount[25][2]],
|
||||||
['0.1~0.4', '0.02~0.05', eventCount[26][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.05~0.07', eventCount[27][2]],
|
||||||
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
||||||
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
||||||
],
|
],
|
||||||
table: {
|
table: {
|
||||||
total: 6,
|
total: 6,
|
||||||
rows: [
|
rows: [
|
||||||
{
|
{
|
||||||
amplitude: '0.8~0.9',
|
amplitude: '0.8~0.9',
|
||||||
d001_002s: eventCount[0][2],
|
d001_002s: eventCount[0][2],
|
||||||
d002_005s: eventCount[1][2],
|
d002_005s: eventCount[1][2],
|
||||||
d005_007s: eventCount[2][2],
|
d005_007s: eventCount[2][2],
|
||||||
d007_010s: eventCount[3][2],
|
d007_010s: eventCount[3][2],
|
||||||
d010_100s: eventCount[4][2]
|
d010_100s: eventCount[4][2]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amplitude: '0.7~0.8',
|
amplitude: '0.7~0.8',
|
||||||
d001_002s: eventCount[5][2],
|
d001_002s: eventCount[5][2],
|
||||||
d002_005s: eventCount[6][2],
|
d002_005s: eventCount[6][2],
|
||||||
d005_007s: eventCount[7][2],
|
d005_007s: eventCount[7][2],
|
||||||
d007_010s: eventCount[8][2],
|
d007_010s: eventCount[8][2],
|
||||||
d010_100s: eventCount[9][2]
|
d010_100s: eventCount[9][2]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amplitude: '0.6~0.7',
|
amplitude: '0.6~0.7',
|
||||||
d001_002s: eventCount[10][2],
|
d001_002s: eventCount[10][2],
|
||||||
d002_005s: eventCount[11][2],
|
d002_005s: eventCount[11][2],
|
||||||
d005_007s: eventCount[12][2],
|
d005_007s: eventCount[12][2],
|
||||||
d007_010s: eventCount[13][2],
|
d007_010s: eventCount[13][2],
|
||||||
d010_100s: eventCount[14][2]
|
d010_100s: eventCount[14][2]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amplitude: '0.5~0.6',
|
amplitude: '0.5~0.6',
|
||||||
d001_002s: eventCount[15][2],
|
d001_002s: eventCount[15][2],
|
||||||
d002_005s: eventCount[16][2],
|
d002_005s: eventCount[16][2],
|
||||||
d005_007s: eventCount[17][2],
|
d005_007s: eventCount[17][2],
|
||||||
d007_010s: eventCount[18][2],
|
d007_010s: eventCount[18][2],
|
||||||
d010_100s: eventCount[19][2]
|
d010_100s: eventCount[19][2]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amplitude: '0.4~0.5',
|
amplitude: '0.4~0.5',
|
||||||
d001_002s: eventCount[20][2],
|
d001_002s: eventCount[20][2],
|
||||||
d002_005s: eventCount[21][2],
|
d002_005s: eventCount[21][2],
|
||||||
d005_007s: eventCount[22][2],
|
d005_007s: eventCount[22][2],
|
||||||
d007_010s: eventCount[23][2],
|
d007_010s: eventCount[23][2],
|
||||||
d010_100s: eventCount[24][2]
|
d010_100s: eventCount[24][2]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amplitude: '0.1~0.4',
|
amplitude: '0.1~0.4',
|
||||||
d001_002s: eventCount[25][2],
|
d001_002s: eventCount[25][2],
|
||||||
d002_005s: eventCount[26][2],
|
d002_005s: eventCount[26][2],
|
||||||
d005_007s: eventCount[27][2],
|
d005_007s: eventCount[27][2],
|
||||||
d007_010s: eventCount[28][2],
|
d007_010s: eventCount[28][2],
|
||||||
d010_100s: eventCount[29][2]
|
d010_100s: eventCount[29][2]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
code: 200,
|
code: 200,
|
||||||
msg: '查询成功'
|
msg: '查询成功'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiData.value = tableStore3D.table.data
|
apiData.value = tableStore3D.table.data
|
||||||
tableStore3D.table.column![0].children![1].children = []
|
tableStore3D.table.column![0].children![1].children = []
|
||||||
tableStore3D.table.column![0].children![1].children!.push(
|
tableStore3D.table.column![0].children![1].children!.push(
|
||||||
...(apiData.value.durations.map((item: string) => {
|
...(apiData.value.durations.map((item: string) => {
|
||||||
return {
|
return {
|
||||||
title: item,
|
title: item,
|
||||||
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
||||||
}
|
}
|
||||||
}) as any[])
|
}) as any[])
|
||||||
)
|
)
|
||||||
tableStore3D.table.data = apiData.value.table.rows
|
tableStore3D.table.data = apiData.value.table.rows
|
||||||
initEchart()
|
initEchart()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// 注入到子组件
|
// 注入到子组件
|
||||||
provide('tableStore3D', tableStore3D)
|
provide('tableStore3D', tableStore3D)
|
||||||
|
|
||||||
const initEchart = () => {
|
const initEchart = () => {
|
||||||
options.value = {
|
options.value = {
|
||||||
options: {
|
options: {
|
||||||
xAxis: null,
|
xAxis: null,
|
||||||
yAxis: null,
|
yAxis: null,
|
||||||
dataZoom: null,
|
dataZoom: null,
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: 'shadow',
|
||||||
label: {
|
label: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
opacity: 0.35,
|
opacity: 0.35,
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let tips = ''
|
let tips = ''
|
||||||
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
|
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>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
|
||||||
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
||||||
return tips
|
return tips
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '暂降密度图',
|
text: '暂降密度图',
|
||||||
x: 'center'
|
x: 'center'
|
||||||
},
|
},
|
||||||
xAxis3D: {
|
xAxis3D: {
|
||||||
name: '暂降幅值(p.u.)',
|
name: '暂降幅值(p.u.)',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: apiData.value.amplitudes
|
data: apiData.value.amplitudes
|
||||||
},
|
},
|
||||||
yAxis3D: {
|
yAxis3D: {
|
||||||
name: '持续时间(s)',
|
name: '持续时间(s)',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: apiData.value.durations
|
data: apiData.value.durations
|
||||||
},
|
},
|
||||||
zAxis3D: {
|
zAxis3D: {
|
||||||
name: '次数',
|
name: '次数',
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
grid3D: {
|
grid3D: {
|
||||||
boxWidth: 200,
|
boxWidth: 200,
|
||||||
boxDepth: 80,
|
boxDepth: 80,
|
||||||
viewControl: {
|
viewControl: {
|
||||||
projection: 'perspective',
|
projection: 'perspective',
|
||||||
distance: 250
|
distance: 250
|
||||||
},
|
},
|
||||||
light: {
|
light: {
|
||||||
main: {
|
main: {
|
||||||
intensity: 1.2,
|
intensity: 1.2,
|
||||||
shadow: true
|
shadow: true
|
||||||
},
|
},
|
||||||
ambient: {
|
ambient: {
|
||||||
intensity: 0.3
|
intensity: 0.3
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'bar3D',
|
type: 'bar3D',
|
||||||
data: apiData.value.values.map((item: [string, string, string]) => {
|
data: apiData.value.values.map((item: [string, string, string]) => {
|
||||||
return [
|
return [
|
||||||
apiData.value.amplitudes.indexOf(item[0]),
|
apiData.value.amplitudes.indexOf(item[0]),
|
||||||
apiData.value.durations.indexOf(item[1]),
|
apiData.value.durations.indexOf(item[1]),
|
||||||
item[2]
|
item[2]
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
shading: 'lambert',
|
shading: 'lambert',
|
||||||
label: {
|
label: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
borderWidth: 1
|
borderWidth: 1
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
label: {
|
label: {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
color: '#900'
|
color: '#900'
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#900'
|
color: '#900'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const search = (id: string, beginTime: string, endTime: string) => {
|
const search = (id: string, beginTime: string, endTime: string) => {
|
||||||
// 从父组件tableStore3D获取参数
|
// 从父组件tableStore3D获取参数
|
||||||
tableStore3D.table.params.searchBeginTime = beginTime
|
tableStore3D.table.params.searchBeginTime = beginTime
|
||||||
tableStore3D.table.params.searchEndTime = endTime
|
tableStore3D.table.params.searchEndTime = endTime
|
||||||
tableStore3D.table.params.userId = id
|
tableStore3D.table.params.userId = id
|
||||||
tableStore3D.index()
|
tableStore3D.index()
|
||||||
}
|
}
|
||||||
defineExpose({ search })
|
defineExpose({ search })
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
.switch-tab {
|
.switch-tab {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 16px;
|
right: 345px;
|
||||||
top: 4px;
|
top: -37px;
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,343 +1,343 @@
|
|||||||
<template>
|
<template>
|
||||||
<SecondSheet>
|
<SecondSheet>
|
||||||
<div class='tolerance-curve'>
|
<div class='tolerance-curve'>
|
||||||
<el-form label-width='auto' :inline='true'>
|
<el-form label-width='auto' :inline='true'>
|
||||||
<el-form-item label='生产线'>
|
<el-form-item label='生产线'>
|
||||||
<el-select v-model='form.productLineId'>
|
<el-select v-model='form.productLineId'>
|
||||||
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
||||||
:value='item.id' />
|
:value='item.id' />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label='终端'>
|
<el-form-item label='终端'>
|
||||||
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
||||||
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label='敏感元器件'>
|
<el-form-item label='敏感元器件'>
|
||||||
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
|
<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-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div style='display: flex; flex: 1'>
|
<div style='display: flex; flex: 1'>
|
||||||
<el-form label-width='auto' label-position='top'>
|
<el-form label-width='auto' label-position='top'>
|
||||||
<!-- <el-form-item label='耐受曲线'>-->
|
<!-- <el-form-item label='耐受曲线'>-->
|
||||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||||
<!-- <el-option-->
|
<!-- <el-option-->
|
||||||
<!-- v-for='item in selectOptions'-->
|
<!-- v-for='item in selectOptions'-->
|
||||||
<!-- :key='item.value'-->
|
<!-- :key='item.value'-->
|
||||||
<!-- :label='item.label'-->
|
<!-- :label='item.label'-->
|
||||||
<!-- :value='item.value'-->
|
<!-- :value='item.value'-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- </el-select>-->
|
<!-- </el-select>-->
|
||||||
<!-- </el-form-item>-->
|
<!-- </el-form-item>-->
|
||||||
<!-- <el-form-item label='耐受能力(膝点坐标)'>-->
|
<!-- <el-form-item label='耐受能力(膝点坐标)'>-->
|
||||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||||
<!-- <el-option-->
|
<!-- <el-option-->
|
||||||
<!-- v-for='item in selectOptions'-->
|
<!-- v-for='item in selectOptions'-->
|
||||||
<!-- :key='item.value'-->
|
<!-- :key='item.value'-->
|
||||||
<!-- :label='item.label'-->
|
<!-- :label='item.label'-->
|
||||||
<!-- :value='item.value'-->
|
<!-- :value='item.value'-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- </el-select>-->
|
<!-- </el-select>-->
|
||||||
<!-- </el-form-item>-->
|
<!-- </el-form-item>-->
|
||||||
<el-form-item label='上限曲线膝点'>
|
<el-form-item label='上限曲线膝点'>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
||||||
@change='reDrawPic' />
|
@change='reDrawPic' />
|
||||||
<span class='ml10' style='color: #333'>p.u.</span>
|
<span class='ml10' style='color: #333'>p.u.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='mt10'>
|
<div class='mt10'>
|
||||||
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
||||||
@change='reDrawPic' />
|
@change='reDrawPic' />
|
||||||
<span class='ml10' style='color: #333'>ms</span>
|
<span class='ml10' style='color: #333'>ms</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label='下限曲线膝点'>
|
<el-form-item label='下限曲线膝点'>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
||||||
@change='reDrawPic' />
|
@change='reDrawPic' />
|
||||||
<span class='ml10' style='color: #333'>p.u.</span>
|
<span class='ml10' style='color: #333'>p.u.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='mt10'>
|
<div class='mt10'>
|
||||||
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
||||||
@change='reDrawPic' />
|
@change='reDrawPic' />
|
||||||
<span class='ml10' style='color: #333'>ms</span>
|
<span class='ml10' style='color: #333'>ms</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div style='flex: 1' class='ml10'>
|
<div style='flex: 1' class='ml10'>
|
||||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SecondSheet>
|
</SecondSheet>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { reactive, ref } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
||||||
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
||||||
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
||||||
|
|
||||||
|
|
||||||
const searchBeginTime = ref()
|
const searchBeginTime = ref()
|
||||||
const searchEndTime = ref()
|
const searchEndTime = ref()
|
||||||
const userId = ref()
|
const userId = ref()
|
||||||
|
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
num: 1,
|
num: 1,
|
||||||
productLineId: '',
|
productLineId: '',
|
||||||
machineId: '',
|
machineId: '',
|
||||||
unitId: ''
|
unitId: ''
|
||||||
})
|
})
|
||||||
const productLineOptions = ref()
|
const productLineOptions = ref()
|
||||||
const machineOptions = ref()
|
const machineOptions = ref()
|
||||||
const unitOptions = ref()
|
const unitOptions = ref()
|
||||||
const unit = ref({
|
const unit = ref({
|
||||||
'vtcTimeUpper': 0,
|
'vtcTimeUpper': 0,
|
||||||
'vtcAmpUpper': 0,
|
'vtcAmpUpper': 0,
|
||||||
'vtcTimeLower': 0,
|
'vtcTimeLower': 0,
|
||||||
'vtcAmpLower': 0
|
'vtcAmpLower': 0
|
||||||
})
|
})
|
||||||
const overEvent = ref([])
|
const overEvent = ref([])
|
||||||
const unOverEvent = ref([])
|
const unOverEvent = ref([])
|
||||||
const unKnownEvent = ref([])
|
const unKnownEvent = ref([])
|
||||||
const overEventColor = ref('#A52a2a')
|
const overEventColor = ref('#A52a2a')
|
||||||
const unOverEventColor = ref('#61a0a8')
|
const unOverEventColor = ref('#61a0a8')
|
||||||
const unKnownEventColor = ref('#d48265')
|
const unKnownEventColor = ref('#d48265')
|
||||||
const eventData = ref()
|
const eventData = ref()
|
||||||
const search = async (id: string, beginTime: string, endTime: string) => {
|
const search = async (id: string, beginTime: string, endTime: string) => {
|
||||||
// 从父组件tableStore获取参数
|
// 从父组件tableStore获取参数
|
||||||
searchBeginTime.value = beginTime
|
searchBeginTime.value = beginTime
|
||||||
searchEndTime.value = endTime
|
searchEndTime.value = endTime
|
||||||
userId.value = id
|
userId.value = id
|
||||||
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉,再根据终端获取下拉的敏感元器件的下拉
|
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉,再根据终端获取下拉的敏感元器件的下拉
|
||||||
await querySgProductLineByUserId(id).then((res: any) => {
|
await querySgProductLineByUserId(id).then((res: any) => {
|
||||||
productLineOptions.value = res.data
|
productLineOptions.value = res.data
|
||||||
form.productLineId = productLineOptions.value[0].id
|
form.productLineId = productLineOptions.value[0].id
|
||||||
})
|
})
|
||||||
|
|
||||||
//根据生产线获取终端数据
|
//根据生产线获取终端数据
|
||||||
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
||||||
machineOptions.value = res.data
|
machineOptions.value = res.data
|
||||||
if (machineOptions.value.length > 0) {
|
if (machineOptions.value.length > 0) {
|
||||||
form.machineId = machineOptions.value[0].id
|
form.machineId = machineOptions.value[0].id
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
//根据终端获取元器件数据
|
//根据终端获取元器件数据
|
||||||
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
||||||
unitOptions.value = res.data
|
unitOptions.value = res.data
|
||||||
if (unitOptions.value.length > 0) {
|
if (unitOptions.value.length > 0) {
|
||||||
form.unitId = unitOptions.value[0].id
|
form.unitId = unitOptions.value[0].id
|
||||||
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
searchBeginTime: beginTime,
|
searchBeginTime: beginTime,
|
||||||
searchEndTime: endTime,
|
searchEndTime: endTime,
|
||||||
productId: form.productLineId
|
productId: form.productLineId
|
||||||
}
|
}
|
||||||
|
|
||||||
await getEventDataByProductLineId(data).then((res: any) => {
|
await getEventDataByProductLineId(data).then((res: any) => {
|
||||||
eventData.value = res.data
|
eventData.value = res.data
|
||||||
reDrawPic()
|
reDrawPic()
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const changeUnit = (id: any) => {
|
const changeUnit = (id: any) => {
|
||||||
if (id == undefined) return
|
if (id == undefined) return
|
||||||
let list = unitOptions.value.filter((item: any) => item.id == id)
|
let list = unitOptions.value.filter((item: any) => item.id == id)
|
||||||
unit.value = JSON.parse(JSON.stringify(list[0]))
|
unit.value = JSON.parse(JSON.stringify(list[0]))
|
||||||
reDrawPic()
|
reDrawPic()
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const initOptions = () => {
|
const initOptions = () => {
|
||||||
options.value = {
|
options.value = {
|
||||||
legend: {
|
legend: {
|
||||||
data: ['越限事件', '未越限事件', '不确定事件'],
|
data: ['越限事件', '未越限事件', '不确定事件'],
|
||||||
left: '10px'
|
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: function (a: any) {
|
formatter: function (a: any) {
|
||||||
if (a[0].value[3] == undefined) {
|
if (a[0].value[3] == undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let relVal = ''
|
let relVal = ''
|
||||||
relVal += '<font style=\'color:' + '\'>进线:' + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
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[2] + '</font><br/>'
|
||||||
relVal += '<font style=\'color:' + '\'>持续时间:' + ' ' + ' ' + a[0].value[0].toFixed(2) + 's</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>'
|
relVal += '<font style=\'color:' + '\'>特征幅值:' + ' ' + ' ' + a[0].value[1] + 'p.u.</font>'
|
||||||
return relVal
|
return relVal
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: '持续时间/s',
|
name: '持续时间/s',
|
||||||
type: 'log',
|
type: 'log',
|
||||||
min: '0.001',
|
min: '0.001',
|
||||||
max: '1000',
|
max: '1000',
|
||||||
splitLine: { show: false }
|
splitLine: { show: false }
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '幅值/p.u.',
|
name: '幅值/p.u.',
|
||||||
max: 1,
|
max: 1,
|
||||||
min: 0,
|
min: 0,
|
||||||
splitLine: { show: false }
|
splitLine: { show: false }
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
right: '78px',
|
right: '78px',
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
data: [
|
data: [
|
||||||
[unit.value.vtcTimeUpper / 1000, 0],
|
[unit.value.vtcTimeUpper / 1000, 0],
|
||||||
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
||||||
[1000, unit.value.vtcAmpUpper]
|
[1000, unit.value.vtcAmpUpper]
|
||||||
],
|
],
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
tooltips: {
|
tooltips: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
data: [
|
data: [
|
||||||
[unit.value.vtcTimeLower / 1000, 0],
|
[unit.value.vtcTimeLower / 1000, 0],
|
||||||
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
||||||
[1000, unit.value.vtcAmpLower]
|
[1000, unit.value.vtcAmpLower]
|
||||||
],
|
],
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
tooltips: {
|
tooltips: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '越限事件',
|
name: '越限事件',
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
data: overEvent.value
|
data: overEvent.value
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '未越限事件',
|
name: '未越限事件',
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
data: unOverEvent.value
|
data: unOverEvent.value
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '不确定事件',
|
name: '不确定事件',
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
data: unKnownEvent.value
|
data: unKnownEvent.value
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options: {
|
options: {
|
||||||
dataZoom: null
|
dataZoom: null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const reDrawPic = () => {
|
const reDrawPic = () => {
|
||||||
//清洗要显示的数据
|
//清洗要显示的数据
|
||||||
if (eventData.value.length > 0) {
|
if (eventData.value.length > 0) {
|
||||||
unOverEvent.value = []
|
unOverEvent.value = []
|
||||||
overEvent.value = []
|
overEvent.value = []
|
||||||
unKnownEvent.value = []
|
unKnownEvent.value = []
|
||||||
for (let event of eventData.value) {
|
for (let event of eventData.value) {
|
||||||
//判断落在哪个区域内
|
//判断落在哪个区域内
|
||||||
let eventTime = Number(event.duration) / 1000
|
let eventTime = Number(event.duration) / 1000
|
||||||
let eventAmplitude = Number(event.featureAmplitude)
|
let eventAmplitude = Number(event.featureAmplitude)
|
||||||
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
||||||
//未越限
|
//未越限
|
||||||
const dataTemp = {
|
const dataTemp = {
|
||||||
value: [
|
value: [
|
||||||
eventTime,
|
eventTime,
|
||||||
eventAmplitude,
|
eventAmplitude,
|
||||||
event.startTime,
|
event.startTime,
|
||||||
event.incomingLineName
|
event.incomingLineName
|
||||||
],
|
],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: unOverEventColor.value
|
color: unOverEventColor.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
unOverEvent.value.push(dataTemp)
|
unOverEvent.value.push(dataTemp)
|
||||||
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
||||||
//故障阶段
|
//故障阶段
|
||||||
const dataTemp = {
|
const dataTemp = {
|
||||||
value: [
|
value: [
|
||||||
eventTime,
|
eventTime,
|
||||||
eventAmplitude,
|
eventAmplitude,
|
||||||
event.startTime,
|
event.startTime,
|
||||||
event.incomingLineName
|
event.incomingLineName
|
||||||
],
|
],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: overEventColor.value
|
color: overEventColor.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
overEvent.value.push(dataTemp)
|
overEvent.value.push(dataTemp)
|
||||||
} else {
|
} else {
|
||||||
//不确定事件
|
//不确定事件
|
||||||
const dataTemp = {
|
const dataTemp = {
|
||||||
value: [
|
value: [
|
||||||
eventTime,
|
eventTime,
|
||||||
eventAmplitude,
|
eventAmplitude,
|
||||||
event.startTime,
|
event.startTime,
|
||||||
event.incomingLineName
|
event.incomingLineName
|
||||||
],
|
],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: unKnownEventColor.value
|
color: unKnownEventColor.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
unKnownEvent.value.push(dataTemp)
|
unKnownEvent.value.push(dataTemp)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//初始化图表
|
//初始化图表
|
||||||
initOptions()
|
initOptions()
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ search })
|
defineExpose({ search })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
.tolerance-curve {
|
.tolerance-curve {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid var(--el-border-color);
|
border: 1px solid var(--el-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__label-wrap {
|
.el-form-item__label-wrap {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__content {
|
.el-form-item__content {
|
||||||
width: 185px !important;
|
width: 185px !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,250 +1,252 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
<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-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
|
||||||
<el-tab-pane label="基本信息" name="user">
|
<el-tab-pane label="基本信息" name="user">
|
||||||
<el-form-item label="用户名" prop="userName" >
|
<el-form-item label="用户名" prop="userName" >
|
||||||
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="重点用户">
|
<el-form-item label="重点用户">
|
||||||
<el-select v-model="form.keyUser">
|
<el-select v-model="form.keyUser">
|
||||||
<el-option label="重要" value="1" />
|
<el-option label="重要" value="1" />
|
||||||
<el-option label="不重要" value="0" />
|
<el-option label="不重要" value="0" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="所属行业" prop="industry">
|
<el-form-item label="所属行业" prop="industry">
|
||||||
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form-item label="所在地区" prop="addr">
|
<el-form-item label="所在地区" prop="addr">
|
||||||
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="详细地址">
|
<el-form-item label="详细地址">
|
||||||
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系方式">
|
<el-form-item label="联系方式">
|
||||||
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="用户描述">
|
<el-form-item label="用户描述">
|
||||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="企业照片">
|
<el-form-item label="企业照片">
|
||||||
<div>
|
<div>
|
||||||
<el-image
|
<el-image
|
||||||
style="width: 200px; height: 200px"
|
style="width: 200px; height: 200px"
|
||||||
:src="userLogo.url"
|
:src="userLogo.url"
|
||||||
:preview-src-list="[userLogo.url]"
|
:preview-src-list="[userLogo.url]"
|
||||||
v-if="userLogo.url"
|
v-if="userLogo.url"
|
||||||
></el-image>
|
></el-image>
|
||||||
<el-upload
|
<el-upload
|
||||||
action=""
|
action=""
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
:auto-upload="false"
|
:auto-upload="false"
|
||||||
accept=".png,.jpg"
|
accept=".png,.jpg"
|
||||||
:on-change="chooseImage"
|
:on-change="chooseImage"
|
||||||
>
|
>
|
||||||
<el-button type="primary">上传图片</el-button>
|
<el-button type="primary">上传图片</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane label="进线" name="incomingLine">
|
<el-tab-pane label="进线" name="incomingLine">
|
||||||
<IncomingTable ref="incomingTable"></IncomingTable>
|
<IncomingTable ref="incomingTable"></IncomingTable>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit">确认</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, inject, reactive, nextTick } from 'vue'
|
import { ref, inject, reactive, nextTick } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||||
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
||||||
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
||||||
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
||||||
import IncomingTable from './IncomingTable.vue'
|
import IncomingTable from './IncomingTable.vue'
|
||||||
import { fullUrl } from '@/utils/common'
|
import { getFileUrl } from '@/api/system-boot/file'
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const title = ref('')
|
const title = ref('')
|
||||||
const tableStore = inject('tableStore') as TableStore
|
const tableStore = inject('tableStore') as TableStore
|
||||||
const areaRef = ref()
|
const areaRef = ref()
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
const tab = ref('user')
|
const tab = ref('user')
|
||||||
|
|
||||||
//进线表格子组件
|
//进线表格子组件
|
||||||
const incomingTable = ref()
|
const incomingTable = ref()
|
||||||
|
|
||||||
const userLogo = reactive({
|
const userLogo = reactive({
|
||||||
url: '',
|
url: '',
|
||||||
name: ''
|
name: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const dialogVisibleLogo = ref(false)
|
const dialogVisibleLogo = ref(false)
|
||||||
// 注意不要和表单ref的命名冲突
|
// 注意不要和表单ref的命名冲突
|
||||||
const form = reactive<anyObj>({
|
const form = reactive<anyObj>({
|
||||||
id: '',
|
id: '',
|
||||||
userName: '',
|
userName: '',
|
||||||
keyUser: '1',
|
keyUser: '1',
|
||||||
industry: '',
|
industry: '',
|
||||||
addr: [],
|
addr: [],
|
||||||
addrStrOption: '',
|
addrStrOption: '',
|
||||||
addrDetail: '',
|
addrDetail: '',
|
||||||
concact: '',
|
concact: '',
|
||||||
remark: '',
|
remark: '',
|
||||||
userLogo: ''
|
userLogo: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
//form表单校验规则
|
//form表单校验规则
|
||||||
const rules = {
|
const rules = {
|
||||||
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||||
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
||||||
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
||||||
}
|
}
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
if (formRef.value) {
|
if (formRef.value) {
|
||||||
formRef.value.resetFields()
|
formRef.value.resetFields()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const open = (text: string, data?: anyObj) => {
|
const open = (text: string, data?: anyObj) => {
|
||||||
tab.value = 'user'
|
tab.value = 'user'
|
||||||
title.value = text
|
title.value = text
|
||||||
//默认选中第一个tab
|
//默认选中第一个tab
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
if (data) {
|
if (data) {
|
||||||
// 表单赋值
|
// 表单赋值
|
||||||
for (let key in form) {
|
for (let key in form) {
|
||||||
form[key] = data[key]
|
form[key] = data[key]
|
||||||
}
|
}
|
||||||
form.addr = data.addr.split('/')
|
form.addr = data.addr.split('/')
|
||||||
form.keyUser = String(data.keyUser)
|
form.keyUser = String(data.keyUser)
|
||||||
if (form.userLogo) {
|
if (form.userLogo) {
|
||||||
userLogo.url = fullUrl(form.userLogo)
|
getFileUrl({filePath:form.userLogo}).then(res=>{
|
||||||
// 图片的name我不知道
|
userLogo.url=res.data
|
||||||
}
|
})
|
||||||
//待子组件渲染完毕
|
// 图片的name我不知道
|
||||||
nextTick(() => {
|
}
|
||||||
incomingTable.value.getTableData(form.id)
|
//待子组件渲染完毕
|
||||||
})
|
nextTick(() => {
|
||||||
} else {
|
incomingTable.value.getTableData(form.id)
|
||||||
resetForm()
|
})
|
||||||
// 在此处恢复默认表单
|
} else {
|
||||||
for (let key in form) {
|
resetForm()
|
||||||
form[key] = ''
|
// 在此处恢复默认表单
|
||||||
}
|
for (let key in form) {
|
||||||
userLogo.url = ''
|
form[key] = ''
|
||||||
form.keyUser = '1'
|
}
|
||||||
}
|
userLogo.url = ''
|
||||||
}
|
form.keyUser = '1'
|
||||||
|
}
|
||||||
/**
|
}
|
||||||
* 将联级选择的区域数组转为字符串
|
|
||||||
*/
|
/**
|
||||||
const reValueAddr = () => {
|
* 将联级选择的区域数组转为字符串
|
||||||
form.addrStrOption = form.addr.join('/')
|
*/
|
||||||
}
|
const reValueAddr = () => {
|
||||||
|
form.addrStrOption = form.addr.join('/')
|
||||||
/**
|
}
|
||||||
* 选择图片上传
|
|
||||||
* @param e
|
/**
|
||||||
*/
|
* 选择图片上传
|
||||||
const chooseImage = (e: any) => {
|
* @param e
|
||||||
uploadFile(e.raw, 'sgGovern/').then(res => {
|
*/
|
||||||
userLogo.name = res.data.name
|
const chooseImage = (e: any) => {
|
||||||
userLogo.url = res.data.url
|
uploadFile(e.raw, 'sgGovern/').then(res => {
|
||||||
form.userLogo = res.data.name
|
userLogo.name = res.data.name
|
||||||
ElMessage.success('新增成功')
|
userLogo.url = res.data.url
|
||||||
})
|
form.userLogo = res.data.name
|
||||||
}
|
ElMessage.success('新增成功')
|
||||||
|
})
|
||||||
/**
|
}
|
||||||
* 删除文件操作,此操作应在提交表单的时候操作,删除的图片可能有多张
|
|
||||||
*/
|
/**
|
||||||
const handleRemove = (e: any, userLogo: any) => {
|
* 删除文件操作,此操作应在提交表单的时候操作,删除的图片可能有多张
|
||||||
form.userLogo = ''
|
*/
|
||||||
userLogo.value = []
|
const handleRemove = (e: any, userLogo: any) => {
|
||||||
deleteFile(e.name).then(res => {
|
form.userLogo = ''
|
||||||
ElMessage.success('删除成功')
|
userLogo.value = []
|
||||||
})
|
deleteFile(e.name).then(res => {
|
||||||
}
|
ElMessage.success('删除成功')
|
||||||
|
})
|
||||||
/**
|
}
|
||||||
* 预览图片
|
|
||||||
*/
|
/**
|
||||||
const handlePictureCardPreview = () => {
|
* 预览图片
|
||||||
dialogVisibleLogo.value = true
|
*/
|
||||||
}
|
const handlePictureCardPreview = () => {
|
||||||
|
dialogVisibleLogo.value = true
|
||||||
/**
|
}
|
||||||
* 提交用户表单数据
|
|
||||||
*/
|
/**
|
||||||
const submit = () => {
|
* 提交用户表单数据
|
||||||
formRef.value.validate(async (valid: any) => {
|
*/
|
||||||
if (valid) {
|
const submit = () => {
|
||||||
if (form.id) {
|
formRef.value.validate(async (valid: any) => {
|
||||||
form.addrStrOption = form.addr.join('/')
|
if (valid) {
|
||||||
await updateSgUser(form)
|
if (form.id) {
|
||||||
ElMessage.success('更新成功')
|
form.addrStrOption = form.addr.join('/')
|
||||||
tableStore.index()
|
await updateSgUser(form)
|
||||||
//切到进线处
|
ElMessage.success('更新成功')
|
||||||
dialogVisible.value = false
|
tableStore.index()
|
||||||
} else {
|
//切到进线处
|
||||||
await addSgUser(form).then(res => {
|
dialogVisible.value = false
|
||||||
form.id = res.data
|
} else {
|
||||||
//查询进线数据,避免一直处于loading状态
|
await addSgUser(form).then(res => {
|
||||||
incomingTable.value.getTableData(form.id)
|
form.id = res.data
|
||||||
ElMessage.success('保存成功')
|
//查询进线数据,避免一直处于loading状态
|
||||||
tableStore.index()
|
incomingTable.value.getTableData(form.id)
|
||||||
//切到进线处
|
ElMessage.success('保存成功')
|
||||||
tab.value='incomingLine'
|
tableStore.index()
|
||||||
dialogVisible.value = true
|
//切到进线处
|
||||||
})
|
tab.value='incomingLine'
|
||||||
}
|
dialogVisible.value = true
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
/************针对tab切换*************/
|
}
|
||||||
const checkUserId = (tab: any, event: any) => {
|
|
||||||
if (tab == 'user') {
|
/************针对tab切换*************/
|
||||||
return true
|
const checkUserId = (tab: any, event: any) => {
|
||||||
}
|
if (tab == 'user') {
|
||||||
if (form.id) {
|
return true
|
||||||
return true
|
}
|
||||||
} else {
|
if (form.id) {
|
||||||
ElMessage.error('请先创建用户基础信息!')
|
return true
|
||||||
return false
|
} else {
|
||||||
}
|
ElMessage.error('请先创建用户基础信息!')
|
||||||
}
|
return false
|
||||||
|
}
|
||||||
defineExpose({ open })
|
}
|
||||||
</script>
|
|
||||||
|
defineExpose({ open })
|
||||||
<style scoped>
|
</script>
|
||||||
.el-upload-list__item {
|
|
||||||
transition: none !important;
|
<style scoped>
|
||||||
}
|
.el-upload-list__item {
|
||||||
|
transition: none !important;
|
||||||
.el-select {
|
}
|
||||||
min-width: 180px;
|
|
||||||
}
|
.el-select {
|
||||||
</style>
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,115 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">接口权限列表</div>
|
<div class="title">接口权限列表</div>
|
||||||
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入菜单名称"
|
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入关键字"
|
||||||
class="ml10" clearable @input="search" />
|
class="ml10" clearable @input="search" />
|
||||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||||
</div>
|
</div>
|
||||||
<Table ref="tableRef" />
|
<Table ref="tableRef" />
|
||||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import popupApi from './popupApi.vue'
|
import popupApi from './popupApi.vue'
|
||||||
import { deleteMenu } from '@/api/user-boot/function'
|
import { deleteMenu } from '@/api/user-boot/function'
|
||||||
|
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'auth/menu/api'
|
name: 'auth/menu/api'
|
||||||
})
|
})
|
||||||
const emits = defineEmits<{
|
const emits = defineEmits<{
|
||||||
(e: 'init'): void
|
(e: 'init'): void
|
||||||
}>()
|
}>()
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
const popupRef = ref()
|
const popupRef = ref()
|
||||||
const apiList = ref([])
|
const apiList = ref([])
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
showPage: false,
|
showPage: false,
|
||||||
url: '/user-boot/function/getButtonById',
|
url: '/user-boot/function/getButtonById',
|
||||||
publicHeight: 60,
|
publicHeight: 60,
|
||||||
column: [
|
column: [
|
||||||
{ title: '普通接口/接口名称', field: 'name', },
|
{ title: '普通接口/接口名称', field: 'name', },
|
||||||
{
|
{
|
||||||
title: '接口类型', field: 'type', formatter: row => {
|
title: '接口类型', field: 'type', formatter: row => {
|
||||||
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: 'URL接口路径', field: 'path' },
|
{ title: 'URL接口路径', field: 'path' },
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: '180',
|
width: '180',
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-EditPen',
|
icon: 'el-icon-EditPen',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
click: row => {
|
click: row => {
|
||||||
popupRef.value.open('编辑接口权限', row)
|
popupRef.value.open('编辑接口权限', row)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'del',
|
name: 'del',
|
||||||
title: '删除',
|
title: '删除',
|
||||||
type: 'danger',
|
type: 'danger',
|
||||||
icon: 'el-icon-Delete',
|
icon: 'el-icon-Delete',
|
||||||
render: 'confirmButton',
|
render: 'confirmButton',
|
||||||
popconfirm: {
|
popconfirm: {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
confirmButtonType: 'danger',
|
confirmButtonType: 'danger',
|
||||||
title: '确定删除该菜单吗?'
|
title: '确定删除该菜单吗?'
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
deleteMenu(row.id).then(() => {
|
deleteMenu(row.id).then(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
apiList.value = tableStore.table.data
|
apiList.value = tableStore.table.data
|
||||||
search()
|
search()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
tableStore.table.loading = false
|
tableStore.table.loading = false
|
||||||
watch(
|
watch(
|
||||||
() => props.id,
|
() => props.id,
|
||||||
() => {
|
() => {
|
||||||
tableStore.table.params.id = props.id
|
tableStore.table.params.id = props.id
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
const addMenu = () => {
|
const addMenu = () => {
|
||||||
console.log(popupRef)
|
console.log(popupRef)
|
||||||
popupRef.value.open('新增接口权限', {
|
popupRef.value.open('新增接口权限', {
|
||||||
pid: props.id
|
pid: props.id
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const search = () => {
|
const search = () => {
|
||||||
tableStore.table.data = apiList.value.filter(
|
tableStore.table.data = apiList.value.filter(
|
||||||
(item: any) =>
|
(item: any) =>
|
||||||
!tableStore.table.params.searchValue ||
|
!tableStore.table.params.searchValue ||
|
||||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -1,84 +1,84 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||||
<el-form-item label="角色名称" prop="name">
|
<el-form-item label="角色名称" prop="name">
|
||||||
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="角色编码" prop="code">
|
<el-form-item label="角色编码" prop="code">
|
||||||
<el-input v-model="form.code" placeholder="请输入菜单名称" />
|
<el-input v-model="form.code" placeholder="请输入角色编码" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="角色描述">
|
<el-form-item label="角色描述">
|
||||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit">确认</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, inject } from 'vue'
|
import { ref, inject } from 'vue'
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { add, update } from '@/api/user-boot/role'
|
import { add, update } from '@/api/user-boot/role'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
|
||||||
const adminInfo = useAdminInfo()
|
const adminInfo = useAdminInfo()
|
||||||
const tableStore = inject('tableStore') as TableStore
|
const tableStore = inject('tableStore') as TableStore
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
// do not use same name with ref
|
// do not use same name with ref
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
code: '',
|
code: '',
|
||||||
name: '',
|
name: '',
|
||||||
remark: '',
|
remark: '',
|
||||||
id: '',
|
id: '',
|
||||||
type: 0
|
type: 0
|
||||||
})
|
})
|
||||||
const rules = {
|
const rules = {
|
||||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||||
}
|
}
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const title = ref('新增菜单')
|
const title = ref('新增菜单')
|
||||||
const open = (text: string, data?: anyObj) => {
|
const open = (text: string, data?: anyObj) => {
|
||||||
title.value = text
|
title.value = text
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
if (data) {
|
if (data) {
|
||||||
for (let key in form) {
|
for (let key in form) {
|
||||||
form[key] = data[key]
|
form[key] = data[key]
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (let key in form) {
|
for (let key in form) {
|
||||||
form[key] = ''
|
form[key] = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
formRef.value.validate(async (valid: boolean) => {
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (form.id) {
|
if (form.id) {
|
||||||
await update(form)
|
await update(form)
|
||||||
} else {
|
} else {
|
||||||
form.type = adminInfo.$state.userType + 1
|
form.type = adminInfo.$state.userType + 1
|
||||||
await add(form)
|
await add(form)
|
||||||
}
|
}
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleInput = (val: string) => {
|
const handleInput = (val: string) => {
|
||||||
form.name = val.replace(/\s+/g, '')
|
form.name = val.replace(/\s+/g, '')
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
146
src/views/system/strategyManage/index.vue
Normal file
146
src/views/system/strategyManage/index.vue
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<div class="strategy-manage pd10" :style="height">
|
||||||
|
<el-form :inline="true" class="demo-form-inline">
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="AddClick()" type="primary" :icon="Plus">保存</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style="width: 500px">
|
||||||
|
<el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
|
||||||
|
<el-divider content-position="left">系统策略</el-divider>
|
||||||
|
<el-form-item label="最大并发数:" prop="maxUseUser">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.maxUseUser"
|
||||||
|
:min="10"
|
||||||
|
:max="99"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider content-position="left">账号锁定策略</el-divider>
|
||||||
|
<el-form-item label="密码输入错误次数:" prop="errorsCount">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.errorsCount"
|
||||||
|
:min="3"
|
||||||
|
:max="20"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="自动解锁(分钟):" prop="releaseTime">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.releaseTime"
|
||||||
|
:min="5"
|
||||||
|
:max="60"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="会话超时时间(秒):" prop="sessionTime">
|
||||||
|
<el-input-number v-model.number="form.sessionTime" :min="10" style="width: 100%"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="token刷新时间(秒):" prop="sessionRefreshTime">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.sessionRefreshTime"
|
||||||
|
:min="10"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider content-position="left">账号密码复杂度校验</el-divider>
|
||||||
|
<el-form-item label="密码有效期(月):" prop="passwordExpirationMonth">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.passwordExpirationMonth"
|
||||||
|
:min="1"
|
||||||
|
:max="6"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="账号长时间未登录休眠期(天):" prop="sleepDay">
|
||||||
|
<el-input-number
|
||||||
|
v-model.number="form.sleepDay"
|
||||||
|
:min="1"
|
||||||
|
:max="180"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { ruleUpdate, getRule, unlockRoot } from '@/api/admin/user.js'
|
||||||
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
|
||||||
|
// 页面缓存
|
||||||
|
defineOptions({
|
||||||
|
name: 'system-boot/sysConfig/timer'
|
||||||
|
})
|
||||||
|
|
||||||
|
const height = mainHeight(20)
|
||||||
|
|
||||||
|
// 定义表单引用
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
// 定义表单数据
|
||||||
|
const form = reactive({
|
||||||
|
maxUseUser: 50,
|
||||||
|
errorsCount: 0,
|
||||||
|
passwordExpirationMonth: 0,
|
||||||
|
sleepDay: 90,
|
||||||
|
releaseTime: 0,
|
||||||
|
sessionTime: 0,
|
||||||
|
sessionRefreshTime: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定义表单验证规则
|
||||||
|
const rules = {
|
||||||
|
maxUseUser: [{ required: true, message: '请填写最大并发数', trigger: 'blur' }],
|
||||||
|
errorsCount: [{ required: true, message: '请填写密码输入错误次数', trigger: 'blur' }],
|
||||||
|
releaseTime: [{ required: true, message: '请填写自动解锁(分钟)', trigger: 'blur' }],
|
||||||
|
sessionTime: [{ required: true, message: '请填写会话超时时间', trigger: 'blur' }],
|
||||||
|
sessionRefreshTime: [{ required: true, message: '请填写会话刷新时间', trigger: 'blur' }],
|
||||||
|
passwordExpirationMonth: [{ required: true, message: '请填写密码有效期', trigger: 'blur' }],
|
||||||
|
sleepDay: [{ required: true, message: '请填写休眠期', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取策略信息
|
||||||
|
const info = () => {
|
||||||
|
getRule().then(res => {
|
||||||
|
Object.assign(form, res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存策略
|
||||||
|
const AddClick = () => {
|
||||||
|
formRef.value.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
ruleUpdate(form).then(res => {
|
||||||
|
Object.assign(form, res.data)
|
||||||
|
ElMessage({
|
||||||
|
message: '保存成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
info()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取数据
|
||||||
|
onMounted(() => {
|
||||||
|
info()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.strategy-manage {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-form-item__label ){
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2
types/table.d.ts
vendored
2
types/table.d.ts
vendored
@@ -83,6 +83,8 @@ declare global {
|
|||||||
index: number
|
index: number
|
||||||
) => string
|
) => string
|
||||||
children?: TableColumn[]
|
children?: TableColumn[]
|
||||||
|
property?: string
|
||||||
|
clickable?: boolean // 是否可点击
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格右侧操作按钮 */
|
/* 表格右侧操作按钮 */
|
||||||
|
|||||||
110
vite.config.ts
110
vite.config.ts
@@ -1,54 +1,56 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
import AutoImport from 'unplugin-auto-import/vite'
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
import { svgBuilder } from '/@/components/icon/svg/index'
|
import { svgBuilder } from '/@/components/icon/svg/index'
|
||||||
|
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
|
|
||||||
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
svgBuilder('./src/assets/icons/'),
|
svgBuilder('./src/assets/icons/'),
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
AutoImport({
|
AutoImport({
|
||||||
//自动引入
|
//自动引入
|
||||||
imports: ['vue', 'vue-router', 'pinia']
|
imports: ['vue', 'vue-router', 'pinia']
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
open: true,
|
open: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
||||||
// target: 'http://10.118.135.128:10215', ///hsw
|
// target: 'http://10.118.135.128:10215', ///hsw
|
||||||
target: 'http://192.168.1.29:10215', ///hsw
|
target: 'http://192.168.1.67:10215', ///hsw
|
||||||
// target: 'http://10.119.65.152:10215', //数据中心
|
// target: 'http://192.168.1.68:10215', ///hsw
|
||||||
changeOrigin: true,
|
// target: 'http://10.119.65.152:10215', //数据中心
|
||||||
rewrite: path => path.replace(/^\/api/, '') //路径重写,把'/api'替换为''
|
changeOrigin: true,
|
||||||
},
|
rewrite: path => path.replace(/^\/api/, '') //路径重写,把'/api'替换为''
|
||||||
'/api-docx': {
|
},
|
||||||
// 文件服务器地址
|
'/api-docx': {
|
||||||
target: 'http://192.168.1.22:9009',
|
// 文件服务器地址
|
||||||
changeOrigin: true,
|
target: 'http://192.168.1.68:9009',
|
||||||
rewrite: path => path.replace(/^\/api-docx/, '')
|
changeOrigin: true,
|
||||||
},
|
rewrite: path => path.replace(/^\/api-docx/, '')
|
||||||
'/map': {
|
},
|
||||||
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
'/map': {
|
||||||
target: 'http://192.168.1.125:9009', //hsw
|
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
||||||
// target: 'http://192.168.1.125:8088', //数据中心
|
target: 'http://192.168.1.125:9009', //hsw
|
||||||
changeOrigin: true
|
// target: 'http://192.168.1.125:8088', //数据中心
|
||||||
}
|
changeOrigin: true
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
resolve: {
|
},
|
||||||
alias: {
|
resolve: {
|
||||||
'/@': nodeResolve('.src'),
|
alias: {
|
||||||
'@': nodeResolve('src'),
|
'/@': nodeResolve('.src'),
|
||||||
'~': nodeResolve('public')
|
'@': nodeResolve('src'),
|
||||||
}
|
'~': nodeResolve('public')
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
})
|
||||||
|
|
||||||
Reference in New Issue
Block a user