修改冀北现场问题

绘制 算法库 案例库页面
联调 辽宁 有功功率页面
This commit is contained in:
GGJ
2024-09-04 20:59:57 +08:00
parent 3ac62fc98c
commit 630156f221
21 changed files with 7777 additions and 81 deletions

View File

@@ -0,0 +1,84 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="700px">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
<el-form-item label="算法名称">
<el-input v-model="form.name" placeholder="请输入算法名称" />
</el-form-item>
<el-form-item label="定义">
<el-input v-model="form.code" placeholder="请输入定义" />
</el-form-item>
<el-form-item label="计算公式">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入计算公式" />
</el-form-item>
<el-form-item label="计算周期">
<el-input v-model="form.code" placeholder="请输入计算周期" />
</el-form-item>
<el-form-item label="数据来源">
<el-input v-model="form.code" placeholder="请输入数据来源" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
code: '',
name: '',
remark: '',
id: ''
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
}
}
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
// await update(form)
} else {
// await create(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

View File

@@ -0,0 +1,188 @@
<template>
<!-- 算法库 -->
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<algorithmTree
:default-expand-all="false"
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
:current-node-key="monitoringPoint.state.lineId"
@node-click="handleNodeClick"
@init="handleNodeClick"
></algorithmTree>
</pane>
<pane style="background: #fff" :style="height">
<!-- <div :style="height"></div> -->
<TableHeader ref="TableHeaderRef" :show-search="false">
<template v-slot:select>
<el-radio-group v-model="tableStore.table.params.radio2" @change="tableStore.index()">
<el-radio-button label="监测覆盖率" value="1" />
<el-radio-button label="装置在线率" value="2" />
<el-radio-button label="数据完整性" value="3" />
</el-radio-group>
</template>
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
</pane>
</splitpanes>
<!-- 弹框 -->
<PopupEdit ref="popupEditRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import Table from '@/components/table/index.vue'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import PopupEdit from './components/form.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'database/algorithm'
})
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(20)
const size = ref(0)
const popupEditRef = ref()
const TableHeaderRef = ref()
const dotList: any = ref({
name: monitoringPoint.state.lineName.split('>')[3],
id: monitoringPoint.state.lineId,
level: 6
})
const templatePolicy: any = ref([])
const tableStore = new TableStore({
url: '/user-boot/dept/deptTree',
method: 'POST',
column: [
{ title: '算法名称', field: 'name' },
{
title: '定义',
field: 'name1'
},
{
title: '计算公式',
field: 'name2'
},
{
title: '计算周期',
field: 'name3'
},
{
title: '数据来源',
field: 'name4'
},
{
title: '是否启用',
field: 'name5',
render: 'tag',
effect: 'dark',
custom: {
0: 'info',
1: 'success'
},
replaceValue: {
0: '否',
1: '是'
}
}
// {
// title: '操作',
// align: 'center',
// width: '180',
// render: 'buttons',
// buttons: [
// {
// name: 'edit',
// title: '编辑',
// type: 'primary',
// icon: 'el-icon-EditPen',
// render: 'basicButton',
// click: async row => {}
// }
// ]
// }
],
loadCallback: () => {
tableStore.table.data = [
{
name: '测试名称',
name1: 'xxx',
name2: 'XXX',
name3: '1月',
name4: '单体系统',
name5: '1'
},
{
name: '测试名称',
name1: 'xxx',
name2: 'XXX',
name3: '1月',
name4: '单体系统',
name5: '0'
}
]
}
})
tableStore.table.params.radio2 = '1'
// 弹框
const addUser = () => {
popupEditRef.value.open('新增算法')
}
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
tableStore.index()
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.grid-content {
text-align: center;
}
.divBox {
width: 250px;
height: 31px;
margin: auto;
line-height: 32px;
border: 1px solid #c9c9c9;
&:hover {
border: 1px solid #002255;
}
}
.box {
padding: 10px;
// margin-top: 10px;
overflow-y: auto;
font-size: 15px;
}
.el-divider--horizontal {
margin: 10px 0;
}
.mTop {
margin-top: 5px;
margin-bottom: 5px;
}
</style>

View File

@@ -0,0 +1,84 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="700px">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
<el-form-item label="算法名称">
<el-input v-model="form.name" placeholder="请输入算法名称" />
</el-form-item>
<el-form-item label="定义">
<el-input v-model="form.code" placeholder="请输入定义" />
</el-form-item>
<el-form-item label="计算公式">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入计算公式" />
</el-form-item>
<el-form-item label="计算周期">
<el-input v-model="form.code" placeholder="请输入计算周期" />
</el-form-item>
<el-form-item label="数据来源">
<el-input v-model="form.code" placeholder="请输入数据来源" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
code: '',
name: '',
remark: '',
id: ''
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
}
}
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
// await update(form)
} else {
// await create(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

View File

@@ -0,0 +1,84 @@
<template>
<!-- 案例库 -->
<div class="default-main">
<TableHeader ref="TableHeaderRef" datePicker>
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<!-- 弹框 -->
<PopupEdit ref="popupEditRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import Table from '@/components/table/index.vue'
import PopupEdit from './components/form.vue'
defineOptions({
name: 'database/case'
})
const popupEditRef = ref()
const TableHeaderRef = ref()
const tableStore = new TableStore({
url: '/user-boot/dept/deptTree',
method: 'POST',
column: [
{ title: '电能质量事件名称', field: 'name' },
{
title: '发生事件',
field: 'name1'
},
{
title: '发生地点',
field: 'name2'
},
{
title: '处理措施',
field: 'name3'
},
{
title: '治理效果',
field: 'name4'
}
],
loadCallback: () => {
tableStore.table.data = [
{
name: '测试名称',
name1: 'xxx',
name2: 'XXX',
name3: '1月',
name4: '单体系统',
name5: '1'
},
{
name: '测试名称',
name1: 'xxx',
name2: 'XXX',
name3: '1月',
name4: '单体系统',
name5: '0'
}
]
}
})
// 弹框
const addUser = () => {
popupEditRef.value.open('新增算法')
}
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>
<style lang="scss"></style>

View File

@@ -0,0 +1,11 @@
<template>
<div> 标准</div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,11 @@
<template>
<div> 模版</div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
</style>