|
@@ -2,44 +2,162 @@
|
|
|
<div class="dashboard-wrapper">
|
|
|
<div class="v2-page flex-row-start gap dashboard">
|
|
|
<div class="part left flex-column-stretch pb-2">
|
|
|
- <div class="part-title mb-2">xxxx</div>
|
|
|
- <div class="flex-row mt-2">
|
|
|
- <subtitle class="flex1">xxxx</subtitle>
|
|
|
- <subtitle class="flex1">xxxx</subtitle>
|
|
|
+ <!-- <div class=" flex1 my-2 flex-row gap-2">
|
|
|
+ <num-bar-card title="数据中心" unit="个">1</num-bar-card>
|
|
|
+ <num-bar-card title="机柜" unit="个">2223</num-bar-card>
|
|
|
+ </div> -->
|
|
|
+ <div class="my-2 flex-row gap-2" style="height: 10vh;">
|
|
|
+ <numCardText title="数据中心数量" unit="个" :value="12"></numCardText>
|
|
|
+ <numCardText title="机柜数量" unit="个" :value="12423"></numCardText>
|
|
|
+ </div>
|
|
|
+ <subtitle class="">数量统计</subtitle>
|
|
|
+ <div class=" flex-row">
|
|
|
+ <num-bar-line title="机柜" unit="个">12</num-bar-line>
|
|
|
+ <num-bar-line title="服务器" unit="个">423</num-bar-line>
|
|
|
+ </div>
|
|
|
+ <div class=" flex-row">
|
|
|
+ <num-bar-line title="操作系统" unit="个">23</num-bar-line>
|
|
|
+ <num-bar-line title="中间件" unit="个">546</num-bar-line>
|
|
|
</div>
|
|
|
- <div class="flex1 flex-row">
|
|
|
- <echart-v2 class="flex1" ref="overViewBar1"></echart-v2>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar2"></echart-v2>
|
|
|
+ <div class=" flex-row">
|
|
|
+ <num-bar-line title="数据" unit="个">442</num-bar-line>
|
|
|
+ <num-bar-line title="项目" unit="个">68345</num-bar-line>
|
|
|
</div>
|
|
|
- <div class="flex-row mt-1">
|
|
|
- <subtitle class="flex1">xxxx</subtitle>
|
|
|
- <subtitle class="flex1">xxxx</subtitle>
|
|
|
+ <subtitle class="mt-1">首页点名称</subtitle>
|
|
|
+ <div class="flex-row mb-2">
|
|
|
+ <el-input placeholder="请输入首页点名称"></el-input>
|
|
|
+ <el-button type="primary" class="ml-1">搜索</el-button>
|
|
|
</div>
|
|
|
- <div class="flex1 flex-row">
|
|
|
- <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar4"></echart-v2>
|
|
|
+ <subtitle class="mt-1">末节点名称</subtitle>
|
|
|
+ <div class="flex-row mb-2">
|
|
|
+ <el-input placeholder="请输入末节点名称"></el-input>
|
|
|
+ <el-button type="primary" class="ml-1">搜索</el-button>
|
|
|
</div>
|
|
|
- <subtitle class="mt-1">xxxx</subtitle>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar1"></echart-v2>
|
|
|
</div>
|
|
|
<div class="center">
|
|
|
<AllLink></AllLink>
|
|
|
</div>
|
|
|
<div class="part right flex-column-stretch pb-2">
|
|
|
- <div class="part-title mb-2">xxxx</div>
|
|
|
- <subtitle class="mt-2">xxxx</subtitle>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
|
|
|
- <subtitle class="mt-2">xxxx</subtitle>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
|
|
|
- <subtitle>xxxx</subtitle>
|
|
|
- <echart-v2 class="flex1" ref="overViewBar3"></echart-v2>
|
|
|
+ <subtitle class="mt-2">Zabbix server linux</subtitle>
|
|
|
+ <div class="flex-row mt-2">
|
|
|
+ <numCardLed title="运行时间" unit="天" :value="12"></numCardLed>
|
|
|
+ <numCardLed title="CPU核数" unit="" :value="2"></numCardLed>
|
|
|
+ <numCardLed title="总内存" unit="GB" :value="12.34"></numCardLed>
|
|
|
+ </div>
|
|
|
+ <div class="card-bg my-2" style="padding: 0 1vw;">
|
|
|
+ <distribution class="my-1" :list="distributionList"></distribution>
|
|
|
+ </div>
|
|
|
+ <subtitle class="mt-2">CPU</subtitle>
|
|
|
+ <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef1"></echart-v2>
|
|
|
+ <subtitle class="mt-2">每次I/O读写耗时</subtitle>
|
|
|
+ <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef2"></echart-v2>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import numBarCard from '@/components/num-bar/card.vue'
|
|
|
+import numBarLine from '@/components/num-bar/line.vue'
|
|
|
+import infoCard from '@/components/v2/info-card.vue'
|
|
|
+import linkCard from '@/components/v2/link-card.vue'
|
|
|
+import numCardLed from '@/components/v2/num-card-led.vue'
|
|
|
+import numCardText from '@/components/v2/num-card-text.vue'
|
|
|
import AllLink from './AllLink.vue';
|
|
|
+import distribution from '@/components/v2/distribution.vue'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { getStereoscopicLineOption } from '@/components/echart-v2/optionsWithCustomLine.js'
|
|
|
+
|
|
|
+const efficiencyMetricsRef1 = ref()
|
|
|
+const efficiencyMetricsRef2 = ref()
|
|
|
+
|
|
|
+const data = {
|
|
|
+ "xAxis": [
|
|
|
+ "2023-01",
|
|
|
+ "2023-02",
|
|
|
+ "2023-03",
|
|
|
+ "2023-04",
|
|
|
+ "2023-05",
|
|
|
+ "2023-06",
|
|
|
+ "2023-07",
|
|
|
+ "2023-08",
|
|
|
+ "2023-09",
|
|
|
+ "2023-10"
|
|
|
+ ],
|
|
|
+ "碳排值": [
|
|
|
+ "1706.25",
|
|
|
+ "2105.51",
|
|
|
+ "3121.90",
|
|
|
+ "2930.23",
|
|
|
+ "2967.78",
|
|
|
+ "2831.36",
|
|
|
+ "3072.57",
|
|
|
+ "2974.36",
|
|
|
+ "2865.35",
|
|
|
+ "1748.01"
|
|
|
+ ],
|
|
|
+ "碳排占比": [
|
|
|
+ "54.65",
|
|
|
+ "67.44",
|
|
|
+ "100.00",
|
|
|
+ "93.86",
|
|
|
+ "95.06",
|
|
|
+ "90.69",
|
|
|
+ "98.42",
|
|
|
+ "95.27",
|
|
|
+ "91.78",
|
|
|
+ "55.99"
|
|
|
+ ],
|
|
|
+ "碳排标准": [
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90",
|
|
|
+ "3121.90"
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ efficiencyMetricsRef1.value.draw(
|
|
|
+ getStereoscopicLineOption({
|
|
|
+ legendData: ['cpu利用率', '系统使用率', '用户使用率'],
|
|
|
+ barData1: data['碳排标准'],
|
|
|
+ barData2: data['碳排值'],
|
|
|
+ lineData: data['碳排占比'],
|
|
|
+ xAxisData: data.xAxis
|
|
|
+ })
|
|
|
+ )
|
|
|
+ efficiencyMetricsRef2.value.draw(
|
|
|
+ getStereoscopicLineOption({
|
|
|
+ legendData: ['读取耗时', '写入耗时'],
|
|
|
+ barData1: data['碳排标准'],
|
|
|
+ barData2: data['碳排值'],
|
|
|
+ lineData: [],
|
|
|
+ xAxisData: data.xAxis
|
|
|
+ })
|
|
|
+ )
|
|
|
+})
|
|
|
+
|
|
|
+const distributionList = [{
|
|
|
+ label: 'CPU使用率',
|
|
|
+ value: 30
|
|
|
+}, {
|
|
|
+ label: '内存使用率',
|
|
|
+ value: 12
|
|
|
+}, {
|
|
|
+ label: '分区使用率',
|
|
|
+ value: 12
|
|
|
+}, {
|
|
|
+ label: '磁盘使用率',
|
|
|
+ value: 12
|
|
|
+}]
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
@@ -91,7 +209,7 @@ sub {
|
|
|
.v2-page {
|
|
|
position: relative;
|
|
|
// background-color: #000;
|
|
|
- background-image: url('@/assets/imgs/v2/box-home.png');
|
|
|
+ // background-image: url('@/assets/imgs/v2/box-home.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
height: 93vh;
|