|
@@ -1,7 +1,10 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
<div class="top">
|
|
|
- <div style="display:flex;text-align:center;align-items:center;padding-left:60px">
|
|
|
+ <div class="public-title">
|
|
|
+ 资源分配情况
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;text-align:center;align-items:center;padding-left:60px;margin-top:20px">
|
|
|
<div class="bk-box" style="background:#F9CB19">
|
|
|
</div>
|
|
|
<div style="color:#fff;margin-right:30px;font-size:12px">
|
|
@@ -18,7 +21,75 @@
|
|
|
<div style="height:150px" ref="pie_3"></div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
- ss
|
|
|
+ <div class="public-title">
|
|
|
+ 资源使用情况
|
|
|
+ </div>
|
|
|
+ <div style="height:250px;margin-top:8px" ref="line"></div>
|
|
|
+ <div class="table">
|
|
|
+ <div class="public-title">
|
|
|
+ 应用资源使用排名
|
|
|
+ </div>
|
|
|
+ <div class="row-box">
|
|
|
+ <div style="width:50%;padding:20px 20px">
|
|
|
+ <table class="table-box">
|
|
|
+ <tr>
|
|
|
+ <td style="width:20%;color:#5D94C6;background:#243B6D;padding:5px 0">
|
|
|
+ 排名
|
|
|
+ </td>
|
|
|
+ <td style="width:40%;color:#5D94C6;background:#243B6D;padding:5px 0" class="hasBorder">
|
|
|
+ 应用系统名称
|
|
|
+ </td>
|
|
|
+ <td style="width:40%;color:#5D94C6;background:#243B6D;padding:5px 0">
|
|
|
+ CPU使用率(%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <template v-for="(item,index) in tableData" :key="index">
|
|
|
+ <tr v-if=" index<10">
|
|
|
+ <td>
|
|
|
+ {{index+1}}
|
|
|
+ </td>
|
|
|
+ <td class="hasBorder">
|
|
|
+ {{item.label}}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{item.rate}}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div style="width:50%;padding:20px 20px">
|
|
|
+ <table class="table-box">
|
|
|
+ <tr>
|
|
|
+ <td style="width:20%;color:#5D94C6;background:#243B6D;padding:5px 0">
|
|
|
+ 排名
|
|
|
+ </td>
|
|
|
+ <td style="width:40%;color:#5D94C6;background:#243B6D;padding:5px 0" class="hasBorder">
|
|
|
+ 应用系统名称
|
|
|
+ </td>
|
|
|
+ <td style="width:40%;color:#5D94C6;background:#243B6D;padding:5px 0">
|
|
|
+ CPU使用率(%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <template v-for="(item,index) in tableData" :key="index">
|
|
|
+ <tr v-if=" index<10">
|
|
|
+ <td>
|
|
|
+ {{index+1}}
|
|
|
+ </td>
|
|
|
+ <td class="hasBorder">
|
|
|
+ {{item.label}}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{item.rate}}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -29,9 +100,14 @@ import * as echarts from "echarts";
|
|
|
const pie_1 = ref(null);
|
|
|
const pie_2 = ref(null);
|
|
|
const pie_3 = ref(null);
|
|
|
+const line = ref(null);
|
|
|
let pie_1Chart = null;
|
|
|
let pie_2Chart = null;
|
|
|
let pie_3Chart = null;
|
|
|
+let lineChart = null;
|
|
|
+let option1 = {};
|
|
|
+let option2 = {};
|
|
|
+let option3 = {};
|
|
|
|
|
|
const getOption = () => {
|
|
|
return {
|
|
@@ -50,7 +126,7 @@ const getOption = () => {
|
|
|
trigger: "item",
|
|
|
},
|
|
|
grid: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
bottom: 80,
|
|
|
},
|
|
|
// legend: {
|
|
@@ -61,7 +137,7 @@ const getOption = () => {
|
|
|
{
|
|
|
name: "设备",
|
|
|
type: "pie",
|
|
|
- radius: ["50%", "80%"],
|
|
|
+ radius: ["48%", "75%"],
|
|
|
avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
show: false,
|
|
@@ -70,7 +146,7 @@ const getOption = () => {
|
|
|
emphasis: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
- fontSize: 15,
|
|
|
+ fontSize: 14,
|
|
|
fontWeight: "bold",
|
|
|
color: "#fff",
|
|
|
},
|
|
@@ -98,10 +174,134 @@ const getOption = () => {
|
|
|
],
|
|
|
};
|
|
|
};
|
|
|
-let option1 = {};
|
|
|
-let option2 = {};
|
|
|
-let option3 = {};
|
|
|
|
|
|
+const lineOption = reactive({
|
|
|
+ data: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "2%",
|
|
|
+ bottom: "0%",
|
|
|
+ top: "25px",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ //设置 boundaryGap 为 true,表示 x 轴在数据点之间有空隙
|
|
|
+ boundaryGap: true,
|
|
|
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ // splitLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 3,
|
|
|
+ // type: "dashed",
|
|
|
+ // // 设置背景横线
|
|
|
+ // color: "#1D4A62",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 坐标轴
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#2B82AA",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 轴线的显示
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 2.5,
|
|
|
+ type: "dashed",
|
|
|
+ // 设置背景横线
|
|
|
+ color: "#1D4A62",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 坐标轴
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#2B82AA",
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ name: "1",
|
|
|
+ // 背景颜色
|
|
|
+ // areaStyle: {
|
|
|
+ // color: "#FCE5CA",
|
|
|
+ // opacity: 0.4,
|
|
|
+ // },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#947A60", //改变折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: "#947A60", //改变折线颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [210, 885, 644, 934, 1290, 1330, 1320],
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ name: "2",
|
|
|
+ // 背景颜色
|
|
|
+ // areaStyle: {
|
|
|
+ // color: "#D9EDFF",
|
|
|
+ // opacity: 0.4,
|
|
|
+ // },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#238483", //改变折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: "#238483", //改变折线颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const tableData = ref([]);
|
|
|
+for (let i = 0; i < 15; i++) {
|
|
|
+ tableData.value.push({
|
|
|
+ label: "集部市场" + (i + 1),
|
|
|
+ rate: (i + 1) * 10 + " %",
|
|
|
+ });
|
|
|
+}
|
|
|
+setInterval(() => {
|
|
|
+ console.log("asdddddd");
|
|
|
+ tableData.value.unshift({
|
|
|
+ label: "集部市场" + (Math.floor(Math.random() * 100) + 1),
|
|
|
+ rate: (1 + Math.floor(Math.random() * 100)) * 10 + " %",
|
|
|
+ });
|
|
|
+}, 3000);
|
|
|
onMounted(() => {
|
|
|
option1 = getOption();
|
|
|
pie_1Chart = echarts.init(pie_1.value);
|
|
@@ -128,6 +328,13 @@ onMounted(() => {
|
|
|
});
|
|
|
pie_3Chart.setOption(option3);
|
|
|
pie_3Chart.resize();
|
|
|
+
|
|
|
+ lineChart = echarts.init(line.value);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ lineChart.resize();
|
|
|
+ });
|
|
|
+ lineChart.setOption(lineOption.data);
|
|
|
+ lineChart.resize();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -147,11 +354,35 @@ onMounted(() => {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
.bottom {
|
|
|
- width: calc(100vw - 310px);
|
|
|
+ width: calc(100vw - 310px - 20px);
|
|
|
margin-left: 10px;
|
|
|
background: #1e3159;
|
|
|
height: calc(100vh - 120px);
|
|
|
overflow: auto;
|
|
|
+ padding: 10px;
|
|
|
+ .table {
|
|
|
+ height: calc(100% - 260px - 52px);
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: auto;
|
|
|
+ .row-box {
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ min-height: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ .table-box {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ td {
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ .hasBorder {
|
|
|
+ border-left: 1px solid #38bceb;
|
|
|
+ border-right: 1px solid #38bceb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.bk-box {
|
|
@@ -160,4 +391,13 @@ onMounted(() => {
|
|
|
border-radius: 2px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+.public-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #1f427a;
|
|
|
+ // background: linear-gradient(240deg, #1c2a47 0%, #1f427a 20%);
|
|
|
+}
|
|
|
</style>
|