终端管理-数据方案页面
This commit is contained in:
zhujiyan
255
src/views/govern/terminal/planData/components/deviceInfo.vue
Normal file
255
src/views/govern/terminal/planData/components/deviceInfo.vue
Normal 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>
|
||||
@@ -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.name }}
|
||||
<el-descriptions-item label="方案名称">
|
||||
{{ deviceData[0]?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ echoName(deviceData.devType, devTypeOptions) }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ deviceData.devAccessMethod }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="统计间隔">
|
||||
{{ deviceData.ndid }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ echoName(deviceData.devModel, devModelOptions) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ deviceData.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="起始时间">
|
||||
{{ deviceData.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">
|
||||
{{ deviceData.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="安装位置">
|
||||
{{ echoName(deviceData.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>
|
||||
<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="测试项名称">
|
||||
{{ item.name+(index+1) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ echoName(item.devType, devTypeOptions) }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ item.devAccessMethod }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="统计间隔">
|
||||
{{ item.ndid }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ echoName(item.devModel, devModelOptions) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ item.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="起始时间">
|
||||
{{ item.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">
|
||||
{{ item.time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="安装位置">
|
||||
{{ echoName(item.devModel, devModelOptions) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="操作">
|
||||
<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(() => {
|
||||
// getTargetById(dataSet.value).then(res => {
|
||||
// tableData.value = res.data
|
||||
// tableLoading.value = false
|
||||
// })
|
||||
}, 100)
|
||||
// tableLoading.value = true
|
||||
// tableData.value = []
|
||||
// setTimeout(() => {
|
||||
// getTargetById(dataSet.value).then(res => {
|
||||
// tableData.value = res.data
|
||||
// tableLoading.value = false
|
||||
// })
|
||||
// }, 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>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user