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

修改y轴样式

Browse Source
This commit is contained in:
GGJ
2024-11-04 18:27:26 +08:00
parent c0011a5d5b
commit 7dab1302b8
3 changed files with 95 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,21 +8,10 @@
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> </el-form-item>
<el-form-item label="统计指标" label-width="80px"> <el-form-item label="统计指标" label-width="80px">
<el-select <el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
multiple v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
:multiple-limit="3" <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
collapse-tags :value="item.id"></el-option>
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-select>
</el-form-item> </el-form-item>
<el-form-item label="值类型"> <el-form-item label="值类型">
@@ -32,19 +21,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item class="history_count" v-for="(item, index) in countData" :key="index"
class="history_count"
v-for="(item, index) in countData"
:key="index"
:label="item.name.includes('次数') ? item.name : item.name + '谐波次数'" :label="item.name.includes('次数') ? item.name : item.name + '谐波次数'"
v-show="item.countOptions.length != 0" v-show="item.countOptions.length != 0">
> <el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
<el-select style="width: 100px">
v-model="item.count"
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
style="width: 100px"
>
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option> <el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -220,7 +201,14 @@ const init = async () => {
let unitList: any = [] let unitList: any = []
let groupedData = chartsList.reduce((acc: any, item: any) => { let groupedData = chartsList.reduce((acc: any, item: any) => {
let key = item.anotherName
let key = ''
if (item.phase == null) {
key = item.unit
} else {
key = item.anotherName
}
if (!acc[key]) { if (!acc[key]) {
acc[key] = [] acc[key] = []
} }
@@ -228,6 +216,7 @@ const init = async () => {
return acc return acc
}, {}) }, {})
let result = Object.values(groupedData) let result = Object.values(groupedData)
// console.log("🚀 ~ .then ~ result:", result)
if (chartsList.length > 0) { if (chartsList.length > 0) {
unitList = result.map((item: any) => { unitList = result.map((item: any) => {
return item[0].unit return item[0].unit
@@ -238,14 +227,17 @@ const init = async () => {
legend: { legend: {
itemWidth: 20, itemWidth: 20,
itemHeight: 10, itemHeight: 10,
itemGap: 15, itemGap: 10,
type: 'scroll', // 开启滚动分页 type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列 // orient: 'vertical', // 垂直排列
top: 25, top: 10,
bottom: 30,
width: 400, width: 400,
right: 150, height: 50
height: 100 },
grid: {
top: '80px',
}, },
tooltip: { tooltip: {
axisPointer: { axisPointer: {
@@ -319,13 +311,21 @@ const init = async () => {
series: [] series: []
} }
} }
// console.log("🚀 ~ unitList.forEach ~ unitList:", unitList)
if (chartsList.length > 0) { if (chartsList.length > 0) {
echartsData.value.yAxis = [] echartsData.value.yAxis = []
unitList.forEach((item: any, index: any) => { unitList.forEach((item: any, index: any) => {
if (index > 2) {
echartsData.value.grid.right = (index - 1) * 80
}
let right = { let right = {
position: 'right', position: 'right',
offset: (index - 1) * 80 offset: (index - 1) * 80
} }
console.log("🚀 ~ unitList.forEach ~ right.index:", index)
echartsData.value.yAxis.push({ echartsData.value.yAxis.push({
name: item, name: item,
yAxisIndex: index, yAxisIndex: index,
@@ -337,13 +337,22 @@ const init = async () => {
...(index > 0 ? right : null) ...(index > 0 ? right : null)
}) })
}) })
// console.log("🚀 ~ result.forEach ~ result:", result)
result.forEach((item: any, index: any) => { result.forEach((item: any, index: any) => {
let yMethodList: any = [] let yMethodList: any = []
let ABCList = Object.values( let ABCList = Object.values(
item.reduce((acc, item) => { item.reduce((acc, item) => {
let key = item.phase
let key = ''
if (item.phase == null) {
key = item.anotherName
} else {
key = item.phase
}
if (!acc[key]) { if (!acc[key]) {
acc[key] = [] acc[key] = []
} }
@@ -351,6 +360,8 @@ const init = async () => {
return acc return acc
}, {}) }, {})
) )
// console.log("🚀 ~ ABCList.forEach ~ ABCList:", ABCList)
ABCList.forEach((kk: any) => { ABCList.forEach((kk: any) => {
let seriesList: any = [] let seriesList: any = []
kk.forEach((cc: any) => { kk.forEach((cc: any) => {
@@ -360,11 +371,12 @@ const init = async () => {
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit]) seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
}) })
// console.log(kk);
echartsData.value.options.series.push({ echartsData.value.options.series.push({
name: kk[0].phase name: kk[0].phase
? kk[0].phase + '相' + item[0].anotherName ? kk[0].phase + '相' + kk[0].anotherName
: item[0].anotherName, : kk[0].anotherName,
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
@@ -376,6 +388,7 @@ const init = async () => {
echartsData.value.yAxis[index].min = min echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max echartsData.value.yAxis[index].max = max
}) })
console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
} }
loading.value = false loading.value = false
} }
@@ -665,6 +678,7 @@ defineExpose({ getTrendRequest })
// flex: 1; // flex: 1;
margin-top: 10px; margin-top: 10px;
} }
.history_count { .history_count {
.el-select { .el-select {
min-width: 100px; min-width: 100px;

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

@@ -21,12 +21,8 @@
<p>测试项信息</p> <p>测试项信息</p>
</div> --> </div> -->
<el-tabs v-model="activeName" type="border-card" @click.self="handleClickTabs"> <el-tabs v-model="activeName" type="border-card" @click.self="handleClickTabs">
<el-tab-pane <el-tab-pane v-for="(item, index) in deviceData?.records" :label="item.itemName"
v-for="(item, index) in deviceData?.records" :name="item.id" :key="index">
:label="item.itemName"
:name="item.id"
:key="index"
>
<template #label> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<el-icon> <el-icon>
@@ -110,22 +106,11 @@
<TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange"> <TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange">
<template v-slot:select :key="num"> <template v-slot:select :key="num">
<el-form-item for="-" label="统计指标"> <el-form-item for="-" label="统计指标">
<el-select <el-select style="min-width: 200px" collapse-tags collapse-tags-tooltip
style="min-width: 200px" v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)"
collapse-tags multiple :multiple-limit="3">
collapse-tags-tooltip <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
v-model="searchForm.index" :value="item.id"></el-option>
placeholder="请选择统计指标"
@change="onIndexChange($event)"
multiple
:multiple-limit="3"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item for="-" label="值类型"> <el-form-item for="-" label="值类型">
@@ -134,42 +119,20 @@
<el-option value="Secondary" label="二次值"></el-option> <el-option value="Secondary" label="二次值"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item for="-" v-for="(item, index) in countData" :key="index"
for="-"
v-for="(item, index) in countData"
:key="index"
:label="item.name.includes('次数') ? item.name : item.name + '谐波次数'" :label="item.name.includes('次数') ? item.name : item.name + '谐波次数'"
label-width="180px" label-width="180px" v-show="item.countOptions.length != 0">
v-show="item.countOptions.length != 0"
>
<!-- multiple --> <!-- multiple -->
<el-select <el-select v-model="item.count" collapse-tags collapse-tags-tooltip
v-model="item.count" placeholder="请选择谐波次数" style="width: 120px">
collapse-tags <el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
collapse-tags-tooltip :value="vv"></el-option>
placeholder="请选择谐波次数"
style="width: 120px"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item for="-" label="统计类型" label-width="80px"> <el-form-item for="-" label="统计类型" label-width="80px">
<el-select <el-select style="width: 120px" v-model="searchForm.type" placeholder="请选择值类型">
style="width: 120px" <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
v-model="searchForm.type" :value="item.id"></el-option>
placeholder="请选择值类型"
>
<el-option
v-for="item in typeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
@@ -184,13 +147,8 @@
<div class="history_title"> <div class="history_title">
<p>{{ chartTitle }}</p> <p>{{ chartTitle }}</p>
</div> </div>
<div <div class="history_chart" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height"
class="history_chart" ref="chartRef">
v-loading="loading"
:style="EcharHeight"
:key="EcharHeight.height"
ref="chartRef"
>
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" /> <MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
</div> </div>
</div> </div>
@@ -463,7 +421,12 @@ const init = (flag: boolean) => {
let unitList: any = [] let unitList: any = []
let groupedData = chartsList.reduce((acc: any, item: any) => { let groupedData = chartsList.reduce((acc: any, item: any) => {
let key = item.anotherName let key = ''
if (item.phase == null) {
key = item.unit
} else {
key = item.anotherName
}
if (!acc[key]) { if (!acc[key]) {
acc[key] = [] acc[key] = []
} }
@@ -471,6 +434,7 @@ const init = (flag: boolean) => {
return acc return acc
}, {}) }, {})
let result = Object.values(groupedData) let result = Object.values(groupedData)
if (chartsList.length > 0) { if (chartsList.length > 0) {
unitList = result.map((item: any) => { unitList = result.map((item: any) => {
return item[0].unit return item[0].unit
@@ -485,10 +449,14 @@ const init = (flag: boolean) => {
type: 'scroll', // 开启滚动分页 type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列 // orient: 'vertical', // 垂直排列
top: 10, top: 10,
bottom: 30,
width: 400, width: 400,
height: 50 height: 50
}, },
grid: {
top: '80px',
},
tooltip: { tooltip: {
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
@@ -509,9 +477,8 @@ const init = (flag: boolean) => {
const xname = params[0].value[0] const xname = params[0].value[0]
let str = `${xname}<br>` let str = `${xname}<br>`
params.forEach((el: any, index: any) => { params.forEach((el: any, index: any) => {
str += `${el.marker}${el.seriesName.split('(')[0]}：${ str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1] ? el.value[1] + ' ' + el.value[2] : '-'
el.value[1] ? el.value[1] + ' ' + el.value[2] : '-' }<br>`
}<br>`
}) })
return str return str
} }
@@ -536,6 +503,9 @@ const init = (flag: boolean) => {
if (chartsList.length > 0) { if (chartsList.length > 0) {
echartsData.value.yAxis = [] echartsData.value.yAxis = []
unitList.forEach((item: any, index: any) => { unitList.forEach((item: any, index: any) => {
if (index > 2) {
echartsData.value.grid.right = (index - 1) * 80
}
let right = { let right = {
position: 'right', position: 'right',
offset: (index - 1) * 80 offset: (index - 1) * 80
@@ -557,7 +527,13 @@ const init = (flag: boolean) => {
let ABCList = Object.values( let ABCList = Object.values(
item.reduce((acc, item) => { item.reduce((acc, item) => {
let key = item.phase let key = ''
if (item.phase == null) {
key = item.anotherName
} else {
key = item.phase
}
if (!acc[key]) { if (!acc[key]) {
acc[key] = [] acc[key] = []
} }
@@ -576,8 +552,8 @@ const init = (flag: boolean) => {
}) })
echartsData.value.options.series.push({ echartsData.value.options.series.push({
name: kk[0].phase name: kk[0].phase
? kk[0].phase + '相' + item[0].anotherName ? kk[0].phase + '相' + kk[0].anotherName
: item[0].anotherName, : kk[0].anotherName,
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',

2
src/views/govern/manage/engineering.vue
View File

@@ -61,7 +61,7 @@ onMounted(() => {
// }, 500) // }, 500)
}) })
const deletes = (row: any) => { const deletes = (row: any) => {
ElMessageBox.prompt('二次校验密码确认', '', { ElMessageBox.prompt('二次校验密码确认', '·', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
customClass: 'customInput', customClass: 'customInput',