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

10
src/components/echarts/MyEchart.vue
View File

@@ -153,7 +153,10 @@ const handlerYAxis = () => {
},
axisLabel: {
color: '#000',
fontSize: 14
fontSize: 14,
formatter: function (value) {
return value.toFixed(0); // 格式化显示为一位小数
}
},
splitLine: {
lineStyle: {
@@ -162,7 +165,8 @@ const handlerYAxis = () => {
type: 'dashed',
opacity: 0.5
}
}
},
}
// props.options?.xAxis 是数组还是对象
if (Array.isArray(props.options?.yAxis)) {
@@ -245,11 +249,13 @@ watch(
width: 100%;
height: 100%;
position: relative;
.el-button {
position: absolute;
right: 0px;
top: -60px;
}
.my-chart {
height: 100%;
width: 100%;

55
src/utils/echartMethod.ts Normal file
View File

@@ -0,0 +1,55 @@
import { install$2 } from 'echarts/types/dist/shared'
export const yMethod = (arr: any) => {
console.log('🚀 ~ yMethod ~ arr:', arr)
let interval = 0
let maxValue = 0
let minValue = 0
let max = 0
let min = 0
maxValue = Math.max(...arr)
minValue = Math.min(...arr)
console.log('🚀 ~ yMethod ~ minValue:', minValue)
// interval = (maxValue - minValue) / 4
// if (maxValue > 1000) {
// interval = (Math.ceil(maxValue / 100) * 100 - Math.ceil(minValue / 100) * 100) / 4
// min = Math.floor((minValue - interval / 2) / 100) * 100
// max = Math.ceil((maxValue + interval / 2) / 100) * 100
// min >= 0 ? 0 : ''
// } else {
// min = Math.floor(minValue - interval / 2)
// max = Math.ceil(maxValue + interval / 2)
// console.log('🚀 ~ yMethod ~ minValue:', minValue)
// if (minValue >= 0 && minValue < 10) {
// min = 0
// }
// if (maxValue < 1 && maxValue >= 0) {
// max = 1
// }
// interval = (max - min) / 4
// }
// if (interval < 1 && interval > -1) {
// interval = 1
// }
// console.log("🚀 ~ yMethod ~ minValue:", minValue)
if (maxValue > 1000) {
max = Math.ceil(maxValue / 100) * 100
min = (Math.floor(minValue / 100) - 1) * 100
} else {
max = Math.ceil(maxValue / 10) * 10
min = Math.floor(minValue / 10) * 10
}
if (max > 0 && max < 1) {
max = 1
}
// if (min < 0 && min < -1) {
// min = -1
// }
return [min, max, interval]
}

61
src/views/govern/device/control/detail.vue
View File

@@ -39,6 +39,7 @@ import { reactive } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod } from '@/utils/echartMethod'
interface Props {
detail: anyObj
@@ -118,6 +119,7 @@ const init = () => {
res.data.forEach((item: any[]) => {
arr.push(...item)
})
let [min, max, interval] = yMethod(arr.map((item: any) => item.statisticalData))
echartsData.value = {
options: {
grid: {
@@ -183,25 +185,52 @@ const init = () => {
axisLine: {
show: true
},
minInterval: 0.1,
min: (
arr
.map((item: any) => item.statisticalData)
.sort((a, b) => {
return a - b
})[0] / 1.2
).toFixed(1),
max: (
arr
.map(item => item.statisticalData)
.sort((a, b) => {
return b - a
})[0] * 1.2
).toFixed(1)
min: min,
max: max,
// interval:interval,
splitNumber:5
// min: 134,
// max: 500,
// min: Math.ceil(
// arr
// .map((item: any) => item.statisticalData)
// .sort((a, b) => {
// return a - b
// })[0]
// ),
// max: Math.floor(
// arr
// .map(item => item.statisticalData)
// .sort((a, b) => {
// return b - a
// })[0]
// ),
// interval: (Math.floor(
// arr
// .map(item => item.statisticalData)
// .sort((a, b) => {
// return b - a
// })[0]
// ) - Math.ceil(
// arr
// .map((item: any) => item.statisticalData)
// .sort((a, b) => {
// return a - b
// })[0]
// )) / 5,
},
xAxis: {
type: 'time'
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
}
}
// data: res.data[0].map((item: any) => {
// return item.time
// }),

44
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -4,12 +4,8 @@
<div class="home_header">
<el-form-item label="值类型选择">
<el-select @change="changeView" v-model="value" placeholder="请选择值类型">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="(item, index) in options" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="">
@@ -17,29 +13,15 @@
</el-form-item>
</div>
<el-tabs class="home_body" type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
>
<shushiboxi
v-if="isWp && wp && activeName == 'ssbx'"
:value="value"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
<el-tab-pane label="瞬时波形" name="ssbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'">
<shushiboxi v-if="isWp && wp && activeName == 'ssbx'" :value="value" :boxoList="boxoList" :wp="wp">
</shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
>
<rmsboxi
v-if="isWp && wp && activeName == 'rmsbx'"
:value="value"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
<el-tab-pane label="RMS波形" name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'">
<rmsboxi v-if="isWp && wp && activeName == 'rmsbx'" :value="value" :boxoList="boxoList" :wp="wp">
</rmsboxi>
</el-tab-pane>
</el-tabs>
</div>
@@ -135,13 +117,14 @@ const handleClick = (tab: any, event: any) => {
const handleBack = () => {
emit('handleHideCharts')
}
onMounted(() => {})
onMounted(() => { })
defineExpose({ getWpData })
</script>
<style lang="scss" scoped>
.tab_info {
width: 100%;
height: calc(100vh - 450px);
// overflow: auto;
// padding-bottom: 20px;
.charts {
@@ -157,6 +140,7 @@ defineExpose({ getWpData })
display: flex;
flex-direction: column;
position: relative;
.home_header {
// position: absolute;
// top: -25px;
@@ -166,10 +150,12 @@ defineExpose({ getWpData })
height: 50px;
display: flex;
align-items: center;
.el-select {
width: 200px !important;
}
}
.home_body {
// margin-top: 20px;
flex: 1;

91
src/views/govern/device/control/tabs/trend.vue
View File

@@ -1,51 +1,37 @@
<template>
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
<div >
<TableHeader :showSearch="false">
<template v-slot:select>
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<div class="history_searchBtn">
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
</div>
<!-- </el-form> -->
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</template>
</TableHeader>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -457,7 +443,7 @@ const handleExport = async () => {
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj:any = {}
obj: any = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
@@ -612,13 +598,13 @@ const initSearchFormIndexAndCount = (list: any) => {
}
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
if(val.length==0){
countData.value[index].count=[countData.value[index].countOptions[0]]
if (val.length == 0) {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any, ) => {
if(val.length==0){
searchForm.value.index=[indexOptions.value[0].id]
const onIndexChange = (val: any,) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
}
watch(
@@ -657,13 +643,14 @@ watch(
// immediate: true
// }
// )
onMounted(() => {})
onMounted(() => { })
defineExpose({ getTrendRequest })
</script>
<style lang="scss" scoped>
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 100%;
@@ -672,10 +659,12 @@ defineExpose({ getTrendRequest })
// overflow-x: auto;
height: auto;
flex-wrap: wrap;
.el-form-item {
flex: none !important;
// max-width: 380px;
}
.el-select {
margin-right: 10px;
}
@@ -696,7 +685,7 @@ defineExpose({ getTrendRequest })
.history_chart {
width: 100%;
height: calc(100vh - 450px) !important;
height: calc(100vh - 400px) !important;
// flex: 1;
margin-top: 10px;
}

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