数据方案-设备信息联调

src/api/cs-device-boot/planData.ts

@@ -9,14 +9,14 @@ export function getSchemeTree() {
 }
 
 // 根据方案查询测试项信息
-export function getTestRecordInfo(id:any) {
+export function getTestRecordInfo(id: any) {
     return createAxios({
-        url: '/cs-device-boot/wlRecord/getTestRecordById?testRecordId='+id,
+        url: '/cs-device-boot/wlRecord/getTestRecordById?testRecordId=' + id,
         method: 'GET'
     })
 }
 //新增修改方案
-export function addPlan(data:any) {
+export function addPlan(data: any) {
     return createAxios({
         url: '/cs-device-boot/wlRecord/updateSchemeRecord',
         method: 'POST',
@@ -25,7 +25,7 @@ export function addPlan(data:any) {
 }
 
 //新增测试项
-export function addRecord(data:any) {
+export function addRecord(data: any) {
     return createAxios({
         url: '/cs-device-boot/wlRecord/addRecord',
         method: 'POST',
@@ -34,7 +34,7 @@ export function addRecord(data:any) {
 }
 
 //新增测试项
-export function updateRecord(data:any) {
+export function updateRecord(data: any) {
     return createAxios({
         url: '/cs-device-boot/wlRecord/updateTestRecord',
         method: 'POST',
@@ -43,16 +43,15 @@ export function updateRecord(data:any) {
 }
 
 //删除方案或测试项
-export function delRecord(data:any) {
+export function delRecord(data: any) {
     return createAxios({
-        url: '/cs-device-boot/wlRecord/deleteRecord?id='+data.id,
+        url: '/cs-device-boot/wlRecord/deleteRecord?id=' + data.id,
-        method: 'DELETE',
+        method: 'DELETE'
     })
 }
 
-
 //查询历史趋势折线图
-export function getHistoryTrend(data:any) {
+export function getHistoryTrend(data: any) {
     return createAxios({
         url: '/cs-device-boot/wlRecord/queryCommonStatisticalByTest',
         method: 'POST',
@@ -61,7 +60,7 @@ export function getHistoryTrend(data:any) {
 }
 
 //查询设备列表
-export function getDeviceList(data:any) {
+export function getDeviceList(data: any) {
     return createAxios({
         url: '/cs-device-boot/wlRecord/queryPage',
         method: 'POST',
@@ -69,3 +68,20 @@ export function getDeviceList(data:any) {
     })
 }
 
+//添加测试项中的设备基础数据
+export function addDevice(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/wlRecord/saveDataRecord',
+        method: 'POST',
+        data
+    })
+}
+
+//删除测试项中的设备基础数据
+export function delDevice(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/wlRecord/deleteDataRecord',
+        method: 'DELETE',
+        data
+    })
+}

src/components/form/datePicker/index.vue

@@ -496,7 +496,7 @@ function formatDate(date: Date): string {
     const day = String(date.getDate()).padStart(2, '0')
     return `${year}-${month}-${day}`
 }
-defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth })
+defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth,timeChange })
 </script>
 
 <style scoped>

src/components/table/header/index.vue

@@ -152,6 +152,8 @@ const onComSearch = async () => {
     await tableStore.onTableAction('search', {})
 }
 const onResetForm = () => {
+    //时间重置成默认值
+    datePickerRef.value?.timeChange(3)
     tableStore.onTableAction('reset', {})
 }
 const setDatePicker = (list: any) => {

src/components/tree/govern/deviceInfoTree.vue

@@ -0,0 +1,107 @@
+<template>
+    <Tree
+        ref="treRef"
+        @check-change="handleCheckChange"
+        :default-checked-keys="defaultCheckedKeys"
+        :show-checkbox="props.showCheckbox"
+        :data="tree"
+    />
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineProps } from 'vue'
+import Tree from '../index.vue'
+import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
+import { useConfig } from '@/stores/config'
+defineOptions({
+    name: 'govern/deviceTree'
+})
+const props = withDefaults(
+    defineProps<{
+        showCheckbox?: boolean
+        defaultCheckedKeys?: any
+    }>(),
+    {
+        showCheckbox: false,
+        defaultCheckedKeys: [],
+    }
+)
+
+const emit = defineEmits(['init', 'checkChange'])
+const config = useConfig()
+const tree = ref()
+const treRef = ref()
+getDeviceTree().then(res => {
+    return
+    let arr: any[] = []
+    res.data.forEach((item: any) => {
+        item.icon = 'el-icon-HomeFilled'
+        item.color = config.getColorVal('elementUiPrimary')
+        item.children.forEach((item2: any) => {
+            item2.icon = 'el-icon-List'
+            item2.color = config.getColorVal('elementUiPrimary')
+            item2.children.forEach((item3: any) => {
+                item3.icon = 'el-icon-Platform'
+                item3.color = config.getColorVal('elementUiPrimary')
+                if (item3.comFlag === 1) {
+                    item3.color = '#e26257 !important'
+                }
+                arr.push(item3)
+            })
+        })
+    })
+    tree.value = res.data
+    nextTick(() => {
+        if (arr.length) {
+            treRef.value.treeRef.setCurrentKey(arr[0].id)
+            // 注册父组件事件
+            emit('init', {
+                level: 2,
+                ...arr[0]
+            })
+        } else {
+            emit('init')
+        }
+    })
+})
+const getTreeList = (list:any) => {
+    let arr: any[] = []
+   list.forEach((item: any) => {
+        item.icon = 'el-icon-HomeFilled'
+        item.color = config.getColorVal('elementUiPrimary')
+        item.children.forEach((item2: any) => {
+            item2.icon = 'el-icon-List'
+            item2.color = config.getColorVal('elementUiPrimary')
+            item2.children?.forEach((item3: any) => {
+                item3.icon = 'el-icon-Platform'
+                item3.color = config.getColorVal('elementUiPrimary')
+                if (item3.comFlag === 1) {
+                    item3.color = '#e26257 !important'
+                }
+                arr.push(item3)
+            })
+        })
+    })
+    tree.value = list;
+    nextTick(() => {
+        if (arr.length) {
+            treRef.value.treeRef.setCurrentKey(arr[0].id)
+            // 注册父组件事件
+            emit('init', {
+                level: 2,
+                ...arr[0]
+            })
+        } else {
+            emit('init')
+        }
+    })
+}
+const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
+    emit('checkChange', {
+        data,
+        checked,
+        indeterminate
+    })
+}
+defineExpose({getTreeList})
+</script>

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

@@ -0,0 +1,256 @@
+<template>
+    <el-dialog
+        class="cn-operate-dialog device-manage-popup"
+        v-model="dialogVisible"
+        title="设备信息"
+        draggable
+        width="85%"
+    >
+        <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button>
+        <el-popconfirm
+            confirm-button-text="是"
+            cancel-button-text="否"
+            icon-color="#626AEF"
+            title="是否确认删除所选数据？"
+            @confirm="handleDelete('')"
+            @cancel="cancelDelete"
+        >
+            <template #reference>
+                <el-button type="danger" :disabled="checkedList.length == 0" v-if="!addFlag">删除</el-button>
+            </template>
+        </el-popconfirm>
+
+        <div class="default-main device-manage" v-show="addFlag" v-loading="loading">
+            <deviceInfoTree
+                :showCheckbox="true"
+                :default-checked-keys="defaultCheckedKeys"
+                @checkChange="checkChange"
+                ref="deviceInfoTreeRef"
+            ></deviceInfoTree>
+            <div class="device-manage-right">
+                <TableHeader datePicker ref="TableHeaderRef"></TableHeader>
+                <Table ref="tableRef" />
+            </div>
+        </div>
+        <div
+            class="default-main device-manage"
+            v-show="!addFlag"
+            :style="{ height: pageHeight.height }"
+            v-loading="loading"
+        >
+            <div class="device-manage-right" :style="{ height: pageHeight.height }">
+                <!-- <datePicker ref="datePickerRef"></datePicker>
+                <el-button type="primary" @click="handleSearch">查询</el-button> -->
+                <vxe-table
+                    v-bind="defaultAttribute"
+                    :data="tableData"
+                    height="auto"
+                    style="width: 100%; margin-top: 10px"
+                    ref="checkedTableRef"
+                    @checkbox-all="selectChangeEvent"
+                    @checkbox-change="selectChangeEvent"
+                >
+                    <vxe-column type="checkbox" width="60"></vxe-column>
+                    <vxe-column field="devName" title="设备名称"></vxe-column>
+                    <vxe-column field="devMac" title="设备MAC"></vxe-column>
+                    <vxe-column field="devNdId" title="网络识别码"></vxe-column>
+                    <vxe-column field="lineName" title="线路号"></vxe-column>
+                    <vxe-column field="startTime" title="开始时间"></vxe-column>
+                    <vxe-column field="endTime" title="结束时间"></vxe-column>
+                    <vxe-column title="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                            <el-popconfirm
+                                confirm-button-text="是"
+                                cancel-button-text="否"
+                                icon-color="#626AEF"
+                                title="是否确认删除当前数据？"
+                                @confirm="handleDelete(row)"
+                                @cancel="cancelDelete"
+                            >
+                                <template #reference>
+                                    <el-button type="danger" size="small">删除</el-button>
+                                </template>
+                            </el-popconfirm>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </div>
+        </div>
+        <template #footer="">
+            <el-button @click="close">取 消</el-button>
+            <el-button type="primary" @click="submit" v-if="addFlag">确 定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import deviceInfoTree from '@/components/tree/govern/deviceInfoTree.vue'
+import { mainHeight } from '@/utils/layout'
+import { ref, onMounted, provide, watch } from 'vue'
+import { getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import { ElMessage } from 'element-plus'
+import TableHeader from '@/components/table/header/index.vue'
+const pageHeight = mainHeight(-20)
+const loading = ref(false)
+const defaultCheckedKeys: any = ref([])
+const tableData = ref([])
+defineOptions({
+    name: 'govern/tourist/index'
+})
+const treeIds: any = ref(['-1'])
+//树节点选择变化的时候处理树节点选中数据
+const checkChange = async (data: any) => {
+    if (data.checked) {
+        defaultCheckedKeys.value.push(data.data.id)
+        data.data.children?.map((item: any) => {
+            treeIds.value.push(item.id)
+        })
+    } else {
+        defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
+        data.data.children?.map((item: any) => {
+            treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
+        })
+    }
+    // await tableStore.index()
+}
+const datePickerRef = ref()
+const handleSearch = () => {
+    console.log(datePickerRef.value.timeValue)
+}
+const dialogVisible = ref(false)
+const deviceInfoTreeRef = ref()
+//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
+const addFlag = ref(false)
+const selectId: any = ref('')
+//查绑定测试项列表
+const getSelectedTable = (id: any) => {
+    getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
+        tableData.value = res.data.records
+    })
+}
+//新增设备列表
+const tableStore = new TableStore({
+    url: '/cs-device-boot/wlRecord/queryPage',
+    // publicHeight: 65,
+    method: 'POST',
+    column: [
+        { width: '60', type: 'checkbox' },
+        { title: '序号', type: 'seq', width: 80 },
+        { field: 'devName', title: '设备名称', minWidth: 170 },
+        { field: 'devMac', title: '设备MAC', minWidth: 170 },
+        { field: 'devNdId', title: '网络识别码', minWidth: 170 },
+        { field: 'lineName', title: '线路号', minWidth: 170 },
+        { field: 'startTime', title: '开始时间', minWidth: 170 },
+        { field: 'endTime', title: '结束时间', minWidth: 170 }
+    ],
+
+    beforeSearchFun: () => {
+        tableStore.table.params.id = selectId.value
+        tableStore.table.params.isTrueFlag = 0
+        tableStore.table.params.treeIds = treeIds.value
+    }
+})
+provide('tableStore', tableStore)
+//弹框打开处理
+const open = (id: any) => {
+    dialogVisible.value = true
+    selectId.value = id
+    //1 列表  0树
+    //获取树形数据
+    getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
+        deviceInfoTreeRef.value.getTreeList(res.data)
+    })
+    //查绑定测试项列表
+    getSelectedTable(id)
+    //查新增列表
+    tableStore.index()
+}
+const close = () => {
+    addFlag.value = false
+    dialogVisible.value = false
+}
+const tableRef = ref()
+//添加设备
+const submit = () => {
+    //选择的数据
+    let deviceIds = []
+    //新增的时候执行的逻辑
+    if (addFlag.value == true) {
+        tableStore.table.selection.map(item => {
+            deviceIds.push(item.id)
+        })
+        const addForm = {
+            id: selectId.value,
+            list: deviceIds
+        }
+        addDevice(addForm).then(res => {
+            if (res.code == 'A0000') {
+                ElMessage.success('添加成功')
+                getSelectedTable(selectId.value)
+                addFlag.value = false
+            }
+        })
+    }
+}
+//删除设备
+const checkedTableRef = ref()
+//判断是否选择了设备数据
+const checkedList: any = ref([])
+/*
+ * 记录选择的项
+ */
+const selectChangeEvent = (checked: any) => {
+    checkedList.value = checkedTableRef.value.getCheckboxRecords()
+}
+
+const handleDelete = (row: any) => {
+    let list = []
+    //单选删除
+    if (row) {
+        list.push(row.id)
+    }
+    //批量删除
+    else {
+        checkedTableRef.value.getCheckboxRecords().length != 0
+            ? checkedTableRef.value.getCheckboxRecords().map((item: any) => {
+                  list.push(item.id)
+              })
+            : (list = [])
+    }
+    if (list.length != 0) {
+        delDevice({ id: selectId.value, list: list }).then(res => {
+            if (res.code == 'A0000') {
+                ElMessage.success('删除成功')
+                getSelectedTable(selectId.value)
+            }
+        })
+    }
+}
+const cancelDelete = () => {
+    console.log('取消')
+}
+onMounted(() => {})
+defineExpose({ open })
+</script>
+
+<style lang="scss">
+.device-manage {
+    display: flex;
+
+    &-right {
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        .el-descriptions__header {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+// ::v-deep .el-
+</style>

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

@@ -1,283 +0,0 @@
-<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="checkTableRef"
-                :loading="loading"
-                align="center"
-                :data="tableData"
-                :edit-config="{ trigger: 'manual', mode: 'row' }"
-                @checkbox-all="selectAllChangeEvent"
-                @checkbox-change="selectChangeEvent"
-            >
-                <!-- <vxe-column type="seq" width="60"></vxe-column> -->
-                <vxe-column type="checkbox" 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="close">取 消</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'
-import { getDeviceList } from '@/api/cs-device-boot/planData'
-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 checkTableRef: 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 getList = (id: any) => {
-    getDeviceList({ id: id }).then(res => {
-        console.log(res, '查询列表')
-    })
-}
-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 selectAllChangeEvent = (checked: any) => {
-    const $table = checkTableRef.value
-    if ($table) {
-        const records = $table.getCheckboxRecords()
-        console.log(checked ? '所有勾选事件' : '所有取消事件', records)
-    }
-}
-
-const selectChangeEvent = (checked: any) => {
-    const $table = checkTableRef.value
-    if ($table) {
-        const records = $table.getCheckboxRecords()
-        console.log(checked ? '勾选事件' : '取消事件', records)
-    }
-}
-
-//删除设备
-const delDevice = (row: any) => {
-    console.log(row, '8888')
-}
-
-//添加设备
-const dialogVisible = ref(false)
-//
-const open = () => {
-    dialogVisible.value = true
-}
-//提交所选择的设备
-const submit = () => {
-    console.log(6666)
-}
-const close = () => {
-    dialogVisible.value = false
-    checkTableRef.value.clearCheckboxRow()
-}
-defineExpose({ getList })
-</script>
-<style lang="scss" scoped>
-.table {
-    height: 400px;
-}
-</style>

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

@@ -183,7 +183,6 @@
 import { ref, inject, defineEmits } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus, Minus, Message } from '@element-plus/icons-vue'
-import deviceInfo from './deviceInfo.vue'
 import { addPlan, addRecord, updateRecord, getDeviceList } from '@/api/cs-device-boot/planData'
 import { useDictData } from '@/stores/dictData'
 const dictData = useDictData()
@@ -223,8 +222,8 @@ const title: any = ref('')
 const activeFormIndex: any = ref(null)
 const planId: any = ref('')
 const deviceRef: any = ref(null)
-const details=(val:any)=>{
+const details = (val: any) => {
-   form.value=val
+    form.value = val
 }
 // 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息
 const open = (val: any, id: any) => {
@@ -248,8 +247,8 @@ const open = (val: any, id: any) => {
     //数据回显
     if (val == 0 || val == 2) {
         form.value = {
-            itemName: row.itemName, //方案名称
+            itemName: '', //方案名称
-            describe: row.describe, //方案描述
+            describe: '', //方案描述
             //测试项数据
             records: [
                 {
@@ -273,12 +272,10 @@ const open = (val: any, id: any) => {
         }
     }
     if (val == 1 || val == 3) {
-     
     }
     if (val == 6) {
         //1 列表  0树
-        getDeviceList({ id: id ,isTrueFlag:0,pageNum:1,pageSize:200}).then(res => {
+        getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {
-            console.log(res, '查询列表')
         })
     }
 }
@@ -395,7 +392,7 @@ const submit = () => {
         })
     }
 }
-defineExpose({ open ,details})
+defineExpose({ open, details })
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-form-item__content {

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

@@ -1,6 +1,7 @@
 <template>
     <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
-        <schemeTree @node-click="nodeClick" @init="nodeClick" @node-change="nodeClick" ref="schemeTreeRef"></schemeTree>
+        <!-- @node-change="nodeClick" -->
+        <schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
         <div class="device-manage-right" v-if="deviceData">
             <el-descriptions title="方案信息" class="mb10" :column="4" border>
                 <template #extra>
@@ -69,7 +70,7 @@
                                 <!-- <el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(3)">
                                     修改
                                 </el-button> -->
-                                <el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(6)">
+                                <el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="openDevice">
                                     设备信息
                                 </el-button>
                             </el-descriptions-item>
@@ -77,38 +78,37 @@
                     </el-tab-pane>
                 </el-tabs>
             </div>
-
             <div class="history_title">
                 <p>历史趋势</p>
             </div>
             <div class="history_header">
                 <el-form :model="form" class="history_select">
                     <el-form-item label="统计指标">
-                        <el-select v-model="form.index" placeholder="请选择统计指标" clearable>
+                        <el-select @change="init" v-model="form.index" placeholder="请选择统计指标">
                             <el-option
-                                v-for="item in rankOptions"
+                                v-for="item in indexOptions"
-                                :key="item.value"
+                                :key="item.id"
-                                :label="item.label"
+                                :label="item.name"
-                                :value="item.value"
+                                :value="item.id"
                             ></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item label="值类型">
-                        <el-select v-model="form.type" placeholder="请选择值类型" clearable>
+                        <el-select v-model="form.type" placeholder="请选择值类型">
                             <el-option
-                                v-for="item in rankOptions"
+                                v-for="item in typeOptions"
-                                :key="item.value"
+                                :key="item.id"
-                                :label="item.label"
+                                :label="item.name"
-                                :value="item.value"
+                                :value="item.id"
                             ></el-option>
                         </el-select>
                     </el-form-item>
                 </el-form>
                 <div class="history_searchBtn">
-                    <el-button type="primary" size="small" icon="el-icon-Search" @click="handleSearch">查询</el-button>
+                    <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button>
-                    <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
+                    <!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
                         报表导出
-                    </el-button>
+                    </el-button> -->
                 </div>
             </div>
             <!-- <div class="title">
@@ -140,6 +140,7 @@
         </div>
         <el-empty v-else description="请选择设备" class="device-manage-right" />
         <MangePopup ref="mangePopup" />
+        <device ref="deviceRef"></device>
     </div>
 </template>
 
@@ -151,13 +152,14 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
 import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
 // import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
 import { getGroup } from '@/api/cs-device-boot/csGroup'
-import { ref, reactive, onMounted,provide } from 'vue'
+import { ref, reactive, onMounted, provide, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
 import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
 import { useDictData } from '@/stores/dictData'
+import device from './components/device.vue'
 const dictData = useDictData()
 defineOptions({
     name: 'govern/device/manage'
@@ -166,55 +168,80 @@ defineOptions({
 const voltageLevelList = dictData.getBasicData('Dev_Voltage')
 //接线方式
 const volConTypeList = dictData.getBasicData('Dev_Connect')
-//统计指标
 
 //值类型
 
 const pageHeight = mainHeight(20)
 const loading = ref(true)
 const form = ref({})
+// const indexOptions = [
+//     {
+//         id: '1',
+//         name: '相电压有效值'
+//     },
+//     {
+//         id: '2',
+//         name: '线电压有效值'
+//     },
+//     {
+//         id: '3',
+//         name: '电压偏差'
+//     },
+//     {
+//         id: '4',
+//         name: '三相电压不平衡'
+//     }
+// ]
+const typeOptions = [
+    {
+        id: '1',
+        name: '最大值'
+    },
+    {
+        id: '2',
+        name: '最小值'
+    },
+    {
+        id: '3',
+        name: '平均值'
+    },
+    {
+        id: '4',
+        name: 'CP95'
+    }
+]
 form.value = {
     index: '',
-    type: ''
+    type: typeOptions[0].id
 }
-const rankOptions = ref([
+//统计指标
-    {
+const indexOptions: any = ref([])
-        value: '1',
+queryByCode('portable-harmonic').then(res => {
-        label: '1级'
+    queryByid(res.data.id).then(item => {
-    },
+        indexOptions.value = item.data
-    {
+        form.value.index=indexOptions.value[0].id
-        value: '2',
+    })
-        label: '2级'
+})
-    },
-    {
-        value: '3',
-        label: '3级'
-    }
-])
 const activeName: any = ref()
 const deviceData: any = ref([])
 const schemeTreeRef = ref(null)
 const chartsDataList: any = ref([])
 const nodeClick = async (e: anyObj) => {
-    // if (!e) {
-    //     loading.value = false
-    //     return
-    // }
-    // if (e.level == 2) {
     loading.value = true
     deviceData.value = []
-    // if (e?.id) {
-
-    // }
     //查询测试项信息
     try {
         await getTestRecordInfo(e.id).then(res => {
             deviceData.value = res.data
             loading.value = false
-            activeName.value = res.data.records[0]?.itemName     
+            activeName.value = res.data.records[0]?.itemName
-               schemeTreeRef.value.getPlanData(deviceData.value)
+            schemeTreeRef.value.getPlanData(deviceData.value)
         })
-
+    } catch (error) {
+        loading.value = false
+    }
+    try {
+        //查询历史趋势
         const historyData = {
             devId: e.id,
             statisticalId: '11aaa206ba82c5b68b7339fe60e22945',
@@ -228,9 +255,11 @@ const nodeClick = async (e: anyObj) => {
     } catch (error) {
         loading.value = false
     }
-    //查询历史趋势
 }
-
+const deviceRef = ref()
+const openDevice = () => {
+    deviceRef.value.open(deviceData.value.records[0].id)
+}
 const mangePopup = ref()
 const handleOpen = (val: any) => {
     mangePopup.value.open(val, deviceData.value.records[0].id)
@@ -255,9 +284,20 @@ const init = () => {
             title: [
                 {
                     left: 'center',
-                    text: '10KV 母线_监测点 相电压有效值'
+                    text:
+                        '10KV 母线_监测点 ' +
+                        indexOptions.value.find(item => {
+                            return item.id == form.value.index
+                        })?.name
                 }
             ],
+            toolbox: {
+                feature: {
+                    saveAsImage: {
+                        title: '保存'
+                    }
+                }
+            },
             // backgroundColor: '#1B232E',
             tooltip: {
                 trigger: 'axis',
@@ -296,7 +336,7 @@ const init = () => {
                     fontSize: 14
                 },
                 top: 0,
-                right: 50,
+                left: 50,
                 itemWidth: 20,
                 itemHeight: 10,
                 itemGap: 15