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

微调

Browse Source
This commit is contained in:
guanj
2025-09-26 10:59:37 +08:00
parent 6fcf99284d
commit e7f7c8b537
16 changed files with 2227 additions and 2203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue
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)
q_βminMap.value = res2.data.q_βminMap
setEChart(2, res2.data.data, '无功功率', 'kVar')
setEChart(2, res2.data.data, '无功功率', 'Var')
// 获取谐波电流数据并设置图表
const res3 = await queryCarryCapacityIData(form)

929
src/views/pqs/cockpit/setUp/components/popup.vue
View File

@@ -1,464 +1,465 @@
<template>
<div class="pd10">
<el-card>
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
<el-form-item label="页面名称:" prop="pageName">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.pageName"
placeholder="请输入页面名称"
></el-input>
</el-form-item>
<el-form-item label="页面排序:" prop="sort">
<el-input
maxlength="32"
show-word-limit-number
v-model.trim.number="form.sort"
:min="0"
:step="1"
step-strictly
style="width: 100%"
/>
</el-form-item>
<el-form-item label="备注:" class="top">
<el-input
maxlength="300"
show-word-limit
type="textarea"
:rows="1"
placeholder="请输入内容"
v-model.trim="form.remark"
></el-input>
</el-form-item>
<el-form-item>
<div style="width: 100%; display: flex; justify-content: end">
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
<back-component />
</div>
</el-form-item>
</el-form>
</el-card>
<el-card class="mt10" :style="height">
<div style="display: flex">
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
<el-collapse v-model="activeNames" :expand-icon-position="position">
<el-collapse-item
v-for="item in treeComponents"
:key="item.id"
:title="item.name"
:name="item.id"
>
<el-collapse v-model="activeNames1" class="ml20">
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
<div class="Box">
<div
v-for="(s, index) in k.children"
:key="index"
class="mr10 mb10 imgBox"
draggable="true"
unselectable="on"
@drag="drag(s)"
@dragend="dragEnd(s)"
>
<div class="textName">{{ s.name }}</div>
<img :src="s.image" style="width: 180px" />
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</div>
<div style="flex: 1" ref="wrapper">
<GridLayout
class="GridLayout"
ref="gridLayout"
v-model:layout="layout"
style="width: 100%"
:style="{ height: GridHeight + 'px' }"
:row-height="rowHeight"
:col-num="12"
:vertical-compact="false"
>
<template #item="{ item }">
<div class="imgBox">
<div class="textName">{{ item.name }}</div>
<img
:src="getImg(item.path)"
:style="{
height:
item.h * rowHeight -
(item.h == 1
? 30
: item.h == 2
? 20
: item.h == 3
? 10
: item.h == 4
? -0
: item.h == 5
? -10
: -20) +
'px'
}"
/>
<CloseBold class="remove" @click="removeItem(item.i)" />
</div>
<!-- <span class="text">{{ `${item?.name}` }}</span>
-->
</template>
</GridLayout>
</div>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import BackComponent from '@/components/icon/back/index.vue'
import { mainHeight } from '@/utils/layout'
import type { CollapseIconPositionType } from 'element-plus'
import { componentTree } from '@/api/user-boot/user'
import { GridLayout, GridItem } from 'grid-layout-plus'
import { throttle } from 'lodash-es'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Tools, CloseBold } from '@element-plus/icons-vue'
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
import html2canvas from 'html2canvas'
const { go } = useRouter()
const { query } = useRoute()
const height = mainHeight(108)
const indicatorHeight = mainHeight(128)
const rowHeight = ref(0)
const GridHeight = ref(0)
const position = ref<CollapseIconPositionType>('left')
const form: any = reactive({
pageName: '',
thumbnail: '',
containerConfig: [],
sort: '100',
id: '',
remark: ''
})
const activeNames = ref([])
const activeNames1 = ref([])
const rules = {
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const formRef = ref()
const layout: any = ref([
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
])
const treeComponents: any = ref([]) //组件树
const treeComponentsCopy: any = ref([]) //组件树
const info = () => {
activeNames.value = []
activeNames1.value = []
componentTree().then(res => {
treeComponents.value = res.data
activeNames.value = treeComponents.value.map(item => item.id)
res.data.forEach(item => {
item.children.forEach(k => {
activeNames1.value.push(k.id)
})
})
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
})
if (query.id) {
queryById({ id: query.id }).then(res => {
layout.value = JSON.parse(res.data.containerConfig)
form.pageName = res.data.pageName
form.sort = res.data.sort
form.remark = res.data.remark
form.id = res.data.id
})
}
}
// 扁平化树
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = Math.random() * 1000
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 删除拖拽
const removeItem = (id: string) => {
const index = layout.value.findIndex(item => item.i === id)
if (index > -1) {
layout.value.splice(index, 1)
}
}
const wrapper = ref<HTMLElement>()
const gridLayout = ref<InstanceType<typeof GridLayout>>()
const mouseAt = { x: -1, y: -1 }
function syncMousePosition(event: MouseEvent) {
mouseAt.x = event.clientX
mouseAt.y = event.clientY
}
const dropId = 'drop'
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
const drag = throttle(row => {
// console.log("🚀 ~ drag ~ row:", row)
const parentRect = wrapper.value?.getBoundingClientRect()
if (!parentRect || !gridLayout.value) return
const mouseInGrid =
mouseAt.x > parentRect.left &&
mouseAt.x < parentRect.right &&
mouseAt.y > parentRect.top &&
mouseAt.y < parentRect.bottom
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
layout.value.push({
x: (layout.value.length * 2) % 6,
y: layout.value.length + 6, // puts it at the bottom
w: 4,
h: 2,
i: dropId
})
}
const index = layout.value.findIndex(item => item.i === dropId)
if (index !== -1) {
const item = gridLayout.value.getItem(dropId)
if (!item) return
try {
item.wrapper.style.display = 'none'
} catch (e) {}
Object.assign(item.state, {
top: mouseAt.y - parentRect.top,
left: mouseAt.x - parentRect.left
})
const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
if (mouseInGrid) {
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
dragItem.i = String(index)
dragItem.x = layout.value[index].x
dragItem.y = layout.value[index].y
} else {
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
layout.value = layout.value.filter(item => item.i !== dropId)
}
}
})
function dragEnd(row: any) {
console.log('🚀 ~ drag ~ row:', row)
const parentRect = wrapper.value?.getBoundingClientRect()
if (!parentRect || !gridLayout.value) return
const mouseInGrid =
mouseAt.x > parentRect.left &&
mouseAt.x < parentRect.right &&
mouseAt.y > parentRect.top &&
mouseAt.y < parentRect.bottom
if (mouseInGrid) {
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
layout.value = layout.value.filter(item => item.i !== dropId)
} else {
return
}
layout.value.push({
x: dragItem.x,
y: dragItem.y,
w: dragItem.w,
h: dragItem.h,
i: dragItem.i,
name: row.name,
path: row.path,
icon: row.icon,
timeKey: row.timeKey
})
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
const item = gridLayout.value.getItem(dropId)
if (!item) return
try {
item.wrapper.style.display = ''
} catch (e) {}
}
// 保存
const onSubmit = () => {
if (layout.value.length == 0) {
return ElMessage.warning('页面设计不能为空!')
}
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
if (maxValue > 6) {
return ElMessage.warning('组件不能超出当前容器!')
}
formRef.value.validate(async (valid: boolean) => {
let url = ''
await html2canvas(document.querySelector('.GridLayout'), {
useCORS: true
}).then(canvas => {
url = canvas.toDataURL('image/png')
})
if (valid) {
if (form.id == '') {
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
(res: any) => {
ElMessage.success('新增页面成功!')
go(-1)
}
)
} else {
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
(res: any) => {
ElMessage.success('修改页面成功!')
go(-1)
}
)
}
}
})
}
const getImg = throttle((path: string) => {
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
})
onMounted(() => {
info()
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
rowHeight.value = GridHeight.value / 6 - 11.5
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
document.addEventListener('dragover', syncMousePosition)
})
onBeforeUnmount(() => {
document.removeEventListener('dragover', syncMousePosition)
})
// onMounted(() => {
// // document.addEventListener('dragover', syncMousePosition)
// })
</script>
<style lang="scss" scoped>
.form-four {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
display: flex;
flex: 1;
align-items: center;
.el-form-item__content {
width: 100%;
flex: 1;
.el-select,
.el-cascader,
.el-input__inner,
.el-date-editor {
width: 100%;
}
}
}
}
:deep(.el-card__body) {
padding: 20px 20px 12px;
}
.Box {
display: flex;
flex-wrap: wrap;
}
.imgBox {
// padding: 10px;
display: flex;
flex-direction: column;
box-shadow: var(--el-box-shadow-light);
--el-card-border-color: var(--el-border-color-light);
--el-card-border-radius: 4px;
--el-card-padding: 20px;
--el-card-bg-color: var(--el-fill-color-blank);
background-color: var(--el-card-bg-color);
border: 1px solid var(--el-card-border-color);
border-radius: var(--el-card-border-radius);
color: var(--el-text-color-primary);
overflow: hidden;
transition: var(--el-transition-duration) 0.3s;
.textName {
padding: 2px 5px;
background-color: var(--el-color-primary);
color: #fff;
}
user-select: none; /* 标准属性 */
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
.vgl-layout {
background-color: #eee;
}
.remove {
position: absolute;
top: 5px;
right: 2px;
width: 16px;
color: #fff;
cursor: pointer;
}
.vgl-layout::before {
position: absolute;
width: calc(100% - 5px);
height: calc(100% - 5px);
margin: 5px;
content: '';
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
background-repeat: repeat;
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
}
:deep(.vgl-item:not(.vgl-item--placeholder)) {
background-color: #fff;
border: 1px solid black;
}
</style>
<template>
<div class="pd10">
<el-card>
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
<el-form-item label="页面名称:" prop="pageName">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.pageName"
placeholder="请输入页面名称"
></el-input>
</el-form-item>
<el-form-item label="页面排序:" prop="sort">
<el-input
maxlength="32"
show-word-limit-number
v-model.trim.number="form.sort"
:min="0"
:step="1"
step-strictly
style="width: 100%"
/>
</el-form-item>
<el-form-item label="备注:" class="top">
<el-input
maxlength="300"
show-word-limit
type="textarea"
:rows="1"
placeholder="请输入内容"
v-model.trim="form.remark"
></el-input>
</el-form-item>
<el-form-item>
<div style="width: 100%; display: flex; justify-content: end">
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
<back-component />
</div>
</el-form-item>
</el-form>
</el-card>
<el-card class="mt10" :style="height">
<div style="display: flex">
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
<el-collapse v-model="activeNames" :expand-icon-position="position">
<el-collapse-item
v-for="item in treeComponents"
:key="item.id"
:title="item.name"
:name="item.id"
>
<el-collapse v-model="activeNames1" class="ml20">
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
<div class="Box">
<div
v-for="(s, index) in k.children"
:key="index"
class="mr10 mb10 imgBox"
draggable="true"
unselectable="on"
@drag="drag(s)"
@dragend="dragEnd(s)"
>
<div class="textName">{{ s.name }}</div>
<img :src="s.image" style="width: 180px" />
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</div>
<div style="flex: 1" ref="wrapper">
<GridLayout
class="GridLayout"
ref="gridLayout"
v-model:layout="layout"
style="width: 100%"
:style="{ height: GridHeight + 'px' }"
:row-height="rowHeight"
:col-num="12"
prevent-collision
:vertical-compact="false"
>
<template #item="{ item }">
<div class="imgBox">
<div class="textName">{{ item.name }}</div>
<img
:src="getImg(item.path)"
:style="{
height:
item.h * rowHeight -
(item.h == 1
? 30
: item.h == 2
? 20
: item.h == 3
? 10
: item.h == 4
? -0
: item.h == 5
? -10
: -20) +
'px'
}"
/>
<CloseBold class="remove" @click="removeItem(item.i)" />
</div>
<!-- <span class="text">{{ `${item?.name}` }}</span>
-->
</template>
</GridLayout>
</div>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import BackComponent from '@/components/icon/back/index.vue'
import { mainHeight } from '@/utils/layout'
import type { CollapseIconPositionType } from 'element-plus'
import { componentTree } from '@/api/user-boot/user'
import { GridLayout, GridItem } from 'grid-layout-plus'
import { throttle } from 'lodash-es'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Tools, CloseBold } from '@element-plus/icons-vue'
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
import html2canvas from 'html2canvas'
const { go } = useRouter()
const { query } = useRoute()
const height = mainHeight(108)
const indicatorHeight = mainHeight(128)
const rowHeight = ref(0)
const GridHeight = ref(0)
const position = ref<CollapseIconPositionType>('left')
const form: any = reactive({
pageName: '',
thumbnail: '',
containerConfig: [],
sort: '100',
id: '',
remark: ''
})
const activeNames = ref([])
const activeNames1 = ref([])
const rules = {
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const formRef = ref()
const layout: any = ref([
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
// { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
])
const treeComponents: any = ref([]) //组件树
const treeComponentsCopy: any = ref([]) //组件树
const info = () => {
activeNames.value = []
activeNames1.value = []
componentTree().then(res => {
treeComponents.value = res.data
activeNames.value = treeComponents.value.map(item => item.id)
res.data.forEach(item => {
item.children.forEach(k => {
activeNames1.value.push(k.id)
})
})
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
})
if (query.id) {
queryById({ id: query.id }).then(res => {
layout.value = JSON.parse(res.data.containerConfig)
form.pageName = res.data.pageName
form.sort = res.data.sort
form.remark = res.data.remark
form.id = res.data.id
})
}
}
// 扁平化树
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = Math.random() * 1000
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 删除拖拽
const removeItem = (id: string) => {
const index = layout.value.findIndex(item => item.i === id)
if (index > -1) {
layout.value.splice(index, 1)
}
}
const wrapper = ref<HTMLElement>()
const gridLayout = ref<InstanceType<typeof GridLayout>>()
const mouseAt = { x: -1, y: -1 }
function syncMousePosition(event: MouseEvent) {
mouseAt.x = event.clientX
mouseAt.y = event.clientY
}
const dropId = 'drop'
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
const drag = throttle(row => {
// console.log("🚀 ~ drag ~ row:", row)
const parentRect = wrapper.value?.getBoundingClientRect()
if (!parentRect || !gridLayout.value) return
const mouseInGrid =
mouseAt.x > parentRect.left &&
mouseAt.x < parentRect.right &&
mouseAt.y > parentRect.top &&
mouseAt.y < parentRect.bottom
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
layout.value.push({
x: (layout.value.length * 2) % 6,
y: layout.value.length + 6, // puts it at the bottom
w: 4,
h: 2,
i: dropId
})
}
const index = layout.value.findIndex(item => item.i === dropId)
if (index !== -1) {
const item = gridLayout.value.getItem(dropId)
if (!item) return
try {
item.wrapper.style.display = 'none'
} catch (e) {}
Object.assign(item.state, {
top: mouseAt.y - parentRect.top,
left: mouseAt.x - parentRect.left
})
const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
if (mouseInGrid) {
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
dragItem.i = String(index)
dragItem.x = layout.value[index].x
dragItem.y = layout.value[index].y
} else {
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
layout.value = layout.value.filter(item => item.i !== dropId)
}
}
})
function dragEnd(row: any) {
console.log('🚀 ~ drag ~ row:', row)
const parentRect = wrapper.value?.getBoundingClientRect()
if (!parentRect || !gridLayout.value) return
const mouseInGrid =
mouseAt.x > parentRect.left &&
mouseAt.x < parentRect.right &&
mouseAt.y > parentRect.top &&
mouseAt.y < parentRect.bottom
if (mouseInGrid) {
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
layout.value = layout.value.filter(item => item.i !== dropId)
} else {
return
}
layout.value.push({
x: dragItem.x,
y: dragItem.y,
w: dragItem.w,
h: dragItem.h,
i: dragItem.i,
name: row.name,
path: row.path,
icon: row.icon,
timeKey: row.timeKey
})
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
const item = gridLayout.value.getItem(dropId)
if (!item) return
try {
item.wrapper.style.display = ''
} catch (e) {}
}
// 保存
const onSubmit = () => {
if (layout.value.length == 0) {
return ElMessage.warning('页面设计不能为空!')
}
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
if (maxValue > 6) {
return ElMessage.warning('组件不能超出当前容器!')
}
formRef.value.validate(async (valid: boolean) => {
let url = ''
await html2canvas(document.querySelector('.GridLayout'), {
useCORS: true
}).then(canvas => {
url = canvas.toDataURL('image/png')
})
if (valid) {
if (form.id == '') {
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
(res: any) => {
ElMessage.success('新增页面成功!')
go(-1)
}
)
} else {
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
(res: any) => {
ElMessage.success('修改页面成功!')
go(-1)
}
)
}
}
})
}
const getImg = throttle((path: string) => {
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
})
onMounted(() => {
info()
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
rowHeight.value = GridHeight.value / 6 - 11.5
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
document.addEventListener('dragover', syncMousePosition)
})
onBeforeUnmount(() => {
document.removeEventListener('dragover', syncMousePosition)
})
// onMounted(() => {
// // document.addEventListener('dragover', syncMousePosition)
// })
</script>
<style lang="scss" scoped>
.form-four {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
display: flex;
flex: 1;
align-items: center;
.el-form-item__content {
width: 100%;
flex: 1;
.el-select,
.el-cascader,
.el-input__inner,
.el-date-editor {
width: 100%;
}
}
}
}
:deep(.el-card__body) {
padding: 20px 20px 12px;
}
.Box {
display: flex;
flex-wrap: wrap;
}
.imgBox {
// padding: 10px;
display: flex;
flex-direction: column;
box-shadow: var(--el-box-shadow-light);
--el-card-border-color: var(--el-border-color-light);
--el-card-border-radius: 4px;
--el-card-padding: 20px;
--el-card-bg-color: var(--el-fill-color-blank);
background-color: var(--el-card-bg-color);
border: 1px solid var(--el-card-border-color);
border-radius: var(--el-card-border-radius);
color: var(--el-text-color-primary);
overflow: hidden;
transition: var(--el-transition-duration) 0.3s;
.textName {
padding: 2px 5px;
background-color: var(--el-color-primary);
color: #fff;
}
user-select: none; /* 标准属性 */
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
.vgl-layout {
background-color: #eee;
}
.remove {
position: absolute;
top: 5px;
right: 2px;
width: 16px;
color: #fff;
cursor: pointer;
}
.vgl-layout::before {
position: absolute;
width: calc(100% - 5px);
height: calc(100% - 5px);
margin: 5px;
content: '';
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
background-repeat: repeat;
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
}
:deep(.vgl-item:not(.vgl-item--placeholder)) {
background-color: #fff;
border: 1px solid black;
}
</style>

7
src/views/pqs/harmonicMonitoring/detailed/division/components/aListOfLoadData.vue
View File

@@ -47,7 +47,7 @@ import Table from '@/components/table/index.vue'
import BackComponent from '@/components/icon/back/index.vue'
import completenessDetails from './completenessDetails.vue'
import { genFileId, ElMessage } from 'element-plus'
import { uploadUserData ,deleteUserDataByIds} from '@/api/advance-boot/division'
import { uploadUserData, deleteUserDataByIds } from '@/api/advance-boot/division'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
defineOptions({
name: 'division/aListOfLoadData'
@@ -78,6 +78,9 @@ const tableStore = new TableStore({
title: '完整性详情',
type: 'primary',
icon: 'el-icon-Plus',
disabled: row => {
return row.integrity == 1
},
render: 'basicButton',
click: row => {
completenessDetailsRef.value.open(row.id)
@@ -129,7 +132,7 @@ const submitupload = () => {
ElMessage.warning('请上传文件！')
return
}
ElMessage.info('上传中,请稍等...')
ElMessage.info('上传中,请稍等...')
const formData = new FormData()
formData.append('file', fileList.value[0].raw)
loading.value = true

27
src/views/pqs/harmonicMonitoring/detailed/division/components/completenessDetails.vue
View File

@@ -1,5 +1,4 @@
<template>
<el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
<TableHeader :showReset="false" ref="TableHeaderRef">
<template #select>
@@ -13,11 +12,9 @@
</template>
</TableHeader>
<Table ref="tableRef"></Table>
</el-dialog>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import Table from '@/components/table/index.vue'
@@ -33,15 +30,20 @@ const tableStore = new TableStore({
{ title: '数据名', field: 'name' },
{ title: '用户名', field: 'userName' },
{ title: '测量点局号', field: 'lineNo' },
{ title: '日期', field: 'upDataTime' },
{ title: '完整性', field: 'integrity' },
{ title: '日期', field: 'updateTime' },
{
title: '完整性(%)',
field: 'integrity',
formatter: (row: any) => {
return Math.floor(row.cellValue * 10000) / 100
}
}
],
loadCallback: () => {
setTimeout(() => {
tableStore.table.height = mainHeight(0,2).height as any
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
}, 0)
tableStore.table.height = mainHeight(0, 2).height as any
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
}, 0)
// setTimeout(() => { tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
}
})
@@ -49,17 +51,12 @@ const tableStore = new TableStore({
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
const open = (id: string) => {
tableStore.table.params.userDataId = id
dialogVisible.value = true
tableStore.index()
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

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

@@ -5,7 +5,7 @@
<!-- <div style="font-size: 14px; font-weight: 500">
</div> -->
<span class="monitoring-point"> {{ query.name || '' }}</span>
<span class="monitoring-point">{{ query.name || '' }}</span>
<back-component />
</div>
@@ -21,9 +21,11 @@
<div style="height: calc(100vh - 250px); overflow-y: auto">
<div
class="box boxTab mb10"
:style="`height: calc((100vh - 280px) / ${
item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
})`"
:style="{
height: `calc((100vh - 280px) / ${
item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
})`
}"
v-for="(value, i) in item.dynamicOptions"
:key="i"
>

413
src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue
View File

@@ -1,202 +1,211 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="对比">
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
<el-option
v-for="item in searchTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
<div style="flex: 1">
<my-echart :options="options1" />
</div>
<div style="flex: 1">
<my-echart :options="options2" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: monitoringPoint.state.lineId,
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const searchType = ref('')
const searchTypeOptions = [
{
label: '同比',
value: '1'
},
{
label: '环比',
value: '2'
}
]
const options1 = ref({})
const options2 = ref({})
onMounted(() => {
init()
})
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
if (searchType.value == '1') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
formData.searchBeginTime,
formData.searchEndTime
)
} else if (searchType.value == '2') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
formData.searchBeginTime,
formData.searchEndTime
)
} else {
formData.periodBeginTime = ''
formData.periodEndTime = ''
}
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
.then((res: any) => {
handlerOptions1(res[0].data)
handlerOptions2(res[1].data)
loading.value = false
})
.catch(() => {
loading.value = false
})
}
const handlerOptions1 = (data: any) => {
options1.value = {
title: {
text: '运行状态'
},
legend: {
show: false
},
tooltip: {
formatter: function (params: any) {
var res = params[0].data[0] + '<br/>终端运行状态为：'
var texts = ''
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
texts = '退出'
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
texts = '中断'
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
texts = '正常'
}
res = res + texts
return res
}
},
xAxis: {
// type: 'category',
// data: data.updateTime
type: 'time',
name: '时间',
//
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
yAxis: {
name: '状态',
type: 'value',
axisLabel: {
// 这里重新定义就可以
formatter: function (value: number) {
var texts = []
if (value === 2) {
texts.push('退出')
} else if (value === 0) {
texts.push('中断')
} else if (value === 1) {
texts.push('正常')
}
return texts
}
}
},
series: [
{
name: '中断运行状态',
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
type: 'line',
step: 'end'
}
]
}
}
const handlerOptions2 = (data: any) => {
options2.value = {
title: {
text: '在线率和完整性'
},
xAxis: {
type: 'category',
data: formData.periodBeginTime
? [
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
]
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
},
yAxis: {
name: '%',
type: 'value'
},
series: [
{
name: '在线率',
data: data.onlineRateData,
type: 'bar'
},
{
name: '完整性',
data: data.integrityData,
type: 'bar'
}
]
}
}
provide('tableStore', tableStore)
</script>
<style></style>
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="对比">
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
<el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
<div style="flex: 1">
<my-echart :options="options1" />
</div>
<div style="flex: 1">
<my-echart :options="options2" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
import { ElMessage, ElMessageBox } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: monitoringPoint.state.lineId,
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const searchType = ref('')
const searchTypeOptions = [
{
label: '同比',
value: '1'
},
{
label: '环比',
value: '2'
}
]
const options1 = ref({})
const options2 = ref({})
onMounted(() => {
init()
})
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
if (searchType.value == '1') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
formData.searchBeginTime,
formData.searchEndTime
)
} else if (searchType.value == '2') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
formData.searchBeginTime,
formData.searchEndTime
)
} else {
formData.periodBeginTime = ''
formData.periodEndTime = ''
}
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
.then((res: any) => {
handlerOptions1(res[0].data)
handlerOptions2(res[1].data)
loading.value = false
})
.catch(() => {
loading.value = false
})
}
const handlerOptions1 = (data: any) => {
options1.value = {
title: {
text: '运行状态'
},
legend: {
show: false
},
tooltip: {
formatter: function (params: any) {
var res = params[0].data[0] + '<br/>终端运行状态为：'
var texts = ''
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
texts = '退出'
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
texts = '中断'
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
texts = '正常'
}
res = res + texts
return res
}
},
xAxis: {
// type: 'category',
// data: data.updateTime
type: 'time',
name: '时间',
//
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
},
yAxis: {
name: '状态',
type: 'value',
axisLabel: {
// 这里重新定义就可以
formatter: function (value: number) {
var texts = []
if (value === 2) {
texts.push('退出')
} else if (value === 0) {
texts.push('中断')
} else if (value === 1) {
texts.push('正常')
}
return texts
}
}
},
series: [
{
name: '中断运行状态',
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
type: 'line',
step: 'end'
}
]
}
}
const handlerOptions2 = (data: any) => {
let title = ''
if (data.integrityData.some((item: any) => item > 100)) {
title = '数据存在异常，已进行转换处理'
data.integrityData = data.integrityData.map(item => {
return item > 100 ? 100 : item;
});
}
options2.value = {
title: {
text: '在线率和完整性',
subtext: title,
subtextStyle: {
color: 'red' // 设置副标题颜色为红色
}
},
xAxis: {
type: 'category',
data: formData.periodBeginTime
? [
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
]
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
},
yAxis: {
name: '%',
type: 'value'
},
series: [
{
name: '在线率',
data: data.onlineRateData,
type: 'bar'
},
{
name: '完整性',
data: data.integrityData,
type: 'bar'
}
]
}
}
provide('tableStore', tableStore)
</script>
<style></style>

534
src/views/pqs/voltageSags/sagGovern/businessUser/event/sags3D.vue
View File

@@ -1,267 +1,267 @@
<template>
<SecondSheet>
<div style='height: 100%; overflow: hidden'>
<div class='switch-tab'>
<el-radio-group v-model='radio' size='small'>
<el-radio-button value='三维图'>三维图</el-radio-button>
<el-radio-button value='表格'>表格</el-radio-button>
</el-radio-group>
</div>
<Table ref='tableRef' height='auto' isGroup />
<SecondSheet v-if="radio === '三维图'">
<MyEchart :options='options' v-if='options'></MyEchart>
</SecondSheet>
</div>
</SecondSheet>
</template>
<script lang='ts' setup>
import { ref, provide } from 'vue'
import SecondSheet from '@/components/secondSheet/index.vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
const radio = ref('三维图')
const options = ref()
const apiData = ref()
const tableStore3D = new TableStore({
showPage: false,
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
url: '/advance-boot/sgEvent/3DList',
method: 'POST',
column: [
{
title: '电压暂降频次统计表',
children: [
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
{
title: '持续时间(s)',
field: 'loginName',
children: []
}
]
}
],
loadCallback: () => {
const eventCount = tableStore3D.table.data.values
tableStore3D.table.data = {
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
values: [
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
],
table: {
total: 6,
rows: [
{
amplitude: '0.8~0.9',
d001_002s: eventCount[0][2],
d002_005s: eventCount[1][2],
d005_007s: eventCount[2][2],
d007_010s: eventCount[3][2],
d010_100s: eventCount[4][2]
},
{
amplitude: '0.7~0.8',
d001_002s: eventCount[5][2],
d002_005s: eventCount[6][2],
d005_007s: eventCount[7][2],
d007_010s: eventCount[8][2],
d010_100s: eventCount[9][2]
},
{
amplitude: '0.6~0.7',
d001_002s: eventCount[10][2],
d002_005s: eventCount[11][2],
d005_007s: eventCount[12][2],
d007_010s: eventCount[13][2],
d010_100s: eventCount[14][2]
},
{
amplitude: '0.5~0.6',
d001_002s: eventCount[15][2],
d002_005s: eventCount[16][2],
d005_007s: eventCount[17][2],
d007_010s: eventCount[18][2],
d010_100s: eventCount[19][2]
},
{
amplitude: '0.4~0.5',
d001_002s: eventCount[20][2],
d002_005s: eventCount[21][2],
d005_007s: eventCount[22][2],
d007_010s: eventCount[23][2],
d010_100s: eventCount[24][2]
},
{
amplitude: '0.1~0.4',
d001_002s: eventCount[25][2],
d002_005s: eventCount[26][2],
d005_007s: eventCount[27][2],
d007_010s: eventCount[28][2],
d010_100s: eventCount[29][2]
}
],
code: 200,
msg: '查询成功'
}
}
apiData.value = tableStore3D.table.data
tableStore3D.table.column![0].children![1].children = []
tableStore3D.table.column![0].children![1].children!.push(
...(apiData.value.durations.map((item: string) => {
return {
title: item,
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
}
}) as any[])
)
tableStore3D.table.data = apiData.value.table.rows
initEchart()
}
})
// 注入到子组件
provide('tableStore3D', tableStore3D)
const initEchart = () => {
options.value = {
options: {
xAxis: null,
yAxis: null,
dataZoom: null,
backgroundColor: '#fff',
tooltip: {
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter: function (params: any) {
let tips = ''
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
tips += '<font>事件次数::' + params.value[2] + '</font>'
return tips
}
},
title: {
text: '暂降密度图',
x: 'center'
},
xAxis3D: {
name: '暂降幅值(p.u.)',
type: 'category',
data: apiData.value.amplitudes
},
yAxis3D: {
name: '持续时间(s)',
type: 'category',
data: apiData.value.durations
},
zAxis3D: {
name: '次数',
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
projection: 'perspective',
distance: 250
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: 'bar3D',
data: apiData.value.values.map((item: [string, string, string]) => {
return [
apiData.value.amplitudes.indexOf(item[0]),
apiData.value.durations.indexOf(item[1]),
item[2]
]
}),
shading: 'lambert',
label: {
fontSize: 16,
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
}
]
}
}
}
const search = (id: string, beginTime: string, endTime: string) => {
// 从父组件tableStore3D获取参数
tableStore3D.table.params.searchBeginTime = beginTime
tableStore3D.table.params.searchEndTime = endTime
tableStore3D.table.params.userId = id
tableStore3D.index()
}
defineExpose({ search })
</script>
<style lang='scss'>
.switch-tab {
position: absolute;
right: 16px;
top: 4px;
z-index: 11;
}
</style>
<template>
<SecondSheet>
<div style='height: 100%; overflow: hidden' >
<div class='switch-tab'>
<el-radio-group v-model='radio' >
<el-radio-button value='三维图'>三维图</el-radio-button>
<el-radio-button value='表格'>表格</el-radio-button>
</el-radio-group>
</div>
<Table ref='tableRef' isGroup />
<SecondSheet v-if="radio === '三维图'">
<MyEchart :options='options' v-if='options'></MyEchart>
</SecondSheet>
</div>
</SecondSheet>
</template>
<script lang='ts' setup>
import { ref, provide } from 'vue'
import SecondSheet from '@/components/secondSheet/index.vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
const radio = ref('三维图')
const options = ref()
const apiData = ref()
const tableStore3D = new TableStore({
showPage: false,
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
url: '/advance-boot/sgEvent/3DList',
method: 'POST',
column: [
{
title: '电压暂降频次统计表',
children: [
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
{
title: '持续时间(s)',
field: 'loginName',
children: []
}
]
}
],
loadCallback: () => {
const eventCount = tableStore3D.table.data.values
tableStore3D.table.data = {
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
values: [
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
],
table: {
total: 6,
rows: [
{
amplitude: '0.8~0.9',
d001_002s: eventCount[0][2],
d002_005s: eventCount[1][2],
d005_007s: eventCount[2][2],
d007_010s: eventCount[3][2],
d010_100s: eventCount[4][2]
},
{
amplitude: '0.7~0.8',
d001_002s: eventCount[5][2],
d002_005s: eventCount[6][2],
d005_007s: eventCount[7][2],
d007_010s: eventCount[8][2],
d010_100s: eventCount[9][2]
},
{
amplitude: '0.6~0.7',
d001_002s: eventCount[10][2],
d002_005s: eventCount[11][2],
d005_007s: eventCount[12][2],
d007_010s: eventCount[13][2],
d010_100s: eventCount[14][2]
},
{
amplitude: '0.5~0.6',
d001_002s: eventCount[15][2],
d002_005s: eventCount[16][2],
d005_007s: eventCount[17][2],
d007_010s: eventCount[18][2],
d010_100s: eventCount[19][2]
},
{
amplitude: '0.4~0.5',
d001_002s: eventCount[20][2],
d002_005s: eventCount[21][2],
d005_007s: eventCount[22][2],
d007_010s: eventCount[23][2],
d010_100s: eventCount[24][2]
},
{
amplitude: '0.1~0.4',
d001_002s: eventCount[25][2],
d002_005s: eventCount[26][2],
d005_007s: eventCount[27][2],
d007_010s: eventCount[28][2],
d010_100s: eventCount[29][2]
}
],
code: 200,
msg: '查询成功'
}
}
apiData.value = tableStore3D.table.data
tableStore3D.table.column![0].children![1].children = []
tableStore3D.table.column![0].children![1].children!.push(
...(apiData.value.durations.map((item: string) => {
return {
title: item,
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
}
}) as any[])
)
tableStore3D.table.data = apiData.value.table.rows
initEchart()
}
})
// 注入到子组件
provide('tableStore3D', tableStore3D)
const initEchart = () => {
options.value = {
options: {
xAxis: null,
yAxis: null,
dataZoom: null,
backgroundColor: '#fff',
tooltip: {
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
formatter: function (params: any) {
let tips = ''
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
tips += '<font>事件次数::' + params.value[2] + '</font>'
return tips
}
},
title: {
text: '暂降密度图',
x: 'center'
},
xAxis3D: {
name: '暂降幅值(p.u.)',
type: 'category',
data: apiData.value.amplitudes
},
yAxis3D: {
name: '持续时间(s)',
type: 'category',
data: apiData.value.durations
},
zAxis3D: {
name: '次数',
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
projection: 'perspective',
distance: 250
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: 'bar3D',
data: apiData.value.values.map((item: [string, string, string]) => {
return [
apiData.value.amplitudes.indexOf(item[0]),
apiData.value.durations.indexOf(item[1]),
item[2]
]
}),
shading: 'lambert',
label: {
fontSize: 16,
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
}
]
}
}
}
const search = (id: string, beginTime: string, endTime: string) => {
// 从父组件tableStore3D获取参数
tableStore3D.table.params.searchBeginTime = beginTime
tableStore3D.table.params.searchEndTime = endTime
tableStore3D.table.params.userId = id
tableStore3D.index()
}
defineExpose({ search })
</script>
<style lang='scss'>
.switch-tab {
position: absolute;
right: 345px;
top: -37px;
z-index: 11;
}
</style>

686
src/views/pqs/voltageSags/sagGovern/businessUser/event/toleranceCurve.vue
View File

@@ -1,343 +1,343 @@
<template>
<SecondSheet>
<div class='tolerance-curve'>
<el-form label-width='auto' :inline='true'>
<el-form-item label='生产线'>
<el-select v-model='form.productLineId'>
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
:value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='终端'>
<el-select v-model='form.machineId' placeholder='暂无终端'>
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='敏感元器件'>
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
</el-form>
<div style='display: flex; flex: 1'>
<el-form label-width='auto' label-position='top'>
<!-- <el-form-item label='耐受曲线'>-->
<!-- <el-select v-model='form.name' placeholder='Select'>-->
<!-- <el-option-->
<!-- v-for='item in selectOptions'-->
<!-- :key='item.value'-->
<!-- :label='item.label'-->
<!-- :value='item.value'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
<!-- <el-select v-model='form.name' placeholder='Select'>-->
<!-- <el-option-->
<!-- v-for='item in selectOptions'-->
<!-- :key='item.value'-->
<!-- :label='item.label'-->
<!-- :value='item.value'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label='上限曲线膝点'>
<div>
<div>
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>p.u.</span>
</div>
<div class='mt10'>
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>ms</span>
</div>
</div>
</el-form-item>
<el-form-item label='下限曲线膝点'>
<div>
<div>
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>p.u.</span>
</div>
<div class='mt10'>
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>ms</span>
</div>
</div>
</el-form-item>
</el-form>
<div style='flex: 1' class='ml10'>
<MyEchart :options='options' v-if='options'></MyEchart>
</div>
</div>
</div>
</SecondSheet>
</template>
<script lang='ts' setup>
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref } from 'vue'
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
import { ElMessage } from 'element-plus'
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
const searchBeginTime = ref()
const searchEndTime = ref()
const userId = ref()
const form = reactive({
num: 1,
productLineId: '',
machineId: '',
unitId: ''
})
const productLineOptions = ref()
const machineOptions = ref()
const unitOptions = ref()
const unit = ref({
'vtcTimeUpper': 0,
'vtcAmpUpper': 0,
'vtcTimeLower': 0,
'vtcAmpLower': 0
})
const overEvent = ref([])
const unOverEvent = ref([])
const unKnownEvent = ref([])
const overEventColor = ref('#A52a2a')
const unOverEventColor = ref('#61a0a8')
const unKnownEventColor = ref('#d48265')
const eventData = ref()
const search = async (id: string, beginTime: string, endTime: string) => {
// 从父组件tableStore获取参数
searchBeginTime.value = beginTime
searchEndTime.value = endTime
userId.value = id
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
await querySgProductLineByUserId(id).then((res: any) => {
productLineOptions.value = res.data
form.productLineId = productLineOptions.value[0].id
})
//根据生产线获取终端数据
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
machineOptions.value = res.data
if (machineOptions.value.length > 0) {
form.machineId = machineOptions.value[0].id
}
})
//根据终端获取元器件数据
await queryUnitByMachineId(form.machineId).then((res: any) => {
unitOptions.value = res.data
if (unitOptions.value.length > 0) {
form.unitId = unitOptions.value[0].id
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
}
})
const data = {
searchBeginTime: beginTime,
searchEndTime: endTime,
productId: form.productLineId
}
await getEventDataByProductLineId(data).then((res: any) => {
eventData.value = res.data
reDrawPic()
})
}
const changeUnit = (id: any) => {
if (id == undefined) return
let list = unitOptions.value.filter((item: any) => item.id == id)
unit.value = JSON.parse(JSON.stringify(list[0]))
reDrawPic()
}
const options = ref()
const initOptions = () => {
options.value = {
legend: {
data: ['越限事件', '未越限事件', '不确定事件'],
left: '10px'
},
tooltip: {
formatter: function (a: any) {
if (a[0].value[3] == undefined) {
return
}
let relVal = ''
relVal += '<font style=\'color:' + '\'>进线:' + '&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[0].toFixed(2) + 's</font><br/>'
relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + a[0].value[1] + 'p.u.</font>'
return relVal
}
},
xAxis: {
name: '持续时间/s',
type: 'log',
min: '0.001',
max: '1000',
splitLine: { show: false }
},
yAxis: {
name: '幅值/p.u.',
max: 1,
min: 0,
splitLine: { show: false }
},
grid: {
right: '78px',
},
series: [
{
type: 'line',
color: '#ff0000',
data: [
[unit.value.vtcTimeUpper / 1000, 0],
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
[1000, unit.value.vtcAmpUpper]
],
showSymbol: false,
tooltips: {
show: false
}
},
{
type: 'line',
color: '#ff0000',
data: [
[unit.value.vtcTimeLower / 1000, 0],
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
[1000, unit.value.vtcAmpLower]
],
showSymbol: false,
tooltips: {
show: false
}
},
{
name: '越限事件',
type: 'scatter',
symbol: 'circle',
data: overEvent.value
},
{
name: '未越限事件',
type: 'scatter',
symbol: 'circle',
data: unOverEvent.value
},
{
name: '不确定事件',
type: 'scatter',
symbol: 'circle',
data: unKnownEvent.value
}
],
options: {
dataZoom: null
}
}
}
const reDrawPic = () => {
//清洗要显示的数据
if (eventData.value.length > 0) {
unOverEvent.value = []
overEvent.value = []
unKnownEvent.value = []
for (let event of eventData.value) {
//判断落在哪个区域内
let eventTime = Number(event.duration) / 1000
let eventAmplitude = Number(event.featureAmplitude)
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
//未越限
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: unOverEventColor.value
}
}
}
unOverEvent.value.push(dataTemp)
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
//故障阶段
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: overEventColor.value
}
}
}
overEvent.value.push(dataTemp)
} else {
//不确定事件
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: unKnownEventColor.value
}
}
}
unKnownEvent.value.push(dataTemp)
}
}
}
//初始化图表
initOptions()
}
defineExpose({ search })
</script>
<style lang='scss' scoped>
.tolerance-curve {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding: 10px;
border: 1px solid var(--el-border-color);
}
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
width: 185px !important;
}
</style>
<template>
<SecondSheet>
<div class='tolerance-curve'>
<el-form label-width='auto' :inline='true'>
<el-form-item label='生产线'>
<el-select v-model='form.productLineId'>
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
:value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='终端'>
<el-select v-model='form.machineId' placeholder='暂无终端'>
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='敏感元器件'>
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
</el-form>
<div style='display: flex; flex: 1'>
<el-form label-width='auto' label-position='top'>
<!-- <el-form-item label='耐受曲线'>-->
<!-- <el-select v-model='form.name' placeholder='Select'>-->
<!-- <el-option-->
<!-- v-for='item in selectOptions'-->
<!-- :key='item.value'-->
<!-- :label='item.label'-->
<!-- :value='item.value'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
<!-- <el-select v-model='form.name' placeholder='Select'>-->
<!-- <el-option-->
<!-- v-for='item in selectOptions'-->
<!-- :key='item.value'-->
<!-- :label='item.label'-->
<!-- :value='item.value'-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label='上限曲线膝点'>
<div>
<div>
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>p.u.</span>
</div>
<div class='mt10'>
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>ms</span>
</div>
</div>
</el-form-item>
<el-form-item label='下限曲线膝点'>
<div>
<div>
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>p.u.</span>
</div>
<div class='mt10'>
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
@change='reDrawPic' />
<span class='ml10' style='color: #333'>ms</span>
</div>
</div>
</el-form-item>
</el-form>
<div style='flex: 1' class='ml10'>
<MyEchart :options='options' v-if='options'></MyEchart>
</div>
</div>
</div>
</SecondSheet>
</template>
<script lang='ts' setup>
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref } from 'vue'
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
import { ElMessage } from 'element-plus'
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
const searchBeginTime = ref()
const searchEndTime = ref()
const userId = ref()
const form = reactive({
num: 1,
productLineId: '',
machineId: '',
unitId: ''
})
const productLineOptions = ref()
const machineOptions = ref()
const unitOptions = ref()
const unit = ref({
'vtcTimeUpper': 0,
'vtcAmpUpper': 0,
'vtcTimeLower': 0,
'vtcAmpLower': 0
})
const overEvent = ref([])
const unOverEvent = ref([])
const unKnownEvent = ref([])
const overEventColor = ref('#A52a2a')
const unOverEventColor = ref('#61a0a8')
const unKnownEventColor = ref('#d48265')
const eventData = ref()
const search = async (id: string, beginTime: string, endTime: string) => {
// 从父组件tableStore获取参数
searchBeginTime.value = beginTime
searchEndTime.value = endTime
userId.value = id
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
await querySgProductLineByUserId(id).then((res: any) => {
productLineOptions.value = res.data
form.productLineId = productLineOptions.value[0].id
})
//根据生产线获取终端数据
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
machineOptions.value = res.data
if (machineOptions.value.length > 0) {
form.machineId = machineOptions.value[0].id
}
})
//根据终端获取元器件数据
await queryUnitByMachineId(form.machineId).then((res: any) => {
unitOptions.value = res.data
if (unitOptions.value.length > 0) {
form.unitId = unitOptions.value[0].id
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
}
})
const data = {
searchBeginTime: beginTime,
searchEndTime: endTime,
productId: form.productLineId
}
await getEventDataByProductLineId(data).then((res: any) => {
eventData.value = res.data
reDrawPic()
})
}
const changeUnit = (id: any) => {
if (id == undefined) return
let list = unitOptions.value.filter((item: any) => item.id == id)
unit.value = JSON.parse(JSON.stringify(list[0]))
reDrawPic()
}
const options = ref()
const initOptions = () => {
options.value = {
legend: {
data: ['越限事件', '未越限事件', '不确定事件'],
},
tooltip: {
formatter: function (a: any) {
if (a[0].value[3] == undefined) {
return
}
let relVal = ''
relVal += '<font style=\'color:' + '\'>进线:' + '&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[0].toFixed(2) + 's</font><br/>'
relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + a[0].value[1] + 'p.u.</font>'
return relVal
}
},
xAxis: {
name: '持续时间/s',
type: 'log',
min: '0.001',
max: '1000',
splitLine: { show: false }
},
yAxis: {
name: '幅值/p.u.',
max: 1,
min: 0,
splitLine: { show: false }
},
grid: {
right: '78px',
},
series: [
{
type: 'line',
color: '#ff0000',
data: [
[unit.value.vtcTimeUpper / 1000, 0],
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
[1000, unit.value.vtcAmpUpper]
],
showSymbol: false,
tooltips: {
show: false
}
},
{
type: 'line',
color: '#ff0000',
data: [
[unit.value.vtcTimeLower / 1000, 0],
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
[1000, unit.value.vtcAmpLower]
],
showSymbol: false,
tooltips: {
show: false
}
},
{
name: '越限事件',
type: 'scatter',
symbol: 'circle',
data: overEvent.value
},
{
name: '未越限事件',
type: 'scatter',
symbol: 'circle',
data: unOverEvent.value
},
{
name: '不确定事件',
type: 'scatter',
symbol: 'circle',
data: unKnownEvent.value
}
],
options: {
dataZoom: null
}
}
}
const reDrawPic = () => {
//清洗要显示的数据
if (eventData.value.length > 0) {
unOverEvent.value = []
overEvent.value = []
unKnownEvent.value = []
for (let event of eventData.value) {
//判断落在哪个区域内
let eventTime = Number(event.duration) / 1000
let eventAmplitude = Number(event.featureAmplitude)
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
//未越限
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: unOverEventColor.value
}
}
}
unOverEvent.value.push(dataTemp)
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
//故障阶段
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: overEventColor.value
}
}
}
overEvent.value.push(dataTemp)
} else {
//不确定事件
const dataTemp = {
value: [
eventTime,
eventAmplitude,
event.startTime,
event.incomingLineName
],
itemStyle: {
normal: {
color: unKnownEventColor.value
}
}
}
unKnownEvent.value.push(dataTemp)
}
}
}
//初始化图表
initOptions()
}
defineExpose({ search })
</script>
<style lang='scss' scoped>
.tolerance-curve {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding: 10px;
border: 1px solid var(--el-border-color);
}
.el-form-item__label-wrap {
margin-left: 0 !important;
}
.el-form-item__content {
width: 185px !important;
}
</style>

502
src/views/pqs/voltageSags/sagGovern/businessUser/userPopup.vue
View File

@@ -1,250 +1,252 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
<el-tab-pane label="基本信息" name="user">
<el-form-item label="用户名" prop="userName" >
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="重点用户">
<el-select v-model="form.keyUser">
<el-option label="重要" value="1" />
<el-option label="不重要" value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属行业" prop="industry">
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所在地区" prop="addr">
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
</el-form-item>
<el-form-item label="详细地址">
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
</el-form-item>
<el-form-item label="用户描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
</el-form-item>
<el-form-item label="企业照片">
<div>
<el-image
style="width: 200px; height: 200px"
:src="userLogo.url"
:preview-src-list="[userLogo.url]"
v-if="userLogo.url"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</div>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="进线" name="incomingLine">
<IncomingTable ref="incomingTable"></IncomingTable>
</el-tab-pane>
</el-tabs>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import AreaCascard from '@/components/form/areaCascard/index.vue'
import { uploadFile, deleteFile } from '@/api/system-boot/file'
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
import IncomingTable from './IncomingTable.vue'
import { fullUrl } from '@/utils/common'
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const areaRef = ref()
const formRef = ref()
const tab = ref('user')
//进线表格子组件
const incomingTable = ref()
const userLogo = reactive({
url: '',
name: ''
})
const dialogVisibleLogo = ref(false)
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
id: '',
userName: '',
keyUser: '1',
industry: '',
addr: [],
addrStrOption: '',
addrDetail: '',
concact: '',
remark: '',
userLogo: ''
})
//form表单校验规则
const rules = {
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
}
const resetForm = () => {
if (formRef.value) {
formRef.value.resetFields()
}
}
const open = (text: string, data?: anyObj) => {
tab.value = 'user'
title.value = text
//默认选中第一个tab
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
form.addr = data.addr.split('/')
form.keyUser = String(data.keyUser)
if (form.userLogo) {
userLogo.url = fullUrl(form.userLogo)
// 图片的name我不知道
}
//待子组件渲染完毕
nextTick(() => {
incomingTable.value.getTableData(form.id)
})
} else {
resetForm()
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
userLogo.url = ''
form.keyUser = '1'
}
}
/**
* 将联级选择的区域数组转为字符串
*/
const reValueAddr = () => {
form.addrStrOption = form.addr.join('/')
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
uploadFile(e.raw, 'sgGovern/').then(res => {
userLogo.name = res.data.name
userLogo.url = res.data.url
form.userLogo = res.data.name
ElMessage.success('新增成功')
})
}
/**
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
*/
const handleRemove = (e: any, userLogo: any) => {
form.userLogo = ''
userLogo.value = []
deleteFile(e.name).then(res => {
ElMessage.success('删除成功')
})
}
/**
* 预览图片
*/
const handlePictureCardPreview = () => {
dialogVisibleLogo.value = true
}
/**
* 提交用户表单数据
*/
const submit = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
if (form.id) {
form.addrStrOption = form.addr.join('/')
await updateSgUser(form)
ElMessage.success('更新成功')
tableStore.index()
//切到进线处
dialogVisible.value = false
} else {
await addSgUser(form).then(res => {
form.id = res.data
//查询进线数据，避免一直处于loading状态
incomingTable.value.getTableData(form.id)
ElMessage.success('保存成功')
tableStore.index()
//切到进线处
tab.value='incomingLine'
dialogVisible.value = true
})
}
}
})
}
/************针对tab切换*************/
const checkUserId = (tab: any, event: any) => {
if (tab == 'user') {
return true
}
if (form.id) {
return true
} else {
ElMessage.error('请先创建用户基础信息！')
return false
}
}
defineExpose({ open })
</script>
<style scoped>
.el-upload-list__item {
transition: none !important;
}
.el-select {
min-width: 180px;
}
</style>
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
<el-tab-pane label="基本信息" name="user">
<el-form-item label="用户名" prop="userName" >
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="重点用户">
<el-select v-model="form.keyUser">
<el-option label="重要" value="1" />
<el-option label="不重要" value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属行业" prop="industry">
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所在地区" prop="addr">
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
</el-form-item>
<el-form-item label="详细地址">
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
</el-form-item>
<el-form-item label="用户描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
</el-form-item>
<el-form-item label="企业照片">
<div>
<el-image
style="width: 200px; height: 200px"
:src="userLogo.url"
:preview-src-list="[userLogo.url]"
v-if="userLogo.url"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</div>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="进线" name="incomingLine">
<IncomingTable ref="incomingTable"></IncomingTable>
</el-tab-pane>
</el-tabs>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import AreaCascard from '@/components/form/areaCascard/index.vue'
import { uploadFile, deleteFile } from '@/api/system-boot/file'
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
import IncomingTable from './IncomingTable.vue'
import { getFileUrl } from '@/api/system-boot/file'
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const areaRef = ref()
const formRef = ref()
const tab = ref('user')
//进线表格子组件
const incomingTable = ref()
const userLogo = reactive({
url: '',
name: ''
})
const dialogVisibleLogo = ref(false)
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
id: '',
userName: '',
keyUser: '1',
industry: '',
addr: [],
addrStrOption: '',
addrDetail: '',
concact: '',
remark: '',
userLogo: ''
})
//form表单校验规则
const rules = {
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
}
const resetForm = () => {
if (formRef.value) {
formRef.value.resetFields()
}
}
const open = (text: string, data?: anyObj) => {
tab.value = 'user'
title.value = text
//默认选中第一个tab
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
form.addr = data.addr.split('/')
form.keyUser = String(data.keyUser)
if (form.userLogo) {
getFileUrl({filePath:form.userLogo}).then(res=>{
userLogo.url=res.data
})
// 图片的name我不知道
}
//待子组件渲染完毕
nextTick(() => {
incomingTable.value.getTableData(form.id)
})
} else {
resetForm()
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
userLogo.url = ''
form.keyUser = '1'
}
}
/**
* 将联级选择的区域数组转为字符串
*/
const reValueAddr = () => {
form.addrStrOption = form.addr.join('/')
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
uploadFile(e.raw, 'sgGovern/').then(res => {
userLogo.name = res.data.name
userLogo.url = res.data.url
form.userLogo = res.data.name
ElMessage.success('新增成功')
})
}
/**
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
*/
const handleRemove = (e: any, userLogo: any) => {
form.userLogo = ''
userLogo.value = []
deleteFile(e.name).then(res => {
ElMessage.success('删除成功')
})
}
/**
* 预览图片
*/
const handlePictureCardPreview = () => {
dialogVisibleLogo.value = true
}
/**
* 提交用户表单数据
*/
const submit = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
if (form.id) {
form.addrStrOption = form.addr.join('/')
await updateSgUser(form)
ElMessage.success('更新成功')
tableStore.index()
//切到进线处
dialogVisible.value = false
} else {
await addSgUser(form).then(res => {
form.id = res.data
//查询进线数据，避免一直处于loading状态
incomingTable.value.getTableData(form.id)
ElMessage.success('保存成功')
tableStore.index()
//切到进线处
tab.value='incomingLine'
dialogVisible.value = true
})
}
}
})
}
/************针对tab切换*************/
const checkUserId = (tab: any, event: any) => {
if (tab == 'user') {
return true
}
if (form.id) {
return true
} else {
ElMessage.error('请先创建用户基础信息！')
return false
}
}
defineExpose({ open })
</script>
<style scoped>
.el-upload-list__item {
transition: none !important;
}
.el-select {
min-width: 180px;
}
</style>

228
src/views/system/auth/menu/api.vue
View File

@@ -1,115 +1,115 @@
<template>
<div>
<div class="custom-table-header">
<div class="title">接口权限列表</div>
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入菜单名称"
class="ml10" clearable @input="search" />
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
</div>
<Table ref="tableRef" />
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, Ref, inject, provide, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import popupApi from './popupApi.vue'
import { deleteMenu } from '@/api/user-boot/function'
defineOptions({
name: 'auth/menu/api'
})
const emits = defineEmits<{
(e: 'init'): void
}>()
const props = defineProps({
id: {
type: String,
default: ''
}
})
const tableRef = ref()
const popupRef = ref()
const apiList = ref([])
const tableStore = new TableStore({
showPage: false,
url: '/user-boot/function/getButtonById',
publicHeight: 60,
column: [
{ title: '普通接口/接口名称', field: 'name', },
{
title: '接口类型', field: 'type', formatter: row => {
return row.cellValue == 1 ? '普通接口' : '公用接口'
}
},
{ title: 'URL接口路径', field: 'path' },
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
popupRef.value.open('编辑接口权限', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该菜单吗？'
},
click: row => {
deleteMenu(row.id).then(() => {
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
apiList.value = tableStore.table.data
search()
}
})
tableStore.table.loading = false
watch(
() => props.id,
() => {
tableStore.table.params.id = props.id
tableStore.index()
}
)
provide('tableStore', tableStore)
const addMenu = () => {
console.log(popupRef)
popupRef.value.open('新增接口权限', {
pid: props.id
})
}
const search = () => {
tableStore.table.data = apiList.value.filter(
(item: any) =>
!tableStore.table.params.searchValue ||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
)
}
<template>
<div>
<div class="custom-table-header">
<div class="title">接口权限列表</div>
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入关键字"
class="ml10" clearable @input="search" />
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
</div>
<Table ref="tableRef" />
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, Ref, inject, provide, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import popupApi from './popupApi.vue'
import { deleteMenu } from '@/api/user-boot/function'
defineOptions({
name: 'auth/menu/api'
})
const emits = defineEmits<{
(e: 'init'): void
}>()
const props = defineProps({
id: {
type: String,
default: ''
}
})
const tableRef = ref()
const popupRef = ref()
const apiList = ref([])
const tableStore = new TableStore({
showPage: false,
url: '/user-boot/function/getButtonById',
publicHeight: 60,
column: [
{ title: '普通接口/接口名称', field: 'name', },
{
title: '接口类型', field: 'type', formatter: row => {
return row.cellValue == 1 ? '普通接口' : '公用接口'
}
},
{ title: 'URL接口路径', field: 'path' },
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
popupRef.value.open('编辑接口权限', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该菜单吗？'
},
click: row => {
deleteMenu(row.id).then(() => {
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
apiList.value = tableStore.table.data
search()
}
})
tableStore.table.loading = false
watch(
() => props.id,
() => {
tableStore.table.params.id = props.id
tableStore.index()
}
)
provide('tableStore', tableStore)
const addMenu = () => {
console.log(popupRef)
popupRef.value.open('新增接口权限', {
pid: props.id
})
}
const search = () => {
tableStore.table.data = apiList.value.filter(
(item: any) =>
!tableStore.table.params.searchValue ||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
)
}
</script>

168
src/views/system/auth/role/popupForm.vue
View File

@@ -1,84 +1,84 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="角色名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="form.code" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="角色描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// do not use same name with ref
const form = reactive({
code: '',
name: '',
remark: '',
id: '',
type: 0
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
}
} else {
for (let key in form) {
form[key] = ''
}
}
}
const submit = async () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await update(form)
} else {
form.type = adminInfo.$state.userType + 1
await add(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
const handleInput = (val: string) => {
form.name = val.replace(/\s+/g, '')
}
defineExpose({ open })
</script>
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="角色名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="form.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="角色描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// do not use same name with ref
const form = reactive({
code: '',
name: '',
remark: '',
id: '',
type: 0
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
}
} else {
for (let key in form) {
form[key] = ''
}
}
}
const submit = async () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await update(form)
} else {
form.type = adminInfo.$state.userType + 1
await add(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
const handleInput = (val: string) => {
form.name = val.replace(/\s+/g, '')
}
defineExpose({ open })
</script>