From e2dde7449df00d3260b3fc721dd229ea47596f56 Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期二, 16 七月 2024 10:31:47 +0800
Subject: [PATCH] 小修改

---
 src/views/dashboard/BranchFactorySignage.vue |  159 +++++++++++++++++++++++++++++++++++------------------
 1 files changed, 105 insertions(+), 54 deletions(-)

diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index 0324b20..50480b6 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -18,31 +18,11 @@
             <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>
           </div>
           <div class="support-plan-container">
-            <div class="support-plan-item" style="background:#5FE0AF">
-              <div>鏈湀涓変繚璁″垝</div>
+            <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"
+                 :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">
+              <div>{{item.planTime}}</div>
               <div class="plan-value-container">
-                <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
-                <div>鍙�</div>
-              </div>
-            </div>
-            <div class="support-plan-item" style="background:#409EFF">
-              <div>鏈湀瀹屾垚</div>
-              <div class="plan-value-container">
-                <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
-                <div>鍙�</div>
-              </div>
-            </div>
-            <div class="support-plan-item" style="background:#D6BC52">
-              <div>涓嬫湀涓変繚璁″垝</div>
-              <div class="plan-value-container">
-                <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
-                <div>鍙�</div>
-              </div>
-            </div>
-            <div class="support-plan-item" style="background:#58D9F9">
-              <div>涓嬩笅鏈堜笁淇濊鍒�</div>
-              <div class="plan-value-container">
-                <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+                <div class="plan-value">{{$data[item.planValueLabel]}}</div>
                 <div>鍙�</div>
               </div>
             </div>
@@ -62,6 +42,10 @@
           </div>
         </dv-border-box-9>
       </div>
+
+      <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
+                    :modalDataApiParams="modalDataApiParams"
+                    @closeModal="modalVisible=false"/>
     </div>
   </div>
 </template>
@@ -69,9 +53,11 @@
 <script>
   import signageApi from '@/api/signage'
   import moment from 'moment'
+  import SignageModal from './modules/SignageModal'
 
   export default {
     name: 'BranchFactorySignage',
+    components: { SignageModal },
     props: {
       productionCode: {
         type: String,
@@ -104,23 +90,54 @@
           { value: '0', name: '鍋滄満' },
           { value: '0', name: '杩愯' }
         ],
+        supportPlanList: [
+          {
+            planTime: '鏈湀涓変繚璁″垝',
+            planValueLabel: 'thisMonthMaintenancePlanNum',
+            backgroundColor: '#5FE0AF',
+            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
+          },
+          {
+            planTime: '鏈湀瀹屾垚',
+            planValueLabel: 'thisMonthMaintenanceRealNum',
+            backgroundColor: '#409EFF',
+            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
+          },
+          {
+            planTime: '涓嬫湀涓変繚璁″垝',
+            planValueLabel: 'nextMonthMaintenancePlanNum',
+            backgroundColor: '#D6BC52',
+            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
+          },
+          {
+            planTime: '涓嬩笅鏈堜笁淇濊鍒�',
+            planValueLabel: 'nextNextMonthMaintenancePlanNum',
+            backgroundColor: '#58D9F9',
+            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
+          }
+        ],
         thisMonthMaintenancePlanNum: 0,
         thisMonthMaintenanceRealNum: 0,
         nextMonthMaintenancePlanNum: 0,
         nextNextMonthMaintenancePlanNum: 0,
-        twoMaintenanceChartData: [['-', '-', '-']],
+        twoMaintenanceChartData: [],
         barChart: '',
         barChartData: [],
         doubleBarChart: '',
         doubleBarChartData: {},
+        workshopProblemChartData: [],
         maintenanceConfig: {},
-        problemConfig: {}
+        problemConfig: {},
+        modalVisible: false,
+        modalTitle: '',
+        modalDataApiUrl: '',
+        modalTableColumns: [],
+        modalDataApiParams: {}
       }
     },
     mounted() {
       window.addEventListener('resize', this.handleWindowResize)
       this.getChartDataByApi()
-      this.drawProblemChart()
     },
     beforeDestroy() {
       window.removeEventListener('resize', this.handleWindowResize)
@@ -136,6 +153,7 @@
         this.getTwoMaintenanceChartDataByApi()
         this.getBarChartDataByApi()
         this.getDoubleBarChartDataByApi()
+        this.getWorkshopProblemChartDataByApi()
       },
 
       /* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
@@ -183,9 +201,9 @@
           .then(res => {
             if (res.success && res.result) {
               this.techConditionData = [
-                { value: res.result[0].qualifiedCount, name: '鍚堟牸' },
-                { value: res.result[0].disabledCount, name: '绂佺敤' },
-                { value: res.result[0].limitedUseCount, name: '闄愮敤' }
+                { value: res.result[0].qualifiedCount, name: '鍚堟牸', technologyStatus: 'qualified' },
+                { value: res.result[0].disabledCount, name: '绂佺敤', technologyStatus: 'disabled' },
+                { value: res.result[0].limitedUseCount, name: '闄愮敤', technologyStatus: 'limitedUse' }
               ]
             }
             this.drawTechConditionChart()
@@ -205,9 +223,9 @@
           .then(res => {
             if (res.success && res.result) {
               this.warrantyMalfunctionData = [
-                { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
-                { value: res.result[0].stopCount, name: '鍋滄満' },
-                { value: res.result[0].noStopCount, name: '杩愯' }
+                { value: res.result[0].failurTotalCount, name: '鎶ヤ慨', isStop: '' },
+                { value: res.result[0].stopCount, name: '鍋滄満', isStop: '2' },
+                { value: res.result[0].noStopCount, name: '杩愯', isStop: '1' }
               ]
             }
             this.drawWarrantyMalfunctionChart()
@@ -238,7 +256,7 @@
       getTwoMaintenanceChartDataByApi() {
         signageApi.getTwoMaintenancePlanListApi(this.productionCode)
           .then(res => {
-            if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
+            if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
             this.drawMaintenanceChart()
           })
       },
@@ -274,6 +292,16 @@
             this.drawDoubleBarChart()
           })
       },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇杞﹂棿闂鍒楄〃*/
+      getWorkshopProblemChartDataByApi() {
+        signageApi.getWorkshopProblemListApi(this.productionCode)
+          .then(res => {
+            if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
+            this.drawWorkshopProblemChart()
+          })
+      },
+
 
       /* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
       drawRunningStateChart(productionId) {
@@ -434,7 +462,7 @@
             }
           },
           xAxis: {
-            name: '鍗曚綅',
+            name: '',
             nameTextStyle: {
               color: '#fff'
             },
@@ -561,7 +589,7 @@
             }
           ]
         }
-        option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
+        option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}鍒╃敤鐜嘸
         this.efficiencyChart.setOption(option, true)
         this.efficiencyChart.hideLoading()
 
@@ -640,7 +668,7 @@
               center: ['50%', '60%'],
               color: [
                 '#0FC61A',
-                '#0DAF15',
+                '#F56436',
                 '#8B8B8B'
               ],
               label: {
@@ -667,6 +695,16 @@
         }
         this.techConditionChart.setOption(option, true)
         this.techConditionChart.hideLoading()
+
+        this.techConditionChart.on('click', params => {
+          this.modalTitle = `鎶�鏈姸鎬侊紙${params.name}锛塦
+          this.modalDataApiParams = {
+            technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus,
+            productionCode: this.productionCode
+          }
+          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
+          this.modalVisible = true
+        })
       },
 
       /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
@@ -746,6 +784,16 @@
         }
         this.warrantyMalfunctionChart.setOption(option, true)
         this.warrantyMalfunctionChart.hideLoading()
+
+        this.warrantyMalfunctionChart.on('click', params => {
+          this.modalTitle = `鎶ヤ慨鏁呴殰锛�${params.name}锛塦
+          this.modalDataApiParams = {
+            isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop,
+            productionCode: this.productionCode
+          }
+          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
+          this.modalVisible = true
+        })
       },
 
       /* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -759,7 +807,7 @@
           rowNum: 1,
           data: this.twoMaintenanceChartData,
           index: true,
-          columnWidth: [100],
+          columnWidth: [100, 300, 300, 300],
           align: ['center', 'center', 'center', 'center']
         }
       },
@@ -838,7 +886,7 @@
             interval: yAxisInterval,
             axisLabel: {
               formatter: '{value}',
-              color: '#e2e9ff'
+              color: '#fff'
             },
             axisTick: {
               show: false
@@ -1055,29 +1103,31 @@
       },
 
       /* 缁樺埗闂婊氬姩琛� */
-      drawProblemChart() {
+      drawWorkshopProblemChart() {
         this.problemConfig = {
           indexHeader: '搴忓彿',
-          header: ['鏃堕棿', '闂鍐呭'],
+          header: ['闂鍐呭', '鏃堕棿'],
           headerBGC: '#86D186',
           oddRowBGC: '#7CBF7C',
           evenRowBGC: '#7CBF7C',
-          data: [
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
-            // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂']
-          ],
+          data: this.workshopProblemChartData,
           index: true,
-          columnWidth: [100, 300, 300],
+          columnWidth: [100, 300, 150],
           align: ['center']
         }
+      },
+
+      /**
+       * 鐐瑰嚮涓変繚灞曠ず鏍忓悗鎵撳紑寮圭獥
+       * @param record 鐐瑰嚮褰撳墠涓変繚淇℃伅
+       */
+      openMaintenanceModal(record) {
+        this.modalTitle = record.planTime
+        this.modalDataApiParams = {
+          productionCode: this.productionCode
+        }
+        this.modalDataApiUrl = record.apiUrl
+        this.modalVisible = true
       },
 
       /**
@@ -1142,6 +1192,7 @@
             padding: 5px 20px;
             font-size: 20px;
             margin-bottom: 10px;
+            cursor: pointer;
 
             .plan-value-container {
               display: flex;

--
Gitblit v1.9.3