430/vue_mdc_430_new.git

			@@ -14,18 +14,52 @@
			</a-select>
			</a-form-item>
			</a-col>
			<a-col :md="6" :sm="6">
			<a-form-item label="时间">
			<a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/>
			<a-col :md="4" :sm="4">
			<a-form-item label="驱动类型">
			<a-auto-complete
			v-model="queryParam.driveType"
			:data-source="driveTypeList"
			placeholder="请选择驱动类型"
			:filter-option="filterOption"
			:allowClear="true"
			/>
			</a-form-item>
			</a-col>
			<a-col :md="14" :sm="14" style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;">
			<a-space>
			<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
			<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
			<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>
			</a-space>
			<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;margin-left: 24px">
			<a-col :md="6" :sm="6">
			<a-form-item label="时间">
			<a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates" :allowClear="false"/>
			</a-form-item>
			</a-col>
			<a-col :md="4" :sm="4" :xs="4">
			<a-form-item label="设备级别">
			<j-dict-select-tag placeholder="请选择设备级别" dictCode="device_level" v-model="queryParam.deviceLevel"
			allow-clear/>
			</a-form-item>
			</a-col>
			<a-col :md="4" :sm="4" :xs="4">
			<a-form-item label="设备种类">
			<j-dict-select-tag placeholder="请选择设备种类" dictCode="device_category"
			v-model="queryParam.deviceCategory"
			allow-clear/>
			</a-form-item>
			</a-col>
			</a-row>
			<a-row :gutter="24" type="flex" align="middle">
			<a-col :md="24" :sm="24" :xs="24"
			style="display: flex;justify-content: space-between;align-items: flex-start">
			<div>
			<a-space style="margin-right: 20px">
			<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
			<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
			<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>
			<a-button type="primary" icon="printer" v-print="'#EfficiencyPO'"
			v-has="'EfficiencyPO:print'">打印
			</a-button>
			</a-space>
			<a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
			@change="efficiencyOptionsOnChange"/>
			</div>
			<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
			<tr>
			<td v-for="(item, index) in identifying">{{item.title}}</td>
			</tr>
			@@ -33,41 +67,19 @@
			<td style="text-align:center;" v-for="(item, index) in identifying">
			<div class="identifyingclass" :style="{background: item.color}"></div>
			</td>
			<!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>-->
			<!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>-->
			</tr>
			</table>
			</a-col>
			</a-row>
			<a-row :gutter="24">
			<a-col :md="15" :sm="15">
			<a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
			@change="efficiencyOptionsOnChange"/>
			</a-col>
			</a-row>
			</a-form>
			</div>
			<!--<div style="width: 530px;position: absolute;top: 0; right:1.5%;">-->
			<!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">-->
			<!--<tr>-->
			<!--<td v-for="(item, index) in identifying">{{item.title}}</td>-->
			<!--</tr>-->
			<!--<tr>-->
			<!--<td style="text-align:center;" v-for="(item, index) in identifying">-->
			<!--<div class="identifyingclass" :style="{background: item.color}"></div>-->
			<!--</td>-->
			<!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>-->
			<!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>-->
			<!--</tr>-->
			<!--</table>-->
			<!--</div>-->
			<a-spin :spinning="spinning">
			<div class="container" id="EfficiencyPO" style="margin-top: 20px;" >
			<div class="table2">
			<table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap" v-if="dataList.length>0">
			<thead>
			<tr class="thead fixed equipname">
			<th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">公司</th>
			<th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">公司</th>
			<th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">车间</th>
			<th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">工段</th>
			<th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备编号</th>
			@@ -80,7 +92,7 @@
			</tr>
			<tr class="thead notfixed gudingth">
			<template v-for="(tableHead, index) in tableHeads">
			<th>开动率(%)</th>
			<th v-if="checkedList.indexOf('lyl') > -1">开动率(%)</th>
			<th v-if="checkedList.indexOf('kjl') > -1">开机率(%)</th>
			<th v-if="checkedList.indexOf('kjsj') > -1">开机时间(小时)</th>
			<th v-if="checkedList.indexOf('jgsj') > -1">加工时间(小时)</th>
			@@ -115,9 +127,8 @@
			<template v-else>
			<td colspan="6" class="tdgu kaitou">{{item.level1}}</td>
			</template>
			<!--<td>{{item.tierType}}</td>-->
			<template v-for="(tableHead, index) in item.dataList">
			<td :style="{background:tableHead.color }">{{tableHead.startRate \| numFilter}}</td>
			<td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1">{{tableHead.startRate \| numFilter}}</td>
			<td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1">
			{{tableHead.openRate \| numFilter}}
			</td>
			@@ -150,6 +161,8 @@
			import $ from 'jquery'
			import '@/components/table2excel/table2excel'
			import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
			import api from '@/api/mdc'

			export default {
			name: 'EfficiencyPOList',
			components: {},
			@@ -164,6 +177,7 @@
			queryParamEquip:{},
			queryParamPeople:{},
			identifying: [],
			driveTypeList:[],
			efficiencyOptions: [
			{ label: '开动率', value: 'lyl' },
			{ label: '开机率', value: 'kjl' },
			@@ -192,6 +206,11 @@
			this.queryParam.typeTree = "1"
			this.loadData()
			this.queryGroup()
			this.getDriveTypeByApi()
			},
			mounted() {
			window.addEventListener('resize', this.handleWindowResize)
			this.handleWindowResize()
			},
			watch: {
			Type(valmath){
			@@ -389,15 +408,15 @@
			if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset()
			},
			efficiencyOptionsOnChange(checkedList) {
			let index = checkedList.indexOf('lyl')
			if (index < 0) {
			// this.$message.warn('不能取消查询利用率')
			this.$notification.warning({
			message:'消息',
			description:"不能取消查询利用率"
			})
			return false
			}
			// let index = checkedList.indexOf('lyl')
			// if (index < 0) {
			// // this.$message.warn('不能取消查询利用率')
			// this.$notification.warning({
			// message:'消息',
			// description:"不能取消查询利用率"
			// })
			// return false
			// }
			this.checkedList = checkedList
			},
			searchQuery() {
			@@ -423,10 +442,12 @@
			this.typeParent = this.queryParam.parentId
			this.typeEquipment = this.queryParam.equipmentId
			this.queryParam = {}
			this.dates = []
			this.queryParam.typeTree = this.typeTree
			this.queryParam.parentId = this.typeParent
			this.queryParam.equipmentId = this.typeEquipment
			this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
			this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
			this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
			// this.ipagination.current = 1
			this.loadData();
			// this.queryParam = {}
			@@ -443,6 +464,12 @@
			// console.log(res.result)
			this.tableHeads = res.result.dates
			this.dataList = res.result.mdcEfficiencyList
			if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) {
			this.$notification.info({
			message: '消息',
			description: '暂无该设备类型数据'
			})
			}
			this.checkSameData(this.dataList)
			this.checkSameData1(this.dataList)
			this.checkSameData2(this.dataList)
			@@ -470,6 +497,37 @@
			}).finally(() => {
			this.loading = false
			})
			},

			/**
			* 调用接口获取控制系统类型
			*/
			getDriveTypeByApi(){
			api.getDriveTypeApi().then((res)=>{
			this.driveTypeList=res.result.map(item=>item.value)
			})
			},

			/**
			* 联想输入框筛选功能
			* @param input 输入的内容
			* @param option 配置
			* @returns {boolean} 判断是否筛选
			*/
			filterOption(input, option) {
			return (
			option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
			);
			},

			/**
			* 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条
			*/
			handleWindowResize() {
			const tableContainer = document.getElementById('EfficiencyPO') // 表格容器
			const clientHeight = document.documentElement.clientHeight \|\| document.body.clientHeight // 浏览器可视区域高度
			const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距
			tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px'
			}
			}
			}
			@@ -481,12 +539,14 @@
			height: 100%;
			overflow: auto;
			}

			.table2 thead tr th:first-child,
			.table tbody tr .tdgu{
			position: sticky;
			left: 0;
			z-index: 1;
			}

			.table tbody tr .wenzi{
			/writing-mode: vertical-lr;/
			/text-orientation: upright;/
			@@ -494,30 +554,36 @@
			writing-mode: vertical-lr;
			letter-spacing: 2px;
			}

			.table tbody tr .kaitou{
			z-index: 1;
			background-color: white;
			}

			.table tbody tr .tdgu1{
			position: sticky;
			left: 50px;
			z-index: 2;
			}

			.table tbody tr .tdgu2{
			position: sticky;
			left: 100px;
			z-index: 2;
			}

			.table tbody tr .tdgu3{
			position: sticky;
			left: 150px;
			z-index: 2;
			}

			.table tbody tr .tdgu4{
			position: sticky;
			left: 250px;
			z-index: 2;
			}

			.table tbody tr .tdgu5{
			position: sticky;
			left: 412px;
			@@ -530,81 +596,61 @@
			top:0;
			z-index: 3;
			}

			.table2 thead .gudingth th{
			position: sticky;
			top: 32px;
			z-index: 2;
			}

			.table2 thead .equipname .name{
			z-index: 3;
			}

			.table2 thead .equipname .dong1{
			z-index: 4;
			left: 0;
			/border: 1px solid #000;/
			}

			.table2 thead .equipname .dong2{
			z-index: 5;
			left: 50px;
			}


			.table2 thead .equipname .dong3{
			z-index: 5;
			left: 100px;
			}

			.table2 thead .equipname .dong4{
			z-index: 5;
			left: 150px;
			}

			.table2 thead .equipname .dong5{
			z-index: 5;
			left: 250px;
			}

			.table2 thead .equipname .dong6{
			z-index: 5;
			left: 412px;
			}

			#EfficiencyPO{
			overflow: hidden;
			}


			@media screen and (min-width: 1920px){
			#EfficiencyPO{
			height: 687px!important;
			overflow: scroll;
			}
			}
			@media screen and (min-width: 1680px) and (max-width: 1920px){
			#EfficiencyPO{
			height: 687px!important;
			overflow: scroll;
			}
			}
			@media screen and (min-width: 1400px) and (max-width: 1680px){
			#EfficiencyPO{
			height: 540px!important;
			overflow: scroll;
			}
			}
			@media screen and (min-width: 1280px) and (max-width: 1400px){
			#EfficiencyPO{
			height: 440px!important;
			overflow: scroll;
			}
			}
			@media screen and (max-width: 1280px){
			#EfficiencyPO{
			height: 440px!important;
			overflow: scroll;
			}
			}
			.identifyingclass {
			width: 55px;
			height: 15px;
			display: inline-block
			}

			.dataContent {
			white-space: nowrap;
			/margin: 0;/
			border: none;
			border-collapse: separate;
			border-spacing: 0;
			/table-layout: fixed;/
			@@ -615,10 +661,6 @@
			/overflow: hidden;/
			/overflow-y: auto;/
			text-align: center;
			}

			.dataContent .fixed th {
			width: 50px;
			}

			.dataContent .thead th {
			@@ -632,23 +674,7 @@
			width: auto;
			}

			/.dataContent tr td {/
			/height: 35px;/
			/}/

			.dataContent .mathData td {
			padding: 10px;
			/display: none;/
			}

			.dataContent .mathData .td {
			/background-color: #ff9bd2;/
			display: inline-block;
			padding: 10px;
			}

			.dataContent .mathData .tdd {
			/display: none;/
			}

			</style>