终端管理-数据方案页面

src/components/tree/index.vue

@@ -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"
+            v-show='menuCollapse'
-            @click="onMenuCollapse"
+            @click='onMenuCollapse'
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
-            size="18"
+            size='18'
-            class="fold ml10 mt20 menu-collapse"
+            class='fold ml10 mt20 menu-collapse'
-            style="cursor: pointer"
+            style='cursor: pointer'
         />
-        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
+        <div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
-            <div style="display: flex; align-items: center" class="mb10">
+            <div style='display: flex; align-items: center' class='mb10'>
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                <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"
+                    size='18'
-                    class="fold ml10 menu-collapse"
+                    class='fold ml10 menu-collapse'
-                    style="cursor: pointer"
+                    style='cursor: pointer'
+                    v-if='props.canExpand'
                 />
             </div>
             <el-tree
-                style="flex: 1; overflow: auto"
+                style='flex: 1; overflow: auto'
-                ref="treeRef"
+                ref='treeRef'
-                :props="defaultProps"
+                :props='defaultProps'
-                v-bind="$attrs"
                 highlight-current
-                default-expand-all
+               
-                :filter-node-method="filterNode"
+                :filter-node-method='filterNode'
-                node-key="id"
+                node-key='id'
+                v-bind='$attrs'
             >
-                <template #default="{ node, data }">
+                <template #default='{ node, data }'>
-                    <span class="custom-tree-node">
+                    <span class='custom-tree-node'>
                         <Icon
-                            :name="data.icon"
+                            :name='data.icon'
-                            style="font-size: 16px"
+                            style='font-size: 16px'
-                            :style="{ color: data.color }"
+                            :style='{ color: data.color }'
-                            v-if="data.icon"
+                            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;
+    // display: flex;
-    align-items: center;
+    // align-items: center;
 }
 </style>

src/styles/app.scss

@@ -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;

src/styles/element.scss

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

src/views/govern/terminal/planData/components/deviceInfo.vue

@@ -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>

src/views/govern/terminal/planData/index.vue

@@ -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" size="small" icon="el-icon-Plus" @click="handleOpen(0)">
-                    <el-button type="primary" icon="el-icon-Plus" @click="handleOpen(1)">
+                        新增方案
+                    </el-button>
+                    <el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(1)">
                         新增测试项
                     </el-button>
                 </template>
-                <el-descriptions-item label="测试项名称">
+                <el-descriptions-item label="方案名称">
-                    {{ deviceData.name }}
+                    {{ deviceData[0]?.name }}
                 </el-descriptions-item>
-                <el-descriptions-item label="PT变比">
+                <el-descriptions-item label="方案描述">
-                    {{ echoName(deviceData.devType, devTypeOptions) }}
+                    {{ echoName(deviceData[0]?.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>
             </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" size="small" 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-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
+    // tableLoading.value = true
-    tableData.value = []
+    // tableData.value = []
-    setTimeout(() => {
+    // setTimeout(() => {
-        // getTargetById(dataSet.value).then(res => {
+    //     getTargetById(dataSet.value).then(res => {
-        //     tableData.value = res.data
+    //         tableData.value = res.data
-        //     tableLoading.value = false
+    //         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>

src/views/govern/terminal/planData/popup.vue

@@ -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 = {