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

调整代码

Browse Source
This commit is contained in:
guanj
2025-11-20 15:12:01 +08:00
parent 0a52d1afae
commit 028fd44490
17 changed files with 3910 additions and 3761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/favicon1.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/favicon3.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

620
src/components/baInput/components/remoteSelect.vue
View File

@@ -1,310 +1,310 @@
<template>
<div class="w100">
<!-- el-select 的远程下拉只在有搜索词时，才会加载数据（显示出 option 列表） -->
<!-- 使用 el-popover 在无数据/无搜索词时，显示一个无数据的提醒 -->
<el-popover
width="100%"
placement="bottom"
popper-class="remote-select-popper"
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
:teleported="false"
:content="$t('utils.No data')"
>
<template #reference>
<el-select
ref="selectRef"
class="w100"
@focus="onFocus"
@blur="onBlur"
:loading="state.loading || state.accidentBlur"
:filterable="true"
:remote="true"
clearable
remote-show-suffix
:remote-method="onLogKeyword"
v-model="state.value"
@change="onChangeSelect"
:multiple="multiple"
:key="state.selectKey"
@clear="onClear"
@visible-change="onVisibleChange"
v-bind="$attrs"
>
<el-option
class="remote-select-option"
v-for="item in state.options"
:label="item[field]"
:value="item[state.primaryKey].toString()"
:key="item[state.primaryKey]"
>
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
<template #content>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
</template>
<div>{{ item[field] }}</div>
</el-tooltip>
</el-option>
<el-pagination
v-if="state.total"
:currentPage="state.currentPage"
:page-size="state.pageSize"
class="select-pagination"
layout="->, prev, next"
:total="state.total"
@current-change="onSelectCurrentPageChange"
/>
</el-select>
</template>
</el-popover>
</div>
</template>
<script setup lang="ts">
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
import { getSelectData } from '@/api/common'
import { uuid } from '@/utils/random'
import type { ElSelect } from 'element-plus'
import { isEmpty } from 'lodash-es'
import { getArrayKey } from '@/utils/common'
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
type valType = string | number | string[] | number[]
interface Props extends /* @vue-ignore */ ElSelectProps {
pk?: string
field?: string
params?: anyObj
multiple?: boolean
remoteUrl: string
modelValue: valType
labelFormatter?: (optionData: anyObj, optionKey: string) => string
tooltipParams?: anyObj
}
const props = withDefaults(defineProps<Props>(), {
pk: 'id',
field: 'name',
params: () => {
return {}
},
remoteUrl: '',
modelValue: '',
multiple: false,
tooltipParams: () => {
return {}
},
})
const state: {
// 主表字段名(不带表别名)
primaryKey: string
options: anyObj[]
loading: boolean
total: number
currentPage: number
pageSize: number
params: anyObj
keyword: string
value: valType
selectKey: string
initializeData: boolean
accidentBlur: boolean
focusStatus: boolean
} = reactive({
primaryKey: props.pk,
options: [],
loading: false,
total: 0,
currentPage: 1,
pageSize: 10,
params: props.params,
keyword: '',
value: props.modelValue ? props.modelValue : '',
selectKey: uuid(),
initializeData: false,
accidentBlur: false,
focusStatus: false,
})
let io: null | IntersectionObserver = null
const instance = getCurrentInstance()
const emits = defineEmits<{
(e: 'update:modelValue', value: valType): void
(e: 'row', value: any): void
}>()
const onChangeSelect = (val: valType) => {
emits('update:modelValue', val)
if (typeof instance?.vnode.props?.onRow == 'function') {
let pkArr = props.pk.split('.')
let pk = pkArr[pkArr.length - 1]
if (typeof val == 'number' || typeof val == 'string') {
const dataKey = getArrayKey(state.options, pk, val.toString())
emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
} else {
const valueArr = []
for (const key in val) {
let dataKey = getArrayKey(state.options, pk, val[key].toString())
if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
}
emits('row', valueArr)
}
}
}
const onVisibleChange = (val: boolean) => {
// 保持面板状态和焦点状态一致
if (!val) {
nextTick(() => {
selectRef.value?.blur()
})
}
}
const onFocus = () => {
state.focusStatus = true
if (selectRef.value?.query != state.keyword) {
state.keyword = ''
state.initializeData = false
// el-select 自动清理搜索词会产生意外的脱焦
state.accidentBlur = true
}
if (!state.initializeData) {
getData()
}
}
const onBlur = () => {
state.focusStatus = false
}
const onClear = () => {
state.keyword = ''
state.initializeData = false
}
const onLogKeyword = (q: string) => {
if (state.keyword != q) {
state.keyword = q
getData()
}
}
const getData = (initValue: valType = '') => {
state.loading = true
state.params.page = state.currentPage
state.params.initKey = props.pk
state.params.initValue = initValue
getSelectData(props.remoteUrl, state.keyword, state.params)
.then((res) => {
let initializeData = true
let opts = res.data.options ? res.data.options : res.data.list
if (typeof props.labelFormatter == 'function') {
for (const key in opts) {
opts[key][props.field] = props.labelFormatter(opts[key], key)
}
}
state.options = opts
state.total = res.data.total ?? 0
if (initValue) {
// 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
state.selectKey = uuid()
initializeData = false
}
state.loading = false
state.initializeData = initializeData
if (state.accidentBlur) {
nextTick(() => {
const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
inputEl && inputEl.focus()
state.accidentBlur = false
})
}
})
.catch(() => {
state.loading = false
})
}
const onSelectCurrentPageChange = (val: number) => {
state.currentPage = val
getData()
}
const initDefaultValue = () => {
if (state.value) {
// number[]转string[]确保默认值能够选中
if (typeof state.value === 'object') {
for (const key in state.value as string[]) {
state.value[key] = state.value[key].toString()
}
} else if (typeof state.value === 'number') {
state.value = state.value.toString()
}
getData(state.value)
}
}
onMounted(() => {
if (props.pk.indexOf('.') > 0) {
let pk = props.pk.split('.')
state.primaryKey = pk[1] ? pk[1] : pk[0]
}
initDefaultValue()
setTimeout(() => {
if (window?.IntersectionObserver) {
io = new IntersectionObserver((entries) => {
for (const key in entries) {
if (!entries[key].isIntersecting) selectRef.value?.blur()
}
})
if (selectRef.value?.$el instanceof Element) {
io.observe(selectRef.value.$el)
}
}
}, 500)
})
onUnmounted(() => {
io?.disconnect()
})
watch(
() => props.modelValue,
(newVal) => {
if (String(state.value) != String(newVal)) {
state.value = newVal ? newVal : ''
initDefaultValue()
}
}
)
const getSelectRef = () => {
return selectRef.value
}
const focus = () => {
selectRef.value?.focus()
}
const blur = () => {
selectRef.value?.blur()
}
defineExpose({
blur,
focus,
getSelectRef,
})
</script>
<style scoped lang="scss">
:deep(.remote-select-popper) {
text-align: center;
}
.remote-select-option {
white-space: pre;
}
</style>
<template>
<div class="w100">
<!-- el-select 的远程下拉只在有搜索词时，才会加载数据（显示出 option 列表） -->
<!-- 使用 el-popover 在无数据/无搜索词时，显示一个无数据的提醒 -->
<el-popover
width="100%"
placement="bottom"
popper-class="remote-select-popper"
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
:teleported="false"
:content="$t('utils.No data')"
>
<template #reference>
<el-select
ref="selectRef"
class="w100"
@focus="onFocus"
@blur="onBlur"
:loading="state.loading || state.accidentBlur"
:filterable="true"
:remote="true"
clearable
remote-show-suffix
:remote-method="onLogKeyword"
v-model="state.value"
@change="onChangeSelect"
:multiple="multiple"
:key="state.selectKey"
@clear="onClear"
@visible-change="onVisibleChange"
v-bind="$attrs"
>
<el-option
class="remote-select-option"
v-for="item in state.options"
:label="item[field]"
:value="item[state.primaryKey].toString()"
:key="item[state.primaryKey]"
>
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
<template #content>
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
</template>
<div>{{ item[field] }}</div>
</el-tooltip>
</el-option>
<el-pagination
v-if="state.total"
:currentPage="state.currentPage"
:page-size="state.pageSize"
class="select-pagination"
layout="->, prev, next"
:total="state.total"
@current-change="onSelectCurrentPageChange"
/>
</el-select>
</template>
</el-popover>
</div>
</template>
<script setup lang="ts">
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
// import { getSelectData } from '@/api/common'
import { uuid } from '@/utils/random'
import type { ElSelect } from 'element-plus'
import { isEmpty } from 'lodash-es'
// import { getArrayKey } from '@/utils/common'
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
type valType = string | number | string[] | number[]
interface Props extends /* @vue-ignore */ ElSelectProps {
pk?: string
field?: string
params?: anyObj
multiple?: boolean
remoteUrl: string
modelValue: valType
labelFormatter?: (optionData: anyObj, optionKey: string) => string
tooltipParams?: anyObj
}
const props = withDefaults(defineProps<Props>(), {
pk: 'id',
field: 'name',
params: () => {
return {}
},
remoteUrl: '',
modelValue: '',
multiple: false,
tooltipParams: () => {
return {}
},
})
const state: {
// 主表字段名(不带表别名)
primaryKey: string
options: anyObj[]
loading: boolean
total: number
currentPage: number
pageSize: number
params: anyObj
keyword: string
value: valType
selectKey: string
initializeData: boolean
accidentBlur: boolean
focusStatus: boolean
} = reactive({
primaryKey: props.pk,
options: [],
loading: false,
total: 0,
currentPage: 1,
pageSize: 10,
params: props.params,
keyword: '',
value: props.modelValue ? props.modelValue : '',
selectKey: uuid(),
initializeData: false,
accidentBlur: false,
focusStatus: false,
})
let io: null | IntersectionObserver = null
const instance = getCurrentInstance()
const emits = defineEmits<{
(e: 'update:modelValue', value: valType): void
(e: 'row', value: any): void
}>()
const onChangeSelect = (val: valType) => {
emits('update:modelValue', val)
if (typeof instance?.vnode.props?.onRow == 'function') {
let pkArr = props.pk.split('.')
let pk = pkArr[pkArr.length - 1]
if (typeof val == 'number' || typeof val == 'string') {
// const dataKey = getArrayKey(state.options, pk, val.toString())
// emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
} else {
// const valueArr = []
// for (const key in val) {
// let dataKey = getArrayKey(state.options, pk, val[key].toString())
// if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
// }
// emits('row', valueArr)
}
}
}
const onVisibleChange = (val: boolean) => {
// 保持面板状态和焦点状态一致
if (!val) {
nextTick(() => {
selectRef.value?.blur()
})
}
}
const onFocus = () => {
state.focusStatus = true
if (selectRef.value?.query != state.keyword) {
state.keyword = ''
state.initializeData = false
// el-select 自动清理搜索词会产生意外的脱焦
state.accidentBlur = true
}
if (!state.initializeData) {
getData()
}
}
const onBlur = () => {
state.focusStatus = false
}
const onClear = () => {
state.keyword = ''
state.initializeData = false
}
const onLogKeyword = (q: string) => {
if (state.keyword != q) {
state.keyword = q
getData()
}
}
const getData = (initValue: valType = '') => {
state.loading = true
state.params.page = state.currentPage
state.params.initKey = props.pk
state.params.initValue = initValue
// getSelectData(props.remoteUrl, state.keyword, state.params)
// .then((res) => {
// let initializeData = true
// let opts = res.data.options ? res.data.options : res.data.list
// if (typeof props.labelFormatter == 'function') {
// for (const key in opts) {
// opts[key][props.field] = props.labelFormatter(opts[key], key)
// }
// }
// state.options = opts
// state.total = res.data.total ?? 0
// if (initValue) {
// // 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
// state.selectKey = uuid()
// initializeData = false
// }
// state.loading = false
// state.initializeData = initializeData
// if (state.accidentBlur) {
// nextTick(() => {
// const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
// inputEl && inputEl.focus()
// state.accidentBlur = false
// })
// }
// })
// .catch(() => {
// state.loading = false
// })
}
const onSelectCurrentPageChange = (val: number) => {
state.currentPage = val
getData()
}
const initDefaultValue = () => {
if (state.value) {
// number[]转string[]确保默认值能够选中
if (typeof state.value === 'object') {
for (const key in state.value as string[]) {
state.value[key] = state.value[key].toString()
}
} else if (typeof state.value === 'number') {
state.value = state.value.toString()
}
getData(state.value)
}
}
onMounted(() => {
if (props.pk.indexOf('.') > 0) {
let pk = props.pk.split('.')
state.primaryKey = pk[1] ? pk[1] : pk[0]
}
initDefaultValue()
setTimeout(() => {
if (window?.IntersectionObserver) {
io = new IntersectionObserver((entries) => {
for (const key in entries) {
if (!entries[key].isIntersecting) selectRef.value?.blur()
}
})
if (selectRef.value?.$el instanceof Element) {
io.observe(selectRef.value.$el)
}
}
}, 500)
})
onUnmounted(() => {
io?.disconnect()
})
watch(
() => props.modelValue,
(newVal) => {
if (String(state.value) != String(newVal)) {
state.value = newVal ? newVal : ''
initDefaultValue()
}
}
)
const getSelectRef = () => {
return selectRef.value
}
const focus = () => {
selectRef.value?.focus()
}
const blur = () => {
selectRef.value?.blur()
}
defineExpose({
blur,
focus,
getSelectRef,
})
</script>
<style scoped lang="scss">
:deep(.remote-select-popper) {
text-align: center;
}
.remote-select-option {
white-space: pre;
}
</style>

380
src/components/echarts/waveForm.vue
View File

@@ -1,190 +1,190 @@
<template>
<div v-if="view2">
<el-row>
<el-col :span="12">
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select
style="min-width: 200px; width: 200px"
@change="changeView"
v-model="value"
placeholder="请选择值类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
@click="AdvancedAnalytics">高级分析</el-button> -->
</el-col>
<el-col :span="12">
<el-button
@click="backbxlb"
class="el-icon-refresh-right"
icon="el-icon-CloseBold"
style="float: right"
>
返回
</el-button>
</el-col>
</el-row>
<div v-loading="loading" style="height: calc(100vh - 190px)">
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi
ref="shushiboxiRef"
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
class="boxbx pt10 pb10"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi
ref="rmsboxiRef"
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
</div>
</div>
<div v-if="view3" class="pd10">
<span style="font-weight: 500; font-size: 22px">高级分析</span>
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
</div>
</template>
<script setup lang="ts">
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import analytics from '@/components/echarts/analytics.vue'
import { ref, reactive } from 'vue'
import { analysis } from '@/api/advance-boot/analyse'
import { mainHeight } from '@/utils/layout'
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
const emit = defineEmits(['backbxlb'])
interface Props {
// boxoList: any
// wp: any,
senior?: boolean
}
const props = withDefaults(defineProps<Props>(), {
senior: false
})
const parentHeight = ref(0)
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
const value = ref(1)
const options = ref([
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
])
const shushiboxiRef = ref()
const bxecharts = ref(mainHeight(95).height as any)
const view2 = ref(true)
const boxoList = ref(null)
const wp = ref(null)
const showBoxi = ref(true)
const view3 = ref(false)
const view4 = ref(false)
const GJList = ref([])
const open = async (row: any) => {
loading.value = true
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
.then(res => {
row.loading = false
if (res != undefined) {
boxoList.value = row
wp.value = res.data
loading.value = false
view4.value = true
}
})
.catch(() => {
loading.value = false
})
}
const bxhandleClick = (tab: any) => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
loading.value = true
if (tab.name == 'ssbx') {
bxactiveName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
bxactiveName.value = 'rmsbx'
}
setTimeout(() => {
loading.value = false
}, 0)
// console.log(tab, event);
}
const backbxlb = () => {
boxoList.value = null
wp.value = null
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
emit('backbxlb')
}
const setHeight = (h: any, vh: any) => {
if (h != false) {
parentHeight.value = h
}
setTimeout(() => {
bxecharts.value = mainHeight(vh).height
}, 100)
}
// 高级分析
const AdvancedAnalytics = () => {
analysis({
eventIndex: boxoList.value.eventId
}).then(res => {
GJList.value = res.data
view3.value = true
view2.value = false
})
}
const changeView = () => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
showBoxi.value = false
setTimeout(() => {
showBoxi.value = true
}, 0)
}
const gaoBack = () => {
view2.value = true
view3.value = false
}
defineExpose({ open, setHeight })
</script>
<style lang="scss" scoped></style>
<template>
<div v-if="view2">
<el-row>
<el-col :span="12">
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select
style="min-width: 200px; width: 200px"
@change="changeView"
v-model="value"
placeholder="请选择值类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
@click="AdvancedAnalytics">高级分析</el-button> -->
</el-col>
<el-col :span="12">
<el-button
@click="backbxlb"
class="el-icon-refresh-right"
icon="el-icon-Back"
style="float: right"
>
返回
</el-button>
</el-col>
</el-row>
<div v-loading="loading" style="height: calc(100vh - 190px)">
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi
ref="shushiboxiRef"
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
class="boxbx pt10 pb10"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi
ref="rmsboxiRef"
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
</div>
</div>
<div v-if="view3" class="pd10">
<span style="font-weight: 500; font-size: 22px">高级分析</span>
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
</div>
</template>
<script setup lang="ts">
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import analytics from '@/components/echarts/analytics.vue'
import { ref, reactive } from 'vue'
import { analysis } from '@/api/advance-boot/analyse'
import { mainHeight } from '@/utils/layout'
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
const emit = defineEmits(['backbxlb'])
interface Props {
// boxoList: any
// wp: any,
senior?: boolean
}
const props = withDefaults(defineProps<Props>(), {
senior: false
})
const parentHeight = ref(0)
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
const value = ref(1)
const options = ref([
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
])
const shushiboxiRef = ref()
const bxecharts = ref(mainHeight(95).height as any)
const view2 = ref(true)
const boxoList = ref(null)
const wp = ref(null)
const showBoxi = ref(true)
const view3 = ref(false)
const view4 = ref(false)
const GJList = ref([])
const open = async (row: any) => {
loading.value = true
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
.then(res => {
row.loading = false
if (res != undefined) {
boxoList.value = row
wp.value = res.data
loading.value = false
view4.value = true
}
})
.catch(() => {
loading.value = false
})
}
const bxhandleClick = (tab: any) => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
loading.value = true
if (tab.name == 'ssbx') {
bxactiveName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
bxactiveName.value = 'rmsbx'
}
setTimeout(() => {
loading.value = false
}, 0)
// console.log(tab, event);
}
const backbxlb = () => {
boxoList.value = null
wp.value = null
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
emit('backbxlb')
}
const setHeight = (h: any, vh: any) => {
if (h != false) {
parentHeight.value = h
}
setTimeout(() => {
bxecharts.value = mainHeight(vh).height
}, 100)
}
// 高级分析
const AdvancedAnalytics = () => {
analysis({
eventIndex: boxoList.value.eventId
}).then(res => {
GJList.value = res.data
view3.value = true
view2.value = false
})
}
const changeView = () => {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
showBoxi.value = false
setTimeout(() => {
showBoxi.value = true
}, 0)
}
const gaoBack = () => {
view2.value = true
view3.value = false
}
defineExpose({ open, setHeight })
</script>
<style lang="scss" scoped></style>

62
src/components/table/index.vue
View File

@@ -1,43 +1,24 @@
<template>
<div :style="{ height:props.height?props.height: tableStore.table.height }">
<vxe-table
ref="tableRef"
height="auto"
:key="key"
:data="tableStore.table.data"
v-loading="tableStore.table.loading"
v-bind="Object.assign({}, defaultAttribute, $attrs)"
@checkbox-all="selectChangeEvent"
@checkbox-change="selectChangeEvent"
:showOverflow="showOverflow"
@sort-change="handleSortChange"
>
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
<vxe-table ref="tableRef" height="auto" :key="key" :data="tableStore.table.data"
v-loading="tableStore.table.loading" v-bind="Object.assign({}, defaultAttribute, $attrs)"
@checkbox-all="selectChangeEvent" @checkbox-change="selectChangeEvent" :showOverflow="showOverflow"
@sort-change="handleSortChange">
<!-- Column 组件内部是 el-table-column -->
<template v-if="isGroup">
<GroupColumn :column="tableStore.table.column" />
</template>
<template v-else>
<Column
:attr="item"
:key="key + '-column'"
v-for="(item, key) in tableStore.table.column"
:tree-node="item.treeNode"
>
<Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
:tree-node="item.treeNode">
<!-- tableStore 预设的列 render 方案 -->
<template v-if="item.render" #default="scope">
<FieldRender
:field="item"
:row="scope.row"
:column="scope.column"
:index="scope.rowIndex"
:key="
key +
'-' +
item.render +
'-' +
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
"
/>
<FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
'-' +
item.render +
'-' +
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
" />
</template>
</Column>
</template>
@@ -46,16 +27,11 @@
</div>
<div v-if="tableStore.showPage" class="table-pagination">
<el-pagination
:currentPage="tableStore.table.params!.pageNum"
:page-size="tableStore.table.params!.pageSize"
:page-sizes="pageSizes"
background
<el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
:page-sizes="pageSizes" background
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
:total="tableStore.table.total"
@size-change="onTableSizeChange"
@current-change="onTableCurrentChange"
></el-pagination>
:total="tableStore.table.total" @size-change="onTableSizeChange"
@current-change="onTableCurrentChange"></el-pagination>
</div>
<slot name="footer"></slot>
</template>
@@ -80,13 +56,13 @@ const key = ref(0)
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
isGroup?: boolean
showOverflow?: boolean
height?: string | boolean
height?: string | number
}
const props = withDefaults(defineProps<Props>(), {
isGroup: false,
showOverflow: true,
height: false
height: undefined
})
onMounted(() => {
tableStore.table.ref = tableRef.value as VxeTableInstance

394
src/components/tree/pqs/Terminal.vue
View File

@@ -1,197 +1,197 @@
<template>
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
</template>
<!-- <div class="mb10">
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
</div> -->
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import Tree from './index.vue'
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
import { useConfig } from '@/stores/config'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
defineOptions({
name: 'govern/deviceTree'
})
const loading = ref(false)
const loading1 = ref(false)
const emit = defineEmits(['init'])
const config = useConfig()
const expanded: any = ref([])
const tree = ref()
const treRef = ref()
const info = (id: any) => {
expanded.value = [id]
getTerminalTree().then(res => {
// let arr: any[] = []
if (VITE_FLAG) {
res.data.forEach((item: any) => {
item.icon = 'el-icon-Menu'
item.plevel = item.level
item.level = 0
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-HomeFilled'
item2.plevel = item2.level
item2.level = 100
expanded.value.push(item2.id)
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-CollectionTag'
item3.plevel = item3.level
item3.level = 200
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Flag'
item4.plevel = item4.level
item4.level = 300
// arr.push(item4)
item4.children.forEach((item5: any) => {
item5.icon = 'el-icon-OfficeBuilding'
item5.plevel = item5.level
item5.level = 300
// item5.id = item4.id
item5.children.forEach((item6: any) => {
item6.icon = 'el-icon-HelpFilled'
item6.plevel = 4
if (item6.name == '电网侧' && item6.children.length == 0) {
item6.level = 400
} else {
item6.level = 400
}
item6.children.forEach((item7: any) => {
item7.icon = 'el-icon-Film'
item7.plevel = item7.level
item7.level = 400
item7.children.forEach((item8: any) => {
item8.icon = 'el-icon-Collection'
item8.plevel = item8.level
item8.level = 500
item8.children.forEach((item9: any) => {
item9.icon = 'el-icon-Share'
item9.plevel = item9.level
item9.level = 600
item9.children.forEach((item10: any) => {
item10.icon = 'el-icon-Location'
item10.plevel = item10.level
item10.level = 700
})
})
})
})
})
})
})
})
})
})
} else {
res.data.forEach((item: any) => {
item.icon = 'el-icon-Menu'
item.plevel = item.level
item.level = (item.level + 1) * 100
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-HomeFilled'
item2.plevel = item2.level
item2.level = (item2.level + 1) * 100
expanded.value.push(item2.id)
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-CollectionTag'
item3.plevel = item3.level
item3.level = (item3.level + 1) * 100
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Flag'
item4.plevel = item4.level
item4.level = (item4.level + 1) * 100
item4.children.forEach((item5: any) => {
item5.icon = 'el-icon-OfficeBuilding'
item5.plevel = item5.level
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
item5.children.forEach((item6: any) => {
item6.icon = 'el-icon-Film'
item6.plevel = item6.level
item6.level = (item6.level + 1) * 100
item6.children.forEach((item7: any) => {
item7.icon = 'el-icon-Share'
item7.plevel = item7.level
item7.level = (item7.level + 1) * 100
item7.children.forEach((item8: any) => {
item8.icon = 'el-icon-Location'
item8.plevel = item8.level
item8.level = (item8.level + 1) * 100
})
})
})
})
})
})
})
})
}
tree.value = res.data
nextTick(() => {
treRef.value.setCurrentKey(id)
// if (arr.length) {
// treRef.value.treeRef.setCurrentKey(arr[0].id)
// // 注册父组件事件
// emit('init', {
// level: 2,
// ...arr[0]
// })
// } else {
// emit('init')
// }
})
})
}
// 下载模版
const exportExcelTemplate = async() => {
loading.value = true
downTerminalTemplate().then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = '终端台账模版'
document.body.appendChild(link)
link.click()
link.remove()
})
await setTimeout(() => {
loading.value = false
}, 0)
}
// 导出台账
const ledgerEverywhere = async() => {
loading1.value = true
exportTerminalBase().then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = '终端台账'
document.body.appendChild(link)
link.click()
link.remove()
})
await setTimeout(() => {
loading1.value = false
}, 0)
}
info('')
defineExpose({ info })
</script>
<style lang="scss" scoped>
.el-tree {
background: #efeff0;
}
</style>
<template>
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
</template>
<!-- <div class="mb10">
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
</div> -->
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import Tree from './index.vue'
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
import { useConfig } from '@/stores/config'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
defineOptions({
name: 'govern/deviceTree'
})
const loading = ref(false)
const loading1 = ref(false)
const emit = defineEmits(['init'])
const config = useConfig()
const expanded: any = ref([])
const tree = ref()
const treRef = ref()
const info = (id: any) => {
expanded.value = [id]
getTerminalTree().then(res => {
// let arr: any[] = []
if (VITE_FLAG) {
res.data.forEach((item: any) => {
item.icon = 'el-icon-Menu'
item.plevel = item.level
item.level = 0
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-HomeFilled'
item2.plevel = item2.level
item2.level = 100
expanded.value.push(item2.id)
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-CollectionTag'
item3.plevel = item3.level
item3.level = 200
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Flag'
item4.plevel = item4.level
item4.level = 300
// arr.push(item4)
item4.children.forEach((item5: any) => {
item5.icon = 'el-icon-OfficeBuilding'
item5.plevel = item5.level
item5.level = 300
// item5.id = item4.id
item5.children.forEach((item6: any) => {
item6.icon = 'el-icon-HelpFilled'
item6.plevel = 4
if (item6.name == '电网侧' && item6.children.length == 0) {
item6.level = 400
} else {
item6.level = 400
}
item6.children.forEach((item7: any) => {
item7.icon = 'el-icon-Film'
item7.plevel = item7.level
item7.level = 400
item7.children.forEach((item8: any) => {
item8.icon = 'el-icon-Collection'
item8.plevel = item8.level
item8.level = 500
item8.children.forEach((item9: any) => {
item9.icon = 'el-icon-Share'
item9.plevel = item9.level
item9.level = 600
item9.children.forEach((item10: any) => {
item10.icon = 'el-icon-Location'
item10.plevel = item10.level
item10.level = 700
})
})
})
})
})
})
})
})
})
})
} else {
res.data.forEach((item: any) => {
item.icon = 'el-icon-Menu'
item.plevel = item.level
item.level = (item.level + 1) * 100
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-HomeFilled'
item2.plevel = item2.level
item2.level = (item2.level + 1) * 100
expanded.value.push(item2.id)
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-CollectionTag'
item3.plevel = item3.level
item3.level = (item3.level + 1) * 100
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Flag'
item4.plevel = item4.level
item4.level = (item4.level + 1) * 100
item4.children.forEach((item5: any) => {
item5.icon = 'el-icon-OfficeBuilding'
item5.plevel = item5.level
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
item5.children.forEach((item6: any) => {
item6.icon = 'el-icon-Film'
item6.plevel = item6.level
item6.level = (item6.level + 1) * 100
item6.children.forEach((item7: any) => {
item7.icon = 'el-icon-Share'
item7.plevel = item7.level
item7.level = (item7.level + 1) * 100
item7.children.forEach((item8: any) => {
item8.icon = 'el-icon-Location'
item8.plevel = item8.level
item8.level = (item8.level + 1) * 100
})
})
})
})
})
})
})
})
}
tree.value = res.data
nextTick(() => {
treRef.value.setCurrentKey(id)
// if (arr.length) {
// treRef.value.treeRef.setCurrentKey(arr[0].id)
// // 注册父组件事件
// emit('init', {
// level: 2,
// ...arr[0]
// })
// } else {
// emit('init')
// }
})
})
}
// 下载模版
const exportExcelTemplate = async() => {
loading.value = true
downTerminalTemplate().then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = '终端台账模版'
document.body.appendChild(link)
link.click()
link.remove()
})
await setTimeout(() => {
loading.value = false
}, 0)
}
// 导出台账
const ledgerEverywhere = async() => {
loading1.value = true
exportTerminalBase().then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = '终端台账'
document.body.appendChild(link)
link.click()
link.remove()
})
await setTimeout(() => {
loading1.value = false
}, 0)
}
info('')
defineExpose({ info })
</script>
<style lang="scss" scoped>
.el-tree {
background: #efeff0;
}
</style>

66
src/layouts/admin/container/classic.vue
View File

@@ -1,33 +1,33 @@
<template>
<el-container class="layout-container">
<Aside />
<el-container class="content-wrapper">
<Header />
<Nav />
<Main />
</el-container>
</el-container>
<CloseFullScreen v-if="navTabs.state.tabFullScreen" />
</template>
<script setup lang="ts">
import Aside from '@/layouts/admin/components/aside.vue'
import Header from '@/layouts/admin/components/header.vue'
import Main from '@/layouts/admin/router-view/main.vue'
import CloseFullScreen from '@/layouts/admin/components/closeFullScreen.vue'
import { useNavTabs } from '@/stores/navTabs'
import Nav from '@/layouts/admin/components/nav.vue'
const navTabs = useNavTabs()
</script>
<style scoped>
.layout-container {
height: 100%;
width: 100%;
}
.content-wrapper {
flex-direction: column;
width: 100%;
height: 100%;
}
</style>
<template>
<el-container class="layout-container">
<Aside />
<el-container class="content-wrapper">
<Header />
<Nav />
<Main />
</el-container>
</el-container>
<CloseFullScreen v-if="navTabs.state.tabFullScreen" />
</template>
<script setup lang="ts">
import Aside from '@/layouts/admin/components/aside.vue'
import Header from '@/layouts/admin/components/header.vue'
import Main from '@/layouts/admin/router-view/main.vue'
import CloseFullScreen from '@/layouts/admin/components/closeFullScreen.vue'
import { useNavTabs } from '@/stores/navTabs'
import Nav from '@/layouts/admin/components/nav.vue'
const navTabs = useNavTabs()
</script>
<style scoped>
.layout-container {
height: 100%;
width: 100%;
}
.content-wrapper {
flex-direction: column;
width: 100%;
height: 100%;
}
</style>

141
src/utils/auth.ts
View File

@@ -1,71 +1,70 @@
import { useCache, CACHE_KEY } from '@/hooks/web/useCache'
import { TokenType } from '@/api/login/types'
import { decrypt, encrypt } from '@/utils/jsencrypt'
const { wsCache } = useCache()
const AccessTokenKey = 'ACCESS_TOKEN'
const RefreshTokenKey = 'REFRESH_TOKEN'
// 获取token
export const getAccessToken = () => {
// 此处与TokenKey相同，此写法解决初始化时Cookies中不存在TokenKey报错
return wsCache.get(AccessTokenKey) ? wsCache.get(AccessTokenKey) : wsCache.get('ACCESS_TOKEN')
}
// 刷新token
export const getRefreshToken = () => {
return wsCache.get(RefreshTokenKey)
}
// 设置token
export const setToken = (token: TokenType) => {
wsCache.set(RefreshTokenKey, token.refreshToken)
wsCache.set(AccessTokenKey, token.accessToken)
}
// 删除token
export const removeToken = () => {
wsCache.delete(AccessTokenKey)
wsCache.delete(RefreshTokenKey)
}
/** 格式化token（jwt格式） */
export const formatToken = (token: string): string => {
return 'Bearer ' + token
}
// ========== 账号相关 ==========
export type LoginFormType = {
tenantName: string
username: string
password: string
rememberMe: boolean
}
export const getLoginForm = () => {
const loginForm: LoginFormType = wsCache.get(CACHE_KEY.LoginForm)
if (loginForm) {
loginForm.password = decrypt(loginForm.password) as string
}
return loginForm
}
export const setLoginForm = (loginForm: LoginFormType) => {
loginForm.password = encrypt(loginForm.password) as string
wsCache.set(CACHE_KEY.LoginForm, loginForm, { exp: 30 * 24 * 60 * 60 })
}
export const removeLoginForm = () => {
wsCache.delete(CACHE_KEY.LoginForm)
}
// ========== 租户相关 ==========
export const getTenantId = () => {
return wsCache.get(CACHE_KEY.TenantId)
}
export const setTenantId = (username: string) => {
wsCache.set(CACHE_KEY.TenantId, username)
}
import { useCache, CACHE_KEY } from '@/hooks/web/useCache'
import { decrypt, encrypt } from '@/utils/jsencrypt'
const { wsCache } = useCache()
const AccessTokenKey = 'ACCESS_TOKEN'
const RefreshTokenKey = 'REFRESH_TOKEN'
// 获取token
export const getAccessToken = () => {
// 此处与TokenKey相同，此写法解决初始化时Cookies中不存在TokenKey报错
return wsCache.get(AccessTokenKey) ? wsCache.get(AccessTokenKey) : wsCache.get('ACCESS_TOKEN')
}
// 刷新token
export const getRefreshToken = () => {
return wsCache.get(RefreshTokenKey)
}
// 设置token
export const setToken = (token: any) => {
wsCache.set(RefreshTokenKey, token.refreshToken)
wsCache.set(AccessTokenKey, token.accessToken)
}
// 删除token
export const removeToken = () => {
wsCache.delete(AccessTokenKey)
wsCache.delete(RefreshTokenKey)
}
/** 格式化token（jwt格式） */
export const formatToken = (token: string): string => {
return 'Bearer ' + token
}
// ========== 账号相关 ==========
export type LoginFormType = {
tenantName: string
username: string
password: string
rememberMe: boolean
}
export const getLoginForm = () => {
const loginForm: LoginFormType = wsCache.get(CACHE_KEY.LoginForm)
if (loginForm) {
loginForm.password = decrypt(loginForm.password) as string
}
return loginForm
}
export const setLoginForm = (loginForm: LoginFormType) => {
loginForm.password = encrypt(loginForm.password) as string
wsCache.set(CACHE_KEY.LoginForm, loginForm, { exp: 30 * 24 * 60 * 60 })
}
export const removeLoginForm = () => {
wsCache.delete(CACHE_KEY.LoginForm)
}
// ========== 租户相关 ==========
export const getTenantId = () => {
return wsCache.get(CACHE_KEY.TenantId)
}
export const setTenantId = (username: string) => {
wsCache.set(CACHE_KEY.TenantId, username)
}

461
src/utils/echartMethod.ts
View File

@@ -1,159 +1,302 @@
const dataProcessing = (arr: any[]) => {
return arr
.filter(item => typeof item === 'number' || (typeof item === 'string' && !isNaN(parseFloat(item))))
.map(item => (typeof item === 'number' ? item : parseFloat(item)))
}
const calculateValue = (o: number, value: number, num: number, isMin: boolean) => {
if (value === 0) {
return 0
} else if (value > 0 && Math.abs(value) < 1 && isMin == true) {
return 0
} else if (value > -1 && value < 0 && isMin == false) {
return 0
}
let base
if (Math.abs(o) >= 100) {
base = 100
} else if (Math.abs(o) >= 10) {
base = 10
} else if (Math.abs(o) >= 1) {
base = 1
} else {
base = 0.1
}
let calculatedValue
if (isMin) {
if (value < 0) {
calculatedValue = value + num * value
} else {
calculatedValue = value - num * value
}
} else {
if (value < 0) {
calculatedValue = value - num * value
} else {
calculatedValue = value + num * value
}
}
if (base === 0.1) {
return parseFloat(calculatedValue.toFixed(1))
} else if (isMin) {
return Math.floor(calculatedValue / base) * base
} else {
return Math.ceil(calculatedValue / base) * base
}
}
// 处理y轴最大最小值
export const yMethod = (arr: any) => {
let num = 0.1
let numList = dataProcessing(arr)
let maxValue = 0
let minValue = 0
let max = 0
let min = 0
maxValue = Math.max(...numList)
minValue = Math.min(...numList)
const o = maxValue - minValue
if (Math.abs(o) >= 300) {
num = 0.02
}
min = calculateValue(o, minValue, num, true)
max = calculateValue(o, maxValue, num, false)
// if (-100 >= minValue) {
// min = Math.floor((minValue + num * minValue) / 100) * 100
// } else if (-10 >= minValue && minValue > -100) {
// min = Math.floor((minValue + num * minValue) / 10) * 10
// } else if (-1 >= minValue && minValue > -10) {
// min = Math.floor(minValue + num * minValue)
// } else if (0 > minValue && minValue > -1) {
// min = parseFloat((minValue + num * minValue).toFixed(1))
// } else if (minValue == 0) {
// min = 0
// } else if (0 < minValue && minValue < 1) {
// min = parseFloat((minValue - num * minValue).toFixed(1))
// } else if (1 <= minValue && minValue < 10) {
// min = Math.floor(minValue - num * minValue)
// } else if (10 <= minValue && minValue < 100) {
// min = Math.floor((minValue - num * minValue) / 10) * 10
// } else if (100 <= minValue) {
// min = Math.floor((minValue - num * minValue) / 100) * 100
// }
// if (-100 >= maxValue) {
// max = Math.ceil((maxValue - num * maxValue) / 100) * 100
// } else if (-10 >= maxValue && maxValue > -100) {
// max = Math.ceil((maxValue - num * maxValue) / 10) * 10
// } else if (-1 >= maxValue && maxValue > -10) {
// max = Math.ceil(maxValue - num * maxValue)
// } else if (0 > maxValue && maxValue > -1) {
// max = parseFloat((maxValue - num * maxValue).toFixed(1))
// } else if (maxValue == 0) {
// max = 0
// } else if (0 < maxValue && maxValue < 1) {
// max = parseFloat((maxValue + num * maxValue).toFixed(1))
// } else if (1 <= maxValue && maxValue < 10) {
// max = Math.ceil(maxValue + num * maxValue)
// } else if (10 <= maxValue && maxValue < 100) {
// max = Math.ceil((maxValue + num * maxValue) / 10) * 10
// } else if (100 <= maxValue) {
// max = Math.ceil((maxValue + num * maxValue) / 100) * 100
// }
// if (maxValue > 1000 || minValue < -1000) {
// max = Math.ceil(maxValue / 100) * 100
// if (minValue == 0) {
// min = 0
// } else {
// min = Math.floor(minValue / 100) * 100
// }
// } else if (maxValue < 60 && minValue > 40) {
// max = 60
// min = 40
// } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
// max = Math.ceil(maxValue / 10) * 10
// min = Math.floor(minValue / 10) * 10
// } else if (maxValue == minValue && maxValue != 0 && minValue != 0) {
// max = Math.ceil(maxValue / 10 + 1) * 10
// min = Math.floor(minValue / 10 - 1) * 10
// } else {
// max = Math.ceil(maxValue / 10) * 10
// min = Math.floor(minValue / 10) * 10
// }
// if (maxValue > 0 && maxValue < 1) {
// max = 1
// } else if (max == 0 && minValue > -1 && minValue < 0) {
// min = -1
// }
return [min, max]
}
/**
* title['A相','B相',]
* data[[1,2],[3,4]]
*/
// 导出csv文件
const convertToCSV = (title: object, data: any) => {
console.log('🚀 ~ convertToCSV ~ data:', data)
let csv = ''
// 添加列头
csv += ',' + title.join(',') + '\n'
// 遍历数据并添加到CSV字符串中
data?.map(item => {
csv += item.join(',') + '\n'
})
return csv
}
export const exportCSV = (title: object, data: any, filename: string) => {
const csv = convertToCSV(title, data)
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
link.click()
// 释放URL对象
URL.revokeObjectURL(link.href)
}
const dataProcessing = (arr: any[]) => {
return arr
.filter(item => typeof item === 'number' || (typeof item === 'string' && !isNaN(parseFloat(item))))
.map(item => (typeof item === 'number' ? item : parseFloat(item)))
}
const calculateValue = (o: number, value: number, num: number, isMin: boolean) => {
if (value === 0) {
return 0
} else if (value > 0 && Math.abs(value) < 1 && isMin == true) {
return 0
} else if (value > -1 && value < 0 && isMin == false) {
return 0
}
let base
if (Math.abs(o) >= 100) {
base = 100
} else if (Math.abs(o) >= 10) {
base = 10
} else if (Math.abs(o) >= 1) {
base = 1
} else {
base = 0.1
}
let calculatedValue
if (isMin) {
if (value < 0) {
calculatedValue = value + num * value
} else {
calculatedValue = value - num * value
}
} else {
if (value < 0) {
calculatedValue = value - num * value
} else {
calculatedValue = value + num * value
}
}
if (base === 0.1) {
return parseFloat(calculatedValue.toFixed(1))
} else if (isMin) {
return Math.floor(calculatedValue / base) * base
} else {
return Math.ceil(calculatedValue / base) * base
}
}
// 处理y轴最大最小值
export const yMethod = (arr: any) => {
let num = 0.1
let numList = dataProcessing(arr)
let maxValue = 0
let minValue = 0
let max = 0
let min = 0
maxValue = Math.max(...numList)
minValue = Math.min(...numList)
const o = maxValue - minValue
if (Math.abs(o) >= 300) {
num = 0.02
}
min = calculateValue(o, minValue, num, true)
max = calculateValue(o, maxValue, num, false)
// if (-100 >= minValue) {
// min = Math.floor((minValue + num * minValue) / 100) * 100
// } else if (-10 >= minValue && minValue > -100) {
// min = Math.floor((minValue + num * minValue) / 10) * 10
// } else if (-1 >= minValue && minValue > -10) {
// min = Math.floor(minValue + num * minValue)
// } else if (0 > minValue && minValue > -1) {
// min = parseFloat((minValue + num * minValue).toFixed(1))
// } else if (minValue == 0) {
// min = 0
// } else if (0 < minValue && minValue < 1) {
// min = parseFloat((minValue - num * minValue).toFixed(1))
// } else if (1 <= minValue && minValue < 10) {
// min = Math.floor(minValue - num * minValue)
// } else if (10 <= minValue && minValue < 100) {
// min = Math.floor((minValue - num * minValue) / 10) * 10
// } else if (100 <= minValue) {
// min = Math.floor((minValue - num * minValue) / 100) * 100
// }
// if (-100 >= maxValue) {
// max = Math.ceil((maxValue - num * maxValue) / 100) * 100
// } else if (-10 >= maxValue && maxValue > -100) {
// max = Math.ceil((maxValue - num * maxValue) / 10) * 10
// } else if (-1 >= maxValue && maxValue > -10) {
// max = Math.ceil(maxValue - num * maxValue)
// } else if (0 > maxValue && maxValue > -1) {
// max = parseFloat((maxValue - num * maxValue).toFixed(1))
// } else if (maxValue == 0) {
// max = 0
// } else if (0 < maxValue && maxValue < 1) {
// max = parseFloat((maxValue + num * maxValue).toFixed(1))
// } else if (1 <= maxValue && maxValue < 10) {
// max = Math.ceil(maxValue + num * maxValue)
// } else if (10 <= maxValue && maxValue < 100) {
// max = Math.ceil((maxValue + num * maxValue) / 10) * 10
// } else if (100 <= maxValue) {
// max = Math.ceil((maxValue + num * maxValue) / 100) * 100
// }
// if (maxValue > 1000 || minValue < -1000) {
// max = Math.ceil(maxValue / 100) * 100
// if (minValue == 0) {
// min = 0
// } else {
// min = Math.floor(minValue / 100) * 100
// }
// } else if (maxValue < 60 && minValue > 40) {
// max = 60
// min = 40
// } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
// max = Math.ceil(maxValue / 10) * 10
// min = Math.floor(minValue / 10) * 10
// } else if (maxValue == minValue && maxValue != 0 && minValue != 0) {
// max = Math.ceil(maxValue / 10 + 1) * 10
// min = Math.floor(minValue / 10 - 1) * 10
// } else {
// max = Math.ceil(maxValue / 10) * 10
// min = Math.floor(minValue / 10) * 10
// }
// if (maxValue > 0 && maxValue < 1) {
// max = 1
// } else if (max == 0 && minValue > -1 && minValue < 0) {
// min = -1
// }
return [min, max]
}
/**
* title['A相','B相',]
* data[[1,2],[3,4]]
*/
// 导出csv文件
const convertToCSV = (title: object, data: any) => {
console.log('🚀 ~ convertToCSV ~ data:', data)
let csv = ''
// 添加列头
csv += ',' + title.join(',') + '\n'
// 遍历数据并添加到CSV字符串中
data?.map(item => {
csv += item.join(',') + '\n'
})
return csv
}
export const exportCSV = (title: object, data: any, filename: string) => {
const csv = convertToCSV(title, data)
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
link.click()
// 释放URL对象
URL.revokeObjectURL(link.href)
}
/**
* 补全时间序列数据中缺失的条目
* @param rawData 原始数据，格式为 [["时间字符串", "数值", "单位", "类型"], ...]
* @returns 补全后的数据，缺失条目数值为 null
*/
export const completeTimeSeries = (rawData: string[][]): (string | null)[][] => {
// 步骤1：校验原始数据并解析时间
if (rawData.length < 2) {
console.warn('数据量不足2条，无法计算时间间隔，直接返回原始数据')
return rawData.map(item => [...item])
}
// 解析所有时间为Date对象，过滤无效时间并按时间排序
const validData = rawData
.map(item => {
// 确保至少有时间和数值字段
if (!item[0]) {
return { time: new Date(0), item, isValid: false }
}
const time = new Date(item[0])
return { time, item, isValid: !isNaN(time.getTime()) }
})
.filter(data => data.isValid)
.sort((a, b) => a.time.getTime() - b.time.getTime()) // 确保数据按时间排序
.map(data => data.item)
if (validData.length < 2) {
throw new Error('有效时间数据不足2条，无法继续处理')
}
// 步骤2：计算时间间隔（分析前几条数据确定最可能的间隔）
const intervals: number[] = []
// 分析前10条数据来确定间隔，避免单一间隔出错
const analyzeCount = Math.min(10, validData.length - 1)
for (let i = 0; i < analyzeCount; i++) {
const currentTime = new Date(validData[i][0]!).getTime()
const nextTime = new Date(validData[i + 1][0]!).getTime()
const interval = nextTime - currentTime
if (interval > 0) {
intervals.push(interval)
}
}
// 取最常见的间隔作为标准间隔
const timeInterval = getMostFrequentValue(intervals)
if (timeInterval <= 0) {
throw new Error('无法确定有效的时间间隔')
}
// 步骤3：生成完整的时间序列范围（从第一条到最后一条）
const startTime = new Date(validData[0][0]!).getTime()
const endTime = new Date(validData[validData.length - 1][0]!).getTime()
const completeTimes: Date[] = []
// 生成从 startTime 到 endTime 的所有间隔时间点
for (let time = startTime; time <= endTime; time += timeInterval) {
completeTimes.push(new Date(time))
}
// 步骤4：将原始数据转为时间映射表，使用精确的时间字符串匹配
const timeDataMap = new Map<string, (string | undefined)[]>()
validData.forEach(item => {
// 使用原始时间字符串作为键，避免格式转换导致的匹配问题
if (item[0]) {
timeDataMap.set(item[0], item)
}
})
// 提取模板数据（从第一条有效数据中提取单位和类型，处理可能的缺失）
const template = validData[0]
// 步骤5：对比补全数据，缺失条目数值为 null
const completedData = completeTimes.map(time => {
// 保持与原始数据相同的时间格式
const timeStr = formatTime(time)
const existingItem = timeDataMap.get(timeStr)
if (existingItem) {
// 存在该时间，返回原始数据
return [...existingItem]
} else {
// 缺失该时间，数值设为 null，其他字段沿用第一个有效数据的格式
// 处理可能缺失的单位和类型字段
const result: (string | null | undefined)[] = [timeStr, '/']
// 仅在原始数据有单位字段时才添加
if (template.length > 2) {
result.push(template[2])
}
// 仅在原始数据有类型字段时才添加
if (template.length > 3) {
result.push(template[3])
}
return result
}
})
return completedData
}
/**
* 格式化时间为 "YYYY-MM-DD HH:mm:ss" 格式
* @param date 日期对象
* @returns 格式化后的时间字符串
*/
function formatTime(date: Date): string {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
/**
* 获取数组中出现频率最高的值
* @param arr 数字数组
* @returns 出现频率最高的值
*/
function getMostFrequentValue(arr: number[]): number {
if (arr.length === 0) return 0
const frequencyMap = new Map<number, number>()
arr.forEach(num => {
frequencyMap.set(num, (frequencyMap.get(num) || 0) + 1)
})
let maxFrequency = 0
let mostFrequent = arr[0]
frequencyMap.forEach((frequency, num) => {
if (frequency > maxFrequency) {
maxFrequency = frequency
mostFrequent = num
}
})
return mostFrequent
}

590
src/utils/router.ts
View File

@@ -1,295 +1,295 @@
import router from '@/router/index'
import { isNavigationFailure, NavigationFailureType } from 'vue-router'
import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { closeShade } from '@/utils/pageShade'
import { adminBaseRoute } from '@/router/static'
import { compact, isEmpty, reverse } from 'lodash-es'
import { isAdminApp } from '@/utils/common'
/**
* 导航失败有错误消息的路由push
* @param to — 导航位置，同 router.push
*/
export const routePush = async (to: RouteLocationRaw) => {
try {
const failure = await router.push(to)
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
ElNotification({
message: 'utils.Navigation failed, navigation guard intercepted!',
type: 'error'
})
} else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
// ElNotification({
// message: '已在目标页',
// type: 'warning'
// })
}
} catch (error) {
ElNotification({
message: '导航失败，路由无效',
type: 'error'
})
console.error(error)
}
}
/**
* 获取第一个菜单
*/
export const getFirstRoute = (routes: RouteRecordRaw[], menuType = 'tab'): false | RouteRecordRaw => {
const routerPaths: string[] = []
const routers = router.getRoutes()
routers.forEach(item => {
if (item.path) routerPaths.push(item.path)
})
let find: boolean | RouteRecordRaw = false
for (const key in routes) {
if (
routes[key].meta?.type == 'menu' &&
routes[key].meta?.menu_type == menuType &&
routerPaths.indexOf(routes[key].path) !== -1
) {
return routes[key]
} else if (routes[key].children && routes[key].children?.length) {
find = getFirstRoute(routes[key].children!)
if (find) return find
}
}
return find
}
/**
* 打开侧边菜单
* @param menu 菜单数据
*/
export const onClickMenu = (menu: RouteRecordRaw) => {
switch (menu.meta?.menu_type) {
case 'iframe':
case 'tab':
routePush({ path: menu.path })
break
case 'link':
window.open(menu.path, '_blank')
break
default:
ElNotification({
message: 'utils.Navigation failed, the menu type is unrecognized!',
type: 'error'
})
break
}
const config = useConfig()
if (config.layout.shrink) {
closeShade(() => {
config.setLayout('menuCollapse', true)
})
}
}
/**
* 处理后台的路由
*/
export const handleAdminRoute = (routes: any) => {
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
addRouteAll(viewsComponent, routes, adminBaseRoute.name as string)
const menuAdminBaseRoute = (adminBaseRoute.path as string) + '/'
// 更新stores中的路由菜单数据
const navTabs = useNavTabs()
navTabs.setTabsViewRoutes(handleMenuRule(routes, menuAdminBaseRoute))
navTabs.fillAuthNode(handleAuthNode(routes, menuAdminBaseRoute))
}
/**
* 获取菜单的paths
*/
export const getMenuPaths = (menus: RouteRecordRaw[]): string[] => {
let menuPaths: string[] = []
menus.forEach(item => {
menuPaths.push(item.path)
if (item.children && item.children.length > 0) {
menuPaths = menuPaths.concat(getMenuPaths(item.children))
}
})
return menuPaths
}
/**
* 后台的菜单处理
*/
const handleMenuRule = (routes: any, pathPrefix = '/', type = ['menu', 'menu_dir']) => {
const menuRule: RouteRecordRaw[] = []
for (const key in routes) {
if (routes[key].extend == 'add_rules_only') {
continue
}
if (!type.includes(routes[key].type)) {
continue
}
if (routes[key].type == 'menu_dir' && routes[key].children && !routes[key].children.length) {
continue
}
if (
['route', 'menu', 'nav_user_menu', 'nav'].includes(routes[key].type) &&
((routes[key].menu_type == 'tab' && !routes[key].component) ||
(['link', 'iframe'].includes(routes[key].menu_type) && !routes[key].url))
) {
continue
}
const currentPath = ['link', 'iframe'].includes(routes[key].menu_type)
? routes[key].url
: pathPrefix + routes[key].path
let children: RouteRecordRaw[] = []
if (routes[key].children && routes[key].children.length > 0) {
children = handleMenuRule(routes[key].children, pathPrefix, type)
}
menuRule.push({
path: currentPath,
name: routes[key].name,
component: routes[key].component,
meta: {
id: routes[key].id,
title: routes[key].title,
icon: routes[key].icon,
keepalive: routes[key].keepalive,
menu_type: routes[key].menu_type,
type: routes[key].type
},
children: children
})
}
return menuRule
}
/**
* 处理权限节点
* @param routes 路由数据
* @param prefix 节点前缀
* @returns 组装好的权限节点
*/
const handleAuthNode = (routes: any, prefix = '/') => {
const authNode: Map<string, string[]> = new Map([])
assembleAuthNode(routes, authNode, prefix, prefix)
return authNode
}
const assembleAuthNode = (routes: any, authNode: Map<string, string[]>, prefix = '/', parent = '/') => {
const authNodeTemp = []
for (const key in routes) {
if (routes[key].type == 'button') authNodeTemp.push(prefix + routes[key].name)
if (routes[key].children && routes[key].children.length > 0) {
assembleAuthNode(routes[key].children, authNode, prefix, prefix + routes[key].name)
}
}
if (authNodeTemp && authNodeTemp.length > 0) {
authNode.set(parent, authNodeTemp)
}
}
/**
* 动态添加路由-带子路由
* @param viewsComponent
* @param routes
* @param parentName
* @param analyticRelation 根据 name 从已注册路由分析父级路由
*/
export const addRouteAll = (
viewsComponent: Record<string, any>,
routes: any,
parentName: string,
analyticRelation = false
) => {
for (const idx in routes) {
if (routes[idx].extend == 'add_menu_only') {
continue
}
if (
(routes[idx].menu_type == 'tab' && viewsComponent[routes[idx].component]) ||
routes[idx].menu_type == 'iframe'
) {
addRouteItem(viewsComponent, routes[idx], parentName, analyticRelation)
}
if (routes[idx].children && routes[idx].children.length > 0) {
addRouteAll(viewsComponent, routes[idx].children, parentName, analyticRelation)
}
}
}
/**
* 动态添加路由
* @param viewsComponent
* @param route
* @param parentName
* @param analyticRelation 根据 name 从已注册路由分析父级路由
*/
export const addRouteItem = (
viewsComponent: Record<string, any>,
route: any,
parentName: string,
analyticRelation: boolean
) => {
let path = '',
component
if (route.menu_type == 'iframe') {
path = (isAdminApp() ? adminBaseRoute.path : '') + '/iframe/' + encodeURIComponent(route.url)
component = () => import('@/layouts/common/router-view/iframe.vue')
} else {
path = parentName ? route.path : '/' + route.path
component = viewsComponent[route.component]
}
if (route.menu_type == 'tab' && analyticRelation) {
const parentNames = getParentNames(route.name)
if (parentNames.length) {
for (const key in parentNames) {
if (router.hasRoute(parentNames[key])) {
parentName = parentNames[key]
break
}
}
}
}
const routeBaseInfo: RouteRecordRaw = {
path: path,
name: route.name,
component: component,
meta: {
...route,
title: route.title,
extend: route.extend,
icon: route.icon,
keepalive: route.keepalive,
menu_type: route.menu_type,
type: route.type,
url: route.url,
addtab: true
}
}
if (parentName) {
router.addRoute(parentName, routeBaseInfo)
} else {
router.addRoute(routeBaseInfo)
}
}
/**
* 根据name字符串，获取父级name组合的数组
* @param name
*/
const getParentNames = (name: string) => {
const names = compact(name.split('/'))
const tempNames = []
const parentNames = []
for (const key in names) {
tempNames.push(names[key])
if (parseInt(key) != names.length - 1) {
parentNames.push(tempNames.join('/'))
}
}
return reverse(parentNames)
}
import router from '@/router/index'
import { isNavigationFailure, NavigationFailureType } from 'vue-router'
import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { closeShade } from '@/utils/pageShade'
import { adminBaseRoute } from '@/router/static'
import { compact, isEmpty, reverse } from 'lodash-es'
import { isAdminApp } from '@/utils/common'
/**
* 导航失败有错误消息的路由push
* @param to — 导航位置，同 router.push
*/
export const routePush = async (to: RouteLocationRaw) => {
try {
const failure = await router.push(to)
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
ElNotification({
message: 'utils.Navigation failed, navigation guard intercepted!',
type: 'error'
})
} else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
// ElNotification({
// message: '已在目标页',
// type: 'warning'
// })
}
} catch (error) {
ElNotification({
message: '导航失败，路由无效',
type: 'error'
})
console.error(error)
}
}
/**
* 获取第一个菜单
*/
export const getFirstRoute = (routes: RouteRecordRaw[], menuType = 'tab'): false | RouteRecordRaw => {
const routerPaths: string[] = []
const routers = router.getRoutes()
routers.forEach(item => {
if (item.path) routerPaths.push(item.path)
})
let find: boolean | RouteRecordRaw = false
for (const key in routes) {
if (
routes[key].meta?.type == 'menu' &&
routes[key].meta?.menu_type == menuType &&
routerPaths.indexOf(routes[key].path) !== -1
) {
return routes[key]
} else if (routes[key].children && routes[key].children?.length) {
find = getFirstRoute(routes[key].children!)
if (find) return find
}
}
return find
}
/**
* 打开侧边菜单
* @param menu 菜单数据
*/
export const onClickMenu = (menu: RouteRecordRaw) => {
switch (menu.meta?.menu_type) {
case 'iframe':
case 'tab':
routePush({ path: menu.path })
break
case 'link':
window.open(menu.path, '_blank')
break
default:
ElNotification({
message: 'utils.Navigation failed, the menu type is unrecognized!',
type: 'error'
})
break
}
const config = useConfig()
if (config.layout.shrink) {
closeShade(() => {
config.setLayout('menuCollapse', true)
})
}
}
/**
* 处理后台的路由
*/
export const handleAdminRoute = (routes: any) => {
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
addRouteAll(viewsComponent, routes, adminBaseRoute.name as string)
const menuAdminBaseRoute = (adminBaseRoute.path as string) + '/'
// 更新stores中的路由菜单数据
const navTabs = useNavTabs()
navTabs.setTabsViewRoutes(handleMenuRule(routes, menuAdminBaseRoute))
navTabs.fillAuthNode(handleAuthNode(routes, menuAdminBaseRoute))
}
/**
* 获取菜单的paths
*/
export const getMenuPaths = (menus: RouteRecordRaw[]): string[] => {
let menuPaths: string[] = []
menus.forEach(item => {
menuPaths.push(item.path)
if (item.children && item.children.length > 0) {
menuPaths = menuPaths.concat(getMenuPaths(item.children))
}
})
return menuPaths
}
/**
* 后台的菜单处理
*/
const handleMenuRule = (routes: any, pathPrefix = '/', type = ['menu', 'menu_dir']) => {
const menuRule: RouteRecordRaw[] = []
for (const key in routes) {
if (routes[key].extend == 'add_rules_only') {
continue
}
if (!type.includes(routes[key].type)) {
continue
}
if (routes[key].type == 'menu_dir' && routes[key].children && !routes[key].children.length) {
continue
}
if (
['route', 'menu', 'nav_user_menu', 'nav'].includes(routes[key].type) &&
((routes[key].menu_type == 'tab' && !routes[key].component) ||
(['link', 'iframe'].includes(routes[key].menu_type) && !routes[key].url))
) {
continue
}
const currentPath = ['link', 'iframe'].includes(routes[key].menu_type)
? routes[key].url
: pathPrefix + routes[key].path
let children: RouteRecordRaw[] = []
if (routes[key].children && routes[key].children.length > 0) {
children = handleMenuRule(routes[key].children, pathPrefix, type)
}
menuRule.push({
path: currentPath,
name: routes[key].name,
component: routes[key].component,
meta: {
id: routes[key].id,
title: routes[key].title,
icon: routes[key].icon,
keepalive: routes[key].keepalive,
menu_type: routes[key].menu_type,
type: routes[key].type
},
children: children
})
}
return menuRule
}
/**
* 处理权限节点
* @param routes 路由数据
* @param prefix 节点前缀
* @returns 组装好的权限节点
*/
const handleAuthNode = (routes: any, prefix = '/') => {
const authNode: Map<string, string[]> = new Map([])
assembleAuthNode(routes, authNode, prefix, prefix)
return authNode
}
const assembleAuthNode = (routes: any, authNode: Map<string, string[]>, prefix = '/', parent = '/') => {
const authNodeTemp = []
for (const key in routes) {
if (routes[key].type == 'button') authNodeTemp.push(prefix + routes[key].name)
if (routes[key].children && routes[key].children.length > 0) {
assembleAuthNode(routes[key].children, authNode, prefix, prefix + routes[key].name)
}
}
if (authNodeTemp && authNodeTemp.length > 0) {
authNode.set(parent, authNodeTemp)
}
}
/**
* 动态添加路由-带子路由
* @param viewsComponent
* @param routes
* @param parentName
* @param analyticRelation 根据 name 从已注册路由分析父级路由
*/
export const addRouteAll = (
viewsComponent: Record<string, any>,
routes: any,
parentName: string,
analyticRelation = false
) => {
for (const idx in routes) {
if (routes[idx].extend == 'add_menu_only') {
continue
}
if (
(routes[idx].menu_type == 'tab' && viewsComponent[routes[idx].component]) ||
routes[idx].menu_type == 'iframe'
) {
addRouteItem(viewsComponent, routes[idx], parentName, analyticRelation)
}
if (routes[idx].children && routes[idx].children.length > 0) {
addRouteAll(viewsComponent, routes[idx].children, parentName, analyticRelation)
}
}
}
/**
* 动态添加路由
* @param viewsComponent
* @param route
* @param parentName
* @param analyticRelation 根据 name 从已注册路由分析父级路由
*/
export const addRouteItem = (
viewsComponent: Record<string, any>,
route: any,
parentName: string,
analyticRelation: boolean
) => {
let path = '',
component
if (route.menu_type == 'iframe') {
path = (isAdminApp() ? adminBaseRoute.path : '') + '/iframe/' + encodeURIComponent(route.url)
component = () => import('@/layouts/common/router-view/iframe.vue')
} else {
path = parentName ? route.path : '/' + route.path
component = viewsComponent[route.component]
}
if (route.menu_type == 'tab' && analyticRelation) {
const parentNames = getParentNames(route.name)
if (parentNames.length) {
for (const key in parentNames) {
if (router.hasRoute(parentNames[key])) {
parentName = parentNames[key]
break
}
}
}
}
const routeBaseInfo: RouteRecordRaw = {
path: path,
name: route.name,
component: component,
meta: {
...route,
title: route.title,
extend: route.extend,
icon: route.icon,
keepalive: route.keepalive,
menu_type: route.menu_type,
type: route.type,
url: route.url,
addtab: true
}
}
if (parentName) {
router.addRoute(parentName, routeBaseInfo)
} else {
router.addRoute(routeBaseInfo)
}
}
/**
* 根据name字符串，获取父级name组合的数组
* @param name
*/
const getParentNames = (name: string) => {
const names = compact(name.split('/'))
const tempNames = []
const parentNames = []
for (const key in names) {
tempNames.push(names[key])
if (parseInt(key) != names.length - 1) {
parentNames.push(tempNames.join('/'))
}
}
return reverse(parentNames)
}

2
src/views/cockpit/TerminalLog.vue
View File

@@ -23,7 +23,7 @@ const prop = defineProps({
const dictData = useDictData()
const fontdveoption = dictData.getBasicData('Dev_Ops')
const tableStore = new TableStore({
const tableStore:any = new TableStore({
url: '/device-boot/pqsTerminalLogs/getList',
method: 'POST',
column: [

2
src/views/pqs/harmonicMonitoring/detailed/pollutionReport/SubstationTab.vue
View File

@@ -399,7 +399,7 @@ const handleCurrentChange = (val: number) => {
const exportEvent = () => {
const allFilteredData = filteredData.value
tableRef.value.exportData({
filename: '场战级评估-污染值报告',
filename: '场站级评估-污染值报告',
sheetName: 'Sheet1',
type: 'xlsx',
useStyle: true,

22
src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
View File

@@ -652,7 +652,7 @@ const initRadioCharts = () => {
echartsData1.value.options.series[i].center = ['50%', '50%']
}
}
const initEcharts = (color: string, key: number) => {
const initEcharts = (color: string, key: number, name: string) => {
return {
options: {
tooltip: {},
@@ -731,7 +731,7 @@ const initEcharts = (color: string, key: number) => {
data: [
{
value: 0,
name: 'A相',
name: name,
itemStyle: {
color: color
}
@@ -744,14 +744,14 @@ const initEcharts = (color: string, key: number) => {
}
//渲染echarts
const init = () => {
const url = (localStorage.getItem('WebSocketUrl') || 'ws://192.168.1.68:10407/api/pushMessage/')
echartsDataV1.value = initEcharts('#DAA520', 0)
echartsDataV2.value = initEcharts('#2E8B57', 0)
echartsDataV3.value = initEcharts('#A52a2a', 0)
const url = localStorage.getItem('WebSocketUrl') || 'ws://192.168.1.68:10407/api/pushMessage/'
echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')
echartsDataA1.value = initEcharts('#DAA520', 1)
echartsDataA2.value = initEcharts('#2E8B57', 1)
echartsDataA3.value = initEcharts('#A52a2a', 1)
echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
if (!dataSocket.socketServe) {
console.error('WebSocket 客户端实例不存在')
@@ -764,9 +764,7 @@ const url = (localStorage.getItem('WebSocketUrl') || 'ws://192.168.1.68:10407/ap
})
}
let pids = monitoringPoint.state.pid.split(',')
dataSocket.socketServe.connect(
`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`
)
dataSocket.socketServe.connect(`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
dataSocket.socketServe.registerCallBack('message', (res: any) => {
txtContent.value = res.value
let data = JSON.parse(res.value)

3913
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
View File

File diff suppressed because it is too large Load Diff

342
src/views/pqs/harmonicMonitoring/reportForms/statistics/index.vue
View File

@@ -1,170 +1,172 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
v-if="showTree"
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" datePicker @selectChange="selectChange">
<template v-slot:select>
<el-form-item label="模板策略">
<el-select v-model="Template" @change="changetype" placeholder="请选择模版" value-key="id">
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报表类型">
<el-input readonly type="text" value="分析报表"></el-input>
<!-- <el-select-->
<!-- :disabled="true"-->
<!-- v-model="reportForm"-->
<!-- :popper-append-to-body="false"-->
<!-- placeholder="请选择报表类型"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in reportFormList"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- ></el-option>-->
<!-- </el-select>-->
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
</template>
</TableHeader>
<div class="box">
<div id="luckysheet" :style="`height: calc(${tableStore.table.height} + 45px)`"></div>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
defineOptions({
name: 'harmonic-boot/xieboReport'
})
const showTree = ref(false)
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')
const templatePolicy: any = ref([])
const reportFormList: any = ref([
{
value: '1',
label: '分析报表'
},
{
value: '2',
label: '统计报表'
},
{
value: '3',
label: '自定义报表'
}
])
const tableStore = new TableStore({
url: '/harmonic-boot/customReport/getCustomReport',
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params.tempId = Template.value.id
tableStore.table.params.lineId = dotList.value.id
},
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
item.celldata.forEach((k: any) => {
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
})
})
console.log(tableStore.table.data)
setTimeout(() => {
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
data: tableStore.table.data
})
}, 10)
}
})
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
getTemplateByDept({ id: dictData.state.area[0].id })
.then((res: any) => {
templatePolicy.value = res.data
Template.value = res.data[0]
reportForm.value = res.data[0]?.reportForm
showTree.value = true
})
.catch((err: any) => {
showTree.value = true
})
const changetype = (val: any) => {
reportForm.value = val.reportForm
}
const selectChange = () => {
console.log('🚀 ~ selectChange ~ tableStore.table.data.lnegth :', tableStore.table.data.length)
if (tableStore.table.data.length != 0) {
setTimeout(() => {
luckysheet && luckysheet?.resize()
}, 10)
}
}
const handleNodeClick = (data: any, node: any) => {
if (data.level == 6) {
dotList.value = data
tableStore.index()
}
}
const exportEvent = () => {
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.box {
padding: 10px;
}
</style>
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
v-if="showTree"
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" datePicker @selectChange="selectChange">
<template v-slot:select>
<el-form-item label="模板策略">
<el-select v-model="Template" @change="changetype" placeholder="请选择模版" value-key="id">
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报表类型">
<el-input readonly type="text" value="分析报表"></el-input>
<!-- <el-select-->
<!-- :disabled="true"-->
<!-- v-model="reportForm"-->
<!-- :popper-append-to-body="false"-->
<!-- placeholder="请选择报表类型"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in reportFormList"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- ></el-option>-->
<!-- </el-select>-->
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
</template>
</TableHeader>
<div class="box">
<div id="luckysheet" :style="`height: calc(${tableStore.table.height} + 45px)`"></div>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
defineOptions({
name: 'harmonic-boot/xieboReport'
})
const showTree = ref(false)
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')
const templatePolicy: any = ref([])
const reportFormList: any = ref([
{
value: '1',
label: '分析报表'
},
{
value: '2',
label: '统计报表'
},
{
value: '3',
label: '自定义报表'
}
])
const tableStore = new TableStore({
url: '/harmonic-boot/customReport/getCustomReport',
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params.tempId = Template.value.id
tableStore.table.params.lineId = dotList.value.id
},
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
item.celldata.forEach((k: any) => {
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
})
})
console.log(tableStore.table.data)
setTimeout(() => {
luckysheet.create({
container: 'luckysheet',
title: '', // 表 头名
lang: 'zh', // 中文
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: true, // 是否显示底部sheet按钮
allowEdit: false, // 禁止所有编辑操作（必填）
data: tableStore.table.data
})
}, 10)
}
})
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
getTemplateByDept({ id: dictData.state.area[0].id })
.then((res: any) => {
templatePolicy.value = res.data
Template.value = res.data[0]
reportForm.value = res.data[0]?.reportForm
showTree.value = true
})
.catch((err: any) => {
showTree.value = true
})
const changetype = (val: any) => {
reportForm.value = val.reportForm
}
const selectChange = () => {
console.log('🚀 ~ selectChange ~ tableStore.table.data.lnegth :', tableStore.table.data.length)
if (tableStore.table.data.length != 0) {
setTimeout(() => {
luckysheet && luckysheet?.resize()
}, 10)
}
}
const handleNodeClick = (data: any, node: any) => {
if (data.level == 6) {
dotList.value = data
tableStore.index()
}
}
const exportEvent = () => {
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.box {
padding: 10px;
}
</style>

676
src/views/user/login.vue
View File

@@ -1,338 +1,338 @@
<template>
<div @keyup.enter="onSubmit(formRef)">
<div @contextmenu.stop="" id="bubble" class="bubble">
<canvas id="bubble-canvas" class="bubble-canvas"></canvas>
</div>
<div class="login-image"></div>
<div class="login-container-form">
<div class="title-container">
<div class="title">
<span style="font-size: 28px">{{ getThemeList.name || '电能质量监测系统' }}</span>
</div>
</div>
<el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
<el-form-item prop="username">
<el-input
ref="usernameRef"
v-model="form.username"
type="text"
clearable
placeholder="用户名"
autocomplete="off"
>
<template #prefix>
<!-- <span class="iconfont icon-yonghu" style="color: var(--el-color-primary)"></span> -->
<Icon name="fa fa-user" style="color: var(--el-color-primary); font-size: 16px" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
ref="passwordRef"
v-model="form.password"
type="password"
placeholder="密码"
autocomplete="off"
>
<template #prefix>
<Icon name="local-password" style="color: var(--el-color-primary); font-size: 16px" />
<!-- <span class="iconfont icon-mima" style="color: var(--el-color-primary)"></span> -->
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button
:loading="state.submitLoading"
class="submit-btn"
round
type="info"
@click="onSubmit(formRef)"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
<!-- <div class="copy-right">
<span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
<br />
<img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />
<span>　　苏公网安备 32011502011902号</span>
</div> -->
<PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
</div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import { ElMessage } from 'element-plus'
import { gongkey, login,getSysConfig } from '@/api/user-boot/user'
import { useAdminInfo } from '@/stores/adminInfo'
import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage'
import { getTheme } from '@/api/systerm'
import { useConfig } from '@/stores/config'
import PopupUpdatePwd from './popupUpdatePwd.vue'
const router = useRouter()
let timer: number
const configStore = useConfig()
const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const userInfo = useAdminInfo()
Local.remove(ADMIN_INFO)
userInfo.removeToken()
const getThemeList: any = ref([])
interface RuleForm {
username: string
password: string
}
const state = reactive({
showCaptcha: false,
submitLoading: false
})
const form = reactive({
username: '',
password: ''
})
const rules = reactive<FormRules<RuleForm>>({
username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
})
const focusInput = () => {
if (form.username === '') {
usernameRef.value!.focus()
} else if (form.password === '') {
passwordRef.value!.focus()
}
}
onMounted(() => {
timer = window.setTimeout(() => {
pageBubble.init()
}, 0)
})
onBeforeUnmount(() => {
clearTimeout(timer)
pageBubble.removeListeners()
})
getTheme().then(res => {
document.title = res.data.name || '电能质量在线监测系统'
let list: any = [
'elementUiPrimary',
'tableHeaderBackground',
'tableHeaderColor',
'tableCurrent',
'menuBackground',
'menuColor',
'menuTopBarBackground',
'menuActiveBackground',
'menuActiveColor',
'headerBarTabColor',
'headerBarBackground'
]
getThemeList.value = res.data
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
for (let i = 0; i < list.length; i++) {
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
}
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
})
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
state.submitLoading = true
login({
username: form.username,
password: form.password,
grant_type: 'captcha',
imageCode: '',
verifyCode: 0
})
.then(res => {
userInfo.dataFill(res.data)
state.submitLoading = false
getSysConfig().then(res => {
window.localStorage.setItem('sysdata', JSON.stringify(res.data))
})
router.push({
path: '/'
})
})
.catch(err => {
if (err.code === 'A0101' && err.message === '登录认证,密码失效，请重置') {
popupUpdatePwdRef.value.open(form.username)
}
})
setTimeout(() => {
state.submitLoading = false
}, 500)
}
})
}
</script>
<style scoped lang="scss">
.bubble {
position: relative;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: var(--el-color-primary) !important;
background-position: center 110px;
background-repeat: repeat;
background-size: 100%;
background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
}
.login-image {
position: absolute;
top: 50%;
left: 20%;
min-width: 45%;
min-height: 80%;
background: url('../../assets/login/login2.png') no-repeat center center;
background-size: contain;
transform: translate(-15%, -50%);
// box-shadow: 0 0 0 #011b2bab;
}
.form-item-icon {
height: auto;
}
.login-container-form {
position: absolute;
top: 50%;
left: 85%;
width: 500px;
height: auto;
border-radius: 30px;
transform: translate(-85%, -50%);
box-shadow: 3px 3px 2px 2px #011b2bab;
.title-container {
position: relative;
width: 398px;
max-width: 100%;
padding: 20px 0 0;
margin: 0 auto;
.title {
margin-bottom: 20px;
font-size: 33px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-align: center;
& :v-deep .svg-icon {
// color: $;
}
.logo {
width: 46px;
height: 46px;
margin-right: 10px;
vertical-align: middle;
}
}
}
}
.login-form {
position: relative;
width: 368px;
max-width: 100%;
//padding: 20px 0 0;
margin: 0 auto;
margin-bottom: 20px;
overflow: hidden;
&.el-input {
input {
height: 40px;
padding-right: 40px;
padding-left: 40px;
line-height: 40px;
border-radius: 5px;
}
.el-input__prefix,
.el-input__suffix {
width: 40px;
line-height: 40px;
.svg-icon {
font-size: 16px;
vertical-align: -0.25em;
}
}
.el-input__prefix {
left: 0;
}
.el-input__suffix {
right: 0;
}
}
}
.copy-right {
position: absolute;
bottom: 10px;
width: 100%;
font-size: 14px;
color: rgb(233, 229, 229);
text-align: center;
}
:v-deep.el-form-item--large {
margin-bottom: 15px;
}
.submit-btn {
width: 100%;
margin-top: 0px;
margin-bottom: 20px;
background: var(--el-color-primary-light-3);
// background: #009688;
//background: #4d6ea1;
border-radius: 0;
&:hover {
background: var(--el-color-primary-light-5);
}
}
@media screen and (max-width: 720px) {
.login {
display: flex;
align-items: center;
justify-content: center;
.login-box {
width: 340px;
margin-top: 0;
}
}
}
@media screen and (max-height: 800px) {
.login .login-box {
margin-bottom: 0;
}
}
</style>
<template>
<div @keyup.enter="onSubmit(formRef)">
<div @contextmenu.stop="" id="bubble" class="bubble">
<canvas id="bubble-canvas" class="bubble-canvas"></canvas>
</div>
<div class="login-image"></div>
<div class="login-container-form">
<div class="title-container">
<div class="title">
<span style="font-size: 28px">{{ getThemeList.name || '电能质量监测系统' }}</span>
</div>
</div>
<el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
<el-form-item prop="username">
<el-input
ref="usernameRef"
v-model="form.username"
type="text"
clearable
placeholder="用户名"
autocomplete="off"
>
<template #prefix>
<!-- <span class="iconfont icon-yonghu" style="color: var(--el-color-primary)"></span> -->
<Icon name="fa fa-user" style="color: var(--el-color-primary); font-size: 16px" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
ref="passwordRef"
v-model="form.password"
type="password"
placeholder="密码"
autocomplete="off"
>
<template #prefix>
<Icon name="local-password" style="color: var(--el-color-primary); font-size: 16px" />
<!-- <span class="iconfont icon-mima" style="color: var(--el-color-primary)"></span> -->
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button
:loading="state.submitLoading"
class="submit-btn"
round
type="info"
@click="onSubmit(formRef)"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
<!-- <div class="copy-right">
<span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
<br />
<img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />
<span>　　苏公网安备 32011502011902号</span>
</div> -->
<PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
</div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import { ElMessage } from 'element-plus'
import { gongkey, login,getSysConfig } from '@/api/user-boot/user'
import { useAdminInfo } from '@/stores/adminInfo'
import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage'
import { getTheme } from '@/api/systerm'
import { useConfig } from '@/stores/config'
import PopupUpdatePwd from './popupUpdatePwd.vue'
const router = useRouter()
let timer: number
const configStore = useConfig()
const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const userInfo = useAdminInfo()
Local.remove(ADMIN_INFO)
userInfo.removeToken()
const getThemeList: any = ref([])
interface RuleForm {
username: string
password: string
}
const state = reactive({
showCaptcha: false,
submitLoading: false
})
const form = reactive({
username: '',
password: ''
})
const rules = reactive<FormRules<RuleForm>>({
username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
})
const focusInput = () => {
if (form.username === '') {
usernameRef.value!.focus()
} else if (form.password === '') {
passwordRef.value!.focus()
}
}
onMounted(() => {
timer = window.setTimeout(() => {
pageBubble.init()
}, 0)
})
onBeforeUnmount(() => {
clearTimeout(timer)
pageBubble.removeListeners()
})
getTheme().then(res => {
document.title = res.data.name || '电能质量在线监测系统'
let list: any = [
'elementUiPrimary',
'tableHeaderBackground',
'tableHeaderColor',
'tableCurrent',
'menuBackground',
'menuColor',
'menuTopBarBackground',
'menuActiveBackground',
'menuActiveColor',
'headerBarTabColor',
'headerBarBackground'
]
getThemeList.value = res.data
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
for (let i = 0; i < list.length; i++) {
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
}
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
})
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
state.submitLoading = true
login({
username: form.username,
password: form.password,
grant_type: 'captcha',
imageCode: '',
verifyCode: 0
})
.then(res => {
userInfo.dataFill(res.data)
state.submitLoading = false
getSysConfig().then(res => {
window.localStorage.setItem('sysdata', JSON.stringify(res.data))
})
router.push({
path: '/'
})
})
.catch(err => {
if (err.code === 'A0101' && err.message === '登录认证,密码失效，请重置') {
popupUpdatePwdRef.value.open(form.username)
}
})
setTimeout(() => {
state.submitLoading = false
}, 500)
}
})
}
</script>
<style scoped lang="scss">
.bubble {
position: relative;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: var(--el-color-primary) !important;
background-position: center 110px;
background-repeat: repeat;
background-size: 100%;
background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
}
.login-image {
position: absolute;
top: 50%;
left: 20%;
min-width: 45%;
min-height: 80%;
background: url('../../assets/login/login2.png') no-repeat center center;
background-size: contain;
transform: translate(-15%, -50%);
// box-shadow: 0 0 0 #011b2bab;
}
.form-item-icon {
height: auto;
}
.login-container-form {
position: absolute;
top: 50%;
left: 85%;
width: 500px;
height: auto;
border-radius: 30px;
transform: translate(-85%, -50%);
box-shadow: 3px 3px 2px 2px #011b2bab;
.title-container {
position: relative;
width: 398px;
max-width: 100%;
padding: 20px 0 0;
margin: 0 auto;
.title {
margin-bottom: 20px;
font-size: 33px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-align: center;
& :v-deep .svg-icon {
// color: $;
}
.logo {
width: 46px;
height: 46px;
margin-right: 10px;
vertical-align: middle;
}
}
}
}
.login-form {
position: relative;
width: 368px;
max-width: 100%;
//padding: 20px 0 0;
margin: 0 auto;
margin-bottom: 20px;
overflow: hidden;
&.el-input {
input {
height: 40px;
padding-right: 40px;
padding-left: 40px;
line-height: 40px;
border-radius: 5px;
}
.el-input__prefix,
.el-input__suffix {
width: 40px;
line-height: 40px;
.svg-icon {
font-size: 16px;
vertical-align: -0.25em;
}
}
.el-input__prefix {
left: 0;
}
.el-input__suffix {
right: 0;
}
}
}
.copy-right {
position: absolute;
bottom: 10px;
width: 100%;
font-size: 14px;
color: rgb(233, 229, 229);
text-align: center;
}
:v-deep.el-form-item--large {
margin-bottom: 15px;
}
.submit-btn {
width: 100%;
margin-top: 0px;
margin-bottom: 20px;
background: var(--el-color-primary-light-3);
// background: #009688;
//background: #4d6ea1;
border-radius: 0;
&:hover {
background: var(--el-color-primary-light-5);
}
}
@media screen and (max-width: 720px) {
.login {
display: flex;
align-items: center;
justify-content: center;
.login-box {
width: 340px;
margin-top: 0;
}
}
}
@media screen and (max-height: 800px) {
.login .login-box {
margin-bottom: 0;
}
}
</style>