Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
GGJ
2024-09-29 18:15:54 +08:00
parent e140362c42
commit 83af279826
7 changed files with 291 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/govern/device/planData/components/schemeTree.vue
View File

@@ -1,18 +1,10 @@
<template>
<div>
<div
:style="{ width: menuCollapse ? '40px' : '280px' }"
style="transition: all 0.3s; overflow: hidden; height: 100%"
>
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
/>
<div :style="{ width: menuCollapse ? '40px' : '280px' }"
style="transition: all 0.3s; overflow: hidden; height: 100%">
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
style="cursor: pointer" />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
@@ -20,37 +12,18 @@
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
/>
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
style="cursor: pointer" />
</div>
<el-tree
style="flex: 1; overflow: auto"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
default-expand-all
:data="tree"
ref="treRef"
@node-click="clickNode"
:expand-on-click-node="false"
>
<el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
:filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree"
ref="treRef" @node-click="clickNode" :expand-on-click-node="false">
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="left">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span>{{ node.label }}</span>
</div>
<div class="right">
@@ -108,11 +81,40 @@ const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any) => {
const filterNode = (value: string, data: any, node: any) => {
if (!value) return true
return data.name.includes(value)
}
// return data.name.includes(value)
if (data.name) {
return chooseNode(value, data, node)
}
}
const chooseNode = (value: string, data: any, node: any) => {
if (data.name.indexOf(value) !== -1) {
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.indexOf(value) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
}
/** 树形结构数据 */
const defaultProps = {
children: 'children',
@@ -206,7 +208,7 @@ const edit = async (node: Node, data: any) => {
handleOpen(3, planId.value)
}
})
.catch(e => {})
.catch(e => { })
}
/** 删除树节点 */
const del = (node: Node, data: any) => {
@@ -233,7 +235,7 @@ const del = (node: Node, data: any) => {
})
}
//取消删除
const cancelDel = () => {}
const cancelDel = () => { }
const clickNode = (e: anyObj) => {
e.children ? (planId.value = e.id) : (planId.value = e.pid)
emit('nodeChange', e)
@@ -287,6 +289,7 @@ defineExpose({ treeRef, getPlanData, getTreeList, setCheckedNode })
.ml10 {
margin-bottom: 0 !important;
}
.add_plan {
width: 100%;
height: 40px;
@@ -294,21 +297,25 @@ defineExpose({ treeRef, getPlanData, getTreeList, setCheckedNode })
justify-content: flex-end;
align-items: center;
}
.custom-tree-node {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left,
.right {
display: flex;
align-items: center;
}
.left {
span {
margin-left: 2px;
}
}
.right {
a {
margin-left: 2px;

162
src/views/govern/device/planData/index.vue
View File

@@ -22,12 +22,8 @@
<p>测试项信息</p>
</div> -->
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
:name="item.id"
:key="index"
>
<el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName"
:name="item.id" :key="index">
<template #label>
<span class="custom-tabs-label">
<el-icon>
@@ -105,21 +101,10 @@
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item label="统计指标" label-width="80px">
<el-select
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
multiple
:multiple-limit="3"
@change="init()"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
placeholder="请选择统计指标" multiple :multiple-limit="3" @change="init()">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型">
@@ -129,36 +114,20 @@
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
label-width="180px"
v-if="item.countOptions.length != 0"
>
<el-form-item :label="item.name + '谐波次数'" label-width="180px"
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"
:key="vv"
:label="vv"
:value="vv"
></el-option>
<el-select v-model="item.count" collapse-tags collapse-tags-tooltip
placeholder="请选择谐波次数" style="width: 100px">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
</div>
<el-form-item label="统计类型" label-width="80px">
<el-select v-model="searchForm.type" placeholder="请选择值类型">
<el-option
v-for="item in typeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
@@ -505,22 +474,27 @@ const init = () => {
crossStyle: {
color: '#999'
}
},
formatter: function (params: any) {
let list = params.filter((item, index, self) => {
return index === self.findIndex((t) => t.seriesName === item.seriesName);
})
console.log("🚀 ~ .then ~ list:", list)
var res = list[0].name + '<br/>'
for (var i = 0, l = list.length; i < l; i++) {
list[i].unit =
echartsData.value.options.yAxis[
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
]?.name
res +=
list[i].seriesName +
' ' +
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
`<div style='float:right;min-width:120px;padding-left:20px;'>${list[i].value} </div><br/>`
}
return res
}
// formatter: function (params: any) {
// var res = params[0].name + '<br/>'
// for (var i = 0, l = params.length; i < l; i++) {
// params[i].unit =
// echartsData.value.options.yAxis[
// echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
// ]?.name
// res +=
// params[i].seriesName +
// ' ' +
// `<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
// `<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
// }
// return res
// }
},
// grid: {
// left: chartsList.length != 0 ? '5%' : '1%',
@@ -529,32 +503,41 @@ const init = () => {
// top: '8%',
// containLabel: true
// },
xAxis: [
{
type: 'time', //category
name: '\n\n\n\n\n时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,
show: function (index: any, value: any) {
// 检查数据中是否存在这个时间点
// return data.some(item:any => item[0] === value)
},
formatter: {
day: '{MM}-{d}'
}
},
nameTextStyle: {
right: 0
},
data: Array.from(new Set(xAxis)),
axisLine: {
lineStyle: {
color: '#43485E'
}
// xAxis: [
// {
// type: 'time', //category
// name: '\n\n\n\n\n时间',
// axisLabel: {
// color: '#A9AEB2',
// fontSize: 12,
// show: function (index: any, value: any) {
// // 检查数据中是否存在这个时间点
// // return data.some(item:any => item[0] === value)
// },
// formatter: {
// day: '{MM}-{d}'
// }
// },
// nameTextStyle: {
// right: 0
// },
// data: Array.from(new Set(xAxis)),
// axisLine: {
// lineStyle: {
// color: '#43485E'
// }
// }
// }
// ],
xAxis: {
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
}
}
],
},
yAxis: [
{
type: 'value',
@@ -652,7 +635,6 @@ const init = () => {
} else {
vv.yAxisIndex = 0
}
//series数据
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
@@ -679,6 +661,7 @@ const init = () => {
// yAxisIndex:0,
yAxisIndex: vv.yAxisIndex
})
// console.log("🚀 ~ item.map ~ vv.phase + '相' + vv.showName:", vv.phase + '相' + vv.showName)
})
})
//设置数据项颜色
@@ -694,7 +677,7 @@ const init = () => {
// item.data = filterArray(item.data)
})
loading.value = false
console.log(echartsData.value.options.series, '++++++++++++++++++++669')
console.log(echartsData.value.options.series, '++++++++++++++++++++669', echartsData.value)
}
})
.catch(error => {
@@ -791,8 +774,8 @@ const handleExport = async () => {
count = index
}
// console.log( list[index].data[indexs][list[index].data[indexs]], indexs,"88888888888888");
console.log(list[index].data[indexs],"iiiiii");
let itemList:any=list[index].data[indexs]
console.log(list[index].data[indexs], "iiiiii");
let itemList: any = list[index].data[indexs]
index == list.length - 1
? (strs += itemList[0])
: (strs += itemList[0] + ',')
@@ -959,6 +942,7 @@ onMounted(() => {
display: flex;
justify-content: flex-start;
overflow-x: auto;
// height: 45px;
// padding-top: 18px;
// flex-wrap: wrap;
@@ -993,7 +977,7 @@ onMounted(() => {
width: 120px !important;
}
::v-deep .el-collapse-item__header{
::v-deep .el-collapse-item__header {
font-size: 16px !important;
font-weight: 800 !important;
}