From 585fb0bbd4a7bc7f8f333ecba7c5fecd2ee5cbc2 Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期四, 28 三月 2024 09:46:44 +0800
Subject: [PATCH] Merge branch 'master' of http://117.34.109.166:18448/r/vue_mdc_430 into develop
---
src/views/dashboard/EquipmentSignage.vue | 695 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 695 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
new file mode 100644
index 0000000..9b445fa
--- /dev/null
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -0,0 +1,695 @@
+<template>
+ <div class="page-container">
+ <div class="content-container">
+ <div style="width: 18%" class="left-col">
+ <!--杩斿洖涓婁竴绾�-->
+ <div class="back-nav" @click="$emit('backToLastSignage','WorkshopSection')" v-if="userType!==1">
+ <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
+ </div>
+
+ <!--褰撳墠璁惧缂栧彿-->
+ <dv-border-box-12 style="height: 80px;padding: 0 10px 0">
+ <div class="equipmentId-container">
+ {{equipmentId}}
+ </div>
+ </dv-border-box-12>
+
+ <!--璁惧鍒楄〃-->
+ <div style="height: 721px;overflow: auto;margin-top: 20px;">
+ <table>
+ <tr>
+ <th>璁惧缂栧彿</th>
+ <th>鍨嬪彿</th>
+ </tr>
+ <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
+ <td>{{item.equipmentId}}</td>
+ <td>{{item.equipmentType}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <div style="width: 81.8%" class="right-col">
+ <!--鍙充笂璁惧鍚勯」淇℃伅鍖哄煙-->
+ <dv-border-box-12 style="height: 50%" class="right-top-row">
+ <!--鍚勯」淇℃伅灞曠ず鍖哄煙-->
+ <div style="display: flex;height: 70%">
+ <dv-border-box-11 title="璁惧淇℃伅" class="info-container" style="flex:5;">
+ <a-descriptions :column="3">
+ <a-descriptions-item label="缁熶竴缂栧彿">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="ABC鏍囪瘑">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="璁惧鍚嶇О">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍨嬪彿">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="璁惧鍒嗙被">
+ {{equipmentInfo.equipmentCategory}}
+ </a-descriptions-item>
+ <a-descriptions-item label="宸ュ尯">
+ {{equipmentInfo.workArea}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎿嶄綔绯荤粺">
+ {{equipmentInfo.driveType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="瑙勬牸">
+ {{equipmentInfo.standard}}
+ </a-descriptions-item>
+ <a-descriptions-item label="缁存姢閮ㄩ棬">
+ {{equipmentInfo.depart}}
+ </a-descriptions-item>
+ <a-descriptions-item label="宸ユ">
+ {{equipmentInfo.workshopSection}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎿嶄綔宸�">
+ {{equipmentInfo.operator}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+
+ <dv-border-box-11 title="鎿嶄綔璇佷俊鎭�" class="info-container" style="flex:2;">
+ <a-descriptions :column="1">
+ <a-descriptions-item label="鎿嶄綔璇佺紪鍙�">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="褰撳墠鍛ㄦ湡鍒嗘暟">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍙戣瘉鏃ユ湡">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍛ㄦ湡鎴鏃ユ湡">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+
+ <dv-border-box-11 title="缁存姢淇℃伅" class="info-container" style="flex:2;">
+ <a-descriptions :column="1">
+ <a-descriptions-item label="涓嬫涓変繚鏃ユ湡">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓嬫浜屼繚鏃ユ湡">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎶�鏈姸鎬�">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+ </div>
+
+ <!--鍔熻兘鎸夐挳鍖哄煙-->
+ <div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #eee;">
+ <div style="display: flex;justify-content:space-evenly;flex: 1">
+ <div style="width: 45%;" class="info-card-container">
+ <div class="info-card-title">鏈湀鎶ヤ慨鏁伴噺</div>
+ <div class="info-card-value" style="color: #EAC910">20</div>
+ </div>
+
+ <div style="width: 45%;" class="info-card-container">
+ <div class="info-card-title">璁惧鐘舵�侊紙缁翠慨涓瓑锛�</div>
+ <div class="info-card-value">缁翠慨涓�</div>
+ </div>
+ </div>
+
+ <div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">澶囦欢淇℃伅</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">淇濆吇璁″垝</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">鎶ヤ慨</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">璁惧鐝</dv-decoration-11>
+ </div>
+ </div>
+ </dv-border-box-12>
+
+ <!--鍙充笅鍚勯」鏁版嵁鍥捐〃鍖哄煙-->
+ <dv-border-box-12 style="height: 50%" class="right-bottom-row">
+ <div style="display: flex;justify-content:space-evenly;height: 100%">
+ <div style="display: flex;flex-wrap: wrap;width: 30%;height: 100%">
+ <div id="gauge_chart1" class="gauge-chart"></div>
+ <div id="gauge_chart2" class="gauge-chart"></div>
+ <div id="gauge_chart3" class="gauge-chart"></div>
+ <div id="gauge_chart4" class="gauge-chart"></div>
+ </div>
+ <div id="line_chart" style="width:40%;height: 100%;"></div>
+ <div style="width: 25%;height:100%;display: flex;align-items: center">
+ <a-descriptions :column="2">
+ <a-descriptions-item label="杩愯妯″紡">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="绋嬪簭鍙�">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱杞��">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱璐熻嵎">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱杞��">
+ {{equipmentInfo.equipmentCategory}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱鍊嶇巼">
+ {{equipmentInfo.workArea}}
+ </a-descriptions-item>
+ <a-descriptions-item label="杩涚粰鍊嶇巼">
+ {{equipmentInfo.driveType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎶ヨ淇℃伅">
+ {{equipmentInfo.standard}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </div>
+ </div>
+ </dv-border-box-12>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+ import moment from 'moment'
+
+ export default {
+ name: 'EquipmentSignage',
+ props: {
+ productionCode: {
+ type: String,
+ default: ''
+ },
+ userType: {
+ type: Number
+ }
+ },
+ data() {
+ return {
+ equipmentList: [
+ {
+ equipmentId: '2140223',
+ equipmentType: 'CV4160'
+ },
+ {
+ equipmentId: '2140224',
+ equipmentType: 'CV4161'
+ },
+ {
+ equipmentId: '2140225',
+ equipmentType: 'CV4162'
+ },
+ {
+ equipmentId: '2140226',
+ equipmentType: 'CV4163'
+ },
+ {
+ equipmentId: '2140227',
+ equipmentType: 'CV4164'
+ },
+ {
+ equipmentId: '2140227',
+ equipmentType: 'CV4165'
+ },
+ {
+ equipmentId: '2140228',
+ equipmentType: 'CV4166'
+ },
+ {
+ equipmentId: '2140229',
+ equipmentType: 'CV4167'
+ },
+ {
+ equipmentId: '2140230',
+ equipmentType: 'CV4168'
+ },
+ {
+ equipmentId: '2140231',
+ equipmentType: 'CV4169'
+ },
+ {
+ equipmentId: '2140232',
+ equipmentType: 'CV4170'
+ },
+ {
+ equipmentId: '2140233',
+ equipmentType: 'CV4171'
+ }
+ ],
+ equipmentInfo: {
+ equipmentId: '2511563154',
+ ABCSymbol: '3312321421',
+ equipmentName: '鏈烘涓績',
+ equipmentType: 'CV4160',
+ equipmentCategory: '杞ф満',
+ workArea: 'A鍒嗗尯',
+ driveType: 'JSOWJDF',
+ standard: '鏃�',
+ depart: '杞ф満涓績',
+ workshopSection: '407涓�宸ユ',
+ operator: 'admin'
+ },
+ lineChart: '',
+ lineChartData: [],
+ gaugeChart1: '',
+ gaugeChart2: '',
+ gaugeChart3: '',
+ gaugeChart4: '',
+ gaugeChartData1: [],
+ gaugeChartData2: [],
+ gaugeChartData3: [],
+ gaugeChartData4: [],
+ equipmentId: '2140223'
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.drawCharts()
+ this.getChartDataByApi()
+ },
+ activated() {
+ this.handleWindowResize()
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
+ },
+ methods: {
+ selectEquipment(record) {
+ this.equipmentId = record.equipmentId
+ },
+
+ getChartDataByApi() {
+
+ },
+
+ /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
+ drawCharts() {
+ this.drawGaugeChart()
+ this.drawLineChart()
+ },
+
+ /* 缁樺埗浠〃鐩樺浘琛� */
+ drawGaugeChart() {
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 10, // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ grid: {
+ left: '1%',
+ top: '1%',
+ right: '10%',
+ bottom: '1%'
+ },
+ series: [
+ {
+ name: '鍒╃敤鐜�',
+ type: 'gauge',
+ radius: '80%',
+ center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
+ pointer: {
+ width: 6,
+ length: '50%',
+ itemStyle: {
+ color: 'inherit'
+ }
+ },
+ splitLine: {
+ show: true,
+ length: 10,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ axisTick: {
+ length: 5,
+ lineStyle: {
+ color: '#fff',
+ width: 1
+ }
+ },
+ axisLabel: {
+ show: false,
+ fontSize: 18,
+ formatter: function(value) {
+ return value + '%'
+ }
+ },
+ axisLine: {
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [ //琛ㄧ洏棰滆壊
+ [0.3, '#E7781E'],//0-30%澶勭殑棰滆壊
+ [0.7, '#C5C039'],//30%-60%澶勭殑棰滆壊
+ [1, '#21C77F']//90%-100%澶勭殑棰滆壊
+ ],
+ width: 15//琛ㄧ洏瀹藉害
+ }
+ },
+ detail: {
+ formatter: '{score|{value}%}',
+ offsetCenter: [0, '50%'],
+ height: 30,
+ rich: {
+ score: {
+ fontSize: 20
+ }
+ }
+ },
+ data: [{ value: 100 }]
+ }
+ ]
+ }
+ this.drawGaugeChart1(option)
+ this.drawGaugeChart2(option)
+ this.drawGaugeChart3(option)
+ this.drawGaugeChart4(option)
+ },
+
+ /* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
+ drawGaugeChart1(opt) {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ const option = Object.assign({}, opt)
+ option.title.text = '鍒╃敤鐜�'
+ this.gaugeChart1.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
+ drawGaugeChart2(opt) {
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鍔ㄧ巼'
+ this.gaugeChart2.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
+ drawGaugeChart3(opt) {
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鏈虹巼'
+ this.gaugeChart3.setOption(option, true)
+ },
+
+ /* 缁樺埗OEE浠〃鐩樺浘琛� */
+ drawGaugeChart4(opt) {
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ const option = Object.assign({}, opt)
+ option.title.text = 'OEE'
+ this.gaugeChart4.setOption(option, true)
+ },
+
+ /* 缁樺埗鎶樼嚎鍥� */
+ drawLineChart() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ const newData = {
+ xAxis: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ yAxis: [
+ {
+ name: '鍒╃敤鐜�',
+ value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
+ },
+ {
+ name: '寮�鍔ㄧ巼',
+ value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
+ },
+ {
+ name: 'OEE',
+ value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
+ }
+ ],
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ }
+ let legendData = []
+ let seriesData = []
+ let colorArr = ['#09F39E', '#A5F10D', '#09B3F6']
+ legendData = newData.yAxis.map((item) => item.name)
+ seriesData = newData.yAxis.map((item1, index1) => {
+ return {
+ name: item1.name,
+ type: 'line',
+ symbol: 'circle',
+ symbolSize: 8,
+ itemStyle: {
+ color: colorArr[index1]
+ },
+ lineStyle: {
+ width: 2
+ },
+ yAxisIndex: 1,
+ data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
+ }
+ })
+ const option = {
+ grid: {
+ containLabel: true,
+ bottom: '3%',
+ top: '15%',
+ left: '2%',
+ right: '1%'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ top: 20,
+ right: 'center',
+ data: legendData,
+ itemGap: 10,
+ textStyle: {
+ fontSize: 14,
+ color: '#ccc'
+ }
+ },
+ xAxis: {
+ triggerEvent: true,
+ data: newData.xAxis || [],
+ axisLabel: {
+ interval: 0,
+ show: true,
+ fontSize: 12,
+ color: '#50729A'
+ // rotate: -30,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: true,
+ alignWithLabel: true
+ }
+ },
+ yAxis: [
+ {
+ name: newData.yAxisName,
+ nameTextStyle: {
+ color: '#00A8AC',
+ fontSize: 18,
+ padding: [0, 0, 0, 90]
+ },
+ nameGap: 25,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#3E4A82'
+ }
+ }
+ },
+ {
+ type: 'value',
+ position: 'right',
+ splitNumber: 5,
+ axisLabel: {
+ show: true,
+ color: '#50729A'
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: true
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#3E4A82'
+ }
+ }
+ }
+ ],
+ series: seriesData
+ }
+ this.lineChart.setOption(option, true)
+ },
+
+ /**
+ * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+ * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+ */
+ handleWindowResize() {
+ if (this.gaugeChart1) this.gaugeChart1.resize()
+ if (this.gaugeChart2) this.gaugeChart2.resize()
+ if (this.gaugeChart3) this.gaugeChart3.resize()
+ if (this.gaugeChart4) this.gaugeChart4.resize()
+ if (this.lineChart) this.lineChart.resize()
+ }
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+ .page-container {
+ .content-container {
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+
+ .left-col {
+ padding: 0 10px 0;
+
+ .back-nav {
+ width: 100px;
+ height: 30px;
+ color: #eee;
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ cursor: pointer;
+ z-index: 9999
+ }
+
+ .equipmentId-container {
+ height: 100%;
+ color: #eee;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px
+ }
+
+ table {
+ color: #eee;
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ border: 1px dashed;
+
+ tr {
+ height: 60px;
+ text-align: center;
+ font-size: 18px;
+ position: relative;
+
+ th, td {
+ border: 1px dashed;
+ }
+
+ th {
+ font-weight: bold;
+ background-color: #10695D;
+ position: sticky;
+ z-index: 9999;
+ top: 0;
+ }
+
+ td {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .right-col {
+
+ .right-top-row {
+ .info-container {
+ margin: 5px;
+ padding: 70px 0 0 30px;
+ height: 100%
+ }
+
+ .info-card-container {
+ background-color: #67C23A;
+ padding: 5px;
+ border-radius: 3px;
+
+ .info-card-title {
+ font-weight: bold;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden
+ }
+
+ .info-card-value {
+ text-align: center;
+ font-size: 30px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden
+ }
+ }
+ }
+
+ .right-bottom-row {
+ .gauge-chart {
+ width: 50%;
+ height: 50%;
+ }
+ }
+ }
+ }
+ }
+
+ /deep/ .ant-descriptions {
+ font-size: 16px;
+ }
+
+ /deep/ .ant-descriptions-item {
+ padding-bottom: 25px;
+ white-space: nowrap;
+ overflow: hidden;
+ -ms-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ }
+
+ /deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
+ color: #eee;
+ font-size: 16px;
+ }
+
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3