From 8d4c67323bee47d6225f150e9f61868c6434a358 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 03 九月 2025 17:48:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/dashboard/eamIndex/EamManagerSignage.vue | 435 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 435 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/eamIndex/EamManagerSignage.vue b/src/views/dashboard/eamIndex/EamManagerSignage.vue
new file mode 100644
index 0000000..acfafe0
--- /dev/null
+++ b/src/views/dashboard/eamIndex/EamManagerSignage.vue
@@ -0,0 +1,435 @@
+<template>
+ <div class="outer-container">
+ <div class="left-container">
+ <a-card title="鎶�鏈姸鎬�">
+ <a-spin class="spinning-container" :spinning="spinning1">
+ <div id="tech_condition_chart" style="width:100%;height: 100%;"></div>
+ </a-spin>
+ </a-card>
+
+ <a-card title="璁惧鎶ヤ慨鏁呴殰">
+ <a-spin class="spinning-container" :spinning="spinning2">
+ <div id="warranty_malfunction_chart" style="width:100%;height: 100%;"></div>
+ </a-spin>
+ </a-card>
+ </div>
+
+
+ <div class="right-container">
+ <div class="right-top-container">
+ <a-card title="涓変繚璁″垝">
+ <div class="support-plan-container">
+ <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
+ <div>{{item.planTime}}</div>
+ <div class="plan-value-container">
+ <div class="plan-value">{{$data.thirdMaintenanceParams[item.planValueLabel]}}</div>
+ <div>鍙�</div>
+ </div>
+ </div>
+ </div>
+ </a-card>
+ <a-card title="浜屼繚璁″垝">
+ <div class="support-plan-container">
+ <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
+ <div>{{item.planTime}}</div>
+ <div class="plan-value-container">
+ <div class="plan-value">{{$data.secondMaintenanceParams[item.planValueLabel]}}</div>
+ <div>鍙�</div>
+ </div>
+ </div>
+ </div>
+ </a-card>
+ </div>
+
+ <a-card title="鎴戠殑寰呭姙" class="right-bottom-container">
+ <a slot="extra" href="#" @click="$router.push('/flowable/workflow/FlowTodo')">鏇村</a>
+
+ <todo-list ref="todoList"
+ :defaultCategories="['equipment_transfer','equipment_scrap','spare_part_apply','equipment_seal_up','equipment_unseal','equipment_return','sbdjApproval','eam_repair','equipment_lean_out','second_maintenance','third_maintenance']"
+ />
+ </a-card>
+ </div>
+ </div>
+</template>
+
+<script>
+ import TodoList from '../TodoList'
+ import signageApi from '@/api/signage'
+
+ export default {
+ name: 'EamManagerSignage',
+ components: { TodoList },
+ data() {
+ return {
+ spinning1: false,
+ spinning2: false,
+ techConditionChart: '',
+ warrantyMalfunctionChart: '',
+ thirdMaintenanceParams: {
+ thisMonthMaintenancePlanNum: 0,
+ thisMonthMaintenanceRealNum: 0,
+ nextMonthMaintenancePlanNum: 0,
+ maintenanceOverdueNum: 0
+ },
+ secondMaintenanceParams: {
+ thisMonthMaintenancePlanNum: 0,
+ thisMonthMaintenanceRealNum: 0,
+ nextMonthMaintenancePlanNum: 0,
+ maintenanceOverdueNum: 0
+ },
+ maintenanceEleList: [
+ {
+ planTime: '鏈湀璁″垝',
+ planValueLabel: 'thisMonthMaintenancePlanNum',
+ backgroundColor: '#719D8E',
+ code: 'bysbzs'
+ },
+ {
+ planTime: '鏈湀瀹屾垚',
+ planValueLabel: 'thisMonthMaintenanceRealNum',
+ backgroundColor: '#409EFF',
+ code: 'bwc'
+ },
+ {
+ planTime: '涓嬫湀璁″垝',
+ planValueLabel: 'nextMonthMaintenancePlanNum',
+ backgroundColor: '#A8985D',
+ code: 'xysb'
+ },
+ {
+ planTime: '瓒呮湡',
+ planValueLabel: 'maintenanceOverdueNum',
+ backgroundColor: '#E86A6A',
+ code: ''
+ }
+ ]
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.getChartDataByApi()
+ this.$refs.todoList.loadData(1)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
+ },
+ methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
+ getChartDataByApi() {
+ this.getTechConditionDataByApi()
+ this.getWarrantyMalfunctionDataByApi()
+ this.getThirdMaintenanceConditionByApi()
+ this.getSecondMaintenanceConditionByApi()
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
+ getTechConditionDataByApi() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ this.spinning1 = true
+ signageApi.getEquipmentTechnologyStatusApi()
+ .then(res => {
+ if (res.success && res.result) {
+ this.techConditionData = [
+ {
+ value: res.result.length > 0 ? res.result[0].qualifiedCount : 0,
+ name: '鍚堟牸'
+ },
+ {
+ value: res.result.length > 0 ? res.result[0].limitedUseCount : 0,
+ name: '闄愮敤'
+ },
+ {
+ value: res.result.length > 0 ? res.result[0].disabledCount : 0,
+ name: '绂佺敤'
+ }
+ ]
+ this.drawTechConditionChart()
+ }
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鏁呴殰鎶ヤ慨 */
+ getWarrantyMalfunctionDataByApi() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ this.spinning2 = true
+ signageApi.getReportRepairEquipmentApi()
+ .then(res => {
+ if (res.success && res.result) {
+ this.warrantyMalfunctionData = [
+ {
+ value: res.result.length > 0 ? res.result[0].noStopCount : 0,
+ name: '杩愯'
+ },
+ {
+ value: res.result.length > 0 ? res.result[0].failurTotalCount : 0,
+ name: '鎶ヤ慨'
+ },
+ {
+ value: res.result.length > 0 ? res.result[0].stopCount : 0,
+ name: '鍋滄満'
+ }
+ ]
+ this.drawWarrantyMalfunctionChart()
+ }
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇涓変繚鎯呭喌 */
+ getThirdMaintenanceConditionByApi() {
+ signageApi.getThirdMaintenancePlanApi()
+ .then(res => {
+ if (res.success && res.result) {
+ this.thirdMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
+ this.thirdMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
+ this.thirdMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
+ this.thirdMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
+ }
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇浜屼繚鎯呭喌 */
+ getSecondMaintenanceConditionByApi() {
+ signageApi.getSecondMaintenancePlanApi()
+ .then(res => {
+ if (res.success && res.result) {
+ this.secondMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
+ this.secondMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
+ this.secondMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
+ this.secondMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
+ }
+ })
+ },
+
+ /* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
+ drawTechConditionChart() {
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: function(params) {
+ return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
+ '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}锛�${params.percent}%锛塦
+ }
+ },
+ legend: {
+ bottom: 0,
+ right: 'center',
+ itemWidth: 14,
+ itemHeight: 14,
+ itemGap: 15,
+ textStyle: {
+ color: 'inherit',
+ fontSize: 14
+ },
+ data: ['鍚堟牸', '闄愮敤', '绂佺敤']
+ },
+ grid: {
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '55%'],
+ center: ['50%', '40%'],
+ color: [
+ '#4DC794',
+ '#3DB1F6',
+ '#F76E6D'
+ ],
+ label: {
+ position: 'outside',
+ show: true,
+ color: 'inherit',
+ fontSize: 16,
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}`
+ }
+ }
+ },
+ labelLine: {
+ show: true,
+ length2: 15,
+ length: 15,
+ lineStyle: {
+ color: 'rgba(0,0,0,.45)'
+ }
+ },
+ data: this.techConditionData
+ }
+ ]
+ }
+ this.techConditionChart.setOption(option, true)
+ this.spinning1 = false
+ },
+
+ /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
+ drawWarrantyMalfunctionChart() {
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: function(params) {
+ return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
+ '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}锛�${params.percent}%锛塦
+ }
+ },
+ legend: {
+ bottom: 0,
+ right: 'center',
+ itemWidth: 14,
+ itemHeight: 14,
+ itemGap: 15,
+ textStyle: {
+ color: 'inherit',
+ fontSize: 14
+ },
+ data: ['杩愯', '鎶ヤ慨', '鍋滄満']
+ },
+ grid: {
+ containLabel: true
+ },
+ series: {
+ type: 'pie',
+ radius: ['40%', '55%'],
+ center: ['50%', '40%'],
+ color: [
+ '#4DC794',
+ '#3DB1F6',
+ '#F76E6D'
+ ],
+ label: {
+ position: 'outside',
+ show: true,
+ color: 'inherit',
+ fontSize: 16,
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}`
+ }
+ }
+ },
+ labelLine: {
+ show: true,
+ length2: 15,
+ length: 15
+ },
+ data: this.warrantyMalfunctionData
+ }
+ }
+ this.warrantyMalfunctionChart.setOption(option, true)
+ this.spinning2 = false
+ },
+
+ /**
+ * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+ * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+ */
+ handleWindowResize() {
+ if (this.techConditionChart) this.techConditionChart.resize()
+ if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
+ }
+ }
+ }
+</script>
+
+<style scoped lang="less">
+ @container-margin: 10px;
+
+ .outer-container {
+ display: flex;
+ justify-content: space-between;
+ height: 100vh;
+
+ .left-container {
+ width: 30%;
+ height: 100%;
+ margin-right: @container-margin;
+
+ & > div:first-child {
+ margin-bottom: @container-margin;
+ }
+
+ /deep/ .ant-card {
+ height: calc(100% / 2 - (@container-margin / 2));
+ display: flex;
+ flex-direction: column;
+
+ .ant-card-body {
+ flex: 1;
+ }
+ }
+ }
+
+ .right-container {
+ width: 70%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .right-top-container {
+ display: flex;
+ margin-bottom: @container-margin;
+
+ /deep/ .ant-card {
+ flex: 1;
+
+ &:first-child {
+ margin-right: @container-margin;
+ }
+ .ant-card-body {
+ padding: 0;
+ }
+ }
+
+ .support-plan-container {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+
+ .support-plan-item {
+ border-radius: 3px;
+ width: calc(100% / 2);
+ padding: 25px;
+ text-align: center;
+ border-left: 1px solid #e8e8e8;
+ border-bottom: 1px solid #e8e8e8;
+
+ .plan-value-container {
+ margin-top: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .plan-value {
+ margin-right: 10px;
+ font-size: 30px;
+ }
+ }
+ }
+ }
+ }
+
+ .right-bottom-container {
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ & ::-webkit-scrollbar {
+ width: 6px; /* 婊氬姩鏉″搴� */
+ }
+
+ /deep/ .ant-card-body {
+ padding: 6px 24px 12px;
+ flex: 1;
+ overflow: auto;
+ }
+ }
+ }
+ }
+
+ .spinning-container {
+ height: 100%;
+ /deep/ .ant-spin-container {
+ height: 100%;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3