From de0d853f5d199389508054e330340995d9da858b Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期二, 10 十月 2023 11:33:49 +0800
Subject: [PATCH] 1、优化部分页面布局问题 2、完善车间看板设备缩放以及拖拽功能
---
src/views/WorkshopSignage.vue | 136 ++++++++--
src/main.js | 3
package.json | 1
src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 228 ++++++++++-------
src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue | 411 ++++++++++++++++---------------
5 files changed, 459 insertions(+), 320 deletions(-)
diff --git a/package.json b/package.json
index ad615ed..fdd3f33 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"vue-area-linkage": "^5.1.0",
"vue-calendar-component": "^2.8.2",
"vue-cropper": "^0.5.4",
+ "vue-drag-resize": "^1.5.4",
"vue-i18n": "^8.7.0",
"vue-loader": "^15.7.0",
"vue-ls": "^3.2.0",
diff --git a/src/main.js b/src/main.js
index 1d7d559..d6820f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -72,6 +72,9 @@
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
+import VueDragResize from "vue-drag-resize"
+Vue.component('vue-drag-resize', VueDragResize)
+
// import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts
Vue.prototype.$qs = qs
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index cddcdfe..d77fc20 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -8,39 +8,79 @@
</header>
<dv-border-box-8 class="content-container">
- <div v-for="item in deviceList" :key="item.equipmentId" class="single-device"
- :style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"
- :id="item.equipmentId">
- <div class="device-status">
- <img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">
- <img v-if="item.status==1" src="@/assets/red.png" draggable="false">
- <img v-if="item.status==2" src="@/assets/gray.png" draggable="false">
- <img v-if="item.status==3" src="@/assets/green.png" draggable="false">
- <img :src="item.equipmentImageUrl" draggable="false">
+ <!--<div v-for="item in deviceList" :key="item.equipmentId" class="single-device"-->
+ <!--:style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"-->
+ <!--:id="item.equipmentId">-->
+ <!--<div class="device-status">-->
+ <!--<img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">-->
+ <!--<img v-if="item.status==1" src="@/assets/red.png" draggable="false">-->
+ <!--<img v-if="item.status==2" src="@/assets/gray.png" draggable="false">-->
+ <!--<img v-if="item.status==3" src="@/assets/green.png" draggable="false">-->
+ <!--<img :src="item.equipmentImageUrl" draggable="false">-->
+ <!--</div>-->
+ <!--<div class="device-id">{{item.equipmentId}}</div>-->
+ <!--<!–<div draggable="false" class="device-info">–>-->
+ <!--<!–<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>–>-->
+ <!--<!–<div v-if="item.status==1" class="status-square" style="background-color: red"></div>–>-->
+ <!--<!–<div v-if="item.status==2" class="status-square" style="background-color: green"></div>–>-->
+ <!--<!–<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>–>-->
+ <!--<!–<div class="device-id">{{item.equipmentId}}</div>–>-->
+ <!--<!–</div>–>-->
+ <!--<!–</div>–>-->
+ <!--</div>-->
+ <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
+ :h="item.vh" :x="item.left" :y="item.top"
+ v-on:resizing="resize($event,index)"
+ v-on:dragging="resize($event,index)"
+ :parentLimitation="true"
+ :minw="175"
+ :minh="135"
+ :id="item.equipmentId"
+
+ >
+ <div class="single-device"
+ :style="{width: + item.vw+ 'px',height:+item.vh+'px'}">
+ <div class="device-status">
+ <div v-if="item.status==0"
+ :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
+ <div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
+ class="status-image"></div>
+ <div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
+ class="status-image"></div>
+ <div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
+ class="status-image"></div>
+ <div
+ :style="{backgroundImage:`url(${item.equipmentImageUrl})`}"
+ class="device-image"></div>
+ </div>
+ <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
+ {{item.equipmentId}}
+ </div>
+ <!--<div draggable="false" class="device-info">-->
+ <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
+ <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
+ <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
+ <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
+ <!--<div class="device-id">{{item.equipmentId}}</div>-->
+ <!--</div>-->
</div>
- <div class="device-id">{{item.equipmentId}}</div>
- <!--<div draggable="false" class="device-info">-->
- <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
- <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
- <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
- <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
- <!--<div class="device-id">{{item.equipmentId}}</div>-->
- <!--</div>-->
- </div>
- <!--<div style="width: 175px;height: 135px;background-color: red;position: absolute;top: 200px;left: 100px"></div>-->
+ </VueDragResize>
</dv-border-box-8>
</dv-full-screen-container>
</template>
<script>
+ import VueDragResize from 'vue-drag-resize'
+
export default {
+ components: {
+ VueDragResize
+ },
data() {
return {
mouseX: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刋鍧愭爣
mouseY: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刌鍧愭爣,
dragging: false, //鏄惁鍦ㄦ嫋鎷戒腑
- left: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒宸︿晶鐨勮窛绂�
- top: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒椤堕儴鐨勮窛绂�,
elementId: '',// 琚嫋鎷藉厓绱犵殑id灞炴�у��
elementWidth: '',
elementHeight: '',
@@ -50,6 +90,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 200,
left: 100,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 1
},
{
@@ -57,6 +100,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 500,
left: 753,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 0
},
{
@@ -64,6 +110,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 300,
left: 860,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 2
},
{
@@ -71,6 +120,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 100,
left: 380,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 3
},
{
@@ -78,6 +130,9 @@
equipmentImageUrl: require('@/assets/8.png'),
top: 200,
left: 1500,
+ vw: 175,
+ vh: 135,
+ fontSize: 20,
status: 2
}
]
@@ -143,7 +198,7 @@
if (item.top < 0) {
item.top = 0
} else if (item.top + this.elementHeight + 80 > window.innerHeight) {
- item.top = window.innerHeight- this.elementHeight
+ item.top = window.innerHeight - this.elementHeight
}
if (item.left < 0) {
item.left = 0
@@ -170,7 +225,23 @@
*/
saveDevicePositionByApi() {
console.log('淇濆瓨浣嶇疆')
-
+ },
+ /**
+ * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
+ * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
+ * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
+ */
+ resize(newRect, index) {
+ console.log('newRect', newRect)
+ if (newRect.width > 200) {
+ this.deviceList[index].fontSize = newRect.width / 10
+ } else {
+ this.deviceList[index].fontSize = 20
+ }
+ this.deviceList[index].top = newRect.top
+ this.deviceList[index].left = newRect.left
+ this.deviceList[index].vw = newRect.width
+ this.deviceList[index].vh = newRect.height
}
},
mounted() {
@@ -215,15 +286,28 @@
justify-content: space-between;
cursor: default;
&:active {
- border: 1px solid #00b3ff;
+ border: 1px solid #1890ff;
}
.device-status {
- width: 145px;
+ width: 100%;
+ height: 100%;
display: flex;
justify-content: space-between;
+ .status-image {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 45px;
+ margin-right: 10px;
+ }
+ .device-image {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ }
}
.device-id {
- font-size: 20px;
+ /*font-size: 20px;*/
}
/*.device-info {*/
/*width: 100%;*/
diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
index b602fd4..4ff3ed5 100644
--- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
+++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
@@ -7,7 +7,8 @@
<a-row :gutter="24">
<a-col :md="6" :sm="6">
<a-form-item label="鏃堕棿">
- <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/>
+ <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">
@@ -20,26 +21,34 @@
<div class="openRateTrendDg">
<div id="Efficiency" class="container" style="margin-top: 20px;">
<div class="table2">
- <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: left;">
+ <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>
+ <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>-->
+ <!--<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">{{item.timeCount}}</td>
- <td class="tdgu3 kaitou">{{item.alarmContent}}</td>
+ <td class="tdgu kaitou">{{item.alarmCode}}</td>
+ <td class="tdgu1 kaitou">{{item.count}}</td>
+ <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>-->
+ <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>-->
<!--</template>-->
</tr>
</tbody>
@@ -65,6 +74,7 @@
import {
JeecgListMixin
} from '@/mixins/JeecgListMixin'
+
export default {
// mixins: [JeecgListMixin],
name: 'alarmAnalysisMain',
@@ -74,7 +84,7 @@
dataSource: [],
/* table鍔犺浇鐘舵�� */
loading: false,
- typeTree: "",
+ typeTree: '',
typeParent: 1,
typeEquipment: 1,
TreeIDOne: 1,
@@ -102,9 +112,9 @@
alarmTrend: '/mdc/alarmAnalyze/alarmTrend'
},
tableHeads: [],
- pieDate:[0],
- XData:[0],
- YData:[0],
+ pieDate: [0],
+ XData: [0],
+ YData: [0]
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -115,16 +125,16 @@
this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
- this.queryParam.typeTree = "1"
+ this.queryParam.typeTree = '1'
this.loadData1()
},
- mounted(){
+ mounted() {
this.drawWrin()
},
watch: {
Type(valmath) {
- this.dataList = [];
+ this.dataList = []
this.queryParam.typeTree = valmath
},
nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢
@@ -163,14 +173,14 @@
}
},
methods: {
- numBerTwo(value){
+ numBerTwo(value) {
if (value) {
return parseFloat((value * 100).toFixed(2))
} else {
return '0'
}
},
- TableDraw(key,val) {
+ TableDraw(key, val) {
let that = this
that.queryParam.alarmCode = val.alarmCode
console.log(this.queryParam)
@@ -179,10 +189,13 @@
that.YData = []
getAction(that.url.alarmTrend, that.queryParam).then(res => {
if (res.success) {
- for (var i = 0;i<res.result.equipmentCountList.length;i++){
- that.pieDate.push({name:res.result.equipmentCountList[i].key,value:res.result.equipmentCountList[i].count})
+ for (var i = 0; i < res.result.equipmentCountList.length; i++) {
+ that.pieDate.push({
+ name: res.result.equipmentCountList[i].key,
+ value: res.result.equipmentCountList[i].count
+ })
}
- for (var j = 0;j<res.result.dateCountList.length;j++){
+ for (var j = 0; j < res.result.dateCountList.length; j++) {
that.XData.push(res.result.dateCountList[j].key)
that.YData.push(res.result.dateCountList[j].count)
}
@@ -202,7 +215,7 @@
},
disabledDate(current) {
//Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ return current && current > moment().subtract('days', 1)
},
initDeviceType(deviceList) {
let dictCode = 'mdc_equipmentType'
@@ -236,19 +249,19 @@
this.queryParam.endDate = v2[1]
},
searchQuery() {
- if (this.dates&&this.dates.length>0){
- if (this.queryParam.typeTree == "1") {
+ if (this.dates && this.dates.length > 0) {
+ if (this.queryParam.typeTree == '1') {
this.queryParam.parentId = this.queryParamEquip.parentId
this.queryParam.equipmentId = this.queryParamEquip.equipmentId
} else {
this.queryParam.parentId = this.queryParamPeople.parentId
- this.queryParam.equipmentId = ""
+ this.queryParam.equipmentId = ''
}
this.loadData1()
- } else{
+ } else {
this.$notification.warning({
- message:'鎻愮ず',
- description:'璇烽�夋嫨鏃堕棿'
+ message: '鎻愮ず',
+ description: '璇烽�夋嫨鏃堕棿'
})
}
@@ -340,8 +353,8 @@
}
})
},
- drawWrin(){
- let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons');
+ drawWrin() {
+ let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons')
let equipmentWarningPieOption = {
title: {
text: '鍚勮澶囧嚭鐜版鎶ヨ鐨勬瘮渚�',
@@ -350,7 +363,7 @@
},
tooltip: {
trigger: 'item',
- formatter: "<br/>{b} : {c} ({d}%)"
+ formatter: '<br/>{b} : {c} ({d}%)'
},
calculable: true,
series: [{
@@ -370,27 +383,27 @@
}
}
},
- data:this.pieDate
+ data: this.pieDate
// data:[{name:'jjjjjjj',value:'2'}]
}]
- };
- equipmentWarningPie.setOption(equipmentWarningPieOption,true);
- let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons');
+ }
+ equipmentWarningPie.setOption(equipmentWarningPieOption, true)
+ let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons')
let equipmentWarningLineOption = {
- title : {
+ title: {
text: '姣忓ぉ鍑虹幇姝ゆ姤璀︾殑鏁伴噺璧板娍',
x: 'center',
y: 'bottom'
},
- tooltip:{
- trigger: 'item'
+ tooltip: {
+ trigger: 'axis'
},
calculable: true,
xAxis: [
{
type: 'category',
show: true,
- data:this.XData
+ data: this.XData
/*axisLabel :{
interval:0
}*/
@@ -407,16 +420,16 @@
name: '鎶ヨ鏁伴噺',
type: 'line',
data: this.YData,
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��'},
- {type : 'min', name: '鏈�灏忓��'}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��' },
+ { type: 'min', name: '鏈�灏忓��' }
]
}
}
]
- };
- equipmentWarningLine.setOption(equipmentWarningLineOption,true);
+ }
+ equipmentWarningLine.setOption(equipmentWarningLineOption, true)
}
}
}
@@ -456,28 +469,31 @@
.dataContent tr td {
height: 35px;
}
- .dataContent .mathData:hover td{
+
+ .dataContent .mathData:hover td {
background-color: #e6f7ff;
}
+
.dataContent .mathData td {
padding: 10px;
/*display: none;*/
}
- .dataContent .mathData .td {
+ .dataContent .mathData td {
/*background-color: #ff9bd2;*/
- display: inline-block;
- padding: 10px;
+ cursor: pointer;
}
.dataContent .mathData .tdd {
/*display: none;*/
}
- .table2{
+
+ .table2 {
width: 100%;
height: 100%;
overflow: auto;
}
+
/*tr th {*/
/*height: 50px!important;*/
/*}*/
@@ -485,126 +501,150 @@
/*height: 50px!important;*/
/*}*/
.table2 thead tr th:first-child,
- .table tbody tr .tdgu{
+ .table tbody tr .tdgu {
position: sticky;
left: 0;
z-index: 1;
}
- .table tbody tr .kaitou{
+
+ .table tbody tr .kaitou {
z-index: 1;
background-color: white;
}
- .table tbody tr .tdgu1{
+
+ .table tbody tr .tdgu1 {
position: sticky;
left: 150px;
z-index: 2;
}
- .table tbody tr .tdgu2{
+
+ .table tbody tr .tdgu2 {
position: sticky;
left: 300px;
z-index: 2;
}
- .table tbody tr .tdgu3{
+
+ .table tbody tr .tdgu3 {
position: sticky;
left: 450px;
z-index: 2;
}
- .table tbody tr .tdgu4{
+
+ .table tbody tr .tdgu4 {
position: sticky;
left: 550px;
z-index: 2;
}
- .table tbody tr .tdgu5{
+
+ .table tbody tr .tdgu5 {
position: sticky;
left: 700px;
z-index: 2;
}
+
.table2 thead tr .timeth,
- .table2 thead tr .thgu {
+ .table2 thead tr .thgu {
position: sticky;
- top:0;
+ top: 0;
z-index: 3;
}
- .table2 thead .gudingth th{
+
+ .table2 thead .gudingth th {
position: sticky;
top: 32px;
- z-index: 6!important;
+ z-index: 6 !important;
}
- .table2 thead .equipname .name{
+
+ .table2 thead .equipname .name {
z-index: 3;
}
- .table2 thead .equipname .dong1{
+
+ .table2 thead .equipname .dong1 {
z-index: 4;
left: 0;
/*border: 1px solid #000;*/
}
- .table2 thead .equipname .dong2{
+
+ .table2 thead .equipname .dong2 {
z-index: 5;
left: 150px;
}
- .table2 thead .equipname .dong3{
+
+ .table2 thead .equipname .dong3 {
z-index: 5;
left: 300px;
}
- .table2 thead .equipname .dong4{
+
+ .table2 thead .equipname .dong4 {
z-index: 5;
left: 450px;
}
- .table2 thead .equipname .dong5{
+
+ .table2 thead .equipname .dong5 {
z-index: 5;
left: 550px;
}
- .table2 thead .equipname .dong6{
+
+ .table2 thead .equipname .dong6 {
z-index: 5;
left: 700px;
}
- @media screen and (min-width: 1920px){
- #Efficiency{
- height: 337px!important;
+ @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;
+
+ @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;
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ #Efficiency {
+ height: 190px !important;
overflow: scroll;
}
}
- @media screen and (min-width: 1280px) and (max-width: 1400px){
- #Efficiency{
- height: 90px!important;
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ #Efficiency {
+ height: 90px !important;
overflow: scroll;
}
}
- @media screen and (max-width: 1280px){
- #Efficiency{
- height: 90px!important;
+
+ @media screen and (max-width: 1280px) {
+ #Efficiency {
+ height: 90px !important;
overflow: scroll;
}
}
- #Efficiency .table_guding1{
+
+ #Efficiency .table_guding1 {
position: absolute;
overflow: hidden;
width: 500px;
}
- #Efficiency .table_guding2{
+
+ #Efficiency .table_guding2 {
overflow-x: scroll;
width: 500px;
}
- /deep/ .ant-card{
- height: 100%!important;
+
+ /deep/ .ant-card {
+ height: 100% !important;
}
- /deep/ .ant-card .ant-card-body{
- height: 100%!important;
+
+ /deep/ .ant-card .ant-card-body {
+ height: 100% !important;
}
- .efficiency_list #DeviceList{
- height: 90%!important;
+
+ .efficiency_list #DeviceList {
+ height: 90% !important;
}
</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue b/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
index e1a41c1..223771c 100644
--- a/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
+++ b/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
@@ -1,63 +1,67 @@
<template>
- <div :bordered="false" class="device_list">
- <div class="com_box">
- <!-- 鏌ヨ鍖哄煙 -->
- <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="24">
- <a-col :md="4" :sm="4">
- <a-form-item label="璁惧缂栧彿">
- <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4">
- <a-form-item label="璁惧鍚嶇О">
- <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4" :xs="4">
- <a-form-item label="鏃ユ湡">
- <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' @change="dataChange"/>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4" :xs="4">
- <a-form-item label="闂撮殧">
- <a-select default-value="2" style="width: 80px" v-model="queryParam.timeType">
- <a-select-option :value="2">
- 2
- </a-select-option>
- <a-select-option :value="3">
- 3
- </a-select-option>
- <a-select-option :value="4">
- 4
- </a-select-option>
- <a-select-option :value="6">
- 6
- </a-select-option>
- </a-select>灏忔椂
- </a-form-item>
- </a-col>
- <a-col :md="3" :sm="3" :xs="3">
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- </a-col>
- <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <a-spin :spinning="loading">
+ <div :bordered="false" class="device_list">
+ <div class="com_box">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24">
+ <a-col :md="4" :sm="4">
+ <a-form-item label="璁惧缂栧彿">
+ <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4">
+ <a-form-item label="璁惧鍚嶇О">
+ <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="鏃ユ湡">
+ <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD'
+ @change="dataChange"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="闂撮殧">
+ <a-select default-value="2" style="width: 80px" v-model="queryParam.timeType">
+ <a-select-option :value="2">
+ 2
+ </a-select-option>
+ <a-select-option :value="3">
+ 3
+ </a-select-option>
+ <a-select-option :value="4">
+ 4
+ </a-select-option>
+ <a-select-option :value="6">
+ 6
+ </a-select-option>
+ </a-select>
+ 灏忔椂
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ </a-col>
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
<!--<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>-->
- <!--</a-col>-->
- </a-row>
- </a-form>
- </div>
- <!-- table鍖哄煙-begin -->
- <div id="DeviceList">
-
- <div style="padding: 5px;width: 100%;height: 100%">
- <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
- <!--<div id="dayAvailLine"></div>-->
+ <!--</a-col>-->
+ </a-row>
+ </a-form>
</div>
+ <!-- table鍖哄煙-begin -->
+ <div id="DeviceList">
+
+ <div style="padding: 5px;width: 100%;height: 100%">
+ <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
+ <!--<div id="dayAvailLine"></div>-->
+ </div>
+ </div>
+ <!-- table鍖哄煙-end -->
</div>
- <!-- table鍖哄煙-end -->
</div>
- </div>
+ </a-spin>
</template>
<script>
@@ -78,6 +82,7 @@
import JEllipsis from '@/components/jeecg/JEllipsis'
import Tooltip from 'ant-design-vue/es/tooltip'
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
+
export default {
name: 'equipmentDayAvailMain',
// mixins: [JeecgListMixin],
@@ -91,38 +96,39 @@
JDate,
JEllipsis
},
- props: { nodeTree: '', Type:'',nodePeople: '' },
+ props: { nodeTree: '', Type: '', nodePeople: '' },
data() {
return {
activeKey: '1',
- typeTree:"",
- typeParent:1,
- typeEquipment:1,
- spaceTime:[],
- useingRates:[],
+ typeTree: '',
+ typeParent: 1,
+ typeEquipment: 1,
+ spaceTime: [],
+ useingRates: [],
dates: [],
- xianshi:"",
- readOnly:true,
+ xianshi: '',
+ readOnly: true,
queryParam: {
- dateTime:undefined,
- timeType:'2'
+ dateTime: undefined,
+ timeType: '2'
},
- queryParams:{},
- queryParamEquip:{},
- queryParamPeople:{},
- dataStartsoucre:[],
+ queryParams: {},
+ queryParamEquip: {},
+ queryParamPeople: {},
+ dataStartsoucre: [],
url: {
- comparativeAnalysis:'/mdc/efficiencyReport/comparativeAnalysis',
- dayUtilizationRate:'/mdc/efficiencyReport/dayUtilizationRate',
+ comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis',
+ dayUtilizationRate: '/mdc/efficiencyReport/dayUtilizationRate',
getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
- getEquipmentByDepPid:'/mdc/mdcEquipment/getEquipmentByDepPid'
+ getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid'
},
- AnalysisList:{}
+ AnalysisList: {},
+ loading: false
}
},
- watch:{
- Type(valmath){
- this.dataList = [];
+ watch: {
+ Type(valmath) {
+ this.dataList = []
this.queryParams.typeTree = valmath
// console.log(this.queryParams.typeTree)
},
@@ -130,7 +136,7 @@
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
// this.$set(this.queryParam, 'tierName', val.title)
- this.queryParamEquip.parentId = ""
+ this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
this.searchQuery()
@@ -141,14 +147,13 @@
this.initEquipment(val.key)
}
-
}
},
- nodePeople(val){
+ nodePeople(val) {
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
// this.$set(this.queryParam, 'tierName', val.title)
- this.queryParamEquip.parentId = ""
+ this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
this.searchQuery()
@@ -164,8 +169,8 @@
},
methods: {
moment,
- drawTu(){
- let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons');
+ drawTu() {
+ let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
//dayAvailLine = echarts.init(document.getElementById('dayAvailLine'));
let dayAvailBarOption = {
title: {
@@ -174,21 +179,21 @@
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
- color: "#151414"
+ color: '#151414'
}
},
tooltip: {
trigger: 'axis',
- formatter: "{a} <br/>{b} :({c}%)"
+ formatter: '{a} <br/>{b} :({c}%)'
},
toolbox: {
show: true,
feature: {
- mark: {show: true},
- dataView: {show: true, readOnly: false},
- magicType: {show: true, type: ['line', 'bar']},
- restore: {show: true},
- saveAsImage: {show: true}
+ mark: { show: true },
+ dataView: { show: true, readOnly: false },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true }
}
},
calculable: true, //鏄惁鍚敤鎷栨嫿閲嶈绠楃壒鎬�
@@ -219,18 +224,18 @@
data: this.useingRates,
markPoint: {
data: [
- {type: 'max', name: '鏈�澶у��', symbolSize: 70},
- {type: 'min', name: '鏈�灏忓��', symbolSize: 70}
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
}
}
]
- };
- dayAvailBar.setOption(dayAvailBarOption);
+ }
+ dayAvailBar.setOption(dayAvailBarOption)
},
- disabledDate(current){
+ disabledDate(current) {
//Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ return current && current > moment().subtract('days', 1)
},
dataChange(val) {
this.queryParam.dateTime = val.format('YYYYMMDD')
@@ -248,11 +253,12 @@
this.queryParam.endTime = v2[1]
// console.log(v2[0],v2[1])
},
- loadAnalysis(){
- getAction(this.url.dayUtilizationRate,this.queryParam).then(res => {
+ loadAnalysis() {
+ this.loading = true
+ getAction(this.url.dayUtilizationRate, this.queryParam).then(res => {
if (res.success) {
this.spaceTime.push(res.result.dataList)
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(res.result.dayRateDto[i].utilizationRate)
}
// console.log(this,spaceTime)
@@ -260,9 +266,9 @@
} else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
@@ -275,119 +281,117 @@
return '0'
}
},
- searchQuery(){
- if(this.queryParam.dateTime){
+ searchQuery() {
+ if (this.queryParam.dateTime) {
+ this.loading = true
this.spaceTime = []
this.useingRates = []
- if(this.queryParams.typeTree == "1"){
- this.queryParams.parentId = this.queryParamEquip.parentId
- // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
-
- }else{
+ if (this.queryParams.typeTree == '1') {
this.queryParams.parentId = this.queryParamEquip.parentId
-
+ // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
+ } else {
+ this.queryParams.parentId = this.queryParamEquip.parentId
// this.queryParams.equipmentId = ""
}
- this.AnalysisList = [];
+ this.AnalysisList = []
//鑾峰彇鏌ヨ鏉′欢
- this.queryParam.parentId = this.queryParams.parentId;
- this.queryParam.equipmentId = this.queryParams.equipmentId;
+ this.queryParam.parentId = this.queryParams.parentId
+ this.queryParam.equipmentId = this.queryParams.equipmentId
this.queryParam.typeTree = this.queryParams.typeTree
- getAction(this.url.dayUtilizationRate,this.queryParam).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParam).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
})
- }else{
+ } else {
this.$notification.warning({
- message:'娑堟伅',
- description:'璇烽�夋嫨鏃堕棿'
- });
+ message: '娑堟伅',
+ description: '璇烽�夋嫨鏃堕棿'
+ })
}
-
},
searchReset() {
this.spaceTime = []
this.useingRates = []
- if(this.queryParams.typeTree == "1"){
+ if (this.queryParams.typeTree == '1') {
this.typeTree = this.queryParams.typeTree
- this.typeParent = this.queryParams.parentId
+ this.typeParent = this.queryParams.parentId
this.typeEquipment = this.queryParams.equipmentId
this.queryParams = {}
this.queryParam = {}
this.queryParams.typeTree = this.typeTree
this.queryParams.parentId = this.typeParent
- if(this.queryParams.parentId != ""){
- this.queryParams.equipmentId = ""
+ if (this.queryParams.parentId != '') {
+ this.queryParams.equipmentId = ''
this.initEquipment()
- }else{
- if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
- this.queryParams.equipmentId = this.typeEquipment
- }else{
+ } else {
+ if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
+ this.queryParams.equipmentId = this.typeEquipment
+ } else {
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.dayUtilizationRate,this.queryParams).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
})
- }else{
+ } else {
this.typeTree = this.queryParams.typeTree
- this.typeParent = this.queryParams.parentId
+ this.typeParent = this.queryParams.parentId
this.typeEquipment = this.queryParams.equipmentId
this.queryParams = {}
this.queryParam = {}
this.dates = []
this.queryParams.typeTree = this.typeTree
this.queryParams.parentId = this.typeParent
- if(this.queryParams.parentId != ""){
- this.queryParams.equipmentId = ""
+ if (this.queryParams.parentId != '') {
+ this.queryParams.equipmentId = ''
this.initEquipment()
- }else{
- if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
- this.queryParams.equipmentId = this.typeEquipment
- }else{
+ } else {
+ if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
+ this.queryParams.equipmentId = this.typeEquipment
+ } else {
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.dayUtilizationRate,this.queryParams).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
@@ -411,16 +415,16 @@
this.equipment = {}
// _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒')
_this.$notification.warning({
- message:'娑堟伅',
- description:'璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
- });
+ message: '娑堟伅',
+ description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
+ })
}
- }else{
+ } else {
// this.$message.warning(res.message)
_this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
@@ -441,85 +445,92 @@
this.equipment = {}
// _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒')
_this.$notification.warning({
- message:'娑堟伅',
- description:'璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
- });
+ message: '娑堟伅',
+ description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
+ })
}
- }else{
+ } else {
// this.$message.warning(res.message)
_this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
}
},
created() {
- let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
+ let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
-
- this.queryParams.collectTime = collectTime;
+ this.queryParams.collectTime = collectTime
this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
this.queryParams.typeTree = '1'
this.initEquipment()
- },
+ }
}
</script>
<style lang="less" scoped>
/*@import '~@assets/less/common.less';*/
- @media screen and (min-width: 1920px){
- .device_list{
- height: 811px!important;
+ @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;
+
+ @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;
+
+ @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;
+
+ @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;
+
+ @media screen and (max-width: 1280px) {
+ .device_list {
+ height: 564px !important;
overflow: scroll;
}
}
+
/*.device_list{*/
/*display: flex;*/
/*}*/
/*.device_list .table-page-search-wrapper{*/
/**/
/*}*/
- /deep/ .ant-card-body{
- height: 100%!important;
+ /deep/ .ant-card-body {
+ height: 100% !important;
}
- .device_list .com_box{
- display: flex!important;
- height: 100%!important;
- flex-direction: column!important;
+
+ .device_list .com_box {
+ display: flex !important;
+ height: 100% !important;
+ flex-direction: column !important;
}
- .device_list .table-page-search-wrapper{
- height: 6%!important;
+
+ .device_list .table-page-search-wrapper {
+ height: 6% !important;
}
- .device_list #DeviceList{
- height: 90%!important;
+
+ .device_list #DeviceList {
+ height: 90% !important;
}
</style>
--
Gitblit v1.9.3