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 11:29:42 +08:00
parent e62389f077
commit 8f672c1970
2 changed files with 61 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/govern/analyze/APF/index.vue
View File

@@ -107,9 +107,14 @@ const nodeClick = async (e: anyObj) => {
if (zblist.value.length === 0) { if (zblist.value.length === 0) {
await init() await init()
} }
let getDevCapacityRes = await getDevCapacity(formInline.devId) getDevCapacity(formInline.devId).then(res => {
devCapacity.value = getDevCapacityRes.data devCapacity.value = res.data
search() search()
}).catch(() => {
loading.value = false
})
} }
} }
const search = () => { const search = () => {

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

@@ -20,15 +20,13 @@
<p>测试项信息</p> <p>测试项信息</p>
</div> </div>
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs"> <el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
<el-tab-pane <el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName" :name="item.id"
v-for="(item, index) in deviceData.records" :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><TrendCharts /></el-icon> <el-icon>
<TrendCharts />
</el-icon>
<span>{{ item.itemName }}</span> <span>{{ item.itemName }}</span>
</span> </span>
</template> </template>
@@ -101,19 +99,10 @@
<el-form-item label="统计指标" label-width="80px"> <el-form-item label="统计指标" label-width="80px">
<!-- multiple <!-- multiple
:multiple-limit="3" --> :multiple-limit="3" -->
<el-select <el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index" placeholder="请选择统计指标"
collapse-tags @change="init()">
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="init()"
>
<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>
<!-- {{ countData }} --> <!-- {{ countData }} -->
@@ -121,30 +110,17 @@
<!-- :label="item.name + '谐波次数'" label-width="180px"--> <!-- :label="item.name + '谐波次数'" label-width="180px"-->
<el-form-item label="谐波次数" v-if="item.countOptions.length != 0"> <el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
<!-- multiple --> <!-- multiple -->
<el-select <el-select v-model="item.count" collapse-tags collapse-tags-tooltip placeholder="请选择谐波次数"
v-model="item.count" style="width: 100px">
collapse-tags <el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
collapse-tags-tooltip :value="vv"></el-option>
placeholder="请选择谐波次数"
style="width: 100px"
>
<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>
</div> </div>
<el-form-item label="值类型" label-width="80px"> <el-form-item label="值类型" label-width="80px">
<el-select v-model="searchForm.type" placeholder="请选择值类型"> <el-select v-model="searchForm.type" placeholder="请选择值类型">
<el-option <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
v-for="item in typeOptions" :value="item.id"></el-option>
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -411,24 +387,33 @@ const init = () => {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'cross',
}, crossStyle: {
formatter: function (params: any) { color: '#999'
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
} }
}, },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
// 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
// }
// },
legend: { legend: {
//legend使用iconfont图标 //legend使用iconfont图标
data: [], data: [],
@@ -443,13 +428,13 @@ const init = () => {
width: 400, width: 400,
height: 50 height: 50
}, },
grid: { // grid: {
left: historyDataList.value.length != 0 ? '5%' : '1%', // left: historyDataList.value.length != 0 ? '5%' : '1%',
right: '5%', // right: '5%',
bottom: '10%', // bottom: '10%',
top: '8%', // top: '8%',
containLabel: true // containLabel: true
}, // },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
@@ -527,7 +512,7 @@ const init = () => {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colorList[index + 1] // color: colorList[index + 1]
} }
}, },
nameTextStyle: { nameTextStyle: {
@@ -834,8 +819,10 @@ onMounted(() => {
} }
} }
} }
.history_title { .history_title {
width: 100%; width: 100%;
p { p {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
@@ -853,13 +840,16 @@ onMounted(() => {
min-height: 130px !important; min-height: 130px !important;
} }
} }
.history_header { .history_header {
display: flex; display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
#history_select { #history_select {
width: 95%; width: 95%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
// overflow-x: auto; // overflow-x: auto;
// height: 45px; // height: 45px;
// padding-top: 18px; // padding-top: 18px;
@@ -870,6 +860,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.el-select { .el-select {
margin-right: 10px; margin-right: 10px;
} }