方案数据统计指标选择后谐波次数下拉框问题修改
This commit is contained in:
@@ -455,21 +455,7 @@ const getData = (rightData: any) => {
|
||||
}
|
||||
checkedIdList.value = [...new Set(checkedIdList.value)]
|
||||
}
|
||||
const loading = ref(false)
|
||||
const defaultCheckedKeys: any = ref([])
|
||||
const tableData = ref([])
|
||||
defineOptions({
|
||||
name: 'govern/tourist/index'
|
||||
})
|
||||
const treeIds: any = ref([])
|
||||
const pids: any = ref([])
|
||||
|
||||
//绑定选择的数据
|
||||
const selectedBindList: any = ref([])
|
||||
//未绑定选择的数据
|
||||
const selectedUnBindList: any = ref([])
|
||||
const deviceInfoTreeRef1 = ref()
|
||||
const deviceInfoTreeRef2 = ref()
|
||||
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
|
||||
const addFlag = ref(false)
|
||||
const selectId: any = ref('')
|
||||
@@ -511,11 +497,13 @@ const submit = () => {
|
||||
itemName: form.value.itemName,
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
ElMessage.success('新增方案成功')
|
||||
initForm()
|
||||
emit('onSubmit')
|
||||
close()
|
||||
addPlan(subForm).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('新增方案成功')
|
||||
initForm()
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('表单验证失败')
|
||||
@@ -525,7 +513,7 @@ const submit = () => {
|
||||
}
|
||||
//修改方案
|
||||
if (activeFormIndex.value == 1) {
|
||||
ruleFormRef1.value.validate(valid => {
|
||||
ruleFormRef1.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
const subForm = {
|
||||
id: planId.value,
|
||||
@@ -542,7 +530,7 @@ const submit = () => {
|
||||
}
|
||||
//新增测试项
|
||||
if (activeFormIndex.value == 2) {
|
||||
ruleFormRef2.value.validate(valid => {
|
||||
ruleFormRef2.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
let subForm = {
|
||||
id: planId.value,
|
||||
@@ -574,11 +562,13 @@ const submit = () => {
|
||||
// return item.id
|
||||
// })
|
||||
subForm.list = checkedIdList.value
|
||||
updateRecord(subForm).then(res => {
|
||||
ElMessage.success('修改测试项成功')
|
||||
initForm()
|
||||
emit('onSubmit')
|
||||
close()
|
||||
updateRecord(subForm).then((res:any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('修改测试项成功')
|
||||
initForm()
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('校验不通过')
|
||||
|
||||
@@ -1,534 +0,0 @@
|
||||
<!-- eslint-disable vue/no-unused-vars -->
|
||||
<template>
|
||||
<div class="treeTransfer">
|
||||
<!-- 左边 -->
|
||||
<div class="leftTree">
|
||||
<p class="left_title">{{ props.title[0] }}</p>
|
||||
<div class="list">
|
||||
<div class="left_lowline">
|
||||
<!-- <el-checkbox
|
||||
v-model="checkedLeft"
|
||||
:disabled="leftTreeData.length < 1"
|
||||
label=""
|
||||
size="large"
|
||||
style="margin-right: 12px"
|
||||
@change="leftAllCheck"
|
||||
/> -->
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div class="left_input">
|
||||
<el-input
|
||||
v-model="leftSearchText"
|
||||
class="w-50"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
prefix-icon="el-icon-search"
|
||||
@clear="onSearchLeft"
|
||||
@keyup.enter="onSearchLeft"
|
||||
@change="onSearchLeft"
|
||||
/>
|
||||
</div>
|
||||
<div style="overflow: auto; flex: 1; margin-top: 10px">
|
||||
<el-tree
|
||||
ref="leftTreeRef"
|
||||
:filter-node-method="filterNode"
|
||||
:data="leftTreeData"
|
||||
show-checkbox
|
||||
:node-key="props.nodeKey"
|
||||
:props="props.defaultProps"
|
||||
v-slot="{ node, data }"
|
||||
accordion
|
||||
@check="onCheckLeft"
|
||||
default-expand-all
|
||||
>
|
||||
<div>
|
||||
{{ data.name }}
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间按钮 -->
|
||||
<div class="btnDiv">
|
||||
<div class="mg10">
|
||||
<el-button @click="toRight()" type="primary" :disabled="leftOperation.length < 1">
|
||||
绑定
|
||||
<el-icon><ArrowRight style="width: 20px !important; height: 20px !important" /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mg10">
|
||||
<el-button @click="toLeft()" type="primary" :disabled="rightOperation.length < 1">
|
||||
<el-icon><ArrowLeft style="width: 20px !important; height: 20px !important" /></el-icon>
|
||||
解绑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="rightTree">
|
||||
<div class="list">
|
||||
<p class="left_title">{{ props.title[1] }}</p>
|
||||
<div class="left_lowline">
|
||||
<!-- <el-checkbox
|
||||
v-model="checkedRight"
|
||||
:disabled="rightTreeData.length < 1"
|
||||
label=""
|
||||
size="large"
|
||||
style="margin-right: 12px"
|
||||
@change="rightAllCheck"
|
||||
/> -->
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div class="left_input">
|
||||
<el-input
|
||||
v-model="rightSearchText"
|
||||
class="w-50"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
prefix-icon="el-icon-search"
|
||||
@clear="onSearchRight"
|
||||
@keyup.enter="onSearchRight"
|
||||
@change="onSearchRight"
|
||||
/>
|
||||
</div>
|
||||
<div style="overflow: auto; flex: 1; margin-top: 10px">
|
||||
<el-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="rightTreeRef"
|
||||
:data="rightTreeData"
|
||||
show-checkbox
|
||||
:node-key="props.nodeKey"
|
||||
:props="props.defaultProps"
|
||||
v-slot="{ node, data }"
|
||||
accordion
|
||||
@check="onCheckRight"
|
||||
default-expand-all
|
||||
>
|
||||
<div>
|
||||
{{ data.name }}
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
//@ts-nocheck 解决ts类型报红
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import lodash from 'lodash'
|
||||
const props = defineProps(['nodeKey', 'fromData', 'toData', 'defaultProps', 'title'])
|
||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
||||
const checkedLeft = ref(false)
|
||||
const checkedRight = ref(false)
|
||||
const leftSearchText = ref('')
|
||||
const rightSearchText = ref('')
|
||||
const leftOperation = ref<any[]>([])
|
||||
const rightOperation = ref<any[]>([])
|
||||
|
||||
// 定义emit
|
||||
const emits = defineEmits(['change'])
|
||||
const leftTreeRef = ref()
|
||||
const rightTreeRef = ref()
|
||||
|
||||
// 左侧数据
|
||||
const leftTreeData = ref([])
|
||||
// 右侧数据
|
||||
const rightTreeData = ref([])
|
||||
|
||||
watch(
|
||||
props,
|
||||
newVal => {
|
||||
leftTreeData.value = lodash.cloneDeep(newVal.fromData)
|
||||
rightTreeData.value = lodash.cloneDeep(newVal.toData)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => leftTreeData.value,
|
||||
val => {
|
||||
if (val) {
|
||||
val.map((item: any, index: any) => {
|
||||
if (item.pid) {
|
||||
val.splice(index, 1)
|
||||
} else {
|
||||
if (!item.children || item.children.length == 0) {
|
||||
val.splice(index, 1)
|
||||
} else {
|
||||
item.children.map((vv: any, indexs: any) => {
|
||||
console.log(vv, '-------------')
|
||||
if (!vv.children || vv.children.length == 0) {
|
||||
item.children.splice(indexs, 1)
|
||||
item.children = [...new Set(item.children)]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => rightTreeData.value,
|
||||
val => {
|
||||
if (val) {
|
||||
val.map((item: any, index: any) => {
|
||||
if (item.pid) {
|
||||
val.splice(index, 1)
|
||||
} else {
|
||||
if (!item.children || item.children.length == 0) {
|
||||
val.splice(index, 1)
|
||||
} else {
|
||||
item.children.map((vv: any, indexs: any) => {
|
||||
console.log(vv, '++++++++++')
|
||||
if (!vv.children || vv.children.length == 0) {
|
||||
item.children.splice(indexs, 1)
|
||||
item.children = [...new Set(item.children)]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
watch(leftSearchText, val => {
|
||||
leftTreeRef.value?.filter(val)
|
||||
})
|
||||
watch(rightSearchText, val => {
|
||||
rightTreeRef.value?.filter(val)
|
||||
})
|
||||
defineExpose({
|
||||
leftTreeData,
|
||||
rightTreeData
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
leftSearchText.value = ''
|
||||
rightSearchText.value = ''
|
||||
})
|
||||
|
||||
const removeChecked = (rightList, allCheckedKeys) => {
|
||||
rightList.forEach((e, index) => {
|
||||
if (allCheckedKeys.indexOf(e.id) == -1) {
|
||||
rightList.splice(index, 1)
|
||||
}
|
||||
if (e.children) {
|
||||
removeChecked(e.children, allCheckedKeys)
|
||||
}
|
||||
})
|
||||
return rightList
|
||||
}
|
||||
const recursionTree = (parents, allCheckedKeys) => {
|
||||
parents.forEach(e => {
|
||||
const list = lodash.filter(e.children, child => allCheckedKeys.indexOf(child.id) >= 0)
|
||||
e.children = list
|
||||
if (e.children.length !== 0) {
|
||||
recursionTree(e.children, allCheckedKeys)
|
||||
}
|
||||
})
|
||||
return parents
|
||||
}
|
||||
const handleData = (selectedNodes, leftTree, allCheckedKeys, type) => {
|
||||
console.log(selectedNodes, '选择的数据')
|
||||
//右移动,获取左边选择的数据,添加到右侧
|
||||
selectedNodes.map((item: any) => {
|
||||
//叶子结点
|
||||
//去绑定
|
||||
if (item.children && item.children.length != 0 && item.pid && type == 'left') {
|
||||
rightTreeData.value.map((vv: any) => {
|
||||
if (vv.id == item.pid) {
|
||||
vv.children.push(item)
|
||||
}
|
||||
vv.children = [...new Set(vv.children)]
|
||||
})
|
||||
}
|
||||
//去解绑
|
||||
if (item.children && item.children.length != 0 && item.pid && type == 'right') {
|
||||
leftTreeData.value.map((vv: any) => {
|
||||
if (vv.id == item.pid) {
|
||||
vv.children.push(item)
|
||||
}
|
||||
vv.children = [...new Set(vv.children)]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 去右边
|
||||
const toRight = async () => {
|
||||
const leftTree = leftTreeRef.value
|
||||
checkedLeft.value = false
|
||||
if (!leftTree) {
|
||||
return
|
||||
}
|
||||
const leftNodes = leftTree.getCheckedNodes(false, true)
|
||||
//查找到有数据的父节点
|
||||
const parents = leftNodes.filter(el => el.children && el.children.length > 0)
|
||||
console.log(parents, '找到的父节点')
|
||||
// const checkedKeys = [...new Set(leftTree.getCheckedKeys(false))]
|
||||
const checkedKeys = leftTree.getCheckedKeys(false)
|
||||
const halfCheckedKeys = leftTree.getHalfCheckedKeys()
|
||||
const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
|
||||
const rightTree = rightTreeRef.value
|
||||
if (!rightTree) {
|
||||
let rightList = parents.map(parent => {
|
||||
const obj = lodash.omit(parent, ['children'])
|
||||
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
|
||||
console.log(obj, '找到的数据275')
|
||||
return obj
|
||||
})
|
||||
|
||||
let copyRightList = lodash.cloneDeep(rightList)
|
||||
removeChecked(copyRightList, allCheckedKeys)
|
||||
rightTreeData.value.push(...copyRightList)
|
||||
rightTreeData.value = [...new Set(rightTreeData.value)]
|
||||
} else {
|
||||
let isExist = false
|
||||
rightTree.data.forEach(e => {
|
||||
if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
|
||||
})
|
||||
console.log(isExist, '88')
|
||||
if (!isExist) {
|
||||
const overall = lodash.cloneDeep(parents)
|
||||
let rightList = await recursionTree(overall, allCheckedKeys)
|
||||
let copyRightList = lodash.cloneDeep(rightList)
|
||||
removeChecked(copyRightList, allCheckedKeys)
|
||||
rightTreeData.value.push(...copyRightList)
|
||||
rightTreeData.value = [...new Set(rightTreeData.value)]
|
||||
} else {
|
||||
handleData(leftNodes, rightTree, allCheckedKeys, 'left')
|
||||
}
|
||||
}
|
||||
// 移过去之后要删除原本的值
|
||||
leftNodes.forEach(node => {
|
||||
leftTree.setChecked(node, false, false)
|
||||
if (checkedKeys.indexOf(node.id) >= 0) {
|
||||
leftTree.remove(node)
|
||||
}
|
||||
})
|
||||
|
||||
leftOperation.value = formatTree(leftTree.getCheckedNodes(false) || [], 'pid', 'id')
|
||||
// emits('change', leftTreeData.value, rightTreeData.value)
|
||||
emits('change', checkedKeys)
|
||||
setTimeout(() => {
|
||||
rightTree?.setCheckedNodes(leftNodes)
|
||||
rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
|
||||
if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
|
||||
checkedRight.value = true
|
||||
} else {
|
||||
checkedRight.value = false
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
// // 去左边
|
||||
const toLeft = async () => {
|
||||
checkedRight.value = false
|
||||
const rightTree = rightTreeRef.value
|
||||
console.log(rightTreeData.value, '++++++++++', leftTreeData.value)
|
||||
if (!rightTree) {
|
||||
return
|
||||
}
|
||||
//获取右侧选中已绑定的节点
|
||||
const rightNodes = rightTree.getCheckedNodes(false, true)
|
||||
const checkedKeys = [...new Set(rightTree.getCheckedKeys(false))]
|
||||
const halfCheckedKeys = rightTree.getHalfCheckedKeys()
|
||||
const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
|
||||
//获取有数据的节点
|
||||
const parents = lodash.filter(rightNodes, item => item.children && item.children.length > 0)
|
||||
const leftTree = leftTreeData.value.length ? leftTreeRef.value : null
|
||||
//左侧树无数据
|
||||
let leftList = parents.map(parent => {
|
||||
const obj = lodash.omit(parent, ['children'])
|
||||
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
|
||||
return obj
|
||||
})
|
||||
let copyLeftList = lodash.cloneDeep(leftList)
|
||||
console.log(copyLeftList, 'copyLeftListcopyLeftListcopyLeftListcopyLeftListcopyLeftList')
|
||||
copyLeftList.map((item)=>{
|
||||
if(!item.pid){
|
||||
leftTreeData.value.push(item)
|
||||
}
|
||||
// leftTreeData.value.map((vv)=>{
|
||||
// if(vv.id==item.pid){
|
||||
|
||||
// }
|
||||
// })
|
||||
})
|
||||
return
|
||||
if (!leftTree) {
|
||||
let leftList = parents.map(parent => {
|
||||
const obj = lodash.omit(parent, ['children'])
|
||||
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
|
||||
return obj
|
||||
})
|
||||
let copyLeftList = lodash.cloneDeep(leftList)
|
||||
removeChecked(copyLeftList, allCheckedKeys)
|
||||
leftTreeData.value.push(...copyLeftList)
|
||||
leftTreeData.value = [...new Set(leftTreeData.value)]
|
||||
}
|
||||
//左侧树有数据
|
||||
else {
|
||||
let isExist = false
|
||||
leftTree.data.forEach(e => {
|
||||
if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
|
||||
})
|
||||
if (!isExist) {
|
||||
const overall = lodash.cloneDeep(parents)
|
||||
let leftList = await recursionTree(overall, allCheckedKeys)
|
||||
let copyLeftList = lodash.cloneDeep(leftList)
|
||||
console.log(copyLeftList, '5555555555555555555')
|
||||
// removeChecked(copyLeftList, allCheckedKeys)
|
||||
leftTreeData.value.push(...copyLeftList)
|
||||
leftTreeData.value = [...new Set(leftTreeData.value)]
|
||||
} else {
|
||||
handleData(rightNodes, leftTree, allCheckedKeys, 'right')
|
||||
}
|
||||
}
|
||||
console.log(rightTree, '11111111')
|
||||
|
||||
rightNodes.forEach(node => {
|
||||
rightTree.setChecked(node, false, false)
|
||||
if (checkedKeys.indexOf(node.id) >= 0) {
|
||||
rightTree.remove(node)
|
||||
}
|
||||
})
|
||||
|
||||
console.log(rightTree, '2222222')
|
||||
|
||||
rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
|
||||
// emits('change', leftTreeData.value, rightTreeData.value)
|
||||
emits('change', checkedKeys)
|
||||
console.log(leftTreeData.value, '99999999')
|
||||
}
|
||||
|
||||
//左侧选中(移除原本值用)
|
||||
const onCheckLeft = () => {
|
||||
leftOperation.value = formatTree(leftTreeRef.value?.getCheckedNodes(false) || [], 'pid', 'id')
|
||||
if (lodash.isEqual(leftOperation.value, leftTreeData.value)) {
|
||||
checkedLeft.value = true
|
||||
} else {
|
||||
checkedLeft.value = false
|
||||
}
|
||||
}
|
||||
// 右侧选中
|
||||
const onCheckRight = () => {
|
||||
rightOperation.value = formatTree(rightTreeRef.value!.getCheckedNodes(false) || [], 'pid', 'id')
|
||||
if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
|
||||
checkedRight.value = true
|
||||
} else {
|
||||
checkedRight.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatTree = (tree: any[], parentKey: string = 'pid', idKey: string = 'id') => {
|
||||
// 格式化选择的树:清除全选下面的子节点
|
||||
let swap,
|
||||
parentIds: string[] = []
|
||||
// 先找出有children的id集合,再把所有的数据做对比,只要pid和其中一个对上,就把该数据删除;
|
||||
tree.forEach((item, index) => {
|
||||
if (item.children) {
|
||||
parentIds.push(item[idKey])
|
||||
}
|
||||
})
|
||||
swap = tree.filter((item, index) => {
|
||||
if (parentIds.indexOf(item[parentKey]) == -1) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
return swap
|
||||
}
|
||||
|
||||
const onSearchLeft = () => {
|
||||
leftTreeRef.value?.filter(leftSearchText.value)
|
||||
}
|
||||
const leftAllCheck = () => {
|
||||
const leftTree = leftTreeRef.value
|
||||
if (checkedLeft.value) {
|
||||
leftTree?.setCheckedNodes(leftTreeData.value)
|
||||
checkedLeft.value = true
|
||||
} else {
|
||||
leftTree?.setCheckedNodes([])
|
||||
checkedLeft.value = false
|
||||
}
|
||||
onCheckLeft()
|
||||
}
|
||||
const rightAllCheck = () => {
|
||||
const rightTree = rightTreeRef.value
|
||||
if (checkedRight.value) {
|
||||
rightTree?.setCheckedNodes(rightTreeData.value)
|
||||
checkedRight.value = true
|
||||
} else {
|
||||
rightTree?.setCheckedNodes([])
|
||||
checkedRight.value = false
|
||||
}
|
||||
onCheckRight()
|
||||
}
|
||||
const onSearchRight = () => {
|
||||
rightTreeRef.value?.filter(rightSearchText.value)
|
||||
}
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data[props.defaultProps.label].includes(value)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.treeTransfer {
|
||||
display: flex;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
|
||||
.btnDiv {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.mg10 {
|
||||
padding: 5px;
|
||||
:deep(svg),
|
||||
:deep(.el-icon) {
|
||||
height: 2em !important;
|
||||
width: 2em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftTree {
|
||||
width: 45%;
|
||||
border: 1px solid rgb(182, 182, 182);
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
.list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.rightTree {
|
||||
border: 1px solid rgb(182, 182, 182);
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
width: 45%;
|
||||
.list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.left_lowline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.right_lowline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,9 +3,9 @@
|
||||
<!-- @node-change="nodeClick" -->
|
||||
<schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
|
||||
<div class="device-manage-right" v-if="deviceData">
|
||||
<el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
|
||||
<el-descriptions size="small" title="方案信息" class="mb10" :column="2" border>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="handleOpen(0, '')">新增方案</el-button>
|
||||
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0, '')">新增方案</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="handleExport">数据导出</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="方案名称" width="60">
|
||||
@@ -19,14 +19,20 @@
|
||||
<div class="history_title">
|
||||
<p>测试项信息</p>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<el-tabs v-model="activeName" type="border-card" @click="init()">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in deviceData.records"
|
||||
:label="item.itemName"
|
||||
:name="item.id"
|
||||
:key="index"
|
||||
>
|
||||
<el-descriptions value="small" class="mb10" :column="6" border>
|
||||
<template #label>
|
||||
<span class="custom-tabs-label">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
<span>{{ item.itemName }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<el-descriptions size="small" class="mb10" width="180" :column="4" border>
|
||||
<el-descriptions-item label="测试项名称" width="160">
|
||||
{{ item.itemName }}
|
||||
</el-descriptions-item>
|
||||
@@ -103,6 +109,7 @@
|
||||
collapse-tags-tooltip
|
||||
v-model="searchForm.index"
|
||||
placeholder="请选择统计指标"
|
||||
@change="init()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
@@ -112,18 +119,17 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- {{ countData }} -->
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item
|
||||
:label="item.name + '谐波次数'"
|
||||
v-if="item.countOptions.length != 0"
|
||||
label-width="180px"
|
||||
>
|
||||
<!-- :label="item.name + '谐波次数'" label-width="180px"-->
|
||||
<el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
|
||||
<!-- multiple -->
|
||||
<el-select
|
||||
v-model="item.count"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
placeholder="请选择谐波次数"
|
||||
style="width: 100px"
|
||||
>
|
||||
<el-option
|
||||
v-for="vv in item.countOptions"
|
||||
@@ -149,8 +155,8 @@
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history_chart" v-loading="loading" v-show="echartsData">
|
||||
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
|
||||
<div class="history_chart" v-loading="loading">
|
||||
<MyEchart ref="historyChart" v-show="echartsData" :isExport="true" :options="echartsData" />
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
||||
@@ -169,9 +175,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import * as echarts from 'echarts'
|
||||
import { isNonNullChain } from 'typescript'
|
||||
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
|
||||
import { TrendCharts, Plus } from '@element-plus/icons-vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/manage'
|
||||
@@ -222,6 +226,7 @@ queryByCode('portable-harmonic').then(res => {
|
||||
})
|
||||
queryStatistical(res.data.id).then(vv => {
|
||||
legendDictList.value = vv.data
|
||||
console.log(legendDictList.value, '2362636236636366263636', vv)
|
||||
})
|
||||
})
|
||||
const activeName: any = ref()
|
||||
@@ -237,7 +242,7 @@ const nodeClick = async (e: anyObj) => {
|
||||
let id = e.pid ? e.pid : e.id
|
||||
//查询测试项信息
|
||||
try {
|
||||
await getTestRecordInfo(id).then(res => {
|
||||
getTestRecordInfo(id).then(res => {
|
||||
deviceData.value = res.data
|
||||
loading.value = false
|
||||
if (res.data.records.length == 1) {
|
||||
@@ -256,7 +261,7 @@ const nodeClick = async (e: anyObj) => {
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
init()
|
||||
await init()
|
||||
}
|
||||
const dialogRef = ref()
|
||||
const handleOpen = (val: any, id: any) => {
|
||||
@@ -273,20 +278,8 @@ const refreshTree = () => {
|
||||
const range = (start: any, end: any, step: any) => {
|
||||
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
|
||||
}
|
||||
const init = async () => {
|
||||
// 选择指标的时候切换legend内容和data数据
|
||||
const init = () => {
|
||||
let list: any = []
|
||||
legendDictList.value?.selectedList?.map((item: any) => {
|
||||
// searchForm.value.index.map((vv: any) => {
|
||||
// if (item.dataType == vv) {
|
||||
// list.push(item.eleEpdPqdVOS)
|
||||
// }
|
||||
// })
|
||||
if (item.dataType == searchForm.value.index) {
|
||||
list.push(item.eleEpdPqdVOS)
|
||||
}
|
||||
})
|
||||
|
||||
//颜色数组
|
||||
const colorList = [
|
||||
'#DAA521',
|
||||
@@ -302,7 +295,14 @@ const init = async () => {
|
||||
'#1DD0CE',
|
||||
'cadetblue'
|
||||
]
|
||||
if (historyDevId.value) {
|
||||
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
||||
// 选择指标的时候切换legend内容和data数据
|
||||
legendDictList.value?.selectedList?.map((item: any) => {
|
||||
if (item.dataType == searchForm.value.index) {
|
||||
list.push(item.eleEpdPqdVOS)
|
||||
}
|
||||
})
|
||||
console.log(legendDictList.value, '2362636236636366263636')
|
||||
//选择的指标使用方法处理
|
||||
initSearchFormIndexAndCount([searchForm.value.index])
|
||||
//查询历史趋势
|
||||
@@ -322,8 +322,8 @@ const init = async () => {
|
||||
} else {
|
||||
middleTitle = ''
|
||||
}
|
||||
let indexList=[]
|
||||
indexList=[searchForm.value.index]
|
||||
let indexList = []
|
||||
indexList = [searchForm.value.index]
|
||||
chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_'
|
||||
indexList.map((item: any, indexs: any) => {
|
||||
indexOptions.value.map((vv: any) => {
|
||||
@@ -346,8 +346,8 @@ const init = async () => {
|
||||
valueType: searchForm.value.type
|
||||
}
|
||||
try {
|
||||
await getHistoryTrend(obj)
|
||||
.then(res => {
|
||||
getHistoryTrend(obj)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
historyDataList.value = res.data
|
||||
echartsData.value = null
|
||||
@@ -358,15 +358,14 @@ const init = async () => {
|
||||
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
|
||||
|
||||
let xAxis: any = [],
|
||||
timeList: any = []
|
||||
let unitList: any = []
|
||||
timeList: any = [],
|
||||
unitList: any = []
|
||||
historyDataList.value.map((item: any) => {
|
||||
timeList.push(item.time)
|
||||
if (unitList.indexOf(item.unit) == -1) {
|
||||
unitList.push(item.unit)
|
||||
}
|
||||
})
|
||||
console.log(timeList, '+++++++++++')
|
||||
xAxis = timeList.sort((a: any, b: any) => {
|
||||
return (
|
||||
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
|
||||
@@ -437,7 +436,7 @@ const init = async () => {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '10%',
|
||||
top: '5%',
|
||||
top: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
@@ -758,30 +757,34 @@ const initSearchFormIndexAndCount = (list: any) => {
|
||||
if (kk.harmStart && kk.harmEnd) {
|
||||
range(0, 0, 0)
|
||||
countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 1)
|
||||
countData.value[index].count = countData.value[index].countOptions[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(countData.value, '66666666', legendDictList.value)
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => [searchForm.value.index],
|
||||
() => searchForm.value.index,
|
||||
(val: any, oldval: any) => {
|
||||
if (val) {
|
||||
initSearchFormIndexAndCount(val)
|
||||
if (val == 0) {
|
||||
countData.value = []
|
||||
}
|
||||
let list = [val]
|
||||
// initSearchFormIndexAndCount(list)
|
||||
// if (val == 0) {
|
||||
// countData.value = []
|
||||
// }
|
||||
countData.value.map((item: any, key: any) => {
|
||||
if (
|
||||
val.findIndex((vv: any) => {
|
||||
list.findIndex((vv: any) => {
|
||||
return vv == item.index
|
||||
}) == -1
|
||||
) {
|
||||
countData.value.splice(key, 1)
|
||||
}
|
||||
})
|
||||
init()
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -790,6 +793,13 @@ watch(
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
init()
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
|
||||
// initSearchFormIndexAndCount([searchForm.value.index])
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -829,15 +839,14 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history_title {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -846,7 +855,7 @@ onMounted(() => {
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 0 !important;
|
||||
max-height: 160px !important;
|
||||
max-height: 130px !important;
|
||||
}
|
||||
}
|
||||
.history_header {
|
||||
@@ -856,12 +865,15 @@ onMounted(() => {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow: auto;
|
||||
height: 45px;
|
||||
// overflow-x: auto;
|
||||
// height: 45px;
|
||||
// padding-top: 18px;
|
||||
// flex-wrap: wrap;
|
||||
.el-form-item {
|
||||
flex: none;
|
||||
max-width: 380px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-select {
|
||||
margin-right: 10px;
|
||||
@@ -884,6 +896,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 200px !important;
|
||||
width: 120px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user