<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 placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>-->
|
<!--</a-form-item>-->
|
<!--</a-col>-->
|
<a-col :md="5" :sm="5">
|
<a-form-item label="设备">
|
<a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"
|
placeholder='请选择设备'/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5">
|
<a-form-item label="驱动类型">
|
<!--<j-dict-select-tag placeholder="请选择驱动类型"-->
|
<!--:triggerChange="true" dictCode="mdc_driveType"-->
|
<!--v-model="queryParam.driveType" allow-clear/>-->
|
<a-auto-complete
|
v-model="queryParam.driveType"
|
:data-source="driveTypeList"
|
placeholder="驱动类型"
|
:filter-option="filterOption"
|
/>
|
</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>
|
<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>
|
|
<selectDeviceModal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"></selectDeviceModal>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import $ from 'jquery'
|
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 Tooltip from 'ant-design-vue/es/tooltip'
|
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
|
import api from '@/api/mdc'
|
import selectDeviceModal from '../../../../system/modules/SelectDeviceModal.vue'
|
|
export default {
|
name: 'comparativeAnalysismain',
|
// mixins: [JeecgListMixin],
|
components: {
|
Tooltip,
|
comparativeAnalysisBar,
|
comparativeAnalysisGauge,
|
conparativeAnalysisPie,
|
JDictSelectTag,
|
JInput,
|
JDate,
|
JEllipsis,
|
selectDeviceModal
|
},
|
props: { nodeTree: '', Type: '', nodePeople: '' },
|
data() {
|
return {
|
activeKey: '1',
|
typeTree: '',
|
typeParent: 1,
|
typeEquipment: 1,
|
AnalysisBarList: [],
|
AnalysisGauge: [],
|
AnalysisPie: [],
|
dates: [],
|
xianshi: '',
|
readOnly: true,
|
queryParam: {
|
equipmentId: ''
|
},
|
queryParams: {},
|
queryParamEquip: {},
|
queryParamPeople: {},
|
dataStartsoucre: [],
|
url: {
|
comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis'
|
},
|
AnalysisList: {},
|
driveTypeList: []
|
}
|
},
|
watch: {
|
Type(valmath) {
|
this.dataList = []
|
this.queryParams.typeTree = valmath
|
// console.log(this.queryParams.typeTree)
|
},
|
nodeTree(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId) {
|
// this.$set(this.queryParam, 'tierName', val.title)
|
this.queryParamEquip.parentId = ''
|
// this.queryParams.equipmentId = val.equipmentId
|
this.queryParam.equipmentId = val.equipmentId
|
this.queryParamEquip.equipmentId = val.equipmentId
|
} else {
|
// this.$set(this.queryParam, 'tierName', val.title)
|
this.queryParamEquip.parentId = val.key
|
this.queryParams.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
},
|
nodePeople(val) {
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId) {
|
// this.$set(this.queryParam, 'tierName', val.title)
|
this.queryParamEquip.parentId = ''
|
this.queryParams.equipmentId = val.equipmentId
|
this.queryParamEquip.equipmentId = val.equipmentId
|
} else {
|
// this.$set(this.queryParam, 'tierName', val.title)
|
this.queryParamEquip.parentId = val.key
|
this.queryParams.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
}
|
},
|
methods: {
|
tabChange(val) {
|
this.activeKey = val
|
},
|
dateParamChange(v1, v2) {
|
// console.log(v1,v2)
|
this.queryParam.startTime = v2[0]
|
this.queryParam.endTime = v2[1]
|
console.log(v2[0], v2[1])
|
},
|
loadAnalysis() {
|
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.loading = false
|
})
|
},
|
searchQuery() {
|
if (this.dates && this.dates.length > 0) {
|
this.AnalysisList = []
|
this.AnalysisBarList = []
|
this.AnalysisGauge = []
|
this.AnalysisPie = []
|
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.queryParam.parentId = this.queryParams.parentId
|
// this.queryParam.equipmentId = this.queryParams.equipmentId
|
this.queryParam.typeTree = this.queryParams.typeTree
|
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)
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
} else {
|
this.$notification.warning({
|
message: '提示',
|
description: '请选择时间'
|
})
|
}
|
|
},
|
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 = []
|
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
|
}
|
}
|
getAction(this.url.comparativeAnalysis, this.queryParams).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)
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
} else {
|
this.typeTree = this.queryParams.typeTree
|
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 = ''
|
} else {
|
if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
|
this.queryParams.equipmentId = this.typeEquipment
|
} else {
|
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
|
}
|
}
|
getAction(this.url.comparativeAnalysis, this.queryParams).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)
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
},
|
/**
|
* 调用接口获取控制系统类型
|
*/
|
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
|
)
|
},
|
// onChange(value, dateString) {
|
// // console.log('Selected Time: ', value);
|
// // console.log('Formatted Selected Time: ', dateString);
|
// },
|
// searchReset() {
|
// 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 = []
|
// 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.ipagination.current = 1
|
// this.ResetloadData();
|
// }else{
|
// this.typeTree = this.queryParams.typeTree
|
// 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
|
// // this.queryParams.equipmentId = this.typeEquipment
|
// this.ipagination.current = 1
|
// this.ResetloadData();
|
// }
|
//
|
// },
|
// ResetloadData() {
|
// if(!this.url.list){
|
// this.$message.error("请设置url.list属性!")
|
// return
|
// }
|
// var params = {}
|
// params.typeTree = this.queryParams.typeTree
|
// params.parentId = this.queryParams.parentId
|
// params.equipmentId = this.queryParams.equipmentId
|
// this.loading = true;
|
// getAction(this.url.list, params).then((res) => {
|
// if (res.success) {
|
// this.dataSource = res.result.records||res.result;
|
// }else{
|
// this.$message.warning(res.message)
|
// }
|
// }).finally(() => {
|
// this.loading = false
|
// })
|
// },
|
// searchQuery(){
|
// if(this.queryParams.typeTree == "1"){
|
// this.queryParams.parentId = this.queryParamEquip.parentId
|
// // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
|
//
|
// }else{
|
// this.queryParams.parentId = this.queryParamPeople.parentId
|
//
|
// // this.queryParams.equipmentId = ""
|
// }
|
// this.dataSource = [];
|
// //获取查询条件
|
// let param = {}
|
// param.parentId = this.queryParams.parentId;
|
// param.equipmentId = this.queryParams.equipmentId;
|
// param.startTime = this.queryParam.startTime;
|
// param.driveType = this.queryParam.driveType;
|
// param.endTime = this.queryParam.endTime;
|
// getAction(this.url.list,param).then((res) => {
|
// if(res.success){
|
// this.dataSource = res.result.records||res.result;
|
// }else{
|
// this.$message.warning(res.message)
|
// }
|
// }).finally(() => {
|
// this.loading = false
|
// })
|
// },
|
// loadData() {
|
// if(!this.url.list){
|
// this.$message.error("请设置url.list属性!")
|
// return
|
// }
|
// //加载数据 若传入参数1则加载第一页的内容
|
// var params = {}
|
// this.loading = true;
|
// params.startTime = this.queryParam.startTime;
|
// params.endTime = this.queryParam.endTime;
|
// params.typeTree = this.queryParams.typeTree
|
// getAction(this.url.list, params).then((res) => {
|
// if (res.success) {
|
// this.dataSource = res.result.records||res.result;
|
// }else{
|
// this.$message.warning(res.message)
|
// }
|
// }).finally(() => {
|
// this.loading = false
|
// })
|
// },
|
deviceSearch() {
|
console.log('触发')
|
this.$refs.selectDeviceModal.visible = true
|
this.$refs.selectDeviceModal.selectedRowKeys = []
|
this.$refs.selectDeviceModal.selectedRows = []
|
this.$refs.selectDeviceModal.checkedKeys = this.queryParam.equipmentId.split(',')
|
},
|
|
/**
|
* 选择已有设备后点击确定时触发
|
* @param data 已选择的设备
|
*/
|
selectOK(data) {
|
// let params = {}
|
// params.equipmentIdList = []
|
// for (var a = 0; a < data.length; a++) {
|
// params.equipmentIdList.push(data[a])
|
// }
|
console.log('data=', data)
|
this.queryParam.equipmentId = data.join(',')
|
console.log('queryParam', this.queryParam.equipmentId)
|
}
|
},
|
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()
|
}
|
}
|
</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 .table-page-search-wrapper {
|
height: 6% !important;
|
}
|
|
.device_list #DeviceList {
|
height: 90% !important;
|
}
|
</style>
|
