<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="驱动类型">
|
<!--<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="9" :sm="9" :xs="4">
|
<a-form-item label="时间">
|
<a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="2" :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">
|
<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>
|
</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'
|
export default {
|
name: 'comparativeAnalysismain',
|
// mixins: [JeecgListMixin],
|
components: {
|
Tooltip,
|
comparativeAnalysisBar,
|
comparativeAnalysisGauge,
|
conparativeAnalysisPie,
|
JDictSelectTag,
|
JInput,
|
JDate,
|
JEllipsis
|
},
|
props: { nodeTree: '', Type:'',nodePeople: '' },
|
data() {
|
return {
|
activeKey: '1',
|
typeTree:"",
|
typeParent:1,
|
typeEquipment:1,
|
AnalysisBarList:[],
|
AnalysisGauge:[],
|
AnalysisPie:[],
|
dates: [],
|
xianshi:"",
|
readOnly:true,
|
queryParam: {},
|
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.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
|
// })
|
// },
|
},
|
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>
|
