diff --git a/src/views/bigScreen/index_10dept.vue b/src/views/bigScreen/index_10dept.vue index 51a3a5d6..f8f4d8a9 100644 --- a/src/views/bigScreen/index_10dept.vue +++ b/src/views/bigScreen/index_10dept.vue @@ -6,7 +6,7 @@ - +
@@ -28,10 +28,11 @@
昨日合格
-
- 1200 -
+ +
+ 130 +
+
@@ -41,28 +42,32 @@
累计合格
-
- 12000 -
+ +
+ 1300 +
+ -
- +
+ + -
+
-
人员到岗 +
人员到岗
- + +
-
+ -
+
-
-
任务进度
+
任务进度
-
+
- + + - + -
+ -
+
-
-
全年生产统计
+
全年生产统计
-
+ -
+
-
-
本月合格率统计
+
本月合格率统计
-
+ -
+
-
-
昨日合格统计
+
昨日合格统计
-
+ @@ -247,16 +250,16 @@ .box { background: rgba(6, 48, 109, .3); height: 100%; - padding: 2px 2px 2px 2px; + /* padding: 2px 2px 2px 2px; */ border-radius: 2%; } .boxtitle { color: #fff; - font-size: 14px; + font-size: 16px; display: flex; - height: 25px; - + height: 36px; + background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451)); } .bgimg { @@ -272,7 +275,7 @@ } .boxmain { - height: calc(100% - 25px); + height: calc(100% - 5rem); margin: 0px 4px 0px 4px; } @@ -332,9 +335,11 @@ export default { data() { return { basicOption: { + tooltip: {}, backgroundColor: '', xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'], + boundaryGap: false, }, yAxis: { type: 'value' }, series: [ @@ -342,33 +347,22 @@ export default { name: '销量', type: 'bar', barwidth: 10, + radius: ['40%', '70%'], label: { show: true, position: 'top' }, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#83bff6' }, - { offset: 0.5, color: '#188df0' }, - { offset: 1, color: '#188df0' } - ]) - }, - emphasis: { - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#2378f7' }, - { offset: 0.7, color: '#2378f7' }, - { offset: 1, color: '#83bff6' } - ]) - } - }, + itemStyle: {}, + emphasis: {}, + areaStyle: {}, + smooth: true, data: [5, 20, 36, 10, 10, 20] } ], grid: { // 让图表占满容器 top: "10%", left: "12%", - right: "0px", + right: "4%", bottom: "10%" } }, @@ -397,19 +391,127 @@ export default { post: '岗位1', state: 1 }, - ] + ], + taskBoard: { + header: ['列1', '列2', '列3'], + data: [ + ['行1列1', '行1列2', '行1列3'], + ['行2列1', '行2列2', '行2列3'], + ['行3列1', '行3列2', '行3列3'], + ['行4列1', '行4列2', '行4列3'], + ['行5列1', '行5列2', '行5列3'], + ['行6列1', '行6列2', '行6列3'], + ['行7列1', '行7列2', '行7列3'], + ['行8列1', '行8列2', '行8列3'], + ['行9列1', '行9列2', '行9列3'], + ['行10列1', '行10列2', '行10列3'], + ], + index: true, + columnWidth: [50], + align: ['center'], + }, + tableData: [ + ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'], + ['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'], + ], + taskBoard2: { + header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'], + headerBGC: '#eeeee', + waitTime: 3000, + columnWidth: [1, 1, 1, 1, 1], + data: [ + ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'], + ['行2列1', '行2列2', '行2列3', '行1列3', '行1列3', '行1列3'], + ['行3列1', '行3列2', '行3列3', '行1列3', '行1列3', '行1列3'], + ['行4列1', '行4列2', '行4列3', '行1列3', '行1列3', '行1列3'], + ['行5列1', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3'], + ['行6列1', '行6列2', '行6列3', '行1列3', '行1列3', '行1列3'], + ['行7列1', '行7列2', '行7列3', '行1列3', '行1列3', '行1列3'], + ['行8列1', '行8列2', '行8列3', '行1列3', '行1列3', '行1列3'], + ['行9列1', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3'], + ['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3'], + ['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3'], + ['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3'], + ['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3'], + ['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3'], + ], + index: true, + columnWidth: [50], + align: ['center'], + }, + chartInterval1: null, + chartInterval2: null, + chartInterval3: null } }, mounted() { - this.setChart("chart1"); + let chart1Option = deepCopy(this.basicOption) + let chart1 = this.setChart("chart1", chart1Option); + let index1 = 0 + this.chartInterval1 = setInterval(function () { + if (index1 < chart1Option.series[0].data.length) { + chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 }); + chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 }); + + chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 }); + chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 }); + index1++; + } else { + index1 = 0; + } + }, 3000); let chart2Option = deepCopy(this.basicOption) chart2Option.series[0].type = 'line' - this.setChart("chart2", chart2Option) + let chart2 = this.setChart("chart2", chart2Option) + let index2 = 0 + this.chartInterval2 = setInterval(function () { + if (chart2 < chart2Option.series[0].data.length) { + chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 }); + chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 }); + + chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 }); + chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 }); + index2++; + } else { + index2 = 0; + } + }, 2000); let chart3Option = deepCopy(this.basicOption) chart3Option.series[0].type = 'pie' - chart3Option.series[0].itemStyle = {} - chart3Option.series[0].emphasis = {} - this.setChart("chart3", chart3Option) + chart3Option.series[0].itemStyle = { + borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + chart3Option.series[0].emphasis = { + value: { + show: true, + fontSize: 40, + Color: 'white', + fontWeight: 'bold' + } + } + chart3Option.grid.right = "10%" + let chart3 = this.setChart("chart3", chart3Option) + let index3 = 0 + this.chartInterval3 = setInterval(function () { + if (index3 < chart3Option.series[0].data.length) { + chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 }); + chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 }); + + chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 }); + chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 }); + chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 }); + index3++; + } else { + index3 = 0; + } + }, 2000); }, methods: { setChart(name, option = null) { @@ -427,6 +529,7 @@ export default { myChart.setOption(option); } catch (error) { } }, 500) + return myChart }, } }