<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="5" :sm="5">
|
<a-form-item label="设备">
|
<a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch"
|
placeholder='请选择设备'/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5">
|
<a-form-item label="设备类型">
|
<a-select
|
:value="queryParam.equipmentType"
|
mode="multiple"
|
placeholder="请选择设备类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'equipmentType')"
|
>
|
<a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="6" :sm="6">
|
<a-form-item label="驱动类型">
|
<a-select
|
:value="queryParam.driveType"
|
mode="multiple"
|
placeholder="请选择驱动类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'driveType')"
|
>
|
<a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</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"/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="2" :sm="2">
|
<a
|
@click="toggleSearchStatus=!toggleSearchStatus"
|
@selectstart="$event.preventDefault()"
|
style="display: inline-block;height: 32px;line-height: 32px"
|
>
|
{{ toggleSearchStatus ? '收起' : '展开' }}
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
</a>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24" v-if="toggleSearchStatus">
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="设备级别">
|
<a-select
|
:value="queryParam.deviceLevel"
|
mode="multiple"
|
placeholder="请选择设备级别"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'deviceLevel')"
|
>
|
<a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="重要程度">
|
<a-select
|
v-model="queryParam.deviceImportanceLevel"
|
placeholder="请选择设备重要程度"
|
allow-clear
|
>
|
<a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value"
|
:key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<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>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<!-- table区域-begin -->
|
<div id="DeviceList">
|
<a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top">
|
<a-tab-pane key="1" tab="图形">
|
<comparative-analysis-bar ref="AnalysisBar" :dataList='AnalysisBarList'></comparative-analysis-bar>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="仪表" forceRender>
|
<comparative-analysis-gauge ref="AnalysisGauge" :dataList="AnalysisGauge"></comparative-analysis-gauge>
|
</a-tab-pane>
|
<a-tab-pane key="3" tab="饼图" forceRender>
|
<conparative-analysis-pie ref="AnalysisPie" :dataList="AnalysisPie"></conparative-analysis-pie>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
<!-- table区域-end -->
|
</div>
|
|
<SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"></SelectDeviceDrawer>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import JDictSelectTag from '@/components/dict/JDictSelectTag'
|
import JDate from '../../../../../components/jeecg/JDate'
|
import { requestPut, deleteAction, getAction } from '@/api/manage'
|
import comparativeAnalysisBar from './comparativeAnalysisBar'
|
import comparativeAnalysisGauge from './comparativeAnalysisGauge'
|
import conparativeAnalysisPie from './conparativeAnalysisPie'
|
import '@/components/table2excel/table2excel'
|
import JInput from '@/components/jeecg/JInput'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
|
import api from '@/api/mdc'
|
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'
|
|
export default {
|
name: 'comparativeAnalysismain',
|
components: {
|
comparativeAnalysisBar,
|
comparativeAnalysisGauge,
|
conparativeAnalysisPie,
|
JDictSelectTag,
|
JInput,
|
JDate,
|
JEllipsis,
|
SelectDeviceDrawer
|
},
|
props: { nodeTree: '', Type: '', nodePeople: '' },
|
data() {
|
return {
|
activeKey: '1',
|
typeTree: '',
|
typeParent: 1,
|
typeEquipment: 1,
|
AnalysisBarList: [],
|
AnalysisGauge: [],
|
AnalysisPie: [],
|
dates: [],
|
queryParam: {
|
equipmentId: '',
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: []
|
},
|
queryParams: {},
|
queryParamEquip: {},
|
queryParamPeople: {},
|
url: {
|
comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis',
|
queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
|
},
|
AnalysisList: {},
|
equipmentTypeList: [],
|
driveTypeList: [],
|
device_level_list: [],
|
device_importance_level_list: [],
|
toggleSearchStatus: ''
|
}
|
},
|
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.queryParam.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()
|
}
|
}
|
},
|
methods: {
|
queryGroup() {
|
getAction(this.url.queryEquipmentType).then(res => {
|
if (res.success) {
|
this.equipmentTypeList = res.result.map(item => {
|
return {
|
label: item.equipmentTypeName,
|
value: item.equipmentTypeName
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
},
|
|
loadAnalysis(queryParam) {
|
getAction(this.url.comparativeAnalysis, 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.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
|
searchQuery() {
|
if (this.dates && this.dates.length > 0) {
|
this.AnalysisList = []
|
this.AnalysisBarList = []
|
this.AnalysisGauge = []
|
this.AnalysisPie = []
|
this.queryParams.parentId = this.queryParamEquip.parentId
|
//获取查询条件
|
this.queryParam.parentId = this.queryParams.parentId
|
this.queryParam.typeTree = this.queryParams.typeTree
|
|
const queryParam = Object.assign({}, this.queryParam)
|
Object.keys(queryParam).forEach(item => {
|
if (Array.isArray(queryParam[item])) {
|
queryParam[item] = queryParam[item].join()
|
// 此处为保证接口参数不多余，可省略
|
if (queryParam[item].length === 0) delete queryParam[item]
|
}
|
})
|
this.loadAnalysis(queryParam)
|
} else {
|
this.$notification.warning({
|
message: '提示',
|
description: '请选择时间'
|
})
|
}
|
|
},
|
|
searchReset() {
|
this.AnalysisList = []
|
this.AnalysisBarList = []
|
this.AnalysisGauge = []
|
this.AnalysisPie = []
|
this.typeTree = this.queryParams.typeTree
|
this.typeParent = this.queryParams.parentId
|
this.typeEquipment = this.queryParams.equipmentId
|
this.queryParams = {}
|
this.queryParam = {
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: []
|
}
|
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.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(this.queryParam)
|
},
|
|
// 调用接口获取控制系统类型
|
getDriveTypeByApi() {
|
api.getDriveTypeApi().then((res) => {
|
if (res.success) this.driveTypeList = res.result
|
})
|
},
|
|
initDictData(dictCode) {
|
// //优先从缓存中读取字典配置
|
if (getDictItemsFromCache(dictCode)) {
|
this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
|
return
|
}
|
//根据字典Code, 初始化字典数组
|
ajaxGetDictItems(dictCode, null).then((res) => {
|
if (res.success) {
|
this[dictCode + '_list'] = res.result
|
return
|
}
|
})
|
},
|
|
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(',')
|
},
|
|
selectChange(value, key) {
|
this.queryParam[key] = value
|
},
|
|
tabChange(val) {
|
this.activeKey = val
|
},
|
|
dateParamChange(v1, v2) {
|
this.queryParam.startTime = v2[0]
|
this.queryParam.endTime = v2[1]
|
}
|
},
|
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.queryParam)
|
this.getDriveTypeByApi()
|
this.queryGroup()
|
this.initDictData('device_level')
|
this.initDictData('device_importance_level')
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/*@import '~@assets/less/common.less';*/
|
|
@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;
|
}
|
}
|
|
/*.device_list{*/
|
/*display: flex;*/
|
/*}*/
|
/*.device_list .table-page-search-wrapper{*/
|
/**/
|
/*}*/
|
/deep/ .ant-card-body {
|
height: 100% !important;
|
}
|
|
.device_list .com_box {
|
display: flex !important;
|
height: 100% !important;
|
flex-direction: column !important;
|
}
|
|
.device_list #DeviceList {
|
height: 90% !important;
|
}
|
</style>
|
