diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue index 5e7a720..a8a0478 100644 --- a/src/views/3DOverview/components/DianChart.vue +++ b/src/views/3DOverview/components/DianChart.vue @@ -36,11 +36,29 @@ export default { // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10 let data = [ // 温度走势 - [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5], + [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => { + let v = Math.floor(Math.random() * 100) + while (v < 30) { + v = Math.floor(Math.random() * 100) + } + return v + }), // 电流走势 - [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71], + [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => { + let v = Math.floor(Math.random() * 100) + while (v < 30) { + v = Math.floor(Math.random() * 100) + } + return v + }), // 电压走势 - [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73] + [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => { + let v = Math.floor(Math.random() * 100) + while (v < 30) { + v = Math.floor(Math.random() * 100) + } + return v + }) ] let wendu = data[0] let dianliu = data[1] @@ -52,6 +70,7 @@ export default { color: colors, legend: { top: 4, + right: 50, itemWidth: 8, itemHeight: 8, textStyle: { @@ -85,10 +104,10 @@ export default { name: '电流/A', nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, type: 'value', - splitNumber: 4, + splitNumber: 3, onZero: true, position: 'left', - offset: 42, + offset: 40, axisTick: { show: false }, axisLine: { show: true, @@ -112,7 +131,7 @@ export default { name: '电压/V', nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, type: 'value', - splitNumber: 4, + splitNumber: 3, axisTick: { show: false }, onZero: true, position: 'left', @@ -147,7 +166,7 @@ export default { } }, type: 'value', - splitNumber: 4, + splitNumber: 3, splitLine: { lineStyle: { color: '#fff3' diff --git a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue index ca95f73..5fae185 100644 --- a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue +++ b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue @@ -9,37 +9,6 @@ :table-config="tableProps" :table-data="tableData" > - - - - @@ -68,11 +37,6 @@ const PriorityComponent = { { style: { display: 'inline-block', - // borderRadius: '2px', - // padding: '2px 6px', - // color: '#fff', - // opacity: '0.6', - // fontSize: '12px', borderRadius: 'calc(2px * var(--beilv))', padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))', color: '#fff', @@ -94,15 +58,26 @@ const tableProps = [ { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 } ] const tableData = [ - { eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' }, - { eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' }, - { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' }, - { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' }, - { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' }, - { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' }, - { eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }, - { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' }, - { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' } + { eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' }, + { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, + { eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' }, + { eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' }, + { eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, + { eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' }, + { eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' }, + { eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' }, + { eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' }, + { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, + { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' }, + { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' }, + { eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' }, + { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' }, + { eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' }, + { eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' }, + { eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' }, + { eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' }, + { eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' }, + { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' } ] export default { diff --git a/src/views/3DOverview/components/LeftContentMonitor.vue b/src/views/3DOverview/components/LeftContentMonitor.vue index 6c86dcf..1f8ff56 100644 --- a/src/views/3DOverview/components/LeftContentMonitor.vue +++ b/src/views/3DOverview/components/LeftContentMonitor.vue @@ -25,6 +25,7 @@ export default { diff --git a/src/views/3DOverview/components/TechyTable.vue b/src/views/3DOverview/components/TechyTable.vue index 56f1ed1..2bb759a 100644 --- a/src/views/3DOverview/components/TechyTable.vue +++ b/src/views/3DOverview/components/TechyTable.vue @@ -200,11 +200,11 @@ export default { } .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) { - background-color: #0e203e90; + background-color: #0e203ecc; } .visual-base-table-container >>> .el-table tbody tr:nth-child(even), .visual-base-table-container >>> .el-table thead { - background-color: #20376090; + background-color: #213961cc; } diff --git a/src/views/3DOverview/components/assets/monitor/1.png b/src/views/3DOverview/components/assets/monitor/1.png index 0e4cd2f..951cc20 100644 Binary files a/src/views/3DOverview/components/assets/monitor/1.png and b/src/views/3DOverview/components/assets/monitor/1.png differ diff --git a/src/views/3DOverview/components/assets/monitor/2.png b/src/views/3DOverview/components/assets/monitor/2.png index 83f35be..e624df6 100644 Binary files a/src/views/3DOverview/components/assets/monitor/2.png and b/src/views/3DOverview/components/assets/monitor/2.png differ diff --git a/src/views/3DOverview/components/assets/monitor/3.png b/src/views/3DOverview/components/assets/monitor/3.png deleted file mode 100644 index c14859f..0000000 Binary files a/src/views/3DOverview/components/assets/monitor/3.png and /dev/null differ diff --git a/src/views/3DOverview/components/newBar.vue b/src/views/3DOverview/components/newBar.vue index 7861979..d1a7436 100644 --- a/src/views/3DOverview/components/newBar.vue +++ b/src/views/3DOverview/components/newBar.vue @@ -89,8 +89,8 @@ export default { this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : this.chartName === 'fault-category' - ? '#31a2ff' - : '#fff9', + ? '#31a2ff' + : '#fff9', show: true, offset: [-12, 10], position: 'top', @@ -113,6 +113,7 @@ export default { name: this.dataList[1].name, type: 'bar', barWidth: 20, + yAxisIndex: 1, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: this.dataList[1].topColor }, @@ -124,6 +125,7 @@ export default { { // 柱顶 name: this.dataList[1].name, + yAxisIndex: 1, type: 'pictorialBar', barWidth: 20, symbol: 'circle', @@ -143,8 +145,8 @@ export default { this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : this.chartName === 'fault-category' - ? '#31a2ff' - : '#fff9', + ? '#31a2ff' + : '#fff9', show: true, offset: [12, 10], position: 'top', @@ -154,6 +156,7 @@ export default { { // 柱底 name: this.dataList[1].name, + yAxisIndex: 1, type: 'pictorialBar', barWidth: 20, symbol: 'circle', @@ -170,7 +173,6 @@ export default { // 柱体 name: this.dataList[0].name, type: 'bar', - // barWidth: 26, barWidth: barWidth, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -191,7 +193,6 @@ export default { // 柱顶 name: this.dataList[0].name, type: 'pictorialBar', - // barWidth: 26, barWidth: barWidth, symbol: 'circle', symbolPosition: 'end', @@ -209,8 +210,8 @@ export default { this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : this.chartName === 'fault-category' - ? '#31a2ff' - : '#fff9', + ? '#31a2ff' + : '#fff9', show: true, offset: [0, 10], position: 'top', @@ -222,7 +223,6 @@ export default { // 柱底 name: this.dataList[0].name, type: 'pictorialBar', - // barWidth: 26, barWidth: barWidth, symbol: 'circle', symbolOffset: [0, '50%'], @@ -249,15 +249,16 @@ export default { this.chart = echarts.init(this.$refs.chartContainer) this.chart.setOption({ grid: { - top: '16%', - left: '2%', - right: '2%', + top: '24%', + left: '8%', + right: '5%', bottom: '3%', containLabel: true }, legend: { itemWidth: 8, itemHeight: 8, + top: '2%', right: '2%', textStyle: { color: '#fff9' @@ -281,31 +282,68 @@ export default { }, data: this.nameList }, - yAxis: { - axisLine: { - lineStyle: { - type: 'solid', - color: this.dataList[0].bottomColor, - // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 - width: '1' // 坐标线的宽度 - } + yAxis: [ + { + name: '产量/m²', + nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, + type: 'value', + splitNumber: 3, + axisTick: { show: false }, + onZero: true, + position: 'left', + offset: 10, + axisLine: { + lineStyle: { + type: 'solid', + color: this.dataList[0].bottomColor, + // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 + width: '1' // 坐标线的宽度 + } + }, + axisLabel: { + textStyle: { + color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 + } + }, + splitLine: { + lineStyle: { + type: 'dotted', + color: 'rgba(119, 255, 242, 0.2)' + } + }, + type: 'value' }, - axisTick: { - show: false - }, - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 - } - }, - splitLine: { - lineStyle: { - type: 'dotted', - color: 'rgba(119, 255, 242, 0.2)' - } - }, - type: 'value' - }, + { + name: '能耗kw/h', + nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, + type: 'value', + splitNumber: 3, + axisTick: { show: false }, + onZero: true, + position: 'left', + offset: 48, + axisLine: { + lineStyle: { + type: 'solid', + color: this.dataList[1].bottomColor, + width: '1' // 坐标线的宽度 + } + }, + axisLabel: { + textStyle: { + color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 + } + }, + splitLine: { + show: false, + // lineStyle: { + // type: 'dotted', + // color: 'rgba(119, 255, 242, 0.2)' + // } + }, + type: 'value' + } + ], series: this.series }) } @@ -354,10 +392,12 @@ export default { left: calc(100vw/1920 * 48); */ /* bottom: calc(10% + 100vh/1920 * 28); */ bottom: 20px; - left: 9%; + left: 6%; height: 30px; width: 90%; - background: linear-gradient(to top, #49fbd789, transparent); + border-radius: 3px; + /* border: 1px solid #49fbd7; */ + background: linear-gradient(to top, #49fbd789 5%, transparent); transform: skew(-35deg); z-index: 0; } diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue index 4546613..b479b66 100644 --- a/src/views/3DOverview/index.vue +++ b/src/views/3DOverview/index.vue @@ -1,8 +1,9 @@