终端管理-数据方案页面

This commit is contained in:
zhujiyan
2024-06-14 16:00:23 +08:00
parent 730512468a
commit 2ce6656e0b
6 changed files with 381 additions and 120 deletions

View File

@@ -1,49 +1,50 @@
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
v-show='menuCollapse'
@click='onMenuCollapse'
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
size='18'
class='fold ml10 mt20 menu-collapse'
style='cursor: pointer'
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
<div style='display: flex; align-items: center' class='mb10'>
<el-input v-model='filterText' placeholder='请输入内容' clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
<Icon name='el-icon-Search' style='font-size: 16px' />
</template>
</el-input>
<Icon
@click="onMenuCollapse"
@click='onMenuCollapse'
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
size='18'
class='fold ml10 menu-collapse'
style='cursor: pointer'
v-if='props.canExpand'
/>
</div>
<el-tree
style="flex: 1; overflow: auto"
ref="treeRef"
:props="defaultProps"
v-bind="$attrs"
style='flex: 1; overflow: auto'
ref='treeRef'
:props='defaultProps'
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:filter-node-method='filterNode'
node-key='id'
v-bind='$attrs'
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<template #default='{ node, data }'>
<span class='custom-tree-node'>
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
:name='data.icon'
style='font-size: 16px'
:style='{ color: data.color }'
v-if='data.icon'
/>
<span style="margin-left: 4px">{{ node.label }}</span>
<span style='margin-left: 4px'>{{ node.label }}</span>
</span>
</template>
</el-tree>
@@ -51,7 +52,7 @@
</div>
</template>
<script lang="ts" setup>
<script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch } from 'vue'
@@ -59,12 +60,15 @@ import { ref, watch } from 'vue'
defineOptions({
name: 'govern/tree'
})
interface Props {
width?: string
canExpand?: boolean
}
const props = withDefaults(defineProps<Props>(), {
width: '280px'
width: '280px',
canExpand: true
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
@@ -88,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>
<style lang="scss" scoped>
<style lang='scss' scoped>
.cn-tree {
flex-shrink: 0;
display: flex;
@@ -97,18 +101,22 @@ defineExpose({ treeRef })
padding: 10px;
height: 100%;
width: 100%;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7);
}
.menu-collapse {
color: var(--el-color-primary);
}
}
.custom-tree-node {
display: flex;
align-items: center;
// display: flex;
// align-items: center;
}
</style>

View File

@@ -123,15 +123,6 @@ body,
}
}
}
.el-tree{
.el-tree-node__children{
display: block !important;
overflow: auto;
}
.el-tree-node .is-hidden .is-focusable{
display: block !important;
}
}
.zoom-handle {
position: absolute;
width: 20px;

View File

@@ -148,9 +148,6 @@
}
}
.el-select {
min-width: 200px;
}
.el-tabs__content {
height: calc(100% - 40px);

View File

@@ -0,0 +1,255 @@
<template>
<div class="table">
<el-button type="primary" @click="open">新增</el-button>
<!-- 设备信息 -->
<vxe-table
border
show-overflow
ref="tableRef"
:loading="loading"
align="center"
:data="tableData"
:edit-config="{ trigger: 'manual', mode: 'row' }"
>
<!-- <vxe-column type="seq" width="60"></vxe-column> -->
<vxe-column field="name" title="设备名称" width="150">
<template #edit="{ row }">
<vxe-input v-model="row.name" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="role" title="设备MAC" width="150">
<template #edit="{ row }">
<vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
</template>
</vxe-column>
<vxe-column field="num6" title="网络识别码" width="150">
<template #edit="{ row }">
<vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
</template>
</vxe-column>
<vxe-column field="sex" title="线路号" width="150" :edit-render="{}">
<!-- <template #default="{ row }">
<span>{{ formatSex(row.sex) }}</span>
</template> -->
<template #default="{ row }">
<el-select v-model="row.sex" @change="saveRowEvent(row)" style="width: 80px !important">
<el-option
v-for="item in sexList"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</template>
</vxe-column>
<vxe-column field="date12" title="数据起始时间" width="150">
<template #edit="{ row }">
<vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="date13" title="数据结束时间" width="150">
<template #edit="{ row }">
<vxe-input v-model="row.date13" type="week" placeholder="请选择日期" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column title="操作" width="160" fixed="right">
<template #default="{ row }">
<!-- <el-button type="primary" size="small" @click="editRowEvent(row)">修改</el-button> -->
<el-button type="danger" size="small" @click="delDevice(row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
<!-- 新增设备信息 -->
<el-dialog v-model="dialogVisible" width="65%" title="添加设备" draggable :append-to-body="true">
<vxe-table
border
show-overflow
ref="tableRef"
:loading="loading"
align="center"
:data="tableData"
:edit-config="{ trigger: 'manual', mode: 'row' }"
>
<!-- <vxe-column type="seq" width="60"></vxe-column> -->
<vxe-column field="name" title="设备名称">
<template #edit="{ row }">
<vxe-input v-model="row.name" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="role" title="设备MAC">
<template #edit="{ row }">
<vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
</template>
</vxe-column>
<vxe-column field="num6" title="网络识别码">
<template #edit="{ row }">
<vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
</template>
</vxe-column>
<vxe-column field="sex" title="线路号" :edit-render="{}">
<!-- <template #default="{ row }">
<span>{{ formatSex(row.sex) }}</span>
</template> -->
<template #default="{ row }">
<el-select v-model="row.sex" @change="saveRowEvent(row)" style="width: 80px !important">
<el-option
v-for="item in sexList"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</template>
</vxe-column>
</vxe-table>
<template #footer="">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VxeTableInstance } from 'vxe-table'
interface RowVO {
id: number
name: string
nickname: string
role: string
sex: string
sex2: string[]
num1: number
age: number
address: string
date12: string
date13: string
}
const tableRef: any = ref(null)
const loading = ref(false)
const tableData = ref([
{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 40,
age: 28,
address: 'Shenzhen',
date12: '',
date13: ''
},
{
id: 10002,
name: 'Test2',
nickname: 'T2',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 20,
age: 22,
address: 'Guangzhou',
date12: '',
date13: '2020-08-20'
},
{
id: 10003,
name: 'Test3',
nickname: 'T3',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32,
address: 'Shanghai',
date12: '2020-09-10',
date13: ''
},
{
id: 10004,
name: 'Test4',
nickname: 'T4',
role: 'Designer',
sex: '1',
sex2: ['1'],
num1: 30,
age: 23,
address: 'Shenzhen',
date12: '',
date13: '2020-12-04'
}
])
const sexList = ref([
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' }
])
const formatSex = (value: string) => {
if (value === '1') {
return '男'
}
if (value === '0') {
return '女'
}
return ''
}
const editRowEvent = (row: RowVO) => {
const $table = tableRef.value
if ($table) {
$table.setEditRow(row)
}
}
const saveRowEvent = (row: RowVO) => {
// const $table = tableRef.value
// if ($table) {
// $table.clearEdit().then(() => {
// loading.value = true
// setTimeout(() => {
// loading.value = false
// VxeUI.modal.message({ content: `保存成功name=${row.name}`, status: 'success' })
// }, 300)
// })
// }
}
const cancelRowEvent = (row: RowVO) => {
const $table = tableRef.value
if ($table) {
$table.clearEdit().then(() => {
// 还原行数据
$table.revertData(row)
})
}
}
//删除设备
const delDevice = (row: any) => {
console.log(row, '8888')
}
//添加设备
const dialogVisible = ref(false)
//
const open = () => {
dialogVisible.value = true
}
//提交所选择的设备
const submit = () => {
console.log(6666)
}
</script>
<style lang="scss" scoped>
.table {
height: 400px;
}
</style>

View File

@@ -2,49 +2,67 @@
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions title="测试项信息" class="mb10" :column="4" border>
<el-descriptions title="方案信息" class="mb10" :column="4" border>
<template #extra>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(1)">
<el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(0)">
新增方案
</el-button>
<el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(1)">
新增测试项
</el-button>
</template>
<el-descriptions-item label="方案名称">
{{ deviceData[0]?.name }}
</el-descriptions-item>
<el-descriptions-item label="方案描述">
{{ echoName(deviceData[0]?.devType, devTypeOptions) }}
</el-descriptions-item>
</el-descriptions>
<div class="history_title">
<p>测试项信息</p>
</div>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane v-for="(item, index) in deviceData" :label="item.name+(index+1)" :name="index">
<el-descriptions class="mb10" :column="4" border>
<el-descriptions-item label="测试项名称">
{{ deviceData.name }}
{{ item.name+(index+1) }}
</el-descriptions-item>
<el-descriptions-item label="PT变比">
{{ echoName(deviceData.devType, devTypeOptions) }}
{{ echoName(item.devType, devTypeOptions) }}
</el-descriptions-item>
<el-descriptions-item label="CT变比">
{{ deviceData.devAccessMethod }}
{{ item.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item label="统计间隔">
{{ deviceData.ndid }}
{{ item.ndid }}
</el-descriptions-item>
<el-descriptions-item label="电压等级">
{{ echoName(deviceData.devModel, devModelOptions) }}
{{ echoName(item.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="接线方式">
{{ deviceData.time }}
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="起始时间">
{{ deviceData.time }}
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ deviceData.time }}
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="安装位置">
{{ echoName(deviceData.devModel, devModelOptions) }}
{{ echoName(item.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="操作">
<el-button type="primary" icon="el-icon-EditPen" @click="handleOpen(2)">修改</el-button>
<el-button type="primary" icon="el-icon-InfoFilled" @click="handleOpen(3)">
<el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(2)">
修改
</el-button>
<el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(3)">
设备信息
</el-button>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
<div class="history_title">
<p>历史趋势</p>
</div>
@@ -72,8 +90,10 @@
</el-form-item>
</el-form>
<div class="history_searchBtn">
<el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button>
<el-button type="primary" icon="el-icon-Download" @click="handleExport">报表导出</el-button>
<el-button type="primary" size="small" icon="el-icon-Search" @click="handleSearch">查询</el-button>
<el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
报表导出
</el-button>
</div>
</div>
<div class="history_chart">
@@ -125,7 +145,7 @@ const pageHeight = mainHeight(20)
const loading = ref(true)
const tableLoading = ref(false)
const getGroupLoading = ref(false)
const deviceData = ref<any>(null)
const deviceData = ref<any>([])
const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
@@ -150,6 +170,7 @@ const rankOptions = ref([
label: '3级'
}
])
const activeName: any = ref()
const nodeClick = (e: anyObj) => {
if (!e) {
loading.value = false
@@ -157,9 +178,15 @@ const nodeClick = (e: anyObj) => {
}
if (e.level == 2) {
loading.value = true
deviceData.value=[]
getDeviceData(e.id, 'rt').then((res: any) => {
deviceData.value = res.data
// deviceData.value = res.data
loading.value = false
for (let i = 0; i < 5; i++) {
deviceData.value.push(res.data)
}
console.log(deviceData.value, '0000000')
activeName.value=0
if (res.data.dataSetList.length === 0) {
dataSet.value = ''
tableData.value = []
@@ -171,14 +198,14 @@ const nodeClick = (e: anyObj) => {
}
}
const handleClick = () => {
tableLoading.value = true
tableData.value = []
setTimeout(() => {
// tableLoading.value = true
// tableData.value = []
// setTimeout(() => {
// getTargetById(dataSet.value).then(res => {
// tableData.value = res.data
// tableLoading.value = false
// })
}, 100)
// }, 100)
}
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
@@ -331,31 +358,6 @@ const init = () => {
}
}
],
dataZoom: [
{
type: 'inside',
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: 'slider',
realtime: true,
start: 0,
end: 100,
textStyle: {
// color: 'white'
},
bottom: 0,
borderColor: '#0e2038',
dataBackground: {
areaStyle: {
// color: 'white'
}
}
}
],
series: [
{
name: 'A相',
@@ -462,7 +464,8 @@ onMounted(() => {
.device-manage-right {
overflow: hidden;
flex: 1 !important;
padding: 10px 10px 10px 0;
padding: 10px 10px 10px 10px;
border: 2px solid #eeeeee;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
@@ -498,7 +501,10 @@ onMounted(() => {
}
.history_chart {
width: 100%;
height: calc(100vh - 400px);
height: calc(100vh - 530px);
margin-top: 10px;
}
::v-deep .el-select{
width:200px !important;
}
</style>

View File

@@ -153,8 +153,11 @@
</el-form-item>
</div>
</div>
<!-- 设备信息列表 -->
</el-form>
<!-- 设备信息列表 -->
<div v-if="activeFormIndex == 3" style="height: 400px">
<deviceInfo />
</div>
<template #footer="">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
@@ -165,6 +168,7 @@
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import deviceInfo from './components/deviceInfo.vue'
const dialogVisible = ref(false)
const form = ref({})
form.value = {