fix: 云资源大屏调整
							parent
							
								
									806c0edd22
								
							
						
					
					
						commit
						ed3a9ffe97
					
				| 
						 | 
					@ -1,7 +1,5 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <bar-reverse-chart v-bind="$attrs"
 | 
					  <bar-reverse-chart v-bind="$attrs" :setting="configs"></bar-reverse-chart>
 | 
				
			||||||
   :setting="configs"
 | 
					 | 
				
			||||||
  ></bar-reverse-chart>
 | 
					 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import charts from 'cmp-echarts'
 | 
					import charts from 'cmp-echarts'
 | 
				
			||||||
| 
						 | 
					@ -12,7 +10,7 @@ const configs = {
 | 
				
			||||||
      show: true,
 | 
					      show: true,
 | 
				
			||||||
      formatter: '{b}',
 | 
					      formatter: '{b}',
 | 
				
			||||||
      color: '#fff',
 | 
					      color: '#fff',
 | 
				
			||||||
      position: [10, -20]
 | 
					      position: [10, -15]
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  legend: {
 | 
					  legend: {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -23,7 +23,12 @@ export const overviewConfigs = [{
 | 
				
			||||||
  icon: 'el-icon-monitor',
 | 
					  icon: 'el-icon-monitor',
 | 
				
			||||||
  type: 'COUNT',
 | 
					  type: 'COUNT',
 | 
				
			||||||
  data: [{
 | 
					  data: [{
 | 
				
			||||||
    title: '私有云',
 | 
					    title: '数据中心',
 | 
				
			||||||
 | 
					    className: 'purple',
 | 
				
			||||||
 | 
					    unit: '个',
 | 
				
			||||||
 | 
					    value: 0
 | 
				
			||||||
 | 
					  }, {
 | 
				
			||||||
 | 
					    title: '区域',
 | 
				
			||||||
    className: 'lgreen',
 | 
					    className: 'lgreen',
 | 
				
			||||||
    unit: '个',
 | 
					    unit: '个',
 | 
				
			||||||
    value: 0
 | 
					    value: 0
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -31,7 +31,7 @@
 | 
				
			||||||
        <div class="card h-300">
 | 
					        <div class="card h-300">
 | 
				
			||||||
          <div class="card-title">告警统计</div>
 | 
					          <div class="card-title">告警统计</div>
 | 
				
			||||||
          <div class="card-body">
 | 
					          <div class="card-body">
 | 
				
			||||||
            <pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5']}"></pie-charts>
 | 
					            <pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{ color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5'] }"></pie-charts>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      </el-col>
 | 
					      </el-col>
 | 
				
			||||||
| 
						 | 
					@ -75,18 +75,7 @@ import OverviewState from 'components/OverviewState'
 | 
				
			||||||
import PlatformCard from './PlatformCard'
 | 
					import PlatformCard from './PlatformCard'
 | 
				
			||||||
import ResourceCount from '../count_screen/ResourceCount'
 | 
					import ResourceCount from '../count_screen/ResourceCount'
 | 
				
			||||||
import { overviewConfigs } from './data'
 | 
					import { overviewConfigs } from './data'
 | 
				
			||||||
import {
 | 
					import { getOverview, getPlatformOverview, getUsed, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount } from 'services/screen/resource'
 | 
				
			||||||
  getOverview,
 | 
					 | 
				
			||||||
  getPlatformOverview,
 | 
					 | 
				
			||||||
  getUsed,
 | 
					 | 
				
			||||||
  getPlatforms,
 | 
					 | 
				
			||||||
  getAlarmPieChart,
 | 
					 | 
				
			||||||
  getResourceApply,
 | 
					 | 
				
			||||||
  getResourceTrend,
 | 
					 | 
				
			||||||
  getResTops,
 | 
					 | 
				
			||||||
  getHostStatus,
 | 
					 | 
				
			||||||
  getResourceCount
 | 
					 | 
				
			||||||
} from 'services/screen/resource'
 | 
					 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  components: {
 | 
					  components: {
 | 
				
			||||||
    ScreenWrapper,
 | 
					    ScreenWrapper,
 | 
				
			||||||
| 
						 | 
					@ -124,9 +113,9 @@ export default {
 | 
				
			||||||
      const res = await getPlatformOverview()
 | 
					      const res = await getPlatformOverview()
 | 
				
			||||||
      if (res.success) {
 | 
					      if (res.success) {
 | 
				
			||||||
        // 处理数据对configs赋值
 | 
					        // 处理数据对configs赋值
 | 
				
			||||||
        const { pubNum, priNum } = res.data
 | 
					        const { dcsNum, pubNum, priNum } = res.data
 | 
				
			||||||
        const unit = state.overviewConfigs[1]
 | 
					        const unit = state.overviewConfigs[1]
 | 
				
			||||||
        ;[priNum, pubNum].forEach((item, index) => {
 | 
					        ;[dcsNum, priNum, pubNum].forEach((item, index) => {
 | 
				
			||||||
          unit.data[index].value = item
 | 
					          unit.data[index].value = item
 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
| 
						 | 
					@ -136,14 +125,7 @@ export default {
 | 
				
			||||||
      const res = await getUsed()
 | 
					      const res = await getUsed()
 | 
				
			||||||
      if (res.success) {
 | 
					      if (res.success) {
 | 
				
			||||||
        // 处理数据对configs赋值
 | 
					        // 处理数据对configs赋值
 | 
				
			||||||
        const {
 | 
					        const { menUnused, memTotal, cpuUnused, cpuTotal, diskTotal, diskUnused } = res.data
 | 
				
			||||||
          menUnused,
 | 
					 | 
				
			||||||
          memTotal,
 | 
					 | 
				
			||||||
          cpuUnused,
 | 
					 | 
				
			||||||
          cpuTotal,
 | 
					 | 
				
			||||||
          diskTotal,
 | 
					 | 
				
			||||||
          diskUnused
 | 
					 | 
				
			||||||
        } = res.data
 | 
					 | 
				
			||||||
        const unit = state.overviewConfigs[2]
 | 
					        const unit = state.overviewConfigs[2]
 | 
				
			||||||
        ;[
 | 
					        ;[
 | 
				
			||||||
          { used: cpuUnused, total: cpuTotal },
 | 
					          { used: cpuUnused, total: cpuTotal },
 | 
				
			||||||
| 
						 | 
					@ -237,27 +219,14 @@ export default {
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    // 切换平台
 | 
					    // 切换平台
 | 
				
			||||||
    const change = async (type) => {
 | 
					    const change = async type => {
 | 
				
			||||||
      state.vendorType = type
 | 
					      state.vendorType = type
 | 
				
			||||||
      const proArr = [
 | 
					      const proArr = [getApplyCount(), getUsedCount(), getCpuTop5(), getMemTop5(), getHostCount(), getResource()]
 | 
				
			||||||
        getApplyCount(),
 | 
					 | 
				
			||||||
        getUsedCount(),
 | 
					 | 
				
			||||||
        getCpuTop5(),
 | 
					 | 
				
			||||||
        getMemTop5(),
 | 
					 | 
				
			||||||
        getHostCount(),
 | 
					 | 
				
			||||||
        getResource()
 | 
					 | 
				
			||||||
      ]
 | 
					 | 
				
			||||||
      await Promise.all(proArr)
 | 
					      await Promise.all(proArr)
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    const init = async () => {
 | 
					    const init = async () => {
 | 
				
			||||||
      try {
 | 
					      try {
 | 
				
			||||||
        await Promise.all([
 | 
					        await Promise.all([getOverviewState(), getUsedState(), getPlatformState(), getAlarmCount(), change()])
 | 
				
			||||||
          getOverviewState(),
 | 
					 | 
				
			||||||
          getUsedState(),
 | 
					 | 
				
			||||||
          getPlatformState(),
 | 
					 | 
				
			||||||
          getAlarmCount(),
 | 
					 | 
				
			||||||
          change()
 | 
					 | 
				
			||||||
        ])
 | 
					 | 
				
			||||||
      } catch (error) {}
 | 
					      } catch (error) {}
 | 
				
			||||||
      state.loading = false
 | 
					      state.loading = false
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
| 
						 | 
					@ -296,7 +265,7 @@ export default {
 | 
				
			||||||
    height: calc(100% - 30px);
 | 
					    height: calc(100% - 30px);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.resource-count ::v-deep .cell{
 | 
					.resource-count ::v-deep .cell {
 | 
				
			||||||
  height: 85px;
 | 
					  height: 85px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue