<template>
|
<div class="device_list">
|
<!-- 查询区域 -->
|
<div style="background-color: #fff" class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="5" :sm="5">
|
<a-form-item label="设备">
|
<a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch"
|
@click="deviceSearch"
|
placeholder='请选择设备'/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5">
|
<a-form-item label="驱动类型">
|
<a-auto-complete
|
v-model="queryParam.driveType"
|
:data-source="driveTypeList"
|
placeholder="驱动类型"
|
:filter-option="filterOption"
|
:allowClear="true"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="6" :xs="6">
|
<a-form-item label="时间">
|
<a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="3" :sm="3" :xs="3">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<a-spin :spinning="spinning">
|
<a-tabs tabPosition="top" id="custom-tabs">
|
<a-tab-pane key="1" tab="图形">
|
<ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'/>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="仪表" forceRender>
|
<ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"/>
|
</a-tab-pane>
|
<a-tab-pane key="3" tab="饼图" forceRender>
|
<ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"/>
|
</a-tab-pane>
|
</a-tabs>
|
</a-spin>
|
|
<SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { getAction } from '@/api/manage'
|
import api from '@/api/mdc'
|
import ComparativeAnalysisBar from './ComparativeAnalysisBar'
|
import ComparativeAnalysisGauge from './ComparativeAnalysisGauge'
|
import ComparativeAnalysisPie from './ComparativeAnalysisPie'
|
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'
|
|
export default {
|
name: 'ComparativeAnalysisMain',
|
components: {
|
ComparativeAnalysisBar,
|
ComparativeAnalysisGauge,
|
ComparativeAnalysisPie,
|
SelectDeviceDrawer
|
},
|
props: { nodeTree: '', Type: '', nodePeople: '' },
|
data() {
|
return {
|
typeTree: '',
|
typeParent: 1,
|
typeEquipment: 1,
|
AnalysisBarList: [],
|
AnalysisGauge: [],
|
AnalysisPie: [],
|
dates: [],
|
queryParam: {
|
equipmentId: ''
|
},
|
queryParams: {},
|
queryParamEquip: {},
|
url: {
|
comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis'
|
},
|
AnalysisList: {},
|
driveTypeList: [],
|
spinning: false
|
}
|
},
|
watch: {
|
Type(valmath) {
|
this.dataList = []
|
this.queryParams.typeTree = valmath
|
},
|
nodeTree(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId) {
|
this.queryParamEquip.parentId = ''
|
this.queryParam.equipmentId = val.equipmentId
|
this.queryParamEquip.equipmentId = val.equipmentId
|
} else {
|
this.queryParamEquip.parentId = val.key
|
this.queryParams.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
},
|
nodePeople(val) {
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId) {
|
this.queryParamEquip.parentId = ''
|
this.queryParams.equipmentId = val.equipmentId
|
this.queryParamEquip.equipmentId = val.equipmentId
|
} else {
|
this.queryParamEquip.parentId = val.key
|
this.queryParams.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
}
|
},
|
created() {
|
this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParam.typeTree = '1'
|
this.loadAnalysis()
|
this.getDriveTypeByApi()
|
},
|
mounted() {
|
const tabsBar = document.querySelector('#custom-tabs .ant-tabs-bar')
|
const tabsContent = document.querySelector('#custom-tabs .ant-tabs-content')
|
const tabsBarHeight = window.getComputedStyle(tabsBar).height
|
const tabsBarMarginBottom = window.getComputedStyle(tabsBar).marginBottom
|
tabsContent.style.height = `calc(100% - ${tabsBarHeight} - ${tabsBarMarginBottom})`
|
},
|
methods: {
|
dateParamChange(v1, v2) {
|
this.queryParam.startTime = v2[0]
|
this.queryParam.endTime = v2[1]
|
},
|
|
loadAnalysis() {
|
this.spinning = true
|
getAction(this.url.comparativeAnalysis, this.queryParam).then(res => {
|
if (res.success) {
|
this.AnalysisList = res.result
|
this.AnalysisBarList = res.result.graphics
|
this.AnalysisGauge = res.result.meters
|
this.AnalysisPie.push(res.result.pieCharts)
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
this.spinning = false
|
})
|
},
|
|
searchQuery() {
|
this.AnalysisList = []
|
this.AnalysisBarList = []
|
this.AnalysisGauge = []
|
this.AnalysisPie = []
|
if (this.queryParams.typeTree == '1') {
|
this.queryParams.parentId = this.queryParamEquip.parentId
|
} else {
|
this.queryParams.parentId = this.queryParamEquip.parentId
|
}
|
this.AnalysisList = []
|
//获取查询条件
|
this.queryParam.parentId = this.queryParams.parentId
|
this.queryParam.typeTree = this.queryParams.typeTree
|
this.loadAnalysis()
|
},
|
|
searchReset() {
|
this.AnalysisList = []
|
this.AnalysisBarList = []
|
this.AnalysisGauge = []
|
this.AnalysisPie = []
|
if (this.queryParams.typeTree == '1') {
|
this.typeTree = this.queryParams.typeTree
|
this.typeParent = this.queryParams.parentId
|
this.typeEquipment = this.queryParams.equipmentId
|
this.queryParams = {}
|
this.queryParam = {}
|
this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParams.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParams.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParams.typeTree = this.typeTree
|
this.queryParams.parentId = this.typeParent
|
if (this.queryParams.parentId != '') {
|
this.queryParams.equipmentId = ''
|
} else {
|
if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
|
this.queryParams.equipmentId = this.typeEquipment
|
} else {
|
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
|
}
|
}
|
} else {
|
this.typeTree = this.queryParams.typeTree
|
this.typeParent = this.queryParams.parentId
|
this.typeEquipment = this.queryParams.equipmentId
|
this.queryParams = {}
|
this.queryParam = {}
|
this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParams.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParams.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParams.typeTree = this.typeTree
|
this.queryParams.parentId = this.typeParent
|
if (this.queryParams.parentId != '') {
|
this.queryParams.equipmentId = ''
|
} else {
|
if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
|
this.queryParams.equipmentId = this.typeEquipment
|
} else {
|
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
|
}
|
}
|
}
|
this.loadAnalysis()
|
},
|
|
/**
|
* 调用接口获取控制系统类型
|
*/
|
getDriveTypeByApi() {
|
api.getDriveTypeApi().then((res) => {
|
this.driveTypeList = res.result.map(item => item.value)
|
})
|
},
|
|
/**
|
* 联想输入框筛选功能
|
* @param input 输入的内容
|
* @param option 配置
|
* @returns {boolean} 判断是否筛选
|
*/
|
filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
|
)
|
},
|
|
deviceSearch() {
|
this.$refs.selectDeviceDrawer.visible = true
|
this.$refs.selectDeviceDrawer.selectedRowKeys = []
|
this.$refs.selectDeviceDrawer.selectedRows = []
|
this.$refs.selectDeviceDrawer.checkedKeys = this.queryParam.equipmentId.split(',')
|
},
|
|
/**
|
* 选择已有设备后点击确定时触发
|
* @param data 已选择的设备
|
*/
|
selectOK(data) {
|
this.queryParam.equipmentId = data.join(',')
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.device_list {
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
/deep/ .ant-spin-nested-loading {
|
flex: 1;
|
overflow: hidden;
|
|
.ant-spin-container {
|
height: 100%;
|
|
.ant-tabs {
|
height: 100%;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
|
@media screen and (min-width: 1920px) {
|
.device_list {
|
height: 811px !important;
|
}
|
}
|
|
@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) {
|
.device_list {
|
height: 663px !important;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.device_list {
|
height: 564px !important;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.device_list {
|
height: 564px !important;
|
}
|
}
|
</style>
|
