Compare commits

22 Commits

Author SHA1 Message Date
wr
1bde44902f 修改电网一张图publicKey 2025-10-13 16:40:47 +08:00
stt
11f0c2ee50 稳态电能质量分析页面组件 2025-10-13 14:24:57 +08:00
stt
262b593d86 排序修改 2025-10-11 15:34:17 +08:00
stt
a895684364 样式修改 2025-10-11 15:32:51 +08:00
stt
29a90a36af Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-10-11 15:21:30 +08:00
stt
bf141fbaa4 添加图标 2025-10-11 15:21:27 +08:00
guanj
d6ef23c642 Merge branch 'master' of http://192.168.1.22:3000/Web/admin-sjzx 2025-10-11 15:20:01 +08:00
guanj
dd3d829820 调整审计管理 2025-10-11 15:19:50 +08:00
stt
70505ac356 删除多余文件 2025-10-11 14:39:36 +08:00
stt
a7e3cebb6f 审计列表页提交 2025-10-11 14:37:58 +08:00
stt
0bb7577a92 代码合并 2025-10-11 09:46:55 +08:00
stt
ccf3bf27f4 代码提交 2025-10-11 09:45:25 +08:00
guanj
e7f7c8b537 微调 2025-09-26 10:59:37 +08:00
sjl
6fcf99284d 污染值报表高度,合并查询 2025-09-11 15:57:31 +08:00
sjl
868463aef9 微调 2025-09-11 14:48:34 +08:00
sjl
47adb54dee 调整污染值分页控件 2025-09-11 14:32:50 +08:00
sjl
c520761c0e 微调 2025-09-11 13:43:39 +08:00
sjl
8b23cea38d 模型库 2025-09-11 13:14:36 +08:00
sjl
db6594cdf4 微调 2025-09-11 08:46:56 +08:00
sjl
82e41eefdb 污染值报表 2025-09-11 08:46:12 +08:00
guanj
b48d247fcf 联调谐波责任划分页面 2025-09-05 16:03:31 +08:00
sjl
345e954756 评估用户维护编辑保存,导入接口异常 2025-09-04 18:44:16 +08:00
43 changed files with 6227 additions and 2610 deletions

26
src/api/admin/user.js Normal file
View 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
})
}

View File

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

View 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",
});
}

View 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
})
}

View File

@@ -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
} })
}

View File

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

View File

@@ -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>

View 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>

View 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>

View File

@@ -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'

View File

@@ -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'
// 方式1NPM 安装,注入 ExcelJS 对象 // 方式1NPM 安装,注入 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()

View File

@@ -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> = [
}) })
} }
} }
} }
} }
] ]

View File

@@ -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 += '监测点数' + ':' + '&nbsp' + '&nbsp' + 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@@ -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)

View File

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

View File

@@ -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>

View 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>

View File

@@ -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>

View File

@@ -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>

View 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>

View 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>

View File

@@ -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

View File

@@ -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>

View File

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

View File

@@ -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>

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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',

View File

@@ -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>

View File

@@ -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>

View File

@@ -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:' + '\'>进线:' + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>' relVal += '<font style=\'color:' + '\'>进线:' + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
relVal += '<font style=\'color:' + '\'>发生时刻:' + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>' relVal += '<font style=\'color:' + '\'>发生时刻:' + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
relVal += '<font style=\'color:' + '\'>持续时间:' + '&nbsp' + '&nbsp' + a[0].value[0].toFixed(2) + 's</font><br/>' relVal += '<font style=\'color:' + '\'>持续时间:' + '&nbsp' + '&nbsp' + a[0].value[0].toFixed(2) + 's</font><br/>'
relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + a[0].value[1] + 'p.u.</font>' relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + 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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View 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
View File

@@ -83,6 +83,8 @@ declare global {
index: number index: number
) => string ) => string
children?: TableColumn[] children?: TableColumn[]
property?: string
clickable?: boolean // 是否可点击
} }
/* 表格右侧操作按钮 */ /* 表格右侧操作按钮 */

View File

@@ -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')
} }
}) }
})