修改bug

This commit is contained in:
‘937886381’
2024-02-01 16:48:58 +08:00
parent 39aaf82345
commit 5098555a5e
16 changed files with 296 additions and 122 deletions

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-19 16:31:53
* @LastEditTime: 2024-02-01 15:35:10
* @Description:
-->
<template>
@@ -878,6 +878,7 @@ export default {
background-size: 100% 100%;
color: #00fff0;
text-align: center;
word-spacing:8px;
position: relative;
.unit{
position: absolute;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-01-29 16:50:26
* @LastEditTime: 2024-01-29 17:06:50
* @LastEditTime: 2024-02-01 15:35:43
* @LastEditors: zhp
* @Description:
-->
@@ -879,6 +879,7 @@ export default {
</script>
<style lang="scss" scoped>
.visual-container {
width: 1920px;
height: 1080px;
@@ -892,7 +893,7 @@ export default {
background-size: 100% 100%;
color: rgba(0, 255, 247, 1);
text-align: center;
word-spacing: 8px;
.unit {
position: absolute;
left: 260px;

View File

@@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2024-01-29 15:35:37
* @LastEditTime: 2024-02-01 15:25:14
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
@@ -250,12 +250,12 @@ export default {
width: 100%;
color: #ffffff;
font-size: 24px;
padding: 0.67em;
padding: 0.67em 0.67em 0.3em 0.67em;
display: flex;
}
.bar-content {
padding: 1em;
padding: .5em 1em 1em 1em;
flex: 1 auto;
position: relative;
}

View File

@@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-29 15:14:40
* @LastEditTime: 2024-02-01 15:52:41
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
<div style="height: 400px;">
<div :id="id" class="productChart" :style="{ height: '420px', width: width }" />
</div>
</template>
@@ -15,7 +15,7 @@
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
// import resize from './../mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
@@ -67,12 +67,18 @@ export default {
}]
}
},
// mounted() {
// console.log('mounted')
// console.log('borderRadius: ', this.borderRadius)
// // this.$nextTick(() => {
// // this.initChart()
// // })
// },
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
// this.$nextTick(() => {
// this.initChart()
// })
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
@@ -148,15 +154,11 @@ export default {
type: 'cross'
}
},
grid: {
left: "6%",
right: "6%",
bottom: "3%",
containLabel: true
},
grid: { top: 90, right: 60, bottom: 20, left: 90 },
legend: {
itemWidth: 10,
itemHeight: 10,
top: '0%',
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
@@ -174,9 +176,12 @@ export default {
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
color: "#fff",
fontSize: 12,
// formatter: '{value}'
// textStyle: {
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
// }
},
splitLine: {
lineStyle: {
@@ -214,10 +219,11 @@ export default {
}
},
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value}%'
}
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value}%'
// }
},
splitLine: {
lineStyle: {
@@ -241,7 +247,7 @@ export default {
// },
scale: true,
type: 'value',
name: '产量/', // y轴上方的单位
name: '产量/', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
@@ -258,10 +264,13 @@ export default {
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
formatter: '{value} 片'
}
// textStyle: {
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value} 片'
// }
},
splitLine: {
lineStyle: {
@@ -285,6 +294,9 @@ export default {
</script>
<style>
.productChart{
top: -40px;
position: absolute;
height: 100%;
width: 100%;
top: -30px;
}
</style>

View File

@@ -150,9 +150,9 @@ export default {
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
color: "#fff",
fontSize: 12,
// formatter: '{value}'
},
splitLine: {
lineStyle: {
@@ -162,25 +162,29 @@ export default {
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
show: true, // 是否显示 y 轴
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
color: "#fff",
fontSize: 12,
formatter: '{value}/kwh'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
type: 'value'
color: "#213259a0",
},
}
},
// legend: {
// itemHeight: 10,

View File

@@ -0,0 +1,62 @@
/*
* @Author: zhp
* @Date: 2024-02-01 15:39:22
* @LastEditTime: 2024-02-01 15:39:23
* @LastEditors: zhp
* @Description:
*/
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-30 17:19:32
* @LastEditTime: 2024-02-01 15:35:29
* @Description:
-->
<template>
@@ -103,13 +103,13 @@
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'"
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'"
:title="'产线产量及良品率'" :title-icon="'productLine'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值也许可以用js动态计算出来 -->
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="359" :show-legend="true" />
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="390" :show-legend="true" />
</base-container>
</el-col>
</el-row>
@@ -990,6 +990,7 @@ export default {
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
word-spacing: 8px;
text-align: center;
.unit {
position: absolute;