260 lines
7.6 KiB
Vue
260 lines
7.6 KiB
Vue
<template>
|
||
<div class="machine-room-box">
|
||
<div class="headerSearch">
|
||
|
||
<span class="titleGrid">所属月份：</span>
|
||
<el-date-picker
|
||
size="small"
|
||
v-model="value2"
|
||
@blur="handleDatePickerClick"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
style="width: 140px"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
<el-button type="success" @click="searchMachineRoom" size="small" style="margin-left: 5px">查询</el-button>
|
||
</div>
|
||
<!-- <div class="machineRoomGrid bgGrid" style="width: 33%;height: 500px;border:1px solid black;" v-for="(item,index) in deviceRoomData" :key="index" >-->
|
||
|
||
<!-- <div id="test" style="width: 100%;height: 400px;border:1px solid red;"></div>-->
|
||
<!-- <h3>-->
|
||
<!-- <span v-if="valueInput===''">{{ Object.keys(deviceRoomData)[0] }}</span>-->
|
||
<!-- <span>{{ valueInput }}</span>-->
|
||
<!-- <span>机房空置率</span>-->
|
||
<!-- </h3>-->
|
||
<!-- </div>-->
|
||
<!-- <div v-if="Object.keys(this.deviceRoomData).length<1" class="emptyBox">-->
|
||
<!-- <el-empty :image-size="200" description="所有机房空置率数据为空"></el-empty>-->
|
||
<!-- </div>-->
|
||
<div style="width: 100vw;" class="content-box" v-if="isShowEmpty">
|
||
<common-grid v-for="(item,index) in deviceRoomData" :key="index" :item="idArr" :nameIndex="index"
|
||
class="itemStyle"
|
||
ref="machineRef" v-if="isShowMachinRoom"></common-grid>
|
||
</div>
|
||
<el-empty :image-size="200" v-else class="empty-box" description="当前暂无机房空置信息"></el-empty>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
import {mapGetters, mapState} from "vuex";
|
||
import './css/common.css'
|
||
import CommonGrid from "@/views/operation/deviceMangement/deviceGrid/grid/commonGrid.vue";
|
||
import {reqDeviceAnalysis} from "@/api/operation/device";
|
||
|
||
export default {
|
||
name: "machineRoomGrid",
|
||
components: {CommonGrid},
|
||
props: ['valueInput', 'titiePoald'],
|
||
data() {
|
||
return {
|
||
echartsInits: '',
|
||
//存储所有类型警告的数据
|
||
warningTypeNumber: {
|
||
seriousIdle: [],//严重空闲
|
||
warningIdle: [],//警告空闲
|
||
normalIdle: [],//正常空闲
|
||
addIdle: [],//新增空闲
|
||
|
||
},
|
||
idArr: [],
|
||
isShowMachinRoom: false,
|
||
value2: '',
|
||
options: [],
|
||
isShowEmpty: false,//是否展示空状态
|
||
}
|
||
},
|
||
async mounted() {
|
||
|
||
//获取org_type
|
||
|
||
this.org_type = sessionStorage.getItem('org_type')
|
||
this.juese = sessionStorage.getItem('juese')
|
||
let date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
month = (month > 9) ? month : ("0" + month);
|
||
day = (day < 10) ? ("0" + day) : day;
|
||
let today = year + "-" + month + "-" + day;
|
||
let pload = {
|
||
// "select_date": this.value2
|
||
"select_date": today
|
||
}
|
||
this.value2 = today
|
||
await this.$store.dispatch('getDeviceAnalysis', JSON.stringify(pload))
|
||
this.isShowMachinRoom = true
|
||
this.idArr = Object.keys(this.deviceRoomData)
|
||
// console.log("mounted中给机房的赋值", this.deviceRoomData)
|
||
this.value = Object.keys(this.deviceRoomData)[0]
|
||
console.log("deviceRoomData的值是", this.deviceRoomData)
|
||
if (Object.keys(this.deviceRoomData).length > 0) {
|
||
this.flag = true
|
||
this.isShowEmpty = true
|
||
} else {
|
||
this.isShowEmpty = false
|
||
}
|
||
|
||
|
||
let storedName = Object.keys(this.deviceRoomData)
|
||
for (let i = 0; i < storedName.length; i++) {
|
||
let item = {
|
||
value: storedName[i],
|
||
label: storedName[i]
|
||
}
|
||
this.options.push(item)
|
||
}
|
||
|
||
await this.$store.commit('GETSIMPLEDEVICEROOMDATA', this.deviceRoomData[this.value])
|
||
},
|
||
methods: {
|
||
handleDatePickerClick() {
|
||
// 在这里编写日期选择器点击后的回调逻辑
|
||
console.log('日期选择器点击了');
|
||
// 执行其他操作...
|
||
this.isDateClick = true
|
||
},
|
||
searchMachineRoom() {
|
||
//一点击查询隐图表
|
||
this.gridShow = false
|
||
let ploay = {
|
||
"select_date": this.value2
|
||
}
|
||
if (this.value2) {
|
||
reqDeviceAnalysis(JSON.stringify(ploay)).then(res => {
|
||
if (res.status) {
|
||
//如果请求数据为空
|
||
if (JSON.stringify(res.data) === '{}') {
|
||
this.$store.commit('GETDEVICEANALYSIS', [])
|
||
this.value = ''
|
||
this.$store.commit('setMachineRoomNameGridFull', this.value)
|
||
// this.$message.error('该日期没有数据，请选择其他日期！')
|
||
|
||
this.isShowEmpty = false
|
||
console.log("当前日期有数据没有")
|
||
} else {//如果请求数据不为空
|
||
|
||
this.isShowEmpty = true
|
||
this.gridShow = true
|
||
console.log("当前日期有数据")
|
||
this.$store.commit('GETDEVICEANALYSIS', res.data)
|
||
//重新给机房列表赋值
|
||
this.options = []
|
||
let keyNameArr = Object.keys(res.data)
|
||
for (let i = 0; i < keyNameArr.length; i++) {
|
||
let item = {
|
||
|
||
value: keyNameArr[i],
|
||
label: keyNameArr[i]
|
||
}
|
||
this.options.push(item)
|
||
}
|
||
if (this.isDateClick) {
|
||
this.value = keyNameArr[0]
|
||
this.$store.commit('setMachineRoomNameGrid', Object.keys(res.data)[0])
|
||
this.isDateClick = false
|
||
} else {
|
||
this.$store.commit('setMachineRoomNameGrid', this.value)
|
||
}
|
||
|
||
|
||
console.log("父组件的value是", this.value)
|
||
this.$store.commit('GETSIMPLEDEVICEROOMDATA', this.deviceRoomData[this.value])
|
||
console.log("全部机房分析", this.deviceRoomData)
|
||
console.log("单个机房内分析simpleRoomData是", this.simpleRoomData)
|
||
setTimeout(() => {
|
||
this.$refs.machineRoom.updatePieEchart()
|
||
}, 10)
|
||
|
||
}
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.info('请选择相关日期选项!')
|
||
}
|
||
},
|
||
|
||
|
||
},
|
||
computed: {
|
||
...mapGetters(["sidebar"]),
|
||
isCollapse() {
|
||
return !this.sidebar.opened;
|
||
},
|
||
...mapState({
|
||
simpleRoomData: state => state.device.simpleRoomData,
|
||
deviceRoomData: state => state.device.deviceRoomData,
|
||
MachineRoomNameGrid: state => state.device.MachineRoomNameGrid,
|
||
})
|
||
},
|
||
watch: {
|
||
isCollapse(newValue, oldValue) {
|
||
for (let i = 0; i < Object.keys(this.deviceRoomData).length; i++) {
|
||
this.$refs.machineRef[i].initGrid()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.machineRoomGrid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.emptyBox {
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
|
||
width: 35vw;
|
||
margin-top: 15%;
|
||
}
|
||
|
||
.machine-room-box {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
background-color: white;
|
||
}
|
||
|
||
.itemStyle {
|
||
width: 32%;
|
||
margin-bottom: 15px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.headerSearch {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 99;
|
||
width: 100vw;
|
||
margin: 0 0 15px 0;
|
||
background-color: rgba(255, 255, 255, 0.19);
|
||
//border:1px solid red;
|
||
}
|
||
|
||
.titleGrid {
|
||
font-size: 16px;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.content-box {
|
||
height: calc(100vh - 150px);
|
||
overflow-y: auto;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.empty-box {
|
||
width: 100vw;
|
||
height: calc(100vh - 150px);
|
||
|
||
}
|
||
</style>
|