指标字典

This commit is contained in:
sjl
2024-11-04 18:43:24 +08:00
parent 9a9807230d
commit c0fcba6a25
10 changed files with 495 additions and 4 deletions

View File

@@ -1,6 +1,7 @@
{
"cSpell.words": [
"Chns",
"Combox",
"daterange",
"devicedata",
"errordata",

View File

@@ -1,7 +1,11 @@
/**
* 模拟字典静态数据,有后端接口后,需要删除 todo...
*/
import { Dict } from '@/api/interface'
/**
* 模拟字典静态数据,有后端接口后,需要删除 todo...
*/
import type { Dict } from '@/api/interface'
const dictData: Dict[] = [
{

View File

@@ -0,0 +1,22 @@
import http from '@/api'
import { type Dict } from '@/api/system/dictionary/interface'
//获取字典类型
export const getDictPqList = (params: Dict.ReqDictPqParams) => {
return http.post(`/dictPq/list`, params)
}
//添加字典类型
export const addDictPq = (params: Dict.ResDictPq) => {
return http.post(`/dictPq/add`, params)
}
//编辑字典类型
export const updateDictPq = (params: Dict.ResDictPq) => {
return http.post(`/dictPq/update`, params)
}
//删除字典类型
export const deleteDictPq = (params: string[]) => {
return http.post(`/dictPq/delete`, params)
}

View File

@@ -80,4 +80,63 @@ export namespace Dict {
}
/**
* 电能质量指标字典数据表格分页查询参数
*/
export interface ReqDictPqParams extends ReqPage{
id: string; // 类型id 必填
name?: string; // 名称
phase?: string;//相别
dataType?: string;//数据模型(epd、pqd...)
}
/**
* 电能质量指标字典数据新增、修改、根据id查询返回的对象
*/
export interface ResDictPq {
id: string;//指标字典表Id
name: string;//指标名称
phase: string;//相别
dataType: string;//数据模型(epd、pqd...)
otherName?: string | null;//别名默认与Name相同主要是为了适配不同数据库里面字段
showName?:string | null;//显示名称
sort:number;//排序
type?: string | null;//指标数据类型(整型、浮点型、枚举型这些的)
unit?: string | null;//单位
harmStart?:number | null;//起始次数
harmEnd?:number | null;//结束次数
classId?: string | null;//数据表表名
statMethod?:string | null;//数据统计类型最大、最小、平均、CP95
systemType?:string | null;//系统类别(区分用能/电能)
tranFlag?:number | null;//数据是否上送0:不上送 1:上送)
tranRule?:string | null;//上送规则 变化:“change”周期 :“ period”
eventType?:string | null;//evt的事件类别 "1"、"2"
storeFlag?:string | null;//sts、di的是否存储 1:存储 0:不存 储;
curSts?:number | null;//sts、do的当前值
ctlSts?:number | null;//do的是否可远程控制 1:是 0:否;
maxNum?:number | null;//设置最大值
minNum?: number | null;//设置最小值
setValue?:string | null;//参数为enum可设置的所有值序列
strlen?:number | null;//参数string可设置字符串的长度上 限
defaultValue?:string | null; //参数缺省值、告警code值
resourcesId?:string | null; //报表数据来源(统计表表名)
limitName?:string | null; //限值字段名称
limitTable?:string | null;//限值表名
formula?:string | null;//超标判断方式
primaryFormula?:string | null;//二次值转一次值公式
state:number;//状态0-删除 1-正常
createBy?:string | null;//创建用户
createTime?:string | null;//创建时间
updateBy?:string | null;//更新用户
updateTime?:string | null;//更新时间
}
/**
* 电能质量指标字典数据表格查询分页返回的对象;
*/
export interface ResDictPqPage extends ResPage<ResDictPq> {
}
}

View File

@@ -1,6 +1,7 @@
import { Login } from './interface'
import { ADMIN as rePrefix } from '@/api/config/serviceName'
import http from '@/api'
import type { Dict } from '../interface'
/**
* @name 登录模块
*/
@@ -23,3 +24,9 @@ export const getAuthButtonListApi = () => {
export const logoutApi = () => {
return http.post(`${rePrefix}/logout`)
}
//获取下拉框列表
export const getDictList = (params:string) =>{
return http.post('/dictData/dictDataCache',params)
}

View File

@@ -45,6 +45,7 @@ export const useAuthStore = defineStore({
async getAuthMenuList() {
const { data } = await getAuthMenuListApi();
this.authMenuList = data;
},
// Set RouteName
async setRouteName(name: string) {

View File

@@ -4,6 +4,9 @@ import { DICT_STORE_KEY } from '@/stores/constant'
// 模拟数据
import dictData from '@/api/system/dictData'
//import { getDictList } from '@/api/user/login.ts'
//const dictData = getDictList
export const useDictStore = defineStore({
id: DICT_STORE_KEY,
state: () => ({

View File

@@ -0,0 +1,240 @@
<template>
<el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogMiddle' @close="close">
<div>
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' class='form-two'>
<el-form-item label='数据模型' :label-width='100' prop='dataType'>
<el-select v-model="formContent.dataType" placeholder="请选择资源类型">
<el-option
v-for="item in dictStore.getDictData('dataType')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='指标名称' :label-width='100' prop='name'>
<el-input v-model='formContent.name' placeholder='请输入' autocomplete='off' />
</el-form-item>
<el-form-item label='别名' :label-width='100' prop='otherName'>
<el-input v-model='formContent.otherName' placeholder='请输入' autocomplete='off' />
</el-form-item>
<el-form-item label='显示名称' :label-width='100' prop='showName'>
<el-input v-model='formContent.showName' placeholder='请输入' autocomplete='off' />
</el-form-item>
<el-form-item label='相别' :label-width='100' prop='phase'>
<el-select v-model="formContent.phase" placeholder="请选择相别">
<el-option
v-for="item in dictStore.getDictData('dataType')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='单位' :label-width='100' prop='unit'>
<el-input v-model='formContent.unit' placeholder='请输入单位' autocomplete='off' />
</el-form-item>
<el-form-item label='指标数据类型' :label-width='100' prop='type'>
<el-input v-model='formContent.type' placeholder='请输入指标数据类型' autocomplete='off' />
</el-form-item>
<el-form-item label='开始结束' :label-width='100' prop='type'>
<el-input v-model='formContent.type' placeholder='请输入开始结束' autocomplete='off' />
</el-form-item>
<el-form-item label='数据统计类型' :label-width='100' prop='statMethod'>
<el-select v-model="formContent.statMethod" placeholder="请选择数据统计类型">
<el-option
v-for="item in dictStore.getDictData('statMethod')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='报表数据来源' :label-width='100' prop='resourcesId'>
<el-select v-model="formContent.resourcesId" placeholder="请选择报表数据来源">
<el-option
v-for="item in dictStore.getDictData('statMethod')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='数据表表名' :label-width='100' prop='statMethod'>
<el-select v-model="formContent.statMethod" placeholder="请选择数据表表名">
<el-option
v-for="item in dictStore.getDictData('statMethod')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='排序' :label-width='100'>
<el-input-number v-model='formContent.sort' />
</el-form-item>
<el-form-item label='限值字段名称' :label-width='100' prop='limitName'>
<el-input v-model='formContent.limitName' placeholder='请输入限值字段名称' autocomplete='off' />
</el-form-item>
<el-form-item label='限值表名' :label-width='100' prop='limitTable'>
<el-input v-model='formContent.limitTable' placeholder='请输入限值表名' autocomplete='off' />
</el-form-item>
<el-form-item label='超标判断方式' :label-width='100' prop='formula'>
<el-select v-model="formContent.formula" placeholder="请选择超标判断方式">
<el-option
v-for="item in dictStore.getDictData('formula')"
:key="item.id"
:label="item.label"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label='参数缺省值' :label-width='100' prop='defaultValue'>
<el-input v-model='formContent.defaultValue' placeholder='请输入参数缺省值' autocomplete='off' />
</el-form-item>
<el-form-item label='事件类别' :label-width='100' prop='eventType'>
<el-input v-model='formContent.eventType' placeholder='请输入事件类别' autocomplete='off' />
</el-form-item>
<el-form-item label='设置最大值' :label-width='100' prop='maxNum'>
<el-input v-model='formContent.maxNum' placeholder='请输入最大值' autocomplete='off' />
</el-form-item>
<el-form-item label='设置最小值' :label-width='100' prop='minNum'>
<el-input v-model='formContent.minNum' placeholder='请输入最小值' autocomplete='off' />
</el-form-item>
<el-form-item label='枚举序列' :label-width='100' prop='setValue'>
<el-input v-model='formContent.setValue' placeholder='请输入枚举序列' autocomplete='off' />
</el-form-item>
<el-form-item label='字符串长度上限' :label-width='100' prop='strlen'>
<el-input v-model='formContent.strlen' placeholder='请输入字符串长度上限' autocomplete='off' />
</el-form-item>
<el-form-item label='上送规则' :label-width='100' prop='tranRule'>
<el-input v-model='formContent.tranRule' placeholder='请输入上送规则' autocomplete='off' />
</el-form-item>
<el-form-item label="是否可远程控制" :label-width="100">
<el-radio-group v-model="formContent.ctlSts" >
<el-radio-button label="是" :value="1"></el-radio-button>
<el-radio-button label="否" :value="0"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="是否存储" :label-width="100">
<el-radio-group v-model="formContent.storeFlag" >
<el-radio-button label="是" :value="1"></el-radio-button>
<el-radio-button label="否" :value="0"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="数据是否上送" :label-width="100">
<el-radio-group v-model="formContent.tranFlag" >
<el-radio-button label="是" :value="1"></el-radio-button>
<el-radio-button label="否" :value="0"></el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='save()'>
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogMiddle } from '@/utils/elementBind'
import { type Dict } from '@/api/system/dictionary/interface'
import { ElMessage, type FormItemRule } from 'element-plus'
import { addDictPq, updateDictPq } from '@/api/system/dictionary/dictPq'
import { computed, type Ref, ref } from 'vue';
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<Dict.ResDictPq>({
id: '',
name: '',
phase: '',
sort: 100,
dataType: '',
state: 1,
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
phase: '',
sort: 100,
dataType: '',
state: 1,
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
})
// 定义表单校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '类型名称必填!', trigger: 'blur' }],
code: [{ required: true, message: '类型编码必填!', trigger: 'blur' }],
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateDictPq(formContent.value)
} else {
await addDictPq(formContent.value)
}
ElMessage.success({ message: `${dialogTitle.value}成功!` })
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗,可能是新增,也可能是编辑
const open = (sign: string, data: Dict.ResDictType) => {
titleType.value = sign
dialogVisible.value = true
if (data.id) {
formContent.value = { ...data }
} else {
resetFormContent()
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

View File

@@ -0,0 +1,154 @@
<template>
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:columns='columns'
:request-api='getDictPqList'
>
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除
</el-button>
</template>
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
<pq-popup :refresh-table='proTable?.getTableList' ref='pqPopup'/>
</template>
<script setup lang='tsx' name='dict'>
import {CirclePlus, Delete, EditPen, Download, View} from '@element-plus/icons-vue'
import {Dict} from '@/api/system/dictionary/interface'
import {ProTableInstance, ColumnProps} from '@/components/ProTable/interface'
import PqPopup from '@/views/system/dictionary/dictPq/components/pqPopup.vue'
import {useDictStore} from '@/stores/modules/dict'
import {useHandleData} from '@/hooks/useHandleData'
import {
getDictPqList,
deleteDictPq,
} from '@/api/system/dictionary/dictPq'
import { reactive, ref } from 'vue'
const dictStore = useDictStore()
const proTable = ref<ProTableInstance>()
const pqPopup = ref()
const columns = reactive<ColumnProps<Dict.ResDictPq>[]>([
{type: 'selection', fixed: 'left', width: 70},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'dataType',
label: '数据模型',
width: 180,
search: {
el: 'select',
},
},
{
prop: 'name',
label: '指标名称',
width: 180,
search: {
el: 'input',
},
},
{
prop: 'otherName',
label: '别名',
minWidth: 300,
search: {
el: 'input',
},
},
{
prop: 'showName',
label: '显示名称',
width: 180,
search: {
el: 'input',
},
},
{
prop: 'phase',
label: '相别',
width: 180,
},
{
prop: 'phase',
label: '单位',
width: 180,
},
{
prop: 'type',
label: '指标数据类型',
width: 180,
},
{
prop: 'harmStart',
label: '数据谐波次数',
width: 180,
render: (scope) => {
return scope.row.harmStart
? `${scope.row.harmStart}-${scope.row.harmEnd}`
: '/'; // 如果 harmStart 为空,返回 \
},
},
{
prop: 'statMethod',
label: '数据统计类型',
width: 180,
},
{
prop: 'classId',
label: '数据表表名',
width: 180,
},
{
prop: 'resourcesId',
label: '报表数据来源',
width: 180,
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 330,
},
])
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictPq> = {}) => {
pqPopup.value?.open(titleType, row)
}
// 批量删除字典类型
const batchDelete = async (id: string[]) => {
await useHandleData(deleteDictPq, id, '删除所选字典类型')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除字典类型
const handleDelete = async (params: Dict.ResDictPq) => {
await useHandleData(deleteDictPq, [params.id], `删除【${params.name}】指标字典类型`)
proTable.value?.getTableList()
}
</script>

View File

@@ -22,7 +22,7 @@
</ProTable>
</div>
<DictData :width='viewWidth' :height='viewHeight' ref='openView'/>
<type-popup :refresh-table='proTable?.getTableList' ref='typePopup'/>
<TypePopup :refresh-table='proTable?.getTableList' ref='typePopup'/>
</template>
<script setup lang='tsx' name='dict'>
@@ -58,7 +58,7 @@ const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
},
},
{
prop: 'code',
prop: 'code',
label: '类型编码',
width: 180,
search: {