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

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

@@ -20,15 +20,13 @@
<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><TrendCharts /></el-icon>
<el-icon>
<TrendCharts />
</el-icon>
<span>{{ item.itemName }}</span>
</span>
</template>
@@ -101,19 +99,10 @@
<el-form-item label="统计指标" label-width="80px">
<!-- multiple
:multiple-limit="3" -->
<el-select
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@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="请选择统计指标"
@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>
<!-- {{ countData }} -->
@@ -121,30 +110,17 @@
<!-- :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"
: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>
@@ -411,24 +387,33 @@ const init = () => {
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/>`
type: 'cross',
crossStyle: {
color: '#999'
}
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使用iconfont图标
data: [],
@@ -443,13 +428,13 @@ const init = () => {
width: 400,
height: 50
},
grid: {
left: historyDataList.value.length != 0 ? '5%' : '1%',
right: '5%',
bottom: '10%',
top: '8%',
containLabel: true
},
// grid: {
// left: historyDataList.value.length != 0 ? '5%' : '1%',
// right: '5%',
// bottom: '10%',
// top: '8%',
// containLabel: true
// },
xAxis: [
{
type: 'category',
@@ -527,7 +512,7 @@ const init = () => {
axisLine: {
show: true,
lineStyle: {
color: colorList[index + 1]
// color: colorList[index + 1]
}
},
nameTextStyle: {
@@ -834,8 +819,10 @@ onMounted(() => {
}
}
}
.history_title {
width: 100%;
p {
height: 32px;
line-height: 32px;
@@ -853,13 +840,16 @@ onMounted(() => {
min-height: 130px !important;
}
}
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 95%;
display: flex;
justify-content: flex-start;
// overflow-x: auto;
// height: 45px;
// padding-top: 18px;
@@ -870,6 +860,7 @@ onMounted(() => {
display: flex;
align-items: center;
}
.el-select {
margin-right: 10px;
}