修改bug
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
62
src/views/OperationalOverview/components/resize.js
Normal file
62
src/views/OperationalOverview/components/resize.js
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user