ÎļþÃû´Ó src/views/mdc/base/DncWorkshopSignage.vue ÐÞ¸Ä |
| | |
| | | <template> |
| | | <div class="full-screen"> |
| | | <div class="container"> |
| | | <!--左侧å¾è¡¨åºå--> |
| | | <div class="left-col"> |
| | | <div class="col-content"> |
| | | <div class="content-title">ä¸å彿任å¡å®æç¾åæ¯</div> |
| | | <div style="flex:1;display: flex;"> |
| | | <div class="chart-container" id="left-col-chart1"></div> |
| | | <div class="equipment-state-container"> |
| | | <div>è®¾å¤æ»æ°ï¼{{equipmentList.length}}å°</div> |
| | | <div>大修ã项修æ°éï¼{{getEquipmentMaintainCount}}å°</div> |
| | | <div>设å¤å¼å¨çï¼{{getEquipmentOpenRate}}</div> |
| | | <div v-for="(item,index) in equipmentStateList" :key="index"> |
| | | <img :src="item.imageColor"><span>{{item.label}}ï¼{{getEquipmentStateCount(item.value)}}å°</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="server-status">æå¡å¨ç¶æï¼<span :style="{color:getServerStatusTextColor,fontWeight:'bold'}">{{this.serverStatus}}</span> |
| | | </div> |
| | | <div class="content-title">{{workshopDetails.workshopName}}#è®¾å¤æ
åµ</div> |
| | | <workshop-device-overview :equipmentList="equipmentList" :toDecimal2NoZero="toDecimal2NoZero"/> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">彿é¶ä»¶ä»»å¡å®æè¿åº¦</div> |
| | | <div class="chart-container" id="left-col-chart2"></div> |
| | | <div class="content-title">è®¾å¤æå©ç¨çè¶å¿</div> |
| | | <month-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">彿¥è®¾å¤ä»»å¡å®æè¿åº¦</div> |
| | | <div class="chart-container" id="left-col-chart3"></div> |
| | | <div class="content-title">设å¤å¨å©ç¨çè¶å¿</div> |
| | | <week-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">彿¥äº§åæ¦åµ</div> |
| | | <div class="chart-container" id="left-col-chart4"></div> |
| | | </div> |
| | | </div> |
| | | <div class="middle-col"> |
| | | <div class="navigate-container"> |
| | | <div class="navigate-item" v-for="(item,index) in navigateList" :key="index"> |
| | | <img :src="item.imageSrc" @click="navigateTo(item)"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right-col"> |
| | | <div class="col-content"> |
| | | <div class="content-title">仿¥æ¦åµ</div> |
| | | <div class="chart-container" id="right-col-chart1"></div> |
| | | <div class="content-footer-container"> |
| | | <div class="content-footer">éç¹è®¾å¤å©ç¨çï¼{{this.keyEquipmentEfficiency}}</div> |
| | | <div class="content-footer">æ£å¸¸è®¾å¤å©ç¨çï¼{{this.commonEquipmentEfficiency}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">工段设å¤å©ç¨çååè¶å¿</div> |
| | | <div class="chart-container" id="right-col-chart2"></div> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">æ¨æ¥è®¾å¤å©ç¨ç</div> |
| | | <div class="chart-container" id="right-col-chart3"></div> |
| | | <div class="content-title">è®¾å¤æ¥å©ç¨çè¶å¿</div> |
| | | <day-utilization-rate-trend :toDecimal2NoZero="toDecimal2NoZero"/> |
| | | </div> |
| | | <div class="col-content"> |
| | | <div class="content-title">è®¾å¤æ¥è¦ä¿¡æ¯</div> |
| | | <div class="chart-container" id="right-col-chart4"></div> |
| | | <device-alarm-info/> |
| | | </div> |
| | | </div> |
| | | |
| | | <!--å³ä¾§ææ½åºå--> |
| | | <div class="right-col"> |
| | | <VueDragResize |
| | | v-for="(item, index) in deviceList" |
| | | :key="item.equipmentId" |
| | | :w="item.vw" |
| | | :h="item.vh" |
| | | :x="item.coordinateLeft" |
| | | :y="item.coordinateTop" |
| | | v-on:resizing="resize($event, index)" |
| | | v-on:dragging="resize($event, index)" |
| | | :parentLimitation="true" |
| | | :parentH="1065" |
| | | :parentW="1500" |
| | | :minw="70" |
| | | :minh="70" |
| | | :isDraggable="isSwitchChecked" |
| | | :isResizable="isSwitchChecked" |
| | | :stickSize="6" |
| | | @deactivated="isShowGuideline = false" |
| | | > |
| | | <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"> |
| | | <div class="device-status"> |
| | | <div |
| | | :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/WorskhopSignage/default.png')})` }" |
| | | class="device-image" |
| | | > |
| | | <div |
| | | :style="{ backgroundImage: `url(${getCurrentDeviceStatusImage(item.equipmentStatus)})` }" |
| | | class="status-image" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | :style="{ color:workshopDetails.equipmentIdColor?workshopDetails.equipmentIdColor:'#fff',fontWeight:'bold'}"> |
| | | {{ item.equipmentId }} |
| | | </div> |
| | | </div> |
| | | </VueDragResize> |
| | | |
| | | <template v-if="isShowGuideline"> |
| | | <div class="guideline guidelineX" :style="{top:guidelineXTop+'px'}"></div> |
| | | <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px'}"></div> |
| | | </template> |
| | | |
| | | <a-form layout="inline"> |
| | | <a-form-item label="åè½å¼å
³"> |
| | | <a-switch checked-children="å¼" un-checked-children="å
³" v-model="isSwitchChecked" |
| | | :disabled="isHasResizeOrDragDevice"/> |
| | | </a-form-item> |
| | | |
| | | <a-form-item label="ä¿ååæ "> |
| | | <a-button type="primary" icon="save" @click="saveDevicePositionAndSizeByApi" |
| | | :disabled="!isHasResizeOrDragDevice">ä¿å |
| | | </a-button> |
| | | </a-form-item> |
| | | </a-form> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | import VueDragResize from 'vue-drag-resize' |
| | | import { getFileAccessHttpUrl } from '@/api/manage' |
| | | import signageApi from '@/api/signage' |
| | | import WorkshopDeviceOverview from './modules/WorkshopSignage/WorkshopDeviceOverview' |
| | | import WeekUtilizationRateTrend from './modules/WorkshopSignage/WeekUtilizationRateTrend' |
| | | import DayUtilizationRateTrend from './modules/WorkshopSignage/DayUtilizationRateTrend' |
| | | import MonthUtilizationRateTrend from './modules/WorkshopSignage/MonthUtilizationRateTrend' |
| | | import DeviceAlarmInfo from './modules/WorkshopSignage/DeviceAlarmInfo' |
| | | |
| | | export default { |
| | | name: 'DncWorkshopSignage', |
| | | components: {}, |
| | | name: 'WorkshopSignage', |
| | | components: { |
| | | DeviceAlarmInfo, |
| | | MonthUtilizationRateTrend, |
| | | DayUtilizationRateTrend, |
| | | WeekUtilizationRateTrend, |
| | | WorkshopDeviceOverview, |
| | | VueDragResize |
| | | }, |
| | | data() { |
| | | return { |
| | | workshopDetails: {}, // 车é´è¯¦ç»ä¿¡æ¯, |
| | | equipmentList: [ |
| | | { |
| | | 'equipmentID': '04ZX001', |
| | |
| | | 'productCount': null |
| | | } |
| | | ], |
| | | equipmentStateList: [ |
| | | equipmentStatusList: [ |
| | | { |
| | | label: 'æ£å¸¸è¿è¡', |
| | | value: [3, 23], |
| | | imageColor: require('@/assets/image/stateImg_green.gif') |
| | | statusImage: require('@/assets/WorskhopSignage/stateImg_green.gif') |
| | | }, |
| | | { |
| | | label: 'å¾
æº', |
| | | value: [1, 2], |
| | | imageColor: require('@/assets/image/stateImg_yellow.gif') |
| | | statusImage: require('@/assets/WorskhopSignage/stateImg_yellow.gif') |
| | | }, |
| | | { |
| | | label: 'æ¥è¦', |
| | | value: [22], |
| | | imageColor: require('@/assets/image/stateImg_red.gif') |
| | | statusImage: require('@/assets/WorskhopSignage/stateImg_red.gif') |
| | | }, |
| | | { |
| | | label: 'å
³æº', |
| | | value: [null, 0], |
| | | imageColor: require('@/assets/image/stateImg_gray.gif') |
| | | statusImage: require('@/assets/WorskhopSignage/stateImg_gray.gif') |
| | | } |
| | | ], |
| | | serverStatus: 'æ£å¸¸', |
| | | leftColChart1: '', |
| | | leftColChart2: '', |
| | | rightColChart1: '', |
| | | navigateList: [ |
| | | deviceList: [ |
| | | { |
| | | label: '151A', |
| | | navigateMethod: 0, |
| | | navigateUrl: '1712001819515367426', |
| | | imageSrc: require('../../../assets/image/MDC_151A.png') |
| | | equipmentId: '105843145', |
| | | equipmentStatus: 3, |
| | | equipmentImage: '', |
| | | vw: 112, |
| | | vh: 142, |
| | | coordinateLeft: 500, |
| | | coordinateTop: 800 |
| | | }, |
| | | { |
| | | label: 'VR', |
| | | navigateMethod: 1, |
| | | navigateUrl: 'mdc/vr', |
| | | imageSrc: require('../../../assets/image/VR_a.png') |
| | | equipmentId: '42342152', |
| | | equipmentStatus: 2, |
| | | equipmentImage: '', |
| | | vw: 112, |
| | | vh: 232, |
| | | coordinateLeft: 400, |
| | | coordinateTop: 100 |
| | | }, |
| | | { |
| | | label: 'MDC', |
| | | navigateMethod: 1, |
| | | navigateUrl: 'mdc/mdc', |
| | | imageSrc: require('../../../assets/image/MDC_a.png') |
| | | equipmentId: '5646434', |
| | | equipmentStatus: 22, |
| | | equipmentImage: '', |
| | | vw: 231, |
| | | vh: 121, |
| | | coordinateLeft: 200, |
| | | coordinateTop: 500 |
| | | }, |
| | | { |
| | | label: 'MES', |
| | | navigateMethod: 1, |
| | | navigateUrl: 'mdc/mes', |
| | | imageSrc: require('../../../assets/image/MES_a.png') |
| | | equipmentId: '213125643', |
| | | equipmentStatus: 0, |
| | | equipmentImage: '', |
| | | vw: 233, |
| | | vh: 213, |
| | | coordinateLeft: 600, |
| | | coordinateTop: 300 |
| | | } |
| | | ], |
| | | keyEquipmentEfficiency: '', |
| | | commonEquipmentEfficiency: '', |
| | | rightColChart2: '', |
| | | rightColChart3: '' |
| | | isShowGuideline: false, |
| | | guidelineXTop: 0, |
| | | guidelineYLeft: 0, |
| | | isSwitchChecked: false, |
| | | isHasResizeOrDragDevice: false |
| | | } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('resize', this.handleWindowResize) |
| | | this.getChartDataByApi() |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('resize', this.handleWindowResize) |
| | | }, |
| | | filters: {}, |
| | | computed: { |
| | | /* è·å设å¤å¤§ä¿®ã项修æ°é */ |
| | | getEquipmentMaintainCount() { |
| | | return this.equipmentList.filter(item => item.maintainType === 2).length |
| | | }, |
| | | /* è·å设å¤å¼å¨ç */ |
| | | getEquipmentOpenRate() { |
| | | const equipmentCount = this.equipmentList.length |
| | | const equipmentShutDownCount = this.equipmentList.filter(item => item.oporation === null || item.oporation == 0).length |
| | | return this.toDecimal2NoZero(((equipmentCount - equipmentShutDownCount) / equipmentCount * 100)) + '%' |
| | | }, |
| | | |
| | | getServerStatusTextColor() { |
| | | if (this.serverStatus === 'æ£å¸¸') { |
| | | return '#53da53' |
| | | } else { |
| | | return '#f00' |
| | | } |
| | | if (this.$route.params.id) { |
| | | this.getDeviceListByApi(this.$route.params.id) |
| | | this.getWorkshopDetailsByApi(this.$route.params.id) |
| | | } |
| | | }, |
| | | methods: { |
| | | getEquipmentStateCount(value) { |
| | | let stateCount = 0 |
| | | this.equipmentList.forEach(item => { |
| | | if (value.includes(item.oporation)) stateCount++ |
| | | /** |
| | | * éè¿è½¦é´Idè°ç¨æ¥å£è·å设å¤ä¿¡æ¯å表 |
| | | * @param id 车é´Id |
| | | */ |
| | | getDeviceListByApi(id) { |
| | | signageApi.getDeviceListInWorkshopSignagePageApi(id).then((res) => { |
| | | if (res.result && res.result.length > 0) { |
| | | this.deviceList = res.result |
| | | } |
| | | }) |
| | | return stateCount |
| | | }, |
| | | |
| | | getServerStatusByApi() { |
| | | |
| | | /** |
| | | * éè¿è½¦é´Idè°ç¨æ¥å£è·å车é´è¯¦ç»ä¿¡æ¯ |
| | | * @param id 车é´Id |
| | | */ |
| | | getWorkshopDetailsByApi(id) { |
| | | signageApi.getWorkshopDetailByWorkshopIdApi(id).then((res) => { |
| | | if (!res.success) return |
| | | this.workshopDetails = res.result ? res.result : {} |
| | | let workshopDrawingArea = document.querySelector('.right-col') |
| | | workshopDrawingArea.style.backgroundImage = `url(${this.getImgView(this.workshopDetails.backgroundImage)})` |
| | | }) |
| | | }, |
| | | |
| | | getChartDataByApi() { |
| | | this.getLeftColChart1DataByApi() |
| | | // this.getLeftColChart2DataByApi() |
| | | this.getRightColChart1DataByApi() |
| | | this.getRightColChart2DataByApi() |
| | | this.getRightColChart3DataByApi() |
| | | }, |
| | | |
| | | getLeftColChart1DataByApi() { |
| | | this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1')) |
| | | this.drawLeftColChart1() |
| | | }, |
| | | |
| | | getRightColChart1DataByApi() { |
| | | this.rightColChart1 = this.$echarts.init(document.getElementById('right-col-chart1')) |
| | | this.drawRightColChart1() |
| | | }, |
| | | |
| | | getRightColChart2DataByApi() { |
| | | this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2')) |
| | | this.drawRightColChart2() |
| | | }, |
| | | |
| | | getRightColChart3DataByApi() { |
| | | this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3')) |
| | | this.drawRightColChart3() |
| | | }, |
| | | |
| | | /* ç»å¶å·¦ä¾§ç¬¬ä¸ä¸ªå¾è¡¨ */ |
| | | drawLeftColChart1() { |
| | | const data = [ |
| | | { |
| | | 'number': '20102', |
| | | 'name': '2-Dæ´ä½æºå£', |
| | | 'count': 7, |
| | | 'planCount': 14, |
| | | 'rateCount': 0.5000 |
| | | }, |
| | | { |
| | | 'number': '20103', |
| | | 'name': '3-Dçç§å®¤æºå£', |
| | | 'count': 3, |
| | | 'planCount': 9, |
| | | 'rateCount': 0.3333 |
| | | }, |
| | | { |
| | | 'number': '20104', |
| | | 'name': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'count': 11, |
| | | 'planCount': 28, |
| | | 'rateCount': 0.3929 |
| | | }, |
| | | { |
| | | 'number': '20105', |
| | | 'name': '5-D CRICåå
', |
| | | 'count': 2, |
| | | 'planCount': 15, |
| | | 'rateCount': 0.1333 |
| | | }, |
| | | { |
| | | 'number': '20106', |
| | | 'name': '6-D飿åå
', |
| | | 'count': 6, |
| | | 'planCount': 15, |
| | | 'rateCount': 0.4000 |
| | | }, |
| | | { |
| | | 'number': '20107', |
| | | 'name': '7-Dæ¶¡è½®æºå£', |
| | | 'count': 6, |
| | | 'planCount': 17, |
| | | 'rateCount': 0.3529 |
| | | }, |
| | | { |
| | | 'number': '20109', |
| | | 'name': '9-Dé³å·¥åå
', |
| | | 'count': 2, |
| | | 'planCount': 18, |
| | | 'rateCount': 0.1111 |
| | | }, |
| | | { |
| | | 'number': null, |
| | | 'name': 'æ»ä»»å¡', |
| | | 'count': 37, |
| | | 'planCount': 116, |
| | | 'rateCount': 0.3190 |
| | | /** |
| | | * è®¾å¤ææ½æç¼©æ¾æ¶è§¦åäºä»¶ |
| | | * @param newRect ææ½æç¼©æ¾åç尺寸åè·ç¦» |
| | | * @param index ææ½è®¾å¤å¨æ°ç»ä¸ç䏿 |
| | | */ |
| | | resize(newRect, index) { |
| | | this.isShowGuideline = true |
| | | // å½è®¾å¤ç¼©æ¾æææ½åç¦ç¨switchç»ä»¶å¹¶å¼æ¾ä¿åæé®åè½ï¼é¿å
æ æè¯·æ±ï¼ |
| | | if (!this.isHasResizeOrDragDevice) { |
| | | if (this.deviceList[index].vw !== newRect.width || this.deviceList[index].vh !== newRect.height || this.deviceList[index].coordinateTop !== newRect.top || this.deviceList[index].coordinateLeft !== newRect.left) { |
| | | this.isHasResizeOrDragDevice = true |
| | | console.log('newRect------', newRect) |
| | | } |
| | | ] |
| | | let yAxisData1, yAxisData2, completionNum |
| | | const formatterData = [ |
| | | { |
| | | value: '', name: '宿é', itemStyle: { normal: { color: '#00923f' } }, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | fontSize: '70%', |
| | | position: 'inside', |
| | | formatter: function() { |
| | | return completionNum + '%' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | value: '', name: 'ä»»å¡é', |
| | | itemStyle: { normal: { color: '#e67817' } }, |
| | | label: { |
| | | normal: { |
| | | show: false |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | const option = { |
| | | legend: { |
| | | show: true, |
| | | bottom: 5, |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: '70%' |
| | | }, |
| | | itemWidth: 12, |
| | | itemHeight: 8, |
| | | selectedMode: false, |
| | | formatter: function(name) { |
| | | var target |
| | | for (var i = 0, l = formatterData.length; i < l; i++) { |
| | | if (formatterData[i].name == name) { |
| | | target = formatterData[i].value |
| | | } |
| | | } |
| | | return name + ' ' + target |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'ç±»ç®', |
| | | type: 'pie', |
| | | radius: '60%', |
| | | center: ['50%', '40%'], |
| | | hoverAnimation: false, |
| | | data: [ |
| | | { |
| | | value: 0, name: '宿é', itemStyle: { normal: { color: '#00923f' } }, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | fontSize: '70%', |
| | | position: 'inside', |
| | | textBorderWidth: 0, |
| | | formatter: function() { |
| | | return completionNum + '%' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | value: 100, name: 'ä»»å¡é', |
| | | itemStyle: { normal: { color: '#e67817' } }, |
| | | label: { |
| | | normal: { |
| | | show: false |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | labelLine: { |
| | | normal: { |
| | | show: false |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | emphasis: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | data.forEach(item => { |
| | | if (item.name === 'æ»ä»»å¡' && item.rateCount !== null) { |
| | | yAxisData1 = this.toDecimal2NoZero(item.rateCount * 100) |
| | | yAxisData2 = 100 - this.toDecimal2NoZero(item.rateCount * 100) |
| | | completionNum = yAxisData1 |
| | | formatterData[0].value = item.count |
| | | formatterData[1].value = item.planCount |
| | | } |
| | | }) |
| | | option.series[0].data[0].value = yAxisData1 |
| | | option.series[0].data[1].value = yAxisData2 |
| | | this.leftColChart1.setOption(option, true) |
| | | // this.isHasResizeOrDragDevice = true |
| | | this.deviceList[index].vw = newRect.width |
| | | this.deviceList[index].vh = newRect.height |
| | | this.deviceList[index].coordinateTop = newRect.top |
| | | this.deviceList[index].coordinateLeft = newRect.left |
| | | this.guidelineXTop = newRect.top + newRect.height / 2 |
| | | this.guidelineYLeft = newRect.left + newRect.width / 2 |
| | | }, |
| | | |
| | | /* ç»å¶å³ä¾§ç¬¬ä¸ä¸ªå¾è¡¨ */ |
| | | drawRightColChart1() { |
| | | const data = [ |
| | | { |
| | | 'number': null, |
| | | 'name': 'å©ç¨ç', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': null, |
| | | 'name': '弿ºç', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': null, |
| | | 'name': 'éç¹è®¾å¤å©ç¨ç', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': null, |
| | | 'name': 'æ£å¸¸è®¾å¤å©ç¨ç', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | } |
| | | ] |
| | | const yAxisData = [] |
| | | const option = { |
| | | radar: { |
| | | center: ['50%', '55%'], |
| | | indicator: [{ |
| | | name: '设å¤å©ç¨ç', |
| | | num: '', |
| | | max: 100 |
| | | }, { |
| | | name: '设å¤å¼æºç', |
| | | num: '', |
| | | max: 100 |
| | | }, { |
| | | name: '计å宿ç', |
| | | num: '', |
| | | max: 100 |
| | | }], |
| | | radius: '60%', |
| | | splitNumber: 1, |
| | | shape: 'circle', |
| | | nameGap: 10, |
| | | name: { |
| | | textStyle: { |
| | | color: '#fff', |
| | | fontSize: '65%' |
| | | }, |
| | | formatter: function(value, indicator) { |
| | | return value + ' ' + indicator.num + '%' |
| | | |
| | | } |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: 'rgb(90,177,239)', |
| | | type: 'dotted', |
| | | width: 2 |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: 'rgb(90,177,239)', |
| | | type: 'dotted' |
| | | } |
| | | }, |
| | | zlevel: 23 |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | center: ['50%', '55%'], |
| | | radius: ['70%', '65%'], |
| | | hoverAnimation: false, |
| | | label: { |
| | | normal: { |
| | | position: 'center' |
| | | } |
| | | }, |
| | | data: [{ |
| | | value: 1000, |
| | | tooltip: { |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: 'rgba(30,177,239,0.6)' |
| | | } |
| | | } |
| | | }] |
| | | }, |
| | | |
| | | { |
| | | name: 'æ°æ®æ¾ç¤º', |
| | | type: 'radar', |
| | | lineStyle: { |
| | | normal: { |
| | | width: 0.1, |
| | | opacity: 0.1 |
| | | } |
| | | }, |
| | | data: [ |
| | | [0, 0, 0] |
| | | ], |
| | | symbolSize: 8, |
| | | itemStyle: { |
| | | color: '#ffc000', |
| | | borderColor: '#ffc000' |
| | | }, |
| | | areaStyle: { |
| | | normal: { |
| | | color: 'rgba(90,177,239,0.8)', |
| | | opacity: 0.85 |
| | | } |
| | | }, |
| | | label: { |
| | | normal: { |
| | | show: false, |
| | | position: 'top', |
| | | formatter: '{c}%' |
| | | } |
| | | }, |
| | | zlevel: 21 |
| | | } |
| | | |
| | | ] |
| | | } |
| | | data.forEach((item, index) => { |
| | | if (item.name == 'éç¹è®¾å¤å©ç¨ç') { |
| | | this.keyEquipmentEfficiency = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)) + '%' |
| | | } else if (item.name == 'æ£å¸¸è®¾å¤å©ç¨ç') { |
| | | this.commonEquipmentEfficiency = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)) + '%' |
| | | } else { |
| | | yAxisData.push(parseFloat((item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)))) |
| | | option.radar.indicator[index].num = (item.count * 100) > 100 ? 100 : ((item.count * 100).toFixed(2)) |
| | | /** |
| | | * ç¹å»ä¿åæé®è°ç¨æ¥å£ä¿åææ½åçä½ç½®ä¸è®¾å¤å¾æ 尺寸 |
| | | */ |
| | | saveDevicePositionAndSizeByApi() { |
| | | signageApi.saveDevicePositionAndSizeApi(this.deviceList).then((res) => { |
| | | if (res.code === 200) { |
| | | this.$notification.success({ |
| | | message: 'æ¶æ¯', |
| | | description: res.message |
| | | }) |
| | | this.isSwitchChecked = this.isHasResizeOrDragDevice = false |
| | | this.getDeviceListByApi(this.$route.params.id) |
| | | } |
| | | }) |
| | | const data2 = { 'number': null, 'name': '宿ç', 'count': 0.6523, 'planCount': null, 'rateCount': null } |
| | | yAxisData.push(parseFloat((data2.count * 100) > 100 ? 100 : ((data2.count * 100).toFixed(2)))) |
| | | option.radar.indicator[2].num = (data2.count * 100) > 100 ? 100 : ((data2.count * 100).toFixed(2)) |
| | | option.series[1].data[0] = yAxisData |
| | | this.rightColChart1.setOption(option, true) |
| | | }, |
| | | |
| | | /* ç»å¶å³ä¾§ç¬¬äºä¸ªå¾è¡¨ */ |
| | | drawRightColChart2() { |
| | | const data = [ |
| | | { |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'fullName': '1-Dç¹ç§å·¥èºåå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014831', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014820', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014809', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014798', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014787', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014776', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014765', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_1', |
| | | 'beltlineName': '1-Dç¹ç§å·¥èº', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:00' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'fullName': '2-Dæ´ä½æºå£åå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014833', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014822', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014811', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014800', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014789', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014778', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014767', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_2', |
| | | 'beltlineName': '2-Dæ´ä½æºå£', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'fullName': '3-Dçç§å®¤æºå£åå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014834', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014823', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014812', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014801', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014790', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014779', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014768', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_3', |
| | | 'beltlineName': '3-Dçç§å®¤æºå£', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'fullName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014835', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014824', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014813', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014802', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014791', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014780', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014769', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_4', |
| | | 'beltlineName': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.1333, |
| | | 'processingLong': 11520.0000, |
| | | 'openingLong': 11520.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'fullName': '5-D CRICåå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014836', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014825', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014814', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014803', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014792', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014781', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014770', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_5', |
| | | 'beltlineName': '5-D CRICåå
', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'fullName': '6-D飿åå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014837', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014826', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014815', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014804', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014793', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014782', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014771', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_6', |
| | | 'beltlineName': '6-D飿åå
', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0667, |
| | | 'processingLong': 5760.0000, |
| | | 'openingLong': 5760.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'fullName': '7-Dæ¶¡è½®æºå£åå
', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014838', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014827', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014816', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014805', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014794', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014783', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014772', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_7', |
| | | 'beltlineName': '7-Dæ¶¡è½®æºå£', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': null, |
| | | 'processingLong': null, |
| | | 'openingLong': null, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'fullName': '8-Dç§ç 工段', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014839', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014828', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014817', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014806', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014795', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014784', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014773', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_8', |
| | | 'beltlineName': '8-Dç§ç 工段', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.2000, |
| | | 'processingLong': 17280.0000, |
| | | 'openingLong': 17280.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'fullName': 'ç产室', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014840', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014829', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014818', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014807', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014796', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014785', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014774', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_9', |
| | | 'beltlineName': 'ç产室', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'fullName': 'JD-2ååæºå ', |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014832', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014821', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014810', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014799', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014788', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014777', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014766', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'A_10', |
| | | 'beltlineName': 'JD-2ååæºå ', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0000, |
| | | 'processingLong': 0.0000, |
| | | 'openingLong': 0.0000, |
| | | 'collectDate': '2023-10-05 00:25:00' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'fullName': null, |
| | | 'list': [ |
| | | { |
| | | 'code': '000000014841', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-09-28', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014830', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-09-29', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014819', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-09-30', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014808', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-10-01', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014797', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-10-02', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014786', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-10-03', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | }, |
| | | { |
| | | 'code': '000000014775', |
| | | 'factoryID': 'A', |
| | | 'beltlineID': 'æ»å', |
| | | 'beltlineName': 'æ»å', |
| | | 'dayTime': '2023-10-04', |
| | | 'lineRate': 0.0400, |
| | | 'processingLong': 3456.0000, |
| | | 'openingLong': 3456.0000, |
| | | 'collectDate': '2023-10-05 00:25:01' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | const seriesArr = [] |
| | | const xAxisData = [] |
| | | const option = { |
| | | color: ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035'], |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | textStyle: { |
| | | fontSize: '60%' |
| | | } |
| | | }, |
| | | legend: { |
| | | //type:'scroll', |
| | | show: false, |
| | | width: '100%', |
| | | height: 8, |
| | | itemWidth: 12, |
| | | itemGap: 5, |
| | | itemHeight: 10, |
| | | textStyle: { |
| | | fontSize: '0%', |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '1%', |
| | | right: '5%', |
| | | bottom: '1%', |
| | | top: '5%', |
| | | containLabel: true |
| | | }, |
| | | 'dataZoom': [ |
| | | |
| | | { |
| | | 'type': 'inside', |
| | | 'show': true, |
| | | 'xAxisIndex': [ |
| | | 0 |
| | | ], |
| | | 'start': 0, |
| | | 'end': 100 |
| | | } |
| | | ], |
| | | xAxis: { |
| | | type: 'category', |
| | | name: '', |
| | | // min:-35, |
| | | // boundaryGap: false, |
| | | data: [], |
| | | axisLabel: { |
| | | color: '#fff', |
| | | rotate: 45, |
| | | fontSize: '55%' |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '', |
| | | axisLabel: { |
| | | formatter: '{value} %', |
| | | color: '#fff', |
| | | fontSize: '70%' |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | splitLine: { |
| | | show: false |
| | | } |
| | | }, |
| | | series: [] |
| | | } |
| | | data.forEach(item1 => { |
| | | const dataArr = [] |
| | | item1.list.forEach(item2 => { |
| | | dataArr.push({ |
| | | value: this.toDecimal2NoZero(item2.lineRate * 100), |
| | | hostType: (item2.dayTime == null ? '' : item2.dayTime) |
| | | }) |
| | | xAxisData.push(item2.dayTime == null ? '' : item2.dayTime.slice(5)) |
| | | }) |
| | | if (item1.beltlineName == 'æ»å') { |
| | | seriesArr.push({ |
| | | name: item1.beltlineName, |
| | | type: 'line', |
| | | lineStyle: { width: 4, color: '#9cff45' }, |
| | | itemStyle: { color: '#50ff45' }, |
| | | symbol: 'circle', |
| | | data: dataArr |
| | | }) |
| | | } else { |
| | | seriesArr.push({ |
| | | name: item1.fullName, |
| | | type: 'line', |
| | | lineStyle: { width: 2 }, |
| | | symbol: 'circle', |
| | | data: dataArr |
| | | }) |
| | | } |
| | | }) |
| | | option.xAxis.data = Array.from(new Set(xAxisData)) |
| | | option.series = seriesArr |
| | | this.rightColChart2.setOption(option, true) |
| | | }, |
| | | |
| | | /* ç»å¶å³ä¾§ç¬¬ä¸ä¸ªå¾è¡¨ */ |
| | | drawRightColChart3() { |
| | | const data = [ |
| | | { |
| | | 'number': 'A_1', |
| | | 'name': '1-Dç¹ç§å·¥èº', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_2', |
| | | 'name': '2-Dæ´ä½æºå£', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_3', |
| | | 'name': '3-Dçç§å®¤æºå£', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_4', |
| | | 'name': '4-Dçæ¥æºå£å·¥æ®µ', |
| | | 'count': 0.1333, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_5', |
| | | 'name': '5-D CRICåå
', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_6', |
| | | 'name': '6-D飿åå
', |
| | | 'count': 0.0667, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_7', |
| | | 'name': '7-Dæ¶¡è½®æºå£', |
| | | 'count': 0, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_8', |
| | | 'name': '8-Dç§ç 工段', |
| | | 'count': 0.2000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_9', |
| | | 'name': 'ç产室', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | }, |
| | | { |
| | | 'number': 'A_10', |
| | | 'name': 'JD-2ååæºå ', |
| | | 'count': 0.0000, |
| | | 'planCount': null, |
| | | 'rateCount': null |
| | | } |
| | | ] |
| | | const xAxisData = [] |
| | | const seriesData = [] |
| | | const option = { |
| | | tooltip: { |
| | | show: true, |
| | | trigger: 'item', |
| | | formatter: params => `${params.name}ï¼${params.value}%` |
| | | }, |
| | | legend: { |
| | | show: false, |
| | | data: [], |
| | | itemWidth: 12, |
| | | itemHeight: 12, |
| | | textStyle: { //å¾ä¾æåçæ ·å¼ |
| | | //fontSize:14, |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '-3%', |
| | | top: '5%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: [], |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | color: '#fff', |
| | | rotate: 45, |
| | | fontSize: '55%' |
| | | } |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | data: [], |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | formatter: '{value} %', |
| | | color: '#fff', |
| | | fontSize: '70%' |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: '#626262' |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | dataZoom: [ |
| | | { |
| | | type: 'inside', |
| | | show: true, |
| | | xAxisIndex: [0], |
| | | start: 0, |
| | | end: 100 |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'å©ç¨ç', |
| | | type: 'bar', |
| | | barWidth: '50%',//æ±å¾å®½åº¦ |
| | | data: [], |
| | | label: { |
| | | show: true, |
| | | position: 'inside', |
| | | padding: [1, 2], |
| | | fontSize: '60%', |
| | | color: '#fff', |
| | | formatter: '{c}%', |
| | | backgroundColor: '#4fb327', |
| | | shadowColor: '#153e04', |
| | | shadowBlur: 5, |
| | | shadowOffsetX: 3, |
| | | shadowOffsetY: 5, |
| | | borderRadius: 5 |
| | | }, |
| | | //barCategoryGap:'180%', |
| | | itemStyle: { |
| | | normal: { |
| | | barBorderRadius: '', |
| | | color: function(params) { |
| | | const colorList = [ |
| | | //1-Dç¹ç§å·¥èºåå
|
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#9cc4f6' }, |
| | | { offset: 1, color: '#538dd6' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffffa2' }, |
| | | { offset: 1, color: '#ffff01' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#97fcc5' }, |
| | | { offset: 1, color: '#0bae8d' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffbc85' }, |
| | | { offset: 1, color: '#e26c0a' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#fb78ba' }, |
| | | { offset: 1, color: '#8f0149' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //ç¯ä»¶åå
|
| | | { offset: 0, color: '#d297ff' }, |
| | | { offset: 1, color: '#7030a0' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffe491' }, |
| | | { offset: 1, color: '#8f6c00' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffb6b9' }, |
| | | { offset: 1, color: '#fd4c53' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#92cbba' }, |
| | | { offset: 1, color: '#18a387' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ff5b62' }, |
| | | { offset: 1, color: '#a02100' } |
| | | ] |
| | | )/*,new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | {offset: 0, color: '#bbbcff'}, |
| | | {offset: 1, color: '#04078e'} |
| | | ] |
| | | )*/, new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#b5d5e3' }, |
| | | { offset: 1, color: '#1b8bd0' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //ä¸å°æºå£åå
|
| | | { offset: 0, color: '#ebd3ff' }, |
| | | { offset: 1, color: '#e889ff' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#D69123' }, |
| | | { offset: 1, color: '#a16900' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //ä½å导å |
| | | { offset: 0, color: '#d588c8' }, |
| | | { offset: 1, color: '#9545AE' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //ä½åå¶ç 1 4 |
| | | { offset: 0, color: '#97abd6' }, |
| | | { offset: 1, color: '#6268b2' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#d7dab2' }, |
| | | { offset: 1, color: '#b8aa15' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#e9c9b0' }, |
| | | { offset: 1, color: '#D9646A' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#a4e3d6' }, |
| | | { offset: 1, color: '#01A55E' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | |
| | | { offset: 0, color: '#2052b1' }, |
| | | { offset: 1, color: '#002b73' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //çä»¶åå
|
| | | { offset: 0, color: '#3e71e2' }, |
| | | { offset: 1, color: '#0042c8' } |
| | | ] |
| | | ), new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | //ç»æä»¶åå
|
| | | { offset: 0, color: '#99d6cf' }, |
| | | { offset: 1, color: '#21bf90' } |
| | | ] |
| | | ) |
| | | , new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | // 7-D |
| | | { offset: 0, color: '#99d6cf' }, |
| | | { offset: 1, color: '#0ad0bb' } |
| | | ] |
| | | ) |
| | | , new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#FF9297' }, |
| | | { offset: 1, color: '#FF9297' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#fb78ba' }, |
| | | { offset: 1, color: '#ff77dc' } |
| | | ] |
| | | ), |
| | | //ä¸å |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#9cc4f6' }, |
| | | { offset: 1, color: '#538dd6' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffffa2' }, |
| | | { offset: 1, color: '#ffff01' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#0bae8d' }, |
| | | { offset: 1, color: '#0bae8d' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#ffbc85' }, |
| | | { offset: 1, color: '#e26c0a' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#97abd6' }, |
| | | { offset: 1, color: '#842cb2' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#99d6cf' }, |
| | | { offset: 1, color: '#0ad0bb' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#FF9297' }, |
| | | { offset: 1, color: '#FF9297' } |
| | | ] |
| | | ), |
| | | new echarts.graphic.LinearGradient( |
| | | 0, 0, 1, 0, |
| | | [ |
| | | { offset: 0, color: '#fb78ba' }, |
| | | { offset: 1, color: '#ff77dc' } |
| | | ] |
| | | ) |
| | | ] |
| | | if (params.name == '1-Dç¹ç§å·¥èº' || params.name == 'åæ°æºä¸' || params.name == '1-Dç¹ç§å·¥èºåå
') { |
| | | return colorList[24] |
| | | } |
| | | if (params.name == '2-Dæ´ä½æºå£' || params.name == '2-Dæ´ä½æºå£åå
') { |
| | | return colorList[25] |
| | | } |
| | | if (params.name == '3-Dçç§å®¤æºå£' || params.name == 'çç§å®¤æºå£' || params.name == '3-Dåæ°æºæºå£åå
' || params.name == '3-Dåæ°æºæºå£') { |
| | | return colorList[26] |
| | | } |
| | | if (params.name == '4-Dçæ¥æºå£å·¥æ®µ' || params.name == 'ä¸å·¥æ®µ' || params.name == 'æ¯æ¶å°ç¯ä»¶åå
' || params.name == '4-Dçæ¥æºå£åå
') { |
| | | return colorList[27] |
| | | } |
| | | if (params.name == '5-D CRICåå
' || params.name == '10-Dé¨ä»¶è£
é
åå
') { |
| | | return colorList[4] |
| | | } |
| | | if (params.name == '6-D飿åå
' || params.name == '6-D飿æºå£åå
') { |
| | | return colorList[28] |
| | | } |
| | | if (params.name == '7-Dæ¶¡è½®æºå£' || params.name == '7-Dæ¶¡è½®æºå£åå
') { |
| | | return colorList[29] |
| | | } |
| | | if (params.name == '8-Dç§ç 工段' || params.name == 'ç§ç 工段' || params.name == '8-Dç§ç åå
') { |
| | | return colorList[30] |
| | | } |
| | | if (params.name == '10-Dé¨ä»¶è£
é
' || params.name == '10-Dé¨ä»¶è£
é
åå
') { |
| | | return colorList[31] |
| | | } |
| | | if (params.name == 'JD-2ååæºå ' || params.name == 'ååæºå 工段' || params.name == 'å工段') { |
| | | return colorList[8] |
| | | } |
| | | if (params.name == '10-Dç产室' || params.name == 'IGVå¶ç') { |
| | | return colorList[9] |
| | | } |
| | | |
| | | if (params.name == 'äºå·¥æ®µ') { |
| | | return colorList[10] |
| | | } |
| | | if (params.name == 'å
工段' || params.name == 'ä¸å°æºå£åå
') { |
| | | return colorList[11] |
| | | } |
| | | if (params.name == 'æ¶¡è½®å¶ç') { |
| | | return colorList[12] |
| | | } |
| | | if (params.name == 'ä½å导å') { |
| | | return colorList[13] |
| | | } |
| | | if (params.name == 'ä½åå¶ç') { |
| | | return colorList[14] |
| | | } |
| | | if (params.name == '导åå¶ç') { |
| | | return colorList[15] |
| | | } |
| | | if (params.name == 'åæ°æºäº') { |
| | | return colorList[16] |
| | | } |
| | | if (params.name == 'æ´æµä¸') { |
| | | return colorList[17] |
| | | } |
| | | if (params.name == 'æ´æµäº') { |
| | | return colorList[19] |
| | | } |
| | | if (params.name == 'ä¸å·¥æ®µ' || params.name == 'çä»¶åå
') { |
| | | return colorList[19] |
| | | } |
| | | if (params.name == 'äºå·¥æ®µ' || params.name == 'ç»æä»¶åå
') { |
| | | return colorList[20] |
| | | } |
| | | if (params.name == 'ä¸å·¥æ®µ' || params.name == 'ç¯ä»¶åå
') { |
| | | return colorList[5] |
| | | } |
| | | // build a color map as your need. |
| | | |
| | | //return colorList[params.dataIndex] |
| | | } |
| | | }, |
| | | emphasis: { |
| | | barBorderRadius: 13, |
| | | shadowBlur: 18, |
| | | shadowColor: 'rgba(218,170, 58, 0.8)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | data.forEach(item => { |
| | | if (item.number != 'A_9') { |
| | | xAxisData.push(item.name == null ? '' : item.name) |
| | | seriesData.push({ |
| | | value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))), |
| | | hostType: (item.number == null ? '' : item.number) |
| | | }) |
| | | } |
| | | }) |
| | | option.xAxis[0].data = xAxisData |
| | | option.series[0].data = seriesData |
| | | this.rightColChart3.setOption(option, true) |
| | | }, |
| | | |
| | | //ä¿ç两ä½å°æ° |
| | | toDecimal2NoZero(x) { |
| | | const f = Math.round(x * 100) / 100 |
| | | const s = f.toString() |
| | | return s |
| | | }, |
| | | |
| | | navigateTo(record) { |
| | | if (!record.navigateMethod) { |
| | | this.$router.push(`/DncWorkshopSignage/${record.navigateUrl}`) |
| | | } else { |
| | | const url = this.$router.resolve(`${record.navigateUrl}/${id}`).href |
| | | window.open(url, '_blank') |
| | | } |
| | | return f.toString() |
| | | }, |
| | | |
| | | /** |
| | | * çªå£å°ºå¯¸ååæ¶è§¦å |
| | | * è°æ´å¾è¡¨å°ºå¯¸ä»¥éåºå辨ç |
| | | * å¾çé¢è§ |
| | | * @param text å¾çå°å |
| | | */ |
| | | handleWindowResize() { |
| | | if (this.leftColChart1) this.leftColChart1.resize() |
| | | if (this.rightColChart1) this.rightColChart1.resize() |
| | | if (this.rightColChart2) this.rightColChart2.resize() |
| | | if (this.rightColChart3) this.rightColChart3.resize() |
| | | getImgView(text) { |
| | | if (text && text.indexOf(',') > 0) { |
| | | text = text.substring(0, text.indexOf(',')) |
| | | } |
| | | return getFileAccessHttpUrl(text) |
| | | }, |
| | | |
| | | getCurrentDeviceStatusImage(status) { |
| | | const currentStatus = this.equipmentStatusList.find(item => item.value.includes(status)) |
| | | return currentStatus.statusImage |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | <style lang="less"> |
| | | .full-screen { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 1080px; |
| | | background-color: #000; |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | overflow: auto; |
| | | |
| | | .middle-col { |
| | | position: relative; |
| | | width: 67%; |
| | | height: 100%; |
| | | border: 0.1vw solid #0104AB; |
| | | background-image: url("../../../assets/workshopLayout3.png"); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | |
| | | .navigate-container { |
| | | position: absolute; |
| | | top: 1.5%; |
| | | left: 1%; |
| | | |
| | | .navigate-item { |
| | | margin-top: 6%; |
| | | |
| | | img { |
| | | width: 28%; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .left-col, .right-col { |
| | | width: 16%; |
| | | .left-col { |
| | | flex: 1; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | |
| | | .col-content { |
| | | width: 100%; |
| | | height: 24.25%; |
| | | border: 0.1vw solid #0104AB; |
| | | height: 19.5%; |
| | | border: 0.1vw solid #666; |
| | | color: #fff; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .content-title { |
| | | font-size: 0.9vw; |
| | | padding-left: 5%; |
| | | padding: 1% 5%; |
| | | } |
| | | |
| | | .content-footer-container { |
| | |
| | | height: 100% !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .equipment-state-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-evenly; |
| | | width: 50%; |
| | | font-size: 0.6vw; |
| | | .right-col { |
| | | position: relative; |
| | | width: 1500px; |
| | | height: 1065px; |
| | | margin-left: 0.5%; |
| | | /*background-image: url("../../../assets/WorskhopSignage/103.png");*/ |
| | | background-color: #000; |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | overflow: hidden; |
| | | |
| | | img { |
| | | width: 10%; |
| | | margin-right: 5%; |
| | | } |
| | | .single-device { |
| | | position: absolute; |
| | | border: 1px solid transparent; |
| | | padding: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | cursor: default; |
| | | |
| | | &:active { |
| | | border: 1px solid #1890ff; |
| | | } |
| | | |
| | | .server-status { |
| | | font-size: 0.8vw; |
| | | padding-left: 10%; |
| | | height: 12%; |
| | | .device-status { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | -webkit-align-items: flex-end; |
| | | -moz-align-items: flex-end; |
| | | -ms-align-items: flex-end; |
| | | |
| | | .device-image { |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | |
| | | .status-image { |
| | | position: absolute; |
| | | top: 25%; |
| | | left: 25%; |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | width: 50%; |
| | | height: 50%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .guideline { |
| | | position: absolute; |
| | | border: 1px dashed #fff; |
| | | } |
| | | |
| | | .guidelineX { |
| | | width: 9999px; |
| | | left: 0; |
| | | } |
| | | |
| | | .guidelineY { |
| | | top: 0; |
| | | height: 9999px; |
| | | } |
| | | |
| | | form { |
| | | position: absolute; |
| | | right: 0; |
| | | bottom: 0; |
| | | |
| | | label { |
| | | color: #fff; |
| | | } |
| | | |
| | | .ant-switch { |
| | | background-color: #999; |
| | | } |
| | | |
| | | .ant-switch-checked { |
| | | background-color: #1890FF; |
| | | } |
| | | } |
| | | } |