-
+
@@ -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) {
@@ -83,6 +89,7 @@ export default {
},
methods: {
initChart(nameList, passRateList, outputNumList) {
+ console.log(nameList, passRateList)
let series= [
{
name: '产线产量',
@@ -134,7 +141,8 @@ export default {
}
}
},
- data: passRateList
+ // data: passRateList
+ data: []
}
]
// const colors = ['#5470C6', '#91CC75', '#EE6666']
@@ -147,15 +155,12 @@ export default {
type: 'cross'
}
},
- grid: {
- left: "3%",
- right: "5%",
- bottom: "3%",
- width: 'auto',
- height: "auto",
- containLabel: true
- },
+ grid: { top: 90, right: 60, bottom: 20, left: 90 },
legend: {
+ itemWidth: 10,
+ itemHeight: 10,
+ top: '0%',
+ right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
@@ -172,9 +177,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: {
@@ -188,12 +196,12 @@ export default {
// },
yAxis: [
{
- min: function() { // 取最小值向下取整为最小刻度
- return 0
- },
- max: function(value) { // 取最大值向上取整为最大刻度
- return Math.ceil(value.max)
- },
+ // min: function() { // 取最小值向下取整为最小刻度
+ // return 0
+ // },
+ // max: function(value) { // 取最大值向上取整为最大刻度
+ // return Math.ceil(value.max)
+ // },
scale: true,
type: 'value',
name: '良品率/%',
@@ -212,10 +220,11 @@ export default {
}
},
axisLabel: {
- textStyle: {
- color: '#ced1d5', // 坐标值得具体的颜色
- formatter: '{value}%'
- }
+ color: "#fff",
+ fontSize: 12,
+ // formatter: '{value}'
+ formatter: '{value}%'
+ // }
},
splitLine: {
lineStyle: {
@@ -231,21 +240,21 @@ export default {
// },
},
{
- min: function() { // 取最小值向下取整为最小刻度
- return 0
- },
- max: function(value) { // 取最大值向上取整为最大刻度
- return Math.ceil(value.max)
- },
+ // min: function() { // 取最小值向下取整为最小刻度
+ // return 0
+ // },
+ // max: function(value) { // 取最大值向上取整为最大刻度
+ // return Math.ceil(value.max)
+ // },
scale: true,
type: 'value',
- name: '产量/㎡', // y轴上方的单位
+ name: '产量/片', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
align: "right",
},
- position: 'left',
+ // position: 'left',
alignTicks: true,
axisLine: {
show: true,
@@ -256,10 +265,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: {
@@ -271,7 +283,7 @@ export default {
// show: true,
// lineStyle: {
// color: colors[1]
- // }
+ // }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// },
}
],
@@ -281,3 +293,11 @@ export default {
}
}
+
diff --git a/src/views/OperationalOverview/components/linearBarChart.vue b/src/views/OperationalOverview/components/linearBarChart.vue
index 2ddb9ea3..eae6faf0 100644
--- a/src/views/OperationalOverview/components/linearBarChart.vue
+++ b/src/views/OperationalOverview/components/linearBarChart.vue
@@ -83,20 +83,38 @@ export default {
this.chart = null
},
methods: {
- initChart(nameList,dataList) {
+ initChart(nameList, dataList) {
+ console.log('1111', dataList);
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
- if (dataList.length !== 0) {
+ // if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
this.series = [{
type: 'bar',
data: dataList,
- barWidth: 6
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#9DD5FF' },
+ { offset: 0.3, color: '#1295FF' }
+ ]),
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ textStyle: { //数值样式
+ color: '#ced1d5',
+ fontSize: 12
+ }
+ },
+ }
+ // barBorderRadius: this.borderRadius
+ },
+ barWidth: 12,
}]
- }
- if (nameList.length !== 0) {
+ // }
+ // if (nameList.length !== 0) {
this.nameList = nameList
- }
+ // }
this.chart.setOption({
tooltip: {
trigger: 'axis',
@@ -112,6 +130,16 @@ export default {
bottom: '3%',
containLabel: true
},
+ // legend: {
+ // itemWidth: 10,
+ // itemHeight: 10,
+ // // right: '20px',
+ // data: nameList,
+ // textStyle: {
+ // fontSize: 12 * this.beilv,
+ // color: '#ced1d5'
+ // }
+ // },
xAxis: {
type: 'category',
axisLine: {
@@ -122,9 +150,9 @@ export default {
}
},
axisLabel: {
- textStyle: {
- color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
- }
+ color: "#fff",
+ fontSize: 12,
+ // formatter: '{value}'
},
splitLine: {
lineStyle: {
@@ -134,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,
@@ -173,3 +205,4 @@ export default {
}
}
+
diff --git a/src/views/OperationalOverview/components/pileBarChart.vue b/src/views/OperationalOverview/components/pileBarChart.vue
index 8aa32129..9d2a06d9 100644
--- a/src/views/OperationalOverview/components/pileBarChart.vue
+++ b/src/views/OperationalOverview/components/pileBarChart.vue
@@ -1,13 +1,13 @@
@@ -91,41 +91,78 @@ export default {
},
methods: {
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
+ let rawData = []
+ rawData.push(passRateList,wasteList)
// console.log(1)
- this.chart = echarts.init(document.getElementById(this.id))
- let series = [
- {
- // 辅助系列
- name: '良品',
- type: 'bar',
- stack: 'total',
- // silent: true,
- // itemStyle: {
- color: '#0fdedb',
- // },
- barWidth: 10,
- data: passRateList
- },
- {
- type: 'bar',
- stack: 'total',
- name: '废品',
- data: wasteList,
- barWidth: 10,
- // barWidth: 15,
- // label: {
- // position: [10, 10],
- // normal: {
- // position: [800, -24],
- // show: true,
- // textStyle: {
- // color: '#2359ec',
- // fontSize: 16,
- // },
- // },
- // },
+ const totalData = [];
+ for (let i = 0; i < rawData[0].length; ++i) {
+ let sum = 0;
+ for (let j = 0; j < rawData.length; ++j) {
+ sum += rawData[j][i];
}
- ]
+ totalData.push(sum);
+ }
+ let colors = ['#0fdedb', '#2359ec' ]
+ console.log('total', totalData);
+ this.chart = echarts.init(document.getElementById(this.id))
+ const series = [
+ '良品',
+ '废品',
+ // 'Affiliate Ad',
+ // 'Video Ad',
+ // 'Search Engine'
+ ].map((name, sid) => {
+ // console.log(sid)
+ return {
+ name,
+ type: 'bar',
+ stack: 'total',
+ barWidth: 10,
+ label: {
+ show: true,
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+ },
+ color:colors[sid],
+ data: rawData[sid].map((d, did) =>
+ totalData[did] <= 0 ? 0 : d / totalData[did]
+ )
+ };
+ });
+ // let series = [
+ // {
+ // // 辅助系列
+ // name: '良品',
+ // type: 'bar',
+ // stack: 'total',
+ // // silent: true,
+ // // itemStyle: {
+ // color: '#0fdedb',
+ // // },
+ // // barCategoryGap: '10%',
+ // barWidth: 10,
+ // data: passRateList
+ // },
+ // {
+ // type: 'bar',
+ // stack: 'total',
+ // name: '废品',
+ // // barCategoryGap: '10%',
+ // data: wasteList,
+ // // barWidth: 10,
+ // // barWidth: 15,
+ // // label: {
+ // // position: [10, 10],
+ // // normal: {
+ // // position: [800, -24],
+ // // show: true,
+ // // textStyle: {
+ // // color: '#2359ec',
+ // // fontSize: 16,
+ // // },
+ // // },
+ // // },
+ // }
+ // ]
// for (i = 0; i < 5; i++) {
// series.push({
@@ -133,16 +170,20 @@ export default {
// }
this.chart.setOption({
legend: {
+ // top: '2.5%',
+ // right: '20px',
+ icon: 'rect',
textStyle: {
color: '#ffffff'
}
},
grid: {
+ top:'80',
left: '3%',
right: '4%',
- bottom: '3%',
+ // bottom: '3%',
width: 'auto',
- height: 'auto',
+ height: '300',
containLabel: true
},
yAxis: [
@@ -213,3 +254,7 @@ export default {
}
}
+
diff --git a/src/views/OperationalOverview/components/resize.js b/src/views/OperationalOverview/components/resize.js
new file mode 100644
index 00000000..e97d2039
--- /dev/null
+++ b/src/views/OperationalOverview/components/resize.js
@@ -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)
+ }
+ }
+}
diff --git a/src/views/OperationalOverview/processingBoard.vue b/src/views/OperationalOverview/processingBoard.vue
index 0536be0b..02d0c829 100644
--- a/src/views/OperationalOverview/processingBoard.vue
+++ b/src/views/OperationalOverview/processingBoard.vue
@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
- * @LastEditTime: 2024-01-08 16:06:49
+ * @LastEditTime: 2024-02-23 16:11:48
* @Description:
-->
@@ -14,7 +14,7 @@
}">
许昌安彩深加工看板
- 单位:河南汇融科技服务有限公司
+ 单位:河南汇融数字科技有限公司
{{ times }}
+
+
+
-
+
+
+
-
+
@@ -56,37 +63,15 @@
-->
-
+ {{ op.name }}
+
- {{ op.name }}
-
@@ -95,7 +80,8 @@