Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern
# Conflicts: # pnpm-lock.yaml
This commit is contained in:
sjl
3
src/components/Backtop/index.ts
Normal file
3
src/components/Backtop/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import Backtop from './src/Backtop.vue'
|
||||
|
||||
export { Backtop }
|
||||
17
src/components/Backtop/src/Backtop.vue
Normal file
17
src/components/Backtop/src/Backtop.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
import { ElBacktop } from 'element-plus'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'BackTop' })
|
||||
|
||||
const { getPrefixCls, variables } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('backtop')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElBacktop
|
||||
:class="`${prefixCls}-backtop`"
|
||||
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
|
||||
/>
|
||||
</template>
|
||||
111
src/components/RouterSearch/index.vue
Normal file
111
src/components/RouterSearch/index.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<ElDialog v-if="isModal" v-model="showSearch" :show-close="false" title="菜单搜索">
|
||||
<el-select
|
||||
filterable
|
||||
:reserve-keyword="false"
|
||||
remote
|
||||
placeholder="请输入菜单内容"
|
||||
:remote-method="remoteMethod"
|
||||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</ElDialog>
|
||||
<div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
|
||||
<Icon icon="ep:search" />
|
||||
<el-select
|
||||
filterable
|
||||
:reserve-keyword="false"
|
||||
remote
|
||||
placeholder="请输入菜单内容"
|
||||
:remote-method="remoteMethod"
|
||||
class="overflow-hidden transition-all-600"
|
||||
:class="showTopSearch ? '!w-220px ml2' : '!w-0'"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
isModal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter() // 路由对象
|
||||
const showSearch = ref(false) // 是否显示弹框
|
||||
const showTopSearch = ref(false) // 是否显示顶部搜索框
|
||||
const value: Ref = ref('') // 用户输入的值
|
||||
|
||||
const routers = router.getRoutes() // 路由对象
|
||||
const options = computed(() => {
|
||||
// 提示选项
|
||||
if (!value.value) {
|
||||
return []
|
||||
}
|
||||
const list = routers.filter((item: any) => {
|
||||
if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
return list.map((item) => {
|
||||
return {
|
||||
label: `${item.meta.title}${item.path}`,
|
||||
value: item.path
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function remoteMethod(data) {
|
||||
// 这里可以执行相应的操作（例如打开搜索框等）
|
||||
value.value = data
|
||||
}
|
||||
|
||||
function handleChange(path) {
|
||||
router.push({ path })
|
||||
hiddenTopSearch()
|
||||
}
|
||||
|
||||
function hiddenTopSearch() {
|
||||
showTopSearch.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', listenKey)
|
||||
window.addEventListener('click', hiddenTopSearch)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', listenKey)
|
||||
window.removeEventListener('click', hiddenTopSearch)
|
||||
})
|
||||
|
||||
// 监听 ctrl + k
|
||||
function listenKey(event) {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
|
||||
showSearch.value = !showSearch.value
|
||||
// 这里可以执行相应的操作（例如打开搜索框等）
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openSearch: () => {
|
||||
showSearch.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,282 +1,282 @@
|
||||
<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.trim="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.trim="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>
|
||||
|
||||
@@ -1,414 +1,414 @@
|
||||
<script lang="ts">
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import type { modelValueTypes, InputAttr, InputData } from '@/components/baInput'
|
||||
import { createVNode, resolveComponent, defineComponent, computed, reactive } from 'vue'
|
||||
import { inputTypes } from '@/components/baInput'
|
||||
import Array from '@/components/baInput/components/array.vue'
|
||||
import RemoteSelect from '@/components/baInput/components/remoteSelect.vue'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import Editor from '@/components/baInput/components/editor.vue'
|
||||
import { getArea } from '@/api/common'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baInput',
|
||||
props: {
|
||||
// 输入框类型,支持的输入框见 inputTypes
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value: string) => {
|
||||
return inputTypes.includes(value)
|
||||
},
|
||||
},
|
||||
// 双向绑定值
|
||||
modelValue: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
// 输入框的附加属性
|
||||
attr: {
|
||||
type: Object as PropType<InputAttr>,
|
||||
default: () => {},
|
||||
},
|
||||
// 额外数据,radio、checkbox的选项等数据
|
||||
data: {
|
||||
type: Object as PropType<InputData>,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup(props, { emit }) {
|
||||
const onValueUpdate = (value: modelValueTypes) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// 子级元素属性
|
||||
let childrenAttr = props.data && props.data.childrenAttr ? props.data.childrenAttr : {}
|
||||
|
||||
// string number textarea password
|
||||
const sntp = () => {
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-input'), {
|
||||
type: props.type == 'string' ? 'text' : props.type,
|
||||
...props.attr,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
// radio checkbox
|
||||
const rc = () => {
|
||||
if (!props.data || !props.data.content) {
|
||||
console.warn('请传递 ' + props.type + '的 content')
|
||||
}
|
||||
let vNode: VNode[] = []
|
||||
for (const key in props.data.content) {
|
||||
vNode.push(
|
||||
createVNode(
|
||||
resolveComponent('el-' + props.type),
|
||||
{
|
||||
label: key,
|
||||
...childrenAttr,
|
||||
},
|
||||
() => props.data.content[key]
|
||||
)
|
||||
)
|
||||
}
|
||||
return () => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.type == 'radio') {
|
||||
if (props.modelValue == undefined) return ''
|
||||
return '' + props.modelValue
|
||||
} else {
|
||||
let modelValueArr: anyObj = []
|
||||
for (const key in props.modelValue) {
|
||||
modelValueArr[key] = '' + props.modelValue[key]
|
||||
}
|
||||
return modelValueArr
|
||||
}
|
||||
})
|
||||
return createVNode(
|
||||
resolveComponent('el-' + props.type + '-group'),
|
||||
{
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
},
|
||||
() => vNode
|
||||
)
|
||||
}
|
||||
}
|
||||
// select selects
|
||||
const select = () => {
|
||||
let vNode: VNode[] = []
|
||||
if (!props.data || !props.data.content) {
|
||||
console.warn('请传递 ' + props.type + '的 content')
|
||||
}
|
||||
for (const key in props.data.content) {
|
||||
vNode.push(
|
||||
createVNode(resolveComponent('el-option'), {
|
||||
key: key,
|
||||
label: props.data.content[key],
|
||||
value: key,
|
||||
...childrenAttr,
|
||||
})
|
||||
)
|
||||
}
|
||||
return () => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.type == 'select') {
|
||||
if (props.modelValue == undefined) return ''
|
||||
return '' + props.modelValue
|
||||
} else {
|
||||
let modelValueArr: anyObj = []
|
||||
for (const key in props.modelValue) {
|
||||
modelValueArr[key] = '' + props.modelValue[key]
|
||||
}
|
||||
return modelValueArr
|
||||
}
|
||||
})
|
||||
return createVNode(
|
||||
resolveComponent('el-select'),
|
||||
{
|
||||
class: 'w100',
|
||||
multiple: props.type == 'select' ? false : true,
|
||||
clearable: true,
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
},
|
||||
() => vNode
|
||||
)
|
||||
}
|
||||
}
|
||||
// datetime
|
||||
const datetime = () => {
|
||||
let valueFormat = 'YYYY-MM-DD HH:mm:ss'
|
||||
switch (props.type) {
|
||||
case 'date':
|
||||
valueFormat = 'YYYY-MM-DD'
|
||||
break
|
||||
case 'year':
|
||||
valueFormat = 'YYYY'
|
||||
break
|
||||
}
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-date-picker'), {
|
||||
class: 'w100',
|
||||
type: props.type,
|
||||
'value-format': valueFormat,
|
||||
...props.attr,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
// remoteSelect remoteSelects
|
||||
const remoteSelect = () => {
|
||||
return () =>
|
||||
createVNode(RemoteSelect, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
multiple: props.type == 'remoteSelect' ? false : true,
|
||||
...props.attr,
|
||||
})
|
||||
}
|
||||
|
||||
const buildFun = new Map([
|
||||
['string', sntp],
|
||||
['number', sntp],
|
||||
['textarea', sntp],
|
||||
['password', sntp],
|
||||
['radio', rc],
|
||||
['checkbox', rc],
|
||||
[
|
||||
'switch',
|
||||
() => {
|
||||
const valueType = computed(() => typeof props.modelValue)
|
||||
const valueComputed = computed(() => {
|
||||
if (valueType.value === 'boolean') {
|
||||
return props.modelValue
|
||||
} else {
|
||||
let valueTmp = parseInt(props.modelValue as string)
|
||||
return isNaN(valueTmp) || valueTmp <= 0 ? false : true
|
||||
}
|
||||
})
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-switch'), {
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': (value: boolean) => {
|
||||
let newValue: boolean | string | number = value
|
||||
switch (valueType.value) {
|
||||
case 'string':
|
||||
newValue = value ? '1' : '0'
|
||||
break
|
||||
case 'number':
|
||||
newValue = value ? 1 : 0
|
||||
}
|
||||
emit('update:modelValue', newValue)
|
||||
},
|
||||
})
|
||||
},
|
||||
],
|
||||
['datetime', datetime],
|
||||
[
|
||||
'year',
|
||||
() => {
|
||||
return () => {
|
||||
const valueComputed = computed(() => (!props.modelValue ? null : '' + props.modelValue))
|
||||
return createVNode(resolveComponent('el-date-picker'), {
|
||||
class: 'w100',
|
||||
type: props.type,
|
||||
'value-format': 'YYYY',
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
},
|
||||
],
|
||||
['date', datetime],
|
||||
[
|
||||
'time',
|
||||
() => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.modelValue instanceof Date) {
|
||||
return props.modelValue
|
||||
} else if (!props.modelValue) {
|
||||
return ''
|
||||
} else {
|
||||
let date = new Date()
|
||||
return new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + props.modelValue)
|
||||
}
|
||||
})
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-time-picker'), {
|
||||
class: 'w100',
|
||||
clearable: true,
|
||||
format: 'HH:mm:ss',
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
},
|
||||
],
|
||||
['select', select],
|
||||
['selects', select],
|
||||
[
|
||||
'array',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(Array, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
['remoteSelect', remoteSelect],
|
||||
['remoteSelects', remoteSelect],
|
||||
[
|
||||
'city',
|
||||
() => {
|
||||
type Node = { value?: number; label?: string; leaf?: boolean }
|
||||
let maxLevel = props.data && props.data.level ? props.data.level - 1 : 2
|
||||
const lastLazyValue: {
|
||||
value: string | number[] | unknown
|
||||
nodes: Node[]
|
||||
key: string
|
||||
currentRequest: any
|
||||
} = reactive({
|
||||
value: 'ready',
|
||||
nodes: [],
|
||||
key: '',
|
||||
currentRequest: null,
|
||||
})
|
||||
|
||||
// 请求到的node备份-s
|
||||
let nodeEbak: anyObj = {}
|
||||
const getNodes = (level: number, key: string) => {
|
||||
if (nodeEbak[level] && nodeEbak[level][key]) {
|
||||
return nodeEbak[level][key]
|
||||
}
|
||||
return false
|
||||
}
|
||||
const setNodes = (level: number, key: string, nodes: Node[] = []) => {
|
||||
if (!nodeEbak[level]) {
|
||||
nodeEbak[level] = {}
|
||||
}
|
||||
nodeEbak[level][key] = nodes
|
||||
}
|
||||
// 请求到的node备份-e
|
||||
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-cascader'), {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
class: 'w100',
|
||||
clearable: true,
|
||||
props: {
|
||||
lazy: true,
|
||||
lazyLoad(node: any, resolve: any) {
|
||||
// lazyLoad会频繁触发,在本地存储请求结果,供重复触发时直接读取
|
||||
const { level, pathValues } = node
|
||||
let key = pathValues.join(',')
|
||||
key = key ? key : 'init'
|
||||
|
||||
let locaNode = getNodes(level, key)
|
||||
if (locaNode) {
|
||||
return resolve(locaNode)
|
||||
}
|
||||
|
||||
if (lastLazyValue.key == key && lastLazyValue.value == props.modelValue) {
|
||||
if (lastLazyValue.currentRequest) {
|
||||
return lastLazyValue.currentRequest
|
||||
}
|
||||
return resolve(lastLazyValue.nodes)
|
||||
}
|
||||
|
||||
let nodes: Node[] = []
|
||||
lastLazyValue.key = key
|
||||
lastLazyValue.value = props.modelValue
|
||||
lastLazyValue.currentRequest = getArea(pathValues).then((res) => {
|
||||
let toStr = false
|
||||
if (props.modelValue && typeof (props.modelValue as anyObj)[0] === 'string') {
|
||||
toStr = true
|
||||
}
|
||||
for (const key in res.data) {
|
||||
if (toStr) {
|
||||
res.data[key].value = res.data[key].value.toString()
|
||||
}
|
||||
res.data[key].leaf = level >= maxLevel
|
||||
nodes.push(res.data[key])
|
||||
}
|
||||
lastLazyValue.nodes = nodes
|
||||
lastLazyValue.currentRequest = null
|
||||
setNodes(level, key, nodes)
|
||||
resolve(nodes)
|
||||
})
|
||||
},
|
||||
},
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
['image', upload],
|
||||
['images', upload],
|
||||
['file', upload],
|
||||
['files', upload],
|
||||
[
|
||||
'icon',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(IconSelector, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'color',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-color-picker'), {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'editor',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(Editor, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'default',
|
||||
() => {
|
||||
console.warn('暂不支持' + props.type + '的输入框类型，你可以自行在 BaInput 组件内添加逻辑')
|
||||
},
|
||||
],
|
||||
])
|
||||
|
||||
let action = buildFun.get(props.type) || buildFun.get('default')
|
||||
return action!.call(this)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-upload-image :deep(.el-upload--picture-card) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ba-upload-file :deep(.el-upload-list) {
|
||||
margin-left: -10px;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import type { modelValueTypes, InputAttr, InputData } from '@/components/baInput'
|
||||
import { createVNode, resolveComponent, defineComponent, computed, reactive } from 'vue'
|
||||
import { inputTypes } from '@/components/baInput'
|
||||
import Array from '@/components/baInput/components/array.vue'
|
||||
import RemoteSelect from '@/components/baInput/components/remoteSelect.vue'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import Editor from '@/components/baInput/components/editor.vue'
|
||||
// import { getArea } from '@/api/common'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'baInput',
|
||||
props: {
|
||||
// 输入框类型,支持的输入框见 inputTypes
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value: string) => {
|
||||
return inputTypes.includes(value)
|
||||
},
|
||||
},
|
||||
// 双向绑定值
|
||||
modelValue: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
// 输入框的附加属性
|
||||
attr: {
|
||||
type: Object as PropType<InputAttr>,
|
||||
default: () => {},
|
||||
},
|
||||
// 额外数据,radio、checkbox的选项等数据
|
||||
data: {
|
||||
type: Object as PropType<InputData>,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup(props, { emit }) {
|
||||
const onValueUpdate = (value: modelValueTypes) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// 子级元素属性
|
||||
let childrenAttr = props.data && props.data.childrenAttr ? props.data.childrenAttr : {}
|
||||
|
||||
// string number textarea password
|
||||
const sntp = () => {
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-input'), {
|
||||
type: props.type == 'string' ? 'text' : props.type,
|
||||
...props.attr,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
// radio checkbox
|
||||
const rc = () => {
|
||||
if (!props.data || !props.data.content) {
|
||||
console.warn('请传递 ' + props.type + '的 content')
|
||||
}
|
||||
let vNode: VNode[] = []
|
||||
for (const key in props.data.content) {
|
||||
vNode.push(
|
||||
createVNode(
|
||||
resolveComponent('el-' + props.type),
|
||||
{
|
||||
label: key,
|
||||
...childrenAttr,
|
||||
},
|
||||
() => props.data.content[key]
|
||||
)
|
||||
)
|
||||
}
|
||||
return () => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.type == 'radio') {
|
||||
if (props.modelValue == undefined) return ''
|
||||
return '' + props.modelValue
|
||||
} else {
|
||||
let modelValueArr: anyObj = []
|
||||
for (const key in props.modelValue) {
|
||||
modelValueArr[key] = '' + props.modelValue[key]
|
||||
}
|
||||
return modelValueArr
|
||||
}
|
||||
})
|
||||
return createVNode(
|
||||
resolveComponent('el-' + props.type + '-group'),
|
||||
{
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
},
|
||||
() => vNode
|
||||
)
|
||||
}
|
||||
}
|
||||
// select selects
|
||||
const select = () => {
|
||||
let vNode: VNode[] = []
|
||||
if (!props.data || !props.data.content) {
|
||||
console.warn('请传递 ' + props.type + '的 content')
|
||||
}
|
||||
for (const key in props.data.content) {
|
||||
vNode.push(
|
||||
createVNode(resolveComponent('el-option'), {
|
||||
key: key,
|
||||
label: props.data.content[key],
|
||||
value: key,
|
||||
...childrenAttr,
|
||||
})
|
||||
)
|
||||
}
|
||||
return () => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.type == 'select') {
|
||||
if (props.modelValue == undefined) return ''
|
||||
return '' + props.modelValue
|
||||
} else {
|
||||
let modelValueArr: anyObj = []
|
||||
for (const key in props.modelValue) {
|
||||
modelValueArr[key] = '' + props.modelValue[key]
|
||||
}
|
||||
return modelValueArr
|
||||
}
|
||||
})
|
||||
return createVNode(
|
||||
resolveComponent('el-select'),
|
||||
{
|
||||
class: 'w100',
|
||||
multiple: props.type == 'select' ? false : true,
|
||||
clearable: true,
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
},
|
||||
() => vNode
|
||||
)
|
||||
}
|
||||
}
|
||||
// datetime
|
||||
const datetime = () => {
|
||||
let valueFormat = 'YYYY-MM-DD HH:mm:ss'
|
||||
switch (props.type) {
|
||||
case 'date':
|
||||
valueFormat = 'YYYY-MM-DD'
|
||||
break
|
||||
case 'year':
|
||||
valueFormat = 'YYYY'
|
||||
break
|
||||
}
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-date-picker'), {
|
||||
class: 'w100',
|
||||
type: props.type,
|
||||
'value-format': valueFormat,
|
||||
...props.attr,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
// remoteSelect remoteSelects
|
||||
const remoteSelect = () => {
|
||||
return () =>
|
||||
createVNode(RemoteSelect, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
multiple: props.type == 'remoteSelect' ? false : true,
|
||||
...props.attr,
|
||||
})
|
||||
}
|
||||
|
||||
const buildFun = new Map([
|
||||
['string', sntp],
|
||||
['number', sntp],
|
||||
['textarea', sntp],
|
||||
['password', sntp],
|
||||
['radio', rc],
|
||||
['checkbox', rc],
|
||||
[
|
||||
'switch',
|
||||
() => {
|
||||
const valueType = computed(() => typeof props.modelValue)
|
||||
const valueComputed = computed(() => {
|
||||
if (valueType.value === 'boolean') {
|
||||
return props.modelValue
|
||||
} else {
|
||||
let valueTmp = parseInt(props.modelValue as string)
|
||||
return isNaN(valueTmp) || valueTmp <= 0 ? false : true
|
||||
}
|
||||
})
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-switch'), {
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': (value: boolean) => {
|
||||
let newValue: boolean | string | number = value
|
||||
switch (valueType.value) {
|
||||
case 'string':
|
||||
newValue = value ? '1' : '0'
|
||||
break
|
||||
case 'number':
|
||||
newValue = value ? 1 : 0
|
||||
}
|
||||
emit('update:modelValue', newValue)
|
||||
},
|
||||
})
|
||||
},
|
||||
],
|
||||
['datetime', datetime],
|
||||
[
|
||||
'year',
|
||||
() => {
|
||||
return () => {
|
||||
const valueComputed = computed(() => (!props.modelValue ? null : '' + props.modelValue))
|
||||
return createVNode(resolveComponent('el-date-picker'), {
|
||||
class: 'w100',
|
||||
type: props.type,
|
||||
'value-format': 'YYYY',
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
}
|
||||
},
|
||||
],
|
||||
['date', datetime],
|
||||
[
|
||||
'time',
|
||||
() => {
|
||||
const valueComputed = computed(() => {
|
||||
if (props.modelValue instanceof Date) {
|
||||
return props.modelValue
|
||||
} else if (!props.modelValue) {
|
||||
return ''
|
||||
} else {
|
||||
let date = new Date()
|
||||
return new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + props.modelValue)
|
||||
}
|
||||
})
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-time-picker'), {
|
||||
class: 'w100',
|
||||
clearable: true,
|
||||
format: 'HH:mm:ss',
|
||||
...props.attr,
|
||||
modelValue: valueComputed.value,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
})
|
||||
},
|
||||
],
|
||||
['select', select],
|
||||
['selects', select],
|
||||
[
|
||||
'array',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(Array, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
['remoteSelect', remoteSelect],
|
||||
['remoteSelects', remoteSelect],
|
||||
[
|
||||
'city',
|
||||
() => {
|
||||
type Node = { value?: number; label?: string; leaf?: boolean }
|
||||
let maxLevel = props.data && props.data.level ? props.data.level - 1 : 2
|
||||
const lastLazyValue: {
|
||||
value: string | number[] | unknown
|
||||
nodes: Node[]
|
||||
key: string
|
||||
currentRequest: any
|
||||
} = reactive({
|
||||
value: 'ready',
|
||||
nodes: [],
|
||||
key: '',
|
||||
currentRequest: null,
|
||||
})
|
||||
|
||||
// 请求到的node备份-s
|
||||
let nodeEbak: anyObj = {}
|
||||
const getNodes = (level: number, key: string) => {
|
||||
if (nodeEbak[level] && nodeEbak[level][key]) {
|
||||
return nodeEbak[level][key]
|
||||
}
|
||||
return false
|
||||
}
|
||||
const setNodes = (level: number, key: string, nodes: Node[] = []) => {
|
||||
if (!nodeEbak[level]) {
|
||||
nodeEbak[level] = {}
|
||||
}
|
||||
nodeEbak[level][key] = nodes
|
||||
}
|
||||
// 请求到的node备份-e
|
||||
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-cascader'), {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
class: 'w100',
|
||||
clearable: true,
|
||||
props: {
|
||||
lazy: true,
|
||||
lazyLoad(node: any, resolve: any) {
|
||||
// lazyLoad会频繁触发,在本地存储请求结果,供重复触发时直接读取
|
||||
const { level, pathValues } = node
|
||||
let key = pathValues.join(',')
|
||||
key = key ? key : 'init'
|
||||
|
||||
let locaNode = getNodes(level, key)
|
||||
if (locaNode) {
|
||||
return resolve(locaNode)
|
||||
}
|
||||
|
||||
if (lastLazyValue.key == key && lastLazyValue.value == props.modelValue) {
|
||||
if (lastLazyValue.currentRequest) {
|
||||
return lastLazyValue.currentRequest
|
||||
}
|
||||
return resolve(lastLazyValue.nodes)
|
||||
}
|
||||
|
||||
let nodes: Node[] = []
|
||||
lastLazyValue.key = key
|
||||
lastLazyValue.value = props.modelValue
|
||||
// lastLazyValue.currentRequest = getArea(pathValues).then((res) => {
|
||||
// let toStr = false
|
||||
// if (props.modelValue && typeof (props.modelValue as anyObj)[0] === 'string') {
|
||||
// toStr = true
|
||||
// }
|
||||
// for (const key in res.data) {
|
||||
// if (toStr) {
|
||||
// res.data[key].value = res.data[key].value.toString()
|
||||
// }
|
||||
// res.data[key].leaf = level >= maxLevel
|
||||
// nodes.push(res.data[key])
|
||||
// }
|
||||
// lastLazyValue.nodes = nodes
|
||||
// lastLazyValue.currentRequest = null
|
||||
// setNodes(level, key, nodes)
|
||||
// resolve(nodes)
|
||||
// })
|
||||
},
|
||||
},
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
['image', upload],
|
||||
['images', upload],
|
||||
['file', upload],
|
||||
['files', upload],
|
||||
[
|
||||
'icon',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(IconSelector, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'color',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(resolveComponent('el-color-picker'), {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'editor',
|
||||
() => {
|
||||
return () =>
|
||||
createVNode(Editor, {
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': onValueUpdate,
|
||||
...props.attr,
|
||||
})
|
||||
},
|
||||
],
|
||||
[
|
||||
'default',
|
||||
() => {
|
||||
console.warn('暂不支持' + props.type + '的输入框类型，你可以自行在 BaInput 组件内添加逻辑')
|
||||
},
|
||||
],
|
||||
])
|
||||
|
||||
let action = buildFun.get(props.type) || buildFun.get('default')
|
||||
return action!.call(this)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-upload-image :deep(.el-upload--picture-card) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ba-upload-file :deep(.el-upload-list) {
|
||||
margin-left: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
344
src/components/cockpit/F47Curve/index.vue
Normal file
344
src/components/cockpit/F47Curve/index.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--F47曲线 -->
|
||||
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - 80px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const echartList = ref({})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const data = reactive({
|
||||
name: '事件个数',
|
||||
gs: 0,
|
||||
krr: 0,
|
||||
bkrr: 0
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
let res = {
|
||||
data: { totalNumberOfEvents: 0, voltageToleranceCurveDataList: [] }
|
||||
}
|
||||
|
||||
const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
|
||||
data.gs = res.data.voltageToleranceCurveDataList.length
|
||||
data.krr = gongData.pointI.length
|
||||
data.bkrr = gongData.pointIun.length
|
||||
console.log(gongData)
|
||||
echartList.value = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: `F47曲线`
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (a: any) {
|
||||
var relVal = ''
|
||||
relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: 'log',
|
||||
min: 0.001,
|
||||
max: 1000,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
name: 's'
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: function (value: any) {
|
||||
return value.max + 20
|
||||
},
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: '%'
|
||||
}
|
||||
],
|
||||
color: ['#DAA520', 'green', 'red'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '边界线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointF
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: gongData.pointFun
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
function gongfunction(arr: any) {
|
||||
let standI = 0
|
||||
let unstandI = 0
|
||||
let standF = 0
|
||||
let unstandF = 0
|
||||
let total = 0
|
||||
let pointIun = []
|
||||
let pointI = []
|
||||
let pointF = []
|
||||
let pointFun = []
|
||||
total = arr.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let point = []
|
||||
let xx = arr[i].persistTime
|
||||
let yy = arr[i].eventValue
|
||||
let time = arr[i].time
|
||||
let eventId = arr[i].eventId
|
||||
// let index =arr[i].eventDetailIndex;
|
||||
point = [xx, yy, time, eventId]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
let line = 0
|
||||
line = 250 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
standI,
|
||||
unstandI,
|
||||
pointI,
|
||||
pointIun,
|
||||
standF,
|
||||
unstandF,
|
||||
pointF,
|
||||
pointFun
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 100)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
136
src/components/cockpit/directionStatistics/index.vue
Normal file
136
src/components/cockpit/directionStatistics/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂降方向统计 -->
|
||||
<my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: `calc(${prop.height} )` }" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '来自电网',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '来自负荷',
|
||||
value: 41
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂降方向统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['55%', '75%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
206
src/components/cockpit/exceedanceLevel/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限程度 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限严重度'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 7.5, 36, 0, 80],
|
||||
barMaxWidth: 30
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '指标名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '越限最大值',
|
||||
field: 'type',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '国标限值',
|
||||
field: 'type1',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '越限程度(%)',
|
||||
field: 'type2',
|
||||
minWidth: '60'
|
||||
},
|
||||
{
|
||||
title: '发生日期',
|
||||
field: 'type3',
|
||||
minWidth: '100'
|
||||
},
|
||||
{
|
||||
title: '越限最高监测点',
|
||||
field: 'type4',
|
||||
minWidth: '90'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '闪变',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '谐波电压',
|
||||
type: '1.72',
|
||||
type1: '1.6',
|
||||
type2: '7.5',
|
||||
type3: '2025-03-09',
|
||||
type4: '10kV1#电动机'
|
||||
},
|
||||
{
|
||||
name: '谐波电流',
|
||||
type: '27.2',
|
||||
type1: '20.0',
|
||||
type2: '36.0',
|
||||
type3: '2025-03-16',
|
||||
type4: '380V电焊机(治理前)'
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
type: '0.0',
|
||||
type1: '2.0',
|
||||
type2: '0.0',
|
||||
type3: '/',
|
||||
type4: '/'
|
||||
},
|
||||
{
|
||||
name: '三相不平衡',
|
||||
type: '3.6',
|
||||
type1: '2.0',
|
||||
type2: '80.0',
|
||||
type3: '2025-03-01',
|
||||
type4: '380V电焊机(治理前)'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
1
src/components/cockpit/governanceReport/index.json
Normal file
1
src/components/cockpit/governanceReport/index.json
Normal file
File diff suppressed because one or more lines are too long
124
src/components/cockpit/governanceReport/index.vue
Normal file
124
src/components/cockpit/governanceReport/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--治理效果报表 -->
|
||||
<TableHeader :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="治理对象">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择治理对象"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
id="luckysheet"
|
||||
:style="{ width: `calc(${prop.width} )`, height: `calc(${prop.height} - 57px )` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { exportExcel } from '@/views/govern/reportForms/export.js'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import Json from './index.json'
|
||||
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
// 下载表格
|
||||
const downloadExcel = () => {
|
||||
exportExcel(luckysheet.getAllSheets(), '治理效果报表')
|
||||
}
|
||||
onMounted(() => {
|
||||
luckysheet.create({
|
||||
container: 'luckysheet',
|
||||
title: '', // 表 头名
|
||||
lang: 'zh', // 中文
|
||||
showtoolbar: false, // 是否显示工具栏
|
||||
showinfobar: false, // 是否显示顶部信息栏
|
||||
showsheetbar: true, // 是否显示底部sheet按钮
|
||||
allowEdit: false, // 禁止所有编辑操作（必填）
|
||||
data: Json
|
||||
})
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
196
src/components/cockpit/gridSideStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--电网侧指标越限统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
barMaxWidth: 30,
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器电网侧',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
186
src/components/cockpit/indicatorDetails/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.text || false"
|
||||
>
|
||||
<template #content>
|
||||
<span v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"></span>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"
|
||||
></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0,
|
||||
text: ''
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0,
|
||||
text: ''
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key < 10) {
|
||||
return '#33996690'
|
||||
} else if (data[0].key < 80) {
|
||||
return '#FFCC3390'
|
||||
} else if (data[0].key <= 100) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
393
src/components/cockpit/indicatorDistribution/index.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
// trigger: 'axis'
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
console.log(params)
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '指标越限概率分布',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '指标越限',
|
||||
data: ['0-10', '10-20', '20-30', '30-40', '40-50'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '指标类型',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '越限占比'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: [
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0.2, 1]
|
||||
],
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const echartList1 = ref({
|
||||
title: {
|
||||
text: '越限时间概率分布'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '次' // 给X轴加单位
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '闪变',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '谐波电压',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '谐波电流',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 19],
|
||||
['2025-10-16 07:15:00', 19],
|
||||
['2025-10-16 07:30:00', 19],
|
||||
['2025-10-16 07:45:00', 19],
|
||||
['2025-10-16 08:00:00', 39],
|
||||
['2025-10-16 08:15:00', 59],
|
||||
['2025-10-16 08:30:00', 69],
|
||||
['2025-10-16 08:45:00', 79],
|
||||
['2025-10-16 09:00:00', 109],
|
||||
['2025-10-16 09:15:00', 129],
|
||||
['2025-10-16 09:30:00', 139],
|
||||
['2025-10-16 09:45:00', 149],
|
||||
['2025-10-16 10:00:00', 169],
|
||||
['2025-10-16 10:15:00', 169],
|
||||
['2025-10-16 10:30:00', 139],
|
||||
['2025-10-16 10:45:00', 129],
|
||||
['2025-10-16 11:00:00', 149],
|
||||
['2025-10-16 11:15:00', 89],
|
||||
['2025-10-16 11:30:00', 79],
|
||||
['2025-10-16 11:45:00', 99],
|
||||
['2025-10-16 12:00:00', 69],
|
||||
['2025-10-16 12:15:00', 69],
|
||||
['2025-10-16 12:30:00', 69],
|
||||
['2025-10-16 12:45:00', 69]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压偏差',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 12],
|
||||
['2025-10-16 07:15:00', 12],
|
||||
['2025-10-16 07:30:00', 12],
|
||||
['2025-10-16 07:45:00', 12],
|
||||
['2025-10-16 08:00:00', 32],
|
||||
['2025-10-16 08:15:00', 52],
|
||||
['2025-10-16 08:30:00', 62],
|
||||
['2025-10-16 08:45:00', 72],
|
||||
['2025-10-16 09:00:00', 112],
|
||||
['2025-10-16 09:15:00', 122],
|
||||
['2025-10-16 09:30:00', 122],
|
||||
['2025-10-16 09:45:00', 152],
|
||||
['2025-10-16 10:00:00', 122],
|
||||
['2025-10-16 10:15:00', 112],
|
||||
['2025-10-16 10:30:00', 132],
|
||||
['2025-10-16 10:45:00', 122],
|
||||
['2025-10-16 11:00:00', 142],
|
||||
['2025-10-16 11:15:00', 82],
|
||||
['2025-10-16 11:30:00', 72],
|
||||
['2025-10-16 11:45:00', 92],
|
||||
['2025-10-16 12:00:00', 62],
|
||||
['2025-10-16 12:15:00', 62],
|
||||
['2025-10-16 12:30:00', 62],
|
||||
['2025-10-16 12:45:00', 62]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '三相不平衡',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
145
src/components/cockpit/indicatorFittingChart/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--主要监测点列表 -->
|
||||
<TableHeader :showReset="false" >
|
||||
<template v-slot:select>
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输关键字" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - 58px)`"></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
minWidth: '90',
|
||||
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '监测对象类型',
|
||||
field: 'type',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'whetherToGovern',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{ title: '主要存在的电能质量问题', field: 'question', minWidth: '150' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '10kV2#(治理后)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '所有指标均合格'
|
||||
},
|
||||
{
|
||||
name: '380V电焊机(治理前)',
|
||||
type: '电焊机',
|
||||
whetherToGovern: '100A APF',
|
||||
question: '5次谐波电流、电压不平衡度超标'
|
||||
},
|
||||
{
|
||||
name: '380V水泵机',
|
||||
type: '电动机',
|
||||
whetherToGovern: '否',
|
||||
question: '所有指标均合格'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="指标合格率统计" v-model="dialogVisible" append-to-body width="70%">
|
||||
<TableHeader datePicker showExport :showReset="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
placeholder="请选择监测点名称"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup :height="height"></Table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, provide } from 'vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible: any = ref(false)
|
||||
const options = [
|
||||
{
|
||||
value: '35kV进线',
|
||||
label: '35kV进线'
|
||||
}
|
||||
]
|
||||
const height = mainHeight(0, 2).height as any
|
||||
const loop50 = (key: string) => {
|
||||
let list: any[] = []
|
||||
for (let i = 2; i < 51; i++) {
|
||||
list.push({
|
||||
title: i + '次',
|
||||
// field: key + i,
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
publicHeight: 30,
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
field: 'time',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
title: '闪变越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
{
|
||||
title: '三相不平衡度越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '电压偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '频率偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
{
|
||||
time: '2024-01-01 00:00:00',
|
||||
name: '35kV进线',
|
||||
flicker: '0',
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
271
src/components/cockpit/listOfMainMonitoringPoints/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标拟合图 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户功率">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择用户功率"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="越限情况">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择越限情况"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '三相总有功功率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '三相总无功功率',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '越限',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '不越限',
|
||||
value: '0'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '谐波电压总畸变率越限与功率负荷曲线拟合图'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{}, {}],
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '有功功率',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '谐波总畸变率',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 0],
|
||||
['2025-10-16 07:15:00', 0],
|
||||
['2025-10-16 07:30:00', 0],
|
||||
['2025-10-16 07:45:00', 0],
|
||||
['2025-10-16 08:00:00', 0],
|
||||
['2025-10-16 08:15:00', 0.1],
|
||||
['2025-10-16 08:30:00', 0.1],
|
||||
['2025-10-16 08:45:00', 0.1],
|
||||
['2025-10-16 09:00:00', 1],
|
||||
['2025-10-16 09:15:00', 1],
|
||||
['2025-10-16 09:30:00', 1],
|
||||
['2025-10-16 09:45:00', 1],
|
||||
['2025-10-16 10:00:00', 0.8],
|
||||
['2025-10-16 10:15:00', 0.8],
|
||||
['2025-10-16 10:30:00', 0.8],
|
||||
['2025-10-16 10:45:00', 0.8],
|
||||
['2025-10-16 11:00:00', 0.8],
|
||||
['2025-10-16 11:15:00', 0.1],
|
||||
['2025-10-16 11:30:00', 0.1],
|
||||
['2025-10-16 11:45:00', 0.1],
|
||||
['2025-10-16 12:00:00', 0],
|
||||
['2025-10-16 12:15:00', 0],
|
||||
['2025-10-16 12:30:00', 0],
|
||||
['2025-10-16 12:45:00', 0]
|
||||
],
|
||||
yAxisIndex: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
169
src/components/cockpit/monitoringPointList/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--监测点列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} )`"></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElTag } from 'element-plus'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '治理对象名称',
|
||||
field: 'name',
|
||||
minWidth: '80'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压等级',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '治理设备详情',
|
||||
field: 'type1',
|
||||
minWidth: '70'
|
||||
},
|
||||
|
||||
{
|
||||
title: '治理前报告',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '监测点名称', field: 'type3', minWidth: '70' },
|
||||
{ title: '监测类型', field: 'type4', minWidth: '60' },
|
||||
{
|
||||
title: '监测点状态',
|
||||
field: 'type5',
|
||||
minWidth: '60',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='color: ${row.type5 === '中断' ? '#FF0000' : ''}'>${row.type5}</span>`
|
||||
}
|
||||
},
|
||||
{ title: '最新数据时间', field: 'type6', minWidth: '140' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '1#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '250A APF',
|
||||
type2: '报告.doc',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 电网侧',
|
||||
type4: '电网侧',
|
||||
type5: '运行',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
},
|
||||
{
|
||||
name: '2#变压器',
|
||||
type: '0.38kV',
|
||||
type1: '100A SVG',
|
||||
type2: '/',
|
||||
type3: '1#变压器 负载侧',
|
||||
type4: '负载侧',
|
||||
type5: '中断',
|
||||
type6: '2025-04-11 18:16:00'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field == 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
196
src/components/cockpit/overLimitStatistics/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--总体指标越限统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
<!-- 指标越限详情 -->
|
||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '指标越限占比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '(区域)',
|
||||
data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '%', // 给X轴加单位
|
||||
interval: 20
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: [0, 45, 22, 0, 70],
|
||||
barMaxWidth: 30,
|
||||
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// textStyle: {
|
||||
// //数值样式
|
||||
// color: '#000'
|
||||
// },
|
||||
// fontSize: 12
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
{
|
||||
title: '越限占比(%)',
|
||||
children: [
|
||||
{
|
||||
title: '闪变',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电流',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压偏差',
|
||||
field: 'type3',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type3}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '三相不平衡',
|
||||
field: 'type4',
|
||||
minWidth: '90',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type4}</span>`
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#电动机',
|
||||
type: '0',
|
||||
type1: '45',
|
||||
type2: '22',
|
||||
type3: '0',
|
||||
type4: '70'
|
||||
}
|
||||
]
|
||||
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
119
src/components/cockpit/sensitiveLoad/index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--敏感负荷列表 -->
|
||||
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height})`" isGroup></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '敏感负荷名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '敏感负荷类型',
|
||||
field: 'type',
|
||||
minWidth: '70'
|
||||
},
|
||||
{
|
||||
title: '是否监测',
|
||||
field: 'type1',
|
||||
minWidth: '80'
|
||||
},
|
||||
{
|
||||
title: '是否治理',
|
||||
field: 'type2',
|
||||
minWidth: '80'
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '10kV1#变压器',
|
||||
type: '机房',
|
||||
type1: '是',
|
||||
type2: '100A APF'
|
||||
},
|
||||
{
|
||||
name: '380kV1#母线',
|
||||
type: 'PLC',
|
||||
type1: '是',
|
||||
type2: 'UPS'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 500)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
199
src/components/cockpit/transientDetails/index.vue
Normal file
199
src/components/cockpit/transientDetails/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, overflow: 'auto' }">
|
||||
<template #date-cell="{ data }">
|
||||
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
v-if="list?.filter(item => item.time == data.day)[0]?.type || false"
|
||||
>
|
||||
<template #content>
|
||||
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
||||
<div v-for="item in list?.filter(item => item.time == data.day)">
|
||||
<div>电压暂降：{{ item.type || '' }}</div>
|
||||
<div>电压中断：{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升：{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-for="item in list?.filter(item => item.time == data.day)"
|
||||
>
|
||||
<div>电压暂降:{{ item.type || '' }}</div>
|
||||
<div>电压中断:{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升:{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key > 0) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
pointer-events: none;
|
||||
}
|
||||
.prev {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
// /*calendar_class 是el-calendar所在父标签的css*/
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
</style>
|
||||
345
src/components/cockpit/transientDistribution/index.vue
Normal file
345
src/components/cockpit/transientDistribution/index.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件概率分布 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 - 10px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const echartList = ref({
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
// trigger: 'axis'
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
console.log(params)
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂态事件概率分布',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '特征幅值',
|
||||
data: [
|
||||
'0-10%',
|
||||
'10%-20%',
|
||||
'20%-30%',
|
||||
'30%-40%',
|
||||
'40%-50%',
|
||||
'50%-60%',
|
||||
'60%-70%',
|
||||
'70%-80%',
|
||||
'80%-90%',
|
||||
'90%-100%'
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间',
|
||||
data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '暂态事件次数'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: [
|
||||
[0, 0, 1],
|
||||
[0, 1, 1],
|
||||
[0.2, 1]
|
||||
],
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const echartList1 = ref({
|
||||
title: {
|
||||
text: '越限时间概率分布'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: '次' // 给X轴加单位
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压中断',
|
||||
color: '#FF9100',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
color: '#FFBF00',
|
||||
name: '电压暂降',
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
// smooth: true,
|
||||
name: '电压暂升',
|
||||
color: config.layout.elementUiPrimary[0],
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 19],
|
||||
['2025-10-16 07:15:00', 19],
|
||||
['2025-10-16 07:30:00', 19],
|
||||
['2025-10-16 07:45:00', 19],
|
||||
['2025-10-16 08:00:00', 39],
|
||||
['2025-10-16 08:15:00', 59],
|
||||
['2025-10-16 08:30:00', 69],
|
||||
['2025-10-16 08:45:00', 79],
|
||||
['2025-10-16 09:00:00', 109],
|
||||
['2025-10-16 09:15:00', 129],
|
||||
['2025-10-16 09:30:00', 139],
|
||||
['2025-10-16 09:45:00', 149],
|
||||
['2025-10-16 10:00:00', 169],
|
||||
['2025-10-16 10:15:00', 169],
|
||||
['2025-10-16 10:30:00', 139],
|
||||
['2025-10-16 10:45:00', 129],
|
||||
['2025-10-16 11:00:00', 149],
|
||||
['2025-10-16 11:15:00', 89],
|
||||
['2025-10-16 11:30:00', 79],
|
||||
['2025-10-16 11:45:00', 99],
|
||||
['2025-10-16 12:00:00', 69],
|
||||
['2025-10-16 12:15:00', 69],
|
||||
['2025-10-16 12:30:00', 69],
|
||||
['2025-10-16 12:45:00', 69]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
218
src/components/cockpit/transientStatistics/index.vue
Normal file
218
src/components/cockpit/transientStatistics/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件统计 -->
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
|
||||
/>
|
||||
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const data = [
|
||||
{
|
||||
name: '电压中断',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: 41
|
||||
},
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: 46
|
||||
}
|
||||
]
|
||||
const echartList = ref({
|
||||
title: {},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '5%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
color: ['#FF9100', '#FFBF00', config.layout.elementUiPrimary[0]],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
title: [
|
||||
{
|
||||
text: '暂态事件统计',
|
||||
left: 'center'
|
||||
},
|
||||
{
|
||||
text: data[0].value + data[1].value + data[2].value + '次',
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: 'center',
|
||||
radius: ['50%', '70%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
name: '事件统计',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
minWidth: '90'
|
||||
},
|
||||
|
||||
{
|
||||
title: '电压中断(次)',
|
||||
field: 'type',
|
||||
minWidth: '70',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂降(次)',
|
||||
field: 'type1',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type1}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '电压暂升(次)',
|
||||
field: 'type2',
|
||||
minWidth: '80',
|
||||
render: 'customTemplate',
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '35kV1进线',
|
||||
type: '2',
|
||||
type1: '38',
|
||||
type2: '35'
|
||||
},
|
||||
{
|
||||
name: '35kV1变压器',
|
||||
type: '2',
|
||||
type1: '1',
|
||||
type2: '3'
|
||||
},
|
||||
{
|
||||
name: '35kV1母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
},
|
||||
{
|
||||
name: '35kV2母线',
|
||||
type: '0',
|
||||
type1: '1',
|
||||
type2: '4'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 点击行
|
||||
const cellClickEvent = ({ row, column }: any) => {
|
||||
if (column.field != 'name') {
|
||||
console.log(row)
|
||||
OverLimitDetailsRef.value.open(row)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 200)
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
280
src/components/cockpit/trendComparison/index.vue
Normal file
280
src/components/cockpit/trendComparison/index.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--趋势对比 -->
|
||||
<TableHeader :showReset="false" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点名称">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.power"
|
||||
placeholder="请选择监测点名称"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in powerList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电能质量指标">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.indicator"
|
||||
placeholder="请选择电能质量指标"
|
||||
clearable
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indicatorList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="谐波次数">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.exceedingTheLimit"
|
||||
placeholder="请选择谐波次数"
|
||||
clearable
|
||||
style="width: 90px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in exceedingTheLimitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{ width: prop.width, height: `calc(${prop.height} - ${headerHeight}px )` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const config = useConfig()
|
||||
const powerList: any = ref([
|
||||
{
|
||||
label: '1#变压器',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '2#变压器',
|
||||
value: '2'
|
||||
}
|
||||
])
|
||||
const exceedingTheLimitList: any = ref([
|
||||
{
|
||||
label: '2次',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '3次',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '4次',
|
||||
value: '4'
|
||||
},
|
||||
{
|
||||
label: '5次',
|
||||
value: '5'
|
||||
}
|
||||
])
|
||||
const indicatorList: any = ref([
|
||||
{
|
||||
label: '谐波电压总畸变率',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '各次谐波电压',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡',
|
||||
value: '4'
|
||||
}
|
||||
])
|
||||
const echartList = ref({
|
||||
title: {
|
||||
text: '趋势对比'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'line',
|
||||
name: '治理前',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 1],
|
||||
['2025-10-16 07:15:00', 1],
|
||||
['2025-10-16 07:30:00', 1],
|
||||
['2025-10-16 07:45:00', 1],
|
||||
['2025-10-16 08:00:00', 3],
|
||||
['2025-10-16 08:15:00', 5],
|
||||
['2025-10-16 08:30:00', 6],
|
||||
['2025-10-16 08:45:00', 7],
|
||||
['2025-10-16 09:00:00', 10],
|
||||
['2025-10-16 09:15:00', 12],
|
||||
['2025-10-16 09:30:00', 13],
|
||||
['2025-10-16 09:45:00', 14],
|
||||
['2025-10-16 10:00:00', 16],
|
||||
['2025-10-16 10:15:00', 16],
|
||||
['2025-10-16 10:30:00', 13],
|
||||
['2025-10-16 10:45:00', 12],
|
||||
['2025-10-16 11:00:00', 14],
|
||||
['2025-10-16 11:15:00', 8],
|
||||
['2025-10-16 11:30:00', 7],
|
||||
['2025-10-16 11:45:00', 9],
|
||||
['2025-10-16 12:00:00', 6],
|
||||
['2025-10-16 12:15:00', 6],
|
||||
['2025-10-16 12:30:00', 6],
|
||||
['2025-10-16 12:45:00', 6]
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params: any) {
|
||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return config.layout.elementUiPrimary[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '治理后',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
data: [
|
||||
['2025-10-16 07:00:00', 10],
|
||||
['2025-10-16 07:15:00', 10],
|
||||
['2025-10-16 07:30:00', 10],
|
||||
['2025-10-16 07:45:00', 10],
|
||||
['2025-10-16 08:00:00', 30],
|
||||
['2025-10-16 08:15:00', 50],
|
||||
['2025-10-16 08:30:00', 60],
|
||||
['2025-10-16 08:45:00', 70],
|
||||
['2025-10-16 09:00:00', 100],
|
||||
['2025-10-16 09:15:00', 120],
|
||||
['2025-10-16 09:30:00', 130],
|
||||
['2025-10-16 09:45:00', 140],
|
||||
['2025-10-16 10:00:00', 160],
|
||||
['2025-10-16 10:15:00', 160],
|
||||
['2025-10-16 10:30:00', 130],
|
||||
['2025-10-16 10:45:00', 120],
|
||||
['2025-10-16 11:00:00', 140],
|
||||
['2025-10-16 11:15:00', 80],
|
||||
['2025-10-16 11:30:00', 70],
|
||||
['2025-10-16 11:45:00', 90],
|
||||
['2025-10-16 12:00:00', 60],
|
||||
['2025-10-16 12:15:00', 60],
|
||||
['2025-10-16 12:30:00', 60],
|
||||
['2025-10-16 12:45:00', 60]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const headerHeight = ref(57)
|
||||
const selectChange = (showSelect: any, height: any) => {
|
||||
headerHeight.value = height
|
||||
}
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
exportName: '主要监测点列表',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.power = '1'
|
||||
tableStore.table.params.indicator = '1'
|
||||
tableStore.table.params.exceedingTheLimit = '1'
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,288 +1,288 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
// import { nextTick } from 'process'
|
||||
|
||||
const config = useConfig()
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: '18'
|
||||
},
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
// confine: true,
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 10,
|
||||
top: 0,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存图片'
|
||||
},
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 40,
|
||||
top: 10,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
// padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '60px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
// {
|
||||
// show: true,
|
||||
// yAxisIndex: 0,
|
||||
// width: 12,
|
||||
// handleSize: 8,
|
||||
// showDataShadow: false,
|
||||
// right: 12
|
||||
// }
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
chart.group = 'group'
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
}
|
||||
const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 10
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
// import { nextTick } from 'process'
|
||||
|
||||
const config = useConfig()
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: '18'
|
||||
},
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
// confine: true,
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存图片'
|
||||
},
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
// padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
// {
|
||||
// show: true,
|
||||
// yAxisIndex: 0,
|
||||
// width: 12,
|
||||
// handleSize: 8,
|
||||
// showDataShadow: false,
|
||||
// right: 12
|
||||
// }
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
chart.group = 'group'
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
}
|
||||
const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 5
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export let color = [ '#07CCCA','#00BFF5', '#FFBF00', '#77DA63', '#D5FF6B', '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
|
||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
|
||||
|
||||
export let color = [ '#07CCCA','#00BFF5', '#FFBF00', '#77DA63', '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
|
||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { createVNode, resolveComponent, defineComponent, computed, type CSSProperties } from 'vue'
|
||||
import svg from '@/components/icon/svg/index.vue'
|
||||
@@ -27,7 +33,7 @@ export default defineComponent({
|
||||
color: color
|
||||
}
|
||||
})
|
||||
if(props.name){
|
||||
if (props.name) {
|
||||
if (props.name.indexOf('el-icon-') === 0) {
|
||||
return () =>
|
||||
createVNode('el-icon', { class: 'icon el-icon', style: iconStyle.value }, [
|
||||
|
||||
@@ -1,295 +1,303 @@
|
||||
<template>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon'" :name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<div v-if="field.render == 'switch' && fieldValue != undefined">
|
||||
<el-switch
|
||||
@change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()"
|
||||
:loading="row.loading"
|
||||
inline-prompt
|
||||
:active-value="field.activeValue"
|
||||
:active-text="field.activeText"
|
||||
:inactive-value="field.inactiveValue"
|
||||
:inactive-text="field.inactiveText"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image
|
||||
:hide-on-click-modal="true"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="[fullUrl(fieldValue)]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"
|
||||
></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom)" size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div
|
||||
v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
|
||||
></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component
|
||||
v-if="field.render == 'customRender'"
|
||||
:is="field.customRender"
|
||||
:renderRow="row"
|
||||
:renderField="field"
|
||||
:renderValue="fieldValue"
|
||||
:renderColumn="column"
|
||||
:renderIndex="index"
|
||||
/>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
|
||||
<el-button
|
||||
link
|
||||
v-if="btn.render == 'basicButton'"
|
||||
@click="onButtonClick(btn)"
|
||||
:class="btn.class"
|
||||
class="table-operate"
|
||||
:type="btn.type"
|
||||
:loading="props.row[btn.loading] || props.row.loading || false"
|
||||
v-bind="btn.attr"
|
||||
>
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip
|
||||
v-if="btn.render == 'tipButton'"
|
||||
:disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
@click="onButtonClick(btn)"
|
||||
:class="btn.class"
|
||||
class="table-operate"
|
||||
:type="btn.type"
|
||||
v-bind="btn.attr"
|
||||
>
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm
|
||||
v-if="btn.render == 'confirmButton'"
|
||||
:disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm"
|
||||
@confirm="onButtonClick(btn)"
|
||||
>
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="item in btn.buttons"
|
||||
:key="item.text"
|
||||
:command="item"
|
||||
:style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6 + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- Icon -->
|
||||
<Icon class="ba-icon-dark" v-if="field.render == 'icon'" :name="fieldValue ? fieldValue : field.default ?? ''" />
|
||||
|
||||
<!-- switch -->
|
||||
<div v-if="field.render == 'switch' && fieldValue != undefined">
|
||||
<el-switch
|
||||
@change="onChangeField(field, $event)"
|
||||
:model-value="fieldValue.toString()"
|
||||
:loading="row.loading"
|
||||
inline-prompt
|
||||
:active-value="field.activeValue"
|
||||
:active-text="field.activeText"
|
||||
:inactive-value="field.inactiveValue"
|
||||
:inactive-text="field.inactiveText"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- image -->
|
||||
<div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
|
||||
<el-image
|
||||
:hide-on-click-modal="true"
|
||||
:preview-teleported="true"
|
||||
:preview-src-list="[fieldValue]"
|
||||
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"
|
||||
></el-image>
|
||||
</div>
|
||||
|
||||
<!-- tag -->
|
||||
<div v-if="field.render == 'tag' && fieldValue !== ''">
|
||||
<el-tag :type="getTagType(fieldValue, field.custom)" size="small">
|
||||
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- datetime -->
|
||||
<div v-if="field.render == 'datetime'">
|
||||
{{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
|
||||
</div>
|
||||
|
||||
<!-- color -->
|
||||
<div v-if="field.render == 'color'">
|
||||
<div :style="{ background: fieldValue }" class="ba-render-color"></div>
|
||||
</div>
|
||||
|
||||
<!-- customTemplate 自定义模板 -->
|
||||
<div
|
||||
v-if="field.render == 'customTemplate'"
|
||||
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
|
||||
></div>
|
||||
|
||||
<!-- 自定义组件/函数渲染 -->
|
||||
<component
|
||||
v-if="field.render == 'customRender'"
|
||||
:is="field.customRender"
|
||||
:renderRow="row"
|
||||
:renderField="field"
|
||||
:renderValue="fieldValue"
|
||||
:renderColumn="column"
|
||||
:renderIndex="index"
|
||||
/>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
|
||||
<template v-for="(btn, idx) in buttons" :key="idx">
|
||||
<!-- 常规按钮 -->
|
||||
|
||||
<el-button
|
||||
link
|
||||
v-if="btn.render == 'basicButton'"
|
||||
@click="onButtonClick(btn)"
|
||||
:class="btn.class"
|
||||
class="table-operate"
|
||||
:type="btn.type"
|
||||
:loading="props.row[btn.loading] || props.row.loading || false"
|
||||
v-bind="btn.attr"
|
||||
>
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
|
||||
</el-button>
|
||||
|
||||
<!-- 带提示信息的按钮 -->
|
||||
<el-tooltip
|
||||
v-if="btn.render == 'tipButton'"
|
||||
:disabled="btn.title && !btn.disabledTip ? false : true"
|
||||
:content="btn.title"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
@click="onButtonClick(btn)"
|
||||
:class="btn.class"
|
||||
class="table-operate"
|
||||
:type="btn.type"
|
||||
v-bind="btn.attr"
|
||||
>
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 带确认框的按钮 -->
|
||||
<el-popconfirm
|
||||
v-if="btn.render == 'confirmButton'"
|
||||
:disabled="btn.disabled && btn.disabled(row, field)"
|
||||
v-bind="btn.popconfirm"
|
||||
@confirm="onButtonClick(btn)"
|
||||
>
|
||||
<template #reference>
|
||||
<div style="display: inline-block">
|
||||
<el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
|
||||
<div v-if="btn.text || btn.title" class="table-operate-text">
|
||||
{{ btn.text || btn.title }}
|
||||
</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
|
||||
<el-button link type="primary" class="table-operate">
|
||||
<div class="table-operate-text">更多</div>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="item in btn.buttons"
|
||||
:key="item.text"
|
||||
:command="item"
|
||||
:style="{
|
||||
color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessageBox, type TagProps } from 'element-plus'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { fullUrl, timeFormat } from '@/utils/common'
|
||||
import type { VxeColumnProps } from 'vxe-table'
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
const TableStore = inject('tableStore') as TableStoreClass
|
||||
|
||||
interface Props {
|
||||
row: TableRow
|
||||
field: TableColumn
|
||||
column: VxeColumnProps
|
||||
index: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 字段值（单元格值）
|
||||
const fieldName = ref(props.field.field)
|
||||
const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
|
||||
if (fieldName.value && fieldName.value.indexOf('.') > -1) {
|
||||
let fieldNameArr = fieldName.value.split('.')
|
||||
let val: any = ref(props.row[fieldNameArr[0]])
|
||||
for (let index = 1; index < fieldNameArr.length; index++) {
|
||||
val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
|
||||
}
|
||||
fieldValue.value = val.value
|
||||
}
|
||||
|
||||
if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
|
||||
fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
|
||||
}
|
||||
|
||||
const onChangeField = (row: any, value: any) => {
|
||||
row.onChangeField && row.onChangeField(props.row, value)
|
||||
|
||||
// TableStore.onTableAction('field-change', { value: value, ...props })
|
||||
}
|
||||
|
||||
const onButtonClick = (btn: OptButton) => {
|
||||
btn.click && btn.click(props.row, props.field)
|
||||
}
|
||||
|
||||
const getTagType = (value: string, custom: any): TagProps['type'] => {
|
||||
return custom && custom[value] ? custom[value] : ''
|
||||
}
|
||||
|
||||
// 按钮组处理 最多显示三个按钮 多余的显示为下拉
|
||||
const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
|
||||
const buttons = ref<any[]>([])
|
||||
if (buttonsFilter.length > 3) {
|
||||
buttonsFilter?.forEach((btn, index) => {
|
||||
btn.text = btn.text || btn.title
|
||||
if (index < 2) {
|
||||
buttons.value.push(btn)
|
||||
} else {
|
||||
if (buttons.value.length > 2) {
|
||||
buttons.value[buttons.value.length - 1].buttons.push(btn)
|
||||
} else {
|
||||
buttons.value.push({
|
||||
render: 'dropdown',
|
||||
buttons: [btn]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
buttons.value = buttonsFilter
|
||||
}
|
||||
const handlerCommand = (item: OptButton) => {
|
||||
switch (item.render) {
|
||||
case 'basicButton':
|
||||
onButtonClick(item)
|
||||
break
|
||||
case 'confirmButton':
|
||||
ElMessageBox.confirm(item.popconfirm?.title || '提示', {
|
||||
confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
|
||||
cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
onButtonClick(item)
|
||||
})
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
const getUrl = (url: string) => {
|
||||
getFileUrl({ filePath: url }).then(res => {
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.m-10 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.images-item {
|
||||
width: 50px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height: 36px;
|
||||
// width: 36px;
|
||||
}
|
||||
|
||||
.table-operate-text {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-operate {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 12px !important;
|
||||
// color: var(--ba-bg-color-overlay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.move-button {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ml-6 + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-render-color {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cn-render-buttons {
|
||||
:deep(.el-button) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.ba-render-image {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,306 +1,321 @@
|
||||
<template>
|
||||
<div ref="tableHeader" class="cn-table-header">
|
||||
<div class="table-header ba-scroll-style" :key="num">
|
||||
|
||||
<el-form style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap" ref="headerForm"
|
||||
@submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
|
||||
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="区域" v-if="area">
|
||||
<Area ref="areaRef" v-model.trim="tableStore.table.params.deptIndex" />
|
||||
</el-form-item>
|
||||
<slot name="select"></slot>
|
||||
</el-form>
|
||||
<template v-if="$slots.select || datePicker || showSearch">
|
||||
<el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
|
||||
<Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
|
||||
<Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
|
||||
</el-button>
|
||||
<el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
|
||||
<el-button @click="onResetForm" v-if="showSearch && showReset" :icon="RefreshLeft">重置</el-button>
|
||||
<el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
|
||||
icon="el-icon-Download">导出</el-button>
|
||||
</template>
|
||||
<slot name="operation"></slot>
|
||||
</div>
|
||||
<el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
|
||||
ref="headerFormSecond" @submit.prevent="" @keyup.enter="onComSearch" label-position="left"
|
||||
:inline="true"></el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
|
||||
import type TableStore from '@/utils/tableStore'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import Area from '@/components/form/area/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { Search, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { defineProps } from 'vue'
|
||||
const emit = defineEmits(['selectChange',])
|
||||
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const tableHeader = ref()
|
||||
const datePickerRef = ref()
|
||||
const dictData = useDictData()
|
||||
const areaRef = ref()
|
||||
const headerForm = ref()
|
||||
const headerFormSecond = ref()
|
||||
const num = ref(0)
|
||||
interface Props {
|
||||
datePicker?: boolean
|
||||
area?: boolean
|
||||
showSearch?: boolean
|
||||
nextFlag?: boolean //控制时间是否可以往后推
|
||||
theCurrentTime?: boolean //控制时间前3天展示上个月时间
|
||||
showReset?: boolean //是否显示重置
|
||||
showExport?: boolean //导出控制
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
datePicker: false,
|
||||
area: false,
|
||||
showSearch: true,
|
||||
nextFlag: false,
|
||||
theCurrentTime: true,
|
||||
showReset: true,
|
||||
showExport:false
|
||||
})
|
||||
// 动态计算table高度
|
||||
let resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
handlerHeight()
|
||||
computedSearchRow()
|
||||
}
|
||||
})
|
||||
const showUnfoldButton = ref(false)
|
||||
const headerFormSecondStyleOpen = {
|
||||
opacity: 1,
|
||||
height: 'auto',
|
||||
padding: '0 15px 0px 15px'
|
||||
}
|
||||
const headerFormSecondStyleClose = {
|
||||
opacity: 0,
|
||||
height: '0',
|
||||
padding: '0'
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.datePicker && tableStore) {
|
||||
tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue[1]
|
||||
tableStore.table.params.startTime = datePickerRef.value?.timeValue[0]
|
||||
tableStore.table.params.endTime = datePickerRef.value?.timeValue[1]
|
||||
tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
|
||||
}
|
||||
if (props.area) {
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
}
|
||||
nextTick(() => {
|
||||
resizeObserver.observe(tableHeader.value)
|
||||
computedSearchRow()
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
resizeObserver.disconnect()
|
||||
})
|
||||
|
||||
const handlerHeight = () => {
|
||||
if (tableStore && tableStore.table) {
|
||||
tableStore.table.height = mainHeight(
|
||||
tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
|
||||
).height as string
|
||||
}
|
||||
}
|
||||
// 刷新页面handler高度出下拉
|
||||
const computedSearchRow = () => {
|
||||
|
||||
if (!headerForm.value.$el) return
|
||||
|
||||
|
||||
// 清空headerFormSecond.value.$el下的元素
|
||||
while (headerFormSecond.value.$el.firstChild) {
|
||||
headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
|
||||
}
|
||||
|
||||
// 获取第一行放了几个表单
|
||||
const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
|
||||
|
||||
// 把第一行放不下的复制一份放到headerFormSecond.value.$el
|
||||
let width = 0
|
||||
for (let i = 0; i < elFormItem.length; i++) {
|
||||
width += elFormItem[i].offsetWidth + 32
|
||||
if (width > headerForm.value.$el.offsetWidth) {
|
||||
headerFormSecond.value.$el.appendChild(elFormItem[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 判断是否需要折叠
|
||||
if (headerFormSecond.value.$el.scrollHeight > 0) {
|
||||
showUnfoldButton.value = true
|
||||
} else {
|
||||
showUnfoldButton.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showSelect = ref(false)
|
||||
const showSelectChange = () => {
|
||||
showSelect.value = !showSelect.value
|
||||
emit('selectChange', showSelect.value)
|
||||
}
|
||||
const onComSearch = async () => {
|
||||
if (props.datePicker) {
|
||||
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
|
||||
tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
|
||||
tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
|
||||
}
|
||||
|
||||
await tableStore.onTableAction('search', {})
|
||||
}
|
||||
const setDatePicker = (list: any) => {
|
||||
datePickerRef.value.setTimeOptions(list)
|
||||
}
|
||||
const onResetForm = () => {
|
||||
//时间重置成默认值
|
||||
datePickerRef.value?.setInterval(3)
|
||||
tableStore.onTableAction('reset', {})
|
||||
}
|
||||
const setInterval = (val: any) => {
|
||||
datePickerRef.value.setInterval(val)
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableStore.onTableAction('export', {showAllFlag:true})
|
||||
}
|
||||
|
||||
defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange, computedSearchRow })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cn-table-header {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
|
||||
border-bottom: none;
|
||||
padding: 13px 15px 9px;
|
||||
font-size: 14px;
|
||||
|
||||
.table-header-operate-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-com-search {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
border: 1px solid var(--ba-border-color);
|
||||
border-bottom: none;
|
||||
padding: 13px 15px 20px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#header-form-second,
|
||||
#header-form {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.mlr-12 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.mlr-12+.el-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.table-search {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
.quick-search {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-button-group {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
overflow: hidden;
|
||||
|
||||
button:focus,
|
||||
button:active {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.table-search-button-item {
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-button+.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-border {
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.table-search-button-group {
|
||||
|
||||
button:focus,
|
||||
button:active {
|
||||
background-color: var(--el-color-info-dark-2);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
|
||||
el-icon {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header-form,
|
||||
#header-form-second {
|
||||
:deep(.el-select) {
|
||||
--el-select-width: 220px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
--el-input-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div ref="tableHeader" class="cn-table-header">
|
||||
<div class="table-header ba-scroll-style" :key="num">
|
||||
<el-form
|
||||
style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap"
|
||||
ref="headerForm"
|
||||
@submit.prevent=""
|
||||
@keyup.enter="onComSearch"
|
||||
label-position="left"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
|
||||
<DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="区域" v-if="area">
|
||||
<Area ref="areaRef" v-model.trim="tableStore.table.params.deptIndex" />
|
||||
</el-form-item>
|
||||
<slot name="select"></slot>
|
||||
</el-form>
|
||||
<template v-if="$slots.select || datePicker || showSearch">
|
||||
<el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
|
||||
<Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
|
||||
<Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
|
||||
</el-button>
|
||||
<el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
|
||||
<el-button @click="onResetForm" v-if="showSearch && showReset" :icon="RefreshLeft">重置</el-button>
|
||||
<el-button
|
||||
@click="onExport"
|
||||
v-if="showExport"
|
||||
:loading="tableStore.table.loading"
|
||||
type="primary"
|
||||
icon="el-icon-Download"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
<slot name="operation"></slot>
|
||||
</div>
|
||||
<el-form
|
||||
:style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
|
||||
ref="headerFormSecond"
|
||||
@submit.prevent=""
|
||||
@keyup.enter="onComSearch"
|
||||
label-position="left"
|
||||
:inline="true"
|
||||
></el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
|
||||
import type TableStore from '@/utils/tableStore'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import Area from '@/components/form/area/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { Search, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { defineProps } from 'vue'
|
||||
const emit = defineEmits(['selectChange'])
|
||||
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const tableHeader = ref()
|
||||
const datePickerRef = ref()
|
||||
const dictData = useDictData()
|
||||
const areaRef = ref()
|
||||
const headerForm = ref()
|
||||
const headerFormSecond = ref()
|
||||
const num = ref(0)
|
||||
interface Props {
|
||||
datePicker?: boolean
|
||||
area?: boolean
|
||||
showSearch?: boolean
|
||||
nextFlag?: boolean //控制时间是否可以往后推
|
||||
theCurrentTime?: boolean //控制时间前3天展示上个月时间
|
||||
showReset?: boolean //是否显示重置
|
||||
showExport?: boolean //导出控制
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
datePicker: false,
|
||||
area: false,
|
||||
showSearch: true,
|
||||
nextFlag: false,
|
||||
theCurrentTime: true,
|
||||
showReset: true,
|
||||
showExport: false
|
||||
})
|
||||
// 动态计算table高度
|
||||
let resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
handlerHeight()
|
||||
computedSearchRow()
|
||||
}
|
||||
})
|
||||
const showUnfoldButton = ref(false)
|
||||
const headerFormSecondStyleOpen = {
|
||||
opacity: 1,
|
||||
height: 'auto',
|
||||
padding: '0 15px 0px 15px'
|
||||
}
|
||||
const headerFormSecondStyleClose = {
|
||||
opacity: 0,
|
||||
height: '0',
|
||||
padding: '0'
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.datePicker && tableStore) {
|
||||
tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue[1]
|
||||
tableStore.table.params.startTime = datePickerRef.value?.timeValue[0]
|
||||
tableStore.table.params.endTime = datePickerRef.value?.timeValue[1]
|
||||
tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
|
||||
}
|
||||
if (props.area) {
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
}
|
||||
nextTick(() => {
|
||||
resizeObserver.observe(tableHeader.value)
|
||||
computedSearchRow()
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
resizeObserver.disconnect()
|
||||
})
|
||||
|
||||
const handlerHeight = () => {
|
||||
if (tableStore && tableStore.table) {
|
||||
tableStore.table.height = mainHeight(
|
||||
tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
|
||||
).height as string
|
||||
}
|
||||
}
|
||||
// 刷新页面handler高度出下拉
|
||||
const computedSearchRow = () => {
|
||||
if (!headerForm.value.$el) return
|
||||
|
||||
// 清空headerFormSecond.value.$el下的元素
|
||||
while (headerFormSecond.value.$el.firstChild) {
|
||||
headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
|
||||
}
|
||||
|
||||
// 获取第一行放了几个表单
|
||||
const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
|
||||
|
||||
// 把第一行放不下的复制一份放到headerFormSecond.value.$el
|
||||
let width = 0
|
||||
for (let i = 0; i < elFormItem.length; i++) {
|
||||
width += elFormItem[i].offsetWidth + 32
|
||||
if (width > headerForm.value.$el.offsetWidth) {
|
||||
headerFormSecond.value.$el.appendChild(elFormItem[i])
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否需要折叠
|
||||
if (headerFormSecond.value.$el.scrollHeight > 0) {
|
||||
showUnfoldButton.value = true
|
||||
} else {
|
||||
showUnfoldButton.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showSelect = ref(false)
|
||||
const showSelectChange = () => {
|
||||
showSelect.value = !showSelect.value
|
||||
setTimeout(() => {
|
||||
emit('selectChange', showSelect.value, tableHeader.value.offsetHeight)
|
||||
}, 20)
|
||||
}
|
||||
const onComSearch = async () => {
|
||||
if (props.datePicker) {
|
||||
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
|
||||
tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
|
||||
tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
|
||||
}
|
||||
|
||||
await tableStore.onTableAction('search', {})
|
||||
}
|
||||
const setDatePicker = (list: any) => {
|
||||
datePickerRef.value.setTimeOptions(list)
|
||||
}
|
||||
const onResetForm = () => {
|
||||
//时间重置成默认值
|
||||
datePickerRef.value?.setInterval(3)
|
||||
tableStore.onTableAction('reset', {})
|
||||
}
|
||||
const setInterval = (val: any) => {
|
||||
datePickerRef.value.setInterval(val)
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableStore.onTableAction('export', { showAllFlag: true })
|
||||
}
|
||||
|
||||
defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange, computedSearchRow })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cn-table-header {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
|
||||
border-bottom: none;
|
||||
padding: 13px 15px 9px;
|
||||
font-size: 14px;
|
||||
|
||||
.table-header-operate-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-com-search {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
border: 1px solid var(--ba-border-color);
|
||||
border-bottom: none;
|
||||
padding: 13px 15px 20px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#header-form-second,
|
||||
#header-form {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.mlr-12 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.mlr-12 + .el-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.table-search {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
.quick-search {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-button-group {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
overflow: hidden;
|
||||
|
||||
button:focus,
|
||||
button:active {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.table-search-button-item {
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-border {
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.table-search-button-group {
|
||||
button:focus,
|
||||
button:active {
|
||||
background-color: var(--el-color-info-dark-2);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
|
||||
el-icon {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header-form,
|
||||
#header-form-second {
|
||||
:deep(.el-select) {
|
||||
--el-select-width: 220px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
--el-input-width: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +1,24 @@
|
||||
<template>
|
||||
<div :style="{ 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-config="{ remote: true }"
|
||||
@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-config="{ remote: true }" @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>
|
||||
@@ -47,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>
|
||||
@@ -81,11 +56,13 @@ const key = ref(0)
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
isGroup?: boolean
|
||||
showOverflow?: boolean
|
||||
height?: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isGroup: false,
|
||||
showOverflow: true
|
||||
showOverflow: true,
|
||||
height: undefined
|
||||
})
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||
@@ -119,7 +96,7 @@ const handleSortChange = ({ field, order }: any) => {
|
||||
return a[field] < b[field] ? 1 : -1
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
if (tableStore.isWebPaging) {
|
||||
tableStore.table.data = JSON.parse(
|
||||
JSON.stringify(
|
||||
@@ -148,6 +125,7 @@ watch(
|
||||
() => tableStore.table.allFlag,
|
||||
newVal => {
|
||||
if (tableStore.table.allFlag) {
|
||||
|
||||
tableRef.value?.exportData({
|
||||
filename: tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
@@ -207,7 +185,5 @@ defineExpose({
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<!-- @/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue -->
|
||||
|
||||
Reference in New Issue
Block a user