| package.json | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/main.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/WorkshopSignage.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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", 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 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, // 鼠标在元素内的X坐标 mouseY: 0, // 鼠标在元素内的Y坐标, 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%;*/ 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> 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>
