微调
This commit is contained in:
guanj
@@ -1,71 +1,72 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
const SYSTEM_PREFIX = '/system-boot'
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param file
|
||||
*/
|
||||
export const uploadFile = (file: any, path: string) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('path', path)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/upload',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
export const deleteFile = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/delete',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
export const downloadFile = (filePath: any) => {
|
||||
// let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/download',
|
||||
method: 'GET',
|
||||
params: filePath,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件的短期url展示
|
||||
*/
|
||||
export const getFileUrl = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据获取文件的一个短期url及文件名
|
||||
*/
|
||||
export const getFileNameAndFilePath = (query: any) => {
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
const SYSTEM_PREFIX = '/system-boot'
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param file
|
||||
*/
|
||||
export const uploadFile = (file: any, path: string) => {
|
||||
let form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('path', path)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/upload',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
export const deleteFile = (filePath: string) => {
|
||||
let form = new FormData()
|
||||
form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/delete',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
export const downloadFile = (filePath: any) => {
|
||||
// let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/download',
|
||||
method: 'GET',
|
||||
params: filePath,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件的短期url展示
|
||||
*/
|
||||
export const getFileUrl = (params:any) => {
|
||||
let form = new FormData()
|
||||
// form.append('filePath', filePath)
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileUrl',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据获取文件的一个短期url及文件名
|
||||
*/
|
||||
export const getFileNameAndFilePath = (query: any) => {
|
||||
return createAxios({
|
||||
url: SYSTEM_PREFIX + '/file/getFileVO',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,251 +1,259 @@
|
||||
<template>
|
||||
<!-- text -->
|
||||
<div v-if="field.render == 'renderFormatter'">
|
||||
{{ fieldValue }}
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue" :name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
|
||||
:active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect ||'light'" size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
|
||||
:renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
||||
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
||||
:loading="props.row.loading || false" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title" placement="top">
|
||||
<el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
|
||||
v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
||||
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
||||
}">
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6+.el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- text -->
|
||||
<div v-if="field.render == 'renderFormatter'">
|
||||
{{ fieldValue }}
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue"
|
||||
:name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
|
||||
:active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect || 'light'"
|
||||
size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
|
||||
:renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
<el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
|
||||
class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
|
||||
:loading="props.row.loading || false" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title" placement="top">
|
||||
<el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
|
||||
v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
|
||||
:disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
|
||||
}">
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
const getUrl = (url: string) => {
|
||||
getFileUrl({ filePath: url }).then(res => {
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6+.el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -83,7 +83,6 @@ import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import router from '@/router'
|
||||
import globalPopUp from './globalPopUp.vue'
|
||||
import { routePush } from '@/utils/router'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
import html2canvas from 'html2canvas'
|
||||
import PopupPwd from './popup/password.vue'
|
||||
import AdminInfo from './popup/adminInfo.vue'
|
||||
|
||||
158
src/main.ts
158
src/main.ts
@@ -1,79 +1,79 @@
|
||||
import { createApp, reactive } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from '@/stores/index'
|
||||
import { registerIcons } from '@/utils/common'
|
||||
import mitt from 'mitt'
|
||||
import VXETable from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import '@/styles/index.scss'
|
||||
import '@/assets/font/iconfont.css'
|
||||
import { ElDialog } from 'element-plus'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
import BaiduMapOffline from 'vue-baidu-map-offline'
|
||||
import ExcelJS from 'exceljs'
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
// 方式1：NPM 安装，注入 ExcelJS 对象
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
})
|
||||
window.XEUtils = XEUtils
|
||||
|
||||
// 初始化多语言
|
||||
import { setupI18n } from '@/plugins/vueI18n'
|
||||
|
||||
// 引入 form-create
|
||||
import { setupFormCreate } from '@/plugins/formCreate'
|
||||
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
|
||||
//开启离线地图
|
||||
// app.use(BaiduMapOffline, {
|
||||
// offline: true,
|
||||
// offlineConfig: {
|
||||
// imgext: '.png',
|
||||
// customstyle: '',
|
||||
// tiles_dir: '',
|
||||
// tiles_hybrid: '',
|
||||
// tiles_self: '',
|
||||
// tiles_v_dir: '',
|
||||
// tiles_satellite_dir: '',
|
||||
// tiles_road_dir: '',
|
||||
// tiles_v_road_dir: '',
|
||||
// home: './plugin/offline/'
|
||||
// }
|
||||
// })
|
||||
app.use(BaiduMap, {
|
||||
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||
v: '3.0'
|
||||
})
|
||||
|
||||
await setupI18n(app)
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(ElementPlus)
|
||||
app.use(VXETable)
|
||||
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
||||
registerIcons(app) // icons
|
||||
|
||||
app.config.globalProperties.eventBus = mitt()
|
||||
// 配置全局变量
|
||||
app.config.globalProperties.$allVariables = reactive({
|
||||
butLoading: false
|
||||
})
|
||||
setupFormCreate(app)
|
||||
|
||||
await router.isReady()
|
||||
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
setupAll()
|
||||
import { createApp, reactive } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from '@/stores/index'
|
||||
import { registerIcons } from '@/utils/common'
|
||||
import mitt from 'mitt'
|
||||
import VXETable from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import '@/styles/index.scss'
|
||||
import '@/assets/font/iconfont.css'
|
||||
import { ElDialog } from 'element-plus'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
import BaiduMapOffline from 'vue-baidu-map-offline'
|
||||
import ExcelJS from 'exceljs'
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
// 方式1：NPM 安装，注入 ExcelJS 对象
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
})
|
||||
window.XEUtils = XEUtils
|
||||
|
||||
// 初始化多语言
|
||||
import { setupI18n } from '@/plugins/vueI18n'
|
||||
|
||||
// 引入 form-create
|
||||
import { setupFormCreate } from '@/plugins/formCreate'
|
||||
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
|
||||
//开启离线地图
|
||||
app.use(BaiduMapOffline, {
|
||||
offline: true,
|
||||
offlineConfig: {
|
||||
imgext: '.png',
|
||||
customstyle: '',
|
||||
tiles_dir: '',
|
||||
tiles_hybrid: '',
|
||||
tiles_self: '',
|
||||
tiles_v_dir: '',
|
||||
tiles_satellite_dir: '',
|
||||
tiles_road_dir: '',
|
||||
tiles_v_road_dir: '',
|
||||
home: './plugin/offline/'
|
||||
}
|
||||
})
|
||||
app.use(BaiduMap, {
|
||||
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
|
||||
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
|
||||
v: '3.0'
|
||||
})
|
||||
|
||||
await setupI18n(app)
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(ElementPlus)
|
||||
app.use(VXETable)
|
||||
;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
||||
registerIcons(app) // icons
|
||||
|
||||
app.config.globalProperties.eventBus = mitt()
|
||||
// 配置全局变量
|
||||
app.config.globalProperties.$allVariables = reactive({
|
||||
butLoading: false
|
||||
})
|
||||
setupFormCreate(app)
|
||||
|
||||
await router.isReady()
|
||||
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
setupAll()
|
||||
|
||||
@@ -347,12 +347,12 @@ const onSubmit = async () => {
|
||||
}))
|
||||
|
||||
// 设置有功功率图表
|
||||
setEChart(1, res1.data.data, '有功功率', 'kW')
|
||||
setEChart(1, res1.data.data, '有功功率', 'W')
|
||||
|
||||
// 获取无功功率数据并设置图表
|
||||
const res2 = await queryCarryCapacityQData(form)
|
||||
q_βminMap.value = res2.data.q_βminMap
|
||||
setEChart(2, res2.data.data, '无功功率', 'kVar')
|
||||
setEChart(2, res2.data.data, '无功功率', 'Var')
|
||||
|
||||
// 获取谐波电流数据并设置图表
|
||||
const res3 = await queryCarryCapacityIData(form)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -47,7 +47,7 @@ import Table from '@/components/table/index.vue'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import completenessDetails from './completenessDetails.vue'
|
||||
import { genFileId, ElMessage } from 'element-plus'
|
||||
import { uploadUserData ,deleteUserDataByIds} from '@/api/advance-boot/division'
|
||||
import { uploadUserData, deleteUserDataByIds } from '@/api/advance-boot/division'
|
||||
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'division/aListOfLoadData'
|
||||
@@ -78,6 +78,9 @@ const tableStore = new TableStore({
|
||||
title: '完整性详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
disabled: row => {
|
||||
return row.integrity == 1
|
||||
},
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
completenessDetailsRef.value.open(row.id)
|
||||
@@ -129,7 +132,7 @@ const submitupload = () => {
|
||||
ElMessage.warning('请上传文件！')
|
||||
return
|
||||
}
|
||||
ElMessage.info('上传中,请稍等...')
|
||||
ElMessage.info('上传中,请稍等...')
|
||||
const formData = new FormData()
|
||||
formData.append('file', fileList.value[0].raw)
|
||||
loading.value = true
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
|
||||
<TableHeader :showReset="false" ref="TableHeaderRef">
|
||||
<template #select>
|
||||
@@ -13,11 +12,9 @@
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef"></Table>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
@@ -33,15 +30,20 @@ const tableStore = new TableStore({
|
||||
{ title: '数据名', field: 'name' },
|
||||
{ title: '用户名', field: 'userName' },
|
||||
{ title: '测量点局号', field: 'lineNo' },
|
||||
{ title: '日期', field: 'upDataTime' },
|
||||
{ title: '完整性', field: 'integrity' },
|
||||
{ title: '日期', field: 'updateTime' },
|
||||
{
|
||||
title: '完整性(%)',
|
||||
field: 'integrity',
|
||||
formatter: (row: any) => {
|
||||
return Math.floor(row.cellValue * 10000) / 100
|
||||
}
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
setTimeout(() => {
|
||||
tableStore.table.height = mainHeight(0,2).height as any
|
||||
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
||||
|
||||
}, 0)
|
||||
tableStore.table.height = mainHeight(0, 2).height as any
|
||||
// console.log("🚀 ~ setTimeout ~ tableStore.table.height:", tableStore.table.height)
|
||||
}, 0)
|
||||
// setTimeout(() => { tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
|
||||
}
|
||||
})
|
||||
@@ -49,17 +51,12 @@ const tableStore = new TableStore({
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
const open = (id: string) => {
|
||||
|
||||
tableStore.table.params.userDataId = id
|
||||
dialogVisible.value = true
|
||||
|
||||
tableStore.index()
|
||||
|
||||
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,267 +1,267 @@
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div style='height: 100%; overflow: hidden'>
|
||||
<div class='switch-tab'>
|
||||
<el-radio-group v-model='radio' size='small'>
|
||||
<el-radio-button value='三维图'>三维图</el-radio-button>
|
||||
<el-radio-button value='表格'>表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<Table ref='tableRef' height='auto' isGroup />
|
||||
<SecondSheet v-if="radio === '三维图'">
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</SecondSheet>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { ref, provide } from 'vue'
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
|
||||
const radio = ref('三维图')
|
||||
const options = ref()
|
||||
const apiData = ref()
|
||||
const tableStore3D = new TableStore({
|
||||
showPage: false,
|
||||
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||
url: '/advance-boot/sgEvent/3DList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '电压暂降频次统计表',
|
||||
children: [
|
||||
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
||||
{
|
||||
title: '持续时间(s)',
|
||||
field: 'loginName',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
const eventCount = tableStore3D.table.data.values
|
||||
tableStore3D.table.data = {
|
||||
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
|
||||
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
|
||||
values: [
|
||||
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
|
||||
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
|
||||
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
|
||||
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
|
||||
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
|
||||
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
|
||||
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
|
||||
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
|
||||
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
||||
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
|
||||
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
|
||||
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
|
||||
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
|
||||
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
||||
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
|
||||
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
|
||||
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
|
||||
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
|
||||
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
||||
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
|
||||
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
|
||||
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
|
||||
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
|
||||
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
||||
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
|
||||
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
|
||||
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
|
||||
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
|
||||
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
||||
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
||||
],
|
||||
table: {
|
||||
total: 6,
|
||||
rows: [
|
||||
{
|
||||
amplitude: '0.8~0.9',
|
||||
d001_002s: eventCount[0][2],
|
||||
d002_005s: eventCount[1][2],
|
||||
d005_007s: eventCount[2][2],
|
||||
d007_010s: eventCount[3][2],
|
||||
d010_100s: eventCount[4][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.7~0.8',
|
||||
d001_002s: eventCount[5][2],
|
||||
d002_005s: eventCount[6][2],
|
||||
d005_007s: eventCount[7][2],
|
||||
d007_010s: eventCount[8][2],
|
||||
d010_100s: eventCount[9][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.6~0.7',
|
||||
d001_002s: eventCount[10][2],
|
||||
d002_005s: eventCount[11][2],
|
||||
d005_007s: eventCount[12][2],
|
||||
d007_010s: eventCount[13][2],
|
||||
d010_100s: eventCount[14][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.5~0.6',
|
||||
d001_002s: eventCount[15][2],
|
||||
d002_005s: eventCount[16][2],
|
||||
d005_007s: eventCount[17][2],
|
||||
d007_010s: eventCount[18][2],
|
||||
d010_100s: eventCount[19][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.4~0.5',
|
||||
d001_002s: eventCount[20][2],
|
||||
d002_005s: eventCount[21][2],
|
||||
d005_007s: eventCount[22][2],
|
||||
d007_010s: eventCount[23][2],
|
||||
d010_100s: eventCount[24][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.1~0.4',
|
||||
d001_002s: eventCount[25][2],
|
||||
d002_005s: eventCount[26][2],
|
||||
d005_007s: eventCount[27][2],
|
||||
d007_010s: eventCount[28][2],
|
||||
d010_100s: eventCount[29][2]
|
||||
}
|
||||
],
|
||||
code: 200,
|
||||
msg: '查询成功'
|
||||
}
|
||||
}
|
||||
apiData.value = tableStore3D.table.data
|
||||
tableStore3D.table.column![0].children![1].children = []
|
||||
tableStore3D.table.column![0].children![1].children!.push(
|
||||
...(apiData.value.durations.map((item: string) => {
|
||||
return {
|
||||
title: item,
|
||||
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
||||
}
|
||||
}) as any[])
|
||||
)
|
||||
tableStore3D.table.data = apiData.value.table.rows
|
||||
initEchart()
|
||||
}
|
||||
})
|
||||
// 注入到子组件
|
||||
provide('tableStore3D', tableStore3D)
|
||||
|
||||
const initEchart = () => {
|
||||
options.value = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
let tips = ''
|
||||
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
|
||||
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
|
||||
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
xAxis3D: {
|
||||
name: '暂降幅值(p.u.)',
|
||||
type: 'category',
|
||||
data: apiData.value.amplitudes
|
||||
},
|
||||
yAxis3D: {
|
||||
name: '持续时间(s)',
|
||||
type: 'category',
|
||||
data: apiData.value.durations
|
||||
},
|
||||
zAxis3D: {
|
||||
name: '次数',
|
||||
type: 'value'
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2,
|
||||
shadow: true
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: apiData.value.values.map((item: [string, string, string]) => {
|
||||
return [
|
||||
apiData.value.amplitudes.indexOf(item[0]),
|
||||
apiData.value.durations.indexOf(item[1]),
|
||||
item[2]
|
||||
]
|
||||
}),
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
const search = (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore3D获取参数
|
||||
tableStore3D.table.params.searchBeginTime = beginTime
|
||||
tableStore3D.table.params.searchEndTime = endTime
|
||||
tableStore3D.table.params.userId = id
|
||||
tableStore3D.index()
|
||||
}
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.switch-tab {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 4px;
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div style='height: 100%; overflow: hidden' >
|
||||
<div class='switch-tab'>
|
||||
<el-radio-group v-model='radio' >
|
||||
<el-radio-button value='三维图'>三维图</el-radio-button>
|
||||
<el-radio-button value='表格'>表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<Table ref='tableRef' isGroup />
|
||||
<SecondSheet v-if="radio === '三维图'">
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</SecondSheet>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { ref, provide } from 'vue'
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
|
||||
const radio = ref('三维图')
|
||||
const options = ref()
|
||||
const apiData = ref()
|
||||
const tableStore3D = new TableStore({
|
||||
showPage: false,
|
||||
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||
url: '/advance-boot/sgEvent/3DList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '电压暂降频次统计表',
|
||||
children: [
|
||||
{ title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
|
||||
{
|
||||
title: '持续时间(s)',
|
||||
field: 'loginName',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
const eventCount = tableStore3D.table.data.values
|
||||
tableStore3D.table.data = {
|
||||
amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
|
||||
durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
|
||||
values: [
|
||||
['0.8~0.9', '0.01~0.02', eventCount[0][2]],
|
||||
['0.8~0.9', '0.02~0.05', eventCount[1][2]],
|
||||
['0.8~0.9', '0.05~0.07', eventCount[2][2]],
|
||||
['0.8~0.9', '0.07~0.10', eventCount[3][2]],
|
||||
['0.8~0.9', '0.10~1.00', eventCount[4][2]],
|
||||
['0.7~0.8', '0.01~0.02', eventCount[5][2]],
|
||||
['0.7~0.8', '0.02~0.05', eventCount[6][2]],
|
||||
['0.7~0.8', '0.05~0.07', eventCount[7][2]],
|
||||
['0.7~0.8', '0.07~0.10', eventCount[8][2]],
|
||||
['0.7~0.8', '0.10~1.00', eventCount[9][2]],
|
||||
['0.6~0.7', '0.01~0.02', eventCount[10][2]],
|
||||
['0.6~0.7', '0.02~0.05', eventCount[11][2]],
|
||||
['0.6~0.7', '0.05~0.07', eventCount[12][2]],
|
||||
['0.6~0.7', '0.07~0.10', eventCount[13][2]],
|
||||
['0.6~0.7', '0.10~1.00', eventCount[14][2]],
|
||||
['0.5~0.6', '0.01~0.02', eventCount[15][2]],
|
||||
['0.5~0.6', '0.02~0.05', eventCount[16][2]],
|
||||
['0.5~0.6', '0.05~0.07', eventCount[17][2]],
|
||||
['0.5~0.6', '0.07~0.10', eventCount[18][2]],
|
||||
['0.5~0.6', '0.10~1.00', eventCount[19][2]],
|
||||
['0.4~0.5', '0.01~0.02', eventCount[20][2]],
|
||||
['0.4~0.5', '0.02~0.05', eventCount[21][2]],
|
||||
['0.4~0.5', '0.05~0.07', eventCount[22][2]],
|
||||
['0.4~0.5', '0.07~0.10', eventCount[23][2]],
|
||||
['0.4~0.5', '0.10~1.00', eventCount[24][2]],
|
||||
['0.1~0.4', '0.01~0.02', eventCount[25][2]],
|
||||
['0.1~0.4', '0.02~0.05', eventCount[26][2]],
|
||||
['0.1~0.4', '0.05~0.07', eventCount[27][2]],
|
||||
['0.1~0.4', '0.07~0.10', eventCount[28][2]],
|
||||
['0.1~0.4', '0.10~1.00', eventCount[29][2]]
|
||||
],
|
||||
table: {
|
||||
total: 6,
|
||||
rows: [
|
||||
{
|
||||
amplitude: '0.8~0.9',
|
||||
d001_002s: eventCount[0][2],
|
||||
d002_005s: eventCount[1][2],
|
||||
d005_007s: eventCount[2][2],
|
||||
d007_010s: eventCount[3][2],
|
||||
d010_100s: eventCount[4][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.7~0.8',
|
||||
d001_002s: eventCount[5][2],
|
||||
d002_005s: eventCount[6][2],
|
||||
d005_007s: eventCount[7][2],
|
||||
d007_010s: eventCount[8][2],
|
||||
d010_100s: eventCount[9][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.6~0.7',
|
||||
d001_002s: eventCount[10][2],
|
||||
d002_005s: eventCount[11][2],
|
||||
d005_007s: eventCount[12][2],
|
||||
d007_010s: eventCount[13][2],
|
||||
d010_100s: eventCount[14][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.5~0.6',
|
||||
d001_002s: eventCount[15][2],
|
||||
d002_005s: eventCount[16][2],
|
||||
d005_007s: eventCount[17][2],
|
||||
d007_010s: eventCount[18][2],
|
||||
d010_100s: eventCount[19][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.4~0.5',
|
||||
d001_002s: eventCount[20][2],
|
||||
d002_005s: eventCount[21][2],
|
||||
d005_007s: eventCount[22][2],
|
||||
d007_010s: eventCount[23][2],
|
||||
d010_100s: eventCount[24][2]
|
||||
},
|
||||
{
|
||||
amplitude: '0.1~0.4',
|
||||
d001_002s: eventCount[25][2],
|
||||
d002_005s: eventCount[26][2],
|
||||
d005_007s: eventCount[27][2],
|
||||
d007_010s: eventCount[28][2],
|
||||
d010_100s: eventCount[29][2]
|
||||
}
|
||||
],
|
||||
code: 200,
|
||||
msg: '查询成功'
|
||||
}
|
||||
}
|
||||
apiData.value = tableStore3D.table.data
|
||||
tableStore3D.table.column![0].children![1].children = []
|
||||
tableStore3D.table.column![0].children![1].children!.push(
|
||||
...(apiData.value.durations.map((item: string) => {
|
||||
return {
|
||||
title: item,
|
||||
field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
|
||||
}
|
||||
}) as any[])
|
||||
)
|
||||
tableStore3D.table.data = apiData.value.table.rows
|
||||
initEchart()
|
||||
}
|
||||
})
|
||||
// 注入到子组件
|
||||
provide('tableStore3D', tableStore3D)
|
||||
|
||||
const initEchart = () => {
|
||||
options.value = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
let tips = ''
|
||||
tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
|
||||
tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
|
||||
tips += '<font>事件次数::' + params.value[2] + '</font>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
xAxis3D: {
|
||||
name: '暂降幅值(p.u.)',
|
||||
type: 'category',
|
||||
data: apiData.value.amplitudes
|
||||
},
|
||||
yAxis3D: {
|
||||
name: '持续时间(s)',
|
||||
type: 'category',
|
||||
data: apiData.value.durations
|
||||
},
|
||||
zAxis3D: {
|
||||
name: '次数',
|
||||
type: 'value'
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2,
|
||||
shadow: true
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: apiData.value.values.map((item: [string, string, string]) => {
|
||||
return [
|
||||
apiData.value.amplitudes.indexOf(item[0]),
|
||||
apiData.value.durations.indexOf(item[1]),
|
||||
item[2]
|
||||
]
|
||||
}),
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
const search = (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore3D获取参数
|
||||
tableStore3D.table.params.searchBeginTime = beginTime
|
||||
tableStore3D.table.params.searchEndTime = endTime
|
||||
tableStore3D.table.params.userId = id
|
||||
tableStore3D.index()
|
||||
}
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.switch-tab {
|
||||
position: absolute;
|
||||
right: 345px;
|
||||
top: -37px;
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,343 +1,343 @@
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div class='tolerance-curve'>
|
||||
<el-form label-width='auto' :inline='true'>
|
||||
<el-form-item label='生产线'>
|
||||
<el-select v-model='form.productLineId'>
|
||||
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
||||
:value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='终端'>
|
||||
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
||||
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='敏感元器件'>
|
||||
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
|
||||
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='display: flex; flex: 1'>
|
||||
<el-form label-width='auto' label-position='top'>
|
||||
<!-- <el-form-item label='耐受曲线'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label='上限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='下限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1' class='ml10'>
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
||||
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
||||
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
||||
|
||||
|
||||
const searchBeginTime = ref()
|
||||
const searchEndTime = ref()
|
||||
const userId = ref()
|
||||
|
||||
const form = reactive({
|
||||
num: 1,
|
||||
productLineId: '',
|
||||
machineId: '',
|
||||
unitId: ''
|
||||
})
|
||||
const productLineOptions = ref()
|
||||
const machineOptions = ref()
|
||||
const unitOptions = ref()
|
||||
const unit = ref({
|
||||
'vtcTimeUpper': 0,
|
||||
'vtcAmpUpper': 0,
|
||||
'vtcTimeLower': 0,
|
||||
'vtcAmpLower': 0
|
||||
})
|
||||
const overEvent = ref([])
|
||||
const unOverEvent = ref([])
|
||||
const unKnownEvent = ref([])
|
||||
const overEventColor = ref('#A52a2a')
|
||||
const unOverEventColor = ref('#61a0a8')
|
||||
const unKnownEventColor = ref('#d48265')
|
||||
const eventData = ref()
|
||||
const search = async (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore获取参数
|
||||
searchBeginTime.value = beginTime
|
||||
searchEndTime.value = endTime
|
||||
userId.value = id
|
||||
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
|
||||
await querySgProductLineByUserId(id).then((res: any) => {
|
||||
productLineOptions.value = res.data
|
||||
form.productLineId = productLineOptions.value[0].id
|
||||
})
|
||||
|
||||
//根据生产线获取终端数据
|
||||
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
||||
machineOptions.value = res.data
|
||||
if (machineOptions.value.length > 0) {
|
||||
form.machineId = machineOptions.value[0].id
|
||||
}
|
||||
})
|
||||
|
||||
//根据终端获取元器件数据
|
||||
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
||||
unitOptions.value = res.data
|
||||
if (unitOptions.value.length > 0) {
|
||||
form.unitId = unitOptions.value[0].id
|
||||
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const data = {
|
||||
searchBeginTime: beginTime,
|
||||
searchEndTime: endTime,
|
||||
productId: form.productLineId
|
||||
}
|
||||
|
||||
await getEventDataByProductLineId(data).then((res: any) => {
|
||||
eventData.value = res.data
|
||||
reDrawPic()
|
||||
})
|
||||
|
||||
}
|
||||
const changeUnit = (id: any) => {
|
||||
if (id == undefined) return
|
||||
let list = unitOptions.value.filter((item: any) => item.id == id)
|
||||
unit.value = JSON.parse(JSON.stringify(list[0]))
|
||||
reDrawPic()
|
||||
|
||||
}
|
||||
|
||||
const options = ref()
|
||||
const initOptions = () => {
|
||||
options.value = {
|
||||
legend: {
|
||||
data: ['越限事件', '未越限事件', '不确定事件'],
|
||||
left: '10px'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[3] == undefined) {
|
||||
return
|
||||
}
|
||||
let relVal = ''
|
||||
relVal += '<font style=\'color:' + '\'>进线:' + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>发生时刻:' + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>持续时间:' + ' ' + ' ' + a[0].value[0].toFixed(2) + 's</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>特征幅值:' + ' ' + ' ' + a[0].value[1] + 'p.u.</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '持续时间/s',
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
name: '幅值/p.u.',
|
||||
max: 1,
|
||||
min: 0,
|
||||
splitLine: { show: false }
|
||||
},
|
||||
grid: {
|
||||
right: '78px',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeUpper / 1000, 0],
|
||||
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
||||
[1000, unit.value.vtcAmpUpper]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeLower / 1000, 0],
|
||||
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
||||
[1000, unit.value.vtcAmpLower]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: overEvent.value
|
||||
},
|
||||
{
|
||||
name: '未越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unOverEvent.value
|
||||
},
|
||||
{
|
||||
name: '不确定事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unKnownEvent.value
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reDrawPic = () => {
|
||||
//清洗要显示的数据
|
||||
if (eventData.value.length > 0) {
|
||||
unOverEvent.value = []
|
||||
overEvent.value = []
|
||||
unKnownEvent.value = []
|
||||
for (let event of eventData.value) {
|
||||
//判断落在哪个区域内
|
||||
let eventTime = Number(event.duration) / 1000
|
||||
let eventAmplitude = Number(event.featureAmplitude)
|
||||
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
||||
//未越限
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unOverEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unOverEvent.value.push(dataTemp)
|
||||
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
||||
//故障阶段
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: overEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
overEvent.value.push(dataTemp)
|
||||
} else {
|
||||
//不确定事件
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unKnownEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unKnownEvent.value.push(dataTemp)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
//初始化图表
|
||||
initOptions()
|
||||
}
|
||||
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.tolerance-curve {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.el-form-item__label-wrap {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
width: 185px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<SecondSheet>
|
||||
<div class='tolerance-curve'>
|
||||
<el-form label-width='auto' :inline='true'>
|
||||
<el-form-item label='生产线'>
|
||||
<el-select v-model='form.productLineId'>
|
||||
<el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
|
||||
:value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='终端'>
|
||||
<el-select v-model='form.machineId' placeholder='暂无终端'>
|
||||
<el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label='敏感元器件'>
|
||||
<el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
|
||||
<el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='display: flex; flex: 1'>
|
||||
<el-form label-width='auto' label-position='top'>
|
||||
<!-- <el-form-item label='耐受曲线'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label='耐受能力（膝点坐标）'>-->
|
||||
<!-- <el-select v-model='form.name' placeholder='Select'>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for='item in selectOptions'-->
|
||||
<!-- :key='item.value'-->
|
||||
<!-- :label='item.label'-->
|
||||
<!-- :value='item.value'-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label='上限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='下限曲线膝点'>
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number v-model='unit.vtcAmpLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>p.u.</span>
|
||||
</div>
|
||||
<div class='mt10'>
|
||||
<el-input-number v-model='unit.vtcTimeLower' controls-position='right'
|
||||
@change='reDrawPic' />
|
||||
<span class='ml10' style='color: #333'>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1' class='ml10'>
|
||||
<MyEchart :options='options' v-if='options'></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SecondSheet>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import SecondSheet from '@/components/secondSheet/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
|
||||
import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
|
||||
import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
|
||||
|
||||
|
||||
const searchBeginTime = ref()
|
||||
const searchEndTime = ref()
|
||||
const userId = ref()
|
||||
|
||||
const form = reactive({
|
||||
num: 1,
|
||||
productLineId: '',
|
||||
machineId: '',
|
||||
unitId: ''
|
||||
})
|
||||
const productLineOptions = ref()
|
||||
const machineOptions = ref()
|
||||
const unitOptions = ref()
|
||||
const unit = ref({
|
||||
'vtcTimeUpper': 0,
|
||||
'vtcAmpUpper': 0,
|
||||
'vtcTimeLower': 0,
|
||||
'vtcAmpLower': 0
|
||||
})
|
||||
const overEvent = ref([])
|
||||
const unOverEvent = ref([])
|
||||
const unKnownEvent = ref([])
|
||||
const overEventColor = ref('#A52a2a')
|
||||
const unOverEventColor = ref('#61a0a8')
|
||||
const unKnownEventColor = ref('#d48265')
|
||||
const eventData = ref()
|
||||
const search = async (id: string, beginTime: string, endTime: string) => {
|
||||
// 从父组件tableStore获取参数
|
||||
searchBeginTime.value = beginTime
|
||||
searchEndTime.value = endTime
|
||||
userId.value = id
|
||||
//根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
|
||||
await querySgProductLineByUserId(id).then((res: any) => {
|
||||
productLineOptions.value = res.data
|
||||
form.productLineId = productLineOptions.value[0].id
|
||||
})
|
||||
|
||||
//根据生产线获取终端数据
|
||||
await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
|
||||
machineOptions.value = res.data
|
||||
if (machineOptions.value.length > 0) {
|
||||
form.machineId = machineOptions.value[0].id
|
||||
}
|
||||
})
|
||||
|
||||
//根据终端获取元器件数据
|
||||
await queryUnitByMachineId(form.machineId).then((res: any) => {
|
||||
unitOptions.value = res.data
|
||||
if (unitOptions.value.length > 0) {
|
||||
form.unitId = unitOptions.value[0].id
|
||||
unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const data = {
|
||||
searchBeginTime: beginTime,
|
||||
searchEndTime: endTime,
|
||||
productId: form.productLineId
|
||||
}
|
||||
|
||||
await getEventDataByProductLineId(data).then((res: any) => {
|
||||
eventData.value = res.data
|
||||
reDrawPic()
|
||||
})
|
||||
|
||||
}
|
||||
const changeUnit = (id: any) => {
|
||||
if (id == undefined) return
|
||||
let list = unitOptions.value.filter((item: any) => item.id == id)
|
||||
unit.value = JSON.parse(JSON.stringify(list[0]))
|
||||
reDrawPic()
|
||||
|
||||
}
|
||||
|
||||
const options = ref()
|
||||
const initOptions = () => {
|
||||
options.value = {
|
||||
legend: {
|
||||
data: ['越限事件', '未越限事件', '不确定事件'],
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[3] == undefined) {
|
||||
return
|
||||
}
|
||||
let relVal = ''
|
||||
relVal += '<font style=\'color:' + '\'>进线:' + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>发生时刻:' + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>持续时间:' + ' ' + ' ' + a[0].value[0].toFixed(2) + 's</font><br/>'
|
||||
relVal += '<font style=\'color:' + '\'>特征幅值:' + ' ' + ' ' + a[0].value[1] + 'p.u.</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '持续时间/s',
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
name: '幅值/p.u.',
|
||||
max: 1,
|
||||
min: 0,
|
||||
splitLine: { show: false }
|
||||
},
|
||||
grid: {
|
||||
right: '78px',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeUpper / 1000, 0],
|
||||
[unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
|
||||
[1000, unit.value.vtcAmpUpper]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
color: '#ff0000',
|
||||
data: [
|
||||
[unit.value.vtcTimeLower / 1000, 0],
|
||||
[unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
|
||||
[1000, unit.value.vtcAmpLower]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: overEvent.value
|
||||
},
|
||||
{
|
||||
name: '未越限事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unOverEvent.value
|
||||
},
|
||||
{
|
||||
name: '不确定事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: unKnownEvent.value
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reDrawPic = () => {
|
||||
//清洗要显示的数据
|
||||
if (eventData.value.length > 0) {
|
||||
unOverEvent.value = []
|
||||
overEvent.value = []
|
||||
unKnownEvent.value = []
|
||||
for (let event of eventData.value) {
|
||||
//判断落在哪个区域内
|
||||
let eventTime = Number(event.duration) / 1000
|
||||
let eventAmplitude = Number(event.featureAmplitude)
|
||||
if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
|
||||
//未越限
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unOverEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unOverEvent.value.push(dataTemp)
|
||||
} else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
|
||||
//故障阶段
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: overEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
overEvent.value.push(dataTemp)
|
||||
} else {
|
||||
//不确定事件
|
||||
const dataTemp = {
|
||||
value: [
|
||||
eventTime,
|
||||
eventAmplitude,
|
||||
event.startTime,
|
||||
event.incomingLineName
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: unKnownEventColor.value
|
||||
}
|
||||
}
|
||||
}
|
||||
unKnownEvent.value.push(dataTemp)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
//初始化图表
|
||||
initOptions()
|
||||
}
|
||||
|
||||
defineExpose({ search })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.tolerance-curve {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.el-form-item__label-wrap {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
width: 185px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,250 +1,252 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
|
||||
<el-tab-pane label="基本信息" name="user">
|
||||
<el-form-item label="用户名" prop="userName" >
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重点用户">
|
||||
<el-select v-model="form.keyUser">
|
||||
<el-option label="重要" value="1" />
|
||||
<el-option label="不重要" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="所在地区" prop="addr">
|
||||
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业照片">
|
||||
<div>
|
||||
<el-image
|
||||
style="width: 200px; height: 200px"
|
||||
:src="userLogo.url"
|
||||
:preview-src-list="[userLogo.url]"
|
||||
v-if="userLogo.url"
|
||||
></el-image>
|
||||
<el-upload
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
accept=".png,.jpg"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="进线" name="incomingLine">
|
||||
<IncomingTable ref="incomingTable"></IncomingTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, reactive, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
||||
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
||||
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
||||
import IncomingTable from './IncomingTable.vue'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const areaRef = ref()
|
||||
const formRef = ref()
|
||||
const tab = ref('user')
|
||||
|
||||
//进线表格子组件
|
||||
const incomingTable = ref()
|
||||
|
||||
const userLogo = reactive({
|
||||
url: '',
|
||||
name: ''
|
||||
})
|
||||
|
||||
const dialogVisibleLogo = ref(false)
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
id: '',
|
||||
userName: '',
|
||||
keyUser: '1',
|
||||
industry: '',
|
||||
addr: [],
|
||||
addrStrOption: '',
|
||||
addrDetail: '',
|
||||
concact: '',
|
||||
remark: '',
|
||||
userLogo: ''
|
||||
})
|
||||
|
||||
//form表单校验规则
|
||||
const rules = {
|
||||
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
||||
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
||||
}
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
tab.value = 'user'
|
||||
title.value = text
|
||||
//默认选中第一个tab
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.addr = data.addr.split('/')
|
||||
form.keyUser = String(data.keyUser)
|
||||
if (form.userLogo) {
|
||||
userLogo.url = fullUrl(form.userLogo)
|
||||
// 图片的name我不知道
|
||||
}
|
||||
//待子组件渲染完毕
|
||||
nextTick(() => {
|
||||
incomingTable.value.getTableData(form.id)
|
||||
})
|
||||
} else {
|
||||
resetForm()
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
userLogo.url = ''
|
||||
form.keyUser = '1'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将联级选择的区域数组转为字符串
|
||||
*/
|
||||
const reValueAddr = () => {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片上传
|
||||
* @param e
|
||||
*/
|
||||
const chooseImage = (e: any) => {
|
||||
uploadFile(e.raw, 'sgGovern/').then(res => {
|
||||
userLogo.name = res.data.name
|
||||
userLogo.url = res.data.url
|
||||
form.userLogo = res.data.name
|
||||
ElMessage.success('新增成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
|
||||
*/
|
||||
const handleRemove = (e: any, userLogo: any) => {
|
||||
form.userLogo = ''
|
||||
userLogo.value = []
|
||||
deleteFile(e.name).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
const handlePictureCardPreview = () => {
|
||||
dialogVisibleLogo.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交用户表单数据
|
||||
*/
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
await updateSgUser(form)
|
||||
ElMessage.success('更新成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
dialogVisible.value = false
|
||||
} else {
|
||||
await addSgUser(form).then(res => {
|
||||
form.id = res.data
|
||||
//查询进线数据，避免一直处于loading状态
|
||||
incomingTable.value.getTableData(form.id)
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
tab.value='incomingLine'
|
||||
dialogVisible.value = true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/************针对tab切换*************/
|
||||
const checkUserId = (tab: any, event: any) => {
|
||||
if (tab == 'user') {
|
||||
return true
|
||||
}
|
||||
if (form.id) {
|
||||
return true
|
||||
} else {
|
||||
ElMessage.error('请先创建用户基础信息！')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload-list__item {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
|
||||
<el-tab-pane label="基本信息" name="user">
|
||||
<el-form-item label="用户名" prop="userName" >
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名" clearable />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重点用户">
|
||||
<el-select v-model="form.keyUser">
|
||||
<el-option label="重要" value="1" />
|
||||
<el-option label="不重要" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="所在地区" prop="addr">
|
||||
<area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业照片">
|
||||
<div>
|
||||
<el-image
|
||||
style="width: 200px; height: 200px"
|
||||
:src="userLogo.url"
|
||||
:preview-src-list="[userLogo.url]"
|
||||
v-if="userLogo.url"
|
||||
></el-image>
|
||||
<el-upload
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:auto-upload="false"
|
||||
accept=".png,.jpg"
|
||||
:on-change="chooseImage"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="进线" name="incomingLine">
|
||||
<IncomingTable ref="incomingTable"></IncomingTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, reactive, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import AreaCascard from '@/components/form/areaCascard/index.vue'
|
||||
import { uploadFile, deleteFile } from '@/api/system-boot/file'
|
||||
import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
|
||||
import IncomingTable from './IncomingTable.vue'
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const areaRef = ref()
|
||||
const formRef = ref()
|
||||
const tab = ref('user')
|
||||
|
||||
//进线表格子组件
|
||||
const incomingTable = ref()
|
||||
|
||||
const userLogo = reactive({
|
||||
url: '',
|
||||
name: ''
|
||||
})
|
||||
|
||||
const dialogVisibleLogo = ref(false)
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
id: '',
|
||||
userName: '',
|
||||
keyUser: '1',
|
||||
industry: '',
|
||||
addr: [],
|
||||
addrStrOption: '',
|
||||
addrDetail: '',
|
||||
concact: '',
|
||||
remark: '',
|
||||
userLogo: ''
|
||||
})
|
||||
|
||||
//form表单校验规则
|
||||
const rules = {
|
||||
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
|
||||
addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
|
||||
}
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
tab.value = 'user'
|
||||
title.value = text
|
||||
//默认选中第一个tab
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.addr = data.addr.split('/')
|
||||
form.keyUser = String(data.keyUser)
|
||||
if (form.userLogo) {
|
||||
getFileUrl({filePath:form.userLogo}).then(res=>{
|
||||
userLogo.url=res.data
|
||||
})
|
||||
// 图片的name我不知道
|
||||
}
|
||||
//待子组件渲染完毕
|
||||
nextTick(() => {
|
||||
incomingTable.value.getTableData(form.id)
|
||||
})
|
||||
} else {
|
||||
resetForm()
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
userLogo.url = ''
|
||||
form.keyUser = '1'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将联级选择的区域数组转为字符串
|
||||
*/
|
||||
const reValueAddr = () => {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片上传
|
||||
* @param e
|
||||
*/
|
||||
const chooseImage = (e: any) => {
|
||||
uploadFile(e.raw, 'sgGovern/').then(res => {
|
||||
userLogo.name = res.data.name
|
||||
userLogo.url = res.data.url
|
||||
form.userLogo = res.data.name
|
||||
ElMessage.success('新增成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
|
||||
*/
|
||||
const handleRemove = (e: any, userLogo: any) => {
|
||||
form.userLogo = ''
|
||||
userLogo.value = []
|
||||
deleteFile(e.name).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
*/
|
||||
const handlePictureCardPreview = () => {
|
||||
dialogVisibleLogo.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交用户表单数据
|
||||
*/
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
form.addrStrOption = form.addr.join('/')
|
||||
await updateSgUser(form)
|
||||
ElMessage.success('更新成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
dialogVisible.value = false
|
||||
} else {
|
||||
await addSgUser(form).then(res => {
|
||||
form.id = res.data
|
||||
//查询进线数据，避免一直处于loading状态
|
||||
incomingTable.value.getTableData(form.id)
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
//切到进线处
|
||||
tab.value='incomingLine'
|
||||
dialogVisible.value = true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/************针对tab切换*************/
|
||||
const checkUserId = (tab: any, event: any) => {
|
||||
if (tab == 'user') {
|
||||
return true
|
||||
}
|
||||
if (form.id) {
|
||||
return true
|
||||
} else {
|
||||
ElMessage.error('请先创建用户基础信息！')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-upload-list__item {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,115 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">接口权限列表</div>
|
||||
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入菜单名称"
|
||||
class="ml10" clearable @input="search" />
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupApi from './popupApi.vue'
|
||||
import { deleteMenu } from '@/api/user-boot/function'
|
||||
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/api'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const apiList = ref([])
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/getButtonById',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{ title: '普通接口/接口名称', field: 'name', },
|
||||
{
|
||||
title: '接口类型', field: 'type', formatter: row => {
|
||||
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
||||
}
|
||||
},
|
||||
{ title: 'URL接口路径', field: 'path' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑接口权限', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteMenu(row.id).then(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
apiList.value = tableStore.table.data
|
||||
search()
|
||||
}
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
tableStore.table.params.id = props.id
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增接口权限', {
|
||||
pid: props.id
|
||||
})
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = apiList.value.filter(
|
||||
(item: any) =>
|
||||
!tableStore.table.params.searchValue ||
|
||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||
)
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">接口权限列表</div>
|
||||
<el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入关键字"
|
||||
class="ml10" clearable @input="search" />
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupApi from './popupApi.vue'
|
||||
import { deleteMenu } from '@/api/user-boot/function'
|
||||
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/api'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const apiList = ref([])
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/getButtonById',
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{ title: '普通接口/接口名称', field: 'name', },
|
||||
{
|
||||
title: '接口类型', field: 'type', formatter: row => {
|
||||
return row.cellValue == 1 ? '普通接口' : '公用接口'
|
||||
}
|
||||
},
|
||||
{ title: 'URL接口路径', field: 'path' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑接口权限', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteMenu(row.id).then(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
apiList.value = tableStore.table.data
|
||||
search()
|
||||
}
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
tableStore.table.params.id = props.id
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增接口权限', {
|
||||
pid: props.id
|
||||
})
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = apiList.value.filter(
|
||||
(item: any) =>
|
||||
!tableStore.table.params.searchValue ||
|
||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||
)
|
||||
}
|
||||
</script>
|
||||
@@ -1,84 +1,84 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
remark: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
form.name = val.replace(/\s+/g, '')
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" maxlength="32" show-word-limit @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
remark: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
form.name = val.replace(/\s+/g, '')
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
110
vite.config.ts
110
vite.config.ts
@@ -1,54 +1,56 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import { svgBuilder } from '/@/components/icon/svg/index'
|
||||
|
||||
import path from 'path'
|
||||
|
||||
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
svgBuilder('./src/assets/icons/'),
|
||||
vueJsx(),
|
||||
AutoImport({
|
||||
//自动引入
|
||||
imports: ['vue', 'vue-router', 'pinia']
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
||||
// target: 'http://10.118.135.128:10215', ///hsw
|
||||
target: 'http://192.168.1.29:10215', ///hsw
|
||||
// target: 'http://10.119.65.152:10215', //数据中心
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
|
||||
},
|
||||
'/api-docx': {
|
||||
// 文件服务器地址
|
||||
target: 'http://192.168.1.22:9009',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api-docx/, '')
|
||||
},
|
||||
'/map': {
|
||||
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
||||
target: 'http://192.168.1.125:9009', //hsw
|
||||
// target: 'http://192.168.1.125:8088', //数据中心
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'/@': nodeResolve('.src'),
|
||||
'@': nodeResolve('src'),
|
||||
'~': nodeResolve('public')
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import { svgBuilder } from '/@/components/icon/svg/index'
|
||||
|
||||
import path from 'path'
|
||||
|
||||
const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
svgBuilder('./src/assets/icons/'),
|
||||
vueJsx(),
|
||||
AutoImport({
|
||||
//自动引入
|
||||
imports: ['vue', 'vue-router', 'pinia']
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://10.95.53.49:10215', //海南服务器ip
|
||||
// target: 'http://10.118.135.128:10215', ///hsw
|
||||
target: 'http://192.168.1.67:10215', ///hsw
|
||||
// target: 'http://192.168.1.68:10215', ///hsw
|
||||
// target: 'http://10.119.65.152:10215', //数据中心
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
|
||||
},
|
||||
'/api-docx': {
|
||||
// 文件服务器地址
|
||||
target: 'http://192.168.1.68:9009',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api-docx/, '')
|
||||
},
|
||||
'/map': {
|
||||
// target: 'http://10.95.53.49:8088', //海南服务器ip
|
||||
target: 'http://192.168.1.125:9009', //hsw
|
||||
// target: 'http://192.168.1.125:8088', //数据中心
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'/@': nodeResolve('.src'),
|
||||
'@': nodeResolve('src'),
|
||||
'~': nodeResolve('public')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user