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/WorkshopSectionSignage.vue | 1059 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,059 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
new file mode 100644
index 0000000..8c9094f
--- /dev/null
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -0,0 +1,1059 @@
+<template>
+ <div class="page-container">
+ <div class="content-container">
+ <div style="width: 30%" class="left-col">
+ <div class="back-nav" @click="$emit('backToLastSignage','BranchFactory')" v-if="userType>=3">
+ <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
+ </div>
+ <dv-border-box-9 style="padding: 15px">
+ <div id="tech_condition_chart" style="width:100%;height: 240px;"></div>
+ <div id="warranty_malfunction_chart" style="width:100%;height: 240px;"></div>
+ <div style="display: flex;">
+
+ <div style="flex:0.5;display: flex;flex-direction:column;align-items: center">
+ <dv-decoration-11 style="width:90%;height:60px;color: #ccc;font-size: 20px">涓変繚璁″垝</dv-decoration-11>
+ <div class="support-plan-container">
+ <div class="support-plan-item" style="background:#67C23A">
+ <div>涓変繚鏈湀璁″垝</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:#E6A23C">
+ <div>寤舵湡</div>
+ <div class="plan-value-container">
+ <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
+ <div>鍙�</div>
+ </div>
+ </div>
+ <div class="support-plan-item" style="background:#F56C6C">
+ <div>瓒呮湡</div>
+ <div class="plan-value-container">
+ <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+ <div>鍙�</div>
+ </div>
+ </div>
+ <div class="support-plan-item" style="background:#719D8E">
+ <div>涓嬫湀璁″垝</div>
+ <div class="plan-value-container">
+ <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</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>鍙�</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div style="flex:0.5;display: flex;justify-content: center">
+ <dv-decoration-11 style="width:90%;height:60px;color: #ccc;font-size: 20px">浜屼繚璁″垝</dv-decoration-11>
+ </div>
+ </div>
+ </dv-border-box-9>
+ </div>
+
+ <div style="width: 38%" class="middle-col">
+ <dv-border-box-9 style="padding: 15px">
+ <div id="running_state_chart" style="width:100%;height: 400px;"></div>
+ <div id="line_chart" style="width:100%;height: 400px;"></div>
+ </dv-border-box-9>
+ </div>
+ <div style="width: 30%">
+ <dv-border-box-9 style="padding: 15px">
+ <a-form layout="inline" @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
+ <a-form-item label="璁惧缂栧彿">
+ <!--<a-input v-model="equipmentId" size="large"></a-input>-->
+ <a-auto-complete
+ v-model="equipmentId"
+ placeholder="鍥炶溅閿煡璇�"
+ :allowClear="true"
+ size="large"
+ />
+ </a-form-item>
+ </a-form>
+ <div style="display: flex;flex-wrap: wrap">
+ <div id="gauge_chart1" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart2" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart3" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart4" style="width:50%;height: 200px;"></div>
+ </div>
+ <div id="bar_chart" style="width:100%;height: 330px;"></div>
+ </dv-border-box-9>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+ import moment from 'moment'
+
+ export default {
+ name: 'WorkshopSectionSignage',
+ props: {
+ productionCode: {
+ type: String,
+ default: ''
+ },
+ userType: {
+ type: Number
+ }
+ },
+ data() {
+ return {
+ runningStateChart: '',
+ runningStateData: [
+ { value: '0', name: '鍏虫満' },
+ { value: '0', name: '鎶ヨ' },
+ { value: '0', name: '寰呮満' },
+ { value: '0', name: '杩愯' }
+ ],
+ techConditionChart: '',
+ techConditionData: [
+ { value: '0', name: '鍚堟牸' },
+ { value: '0', name: '绂佺敤' },
+ { value: '0', name: '闄愮敤' }
+ ],
+ warrantyMalfunctionChart: '',
+ warrantyMalfunctionData: [
+ { value: '0', name: '鎶ヤ慨' },
+ { value: '0', name: '鍋滄満' },
+ { value: '0', name: '杩愯' }
+ ],
+ thisMonthMaintenancePlanNum: 0,
+ thisMonthMaintenanceRealNum: 0,
+ nextMonthMaintenancePlanNum: 0,
+ nextNextMonthMaintenancePlanNum: 0,
+ lineChart: '',
+ lineChartData: [],
+ gaugeChart1: '',
+ gaugeChart2: '',
+ gaugeChart3: '',
+ gaugeChart4: '',
+ gaugeChartData1: [],
+ gaugeChartData2: [],
+ gaugeChartData3: [],
+ gaugeChartData4: [],
+ barChart: '',
+ barChartData: [
+ {
+ name: '2640221',
+ value: 20
+ },
+ {
+ name: '2640222',
+ value: 40
+ },
+ {
+ name: '2640223',
+ value: 70
+ },
+ {
+ name: '2640224',
+ value: 30
+ },
+ {
+ name: '2640225',
+ value: 35
+ },
+ {
+ name: '2640226',
+ value: 80
+ },
+ {
+ name: '2640227',
+ value: 40
+ },
+ {
+ name: '12640220',
+ value: 60
+ },
+ {
+ name: '12640221',
+ value: 40
+ },
+ {
+ name: '12640222',
+ value: 35
+ }
+ ],
+ equipmentId: ''
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.drawCharts()
+ this.getChartDataByApi()
+ },
+ activated() {
+ console.log('瑙﹀彂activated')
+ this.handleWindowResize()
+ if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
+ if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
+ },
+ methods: {
+ getChartDataByApi() {
+ this.getTechConditionDataByApi()
+ this.getWarrantyMalfunctionDataByApi()
+ this.getRunningStateDataByApi()
+ this.getMonthMaintenanceNumByApi()
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
+ getTechConditionDataByApi() {
+ signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
+ .then(res => {
+ if (res.success) {
+ this.techConditionData = [
+ { value: res.result[0].qualifiedCount, name: '鍚堟牸' },
+ { value: res.result[0].disabledCount, name: '绂佺敤' },
+ { value: res.result[0].limitedUseCount, name: '闄愮敤' }
+ ]
+ }
+ this.drawTechConditionChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
+ getWarrantyMalfunctionDataByApi() {
+ signageApi.getReportRepairEquipmentListApi(this.productionCode)
+ .then(res => {
+ if (res.success) {
+ this.warrantyMalfunctionData = [
+ { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
+ { value: res.result[0].stopCount, name: '鍋滄満' },
+ { value: res.result[0].noStopCount, name: '杩愯' }
+ ]
+ }
+ this.drawWarrantyMalfunctionChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
+ getRunningStateDataByApi() {
+ signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
+ .then(res => {
+ if (res.success) this.runningStateData = res.result
+ this.drawRunningStateChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇涓変繚璁″垝 */
+ getMonthMaintenanceNumByApi() {
+ signageApi.getThisMonthMaintenanceListApi(this.productionCode)
+ .then(res => {
+ if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount
+ })
+ signageApi.getThisMonthMaintenanceFinishListApi(this.productionCode)
+ .then(res => {
+ if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount
+ })
+ signageApi.getNextMonthMaintenanceList(this.productionCode)
+ .then(res => {
+ if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount
+ })
+ signageApi.getNextNextMonthMaintenanceListApi(this.productionCode)
+ .then(res => {
+ if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount
+ })
+ },
+
+ /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
+ drawCharts() {
+ this.drawRunningStateChart()
+ this.drawTechConditionChart()
+ this.drawWarrantyMalfunctionChart()
+ this.drawLineChart()
+ this.drawGaugeChart()
+ this.drawBarChart()
+ },
+
+ /* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
+ drawTechConditionChart() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '鎶�鏈姸鎬�', // 涓绘爣棰樻枃鏈�
+ x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC'
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}(${params.percent}%)`
+ }
+ }
+ },
+ legend: {
+ top: 'bottom',
+ orient: 'horizontal',
+ right: 0,
+ // bottom: "0",
+ itemWidth: 14,
+ itemHeight: 14,
+ icon: 'roundRect',
+ itemGap: 15,
+ textStyle: {
+ color: 'inherit',
+ fontSize: 14,
+ padding: [0, 0, 0, 0]
+ },
+ data: ['鍚堟牸', '绂佺敤', '闄愮敤']
+ },
+ grid: {
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ // selectedMode: "single",
+ radius: ['40%', '60%'],
+ center: ['50%', '50%'],
+ color: [
+ '#0AA012',
+ '#237E48',
+ '#757160'
+ ],
+ label: {
+ position: 'outside',
+ show: true,
+ color: 'inherit',
+ // textBorderColor: 'inherit',
+ // textBorderWidth: 1,
+ fontSize: 16,
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}`
+ }
+ }
+ },
+ labelLine: {
+ show: true,
+ length2: 15,
+ length: 15
+ },
+ data: this.techConditionData
+ }
+ ]
+ }
+ this.techConditionChart.setOption(option, true)
+ },
+
+ /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
+ drawWarrantyMalfunctionChart() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '璁惧鎶ヤ慨鏁呴殰', // 涓绘爣棰樻枃鏈�
+ x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC'
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}(${params.percent}%)`
+ }
+ }
+ },
+ legend: {
+ top: 'bottom',
+ orient: 'horizontal',
+ right: 0,
+ // bottom: "0",
+ itemWidth: 14,
+ itemHeight: 14,
+ icon: 'roundRect',
+ itemGap: 15,
+ textStyle: {
+ color: 'inherit',
+ fontSize: 14,
+ padding: [0, 0, 0, 0]
+ },
+ data: ['鎶ヤ慨', '鍋滄満', '杩愯']
+ },
+ grid: {
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ // selectedMode: "single",
+ radius: ['40%', '60%'],
+ center: ['50%', '50%'],
+ color: [
+ '#00CED1',
+ '#B85B38',
+ '#A8985D'
+ ],
+ label: {
+ position: 'outside',
+ show: true,
+ color: 'inherit',
+ // textBorderColor: 'inherit',
+ // textBorderWidth: 1,
+ 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)
+ },
+
+ /* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
+ drawRunningStateChart() {
+ this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '璁惧鐘舵��', // 涓绘爣棰樻枃鏈�
+ x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC'
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}(${params.percent}%)`
+ }
+ }
+ },
+ legend: {
+ top: 'bottom',
+ orient: 'horizontal',
+ right: 0,
+ // bottom: "0",
+ itemWidth: 14,
+ itemHeight: 14,
+ icon: 'roundRect',
+ itemGap: 15,
+ textStyle: {
+ color: 'inherit',
+ fontSize: 14,
+ padding: [0, 0, 0, 0]
+ },
+ data: ['鍏虫満', '鎶ヨ', '寰呮満', '杩愯']
+ },
+ grid: {
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ // roseType: 'angle', // 鐜懓鍥�
+ // selectedMode: "single",
+ radius: ['35%', '55%'],
+ center: ['50%', '50%'],
+ color: [
+ '#686869',
+ '#AA6349',
+ '#968A5E',
+ '#5D975D'
+ ],
+ label: {
+ position: 'outside',
+ show: true,
+ color: 'inherit',
+ // textBorderColor: 'inherit',
+ // textBorderWidth: 1,
+ fontSize: 30,
+ formatter: function(params) {
+ if (params.name !== '') {
+ return `${params.name}:${params.value}`
+ }
+ }
+ },
+ labelLine: {
+ show: true,
+ length2: 20,
+ length: 30
+ },
+ data: this.runningStateData
+ }
+ ]
+ }
+ this.runningStateChart.setOption(option, true)
+ },
+
+ /* 缁樺埗鎶樼嚎鍥� */
+ drawLineChart() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ const newData = {
+ xAxis: ['3鏈�19鏃�', '3鏈�20鏃�', '3鏈�21鏃�', '3鏈�22鏃�', '3鏈�23鏃�', '3鏈�24鏃�', '3鏈�25鏃�'],
+ yAxis: [
+ {
+ name: '鍒╃敤鐜�',
+ value: [200, 600, 550, 360, 520, 520, 630, 780, 230, 420, 650, 700]
+ },
+ {
+ name: '寮�鍔ㄧ巼',
+ value: [230, 630, 440, 400, 740, 800, 600, 900, 700, 400, 700, 400]
+ },
+ {
+ name: '寮�鏈虹巼',
+ value: [900, 700, 400, 700, 800, 605, 730, 600, 700, 900, 400, 605]
+ }
+ ],
+ yAxisName: '鍓�7澶╁埄鐢ㄧ巼'
+ }
+ 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: '1%',
+ 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, 80]
+ },
+ nameGap: 30,
+ 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,
+ // dataZoom: {
+ // show: false,
+ // startValue: 0, // 浠庡ご寮�濮嬨��
+ // endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
+ // }
+ }
+ this.lineChart.setOption(option, true)
+ // if (newData.xAxis.length <= 6) return
+ // this.lineChartCarouselTime = setInterval(() => {
+ // this.barChartData.push(this.barChartData.shift())
+ // newData.xAxis.push(newData.xAxis.shift())
+ // newData.yAxis.forEach(item => item.value.push(item.value.shift()))
+ // this.$nextTick(() => {
+ // this.lineChart.setOption(option, true)
+ // })
+ // }, 3000)
+ },
+
+ /* 缁樺埗浠〃鐩樺浘琛� */
+ drawGaugeChart() {
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'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)
+ },
+
+ /* 缁樺埗鍗曟煴鍥� */
+ drawBarChart() {
+ this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ const xAisData = this.barChartData.map(item => item.name)
+ const option = {
+ height: 260,
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '涓婁釜鏈圤EE', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ // backgroundColor: 'rgba(9, 24, 48, 0.5)',
+ borderColor: 'rgba(75, 253, 238, 0.4)',
+ textStyle: {
+ // color: '#CFE3FC'
+ },
+ borderWidth: 1
+ },
+ grid: {
+ top: '15%',
+ left: '6%',
+ right: '3%'
+ },
+ xAxis: [
+ {
+ // name: '涓婁釜鏈圤EE',
+ // nameLocation: 'middle',
+ // nameGap: 40, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+ type: 'category',
+ data: xAisData,
+ axisLine: {
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisLabel: {
+ show: true, // 鏄惁鏄剧ず鍒诲害鏍囩锛岄粯璁ゆ樉绀�
+ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆�
+ // rotate: this.barChartData.length >= 5 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴�
+ inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶�
+ margin: 6 // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈
+ },
+ axisTick: {
+ show: true,
+ alignWithLabel: true
+ }
+ }],
+ yAxis: [
+ {
+ // name: '鏁伴噺',
+ // nameLocation: 'middle',
+ // nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+ position: 'left',
+ axisLabel: {
+ formatter: '{value}',
+ color: '#50729A'
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: 'rgba(255,255,255,0.12)'
+ }
+ }
+ },
+ {
+ position: 'right',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ }
+ }
+ ],
+ series: [{
+ type: 'bar',
+ data: this.barChartData,
+ barWidth: '25%',
+ itemStyle: {
+ color: '#129FC6',
+ barBorderRadius: [10, 10, 10, 10]
+ },
+ label: {
+ show: false,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'inside',
+ textStyle: {
+ color: '#50729A',
+ fontSize: 18
+ }
+ }
+ }],
+ dataZoom: {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
+ }
+ }
+ option.title.text = `${moment().subtract(1, 'months').format('M')}鏈圤EE`
+ this.barChart.setOption(option, true)
+ if (this.barChartData.length <= 6) return
+ this.barChartCarouselTime = setInterval(() => {
+ this.barChartData.push(this.barChartData.shift())
+ xAisData.push(xAisData.shift())
+ this.$nextTick(() => {
+ this.barChart.setOption(option, true)
+ })
+ }, 3000)
+ },
+
+ /**
+ * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+ * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+ */
+ handleWindowResize() {
+ if (this.techConditionChart) this.techConditionChart.resize()
+ if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
+ if (this.runningStateChart) this.runningStateChart.resize()
+ if (this.lineChart) this.lineChart.resize()
+ 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.barChart) this.barChart.resize()
+ }
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+ .page-container {
+ .page-title {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ color: #fff;
+ margin-bottom: 10px;
+
+ .workshop-nav {
+ width: 120px;
+ height: 40px;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ }
+
+ .content-container {
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+
+ .left-col {
+ .back-nav {
+ width: 100px;
+ height: 30px;
+ color: #eee;
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ cursor: pointer;
+ z-index: 9999
+ }
+
+ .support-plan-container {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ color: #fff;
+ padding-top: 5px;
+
+ .support-plan-item {
+ border-radius: 3px;
+ width: 45%;
+ padding: 5px 10px;
+ margin-bottom: 10px;
+
+ .plan-value-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .plan-value {
+ margin-right: 20px;
+ font-size: 30px;
+ color: #EAC910;
+ }
+ }
+ }
+ }
+ }
+
+ .middle-col {
+ .first-title {
+ color: #00A8AC;
+ font-size: 20px;
+ text-align: center;
+ font-weight: bold;
+ }
+
+ }
+ }
+ }
+
+ /deep/ .ant-form.ant-form-inline {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ /deep/ .ant-form .ant-form-item-label label {
+ color: #fff;
+ font-size: 18px;
+ }
+
+ /deep/ .ant-select-selection {
+ background: transparent !important;
+ }
+
+ /deep/ .ant-select-selection__clear {
+ background: transparent !important;
+ color: #fff;
+ }
+
+ /deep/ .ant-input {
+ border: 1px solid #689ACA;
+ color: #fff;
+ background: transparent !important;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3