1、优化代码:mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域,表格操作列右固定以满足不同分辨率下操作列始终显示不被遮挡
2、优化代码:mdc全局左侧树组件所在区域的滚动条将不再进行全部内容滚动,调整为仅只有树组件内容滚动
3、优化代码:报警分析、利用率走势分析以及利用率分段分析页面在浏览器窗口尺寸变化后重绘图表以适应页面新尺寸
4、设备综合效率分析页面取消分页器以便能一次性导出所有表格数据
5、mdc全局左侧树区域宽度增大,右侧数据展示区域宽度减小
| | |
| | | <a-table |
| | | ref="table" |
| | | size="middle" |
| | | :scroll="{x:true}" |
| | | :scroll="{x:'max-content',y:465}" |
| | | bordered |
| | | rowKey="id" |
| | | :columns="columns" |
| | |
| | | title: '报警号', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'alarmCode' |
| | | dataIndex: 'alarmCode', |
| | | width:400 |
| | | }, |
| | | { |
| | | title: '报警内容', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'alarmContent' |
| | | dataIndex: 'alarmContent', |
| | | width:400 |
| | | }, |
| | | |
| | | { |
| | | title: '设备驱动类型', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'driveType' |
| | | dataIndex: 'driveType', |
| | | width:400 |
| | | }, |
| | | // { |
| | | // title: '是否过滤', |
| | |
| | | dataIndex:'isUse_dictText', |
| | | title: '是否过滤', |
| | | align: "center", |
| | | width:380 |
| | | // dictCode:'alarm_is_use' |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'action', |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 147, |
| | | width: 150, |
| | | scopedSlots: { customRender: 'action' } |
| | | } |
| | | ], |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <device-calendar-list ref="deviceList" :node='selectEquement' :Type="slectTypeTree"/> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | bordered |
| | | size="middle" |
| | | rowKey="id" |
| | | :scroll="{x:'max-content',y:600}" |
| | | :columns="columns" |
| | | :dataSource="dataSource" |
| | | :pagination="ipagination" |
| | |
| | | title: '中文名', |
| | | align: 'center', |
| | | dataIndex: 'chineseName', |
| | | width: 120 |
| | | width: 350 |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '英文名', |
| | | align: 'center', |
| | | width: 150, |
| | | width: 350, |
| | | dataIndex: 'englishName' |
| | | }, |
| | | { |
| | | title: '驱动类型', |
| | | align: 'center', |
| | | width: 180, |
| | | width: 350, |
| | | dataIndex: 'controlSystemType' |
| | | }, |
| | | { |
| | | title: '阈值上限', |
| | | align: 'center', |
| | | width: 120, |
| | | width: 270, |
| | | dataIndex: 'maxThreshold' |
| | | // scopedSlots: {customRender: "avatarslot"} |
| | | }, |
| | | { |
| | | title: '阈值下限', |
| | | align: 'center', |
| | | width: 80, |
| | | width: 270, |
| | | dataIndex: 'minThreshold' |
| | | // sorter: true |
| | | }, |
| | |
| | | dataIndex: 'action', |
| | | scopedSlots: { customRender: 'action' }, |
| | | align: 'center', |
| | | width: 120 |
| | | fixed: 'right', |
| | | width: 150 |
| | | } |
| | | ], |
| | | driveTypeList: [], |
| | |
| | | bordered |
| | | size="middle" |
| | | rowKey="id" |
| | | :scroll="{x:'max-content',y:465}" |
| | | :columns="columns" |
| | | :dataSource="dataSource" |
| | | :pagination="ipagination" |
| | |
| | | title: '设备编号', |
| | | align: "center", |
| | | dataIndex: 'equipmentId', |
| | | width: 120, |
| | | width: 200, |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | width: 150, |
| | | width: 200, |
| | | dataIndex: 'equipmentName', |
| | | }, |
| | | { |
| | | title: '车间', |
| | | align: "center", |
| | | width: 180, |
| | | width: 200, |
| | | dataIndex: 'productionName' |
| | | }, |
| | | { |
| | | title: '设备类型', |
| | | align: "center", |
| | | width: 120, |
| | | width: 200, |
| | | dataIndex: 'equipmentType', |
| | | // scopedSlots: {customRender: "avatarslot"} |
| | | }, |
| | |
| | | { |
| | | title: '驱动类型', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'driveType', |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '机床IP', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'equipmentIp' |
| | | }, |
| | | { |
| | | title: '设备功率', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'devicePower' |
| | | }, |
| | | { |
| | | title: '部门', |
| | | align: "center", |
| | | width: 180, |
| | | width: 200, |
| | | dataIndex: 'orgCodeTxt' |
| | | }, |
| | | |
| | | { |
| | | title: '系统版本', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'systemVersion' |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 120 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | |
| | | ], |
| | |
| | | title: '设备编号', |
| | | align: "center", |
| | | dataIndex: 'equipmentId', |
| | | width: 120, |
| | | width: 200, |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | width: 150, |
| | | width: 200, |
| | | dataIndex: 'equipmentName', |
| | | }, |
| | | { |
| | | title: '车间', |
| | | align: "center", |
| | | width: 180, |
| | | width: 200, |
| | | dataIndex: 'productionName' |
| | | }, |
| | | { |
| | | title: '设备类型', |
| | | align: "center", |
| | | width: 120, |
| | | width: 200, |
| | | dataIndex: 'equipmentType', |
| | | // scopedSlots: {customRender: "avatarslot"} |
| | | }, |
| | |
| | | { |
| | | title: '驱动类型', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'driveType', |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '机床IP', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'equipmentIp' |
| | | }, |
| | | { |
| | | title: '设备功率', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'devicePower' |
| | | }, |
| | | // { |
| | | // title: '部门', |
| | | // align: "center", |
| | | // width: 180, |
| | | // width: 200, |
| | | // dataIndex: 'orgCodeTxt' |
| | | // }, |
| | | |
| | | { |
| | | title: '系统版本', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'systemVersion' |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 120 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | |
| | | ] |
| | |
| | | title: '设备编号', |
| | | align: "center", |
| | | dataIndex: 'equipmentId', |
| | | width: 120, |
| | | width: 200, |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | width: 150, |
| | | width: 200, |
| | | dataIndex: 'equipmentName', |
| | | }, |
| | | { |
| | | title: '车间', |
| | | align: "center", |
| | | width: 180, |
| | | width: 200, |
| | | dataIndex: 'productionName' |
| | | }, |
| | | { |
| | | title: '设备类型', |
| | | align: "center", |
| | | width: 120, |
| | | width: 200, |
| | | dataIndex: 'equipmentType', |
| | | // scopedSlots: {customRender: "avatarslot"} |
| | | }, |
| | |
| | | { |
| | | title: '驱动类型', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'driveType', |
| | | // sorter: true |
| | | }, |
| | | { |
| | | title: '机床IP', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'equipmentIp' |
| | | }, |
| | | { |
| | | title: '设备功率', |
| | | align: "center", |
| | | width: 100, |
| | | width: 200, |
| | | dataIndex: 'devicePower' |
| | | }, |
| | | { |
| | | title: '部门', |
| | | align: "center", |
| | | width: 180, |
| | | width: 200, |
| | | dataIndex: 'orgCodeTxt' |
| | | }, |
| | | |
| | | { |
| | | title: '系统版本', |
| | | align: "center", |
| | | width: 80, |
| | | width: 200, |
| | | dataIndex: 'systemVersion' |
| | | }, |
| | | { |
| | |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 120 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | |
| | | ] |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <holiday-management-list ref="HolidayManagementList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></holiday-management-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <a-table |
| | | ref="table" |
| | | size="middle" |
| | | :scroll="{x:true}" |
| | | :scroll="{x:'max-content',y:465}" |
| | | bordered |
| | | rowKey="id" |
| | | :columns="columns" |
| | |
| | | :pagination="ipagination" |
| | | :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | class="j-table-force-nowrap" |
| | | @change="handleTableChange" |
| | | > |
| | | |
| | |
| | | title: '控制系统类型', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'controlSystemType' |
| | | dataIndex: 'controlSystemType', |
| | | width: 300, |
| | | }, |
| | | { |
| | | title: '中文名称', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'chineseName' |
| | | dataIndex: 'chineseName', |
| | | width: 300, |
| | | }, |
| | | { |
| | | title: '英文名称', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'englishName' |
| | | dataIndex: 'englishName', |
| | | width: 300, |
| | | }, |
| | | { |
| | | title: '序号', |
| | | align: "center", |
| | | // sorter: true, |
| | | dataIndex: 'sortNo' |
| | | dataIndex: 'sortNo', |
| | | width:100 |
| | | }, |
| | | { |
| | | title: '显示标志', |
| | | align: "center", |
| | | dataIndex: 'showFlag', |
| | | customRender: (text) => (text ? filterMultiDictText(this.dictOptions['showFlag'], text) : ''), |
| | | width: 300, |
| | | }, |
| | | { |
| | | title:'工作曲线标志', |
| | | align: "center", |
| | | dataIndex: 'curveGenerationFlags', |
| | | customRender: (text) => (text ? filterMultiDictText(this.dictOptions['curveGenerationFlags'], text) : ''), |
| | | align: "center", |
| | | dataIndex: 'curveGenerationFlags', |
| | | customRender: (text) => (text ? filterMultiDictText(this.dictOptions['curveGenerationFlags'], text) : ''), |
| | | width: 300, |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 147, |
| | | width: 150, |
| | | fixed:'right', |
| | | scopedSlots: { customRender: 'action' } |
| | | } |
| | | ], |
| | |
| | | :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | class="j-table-force-nowrap" |
| | | @change="handleTableChange"> |
| | | @change="handleTableChange" |
| | | :scroll="{x:'max-content',y:465}" |
| | | > |
| | | |
| | | <template slot="htmlSlot" slot-scope="text"> |
| | | <div v-html="text"></div> |
| | |
| | | { |
| | | title:'设备类型名称', |
| | | align:"center", |
| | | dataIndex: 'equipmentTypeName' |
| | | dataIndex: 'equipmentTypeName', |
| | | width:530 |
| | | }, |
| | | { |
| | | title:'设备类型图片', |
| | | align:"center", |
| | | dataIndex: 'equipmentTypePictures', |
| | | scopedSlots: {customRender: 'imgSlot'} |
| | | scopedSlots: {customRender: 'imgSlot'}, |
| | | width:530 |
| | | }, |
| | | { |
| | | title:'设备类型状态', |
| | | align:"center", |
| | | dataIndex: 'equipmentTypeStates', |
| | | customRender: (text) => (text ? filterMultiDictText(this.dictOptions['equipmentTypeStates'], text) : ''), |
| | | width:530 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align:"center", |
| | | scopedSlots: { customRender: 'action' } |
| | | scopedSlots: { customRender: 'action' }, |
| | | width:150, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | url: { |
| | |
| | | <a-table |
| | | ref="table" |
| | | size="middle" |
| | | :scroll="{x:true}" |
| | | :scroll="{x:'max-content',y:465}" |
| | | bordered |
| | | rowKey="id" |
| | | :columns="columns" |
| | |
| | | { |
| | | title:'类型', |
| | | align:"center", |
| | | dataIndex: 'planCloseType' |
| | | dataIndex: 'planCloseType', |
| | | width:500 |
| | | }, |
| | | { |
| | | title:'时间类型', |
| | | align:"center", |
| | | dataIndex: 'planCloseTimeType' |
| | | dataIndex: 'planCloseTimeType', |
| | | width:350 |
| | | }, |
| | | { |
| | | title:'时长(分钟)', |
| | | align:"center", |
| | | dataIndex: 'planCloseTimeLong' |
| | | dataIndex: 'planCloseTimeLong', |
| | | width:350 |
| | | }, |
| | | { |
| | | title:'备注', |
| | | align:"center", |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:380 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align:"center", |
| | | fixed:"right", |
| | | width:147, |
| | | width:150, |
| | | scopedSlots: { customRender: 'action' } |
| | | } |
| | | ], |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <overtime-management-list ref="OvertimeManagementList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></overtime-management-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <torqueconfiguration-list ref="TorqueconfigurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></torqueconfiguration-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <plan-downtime-maintenance-list ref="PlanDowntimeMaintenanceList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></plan-downtime-maintenance-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <alarm-analysis-main ref="alarmAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></alarm-analysis-main> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <mdc-pass-rate-list ref="MdcStandardProcessDurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-pass-rate-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <mdc-process-quantity-list ref="mdcProcessQuantityList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-process-quantity-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <mdc-standard-process-duration-list ref="MdcStandardProcessDurationList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></mdc-standard-process-duration-list> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <template> |
| | | <div style="width: 100%;"> |
| | | <div :bordered="false"> |
| | | <div class="device_list"> |
| | | <!-- 查询区域 --> |
| | | <div class="seach-content"> |
| | | <div class="table-page-search-wrapper"> |
| | |
| | | </a-form-item> |
| | | </a-col> |
| | | |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-col :md="7" :sm="7" :xs="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker |
| | | :placeholder="['开始时间', '结束时间']" |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="container" id="EfficiencyShift" style="margin-top: 20px;"> |
| | | <div class="table2"> |
| | | <a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered> |
| | | <span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span> |
| | | </a-table> |
| | | </div> |
| | | <div class="container" id="EfficiencyShift" style="flex:1;overflow: hidden"> |
| | | <a-table :columns="columns" rowKey="equipmentId" :dataSource="dataSource.records" :scroll="{x:'max-content',y:scrollY}" :pagination="false" bordered> |
| | | <span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span> |
| | | </a-table> |
| | | </div> |
| | | <div class="pagination"> |
| | | <a-pagination |
| | |
| | | @showSizeChange="handlePageSizeChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | } |
| | | ], |
| | | dataSource: [], |
| | | driveTypeList: [] |
| | | driveTypeList: [], |
| | | scrollY:465 |
| | | } |
| | | }, |
| | | props: { nodeTree: '', Type: '', nodePeople: '' }, |
| | |
| | | this.queryParam.typeTree = '1' |
| | | this.loadData() |
| | | this.getDriveTypeByApi() |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | return ( |
| | | option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 |
| | | ) |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .table2 { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #EfficiencyShift { |
| | | height: 670px !important; |
| | | overflow: scroll; |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #EfficiencyShift { |
| | | height: 670px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #EfficiencyShift { |
| | | height: 522px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #EfficiencyShift { |
| | | height: 414px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #EfficiencyShift { |
| | | height: 414px !important; |
| | | overflow: scroll; |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | } |
| | | } |
| | | |
| | | .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;*/ |
| | | border: 1px solid #ccc; |
| | | /*border: 1px solid #ccc;*/ |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | 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> |
| | |
| | | <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4"> |
| | | <a-col :md="5" :sm="5"> |
| | | <a-form-item label="设备编号"> |
| | | <a-input placeholder="输入设备编号查询" v-model="queryParams.equipmentId"></a-input> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4" :xs="4"> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="设备名称"> |
| | | <a-input placeholder="输入设备名称查询" v-model="queryParams.equipmentName"></a-input> |
| | | </a-form-item> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="action" slot-scope="text, record"> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:250 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'vacationDate', |
| | | width:250 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '类型', |
| | | align: 'center', |
| | | dataIndex: 'vacationType' |
| | | dataIndex: 'vacationType', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'notes' |
| | | dataIndex: 'notes', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | url: { |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div style="width: 100%;"> |
| | | <div :bordered="false"> |
| | | <div class="device_list"> |
| | | <!-- 查询区域 --> |
| | | <div class="seach-content"> |
| | | <div class="table-page-search-wrapper"> |
| | |
| | | /> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-col :md="7" :sm="7" :xs="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker |
| | | :placeholder="['开始时间', '结束时间']" |
| | |
| | | /> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="8" :sm="8" :xs="8"> |
| | | <a-col :md="2" :sm="2" :xs="2"> |
| | | <a-space> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload">重置</a-button> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="container" id="EfficiencyShift" style="margin-top: 20px;"> |
| | | <div class="table2"> |
| | | <a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered |
| | | :scroll="{ x: 3200, y: false }"> |
| | | </a-table> |
| | | </div> |
| | | <div id="EfficiencyShift" style="flex:1;overflow: hidden"> |
| | | <a-table :columns="columns" rowKey="equipmentId" :dataSource="dataSource.records" :pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table> |
| | | </div> |
| | | <div class="pagination"> |
| | | <a-pagination |
| | | :total=dataSource.total |
| | | :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`" |
| | | :page-size="+queryParam.pageSize" |
| | | :default-current="1" |
| | | :current=+queryParam.pageNo |
| | | show-size-changer |
| | | :pageSizeOptions="['20','30','40','50']" |
| | | @change="handlePageNoChange" |
| | | @showSizeChange="handlePageSizeChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <!--<div class="pagination">--> |
| | | <!--<a-pagination--> |
| | | <!--:total=dataSource.total--> |
| | | <!--:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"--> |
| | | <!--:page-size="+queryParam.pageSize"--> |
| | | <!--:default-current="1"--> |
| | | <!--:current=+queryParam.pageNo--> |
| | | <!--show-size-changer--> |
| | | <!--:pageSizeOptions="['20','30','40','50']"--> |
| | | <!--@change="handlePageNoChange"--> |
| | | <!--@showSizeChange="handlePageSizeChange"--> |
| | | <!--/>--> |
| | | <!--</div>--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | typeTree: '', |
| | | typeParent: 1, |
| | | typeEquipment: 1, |
| | | allowClear: true, |
| | | allowClearSu: true, |
| | | dates: [moment().subtract('month', 1), moment().subtract('month', 1)], |
| | | identifying: [], |
| | | queryParam: { |
| | | pageSize: 20, |
| | | pageSize: 10000, |
| | | pageNo: 1 |
| | | }, |
| | | queryParamEquip: {}, |
| | |
| | | customRender: function(t, r, index) { |
| | | return parseInt(index) + 1 |
| | | } |
| | | // fixed: 'left' |
| | | }, |
| | | { |
| | | title: '设备统一编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId', |
| | | width: 120 |
| | | // fixed: 'left' |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | width: 200, |
| | | dataIndex: 'equipmentName' |
| | | // fixed: 'left' |
| | | }, |
| | | { |
| | | title: '设备型号', |
| | |
| | | } |
| | | ], |
| | | dataSource: [], |
| | | driveTypeList: [] |
| | | driveTypeList: [], |
| | | scrollY:465, |
| | | } |
| | | }, |
| | | props: { nodeTree: '', Type: '', nodePeople: '' }, |
| | | created() { |
| | | // this.initShiftList() |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM') |
| | | this.queryParam.typeTree = '1' |
| | | this.loadData() |
| | | this.getDriveTypeByApi() |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | return ( |
| | | option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 |
| | | ) |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .table2 { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #EfficiencyShift { |
| | | height: 670px !important; |
| | | overflow: scroll; |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #EfficiencyShift { |
| | | height: 670px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #EfficiencyShift { |
| | | height: 522px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #EfficiencyShift { |
| | | height: 414px !important; |
| | | overflow: scroll; |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #EfficiencyShift { |
| | | height: 414px !important; |
| | | overflow: scroll; |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | } |
| | | } |
| | | |
| | | .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;*/ |
| | | border: 1px solid #ccc; |
| | | /*border: 1px solid #ccc;*/ |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | 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> |
| | |
| | | <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4"> |
| | | <a-col :md="5" :sm="5"> |
| | | <a-form-item label="设备编号"> |
| | | <a-input placeholder="输入设备编号查询" v-model="queryParams.equipmentId"></a-input> |
| | | </a-form-item> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="action" slot-scope="text, record"> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'effectiveDate', |
| | | width:150 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '班次开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startDate' |
| | | dataIndex: 'startDate', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '班次结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endDate' |
| | | dataIndex: 'endDate', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '加班开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startTime' |
| | | dataIndex: 'startTime', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '加班结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endTime' |
| | | dataIndex: 'endTime', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | fixed:'right', |
| | | width: 150 |
| | | } |
| | | ], |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div :bordered="false" class="device_list"> |
| | | <div class="device_list"> |
| | | <!-- 查询区域 --> |
| | | <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> |
| | | <div style=" background-color: #fff;overflow: auto" class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-row :gutter="24" style="width: 100%;"> |
| | | <a-col :md="7" :sm="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4"> |
| | | <a-col :md="5" :sm="5"> |
| | | <a-form-item label="设备编号"> |
| | | <a-input placeholder="输入设备编号查询" v-model="queryParams.equipmentId"></a-input> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4" :xs="4"> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="设备名称"> |
| | | <a-input placeholder="输入设备名称查询" v-model="queryParams.equipmentName"></a-input> |
| | | </a-form-item> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | @change="handleTableChange" :scroll="{x:'max-content',y:scrollY}"> |
| | | <span slot="action" slot-scope="text, record"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | | <a-divider type="vertical" /> |
| | |
| | | import JEllipsis from '@/components/jeecg/JEllipsis' |
| | | import Tooltip from 'ant-design-vue/es/tooltip' |
| | | import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' |
| | | import ACol from 'ant-design-vue/es/grid/Col' |
| | | export default { |
| | | name: 'TorqueconfigurationList', |
| | | mixins: [JeecgListMixin], |
| | | components: { |
| | | ACol, |
| | | Tooltip, |
| | | TorqueconfigurationModal, |
| | | TorqueconfigurationModaledit, |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:250 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '时间', |
| | | align: 'center', |
| | | dataIndex: 'torqueDate', |
| | | width:250 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '扭矩值', |
| | | align: 'center', |
| | | dataIndex: 'torqueValue' |
| | | dataIndex: 'torqueValue', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'notes' |
| | | dataIndex: 'notes', |
| | | width:350 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | url: { |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | // /** |
| | | // * 车间选中项取消后触发此事件,由BaseTree组件由事件总线触发 |
| | | // * @param value 提示信息 |
| | |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | // this.$bus.$on('treeClearSelected',this.treeClearSelected) |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="overflow: hidden;flex: 1"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="action" slot-scope="text, record"> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '#', |
| | |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '类型', |
| | | align: 'center', |
| | | dataIndex: 'noplanType', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startTime', |
| | | width:200 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endTime' |
| | | dataIndex: 'endTime', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | fixed:'right', |
| | | width: 150 |
| | | } |
| | | ], |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-col :md="7" :sm="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" |
| | | v-model="dates"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :lg="2" :md="3" :sm="3" :xs="3"> |
| | | <a-col :lg="2" :md="2" :sm="2" :xs="2"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | </div> |
| | | <div id="DeviceList"> |
| | | <div class="openRateTrendDg"> |
| | | <!--<div id="Efficiency" class="container">--> |
| | | <!--<div class="table2">--> |
| | | <!--<table class="dataContent table" border="1" cellspacing="0" cellpadding="0"--> |
| | | <!--style="white-space: nowrap;text-align: left;">--> |
| | | <!--<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 dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">--> |
| | | <!--报警信息--> |
| | | <!--</th>--> |
| | | <!--<!–<template v-for="(tableHead, index) in tableHeads">–>--> |
| | | <!--<!–<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>–>--> |
| | | <!--<!–</template>–>--> |
| | | <!--</tr>--> |
| | | <!--</thead>--> |
| | | <!--<tbody>--> |
| | | <!--<tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">--> |
| | | <!--<td class="tdgu kaitou">{{item.alarmCode}}</td>--> |
| | | <!--<td class="tdgu1 kaitou">{{item.count}}</td>--> |
| | | <!--<td class="tdgu2 kaitou">{{getFormattedTime(item.timeCount)}}--> |
| | | <!--<!–<td class="tdgu2 kaitou">{{item.timeCount}}</td>–>--> |
| | | <!--<td class="tdgu3 kaitou">{{item.alarmContent}}</td>--> |
| | | <!--<!–<template v-for="(tableHead, index) in item.dataList">–>--> |
| | | <!--<!–<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>–>--> |
| | | <!--<!–</template>–>--> |
| | | <!--</tr>--> |
| | | <!--</tbody>--> |
| | | <!--</table>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<a-spin :spinning=""></a-spin>--> |
| | | <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:210}" |
| | | :customRow="customRow" |
| | | rowKey="alarmCode" @expand="handleExpandChange" :loading="outerDataLoading" |
| | |
| | | }, |
| | | mounted() { |
| | | this.drawWrin() |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | }) |
| | | }, |
| | | drawWrin() { |
| | | let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons') |
| | | this.equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons') |
| | | let equipmentWarningPieOption = { |
| | | title: { |
| | | text: '各设备出现此报警的比例', |
| | |
| | | // data:[{name:'jjjjjjj',value:'2'}] |
| | | }] |
| | | } |
| | | equipmentWarningPie.setOption(equipmentWarningPieOption, true) |
| | | let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons') |
| | | this.equipmentWarningPie.setOption(equipmentWarningPieOption, true) |
| | | this.equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons') |
| | | let equipmentWarningLineOption = { |
| | | title: { |
| | | text: '每天出现此报警的数量走势', |
| | |
| | | } |
| | | ] |
| | | } |
| | | equipmentWarningLine.setOption(equipmentWarningLineOption, true) |
| | | this.equipmentWarningLine.setOption(equipmentWarningLineOption, true) |
| | | }, |
| | | |
| | | /** |
| | |
| | | _this.innerDataLoading = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | if(this.equipmentWarningPie) this.equipmentWarningPie.resize() |
| | | if(this.equipmentWarningLine) this.equipmentWarningLine.resize() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .dataContent { |
| | | white-space: nowrap; |
| | | /*margin: 0;*/ |
| | | /*border: none;*/ |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | /*table-layout: fixed;*/ |
| | | border: 1px solid #ccc; |
| | | /*border: 1px solid #ccc;*/ |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | /*.dataContent .fixed th {*/ |
| | | /*width: 50px;*/ |
| | | /*}*/ |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | /*width: auto;*/ |
| | | } |
| | | |
| | | .dataContent tr td { |
| | | height: 35px; |
| | | } |
| | | |
| | | .dataContent .mathData:hover td { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .dataContent .mathData td { |
| | | /*background-color: #ff9bd2;*/ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .dataContent .mathData .tdd { |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .table2 { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | /*tr th {*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | /*tr td{*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | .table2 thead tr th:first-child, |
| | | .table tbody tr .tdgu { |
| | | position: sticky; |
| | | left: 0; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .table tbody tr .kaitou { |
| | | z-index: 1; |
| | | background-color: white; |
| | | } |
| | | |
| | | .table tbody tr .tdgu1 { |
| | | position: sticky; |
| | | left: 150px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu2 { |
| | | position: sticky; |
| | | left: 300px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu3 { |
| | | position: sticky; |
| | | left: 450px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu4 { |
| | | position: sticky; |
| | | left: 550px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu5 { |
| | | position: sticky; |
| | | left: 700px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table2 thead tr .timeth, |
| | | .table2 thead tr .thgu { |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 3; |
| | | } |
| | | |
| | | .table2 thead .gudingth th { |
| | | position: sticky; |
| | | top: 32px; |
| | | z-index: 6 !important; |
| | | } |
| | | |
| | | .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: 150px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong3 { |
| | | z-index: 5; |
| | | left: 300px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong4 { |
| | | z-index: 5; |
| | | left: 450px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong5 { |
| | | z-index: 5; |
| | | left: 550px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6 { |
| | | z-index: 5; |
| | | left: 700px; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #Efficiency { |
| | | height: 258px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #Efficiency { |
| | | height: 258px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #Efficiency { |
| | | height: 160px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #Efficiency { |
| | | height: 60px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | #Efficiency .table_guding1 { |
| | | position: absolute; |
| | | overflow: hidden; |
| | | width: 500px; |
| | | } |
| | | |
| | | #Efficiency .table_guding2 { |
| | | overflow-x: scroll; |
| | | width: 500px; |
| | | } |
| | | |
| | | /deep/ .ant-card { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | /deep/ .ant-card .ant-card-body { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | |
| | | .equipment_box img{ |
| | | width: 45%; |
| | | } |
| | | |
| | | .containerequip{ |
| | | overflow: auto; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .containerequip{ |
| | | height: 640px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .containerequip{ |
| | | height: 640px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .containerequip{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .containerequip{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .containerequip{ |
| | | height: 394px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | .container_content { |
| | | width: 100%; |
| | | /*display: flex;*/ |
| | | /*flex-wrap: wrap;*/ |
| | | /*justify-content: space-between;*/ |
| | | /*align-items: center;*/ |
| | | position: relative; |
| | | } |
| | | |
| | |
| | | display: inline-block; |
| | | text-align: center; |
| | | margin-bottom: 5%; |
| | | /*float: left;*/ |
| | | } |
| | | |
| | | .container_content .contnet p { |
| | | padding-top: 5%; |
| | | } |
| | | |
| | | /*.container_content .contnet img {*/ |
| | | /*padding: 5%;*/ |
| | | /*}*/ |
| | | /**/ |
| | | .addclass { |
| | | /*float: left;*/ |
| | | /*position: absolute;*/ |
| | | /*top: 0;*/ |
| | | /*left: 0;*/ |
| | | } |
| | | |
| | | .noaddclass { |
| | | /*float: left;*/ |
| | | } |
| | | |
| | | /*.addclass .content_equipment img {*/ |
| | | /*border-bottom: 2px solid #e957ff;*/ |
| | | /*!*padding-bottom: 8%;*!*/ |
| | | /*}*/ |
| | | .addclass p { |
| | | border-bottom: 2px solid #e957ff; |
| | | /*padding-bottom: 8%;*/ |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <a-card :bordered="false"> |
| | | <a-card :bordered="false" style="display: flex;flex-direction: column"> |
| | | |
| | | <!-- 查询区域 --> |
| | | <!--<div class="table-page-search-wrapper">--> |
| | |
| | | <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>--> |
| | | <!--</div>--> |
| | | |
| | | <div class="equipmentList"> |
| | | <div class="equipmentList" id="DeviceList"> |
| | | <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> |
| | | <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{--> |
| | | <!--selectedRowKeys.length }}</a>项 --> |
| | |
| | | <!--</div>--> |
| | | |
| | | <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource" |
| | | :pagination="false" :loading="loading" |
| | | style="height: 100%; overflow-y: scroll;"> |
| | | :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"> |
| | | </a-table> |
| | | </div> |
| | | </a-card> |
| | |
| | | title: '设备ID', |
| | | align: "center", |
| | | dataIndex: 'equipmentId', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | dataIndex: 'equipmentName', |
| | | width:300 |
| | | }, |
| | | { |
| | | title: '状态', |
| | | align: "center", |
| | | dataIndex: 'oporationDict', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '采集时间', |
| | | align: "center", |
| | | dataIndex: 'collecttime', |
| | | defaultSortOrder:'descend', |
| | | sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1} |
| | | sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}, |
| | | width:350 |
| | | }, |
| | | ], |
| | | scrollY:465, |
| | | } |
| | | }, |
| | | props: { dataSource: { |
| | |
| | | watch: { |
| | | }, |
| | | methods: { |
| | | } |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight |
| | | } |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .equipmentList{ |
| | | flex: 1; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .equipmentList{ |
| | | height: 640px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .equipmentList{ |
| | | height: 640px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .equipmentList{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .equipmentList{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .equipmentList{ |
| | | height: 394px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | |
| | | <template> |
| | | <div class="deviceCalendar_list"> |
| | | <div :bordered="false"> |
| | | <!-- 查询区域 --> |
| | | |
| | | <div> |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-row :gutter="24" style="width: 100%"> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="overflow: auto;width: 100%;margin-top: 20px;height: 569px;"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" @change="handleTableChange" class="ant-table-striped" |
| | | :dataSource="dataSource" :pagination="ipagination" :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> |
| | | <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList"> |
| | | <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}" |
| | | size="middle" rowKey="id" :columns="columns" |
| | | @change="handleTableChange" class="ant-table-striped" |
| | | :dataSource="dataSource" :pagination="ipagination" |
| | | :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> |
| | | <span slot="action" |
| | | slot-scope="text, record"> |
| | | <a-popconfirm |
| | |
| | | </a-table> |
| | | </div> |
| | | <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | identifying: [], |
| | | queryParam: {}, |
| | | disableMixinCreated: true, |
| | | scrollY:465, |
| | | /* 分页参数 */ |
| | | ipagination:{ |
| | | current: 1, |
| | |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'effectiveDate', |
| | | width:100, |
| | | }, |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '班制', |
| | | align: 'center', |
| | | dataIndex: 'shiftName' |
| | | dataIndex: 'shiftName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '班次', |
| | | align: 'center', |
| | | dataIndex: 'shiftSubName' |
| | | dataIndex: 'shiftSubName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startDate' |
| | | dataIndex: 'startDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endDate' |
| | | dataIndex: 'endDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '是否跨天', |
| | | align: 'center', |
| | | dataIndex: 'isDaySpan', |
| | | scopedSlots: { customRender: 'isDaySpan' } |
| | | scopedSlots: { customRender: 'isDaySpan' }, |
| | | width:100 |
| | | }, |
| | | { |
| | | title: '开始休息时间', |
| | | align: 'center', |
| | | dataIndex: 'sleepStartDate' |
| | | dataIndex: 'sleepStartDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '结束休息时间', |
| | | align: 'center', |
| | | dataIndex: 'sleepEndDate' |
| | | dataIndex: 'sleepEndDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 147, |
| | | scopedSlots: { customRender: 'action' } |
| | | width: 100, |
| | | scopedSlots: { customRender: 'action' }, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | checkedList: ['lyl'], |
| | |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | this.queryParam.typeTree = "1" |
| | | this.loadData() |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath){ |
| | |
| | | this.$refs.modalForm.add(record) |
| | | this.$refs.modalForm.title = '设备工作日历配置' |
| | | this.$refs.modalForm.disableSubmit = false |
| | | }, |
| | | |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .deviceCalendar_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .deviceCalendar_list{ |
| | | height: 812px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .deviceCalendar_list{ |
| | | height: 812px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .deviceCalendar_list{ |
| | | height: 664px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .deviceCalendar_list{ |
| | | height: 565px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .deviceCalendar_list{ |
| | | height: 565px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | .ant-table-striped /deep/ .table-striped td { |
| | | background-color: #fafafa; |
| | | } |
| | | .identifyingclass { |
| | | width: 55px; |
| | | height: 15px; |
| | | display: inline-block |
| | | } |
| | | |
| | | .dataContent { |
| | | border: 1px solid #ccc; |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | 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;*/ |
| | | } |
| | | |
| | | .pink { |
| | | background-color: #ff9bd2; |
| | | } |
| | | |
| | | .yellow { |
| | | background-color: #e8ff37; |
| | | } |
| | | |
| | | .green { |
| | | background-color: #99ff4e; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div :bordered="false" class="device_list"> |
| | | <div class="device_list"> |
| | | <!-- 查询区域 --> |
| | | <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper"> |
| | | <div style="background-color: #fff" class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-row :gutter="24" style="width: 100%;"> |
| | | <a-col :md="7" :sm="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD HH:mm:ss"/> |
| | |
| | | <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="handleExportXls('维修休班管理')" icon="download">导出</a-button> |
| | | </a-space> |
| | | </a-col> |
| | | <!--<a-col :md="2" :sm="3" :xs="3">--> |
| | |
| | | <div class="table-operator" style="display: inline;"> |
| | | <a-button @click="handleAdd" type="primary" icon="plus">新增 |
| | | </a-button> |
| | | <a-button type="primary" @click="handleExportXls('维修休班管理')" icon="download">导出</a-button> |
| | | <!--<a-button v-has="'user.add'" @click="handleAddXIU" type="primary" icon="plus">休班新增--> |
| | | <!--</a-button>--> |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | @change="handleTableChange" :scroll="{x:'max-content',y:scrollY}"> |
| | | <span slot="action" slot-scope="text, record"> |
| | | <a @click="handleEdit(record)">编辑</a> |
| | | <a-divider type="vertical" /> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | defaultSortOrder:'descend', |
| | | sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}, |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '维修类型', |
| | | align: 'center', |
| | | dataIndex: 'mdcRepairTypeDictText' |
| | | dataIndex: 'mdcRepairTypeDictText', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startTime', |
| | | width:250 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endTime' |
| | | dataIndex: 'endTime', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150 |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | url: { |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | 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;*/ |
| | |
| | | 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; |
| | |
| | | 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;*/ |
| | |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | |
| | | 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> |
| | |
| | | .table2 thead .equipname .dong1 { |
| | | z-index: 4; |
| | | left: 0; |
| | | /*border: 1px solid #000;*/ |
| | | } |
| | | |
| | | .table2 thead .equipname .dong2 { |
| | |
| | | left: 412px; |
| | | } |
| | | |
| | | #Efficiency{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #Efficiency { |
| | | height: 687px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #Efficiency { |
| | | height: 687px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #Efficiency { |
| | | height: 540px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #Efficiency { |
| | | height: 440px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #Efficiency { |
| | | height: 440px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | #Efficiency .table_guding1 { |
| | | position: absolute; |
| | | overflow: hidden; |
| | | width: 500px; |
| | | } |
| | | |
| | | #Efficiency .table_guding2 { |
| | | overflow-x: scroll; |
| | | width: 500px; |
| | | } |
| | | |
| | | .identifyingclass { |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | /*.dataContent .fixed th {*/ |
| | | /*width: 50px;*/ |
| | | /*}*/ |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | /*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; |
| | | } |
| | | |
| | | td { |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .pink { |
| | | background-color: #ff9bd2; |
| | | } |
| | | |
| | | .yellow { |
| | | background-color: #e8ff37; |
| | | } |
| | | |
| | | .green { |
| | | background-color: #99ff4e; |
| | | } |
| | | |
| | | .vertical-text { |
| | | writing-mode: vertical-rl; |
| | | } |
| | | |
| | | /*/deep/ .ant-table-body .ant-table-row td {*/ |
| | | /*padding-top: 10px;*/ |
| | | /*padding-bottom: 10px;*/ |
| | | /*}*/ |
| | | |
| | | /deep/ .ant-table-body .ant-table-row td.data { |
| | | min-width: 150px; |
| | | max-width: 150px; |
| | | } |
| | | |
| | | /deep/ .ant-table-tbody > tr.ant-table-row:hover > td { |
| | | background: none !important; |
| | | } |
| | | |
| | | /deep/ .ant-table-thead th { |
| | | text-align: center; |
| | | } |
| | | |
| | | </style> |
| | |
| | | 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; |
| | |
| | | z-index: 5; |
| | | left: 250px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6{ |
| | | z-index: 5; |
| | | left: 412px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong7{ |
| | | z-index: 6; |
| | | left: 512px; |
| | | } |
| | | |
| | | #EfficiencyShift{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | #EfficiencyShift{ |
| | | height: 670px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | #EfficiencyShift{ |
| | | height: 670px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | #EfficiencyShift{ |
| | | height: 522px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | #EfficiencyShift{ |
| | | height: 414px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px){ |
| | | #EfficiencyShift{ |
| | | height: 414px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | 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;*/ |
| | | } |
| | | /*.seach-content{*/ |
| | | /*display: flex;*/ |
| | | /*justify-content: space-between;*/ |
| | | /*}*/ |
| | | |
| | | </style> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | |
| | |
| | | } from '@/api/manage' |
| | | import mdcPassRateModal from './mdcPassRateModal' |
| | | import mdcPassRateEdit from './mdcPassRateEdit' |
| | | // import DeviceRepairModelAdd from './DeviceRepairModelAdd' |
| | | // import DeviceRepairModelEdit from './DeviceRepairModelEdit' |
| | | import '@/components/table2excel/table2excel' |
| | | import { |
| | | JeecgListMixin |
| | |
| | | import JEllipsis from '@/components/jeecg/JEllipsis' |
| | | import Tooltip from 'ant-design-vue/es/tooltip' |
| | | import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' |
| | | import ACol from 'ant-design-vue/es/grid/Col' |
| | | |
| | | export default { |
| | | name: 'mdcPassRateList', |
| | | mixins: [JeecgListMixin], |
| | | components: { |
| | | ACol, |
| | | Tooltip, |
| | | mdcPassRateModal, |
| | | mdcPassRateEdit, |
| | | // DeviceRepairModelAdd, |
| | | // DeviceRepairModelEdit, |
| | | JDictSelectTag, |
| | | JInput, |
| | | JDate, |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'efficientDate', |
| | | width:200 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '加工数量', |
| | | align: 'center', |
| | | dataIndex: 'processQuantity' |
| | | dataIndex: 'processQuantity', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '不合格数量', |
| | | align: 'center', |
| | | dataIndex: 'unqualifiedQuantity' |
| | | dataIndex: 'unqualifiedQuantity', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '合格率', |
| | | align: 'center', |
| | | dataIndex: 'passRate', |
| | | scopedSlots:{customRender:'discount1'} |
| | | scopedSlots:{customRender:'discount1'}, |
| | | width:150 |
| | | |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | fixed:'right', |
| | | width: 150 |
| | | } |
| | | ], |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="action" slot-scope="text, record"> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '零件号', |
| | | align: 'center', |
| | | dataIndex: 'partsCode', |
| | | width:120 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '批次号', |
| | | align: 'center', |
| | | dataIndex: 'batchCode' |
| | | dataIndex: 'batchCode', |
| | | width:120 |
| | | }, |
| | | { |
| | | title: '程序号', |
| | | align: 'center', |
| | | dataIndex: 'sequenceNumber' |
| | | dataIndex: 'sequenceNumber', |
| | | width:120 |
| | | }, |
| | | { |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'efficientDate' |
| | | dataIndex: 'efficientDate', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '加工数量', |
| | | align: 'center', |
| | | dataIndex: 'processQuantity' |
| | | dataIndex: 'processQuantity', |
| | | width:120 |
| | | }, |
| | | { |
| | | title: '时长(分钟)', |
| | | align: 'center', |
| | | dataIndex: 'duration' |
| | | dataIndex: 'duration', |
| | | width:120 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:120 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150 |
| | | fixed:'right', |
| | | width: 200 |
| | | } |
| | | ], |
| | | url: { |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </div> |
| | | |
| | | <!-- table区域-begin --> |
| | | <div id="DeviceList"> |
| | | <div id="DeviceList" style="flex: 1;overflow: hidden"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" |
| | | @change="handleTableChange"> |
| | | <span slot="action" slot-scope="text, record"> |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | dataStartsoucre:[], |
| | | scrollY:465, |
| | | columns: [ |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:200 |
| | | // defaultSortOrder:'descend', |
| | | // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1} |
| | | }, |
| | |
| | | title: '零件号', |
| | | align: 'center', |
| | | dataIndex: 'partsCode', |
| | | width:150 |
| | | // scopedSlots:{customRender:'startTime'}, |
| | | // customRender:(text,row,index) => { |
| | | // return moment(text).format("YYYY-MM-DD HH:mm:ss") |
| | |
| | | { |
| | | title: '批次号', |
| | | align: 'center', |
| | | dataIndex: 'batchCode' |
| | | dataIndex: 'batchCode', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '程序号', |
| | | align: 'center', |
| | | dataIndex: 'sequenceNumber' |
| | | dataIndex: 'sequenceNumber', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '时长(分钟)', |
| | | align: 'center', |
| | | dataIndex: 'duration' |
| | | dataIndex: 'duration', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | align: 'center', |
| | | dataIndex: 'remark' |
| | | dataIndex: 'remark', |
| | | width:250 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | fixed:'right', |
| | | width: 150 |
| | | } |
| | | ], |
| | |
| | | exclude_inputs: true |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) |
| | | const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | }, |
| | | created() { |
| | | this.queryParam.typeTree = "1" |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .device_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .device_list{ |
| | | height: 811px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .device_list{ |
| | | height: 663px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .device_list{ |
| | | height: 564px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | v-model="dates"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="6" :sm="6" :xs="6"> |
| | | <a-col :md="17" :sm="17" :xs="17"> |
| | | <a-form-item label="时间段"> |
| | | <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> |
| | | 至 |
| | | <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> |
| | | <a-space> |
| | | <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> |
| | | 至 |
| | | <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-space> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :lg="2" :md="3" :sm="3" :xs="3"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <div id="DeviceList"> |
| | | <div class="openRateTrendDg"> |
| | | <div id="Efficiency" class="container" style="margin-top: 20px;"> |
| | | <a-spin :spinning="loading"> |
| | | <a-spin :spinning="loading"> |
| | | <div id="Efficiency" class="container" style="margin-bottom: 15px;"> |
| | | <div class="table2"> |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" |
| | | style="white-space: nowrap;text-align: center;"> |
| | |
| | | <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 class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;"> |
| | | 设备名称 |
| | | </th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> |
| | |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </a-spin> |
| | | </div> |
| | | </div> |
| | | <div id="openRateTrendChart" style="width: 100%;height: 60%"></div> |
| | | </a-spin> |
| | | |
| | | <div id="openRateTrendChart"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | export default { |
| | | // mixins: [JeecgListMixin], |
| | | name: 'openRateFractionAnalysisMain', |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | dataSource: [], |
| | |
| | | }, |
| | | mounted() { |
| | | this.tableScroll = document.querySelector('.table2') |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | beforeDestroy() { |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | }) |
| | | }, |
| | | draw() { |
| | | let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | let openRateTrendChartOptions = { |
| | | title: { |
| | | text: '利用率分段分析', |
| | |
| | | } |
| | | ] |
| | | } |
| | | openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | }, |
| | | |
| | | /** |
| | |
| | | this.loading = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize() |
| | | } |
| | | } |
| | | } |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | /*.dataContent .fixed th {*/ |
| | | /*width: 50px;*/ |
| | | /*}*/ |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | /*width: auto;*/ |
| | | } |
| | | |
| | | .dataContent tr td { |
| | |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |
| | | /*display: none;*/ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .dataContent .mathData:hover td { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |
| | | .dataContent .mathData .td { |
| | | /*background-color: #ff9bd2;*/ |
| | | display: inline-block; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .dataContent .mathData .tdd { |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .table2 { |
| | |
| | | overflow: auto; |
| | | } |
| | | |
| | | /*tr th {*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | /*tr td{*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | .table2 thead tr th:first-child, |
| | | .table tbody tr .tdgu { |
| | | position: sticky; |
| | |
| | | |
| | | .table tbody tr .tdgu2 { |
| | | position: sticky; |
| | | left: 300px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu3 { |
| | | position: sticky; |
| | | left: 450px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu4 { |
| | | position: sticky; |
| | | left: 550px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu5 { |
| | | position: sticky; |
| | | left: 700px; |
| | | left: 312px; |
| | | z-index: 2; |
| | | } |
| | | |
| | |
| | | .table2 thead .equipname .dong1 { |
| | | z-index: 4; |
| | | left: 0; |
| | | /*border: 1px solid #000;*/ |
| | | } |
| | | |
| | | .table2 thead .equipname .dong2 { |
| | |
| | | |
| | | .table2 thead .equipname .dong3 { |
| | | z-index: 5; |
| | | left: 300px; |
| | | left: 312px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong4 { |
| | | z-index: 5; |
| | | left: 450px; |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong5 { |
| | | z-index: 5; |
| | | left: 550px; |
| | | #Efficiency{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6 { |
| | | z-index: 5; |
| | | left: 700px; |
| | | #openRateTrendChart{ |
| | | width: 100%; |
| | | height: 60% |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #Efficiency { |
| | | height: 190px !important; |
| | | overflow: scroll; |
| | | height: 337px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | #Efficiency .table_guding1 { |
| | | position: absolute; |
| | | overflow: hidden; |
| | | width: 500px; |
| | | } |
| | | |
| | | #Efficiency .table_guding2 { |
| | | overflow-x: scroll; |
| | | width: 500px; |
| | | } |
| | | |
| | | /deep/ .ant-card { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | /deep/ .ant-card .ant-card-body { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | </style> |
| | |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-col :md="7" :sm="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" |
| | | v-model="dates"/> |
| | |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | |
| | | <!--表格及图表区域--> |
| | | <div id="DeviceList"> |
| | | <div class="openRateTrendDg"> |
| | | <div id="Efficiency" class="container" style="margin-top: 20px;"> |
| | | <a-spin :spinning="loading"> |
| | | <!--表格区域--> |
| | | <a-spin :spinning="loading"> |
| | | <div id="Efficiency" class="container" style="margin-bottom: 15px;"> |
| | | <div class="table2"> |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" |
| | | style="white-space: nowrap;text-align: center;"> |
| | |
| | | <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 class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;"> |
| | | 设备名称 |
| | | </th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> |
| | |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </a-spin> |
| | | </div> |
| | | </div> |
| | | <div id="openRateTrendChart" style="width: 100%;height: 60%"></div> |
| | | </a-spin> |
| | | <!--图标区域--> |
| | | <div id="openRateTrendChart"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | mounted() { |
| | | this.tableScroll = document.querySelector('.table2') |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | beforeDestroy() { |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | }) |
| | | }, |
| | | draw() { |
| | | let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | let openRateTrendChartOptions = { |
| | | title: { |
| | | text: '利用率走势分析', |
| | |
| | | } |
| | | ] |
| | | } |
| | | openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | }, |
| | | |
| | | /** |
| | |
| | | this.loading = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize() |
| | | } |
| | | } |
| | | } |
| | |
| | | border: 1px solid #ccc; |
| | | /*border: 1px solid #ccc;*/ |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | /*.dataContent .fixed th {*/ |
| | | /*width: 50px;*/ |
| | | /*}*/ |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | /*width: auto;*/ |
| | | } |
| | | |
| | | .dataContent tr td { |
| | | height: 35px; |
| | | } |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |
| | | /*display: none;*/ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .dataContent .mathData:hover td { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |
| | | .dataContent .mathData .td { |
| | | /*background-color: #ff9bd2;*/ |
| | | display: inline-block; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .dataContent .mathData .tdd { |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .table2 { |
| | |
| | | overflow: auto; |
| | | } |
| | | |
| | | /*tr th {*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | /*tr td{*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | .table2 thead tr th:first-child, |
| | | .table tbody tr .tdgu { |
| | | position: sticky; |
| | |
| | | |
| | | .table tbody tr .tdgu2 { |
| | | position: sticky; |
| | | left: 300px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu3 { |
| | | position: sticky; |
| | | left: 450px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu4 { |
| | | position: sticky; |
| | | left: 550px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu5 { |
| | | position: sticky; |
| | | left: 700px; |
| | | left: 312px; |
| | | z-index: 2; |
| | | } |
| | | |
| | |
| | | .table2 thead .equipname .dong1 { |
| | | z-index: 4; |
| | | left: 0; |
| | | /*border: 1px solid #000;*/ |
| | | } |
| | | |
| | | .table2 thead .equipname .dong2 { |
| | |
| | | |
| | | .table2 thead .equipname .dong3 { |
| | | z-index: 5; |
| | | left: 300px; |
| | | left: 312px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong4 { |
| | | z-index: 5; |
| | | left: 450px; |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong5 { |
| | | z-index: 5; |
| | | left: 550px; |
| | | #Efficiency{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6 { |
| | | z-index: 5; |
| | | left: 700px; |
| | | #openRateTrendChart{ |
| | | width: 100%; |
| | | height: 60%; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #Efficiency { |
| | | height: 190px !important; |
| | | overflow: scroll; |
| | | height: 337px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | #Efficiency .table_guding1 { |
| | | position: absolute; |
| | | overflow: hidden; |
| | | width: 500px; |
| | | } |
| | | |
| | | #Efficiency .table_guding2 { |
| | | overflow-x: scroll; |
| | | width: 500px; |
| | | } |
| | | |
| | | /deep/ .ant-card { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | /deep/ .ant-card .ant-card-body { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <a-card :bordered="false" class="shift_info"> |
| | | <div class="shift_info"> |
| | | <!-- 操作按钮区域 --> |
| | | <div class="table-operator"> |
| | | <a-button type="primary" v-if="Object.keys(shiftSystemRow).length>0" @click="handleAdd" icon="plus">配置</a-button> |
| | | </div> |
| | | <!-- table区域-begin --> |
| | | <div style="width: 100%;"> |
| | | <div style="width: 100%;flex: 1;overflow: auto"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :dataSource="dataSource" :pagination="false" :loading="loading"> |
| | | <span |
| | |
| | | </div> |
| | | |
| | | <shift-info-model ref="modalForm" @ok="modalFormOk"></shift-info-model> |
| | | </a-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .shift_info{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .shift_info{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .shift_info{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .shift_info{ |
| | | height: 600px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .shift_info{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .shift_info{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <a-card :bordered="false" class="shift_system"> |
| | | <div class="shift_system"> |
| | | <!-- 操作按钮区域 --> |
| | | <div class="table-operator"> |
| | | <a-button type="primary" @click="handleAdd" icon="plus">新增</a-button> |
| | | </div> |
| | | <!-- table区域-begin --> |
| | | <div> |
| | | <div style="flex: 1;overflow: auto"> |
| | | <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" |
| | | :dataSource="dataSource" :pagination="false" :loading="loading" |
| | | :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"> |
| | |
| | | </div> |
| | | |
| | | <shift-system-model ref="modalForm" @ok="modalFormOk"></shift-system-model> |
| | | </a-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .shift_system{ |
| | | overflow: auto; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .shift_system{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .shift_system{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .shift_system{ |
| | | height: 600px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .shift_system{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .shift_system{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <open-rate-fraction-analysis-main ref="openRateFractionAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-fraction-analysis-main> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <div style="width: 100%; height: 100%;"> |
| | | <a-card :bordered="false"> |
| | | <a-row type="flex" :gutter="16"> |
| | | <a-col :md="4"> |
| | | <a-col :md="5"> |
| | | <a-tabs :activeKey="activeKey" @change="tabChange"> |
| | | <a-tab-pane key="1" tab="车间层级" force-render> |
| | | <base-tree @getCurrSelected="changeSelectionNode"></base-tree> |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | <a-col :md="20"> |
| | | <a-col :md="19"> |
| | | <open-rate-trend-analysis-main ref="EfficiencyList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-trend-analysis-main> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <template> |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false" > |
| | | <a-spin :spinning="loading"> |
| | | <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px"> |
| | | <div slot="message"> |
| | | <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span> |
| | | <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消</a> |
| | | <span v-else>无</span> |
| | | </div> |
| | | </a-alert> |
| | | <div class="drawer-bootom-button"> |
| | | <a-dropdown :trigger="['click']" placement="bottomCenter"> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item> |
| | | <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item> |
| | | <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item> |
| | | </a-menu> |
| | | <a-button> |
| | | <a-icon type="bars"/> |
| | | </a-button> |
| | | </a-dropdown> |
| | | </div> |
| | | <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear |
| | | v-model="searchInput" @change="handleChange"/> |
| | | <!-- showLine --> |
| | | <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys" |
| | | :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" |
| | | :treeData="treeDataSource" |
| | | :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}"> |
| | | <template slot="title" slot-scope="{ title, parentId, entity, key}"> |
| | | <div style="display: flex;flex-direction: column;height: 100%"> |
| | | <div> |
| | | <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px"> |
| | | <div slot="message"> |
| | | <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span> |
| | | <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消</a> |
| | | <span v-else>无</span> |
| | | </div> |
| | | </a-alert> |
| | | <div class="drawer-bottom-button"> |
| | | <a-dropdown :trigger="['click']" placement="bottomCenter"> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item> |
| | | <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item> |
| | | <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item> |
| | | </a-menu> |
| | | <a-button> |
| | | <a-icon type="bars"/> |
| | | </a-button> |
| | | </a-dropdown> |
| | | </div> |
| | | </div> |
| | | <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear |
| | | v-model="searchInput" @change="handleChange"/> |
| | | <!-- showLine --> |
| | | <div style="flex: 1;overflow:auto;margin-top: 10px"> |
| | | <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys" |
| | | :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" |
| | | :treeData="treeDataSource" |
| | | :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}"> |
| | | <template slot="title" slot-scope="{ title, parentId, entity, key}"> |
| | | <span v-if="title.indexOf(searchValue) > -1"> |
| | | {{ title.substr(0, title.indexOf(searchValue)) }} |
| | | <span class="replaceSearch">{{ searchValue }}</span> |
| | | {{ title.substr(title.indexOf(searchValue) + searchValue.length) }} |
| | | </span> |
| | | <span v-else>{{ title }}</span> |
| | | <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter"> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item> |
| | | <a href="javascript:;" @click="handleEdit(entity)">编辑</a> |
| | | </a-menu-item> |
| | | <a-menu-item> |
| | | <a href="javascript:;" @click="batchDel(entity)"> |
| | | 删除 |
| | | </a> |
| | | </a-menu-item> |
| | | </a-menu> |
| | | <span :style="{position: 'absolute',right: 0}"> |
| | | <span v-else>{{ title }}</span> |
| | | <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter"> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item> |
| | | <a href="javascript:;" @click="handleEdit(entity)">编辑</a> |
| | | </a-menu-item> |
| | | <a-menu-item> |
| | | <a href="javascript:;" @click="batchDel(entity)"> |
| | | 删除 |
| | | </a> |
| | | </a-menu-item> |
| | | </a-menu> |
| | | <span :style="{position: 'absolute',right: 0}"> |
| | | <a-icon type="down"/> |
| | | </span> |
| | | </a-dropdown> |
| | | </template> |
| | | </a-tree> |
| | | </a-dropdown> |
| | | </template> |
| | | </a-tree> |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> |
| | | </a-card> |
| | |
| | | padding: 5px 15px 5px 37px; |
| | | } |
| | | |
| | | .drawer-bootom-button { |
| | | .drawer-bottom-button { |
| | | position: absolute; |
| | | top: 1px; |
| | | /* padding: 10px 16px; */ |
| | |
| | | background: #fff; |
| | | border-radius: 0 0 2px 2px; |
| | | } |
| | | |
| | | .tree_con{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .tree_con{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .tree_con{ |
| | | height: 748px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .tree_con{ |
| | | height: 600px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .tree_con{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .tree_con{ |
| | | height: 501px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | /deep/ .ant-card-body,/deep/ .ant-spin-nested-loading,/deep/ .ant-spin-container{ |
| | | height: 100%; |
| | | } |
| | | </style> |