30 changed files with 1658 additions and 437 deletions
Split View
Diff Options
-
+223 -0src/views/3DOverview/components/DianChart.vue
-
+161 -0src/views/3DOverview/components/FadianChart.vue
-
+21 -6src/views/3DOverview/components/LeftContentEquipmentCheck.vue
-
+6 -6src/views/3DOverview/components/LeftContentMonitor.vue
-
+46 -8src/views/3DOverview/components/LeftContentOrder.vue
-
+186 -5src/views/3DOverview/components/LeftContentPublicConsume.vue
-
+19 -9src/views/3DOverview/components/RightContentAlert.vue
-
+232 -37src/views/3DOverview/components/RightContentFaultAnalysis.vue
-
+18 -3src/views/3DOverview/components/RightContentProductRate.vue
-
+19 -8src/views/3DOverview/components/RightContentQualityAnalysis.vue
-
+26 -5src/views/3DOverview/components/RightContentRealtimeProduction.vue
-
+198 -0src/views/3DOverview/components/TechyAnalysisBar.vue
-
+12 -1src/views/3DOverview/components/TechyHeader.vue
-
BINsrc/views/3DOverview/components/assets/consume/d.png
-
BINsrc/views/3DOverview/components/assets/consume/fad.png
-
BINsrc/views/3DOverview/components/assets/consume/gas.png
-
BINsrc/views/3DOverview/components/assets/consume/s.png
-
BINsrc/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.ttf
-
BINsrc/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff
-
BINsrc/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff2
-
+0 -90src/views/3DOverview/components/header-bg.svg
-
+363 -0src/views/3DOverview/components/newBar.vue
-
+52 -27src/views/3DOverview/index.vue
-
+13 -2src/views/EquipmentManager/HomePage.vue
-
+0 -90src/views/EquipmentManager/components/header-bg.svg
-
+25 -25src/views/EquipmentManager/mockData.js
-
+15 -2src/views/QualityManager/HomePage.vue
-
+5 -5src/views/QualityManager/components/charts/newLineStack.vue
-
+0 -90src/views/QualityManager/components/header-bg.svg
-
+18 -18src/views/QualityManager/mockData.js
+ 223
- 0
src/views/3DOverview/components/DianChart.vue
View File
| @@ -0,0 +1,223 @@ | |||
| <template> | |||
| <div :id="id" ref="techy-line-chart" class="techy-chart" /> | |||
| </template> | |||
| <script> | |||
| import echarts from 'echarts' | |||
| import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
| export default { | |||
| name: 'DianLineChart', | |||
| mixins: [resize], | |||
| /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */ | |||
| inject: ['resizeStatus'], | |||
| /** End Fn.1 */ | |||
| props: { | |||
| id: { | |||
| type: String, | |||
| default: 'default-dian-id' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| default: 'default-title' | |||
| }, | |||
| xData: { | |||
| type: Array, | |||
| default: () => [] | |||
| }, | |||
| seriesData: { | |||
| type: Array, | |||
| default: () => [] | |||
| } | |||
| }, | |||
| data() { | |||
| const colors = ['#5470C6', '#EE6666', '#339888'] | |||
| // 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], | |||
| // 电流走势 | |||
| [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71], | |||
| // 电压走势 | |||
| [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73] | |||
| ] | |||
| let wendu = data[0] | |||
| let dianliu = data[1] | |||
| let dianya = data[2] | |||
| return { | |||
| chart: null, | |||
| option: { | |||
| color: colors, | |||
| legend: { | |||
| top: 4, | |||
| itemWidth: 8, | |||
| itemHeight: 8, | |||
| textStyle: { | |||
| color: '#fff9', | |||
| fontSize: 8 | |||
| }, | |||
| // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] | |||
| }, | |||
| grid: { | |||
| top: 32, | |||
| left: 64, | |||
| bottom: 28 | |||
| }, | |||
| xAxis: [ | |||
| { | |||
| type: 'category', | |||
| data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], | |||
| axisTick: { show: false }, | |||
| axisLabel: { | |||
| color: '#fff9' | |||
| }, | |||
| axisLine: { | |||
| lineStyle: { | |||
| color: '#fff3' | |||
| } | |||
| } | |||
| } | |||
| ], | |||
| yAxis: [ | |||
| { | |||
| name: '电流/A', | |||
| nameTextStyle: { align: 'right', fontSize: 8 }, | |||
| type: 'value', | |||
| splitNumber: 4, | |||
| onZero: true, | |||
| position: 'left', | |||
| offset: 42, | |||
| axisTick: { show: false }, | |||
| axisLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: '#fff9', | |||
| width: 1 | |||
| } | |||
| }, | |||
| splitLine: { | |||
| show: false | |||
| // lineStyle: { | |||
| // color: '#fff3' | |||
| // } | |||
| } | |||
| }, | |||
| { | |||
| name: '电压/V', | |||
| nameTextStyle: { align: 'right', fontSize: 8 }, | |||
| type: 'value', | |||
| splitNumber: 4, | |||
| axisTick: { show: false }, | |||
| onZero: true, | |||
| position: 'left', | |||
| offset: 0, | |||
| axisLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: '#fff9', | |||
| width: 1 | |||
| } | |||
| }, | |||
| splitLine: { | |||
| show: false | |||
| // lineStyle: { | |||
| // color: '#fff3' | |||
| // } | |||
| } | |||
| }, | |||
| { | |||
| name: '温度', | |||
| nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 }, | |||
| axisTick: { show: false }, | |||
| axisLine: { | |||
| show: false, | |||
| lineStyle: { | |||
| color: '#fff9', | |||
| width: 1 | |||
| } | |||
| }, | |||
| type: 'value', | |||
| splitNumber: 4, | |||
| splitLine: { | |||
| lineStyle: { | |||
| color: '#fff3' | |||
| } | |||
| } | |||
| } | |||
| ], | |||
| series: [ | |||
| { | |||
| name: 'ABC三相电压/v', | |||
| type: 'line', | |||
| yAxisIndex: 0, | |||
| // smooth: true, | |||
| emphasis: { | |||
| focus: 'series' | |||
| }, | |||
| data: dianliu, | |||
| symbol: 'none' | |||
| }, | |||
| { | |||
| name: 'ABC三相电流/a', | |||
| type: 'line', | |||
| yAxisIndex: 1, | |||
| // smooth: true, | |||
| emphasis: { | |||
| focus: 'series' | |||
| }, | |||
| data: dianya, | |||
| symbol: 'none' | |||
| }, | |||
| { | |||
| name: '电缆温度', | |||
| type: 'line', | |||
| yAxisIndex: 2, | |||
| // smooth: true, | |||
| emphasis: { | |||
| focus: 'series' | |||
| }, | |||
| data: wendu, | |||
| symbol: 'none' | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| shouldResize() { | |||
| return this.resizeStatus() | |||
| } | |||
| }, | |||
| watch: { | |||
| shouldResize(val, oldVal) { | |||
| setTimeout(() => { | |||
| this.chart.resize() | |||
| }, 250) | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.$nextTick(() => { | |||
| if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) | |||
| this.chart.setOption(this.option) | |||
| }) | |||
| }, | |||
| beforeDestroy() { | |||
| if (this.chart) this.chart.dispose() | |||
| this.chart = null | |||
| }, | |||
| methods: {} | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .techy-chart { | |||
| height: 100%; | |||
| width: 100%; | |||
| } | |||
| .techy-chart >>> div { | |||
| width: 100% !important; | |||
| height: 100% !important; | |||
| } | |||
| </style> | |||
+ 161
- 0
src/views/3DOverview/components/FadianChart.vue
View File
| @@ -0,0 +1,161 @@ | |||
| <template> | |||
| <div :id="id" ref="techy-line-chart" class="techy-chart" /> | |||
| </template> | |||
| <script> | |||
| import echarts from 'echarts' | |||
| import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
| export default { | |||
| name: 'FadianLineChart', | |||
| mixins: [resize], | |||
| /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */ | |||
| inject: ['resizeStatus'], | |||
| /** End Fn.1 */ | |||
| props: { | |||
| id: { | |||
| type: String, | |||
| default: 'default-fadian-id' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| default: 'default-title' | |||
| }, | |||
| xData: { | |||
| type: Array, | |||
| default: () => [] | |||
| }, | |||
| seriesData: { | |||
| type: Array, | |||
| default: () => [] | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| chart: null, | |||
| option: { | |||
| legend: { | |||
| itemGap: 8, | |||
| itemWidth: 10, | |||
| itemHeight: 10, | |||
| right: '5%', | |||
| textStyle: { | |||
| color: '#fff9' | |||
| } | |||
| }, | |||
| color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'], | |||
| grid: { | |||
| top: '30%', | |||
| left: 0, | |||
| right: '5%', | |||
| bottom: 0, | |||
| containLabel: true | |||
| }, | |||
| xAxis: { | |||
| type: 'category', | |||
| boundaryGap: false, | |||
| // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |||
| data: Array(12) | |||
| .fill(0) | |||
| .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'), | |||
| axisTick: { | |||
| show: false | |||
| }, | |||
| axisLabel: { | |||
| fontSize: 8, | |||
| color: '#fffa' | |||
| }, | |||
| axisLine: { | |||
| lineStyle: { | |||
| color: '#fff3' | |||
| } | |||
| } | |||
| }, | |||
| yAxis: { | |||
| type: 'value', | |||
| name: '压力/MPa', | |||
| nameTextStyle: { | |||
| fontSize: 10, | |||
| color: '#fff9', | |||
| align: 'right' | |||
| }, | |||
| axisLine: { | |||
| show: false | |||
| }, | |||
| axisLabel: { | |||
| fontSize: 8, | |||
| color: '#fffa' | |||
| // formatter: '{value} %' | |||
| }, | |||
| axisTick: { show: false }, | |||
| splitLine: { | |||
| lineStyle: { | |||
| color: '#fff3' | |||
| } | |||
| } | |||
| }, | |||
| series: [ | |||
| { | |||
| name: '天然气', | |||
| type: 'line', | |||
| symbol: 'none', | |||
| data: Array(12) | |||
| .fill(0) | |||
| .map(_ => Math.floor(Math.random() * 100)) | |||
| }, | |||
| { | |||
| name: '氧气', | |||
| type: 'line', | |||
| symbol: 'none', | |||
| data: Array(12) | |||
| .fill(0) | |||
| .map(_ => Math.floor(Math.random() * 100)) | |||
| }, | |||
| { | |||
| name: 'CDA', | |||
| type: 'line', | |||
| symbol: 'none', | |||
| data: Array(12) | |||
| .fill(0) | |||
| .map(_ => Math.floor(Math.random() * 100)) | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| shouldResize() { | |||
| return this.resizeStatus() | |||
| } | |||
| }, | |||
| watch: { | |||
| shouldResize(val, oldVal) { | |||
| setTimeout(() => { | |||
| this.chart.resize() | |||
| }, 250) | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.$nextTick(() => { | |||
| if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) | |||
| this.chart.setOption(this.option) | |||
| }) | |||
| }, | |||
| beforeDestroy() { | |||
| if (this.chart) this.chart.dispose() | |||
| this.chart = null | |||
| }, | |||
| methods: {} | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .techy-chart { | |||
| height: 100%; | |||
| width: 100%; | |||
| } | |||
| .techy-chart >>> div { | |||
| width: 100% !important; | |||
| height: 100% !important; | |||
| } | |||
| </style> | |||
+ 21
- 6
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
View File
| @@ -2,7 +2,7 @@ | |||
| <div class="left-content-equipment-check"> | |||
| <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" /> | |||
| <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> --> | |||
| <div class="el-table-wrapper"> | |||
| <div class="el-table-wrapper fix-table"> | |||
| <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> --> | |||
| <el-table | |||
| key="LeftContentEquipmentCheck1" | |||
| @@ -10,10 +10,10 @@ | |||
| :data="tableData" | |||
| :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" | |||
| > | |||
| <el-table-column label="设备名称" prop="eqName" /> | |||
| <el-table-column label="所属产线" prop="pl" /> | |||
| <el-table-column label="提示等级" prop="warningLevel" /> | |||
| <el-table-column label="提示等级" prop="checkContent" /> | |||
| <el-table-column label="设备名称" prop="eqName" align="center" /> | |||
| <el-table-column label="所属产线" prop="pl" align="center" /> | |||
| <el-table-column label="提示等级" prop="warningLevel" align="center" /> | |||
| <el-table-column label="提示等级" prop="checkContent" align="center" /> | |||
| </el-table> | |||
| </div> | |||
| <!-- <div class="el-table-wrapper"> | |||
| @@ -43,6 +43,11 @@ const tableProps = [ | |||
| { prop: 'checkContent', label: '提示等级', width: 120, resizable: false } | |||
| ] | |||
| const tableData = [ | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }, | |||
| { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' } | |||
| // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' }, | |||
| @@ -68,9 +73,17 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| .fix-table >>> .el-table td .cell { | |||
| width: 60% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .left-content-equipment-check { | |||
| height: calc(100% - 32px); | |||
| display: flex; | |||
| gap: calc(100vmin / 1920 * 36); | |||
| overflow: hidden; | |||
| } | |||
| .el-table-wrapper { | |||
| @@ -79,7 +92,7 @@ export default { | |||
| .left-content-equipment-check > div { | |||
| overflow: hidden; | |||
| overflow-x: scroll; | |||
| /* overflow-x: scroll; */ | |||
| } | |||
| .el-table-wrapper >>> * { | |||
| @@ -96,6 +109,8 @@ export default { | |||
| background-color: transparent; | |||
| color: #fff9; | |||
| border: 0; | |||
| height: 100%; | |||
| overflow-y: auto; | |||
| } | |||
| .el-table-wrapper >>> .el-table th.is-leaf, | |||
+ 6
- 6
src/views/3DOverview/components/LeftContentMonitor.vue
View File
| @@ -7,14 +7,14 @@ | |||
| <script> | |||
| import { default as pic1 } from './assets/monitor/1.png' | |||
| import { default as pic2 } from './assets/monitor/2.png' | |||
| import { default as pic3 } from './assets/monitor/3.png' | |||
| // import { default as pic3 } from './assets/monitor/3.png' | |||
| export default { | |||
| name: '', | |||
| data() { | |||
| return { | |||
| images: [pic1, pic2, pic3] | |||
| images: [pic1, pic2] | |||
| } | |||
| }, | |||
| created() {}, | |||
| @@ -26,15 +26,15 @@ export default { | |||
| <style scoped> | |||
| .left-content-monitoring { | |||
| width: 100%; | |||
| /* height: calc(100% - 48px); */ | |||
| height: calc(100% - 32px); | |||
| display: flex; | |||
| gap: calc(100vw / 1920 * 16); | |||
| } | |||
| .monitor-pic { | |||
| flex: 1; | |||
| height: 128px; | |||
| background-position: 100% 100%; | |||
| height: 100%; | |||
| width: 260px; | |||
| /* background-position: 100% 100%; */ | |||
| background-size: cover; | |||
| background-repeat: no-repeat; | |||
| } | |||
+ 46
- 8
src/views/3DOverview/components/LeftContentOrder.vue
View File
| @@ -2,7 +2,7 @@ | |||
| <div class="left-content-equipment-check"> | |||
| <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" /> | |||
| <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> --> | |||
| <div class="el-table-wrapper"> | |||
| <div class="el-table-wrapper fix-table"> | |||
| <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> --> | |||
| <el-table | |||
| key="LeftContentOrder1" | |||
| @@ -10,10 +10,33 @@ | |||
| :data="tableData" | |||
| :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" | |||
| > | |||
| <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" /> | |||
| <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" /> | |||
| <el-table-column label="规格" prop="specs" :resizable="true" /> | |||
| <el-table-column label="完成度" prop="finished" :resizable="true" /> | |||
| <el-table-column | |||
| label="订单编号" | |||
| prop="orderCode" | |||
| :show-overflow-tooltip="true" | |||
| :resizable="true" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| label="客户名称" | |||
| prop="clientName" | |||
| :show-overflow-tooltip="true" | |||
| :resizable="true" | |||
| align="center" | |||
| /> | |||
| <el-table-column label="规格" prop="specs" :resizable="true" align="center" /> | |||
| <el-table-column label="完成度" prop="finished" :resizable="true" align="center"> | |||
| <template slot-scope="scope"> | |||
| <el-progress | |||
| class="lb-progress-bar" | |||
| type="circle" | |||
| :percentage="scope.row.finished" | |||
| :width="18" | |||
| :stroke-width="2" | |||
| color="#47FF27" | |||
| /> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| </div> | |||
| <!-- <div class="el-table-wrapper"> | |||
| @@ -41,8 +64,8 @@ const tableData = [ | |||
| { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 }, | |||
| { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 }, | |||
| { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 }, | |||
| { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }, | |||
| { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 } | |||
| { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 } | |||
| // { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 } | |||
| // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 } | |||
| ] | |||
| const tableData2 = [ | |||
| @@ -68,6 +91,12 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| .fix-table >>> .el-table td .cell { | |||
| width: 70% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .left-content-equipment-check { | |||
| display: flex; | |||
| gap: calc(100vw / 1920 * 16); | |||
| @@ -79,7 +108,7 @@ export default { | |||
| .left-content-equipment-check > div { | |||
| overflow: hidden; | |||
| overflow-x: scroll; | |||
| overflow-x: auto; | |||
| } | |||
| .el-table-wrapper >>> * { | |||
| @@ -131,4 +160,13 @@ export default { | |||
| .el-table-wrapper >>> tbody > tr:nth-child(even) { | |||
| background: rgba(76, 97, 123, 0.2); | |||
| } | |||
| .lb-progress-bar { | |||
| left: 30px; | |||
| display: flex; | |||
| } | |||
| .lb-progress-bar >>> .el-progress__text { | |||
| color: #fff9; | |||
| left: -75%; | |||
| } | |||
| </style> | |||
+ 186
- 5
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File
| @@ -1,6 +1,6 @@ | |||
| <template> | |||
| <div class="public-consume__inner"> | |||
| <div class="water-area"> | |||
| <!-- <div class="water-area"> | |||
| <TechyBarChart | |||
| :id="'water-chart'" | |||
| key="waterchart" | |||
| @@ -23,6 +23,97 @@ | |||
| :x-data="['天然气', '氧气', 'CDA']" | |||
| :series-data="[8.2, 10, 6.1]" | |||
| /> | |||
| </div> --> | |||
| <div> | |||
| <TechyBox class="water-consume"> | |||
| <div class="header-part has-border"> | |||
| <img src="./assets/consume/s.png" width="32" height="32" alt="water"> | |||
| <span>水</span> | |||
| </div> | |||
| <div class="content-part"> | |||
| <div class="row"> | |||
| <span class="name">纯 水</span> | |||
| <span class="diy-process-bar color-1" /> | |||
| <span class="amount"> | |||
| 39m | |||
| <sup>3</sup> | |||
| </span> | |||
| </div> | |||
| <div class="row"> | |||
| <span class="name">循环水</span> | |||
| <span class="diy-process-bar color-2" /> | |||
| <span class="amount"> | |||
| 239m | |||
| <sup>3</sup> | |||
| </span> | |||
| </div> | |||
| <div class="row"> | |||
| <span class="name">自来水</span> | |||
| <span class="diy-process-bar color-3" /> | |||
| <span class="amount"> | |||
| 23m | |||
| <sup>3</sup> | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </TechyBox> | |||
| </div> | |||
| <div> | |||
| <TechyBox class="gas-consume"> | |||
| <div class="header-part has-border"> | |||
| <img src="./assets/consume/gas.png" width="32" height="32" alt="qi"> | |||
| <span>气</span> | |||
| </div> | |||
| <div class="content-part"> | |||
| <div class="row"> | |||
| <span class="name">氧 气</span> | |||
| <span class="diy-process-bar color-1" /> | |||
| <span class="amount"> | |||
| 39Pa | |||
| </span> | |||
| </div> | |||
| <div class="row"> | |||
| <span class="name">CDA</span> | |||
| <span class="diy-process-bar color-2" /> | |||
| <span class="amount"> | |||
| 239pa | |||
| </span> | |||
| </div> | |||
| <div class="row"> | |||
| <span class="name">天然气</span> | |||
| <span class="diy-process-bar color-3" /> | |||
| <span class="amount"> | |||
| 23Pa | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </TechyBox> | |||
| </div> | |||
| <div style="flex: 1;"> | |||
| <TechyBox class="dian-consume"> | |||
| <div class="header-part"> | |||
| <img src="./assets/consume/d.png" width="32" height="32" alt="dian"> | |||
| <span>电</span> | |||
| </div> | |||
| <div class="content-part"> | |||
| <DianChart /> | |||
| </div> | |||
| </TechyBox> | |||
| </div> | |||
| <div style="flex: 1;"> | |||
| <TechyBox class="elec-consume"> | |||
| <div class="header-part"> | |||
| <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian"> | |||
| <span>发电</span> | |||
| </div> | |||
| <div class="content-part"> | |||
| <FadianChart /> | |||
| </div> | |||
| </TechyBox> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| @@ -30,10 +121,12 @@ | |||
| <script> | |||
| import TechyBarChart from './TechyBarChart.vue' | |||
| import TechyLineChart from './TechyLineChart.vue' | |||
| import TechyBox from './TechyBox.vue' | |||
| import FadianChart from './FadianChart.vue' | |||
| import DianChart from './DianChart.vue' | |||
| export default { | |||
| name: 'LeftContentPublicConsume', | |||
| components: { TechyBarChart, TechyLineChart }, | |||
| components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| @@ -47,10 +140,13 @@ export default { | |||
| .public-consume__inner { | |||
| height: calc(100% - 32px); | |||
| width: 100%; | |||
| display: grid; | |||
| /* display: grid; | |||
| grid-template-areas: | |||
| 'water elec elec gas' | |||
| 'water elec-gen elec-gen gas'; | |||
| 'water elec-gen elec-gen gas'; */ | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: calc(100vmin / 1920 * 16); | |||
| } | |||
| .water-area { | |||
| @@ -69,4 +165,89 @@ export default { | |||
| /* .elec-area,.elec-gen-area { | |||
| max-height: calc((100% - 32px) / 2 - 16px); | |||
| } */ | |||
| .techy-box { | |||
| padding: calc(100vmin / 1920 * 16); | |||
| display: flex; | |||
| } | |||
| .header-part { | |||
| height: 100%; | |||
| width: calc(100vmin / 1920 * 96); | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| /* overflow: hidden; */ | |||
| margin-right: 16px; | |||
| position: relative; | |||
| } | |||
| .header-part.has-border::after { | |||
| content: ''; | |||
| position: absolute; | |||
| top: 0; | |||
| right: -8px; | |||
| width: 1px; | |||
| height: 100%; | |||
| background: linear-gradient(to bottom, transparent, #fff9, transparent); | |||
| } | |||
| .header-part > span { | |||
| color: #fffc; | |||
| font-size: 0.8em; | |||
| } | |||
| .content-part { | |||
| display: flex; | |||
| flex-direction: column; | |||
| font-size: calc(100vmin / 1920 * 18); | |||
| color: #fff9; | |||
| flex: 1 1; | |||
| gap: calc(100vmin / 1920 * 8); | |||
| } | |||
| .row { | |||
| display: flex; | |||
| align-items: center; | |||
| width: 100%; | |||
| } | |||
| .row > .name, | |||
| .row > .amount { | |||
| white-space: nowrap; | |||
| width: 12%; | |||
| } | |||
| .row > .amount { | |||
| text-align: right; | |||
| } | |||
| .diy-process-bar { | |||
| margin: 0 8px; | |||
| border-radius: 7px; | |||
| height: 8px; | |||
| flex: 1 1; | |||
| background-color: #fff3; | |||
| overflow: hidden; | |||
| position: relative; | |||
| } | |||
| .diy-process-bar::after { | |||
| content: ''; | |||
| position: absolute; | |||
| border-radius: 7px; | |||
| width: 30%; | |||
| height: 100%; | |||
| } | |||
| .diy-process-bar.color-1::after { | |||
| background: linear-gradient(to right, #178be9, #67b3f2); | |||
| } | |||
| .diy-process-bar.color-2::after { | |||
| background: linear-gradient(to right, #2ec6b4, #85f6e9); | |||
| } | |||
| .diy-process-bar.color-3::after { | |||
| background: linear-gradient(to right, #ff8bc3, #eb46a1); | |||
| } | |||
| </style> | |||
+ 19
- 9
src/views/3DOverview/components/RightContentAlert.vue
View File
| @@ -1,17 +1,17 @@ | |||
| <template> | |||
| <div class="right-content-alert"> | |||
| <div class="el-table-wrapper"> | |||
| <div class="el-table-wrapper fix-table"> | |||
| <el-table | |||
| key="RightContentAlertTable" | |||
| border | |||
| :data="tableData" | |||
| :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" | |||
| > | |||
| <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" /> | |||
| <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" /> | |||
| <el-table-column label="故障等级" prop="level" :resizable="true" /> | |||
| <el-table-column label="故障内容" prop="content" :resizable="true" /> | |||
| <el-table-column label="累计时间(min)" prop="duration" :resizable="true" /> | |||
| <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" /> | |||
| <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" /> | |||
| <el-table-column label="故障等级" prop="level" :resizable="true" align="center" /> | |||
| <el-table-column label="故障内容" prop="content" :resizable="true" align="center" /> | |||
| <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" /> | |||
| </el-table> | |||
| </div> | |||
| </div> | |||
| @@ -42,18 +42,26 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| .left-content-equipment-check { | |||
| .fix-table >>> .el-table td .cell { | |||
| width: 80% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .right-content-alert { | |||
| height: calc(100% - 32px); | |||
| display: flex; | |||
| gap: calc(100vw / 1920 * 16); | |||
| overflow: hidden; | |||
| } | |||
| .el-table-wrapper { | |||
| flex: 1; | |||
| } | |||
| .left-content-equipment-check > div { | |||
| .right-content-alert > div { | |||
| overflow: hidden; | |||
| overflow-x: scroll; | |||
| /* overflow-x: scroll; */ | |||
| } | |||
| .el-table-wrapper >>> * { | |||
| @@ -70,6 +78,8 @@ export default { | |||
| background-color: transparent; | |||
| color: #fff9; | |||
| border: 0; | |||
| height: 100%; | |||
| overflow-y: auto; | |||
| } | |||
| .el-table-wrapper >>> .el-table th.is-leaf, | |||
+ 232
- 37
src/views/3DOverview/components/RightContentFaultAnalysis.vue
View File
| @@ -14,74 +14,269 @@ export default { | |||
| props: { | |||
| id: { | |||
| type: String, | |||
| default: 'default-id' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| default: 'default-title' | |||
| }, | |||
| xData: { | |||
| type: Array, | |||
| default: () => [] | |||
| }, | |||
| seriesData: { | |||
| type: Array, | |||
| default: () => [] | |||
| default: 'default-fault-analysis-id' | |||
| } | |||
| }, | |||
| data() { | |||
| let totalRate = 0 | |||
| const colors = [ | |||
| { | |||
| type: 'linear', | |||
| x: 0, | |||
| y: 0, | |||
| x2: 1, | |||
| y2: 1, | |||
| colorStops: [ | |||
| { color: '#FFFFFF00', offset: 0 }, | |||
| { color: '#FB418C00', offset: 0.1 }, | |||
| { color: '#FB418C', offset: 1 } // 红 | |||
| ], | |||
| global: false | |||
| }, | |||
| { | |||
| type: 'linear', | |||
| x: 0, | |||
| y: 0, | |||
| x2: 1, | |||
| y2: 1, | |||
| colorStops: [ | |||
| { color: '#FFFFFF00', offset: 0 }, | |||
| { color: '#DDB11200', offset: 0.1 }, | |||
| { color: '#DDB112', offset: 1 } // 黄 | |||
| ], | |||
| global: false | |||
| }, | |||
| { | |||
| type: 'linear', | |||
| x: 1, | |||
| y: 1, | |||
| x2: 0, | |||
| y2: 0, | |||
| colorStops: [ | |||
| { color: '#FFFFFF00', offset: 0 }, | |||
| { color: '#1A99FF00', offset: 0.1 }, | |||
| { color: '#1A99FF', offset: 1 } // 兰 | |||
| ], | |||
| global: false | |||
| }, | |||
| { | |||
| type: 'linear', | |||
| x: 1, | |||
| y: 1, | |||
| x2: 0, | |||
| y2: 0, | |||
| colorStops: [ | |||
| { color: '#FFFFFF00', offset: 0 }, | |||
| { color: '#A691FF00', offset: 0.1 }, | |||
| { color: '#A691FF', offset: 1 } // 紫 3 | |||
| ], | |||
| global: false | |||
| }, | |||
| { | |||
| type: 'linear', | |||
| x: 0, | |||
| y: 1, | |||
| x2: 0, | |||
| y2: 0, | |||
| colorStops: [ | |||
| { color: '#FFFFFF00', offset: 0 }, | |||
| { color: '#49FBD600', offset: 0.1 }, | |||
| { color: '#49FBD6', offset: 1 } // 绿 | |||
| ], | |||
| global: false | |||
| } | |||
| ] | |||
| return { | |||
| chart: null, | |||
| option: { | |||
| // default configs | |||
| configs: { | |||
| title: { | |||
| left: 'center', | |||
| top: '30%', | |||
| text: '总共', | |||
| textAlign: 'center', | |||
| left: '64%', | |||
| top: '35%', | |||
| text: '33039', | |||
| textStyle: { | |||
| color: '#888', | |||
| fontSize: 10 | |||
| color: '#fff', | |||
| fontSize: 14, | |||
| fontWeight: 'normal' | |||
| }, | |||
| subtext: 880, | |||
| subtext: '总数', | |||
| subtextStyle: { | |||
| color: '#fff', | |||
| fontSize: 24 | |||
| fontSize: 10, | |||
| fontWeight: 'lighter' | |||
| } | |||
| }, | |||
| legend: { | |||
| top: '5%', | |||
| bottom: '0%', | |||
| left: '-5%', | |||
| orient: 'vertical', | |||
| icon: 'none', | |||
| itemGap: 5, | |||
| itemWidth: 10, | |||
| formatter: function(name) { | |||
| // test data - dynamic | |||
| const testData = [ | |||
| { name: 'A', value: 100 }, | |||
| { name: 'B', value: 200 }, | |||
| { name: 'C', value: 300 }, | |||
| { name: 'D', value: 400 }, | |||
| { name: 'E', value: 500 } | |||
| ] | |||
| let pieLegendVale = {} | |||
| testData.filter((item, index) => { | |||
| if (item.name === name) { | |||
| pieLegendVale = item | |||
| } | |||
| }) | |||
| const color = ['c', 'd', 'e', 'f', 'g'] | |||
| const arr = [ | |||
| '{' + color[testData.findIndex(item => item.name === name)] + '|}', | |||
| '{b|' + pieLegendVale.name + '}', | |||
| '{a|' + pieLegendVale.value + '}' | |||
| ] | |||
| return arr.join(' ') | |||
| }, | |||
| textStyle: { | |||
| rich: { | |||
| a: { | |||
| // align: 'center', | |||
| fontSize: 10, | |||
| color: 'rgba(255, 255, 255, 0.7)', | |||
| lineHeight: 16 | |||
| }, | |||
| b: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| fontSize: 10, | |||
| color: 'rgba(255, 255, 255)' | |||
| }, | |||
| c: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| width: 10, | |||
| borderRadius: 5, | |||
| height: 10, | |||
| backgroundColor: '#FB418C' | |||
| // backgroundColor: '#1A99FF' | |||
| }, | |||
| d: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| width: 10, | |||
| borderRadius: 5, | |||
| height: 10, | |||
| backgroundColor: '#DDB112' | |||
| // backgroundColor: '#A691FF' | |||
| }, | |||
| e: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| width: 10, | |||
| borderRadius: 5, | |||
| height: 10, | |||
| backgroundColor: '#1A99FF' | |||
| // backgroundColor: '#FB418C' | |||
| }, | |||
| f: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| width: 10, | |||
| borderRadius: 5, | |||
| height: 10, | |||
| backgroundColor: '#A691FF' | |||
| // backgroundColor: '#49FBD6' | |||
| }, | |||
| g: { | |||
| // verticalAlign: 'top', | |||
| // align: 'center', | |||
| width: 10, | |||
| borderRadius: 5, | |||
| height: 10, | |||
| backgroundColor: '#49FBD6' | |||
| // backgroundColor: '#DDB112' | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| series: [ | |||
| { | |||
| name: 'Fault Analysis Chart', | |||
| name: 'PieForm', | |||
| type: 'pie', | |||
| center: ['65%', '50%'], | |||
| radius: ['50%', '70%'], | |||
| avoidLabelOverlap: false, | |||
| label: {}, | |||
| emphasis: { | |||
| label: { | |||
| show: true, | |||
| fontSize: '12' | |||
| avoidLabelOverlap: true, | |||
| label: { | |||
| formatter: params => { | |||
| const colorMap = ['first', 'second', 'third', 'fourth', 'fifth'] | |||
| return `{${colorMap[params.dataIndex]}|${params.percent} %}` | |||
| }, | |||
| rich: { | |||
| first: { color: '#FB418C', fontSize: 8 }, | |||
| second: { color: '#DDB112', fontSize: 8 }, | |||
| third: { color: '#1A99FF', fontSize: 8 }, | |||
| fourth: { color: '#A691FF', fontSize: 8 }, | |||
| fifth: { color: '#49FBD6', fontSize: 8 } | |||
| } | |||
| }, | |||
| data: Array(7) | |||
| .fill(0) | |||
| .map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index })) | |||
| itemStyle: { | |||
| color: params => { | |||
| /** 计算渐变方向的过程，只靠 dataIndex 不太行 */ | |||
| const { dataIndex, percent } = params | |||
| const colorGradient = colors[dataIndex] | |||
| if (totalRate + percent < 25) { | |||
| /** 也许这里需要完善，但目前工作良好 */ | |||
| (() => {})() | |||
| } else if (totalRate + percent < 50) { | |||
| colorGradient.x = 0 | |||
| colorGradient.y = 0 | |||
| colorGradient.x2 = 1 | |||
| colorGradient.y2 = 1 | |||
| } else if (totalRate + percent < 100) { | |||
| /** 也许这里需要完善，但目前工作良好 */ | |||
| (() => {})() | |||
| } | |||
| totalRate += percent | |||
| return colorGradient | |||
| } | |||
| }, | |||
| data: [ | |||
| { value: 100, name: 'A' }, | |||
| { value: 200, name: 'B' }, | |||
| { value: 300, name: 'C' }, | |||
| { value: 400, name: 'D' }, | |||
| { value: 500, name: 'E' } | |||
| ] | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| }, | |||
| mounted() { | |||
| window.addEventListener('resize', function() { | |||
| if (this.chart) { | |||
| this.chart.resize() | |||
| } | |||
| }) | |||
| this.$nextTick(() => { | |||
| console.log('here...') | |||
| // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' }) | |||
| if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart']) | |||
| this.chart.setOption(this.option) | |||
| this.chart.setOption(this.configs) | |||
| this.chart.resize() | |||
| }) | |||
| }, | |||
| beforeDestroy() { | |||
| if (this.chart) this.chart.dispose() | |||
| this.chart = null | |||
| }, | |||
| methods: {} | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .right-content-quality-analysis { | |||
| height: calc(100% - 32px); | |||
+ 18
- 3
src/views/3DOverview/components/RightContentProductRate.vue
View File
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div style="height: 10vh; width: 100%; "> | |||
| <div style="height: calc(100% - 36px); width: 100%;"> | |||
| <div :id="id" ref="techy-line-chart" class="techy-chart" /> | |||
| </div> | |||
| </template> | |||
| @@ -35,12 +35,21 @@ export default { | |||
| option: { | |||
| color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'], | |||
| grid: { | |||
| top: '5%', | |||
| top: '20%', | |||
| left: 0, | |||
| right: '5%', | |||
| right: 12, | |||
| bottom: 0, | |||
| containLabel: true | |||
| }, | |||
| legend: { | |||
| width: '72%', | |||
| right: 12, | |||
| itemWidth: 12, | |||
| itemHeight: 8, | |||
| textStyle: { | |||
| color: '#fffc' | |||
| } | |||
| }, | |||
| xAxis: { | |||
| type: 'category', | |||
| boundaryGap: false, | |||
| @@ -63,6 +72,12 @@ export default { | |||
| }, | |||
| yAxis: { | |||
| type: 'value', | |||
| name: '成品率', | |||
| nameTextStyle: { | |||
| color: '#fffc', | |||
| align: 'right', | |||
| fontSize: 8 | |||
| }, | |||
| axisLine: { | |||
| show: false | |||
| }, | |||
+ 19
- 8
src/views/3DOverview/components/RightContentQualityAnalysis.vue
View File
| @@ -1,28 +1,39 @@ | |||
| <template> | |||
| <div class="right-content-quality-analysis"> | |||
| <div v-for="item in datalist" :key="item.name" class="analysis-item"> | |||
| <techy-analysis-bar | |||
| v-for="(item, index) in datalist" | |||
| :key="index" | |||
| :name="item.name" | |||
| :amount="item.value" | |||
| color="green" | |||
| /> | |||
| <!-- <div v-for="item in datalist" :key="item.name" class="analysis-item"> | |||
| <span class="absolute" :style="{ backgroundColor: item.color }" /> | |||
| <span>{{ item.name }}</span> | |||
| <span>{{ item.value }}</span> | |||
| </div> | |||
| </div> --> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import TechyAnalysisBar from './TechyAnalysisBar.vue' | |||
| export default { | |||
| name: 'RightContentQualityAnalysis', | |||
| components: { TechyAnalysisBar }, | |||
| props: {}, | |||
| data() { | |||
| return { | |||
| datalist: [ | |||
| { name: '热端', value: 20, color: '#0b88ff' }, | |||
| { name: '原片', value: 30, color: '#0bffa6' }, | |||
| { name: '热端', value: 2332039120, color: '#0b88ff' }, | |||
| { name: '原片上片', value: 30, color: '#0bffa6' }, | |||
| { name: '上片', value: 27, color: '#e3ff0b' }, | |||
| { name: '磨边', value: 23, color: '#950bff' }, | |||
| { name: '原片', value: 30, color: '#0bffa6' }, | |||
| { name: '原片磨边', value: 30, color: '#0bffa6' }, | |||
| { name: '原片', value: 30, color: '#0bffa6' }, | |||
| { name: '上片', value: 27, color: '#e3ff0b' }, | |||
| { name: '磨边', value: 23, color: '#950bff' }, | |||
| { name: '磨边镀膜膜', value: 23, color: '#950bff' }, | |||
| { name: '镀膜', value: 10, color: '#ff0bc2' }, | |||
| { name: '清晰', value: 66, color: '#ff7d0b' } | |||
| ] | |||
| @@ -38,11 +49,11 @@ export default { | |||
| .right-content-quality-analysis { | |||
| height: calc(100% - 32px); | |||
| overflow: hidden; | |||
| overflow-y: scroll; /** 右边会有多的padding给滑道 */ | |||
| overflow-y: auto; /** 右边会有多的padding给滑道 */ | |||
| display: grid; | |||
| grid-template-columns: 1fr 1fr; | |||
| grid-auto-rows: min-content; | |||
| gap: calc(100vw / 1920 * 8); | |||
| gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20); | |||
| justify-content: end; | |||
| } | |||
+ 26
- 5
src/views/3DOverview/components/RightContentRealtimeProduction.vue
View File
| @@ -1,20 +1,42 @@ | |||
| <template> | |||
| <div style="height: 12vh; width: 100%; "> | |||
| <div :id="id" ref="techy-line-chart" class="techy-chart" /> | |||
| </div> | |||
| <techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)"> | |||
| <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> --> | |||
| <new-bar | |||
| chart-name="realtime-cost-production" | |||
| :name-list="['A', 'B', 'C', 'D', 'E', 'F']" | |||
| :data-list="[ | |||
| { | |||
| topColor: 'rgba(59, 76, 118, 0.2)', | |||
| bottomColor: '#49FBD6', | |||
| name: '产量', | |||
| data: [64, 91, 55, 65, 37, 77] | |||
| }, | |||
| { | |||
| topColor: 'rgba(59, 76, 118, 0.2)', | |||
| bottomColor: '#31A2FF', | |||
| name: '能耗', | |||
| data: [32, 65, 65, 54, 37, 77] | |||
| } | |||
| ]" | |||
| /> | |||
| </techy-box> | |||
| </template> | |||
| <script> | |||
| import echarts from 'echarts' | |||
| import TechyBox from './TechyBox.vue' | |||
| import newBar from './newBar.vue' | |||
| import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
| export default { | |||
| name: 'RealtimeProductionHorizontalBarChart', | |||
| components: { TechyBox, newBar }, | |||
| mixins: [resize], | |||
| props: { | |||
| id: { | |||
| type: String, | |||
| default: 'default-id' | |||
| default: 'default-linechart-id' | |||
| }, | |||
| title: { | |||
| type: String, | |||
| @@ -103,7 +125,6 @@ export default { | |||
| }, | |||
| mounted() { | |||
| this.$nextTick(() => { | |||
| console.log('here...') | |||
| if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) | |||
| this.chart.setOption(this.option) | |||
| }) | |||
+ 198
- 0
src/views/3DOverview/components/TechyAnalysisBar.vue
View File
| @@ -0,0 +1,198 @@ | |||
| <template> | |||
| <div class="quality-analysis-bar" :class="`border-${color}`"> | |||
| <div class="placeholder-block-wrapper"> | |||
| <div class="justify-end"> | |||
| <div class="placeholder-block" :class="`block-${color}-1`" /> | |||
| <div class="placeholder-block" :class="`block-${color}-2`" /> | |||
| <div class="placeholder-block" :class="`block-${color}-3`" /> | |||
| <div class="placeholder-block" :class="`block-${color}-4`" /> | |||
| <div class="placeholder-block" :class="`block-${color}-5`" /> | |||
| </div> | |||
| </div> | |||
| <span class="quality-analysis-bar__name"> | |||
| {{ name }} | |||
| </span> | |||
| <span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'TechyAnalysisBar', | |||
| filters: { | |||
| amountFilter: val => { | |||
| const sVal = val.toString() | |||
| return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal | |||
| } | |||
| }, | |||
| props: { | |||
| name: { | |||
| type: String, | |||
| default: 'null' | |||
| }, | |||
| amount: { | |||
| type: Number, | |||
| default: 0 | |||
| }, | |||
| color: { | |||
| type: String, | |||
| default: 'green' | |||
| } | |||
| }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| methods: {} | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .flex { | |||
| display: flex; | |||
| } | |||
| .justify-end { | |||
| justify-content: flex-end; | |||
| } | |||
| .quality-analysis-bar { | |||
| border-radius: 2px; | |||
| padding: 2px; | |||
| display: flex; | |||
| } | |||
| .border-green { | |||
| border: 1px solid #35abad; | |||
| } | |||
| .border-blue { | |||
| border: 1px solid #49b2ff; | |||
| } | |||
| .border-orange { | |||
| border: 1px solid #ffb94d; | |||
| } | |||
| .border-pink { | |||
| border: 1px solid #ed879f; | |||
| } | |||
| .placeholder-block-wrapper { | |||
| flex-grow: 1; | |||
| overflow: hidden; | |||
| min-width: 32px; | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .placeholder-block-wrapper > div { | |||
| width: 200px; | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| display: flex; | |||
| } | |||
| .placeholder-block { | |||
| width: 20px; | |||
| height: 20px; | |||
| margin-left: 3px; | |||
| /* border-radius: 1px; */ | |||
| } | |||
| .block-green-5 { | |||
| background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65)); | |||
| /* margin-left: 4px; */ | |||
| } | |||
| .block-green-4 { | |||
| background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4)); | |||
| } | |||
| .block-green-3 { | |||
| background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2)); | |||
| } | |||
| .block-green-2 { | |||
| background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); | |||
| } | |||
| .block-green-1 { | |||
| /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */ | |||
| background: transparent; | |||
| } | |||
| /* ================ blue ================ */ | |||
| .block-blue-5 { | |||
| background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65)); | |||
| /* margin-left: 4px; */ | |||
| } | |||
| .block-blue-4 { | |||
| background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4)); | |||
| } | |||
| .block-blue-3 { | |||
| background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2)); | |||
| } | |||
| .block-blue-2 { | |||
| background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); | |||
| } | |||
| .block-blue-1 { | |||
| /* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */ | |||
| background: transparent; | |||
| } | |||
| /* ================ orange ================ */ | |||
| .block-orange-5 { | |||
| background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65)); | |||
| /* margin-left: 4px; */ | |||
| } | |||
| .block-orange-4 { | |||
| background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4)); | |||
| } | |||
| .block-orange-3 { | |||
| background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2)); | |||
| } | |||
| .block-orange-2 { | |||
| background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); | |||
| } | |||
| .block-orange-1 { | |||
| /* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */ | |||
| background: transparent; | |||
| } | |||
| /* ================ pink ================ */ | |||
| .block-pink-5 { | |||
| background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65)); | |||
| /* margin-left: 4px; */ | |||
| } | |||
| .block-pink-4 { | |||
| background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4)); | |||
| } | |||
| .block-pink-3 { | |||
| background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2)); | |||
| } | |||
| .block-pink-2 { | |||
| background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0)); | |||
| } | |||
| .block-pink-1 { | |||
| /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */ | |||
| background: transparent; | |||
| } | |||
| .quality-analysis-bar__name { | |||
| text-align: center; | |||
| white-space: nowrap; | |||
| overflow-wrap: break-word; | |||
| overflow: hidden; | |||
| color: white; | |||
| display: inline-block; | |||
| padding: 3px 8px; | |||
| font-size: 14px; | |||
| line-height: 12px; | |||
| } | |||
| .quality-analysis-bar__amount { | |||
| color: rgba(255, 255, 255, 0.725); | |||
| display: inline-block; | |||
| /* min-width: 35%; */ | |||
| width: 50%; | |||
| text-align: left; | |||
| padding: 3px 0; | |||
| font-size: 14px; | |||
| line-height: 12px; | |||
| } | |||
| </style> | |||
+ 12
- 1
src/views/3DOverview/components/TechyHeader.vue
View File
| @@ -77,6 +77,16 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| @font-face { | |||
| font-family: 'zcoolqingkehuangyouti'; | |||
| src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'), | |||
| url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'), | |||
| url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype'); | |||
| font-weight: normal; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| .techy-header { | |||
| background: transparent; | |||
| display: flex; | |||
| @@ -114,6 +124,7 @@ export default { | |||
| .date, | |||
| .time { | |||
| font-family: zcoolqingkehuangyouti, sans-serif; | |||
| font-size: calc(100vmin / 1920 * 42); | |||
| line-height: 1.5; | |||
| /* font-size: 28px; | |||
| @@ -121,7 +132,7 @@ export default { | |||
| color: #49e1de; | |||
| letter-spacing: 0.8px; | |||
| position: absolute; | |||
| bottom: calc(100vmin / 1920 * 14 ); | |||
| bottom: calc(100vmin / 1920 * 14); | |||
| } | |||
| .date { | |||
BIN
src/views/3DOverview/components/assets/consume/d.png
View File
| Before | After |
|---|---|
|
|
| Width: 64 | Height: 64 | Size: 2.6 KiB |
BIN
src/views/3DOverview/components/assets/consume/fad.png
View File
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 64 | Size: 1.3 KiB |
BIN
src/views/3DOverview/components/assets/consume/gas.png
View File
| Before | After |
|---|---|
|
|
| Width: 64 | Height: 64 | Size: 2.1 KiB |
BIN
src/views/3DOverview/components/assets/consume/s.png
View File
| Before | After |
|---|---|
|
|
| Width: 64 | Height: 64 | Size: 3.0 KiB |
BIN
src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.ttf
View File
BIN
src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff
View File
BIN
src/views/3DOverview/components/assets/fonts/zcoolqingkehuangyouti-Regular.woff2
View File
+ 0
- 90
src/views/3DOverview/components/header-bg.svg
View File
| @@ -1,90 +0,0 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
| <title>编组 12备份 6</title> | |||
| <defs> | |||
| <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2"> | |||
| <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop> | |||
| <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4"> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7"> | |||
| <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| </defs> | |||
| <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
| <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)"> | |||
| <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)"> | |||
| <g id="编组-8" transform="translate(540.000000, 23.000000)"></g> | |||
| <g id="编组-4" transform="translate(0.000000, 1.000000)"> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline> | |||
| <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline> | |||
| <g id="编组-3" transform="translate(43.807292, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| </g> | |||
| <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path> | |||
| </g> | |||
| </g> | |||
| </g> | |||
| </svg> | |||
+ 363
- 0
src/views/3DOverview/components/newBar.vue
View File
| @@ -0,0 +1,363 @@ | |||
| <template> | |||
| <div | |||
| ref="chartContainer" | |||
| class="chartContainer" | |||
| :class="bindClass" | |||
| style="position: relative; width: 100%; height:100%" | |||
| /> | |||
| </template> | |||
| <script> | |||
| import echarts from 'echarts' // echarts theme | |||
| import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
| export default { | |||
| name: 'OverviewBar', | |||
| mixins: [resize], | |||
| props: { | |||
| chartName: { | |||
| type: String, | |||
| default: '' | |||
| }, | |||
| xlabelFontSize: { | |||
| type: Number, | |||
| default: 12 | |||
| }, | |||
| xlabelRotate: { | |||
| type: Number, | |||
| default: 0 | |||
| }, | |||
| nameList: { | |||
| type: Array, | |||
| default: () => [] | |||
| }, | |||
| dataList: { | |||
| type: Array, | |||
| default: () => [] | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| chart: null, | |||
| series: [] | |||
| } | |||
| }, | |||
| computed: { | |||
| bindClass() { | |||
| return { | |||
| 'fault-category-chart': this.chartName === 'fault-category', | |||
| 'process-fault-chart': this.chartName === 'process-fault', | |||
| 'realtime-production-cost-chart': this.chartName === 'realtime-cost-production' | |||
| } | |||
| } | |||
| }, | |||
| mounted() { | |||
| if (this.dataList.length > 1) { | |||
| this.series = [ | |||
| { | |||
| // 柱体 | |||
| name: this.dataList[0].name, | |||
| type: 'bar', | |||
| barWidth: 20, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: this.dataList[0].topColor }, | |||
| { offset: 1, color: this.dataList[0].bottomColor } | |||
| ]) | |||
| }, | |||
| data: this.dataList[0].data | |||
| }, | |||
| { | |||
| // 柱顶 | |||
| name: this.dataList[0].name, | |||
| type: 'pictorialBar', | |||
| barWidth: 20, | |||
| symbol: 'circle', | |||
| symbolPosition: 'end', | |||
| symbolOffset: ['-70%', '-50%'], | |||
| symbolSize: [20, 6], | |||
| zlevel: 2, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: 'rgba(59, 76, 118, 0)' }, | |||
| { offset: 1, color: '#2c6e7d' } | |||
| ]) | |||
| }, | |||
| data: this.dataList[0].data, | |||
| label: { | |||
| color: | |||
| this.chartName === 'process-fault' | |||
| ? 'rgba(119, 255, 242, 1)' | |||
| : this.chartName === 'fault-category' | |||
| ? '#31a2ff' | |||
| : '#fff9', | |||
| show: true, | |||
| offset: [-12, 10], | |||
| position: 'top', | |||
| vertialAlign: 'bottom' | |||
| } | |||
| }, | |||
| { | |||
| // 柱底 | |||
| name: this.dataList[0].name, | |||
| type: 'pictorialBar', | |||
| barWidth: 20, | |||
| symbol: 'circle', | |||
| symbolOffset: ['-62%', '50%'], | |||
| symbolSize: [20, 6], | |||
| itemStyle: { color: this.dataList[0].bottomColor }, | |||
| data: this.dataList[0].data | |||
| }, | |||
| { | |||
| // 柱体 | |||
| name: this.dataList[1].name, | |||
| type: 'bar', | |||
| barWidth: 20, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: this.dataList[1].topColor }, | |||
| { offset: 1, color: this.dataList[1].bottomColor } | |||
| ]) | |||
| }, | |||
| data: this.dataList[1].data | |||
| }, | |||
| { | |||
| // 柱顶 | |||
| name: this.dataList[1].name, | |||
| type: 'pictorialBar', | |||
| barWidth: 20, | |||
| symbol: 'circle', | |||
| symbolPosition: 'end', | |||
| symbolOffset: ['66%', '-50%'], | |||
| symbolSize: [20, 6], | |||
| zlevel: 2, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: this.dataList[1].topColor }, | |||
| { offset: 1, color: this.dataList[1].bottomColor } | |||
| ]) | |||
| }, | |||
| data: this.dataList[1].data, | |||
| label: { | |||
| color: | |||
| this.chartName === 'process-fault' | |||
| ? 'rgba(119, 255, 242, 1)' | |||
| : this.chartName === 'fault-category' | |||
| ? '#31a2ff' | |||
| : '#fff9', | |||
| show: true, | |||
| offset: [12, 10], | |||
| position: 'top', | |||
| vertialAlign: 'bottom' | |||
| } | |||
| }, | |||
| { | |||
| // 柱底 | |||
| name: this.dataList[1].name, | |||
| type: 'pictorialBar', | |||
| barWidth: 20, | |||
| symbol: 'circle', | |||
| symbolOffset: ['66%', '50%'], | |||
| symbolSize: [20, 6], | |||
| itemStyle: { color: this.dataList[1].bottomColor }, | |||
| data: this.dataList[1].data | |||
| } | |||
| ] | |||
| } else { | |||
| const barWidth = 400 / 2 / this.dataList[0].data.length | |||
| this.series = [ | |||
| { | |||
| // 柱体 | |||
| name: this.dataList[0].name, | |||
| type: 'bar', | |||
| // barWidth: 26, | |||
| barWidth: barWidth, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: this.dataList[0].topColor }, | |||
| { offset: 1, color: this.dataList[0].bottomColor } | |||
| ]) | |||
| // borderWidth: 1, | |||
| // borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度 | |||
| }, | |||
| data: this.dataList[0].data | |||
| // backgroundStyle: { | |||
| // // borderColor: this.dataList[0].bottomColor, | |||
| // borderColor: '#ff0000', | |||
| // borderWidth: 1 | |||
| // } | |||
| }, | |||
| { | |||
| // 柱顶 | |||
| name: this.dataList[0].name, | |||
| type: 'pictorialBar', | |||
| // barWidth: 26, | |||
| barWidth: barWidth, | |||
| symbol: 'circle', | |||
| symbolPosition: 'end', | |||
| symbolOffset: [0, '-50%'], | |||
| symbolSize: [barWidth, 6], | |||
| zlevel: 2, | |||
| itemStyle: { | |||
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: 'rgba(59, 76, 118, 0)' }, | |||
| { offset: 1, color: '#2c6e7d' } | |||
| ]) | |||
| }, | |||
| label: { | |||
| color: | |||
| this.chartName === 'process-fault' | |||
| ? 'rgba(119, 255, 242, 1)' | |||
| : this.chartName === 'fault-category' | |||
| ? '#31a2ff' | |||
| : '#fff9', | |||
| show: true, | |||
| offset: [0, 10], | |||
| position: 'top', | |||
| vertialAlign: 'bottom' | |||
| }, | |||
| data: this.dataList[0].data | |||
| }, | |||
| { | |||
| // 柱底 | |||
| name: this.dataList[0].name, | |||
| type: 'pictorialBar', | |||
| // barWidth: 26, | |||
| barWidth: barWidth, | |||
| symbol: 'circle', | |||
| symbolOffset: [0, '50%'], | |||
| symbolSize: [barWidth, 6], | |||
| itemStyle: { color: '#2c6e7d' }, | |||
| data: this.dataList[0].data | |||
| } | |||
| ] | |||
| } | |||
| this.$nextTick(() => { | |||
| console.log('on Mounted(): ') | |||
| this.initChart() | |||
| }) | |||
| }, | |||
| beforeDestroy() { | |||
| if (!this.chart) { | |||
| return | |||
| } | |||
| this.chart.dispose() | |||
| this.chart = null | |||
| }, | |||
| methods: { | |||
| initChart() { | |||
| this.chart = echarts.init(this.$refs.chartContainer) | |||
| this.chart.setOption({ | |||
| grid: { | |||
| top: '16%', | |||
| left: '2%', | |||
| right: '2%', | |||
| bottom: '3%', | |||
| containLabel: true | |||
| }, | |||
| legend: { | |||
| itemWidth: 8, | |||
| itemHeight: 8, | |||
| right: '2%', | |||
| textStyle: { | |||
| color: '#fff9' | |||
| } | |||
| }, | |||
| xAxis: { | |||
| type: 'category', | |||
| axisLine: { | |||
| show: false | |||
| }, | |||
| axisTick: { | |||
| show: false | |||
| }, | |||
| axisLabel: { | |||
| textStyle: { | |||
| fontSize: this.xlabelFontSize, | |||
| color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
| }, | |||
| rotate: this.xlabelRotate | |||
| }, | |||
| data: this.nameList | |||
| }, | |||
| yAxis: { | |||
| axisLine: { | |||
| lineStyle: { | |||
| type: 'solid', | |||
| color: this.dataList[1].bottomColor, | |||
| // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 | |||
| width: '1' // 坐标线的宽度 | |||
| } | |||
| }, | |||
| 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' | |||
| }, | |||
| series: this.series | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .chartContainer >>> div { | |||
| width: 100% !important; | |||
| height: 100% !important; | |||
| /* position: relative !important; */ | |||
| } | |||
| .fault-category-chart >>> div::before { | |||
| /* .fault-category-chart::before { */ | |||
| content: ''; | |||
| position: absolute; | |||
| /* bottom: calc(100vh/1920 * 80); | |||
| left: calc(100vw/1920 * 48); */ | |||
| /* bottom: calc(10% + 100vh/1920 * 28); */ | |||
| bottom: 25px; | |||
| left: 9%; | |||
| height: 52px; | |||
| width: 90%; | |||
| background: linear-gradient(to top, #31a2ff6d, transparent); | |||
| transform: skew(-45deg); | |||
| z-index: 0; | |||
| } | |||
| .process-fault-chart >>> div::before { | |||
| /* .process-fault-chart::before { */ | |||
| content: ''; | |||
| position: absolute; | |||
| bottom: 26px; | |||
| left: 10%; | |||
| height: 48px; | |||
| width: 90%; | |||
| background: linear-gradient(to top, #49fbd789, transparent); | |||
| transform: skew(-45deg); | |||
| z-index: 0; | |||
| } | |||
| .realtime-production-cost-chart >>> div::before { | |||
| /* .fault-category-chart::before { */ | |||
| content: ''; | |||
| position: absolute; | |||
| /* bottom: calc(100vh/1920 * 80); | |||
| left: calc(100vw/1920 * 48); */ | |||
| /* bottom: calc(10% + 100vh/1920 * 28); */ | |||
| bottom: 8px; | |||
| left: 9%; | |||
| height: 30px; | |||
| width: 90%; | |||
| background: linear-gradient(to top, #31a2ff6d, transparent); | |||
| transform: skew(-45deg); | |||
| z-index: 0; | |||
| } | |||
| </style> | |||
+ 52
- 27
src/views/3DOverview/index.vue
View File
| @@ -1,9 +1,9 @@ | |||
| <template> | |||
| <div id="v3d-outter" ref="v3d-outter"> | |||
| <!-- <V3DApp @3d-loaded="handle3DLoaded" /> --> | |||
| <V3DApp @3d-loaded="handle3DLoaded" /> | |||
| <!-- 正式内容: --> | |||
| <!-- <div v-if="showPage" id="v3d-main-content"> --> | |||
| <div v-if="true" id="v3d-main-content"> | |||
| <div v-if="showPage" id="v3d-main-content"> | |||
| <!-- <div v-if="true" id="v3d-main-content"> --> | |||
| <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" /> | |||
| <section id="techy-body-part"> | |||
| @@ -19,7 +19,7 @@ | |||
| <div class="techy-body-part__middle"> | |||
| <TechyBox> | |||
| <div class="flex"> | |||
| <div class="techy-body-part__middle__inner"> | |||
| <p> | |||
| <b>产线名称 :</b> | |||
| <span>A产线</span> | |||
| @@ -29,7 +29,7 @@ | |||
| <span>清洗机</span> | |||
| </p> | |||
| <p> | |||
| <b>累计加工数量 :</b> | |||
| <b>累计加工 :</b> | |||
| <span>20</span> | |||
| </p> | |||
| <p> | |||
| @@ -41,15 +41,15 @@ | |||
| </div> | |||
| <div class="techy-body-part__right"> | |||
| <techy-container title="实时产量和能耗" style="flex: 0"> | |||
| <techy-container title="实时产量和能耗" style="height: 22vh"> | |||
| <RightContentRealtimeProduction /> | |||
| </techy-container> | |||
| <div class="techy-body-part__right-col-2"> | |||
| <techy-container title="工序质量分析"> | |||
| <RightContentQualityAnalysis /> | |||
| </techy-container> | |||
| </div> | |||
| <techy-container title="产线成品率" style="flex: 0;"> | |||
| <techy-container title="工序质量分析" style="flex: 0"> | |||
| <RightContentQualityAnalysis /> | |||
| </techy-container> | |||
| <techy-container title="产线成品率" style="flex: 1"> | |||
| <RightContentProductRate /> | |||
| </techy-container> | |||
| </div> | |||
| @@ -57,23 +57,23 @@ | |||
| <!-- 底部 --> | |||
| <div class="bottom-part"> | |||
| <div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;"> | |||
| <techy-container title="设备巡检提示" style="flex: 0;"> | |||
| <div style="width: 25%; min-width: 480px; height: 100%;"> | |||
| <techy-container title="设备巡检提示" style="flex: 0; align-self: stretch;"> | |||
| <LeftContentEquipmentCheck /> | |||
| </techy-container> | |||
| </div> | |||
| <div style="flex: 1;"> | |||
| <div> | |||
| <techy-container title="现场实时监控"> | |||
| <LeftContentMonitor /> | |||
| </techy-container> | |||
| </div> | |||
| <div> | |||
| <div style="flex: 1;"> | |||
| <techy-container title="缺陷分类分析"> | |||
| <RightContentFaultAnalysis /> | |||
| </techy-container> | |||
| </div> | |||
| <div style="width: 25%; min-width: 480px;"> | |||
| <techy-container title="设备报警提示" style="flex: 0;"> | |||
| <techy-container title="设备报警提示"> | |||
| <RightContentAlert /> | |||
| </techy-container> | |||
| </div> | |||
| @@ -162,6 +162,28 @@ export default { | |||
| position: relative; | |||
| } | |||
| #v3d-outter *::-webkit-scrollbar { | |||
| width: 8px; | |||
| } | |||
| #v3d-outter *::-webkit-scrollbar-track { | |||
| background-color: #14243f; | |||
| /* background-color: white; */ | |||
| border-radius: 0; | |||
| } | |||
| #v3d-outter *::-webkit-scrollbar-button { | |||
| width: 8px; | |||
| height: 8px; | |||
| background: #5bc4bf9f; | |||
| position: relative; | |||
| } | |||
| #v3d-outter *::-webkit-scrollbar-thumb { | |||
| border-radius: 8px; | |||
| background: #5bc4bf9f; | |||
| } | |||
| #v3d-main-content { | |||
| width: 100%; | |||
| height: 100%; | |||
| @@ -189,6 +211,7 @@ export default { | |||
| } | |||
| .bottom-part { | |||
| height: 22vh; | |||
| padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36); | |||
| display: flex; | |||
| /* gap: 16px; */ | |||
| @@ -221,19 +244,21 @@ export default { | |||
| .techy-body-part__middle { | |||
| position: absolute; | |||
| top: 12%; | |||
| left: 36%; | |||
| height: 96px; | |||
| width: 128px; | |||
| top: 9%; | |||
| left: 26%; | |||
| height: 136px; | |||
| width: 176px; | |||
| } | |||
| .flex { | |||
| .techy-body-part__middle__inner { | |||
| height: 100%; | |||
| padding: 12px; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| } | |||
| .flex p { | |||
| .techy-body-part__middle__inner p { | |||
| margin: 0; | |||
| padding: 0; | |||
| font-size: 12px; | |||
| @@ -241,15 +266,15 @@ export default { | |||
| color: #fff; | |||
| } | |||
| .flex p > span { | |||
| .techy-body-part__middle__inner p > span { | |||
| position: relative; | |||
| padding-left: 6px; | |||
| padding-left: 16px; | |||
| } | |||
| .round-dot::before { | |||
| content: ''; | |||
| position: absolute; | |||
| top: 5px; | |||
| left: -3px; | |||
| top: 4px; | |||
| left: 2px; | |||
| width: 8px; | |||
| height: 8px; | |||
| background-color: rgb(82, 231, 82); | |||
+ 13
- 2
src/views/EquipmentManager/HomePage.vue
View File
| @@ -8,7 +8,7 @@ | |||
| <div class="equipment-exception"> | |||
| <!-- 设备报修/异常上报 --> | |||
| <techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG"> | |||
| <div class="table-wrapper"> | |||
| <div class="table-wrapper fix-table-exception-report"> | |||
| <techy-table | |||
| :page="1" | |||
| :limit="7" | |||
| @@ -22,7 +22,7 @@ | |||
| <div class="equipment-alarm"> | |||
| <!-- 设备异常报警 --> | |||
| <techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG"> | |||
| <div class="table-wrapper"> | |||
| <div class="table-wrapper fix-table-eq-exception"> | |||
| <techy-table | |||
| :page="1" | |||
| :limit="7" | |||
| @@ -325,6 +325,17 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| .fix-table-eq-exception >>> .el-table td .cell { | |||
| width: 80% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .fix-table-exception-report >>> .el-table td .cell { | |||
| width: 70% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .visual-container { | |||
| width: 100%; | |||
| min-width: 1280px; | |||
+ 0
- 90
src/views/EquipmentManager/components/header-bg.svg
View File
| @@ -1,90 +0,0 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
| <title>编组 12备份 6</title> | |||
| <defs> | |||
| <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2"> | |||
| <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop> | |||
| <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4"> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7"> | |||
| <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| </defs> | |||
| <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
| <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)"> | |||
| <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)"> | |||
| <g id="编组-8" transform="translate(540.000000, 23.000000)"></g> | |||
| <g id="编组-4" transform="translate(0.000000, 1.000000)"> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline> | |||
| <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline> | |||
| <g id="编组-3" transform="translate(43.807292, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| </g> | |||
| <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path> | |||
| </g> | |||
| </g> | |||
| </g> | |||
| </svg> | |||
+ 25
- 25
src/views/EquipmentManager/mockData.js
View File
| @@ -27,18 +27,18 @@ const PriorityComponent = { | |||
| } | |||
| }, | |||
| methods: {}, | |||
| render: function(h) { | |||
| return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText) | |||
| render: function (h) { | |||
| return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText) | |||
| } | |||
| } | |||
| export const equipmentExceptionProps = [ | |||
| { label: '设备名称', prop: 'eqName' }, | |||
| { label: '所属产线', prop: 'pl' }, | |||
| { label: '报修/异常内容', prop: 'content' }, | |||
| { label: '报修/发现人', prop: 'creator' }, | |||
| { label: '时间', prop: 'time' }, | |||
| { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent } | |||
| { label: '设备名称', prop: 'eqName', align: 'center' }, | |||
| { label: '所属产线', prop: 'pl', align: 'center', width: 80 }, | |||
| { label: '报修/异常内容', prop: 'content', align: 'center' }, | |||
| { label: '报修/发现人', prop: 'creator', align: 'center', width: 100 }, | |||
| { label: '时间', prop: 'time', align: 'center' }, | |||
| { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 } | |||
| ] | |||
| export const equipmentExceptionDatalist = [ | |||
| @@ -70,21 +70,21 @@ const LifeRemainComponent = { | |||
| } | |||
| }, | |||
| render: function(h) { | |||
| render: function (h) { | |||
| return h('span', { | |||
| style: | |||
| { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' } | |||
| }, | |||
| this.injectData.remain) | |||
| this.injectData.remain) | |||
| } | |||
| } | |||
| export const equipmentAlarmProps = [ | |||
| { label: '设备名称', prop: 'eqName' }, | |||
| { label: '设备编码', prop: 'eqCode' }, | |||
| { label: '所属产线', prop: 'pl' }, | |||
| { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent }, | |||
| { label: '报警内容', prop: 'content' } | |||
| { label: '设备名称', prop: 'eqName', align: 'center' }, | |||
| { label: '设备编码', prop: 'eqCode', align: 'center' }, | |||
| { label: '所属产线', prop: 'pl', align: 'center' }, | |||
| { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent }, | |||
| { label: '报警内容', prop: 'content', align: 'center' } | |||
| ] | |||
| export const equipmentAlarmDatalist = [ | |||
| @@ -122,13 +122,13 @@ export const equipmentAnalysisData = [ | |||
| ] | |||
| export const sparepartsProps = [ | |||
| { prop: 'name', label: '部件名称' }, | |||
| { prop: 'eq', label: '所属设备' }, | |||
| { prop: 'pl', label: '所属产线' }, | |||
| { prop: 'update_time', label: '更换时间' }, | |||
| { prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent }, | |||
| { prop: 'stock', label: '备件库存量' }, | |||
| { prop: 'location', label: '库位' } | |||
| { prop: 'name', label: '部件名称', align: 'center' }, | |||
| { prop: 'eq', label: '所属设备', align: 'center' }, | |||
| { prop: 'pl', label: '所属产线', align: 'center' }, | |||
| { prop: 'update_time', label: '更换时间', align: 'center' }, | |||
| { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent }, | |||
| { prop: 'stock', label: '备件库存量', align: 'center' }, | |||
| { prop: 'location', label: '库位', align: 'center' } | |||
| ] | |||
| export const sparepartsDatalist = [ | |||
| @@ -172,9 +172,9 @@ const StatusComponent = { | |||
| ][this.injectData.status - 1] | |||
| } | |||
| }, | |||
| render: function(h) { | |||
| return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [ | |||
| h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''), | |||
| render: function (h) { | |||
| return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [ | |||
| h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''), | |||
| h('span', this.statusText) | |||
| ]) | |||
| } | |||
+ 15
- 2
src/views/QualityManager/HomePage.vue
View File
| @@ -5,7 +5,7 @@ | |||
| <div class="part-1"> | |||
| <div> | |||
| <techy-container :title="'质量异常上报'" :icon="qualitySVG"> | |||
| <div> | |||
| <div class="fix-table-exception-report"> | |||
| <techy-table | |||
| :page="1" | |||
| :limit="10" | |||
| @@ -17,7 +17,7 @@ | |||
| </techy-container> | |||
| </div> | |||
| <div> | |||
| <div class="fix-table-exception-alert"> | |||
| <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG"> | |||
| <techy-table | |||
| :page="1" | |||
| @@ -337,6 +337,19 @@ export default { | |||
| </script> | |||
| <style scoped> | |||
| .fix-table-exception-alert >>> .el-table td .cell { | |||
| width: 75% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .fix-table-exception-report >>> .el-table td .cell { | |||
| width: 70% !important; | |||
| margin: auto; | |||
| text-align: left; | |||
| } | |||
| .visual-container { | |||
| width: 100%; | |||
| min-width: 1280px; | |||
+ 5
- 5
src/views/QualityManager/components/charts/newLineStack.vue
View File
| @@ -101,7 +101,7 @@ export default { | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#FB418C' // 0% 处的颜色 | |||
| color: '#FB418C66' // 0% 处的颜色 | |||
| }, | |||
| { | |||
| offset: 1, | |||
| @@ -132,7 +132,7 @@ export default { | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#DDB112' // 0% 处的颜色 | |||
| color: '#DDB11266' // 0% 处的颜色 | |||
| }, | |||
| { | |||
| offset: 1, | |||
| @@ -163,7 +163,7 @@ export default { | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#1A99FF' // 0% 处的颜色 | |||
| color: '#1A99FF66' // 0% 处的颜色 | |||
| }, | |||
| { | |||
| offset: 1, | |||
| @@ -194,7 +194,7 @@ export default { | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#A691FF' // 0% 处的颜色 | |||
| color: '#A691FF66' // 0% 处的颜色 | |||
| }, | |||
| { | |||
| offset: 1, | |||
| @@ -229,7 +229,7 @@ export default { | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#49FBD6' // 0% 处的颜色 | |||
| color: '#49FBD666' // 0% 处的颜色 | |||
| }, | |||
| { | |||
| offset: 1, | |||
+ 0
- 90
src/views/QualityManager/components/header-bg.svg
View File
| @@ -1,90 +0,0 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
| <title>编组 12备份 6</title> | |||
| <defs> | |||
| <linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2"> | |||
| <stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop> | |||
| <stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3"> | |||
| <stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop> | |||
| <stop stop-color="#52FFF1" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4"> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6"> | |||
| <stop stop-color="#31A6AE" offset="0%"></stop> | |||
| <stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop> | |||
| </linearGradient> | |||
| <linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7"> | |||
| <stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop> | |||
| <stop stop-color="#31A6AE" offset="100%"></stop> | |||
| </linearGradient> | |||
| </defs> | |||
| <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
| <g id="2-2工单管理" transform="translate(-336.000000, -120.000000)"> | |||
| <g id="编组-12备份-6" transform="translate(336.000000, 120.000000)"> | |||
| <g id="编组-8" transform="translate(540.000000, 23.000000)"></g> | |||
| <g id="编组-4" transform="translate(0.000000, 1.000000)"> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline> | |||
| <polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon> | |||
| <polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline> | |||
| <g id="编组-3" transform="translate(43.807292, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| <g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)"> | |||
| <polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline> | |||
| <ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse> | |||
| <g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon> | |||
| </g> | |||
| <g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE"> | |||
| <polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon> | |||
| <polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon> | |||
| <polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon> | |||
| <polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon> | |||
| <polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon> | |||
| </g> | |||
| <line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line> | |||
| <line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line> | |||
| </g> | |||
| </g> | |||
| <path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path> | |||
| </g> | |||
| </g> | |||
| </g> | |||
| </svg> | |||
+ 18
- 18
src/views/QualityManager/mockData.js
View File
| @@ -30,20 +30,20 @@ const PriorityComponent = { | |||
| console.log(this.injectData.priority) | |||
| }, | |||
| methods: {}, | |||
| render: function(h) { | |||
| return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText) | |||
| render: function (h) { | |||
| return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText) | |||
| } | |||
| } | |||
| console.log('is component?', PriorityComponent) | |||
| export const qualityTableProps = [ | |||
| { label: '工序名称', width: 80, prop: 'wsName' }, | |||
| { label: '所属产线', width: 80, prop: 'pl' }, | |||
| { label: '工序名称', width: 130, prop: 'wsName', align: 'center' }, | |||
| { label: '所属产线', width: 130, prop: 'pl', align: 'center' }, | |||
| { label: '异常内容', align: 'center', prop: 'content' }, | |||
| { label: '报告人', width: 80, prop: 'creator' }, | |||
| { label: '时间', prop: 'time' }, | |||
| { label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent } | |||
| { label: '报告人', width: 120, prop: 'creator', align: 'center' }, | |||
| { label: '时间', prop: 'time', align: 'center' }, | |||
| { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent } | |||
| ] | |||
| export const qualityDatalist = [ | |||
| @@ -87,23 +87,23 @@ const StatusComponent = { | |||
| ][this.injectData.status - 1] | |||
| } | |||
| }, | |||
| render: function(h) { | |||
| return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [ | |||
| h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''), | |||
| render: function (h) { | |||
| return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [ | |||
| h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''), | |||
| h('span', this.statusText) | |||
| ]) | |||
| } | |||
| } | |||
| export const qualityExceptionTableProps = [ | |||
| { label: '工序名称', prop: 'wsName' }, | |||
| { label: '所属产线', prop: 'pl' }, | |||
| { label: '异常内容', prop: 'content' }, | |||
| { label: '发现人', prop: 'creator' }, | |||
| { label: '时间', prop: 'time' }, | |||
| { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }, | |||
| { label: '处理人', prop: 'charger' }, | |||
| { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent } | |||
| { label: '工序名称', prop: 'wsName', align: 'center', width: 120 }, | |||
| { label: '所属产线', prop: 'pl', align: 'center', width: 120 }, | |||
| { label: '异常内容', prop: 'content', align: 'center' }, | |||
| { label: '发现人', prop: 'creator', align: 'center', width: 100 }, | |||
| { label: '时间', prop: 'time', align: 'center' }, | |||
| { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 }, | |||
| { label: '处理人', prop: 'charger', align: 'center', width: 100 }, | |||
| { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 } | |||
| ] | |||
| export const qualityExceptionDatalist = [ | |||