mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

UI样式修改能源&班组

Browse Source
This commit is contained in:
朱菊兰
2023-10-11 14:30:18 +08:00
parent 180fcf5ad8
commit 814fe4605a
21 changed files with 385 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/energy/analysis/contrastAnalysis/components/barChart.vue
View File

@@ -97,6 +97,22 @@ export default {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return (
params[0].axisValue +
`<br>` +
params.map((item) => {
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
let value = item.value ? item.value : '-'
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span>
<span>${valueStr}</span>
</span>`
}).join(``)
)
}
},
grid: {
@@ -106,7 +122,11 @@ export default {
containLabel: true
},
legend: {
data: legendData
data: legendData,
right: '1%',
icon: 'rect',
itemHeight: 8,
itemWidth: 8
},
xAxis: {
type: 'category',

3
src/views/energy/analysis/contrastAnalysis/components/lineChart.vue
View File

@@ -103,7 +103,8 @@ export default {
containLabel: true
},
legend: {
data: legendData
data: legendData,
right: '1%'
},
xAxis: {
type: 'category',

14
src/views/energy/analysis/contrastAnalysis/components/searchArea.vue
View File

@@ -425,7 +425,7 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 时间整点 */
.noneMinute .el-time-spinner__wrapper {
width: 100%;
@@ -433,6 +433,16 @@ export default {
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
@@ -446,8 +456,6 @@ export default {
margin-top: 12px;
}
}
</style>
<style scoped>
.searchBarBox .foldClass {
position: absolute;
top: 14px;

30
src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
View File

@@ -15,7 +15,7 @@ export default {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(350)
chartHeight: this.tableHeight(370)
}
},
props: {
@@ -34,7 +34,7 @@ export default {
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(350)
this.chartHeight = this.tableHeight(370)
})
},
methods: {
@@ -86,17 +86,35 @@ export default {
}
}
var option = {
// title: {
// text: 'World Population'
// },
color:['#288AFF','#8EF0AB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return (
params[0].axisValue +
`<br>` +
params.map((item) => {
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
let value = item.value ? item.value : '-'
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span>
<span>${valueStr}</span>
</span>`
}).join(``)
)
}
},
legend: {},
legend: {
right: '1%',
icon: 'rect',
itemHeight: 8,
itemWidth: 8
},
grid: {
left: '1%',
right: '1%',

16
src/views/energy/analysis/qoqAnalysis/components/searchArea.vue
View File

@@ -194,13 +194,23 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style scoped>
<style lang="scss" scoped>
.separateStyle {
display: inline-block;
width: 1px;
@@ -208,8 +218,6 @@ export default {
background: #E8E8E8;
vertical-align: middle;
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
.blue-block {
display: inline-block;

22
src/views/energy/analysis/qoqAnalysis/index.vue
View File

@@ -9,7 +9,8 @@
:table-data="list"
class="qoq-out-table"
/>
<div style='width: 100%;height: 300px;padding-top: 30px;'>
<div class="chartTitle">环比分析图</div>
<div style='width: 100%'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
</div>
@@ -111,4 +112,21 @@ export default {
}
}
}
</script>
</script>
<style lang='scss' scoped>
.chartTitle {
font-size: 16px;
color: #000;
margin-top: 20px;
}
.chartTitle::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
vertical-align: bottom;
}
</style>

6
src/views/energy/analysis/trendAnalysis/components/barChart.vue
View File

@@ -68,12 +68,6 @@ export default {
}
var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '1%',

6
src/views/energy/analysis/trendAnalysis/components/lineChart.vue
View File

@@ -70,9 +70,9 @@ export default {
var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis'
},
// tooltip: {
// trigger: 'axis'
// },
grid: {
left: '4%',
right: '1%',

14
src/views/energy/analysis/trendAnalysis/components/searchArea.vue
View File

@@ -385,7 +385,7 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
@@ -397,6 +397,16 @@ export default {
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
@@ -410,8 +420,6 @@ export default {
margin-top: 12px;
}
}
</style>
<style scoped>
.searchBarBox .foldClass {
position: absolute;
top: 14px;

3
src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
View File

@@ -77,7 +77,8 @@ export default {
var option = {
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
legend: {
data: keys
data: keys,
right:'1%'
},
tooltip: {
trigger: 'axis'

26
src/views/energy/analysis/yoyAnalysis/components/searchArea.vue
View File

@@ -143,19 +143,20 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
</style>
<style scoped>
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
@@ -170,4 +171,11 @@ export default {
margin-top: 10px;
}
}
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
</style>

23
src/views/energy/analysis/yoyAnalysis/index.vue
View File

@@ -3,6 +3,7 @@
<!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/>
<div v-show='chartData.length'>
<div class="chartTitle">同比分析图</div>
<div style='width: 100%;height: 400px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
@@ -33,12 +34,12 @@ export default {
chartData: [],
tableProps: [],
list: [],
tableH: this.tableHeight(600)
tableH: this.tableHeight(640)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(600)
this.tableH = this.tableHeight(640)
})
},
methods: {
@@ -122,4 +123,20 @@ export default {
}
}
}
</script>
</script>
<style lang='scss' scoped>
.chartTitle {
font-size: 16px;
color: #000;
}
.chartTitle::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
vertical-align: bottom;
}
</style>