From a6d93e96d0f9585de5e15b2efa47519f18211350 Mon Sep 17 00:00:00 2001
From: lyh <925863403@qq.com>
Date: 星期四, 31 七月 2025 16:22:18 +0800
Subject: [PATCH] 升版导入修改为单文件导入
---
src/views/dashboard/EquipmentSignage.vue | 683 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 510 insertions(+), 173 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9b445fa..6fb7ba7 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -21,9 +21,10 @@
<th>璁惧缂栧彿</th>
<th>鍨嬪彿</th>
</tr>
- <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
+ <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
+ :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
<td>{{item.equipmentId}}</td>
- <td>{{item.equipmentType}}</td>
+ <td>{{item.equipmentModel}}</td>
</tr>
</table>
</div>
@@ -37,37 +38,37 @@
<dv-border-box-11 title="璁惧淇℃伅" class="info-container" style="flex:5;">
<a-descriptions :column="3">
<a-descriptions-item label="缁熶竴缂栧彿">
- {{equipmentInfo.equipmentId}}
+ {{equipmentInfo.num|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="ABC鏍囪瘑">
- {{equipmentInfo.ABCSymbol}}
+ {{equipmentInfo.abc|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="璁惧鍚嶇О">
- {{equipmentInfo.equipmentName}}
+ {{equipmentInfo.name|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="鍨嬪彿">
- {{equipmentInfo.equipmentType}}
+ {{equipmentInfo.model|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="璁惧鍒嗙被">
- {{equipmentInfo.equipmentCategory}}
+ {{equipmentInfo.equipmentCategoryName|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="宸ュ尯">
- {{equipmentInfo.workArea}}
+ {{equipmentInfo.areaName|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="鎿嶄綔绯荤粺">
- {{equipmentInfo.driveType}}
+ {{equipmentInfo.system|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="瑙勬牸">
- {{equipmentInfo.standard}}
+ {{equipmentInfo.specification|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="缁存姢閮ㄩ棬">
- {{equipmentInfo.depart}}
+ {{equipmentInfo.manageName|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="宸ユ">
- {{equipmentInfo.workshopSection}}
+ {{equipmentInfo.workShopName|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鎿嶄綔宸�">
- {{equipmentInfo.operator}}
+ <a-descriptions-item label="璁惧鐘舵��">
+ {{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
</a-descriptions-item>
</a-descriptions>
</dv-border-box-11>
@@ -75,16 +76,26 @@
<dv-border-box-11 title="鎿嶄綔璇佷俊鎭�" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="鎿嶄綔璇佺紪鍙�">
- {{equipmentInfo.equipmentId}}
+ <a-tooltip>
+ <template slot="title">
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="褰撳墠鍛ㄦ湡鍒嗘暟">
- {{equipmentInfo.ABCSymbol}}
+ {{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鍙戣瘉鏃ユ湡">
- {{equipmentInfo.equipmentName}}
+ <a-descriptions-item label="鍙戣瘉/鎴鏃ユ湡">
+ <a-tooltip>
+ <template slot="title" v-if="operationCertificateInfo.issueDate||operationCertificateInfo.endTime">
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
- <a-descriptions-item label="鍛ㄦ湡鎴鏃ユ湡">
- {{equipmentInfo.equipmentType}}
+ <a-descriptions-item label="鎿嶄綔宸�">
+ {{operationCertificateInfo.realname|equipmentInfoDisplay}}
</a-descriptions-item>
</a-descriptions>
</dv-border-box-11>
@@ -92,76 +103,85 @@
<dv-border-box-11 title="缁存姢淇℃伅" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="涓嬫涓変繚鏃ユ湡">
- {{equipmentInfo.equipmentId}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextThirdMaintenanceTime">
+ {{equipmentInfo.nextThirdMaintenanceTime}}
+ </template>
+ {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="涓嬫浜屼繚鏃ユ湡">
- {{equipmentInfo.ABCSymbol}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextSecondMaintenanceTime">
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </template>
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="鎶�鏈姸鎬�">
- {{equipmentInfo.equipmentName}}
+ {{equipmentInfo.technology_status|equipmentInfoDisplay}}
</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;height: 30%;align-items: center;padding: 0 20px;color: #fff;">
<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 class="info-card-title">鏈湀鎶ヤ慨娆℃暟</div>
+ <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}
+ </div>
</div>
<div style="width: 45%;" class="info-card-container">
- <div class="info-card-title">璁惧鐘舵�侊紙缁翠慨涓瓑锛�</div>
- <div class="info-card-value">缁翠慨涓�</div>
+ <div class="info-card-title">璁惧鐘舵��</div>
+ <div class="info-card-value">{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}</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 v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
+ style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
+ <dv-decoration-11>{{item.label}}</dv-decoration-11>
+ </div>
</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;justify-content:space-evenly;height: 100%" v-show="isBelongToMdc">
<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">
+ <div id="line_chart" :style="{width:lineChartWidth,height: '100%'}"></div>
+ <div v-show="isBelongToMdc&&isDisplayEquipmentDetails"
+ style="width: 25%;height:100%;display: flex;align-items: center">
<a-descriptions :column="2">
<a-descriptions-item label="杩愯妯″紡">
- {{equipmentInfo.equipmentId}}
+ {{equipmentDetails.runModble|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="绋嬪簭鍙�">
- {{equipmentInfo.ABCSymbol}}
+ {{equipmentDetails.sequencenumber|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="涓昏酱杞��">
- {{equipmentInfo.equipmentName}}
+ {{equipmentDetails.spindlespeed|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="涓昏酱璐熻嵎">
- {{equipmentInfo.equipmentType}}
- </a-descriptions-item>
- <a-descriptions-item label="涓昏酱杞��">
- {{equipmentInfo.equipmentCategory}}
+ {{equipmentDetails.spindleload|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="涓昏酱鍊嶇巼">
- {{equipmentInfo.workArea}}
+ {{equipmentDetails.spindlebeilv|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="杩涚粰鍊嶇巼">
- {{equipmentInfo.driveType}}
+ {{equipmentDetails.feedbeilv|equipmentInfoDisplay}}
</a-descriptions-item>
<a-descriptions-item label="鎶ヨ淇℃伅">
- {{equipmentInfo.standard}}
+ {{equipmentDetails.alrmstate|equipmentInfoDisplay}}
</a-descriptions-item>
</a-descriptions>
</div>
@@ -169,17 +189,28 @@
</dv-border-box-12>
</div>
</div>
+
+ <SignageModal ref="modalRef" :modalVisible="modalVisible" :modalWidth="modalWidth" :modalTitle=modalTitle
+ :modalDataApiUrl="modalDataApiUrl"
+ :modalDataApiParams="modalDataApiParams"
+ @closeModal="modalVisible=false"/>
</div>
</template>
<script>
import signageApi from '@/api/signage'
import moment from 'moment'
+ import SignageModal from './modules/SignageModal'
export default {
name: 'EquipmentSignage',
+ components: { SignageModal },
props: {
productionCode: {
+ type: String,
+ default: ''
+ },
+ workshopSectionProductionCode: {
type: String,
default: ''
},
@@ -189,106 +220,304 @@
},
data() {
return {
- equipmentList: [
+ equipmentId: '',
+ equipmentList: [],
+ equipmentInfo: {},
+ operationCertificateInfo: {},
+ equipmentDetails: {},
+ buttonList: [
{
- equipmentId: '2140223',
- equipmentType: 'CV4160'
+ label: '澶囦欢淇℃伅',
+ pageName: '',
+ modalDataApiUrl: ''
},
{
- equipmentId: '2140224',
- equipmentType: 'CV4161'
+ label: '淇濆吇璁″垝',
+ pageName: '',
+ modalDataApiUrl: '/eam/equipment/list'
},
{
- equipmentId: '2140225',
- equipmentType: 'CV4162'
+ label: '鎶ヤ慨',
+ pageName: 'eam-MalfunctionRepair',
+ modalDataApiUrl: ''
},
{
- 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'
+ label: '璁惧鐝',
+ pageName: 'mdc-base-DeviceCalendar',
+ modalDataApiUrl: ''
}
],
- equipmentInfo: {
- equipmentId: '2511563154',
- ABCSymbol: '3312321421',
- equipmentName: '鏈烘涓績',
- equipmentType: 'CV4160',
- equipmentCategory: '杞ф満',
- workArea: 'A鍒嗗尯',
- driveType: 'JSOWJDF',
- standard: '鏃�',
- depart: '杞ф満涓績',
- workshopSection: '407涓�宸ユ',
- operator: 'admin'
- },
lineChart: '',
+ lineChartWidth: '40%',
lineChartData: [],
gaugeChart1: '',
gaugeChart2: '',
gaugeChart3: '',
gaugeChart4: '',
- gaugeChartData1: [],
- gaugeChartData2: [],
- gaugeChartData3: [],
- gaugeChartData4: [],
- equipmentId: '2140223'
+ gaugeChartData: {
+ utilizationRate: 0,
+ startRate: 0,
+ openRate: 0,
+ overallEquipmentEfficiency: 0
+ },
+ hideLoadingDelayTime: 500,
+ isDisplayEquipmentDetails: false,
+ isBelongToMdc: true,// 鏄惁鍦╩dc璁惧琛ㄤ腑
+ modalVisible: false,
+ modalWidth: 1048,
+ modalTitle: '',
+ modalDataApiUrl: '',
+ modalTableColumns: [],
+ modalDataApiParams: {}
}
+ },
+ created() {
+ this.equipmentId = this.productionCode
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
- this.getChartDataByApi()
- },
- activated() {
- this.handleWindowResize()
+ this.getOperationCertificateByApi()
+ // 鎿嶄綔宸ョ骇鐢ㄦ埛杩涘叆鏃惰皟鐢ㄦ帴鍙ｈ幏鍙杕es璁惧鍒楄〃锛屽叾浣欐儏鍐佃幏鍙杕dc璁惧鍒楄〃
+ if (this.userType !== 1) this.getEquipmentListByApi()
+ else this.getAllAreaEquipmentListByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
+ filters: {
+ equipmentInfoDisplay(value) {
+ return value ? value : '鏃�'
+ }
+ },
+ watch: {
+ isDisplayEquipmentDetails: {
+ handler(newVal) {
+ if (newVal) this.lineChartWidth = '40%'
+ else this.lineChartWidth = '65%'
+ this.$nextTick(() => {
+ if (this.lineChart) this.lineChart.resize()
+ })
+ },
+ immediate: true
+ }
+ },
methods: {
- selectEquipment(record) {
- this.equipmentId = record.equipmentId
+ getOperationCertificateByApi() {
+ signageApi.getOperationCertificateApi()
+ .then(res => {
+ if (res.success && res.result.length > 0) this.operationCertificateInfo = res.result[0]
+ })
},
+ getEquipmentListByApi() {
+ // 棣栭〉涓�杩涘叆鍗宠澶囩骇鎴栧伐娈电骇鏃讹紝workshopSectionProductionCode涓虹┖锛岄粯璁ゆ煡璇㈢涓�涓溅闂翠腑绗竴涓伐娈典笅鐨勮澶囧垪琛�
+ signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
+ .then(res => {
+ if (res.success) {
+ this.equipmentList = res.result
+ if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
+ }
+ })
+ .finally(() => {
+ // 姝ゅ涓轰繚璇乪quipmentId姝ｅ父璧嬪�煎悗鍐嶈皟鐢ㄦ帴鍙ｈ幏鍙栧浘琛ㄦ暟鎹互鍙婅澶囪缁嗕俊鎭紙寮傛锛�
+ this.getChartDataByApi()
+ this.getEquipmentInfoByApi()
+ this.getEquipmentDetailsByApi()
+ })
+ },
+
+ getAllAreaEquipmentListByApi() {
+ signageApi.getAllAreaEquipmentListApi(this.workshopSectionProductionCode)
+ .then(res => {
+ if (res.success) {
+ this.equipmentList = res.result
+ this.equipmentList.forEach(item => {
+ item.equipmentId = item.num
+ item.equipmentModel = item.model
+ })
+ if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
+ }
+ })
+ .finally(() => {
+ // 姝ゅ涓轰繚璇乪quipmentId姝ｅ父璧嬪�煎悗鍐嶈皟鐢ㄦ帴鍙ｈ幏鍙栬澶囦俊鎭拰缁存姢淇℃伅锛堝紓姝ワ級
+ this.getEquipmentInfoByApi()
+ })
+ },
+
+ // 鑾峰彇鍙充笂瑙掕澶囦俊鎭拰缁存姢淇℃伅
+ getEquipmentInfoByApi() {
+ signageApi.getEquipmentInfoApi(this.equipmentId)
+ .then(res => {
+ if (res.success && res.result.length > 0) this.equipmentInfo = res.result[0]
+ else this.equipmentInfo = {}
+ })
+ },
+
+ /* 鑾峰彇鍙充笅瑙掕澶囪缁嗕俊鎭� */
+ getEquipmentDetailsByApi() {
+ signageApi.getEquipmentDetailsApi(this.equipmentId)
+ .then(res => {
+ if (res.success && res.result) {
+ this.equipmentDetails = res.result
+ this.isDisplayEquipmentDetails = true
+ }
+ else this.isDisplayEquipmentDetails = false
+ })
+ },
+
+ /* 鍙充笅瑙掑浘琛ㄦ暟鎹幏鍙栨眹鎬绘柟娉� */
getChartDataByApi() {
-
+ this.getGaugeChartDataByApi()
+ this.getLineChartDataByApi()
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawGaugeChart()
- this.drawLineChart()
+ /* 鍗曞嚮璁惧鍒楄〃涓殑璁惧鏃惰Е鍙� */
+ selectEquipment(record) {
+ // 閬垮厤鐐瑰嚮鐩稿悓璁惧閲嶅鍙戦�佽姹�
+ if (record.equipmentId === this.equipmentId) return
+ this.equipmentId = record.equipmentId
+
+ // 闈炴搷浣滃伐绾ф椂闇�瑕佷紶鍏ヨ澶囩紪鍙蜂互鏌ヨ鍥捐〃鍙婅澶囧悇椤逛俊鎭暟鎹紝鎿嶄綔宸ョ骇鏃跺彲灏嗚澶囧垪琛ㄨ淇℃伅鐩存帴璧嬪�煎睍绀�
+ if (this.userType !== 1) {
+ this.getChartDataByApi()
+ this.getEquipmentDetailsByApi()
+ this.getEquipmentInfoByApi()
+ } else {
+ this.equipmentInfo = record
+ }
+ },
+
+ /* 鍗曞嚮鍙宠竟瀵艰埅鏍忓悗瑙﹀彂 */
+ navigateToPage(record) {
+ if (record.pageName) {
+ this.$router.push({
+ name: record.pageName,
+ params: { equipmentId: this.equipmentId }
+ })
+ } else {
+ this.$refs.modalRef.modalTableColumns = [
+ {
+ title: '#',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
+ }
+ },
+ {
+ width: 150,
+ align: 'center',
+ title: '璁惧缂栧彿',
+ dataIndex: 'num',
+ key: 'num'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍚嶇О',
+ dataIndex: 'name',
+ key: 'name'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍨嬪彿',
+ dataIndex: 'model',
+ key: 'model'
+ },
+ {
+ width: 250,
+ align: 'center',
+ title: '瑙勬牸',
+ key: 'specification',
+ dataIndex: 'specification'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫浜屼繚鏃堕棿',
+ key: 'nextSecondMaintenanceTime',
+ dataIndex: 'nextSecondMaintenanceTime'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫涓変繚鏃堕棿',
+ key: 'nextThirdMaintenanceTime',
+ dataIndex: 'nextThirdMaintenanceTime'
+ }
+ ]
+ this.modalWidth = 1248
+ this.modalTitle = record.label
+ this.modalDataApiParams = { num: this.equipmentId }
+ this.modalDataApiUrl = record.modalDataApiUrl
+ this.modalVisible = true
+ }
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
+ getGaugeChartDataByApi() {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ this.gaugeChart1.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart2.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart3.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart4.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success && res.result) {
+ this.gaugeChartData = res.result
+ this.isBelongToMdc = true
+ this.drawGaugeChart()
+ }
+ else this.isBelongToMdc = false
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鏁村勾搴﹀埄鐢ㄧ巼 */
+ getLineChartDataByApi() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ this.lineChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success && res.result) {
+ this.lineChartData = res.result
+ this.isBelongToMdc = true
+ this.drawLineChart()
+ }
+ else this.isBelongToMdc = false
+ })
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -303,12 +532,13 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#00A8AC',
- fontWeight: 'bold'
+ color: '#1AD8DE'
}
},
tooltip: {
- formatter: '{a} <br/>{b} : {c}%'
+ formatter: params => {
+ return params.seriesName + '锛�' + params.value + '%'
+ }
},
grid: {
left: '1%',
@@ -318,7 +548,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '',
type: 'gauge',
radius: '80%',
center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
@@ -354,9 +584,9 @@
axisLine: {
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: [ //琛ㄧ洏棰滆壊
- [0.3, '#E7781E'],//0-30%澶勭殑棰滆壊
- [0.7, '#C5C039'],//30%-60%澶勭殑棰滆壊
- [1, '#21C77F']//90%-100%澶勭殑棰滆壊
+ [0.3, '#F56436'],//0-30%澶勭殑棰滆壊
+ [0.7, '#FFFF40'],//30%-60%澶勭殑棰滆壊
+ [1, '#0FC61A']//90%-100%澶勭殑棰滆壊
],
width: 15//琛ㄧ洏瀹藉害
}
@@ -371,7 +601,7 @@
}
}
},
- data: [{ value: 100 }]
+ data: []
}
]
}
@@ -383,56 +613,155 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
- this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
- option.title.text = '鍒╃敤鐜�'
- this.gaugeChart1.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + 'TEEP'
+ option.series[0].name = 'TEEP'
+ option.series[0].data = [this.gaugeChartData.utilizationRate]
+ this.gaugeChart1.setOption(option, true)
+ setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
+ })
+
+ this.gaugeChart1.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(opt) {
- this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鍔ㄧ巼'
- this.gaugeChart2.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
+ option.series[0].name = '寮�鍔ㄧ巼'
+ option.series[0].data = [this.gaugeChartData.startRate]
+ this.gaugeChart2.setOption(option, true)
+ setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+ })
+
+ this.gaugeChart2.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(opt) {
- this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鏈虹巼'
- this.gaugeChart3.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
+ option.series[0].name = '寮�鏈虹巼'
+ option.series[0].data = [this.gaugeChartData.openRate]
+ this.gaugeChart3.setOption(option, true)
+ setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+ })
+
+ this.gaugeChart3.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗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)
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
+ option.series[0].name = 'OEE'
+ option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
+ this.gaugeChart4.setOption(option, true)
+ setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
+ })
+
+ this.gaugeChart4.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: true, productionId: this.equipmentId }
+ })
+ }
+ })
},
/* 缁樺埗鎶樼嚎鍥� */
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鏈�'],
+ xAxis: this.lineChartData.dateList,
yAxis: [
{
- name: '鍒╃敤鐜�',
- value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
+ name: 'TEEP',
+ value: this.lineChartData.dataList.map(item => item.utilizationRate)
},
{
name: '寮�鍔ㄧ巼',
- value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
+ value: this.lineChartData.dataList.map(item => item.startRate)
},
{
name: 'OEE',
- value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
+ value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
}
],
- yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ yAxisName: '鏁村勾搴EEP(%)'
}
let legendData = []
let seriesData = []
@@ -446,6 +775,13 @@
symbolSize: 8,
itemStyle: {
color: colorArr[index1]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: 'inherit'
+ }
},
lineStyle: {
width: 2
@@ -466,6 +802,17 @@
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ formatter: function(params) {
+ let result = ''
+ params.forEach((item, index) => {
+ let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}锛�${item.value}%`
+ if (index === 0) {
+ result = `<span style="font-weight:bolder;">${item.name}</span>`
+ }
+ result += '<br />' + dom
+ })
+ return result
}
},
legend: {
@@ -475,7 +822,7 @@
itemGap: 10,
textStyle: {
fontSize: 14,
- color: '#ccc'
+ color: '#fff'
}
},
xAxis: {
@@ -484,14 +831,14 @@
axisLabel: {
interval: 0,
show: true,
- fontSize: 12,
- color: '#50729A'
+ fontSize: 14,
+ color: '#fff'
// rotate: -30,
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -503,9 +850,9 @@
{
name: newData.yAxisName,
nameTextStyle: {
- color: '#00A8AC',
+ color: '#1AD8DE',
fontSize: 18,
- padding: [0, 0, 0, 90]
+ padding: [0, 0, 0, 120]
},
nameGap: 25,
type: 'value',
@@ -513,7 +860,7 @@
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -522,22 +869,24 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
},
{
type: 'value',
- position: 'right',
+ position: 'left',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
- color: '#50729A'
+ color: '#fff',
+ fontSize:14
},
axisLine: {
show: true,
lineStyle: {
- color: '#50729A'
+ color: '#fff'
}
},
axisTick: {
@@ -546,7 +895,7 @@
splitLine: {
show: false,
lineStyle: {
- color: '#3E4A82'
+ color: '#fff'
}
}
}
@@ -554,6 +903,7 @@
series: seriesData
}
this.lineChart.setOption(option, true)
+ setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
},
/**
@@ -581,20 +931,9 @@
.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;
+ color: #fff;
display: flex;
justify-content: center;
align-items: center;
@@ -602,7 +941,7 @@
}
table {
- color: #eee;
+ color: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
@@ -620,7 +959,7 @@
th {
font-weight: bold;
- background-color: #10695D;
+ background-color: #1CB29D;
position: sticky;
z-index: 9999;
top: 0;
@@ -643,7 +982,7 @@
}
.info-card-container {
- background-color: #67C23A;
+ background-color: #0FC61A;
padding: 5px;
border-radius: 3px;
@@ -682,12 +1021,10 @@
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;
+ color: #fff;
font-size: 16px;
}
--
Gitblit v1.9.3