| | |
| | | <template> |
| | | <div style="width: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <div :bordered="false"> |
| | | <!-- 查询区域 --> |
| | | <div class="seach-content"> |
| | | <div class="table-page-search-wrapper"> |
| | |
| | | |
| | | </a-row> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="14" :sm="14" :xs="14"> |
| | | <a-col :md="15" :sm="15" :xs="15"> |
| | | <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" |
| | | @change="efficiencyOptionsOnChange"/> |
| | | </a-col> |
| | |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <div style="width: 400px;top: 20px; right: 0px;"> |
| | | <div style="width: 530px;top: 0; right: 0px;"> |
| | | <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> |
| | | <tr> |
| | | <td v-for="(item, index) in identifying">{{item.title}}</td> |
| | |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap"> |
| | | <thead> |
| | | <tr class="thead fixed equipname"> |
| | | <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th> |
| | | <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th> |
| | | <th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;"></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> |
| | | <th class="thgu dong5 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备名称</th> |
| | | <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型</th> |
| | |
| | | </thead> |
| | | <tbody> |
| | | <tr class="mathData" v-for="(item, index) in dataList"> |
| | | <td class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td> |
| | | <td class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td> |
| | | <td class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td> |
| | | <td class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td> |
| | | <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td> |
| | | <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td> |
| | | <td class="tdgu3 kaitou">{{item.equipmentId}}</td> |
| | | <td class="tdgu4 kaitou">{{item.equipmentName}}</td> |
| | | <td class="tdgu5 kaitou">{{item.equipmentType}}</td> |
| | |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </a-card> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | }) |
| | | }, |
| | | initShiftSubList(val) { |
| | | this.queryParam.shiftSubId = null; |
| | | //每次重新选择班制时班次清空且显示placeholder内容 |
| | | this.queryParam.shiftSubId = undefined; |
| | | getAction(this.url.initShiftSubList, { shiftId: val }).then((res) => { |
| | | if (res.success) { |
| | | this.shiftSubList = res.result; |
| | | |
| | | } |
| | | }) |
| | | }, |
| | |
| | | dateParamChange(v1, v2) { |
| | | this.queryParam.startTime = v2[0] |
| | | this.queryParam.endTime = v2[1] |
| | | // 点击时间选择器的清空按钮时会触发此判断(点击重置按钮不会触发),实现重置列表功能,切实改变列表显示效果 |
| | | if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset() |
| | | }, |
| | | efficiencyOptionsOnChange(checkedList) { |
| | | let index = checkedList.indexOf('lyl') |
| | |
| | | this.checkedList = checkedList |
| | | }, |
| | | searchQuery() { |
| | | if(this.queryParam.typeTree == "1"){ |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | | if(this.dates != ''){ |
| | | if(this.queryParam.typeTree == "1"){ |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | | }else{ |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = "" |
| | | } |
| | | this.loadData() |
| | | }else{ |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = "" |
| | | // this.$message.warning("请选择时间") |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:"请选择时间" |
| | | }); |
| | | } |
| | | this.loadData() |
| | | // this.onClearSelected() |
| | | }, |
| | | searchReset() { |
| | |
| | | left: 0; |
| | | z-index: 1; |
| | | } |
| | | .table tbody tr .wenzi{ |
| | | /*writing-mode: vertical-lr;*/ |
| | | /*text-orientation: upright;*/ |
| | | transform: rotate(360deg); |
| | | writing-mode: vertical-lr; |
| | | letter-spacing: 2px; |
| | | } |
| | | .table tbody tr .kaitou{ |
| | | z-index: 1; |
| | | background-color: white; |
| | | } |
| | | .table tbody tr .tdgu1{ |
| | | position: sticky; |
| | | left: 150px; |
| | | left: 50px; |
| | | z-index: 2; |
| | | } |
| | | .table tbody tr .tdgu2{ |
| | | position: sticky; |
| | | left: 300px; |
| | | left: 100px; |
| | | z-index: 2; |
| | | } |
| | | .table tbody tr .tdgu3{ |
| | | position: sticky; |
| | | left: 450px; |
| | | left: 150px; |
| | | z-index: 2; |
| | | } |
| | | .table tbody tr .tdgu4{ |
| | | position: sticky; |
| | | left: 550px; |
| | | left: 250px; |
| | | z-index: 2; |
| | | } |
| | | .table tbody tr .tdgu5{ |
| | | position: sticky; |
| | | left: 700px; |
| | | left: 400px; |
| | | z-index: 2; |
| | | } |
| | | .table tbody tr .tdgu6{ |
| | | position: sticky; |
| | | left: 800px; |
| | | left: 500px; |
| | | z-index: 2; |
| | | } |
| | | |
| | |
| | | } |
| | | .table2 thead .equipname .dong2{ |
| | | z-index: 5; |
| | | left: 150px; |
| | | left: 50px; |
| | | } |
| | | .table2 thead .equipname .dong3{ |
| | | z-index: 5; |
| | | left: 300px; |
| | | left: 100px; |
| | | } |
| | | .table2 thead .equipname .dong4{ |
| | | z-index: 5; |
| | | left: 450px; |
| | | left: 150px; |
| | | } |
| | | .table2 thead .equipname .dong5{ |
| | | z-index: 5; |
| | | left: 550px; |
| | | left: 250px; |
| | | } |
| | | .table2 thead .equipname .dong6{ |
| | | z-index: 5; |
| | | left: 700px; |
| | | left: 400px; |
| | | } |
| | | .table2 thead .equipname .dong7{ |
| | | z-index: 6; |
| | | left: 800px; |
| | | left: 500px; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | |
| | | .dataContent { |
| | | white-space: nowrap; |
| | | /*margin: 0;*/ |
| | | border: none; |
| | | /*border: none;*/ |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | /*table-layout: fixed;*/ |
| | |
| | | width: auto; |
| | | } |
| | | |
| | | .dataContent tr td { |
| | | height: 35px |
| | | } |
| | | /*.dataContent tr td {*/ |
| | | /*height: 35px*/ |
| | | /*}*/ |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |