zangch
/
HT.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(tree): 优化树形结构样式并统一列标签

Browse Source 
- 调整树形结构选中节点和鼠标悬停时的样式
- 统一各页面瞬时流量、累计流量等列标签格式的单位
- 调整 el-col 的 span属性由4变为4.3
master
zch 7 months ago
parent 1560285fd6
commit 717788c5f0
15 changed files with 137 additions and 59 deletions
Show Stats Download Patch File Download Diff File

2
src/views/ems/base/baseMonitorThreshold/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"

2
src/views/ems/base/baseMonitorWorkUnit/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"

2
src/views/ems/record/recordDnbInstant/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"

14
src/views/ems/record/recordIOTInstant/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -47,10 +47,10 @@
end-placeholder="结束时间"
></el-date-picker>
</el-form-item>
<!-- <el-form-item label="温度" prop="tempreture">
<!-- <el-form-item label="温度（℃）" prop="tempreture">
<el-input
v-model="queryParams.tempreture"
placeholder="请输入温度"
placeholder="请输入温度（℃）"
clearable
@keyup.enter.native="handleQuery"
/>
@ -183,7 +183,7 @@
<span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="温度" align="center" prop="tempreture" v-if="columns[4].visible"/>
<el-table-column label="温度（℃）" align="center" prop="tempreture" v-if="columns[4].visible"/>
<el-table-column label="湿度" align="center" prop="humidity" v-if="columns[5].visible"/>
<el-table-column label="照度" align="center" prop="illuminance" v-if="columns[6].visible"/>
<el-table-column label="噪声" align="center" prop="noise" v-if="columns[7].visible"/>
@ -254,8 +254,8 @@
placeholder="请选择采集时间">
</el-date-picker>
</el-form-item>
<el-form-item label="温度" prop="tempreture">
<el-input v-model="form.tempreture" placeholder="请输入温度" />
<el-form-item label="温度（℃）" prop="tempreture">
<el-input v-model="form.tempreture" placeholder="请输入温度（℃）" />
</el-form-item>
<el-form-item label="湿度" prop="humidity">
<el-input v-model="form.humidity" placeholder="请输入湿度" />
@ -383,7 +383,7 @@
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `计量设备名称`, visible: true },
{ key: 3, label: `采集时间`, visible: true },
{ key: 4, label: `温度`, visible: true },
{ key: 4, label: `温度（℃）`, visible: true },
{ key: 5, label: `湿度`, visible: true },
{ key: 6, label: `照度`, visible: true },
{ key: 7, label: `噪声`, visible: true },

47
src/views/ems/record/recordLatestSteamInstant/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -23,6 +23,8 @@
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
@ -126,12 +128,12 @@
<span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="瞬时流量" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量" align="center" prop="steamFlow" v-if="columns[4].visible"/>
<el-table-column label="瞬时流量（t/h）" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量（t）" align="center" prop="steamFlow" v-if="columns[4].visible"/>
<el-table-column label="瞬时热量" align="center" prop="heatInstantValue" v-if="columns[5].visible"/>
<el-table-column label="累计热量" align="center" prop="heatTotalValue" v-if="columns[6].visible"/>
<el-table-column label="温度" align="center" prop="temperature" v-if="columns[7].visible"/>
<el-table-column label="压力" align="center" prop="press" v-if="columns[8].visible"/>
<el-table-column label="温度（℃）" align="center" prop="temperature" v-if="columns[7].visible"/>
<el-table-column label="压力（Mpa）" align="center" prop="press" v-if="columns[8].visible"/>
<el-table-column label="密度" align="center" prop="density" v-if="columns[9].visible"/>
<el-table-column label="压力差值" align="center" prop="differencePress" v-if="columns[10].visible"/>
<el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[11].visible">
@ -188,11 +190,11 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="瞬时流量" prop="fluxFlow">
<el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量"/>
<el-form-item label="瞬时流量（t/h）" prop="fluxFlow">
<el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量（t/h）"/>
</el-form-item>
<el-form-item label="累计流量" prop="steamFlow">
<el-input v-model="form.steamFlow" placeholder="请输入累计流量"/>
<el-form-item label="累计流量（t）" prop="steamFlow">
<el-input v-model="form.steamFlow" placeholder="请输入累计流量（t）"/>
</el-form-item>
<el-form-item label="瞬时热量" prop="heatInstantValue">
<el-input v-model="form.heatInstantValue" placeholder="请输入瞬时热量"/>
@ -200,10 +202,10 @@
<el-form-item label="累计热量" prop="heatTotalValue">
<el-input v-model="form.heatTotalValue" placeholder="请输入累计热量"/>
</el-form-item>
<el-form-item label="温度" prop="temperature">
<el-input v-model="form.temperature" placeholder="请输入温度"/>
<el-form-item label="温度（℃）" prop="temperature">
<el-input v-model="form.temperature" placeholder="请输入温度（℃）"/>
</el-form-item>
<el-form-item label="压力" prop="press">
<el-form-item label="压力（Mpa）" prop="press">
<el-input v-model="form.press" placeholder="请输入压力"/>
</el-form-item>
<el-form-item label="密度" prop="density">
@ -311,11 +313,11 @@ export default {
{ key: 0, label: `自增标识`, visible: false },
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `采集时间`, visible: true },
{ key: 3, label: `瞬时流量`, visible: true },
{ key: 4, label: `累计流量`, visible: true },
{ key: 3, label: `瞬时流量（t/h）`, visible: true },
{ key: 4, label: `累计流量（t）`, visible: true },
{ key: 5, label: `瞬时热量`, visible: false },
{ key: 6, label: `累计热量`, visible: false },
{ key: 7, label: `温度`, visible: true },
{ key: 7, label: `温度（℃）`, visible: true },
{ key: 8, label: `压力`, visible: true },
{ key: 9, label: `密度`, visible: false },
{ key: 10, label: `压力差值`, visible: false },
@ -525,3 +527,18 @@ export default {
return sortedData;
}*/
</script>
<style scoped>
/* 选中节点的样式 */
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
background-color: #67C23A !important; /* 选中节点的背景色 */
color: #303133 !important; /* 选中节点的文字颜色 */
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
z-index: 1; /* 确保在其他元素之上 */
}
/* 鼠标悬停时的样式 */
.el-tree .el-tree-node__content:hover {
background-color: #e6f7ff; /* 鼠标悬停时的背景色 */
}
</style>

47
src/views/ems/record/recordSteamInstant/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -123,18 +123,18 @@
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="自增标识" align="center" prop="objId" v-if="columns[0].visible"/>
<el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible"/>
<el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[12].visible"/>
<!-- <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[12].visible"/>-->
<el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="columns[2].visible">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="瞬时流量" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量" align="center" prop="steamFlow" v-if="columns[4].visible"/>
<el-table-column label="瞬时流量（t/h）" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量（t）" align="center" prop="steamFlow" v-if="columns[4].visible"/>
<el-table-column label="瞬时热量" align="center" prop="heatInstantValue" v-if="columns[5].visible"/>
<el-table-column label="累计热量" align="center" prop="heatTotalValue" v-if="columns[6].visible"/>
<el-table-column label="温度" align="center" prop="temperature" v-if="columns[7].visible"/>
<el-table-column label="压力" align="center" prop="press" v-if="columns[8].visible"/>
<el-table-column label="温度（℃）" align="center" prop="temperature" v-if="columns[7].visible"/>
<el-table-column label="压力（Mpa）" align="center" prop="press" v-if="columns[8].visible"/>
<el-table-column label="密度" align="center" prop="density" v-if="columns[9].visible"/>
<el-table-column label="压力差值" align="center" prop="differencePress" v-if="columns[10].visible"/>
<el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[11].visible">
@ -193,11 +193,11 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="瞬时流量" prop="fluxFlow">
<el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量"/>
<el-form-item label="瞬时流量（t/h）" prop="fluxFlow">
<el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量（t/h）"/>
</el-form-item>
<el-form-item label="累计流量" prop="steamFlow">
<el-input v-model="form.steamFlow" placeholder="请输入累计流量"/>
<el-form-item label="累计流量（t）" prop="steamFlow">
<el-input v-model="form.steamFlow" placeholder="请输入累计流量（t）"/>
</el-form-item>
<el-form-item label="瞬时热量" prop="heatInstantValue">
<el-input v-model="form.heatInstantValue" placeholder="请输入瞬时热量"/>
@ -205,10 +205,10 @@
<el-form-item label="累计热量" prop="heatTotalValue">
<el-input v-model="form.heatTotalValue" placeholder="请输入累计热量"/>
</el-form-item>
<el-form-item label="温度" prop="temperature">
<el-input v-model="form.temperature" placeholder="请输入温度"/>
<el-form-item label="温度（℃）" prop="temperature">
<el-input v-model="form.temperature" placeholder="请输入温度（℃）"/>
</el-form-item>
<el-form-item label="压力" prop="press">
<el-form-item label="压力（Mpa）" prop="press">
<el-input v-model="form.press" placeholder="请输入压力"/>
</el-form-item>
<el-form-item label="密度" prop="density">
@ -319,11 +319,11 @@ export default {
{ key: 0, label: `自增标识`, visible: false },
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `采集时间`, visible: true },
{ key: 3, label: `瞬时流量`, visible: true },
{ key: 4, label: `累计流量`, visible: true },
{ key: 3, label: `瞬时流量（t/h）`, visible: true },
{ key: 4, label: `累计流量（t）`, visible: true },
{ key: 5, label: `瞬时热量`, visible: false },
{ key: 6, label: `累计热量`, visible: false },
{ key: 7, label: `温度`, visible: true },
{ key: 7, label: `温度（℃）`, visible: true },
{ key: 8, label: `压力`, visible: true },
{ key: 9, label: `密度`, visible: false },
{ key: 10, label: `压力差值`, visible: false },
@ -546,3 +546,18 @@ function sortByPrefixOrder(data, order) {
*/
</script>
<style scoped>
/* 选中节点的样式 */
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
background-color: #67C23A !important; /* 选中节点的背景色 */
color: #303133 !important; /* 选中节点的文字颜色 */
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
z-index: 1; /* 确保在其他元素之上 */
}
/* 鼠标悬停时的样式 */
.el-tree .el-tree-node__content:hover {
background-color: #e6f7ff; /* 鼠标悬停时的背景色 */
}
</style>

18
src/views/ems/record/recordWaterInstant/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -129,8 +129,8 @@
<span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="瞬时流量" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量" align="center" prop="waterFlow" v-if="columns[4].visible"/>
<el-table-column label="瞬时流量（t/h）" align="center" prop="fluxFlow" v-if="columns[3].visible"/>
<el-table-column label="累计流量（t）" align="center" prop="waterFlow" v-if="columns[4].visible"/>
<el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[5].visible">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@ -189,11 +189,11 @@
>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="瞬时流量" prop="fluxFlow">-->
<!-- <el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量"/>-->
<!-- <el-form-item label="瞬时流量（t/h）" prop="fluxFlow">-->
<!-- <el-input v-model="form.fluxFlow" placeholder="请输入瞬时流量（t/h）"/>-->
<!-- </el-form-item>-->
<el-form-item label="累计流量" prop="waterFlow">
<el-input-number v-model="form.waterFlow" placeholder="请输入累计流量"/>
<el-form-item label="累计流量（t）" prop="waterFlow">
<el-input-number v-model="form.waterFlow" placeholder="请输入累计流量（t）"/>
</el-form-item>
<!-- <el-form-item label="记录时间" prop="recordTime">-->
<!-- <el-date-picker clearable-->
@ -300,8 +300,8 @@ export default {
{ key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `采集时间`, visible: true },
{ key: 3, label: `瞬时流量`, visible: true },
{ key: 4, label: `累计流量`, visible: true },
{ key: 3, label: `瞬时流量（t/h）`, visible: true },
{ key: 4, label: `累计流量（t）`, visible: true },
{ key: 5, label: `记录时间`, visible: true },
{ key: 6, label: `采集方式`, visible: true },
{ key: 7, label: `计量设备名称`, visible: true }

2
src/views/ems/report/currentIOTCurve/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"

17
src/views/ems/report/currentSteamCurve/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -608,4 +608,19 @@ export default {
height: 40vh;
display: inline-block;
}
/* 选中节点的样式 */
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
background-color: #67C23A !important; /* 选中节点的背景色 */
color: #303133 !important; /* 选中节点的文字颜色 */
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
z-index: 1; /* 确保在其他元素之上 */
}
/* 鼠标悬停时的样式 */
.el-tree .el-tree-node__content:hover {
background-color: #e6f7ff; /* 鼠标悬停时的背景色 */
}
</style>

2
src/views/ems/report/currentVibrationCurve/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"

2
src/views/ems/report/currentVoltageCurve/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"

19
src/views/ems/report/pointSteamCurve/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
@ -341,7 +341,7 @@ export default {
],
series: [
{
name: '耗量',
name: '耗量（t）',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
@ -719,4 +719,19 @@ function sortByPrefixOrder(data, order) {
width: 100%;
height: 75vh;
}
/* 选中节点的样式 */
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
background-color: #67C23A !important; /* 选中节点的背景色 */
color: #303133 !important; /* 选中节点的文字颜色 */
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
z-index: 1; /* 确保在其他元素之上 */
}
/* 鼠标悬停时的样式 */
.el-tree .el-tree-node__content:hover {
background-color: #e6f7ff; /* 鼠标悬停时的背景色 */
}
</style>

2
src/views/ems/report/reportPointDnb/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"

18
src/views/ems/report/reportPointSteam/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"
@ -497,3 +497,19 @@ function sortByPrefixOrder(data, specificOrder) {
}
*/
</script>
<style scoped>
/* 选中节点的样式 */
/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
background-color: #67C23A !important; /* 选中节点的背景色 */
color: #303133 !important; /* 选中节点的文字颜色 */
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
z-index: 1; /* 确保在其他元素之上 */
}
/* 鼠标悬停时的样式 */
.el-tree .el-tree-node__content:hover {
background-color: #e6f7ff; /* 鼠标悬停时的背景色 */
}
</style>

2
src/views/ems/report/reportPointWater/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="4" :xs="24">
<el-col :span="4.3" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"

Write Preview
Loading…
Cancel
Save