diff --git a/src/assets/iconfont/D-DIN-Bold.otf b/src/assets/iconfont/D-DIN-Bold.otf new file mode 100644 index 0000000..95f91b3 Binary files /dev/null and b/src/assets/iconfont/D-DIN-Bold.otf differ diff --git a/src/assets/iconfont/D-DIN.otf b/src/assets/iconfont/D-DIN.otf new file mode 100644 index 0000000..ea5c4c8 Binary files /dev/null and b/src/assets/iconfont/D-DIN.otf differ diff --git a/src/assets/iconfont/PingFang Bold.ttf b/src/assets/iconfont/PingFang Bold.ttf new file mode 100644 index 0000000..accaf1f Binary files /dev/null and b/src/assets/iconfont/PingFang Bold.ttf differ diff --git a/src/assets/iconfont/PingFang Regular.ttf b/src/assets/iconfont/PingFang Regular.ttf new file mode 100644 index 0000000..8790adb Binary files /dev/null and b/src/assets/iconfont/PingFang Regular.ttf differ diff --git a/src/assets/iconfont/YouSheBiaoTiHei.ttf b/src/assets/iconfont/YouSheBiaoTiHei.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/src/assets/iconfont/YouSheBiaoTiHei.ttf differ diff --git a/src/assets/screen/bg.png b/src/assets/screen/bg.png new file mode 100644 index 0000000..6fde81c Binary files /dev/null and b/src/assets/screen/bg.png differ diff --git a/src/assets/screen/bg1.png b/src/assets/screen/bg1.png new file mode 100644 index 0000000..88c1edc Binary files /dev/null and b/src/assets/screen/bg1.png differ diff --git a/src/assets/screen/bg2.png b/src/assets/screen/bg2.png new file mode 100644 index 0000000..9ccd705 Binary files /dev/null and b/src/assets/screen/bg2.png differ diff --git a/src/assets/screen/bg_center.png b/src/assets/screen/bg_center.png new file mode 100644 index 0000000..0ddc03f Binary files /dev/null and b/src/assets/screen/bg_center.png differ diff --git a/src/assets/screen/cpu.png b/src/assets/screen/cpu.png new file mode 100644 index 0000000..329a515 Binary files /dev/null and b/src/assets/screen/cpu.png differ diff --git a/src/assets/screen/data_back.svg b/src/assets/screen/data_back.svg new file mode 100644 index 0000000..1fb2600 --- /dev/null +++ b/src/assets/screen/data_back.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/screen/disk.png b/src/assets/screen/disk.png new file mode 100644 index 0000000..6dd506c Binary files /dev/null and b/src/assets/screen/disk.png differ diff --git a/src/assets/screen/header_line.png b/src/assets/screen/header_line.png new file mode 100644 index 0000000..7e6d692 Binary files /dev/null and b/src/assets/screen/header_line.png differ diff --git a/src/assets/screen/image_server.png b/src/assets/screen/image_server.png new file mode 100644 index 0000000..83e9bf8 Binary files /dev/null and b/src/assets/screen/image_server.png differ diff --git a/src/assets/screen/memory.png b/src/assets/screen/memory.png new file mode 100644 index 0000000..84bf55d Binary files /dev/null and b/src/assets/screen/memory.png differ diff --git a/src/assets/screen/pie_bg.png b/src/assets/screen/pie_bg.png new file mode 100644 index 0000000..bdeb8bf Binary files /dev/null and b/src/assets/screen/pie_bg.png differ diff --git a/src/views/screen/components/BoxGroup.vue b/src/views/screen/components/BoxGroup.vue new file mode 100644 index 0000000..1b5f434 --- /dev/null +++ b/src/views/screen/components/BoxGroup.vue @@ -0,0 +1,271 @@ + + + + + diff --git a/src/views/screen/components/Header.vue b/src/views/screen/components/Header.vue new file mode 100644 index 0000000..5efb011 --- /dev/null +++ b/src/views/screen/components/Header.vue @@ -0,0 +1,341 @@ + + + + + diff --git a/src/views/screen/components/LongBoxGroup.vue b/src/views/screen/components/LongBoxGroup.vue new file mode 100644 index 0000000..f50858b --- /dev/null +++ b/src/views/screen/components/LongBoxGroup.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/src/views/screen/components/VueChart.vue b/src/views/screen/components/VueChart.vue new file mode 100644 index 0000000..a3fb75e --- /dev/null +++ b/src/views/screen/components/VueChart.vue @@ -0,0 +1,32 @@ + + diff --git a/src/views/screen/components/charts/BarChart1.vue b/src/views/screen/components/charts/BarChart1.vue new file mode 100644 index 0000000..13c5da7 --- /dev/null +++ b/src/views/screen/components/charts/BarChart1.vue @@ -0,0 +1,119 @@ + + diff --git a/src/views/screen/components/charts/BarChart2.vue b/src/views/screen/components/charts/BarChart2.vue new file mode 100644 index 0000000..444caa5 --- /dev/null +++ b/src/views/screen/components/charts/BarChart2.vue @@ -0,0 +1,102 @@ + + diff --git a/src/views/screen/components/charts/LineChart1.vue b/src/views/screen/components/charts/LineChart1.vue new file mode 100644 index 0000000..c44a0b0 --- /dev/null +++ b/src/views/screen/components/charts/LineChart1.vue @@ -0,0 +1,112 @@ + + diff --git a/src/views/screen/components/charts/LineChart2.vue b/src/views/screen/components/charts/LineChart2.vue new file mode 100644 index 0000000..6d3efe3 --- /dev/null +++ b/src/views/screen/components/charts/LineChart2.vue @@ -0,0 +1,113 @@ + + diff --git a/src/views/screen/components/charts/LineChart3.vue b/src/views/screen/components/charts/LineChart3.vue new file mode 100644 index 0000000..188ff40 --- /dev/null +++ b/src/views/screen/components/charts/LineChart3.vue @@ -0,0 +1,250 @@ + + diff --git a/src/views/screen/components/charts/NewCompany.vue b/src/views/screen/components/charts/NewCompany.vue new file mode 100644 index 0000000..ae56eb0 --- /dev/null +++ b/src/views/screen/components/charts/NewCompany.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/views/screen/components/charts/Pie1.vue b/src/views/screen/components/charts/Pie1.vue new file mode 100644 index 0000000..4d34484 --- /dev/null +++ b/src/views/screen/components/charts/Pie1.vue @@ -0,0 +1,138 @@ + + diff --git a/src/views/screen/components/charts/Pie3D.vue b/src/views/screen/components/charts/Pie3D.vue new file mode 100644 index 0000000..70fede5 --- /dev/null +++ b/src/views/screen/components/charts/Pie3D.vue @@ -0,0 +1,316 @@ + + + + diff --git a/src/views/screen/components/charts/RadarChart1.vue b/src/views/screen/components/charts/RadarChart1.vue new file mode 100644 index 0000000..4005ef2 --- /dev/null +++ b/src/views/screen/components/charts/RadarChart1.vue @@ -0,0 +1,117 @@ + + diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index d666d0e..bf89b5d 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -1,11 +1,270 @@ + + diff --git a/src/views/screen/layouts/UsedStatus.vue b/src/views/screen/layouts/UsedStatus.vue new file mode 100644 index 0000000..1505e52 --- /dev/null +++ b/src/views/screen/layouts/UsedStatus.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/src/views/screen/mock.js b/src/views/screen/mock.js new file mode 100644 index 0000000..04a8a9e --- /dev/null +++ b/src/views/screen/mock.js @@ -0,0 +1,208 @@ +export const card1_data = { + data: [ + { value: 762, name: "深度学习算法" }, + { value: 359, name: "经典算法" } + ] +}; + +export const card2_data = { + data: [ + { name: "安全类", value: 800 }, + { name: "通用类", value: 900 }, + { name: "SMT电子", value: 200 }, + { name: "液晶屏", value: 750 }, + { name: "金属表面", value: 900 }, + { name: "管材表面", value: 580 }, + { name: "锂电池检测", value: 300 }, + { name: "陶瓷类", value: 100 } + ] +}; + +export const card3_data = { + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] +}; + +export const card4_data = { + data: [ + { id: 1, name: "xxxxxxxxxxx科技有限公司" }, + { id: 2, name: "xxxxxxxxxxx科技有限公司" }, + { id: 3, name: "xxxxxxxxxxx科技有限公司" } + ] +}; + +export const card5_data = { + data: { + month_data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 } + ], + week_data: [ + { name: "一", value: 150 }, + { name: "二", value: 60 }, + { name: "三", value: 120 }, + { name: "四", value: 90 }, + { name: "五", value: 210 }, + { name: "六", value: 150 }, + { name: "日", value: 60 } + ], + day_data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 }, + { name: "13", value: 150 }, + { name: "14", value: 60 }, + { name: "15", value: 120 }, + { name: "16", value: 90 }, + { name: "17", value: 210 }, + { name: "18", value: 150 }, + { name: "19", value: 60 }, + { name: "20", value: 120 }, + { name: "21", value: 150 }, + { name: "22", value: 60 }, + { name: "23", value: 120 }, + { name: "24", value: 90 }, + { name: "25", value: 210 }, + { name: "26", value: 150 }, + { name: "27", value: 60 }, + { name: "28", value: 120 }, + { name: "29", value: 90 }, + { name: "30", value: 210 }, + { name: "31", value: 150 } + ] + } +}; + +export const card6_data = { + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] +}; + +export const card7_data = { + data: [ + { name: "已占用", value: 900 }, + { name: "未占用", value: 2000 } + ] +}; + +export const card8_data = { + data: { + cpu_used: "58.9", + memory_used: "89.45", + disk_used: "15.08", + image_server_used: "33.94" + } +}; + +export const card9_data = { + data: [ + { + name: "节点1", + value: 80 + }, + { + name: "虚拟机1", + value: 70 + }, + { + name: "虚拟机2", + value: 60 + }, + { + name: "虚拟机3", + value: 90 + }, + { + name: "虚拟机4", + value: 80 + }, + { + name: "虚拟机5", + value: 80 + }, + { + name: "虚拟机6", + value: 70 + }, + { + name: "虚拟机7", + value: 60 + }, + { + name: "虚拟机8", + value: 90 + }, + { + name: "虚拟机9", + value: 80 + }, + { + name: "虚拟机10", + value: 70 + }, + { + name: "虚拟机11", + value: 60 + } + ] +}; + +export const card10_data = { + cloud_cpu_used_top5: [ + { name: "xj-开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "yt-开发机-1", value: 62.16 }, + { name: "Zstack-Cloud-Server2", value: 60 }, + { name: "Zstack-Cloud-Server3", value: 41 } + ], + cloud_memory_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ], + local_cpu_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ], + local_memory_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ] +}; diff --git a/src/views/screen/style.css b/src/views/screen/style.css new file mode 100644 index 0000000..459d9c3 --- /dev/null +++ b/src/views/screen/style.css @@ -0,0 +1,109 @@ +.data-dashboard { + width: 1920px; + height: 1080px; + /*background-image: url('src/assets/screen/bg1.png');*/ + + position: relative; + /* 添加其他样式 */ +} + +.data-dashboard-bg { + width: 1920px; + height: 1080px; + position: absolute; + left: 0; + bottom: 0; + + /* 添加其他样式 */ +} +section { + position: absolute; + /*border: red 1px solid;*/ +} + +.dashboard-header { + /* 样式 */ +} + +.dashboard-content { + /* 样式 */ +} + +.dashboard-footer { + /* 样式 */ +} + +.header { + top: 0; + left: 0; + width: 100%; + height: 66px; +} + +.card1 { + top: 94px; + left: 26px; + width: 430px; + height: 230px; +} + +.card2 { + top: 340px; + left: 26px; + width: 430px; + height: 230px; +} +.card3 { + top: 584px; + left: 26px; + width: 430px; + height: 230px; +} +.card4 { + top: 94px; + right: 26px; + width: 430px; + height: 230px; +} +.card5 { + top: 340px; + right: 26px; + width: 430px; + height: 230px; +} + +.card6 { + top: 584px; + right: 26px; + width: 430px; + height: 230px; +} + +.card7 { + top: 94px; + left: 610px; + width: 700px; + height: 278px; + /*background: red;*/ +} + +.card8 { + top: 396px; + left: 488px; + width: 948px; + height: 136px; +} + +.card9 { + top: 548px; + left: 488px; + width: 948px; + height: 266px; +} + +.card10 { + bottom: 24px; + left: 24px; + width: 1872px; + height: 230px; +} diff --git a/src/views/screen1/components/BoxGroup.vue b/src/views/screen1/components/BoxGroup.vue new file mode 100644 index 0000000..864200a --- /dev/null +++ b/src/views/screen1/components/BoxGroup.vue @@ -0,0 +1,272 @@ + + + + + diff --git a/src/views/screen1/components/Header.vue b/src/views/screen1/components/Header.vue new file mode 100644 index 0000000..bc75b37 --- /dev/null +++ b/src/views/screen1/components/Header.vue @@ -0,0 +1,2216 @@ + + + + + diff --git a/src/views/screen1/components/VueChart.vue b/src/views/screen1/components/VueChart.vue new file mode 100644 index 0000000..a3fb75e --- /dev/null +++ b/src/views/screen1/components/VueChart.vue @@ -0,0 +1,32 @@ + + diff --git a/src/views/screen1/components/charts/BarChart1.vue b/src/views/screen1/components/charts/BarChart1.vue new file mode 100644 index 0000000..fbe3eba --- /dev/null +++ b/src/views/screen1/components/charts/BarChart1.vue @@ -0,0 +1,119 @@ + + diff --git a/src/views/screen1/components/charts/DeviceOnline.vue b/src/views/screen1/components/charts/DeviceOnline.vue new file mode 100644 index 0000000..4cc5bd2 --- /dev/null +++ b/src/views/screen1/components/charts/DeviceOnline.vue @@ -0,0 +1,103 @@ + + + + diff --git a/src/views/screen1/components/charts/LineChart1.vue b/src/views/screen1/components/charts/LineChart1.vue new file mode 100644 index 0000000..42d528b --- /dev/null +++ b/src/views/screen1/components/charts/LineChart1.vue @@ -0,0 +1,333 @@ + + diff --git a/src/views/screen1/components/charts/LineChart2.vue b/src/views/screen1/components/charts/LineChart2.vue new file mode 100644 index 0000000..9b3e8eb --- /dev/null +++ b/src/views/screen1/components/charts/LineChart2.vue @@ -0,0 +1,116 @@ + + diff --git a/src/views/screen1/components/charts/LineChartAndBarChart.vue b/src/views/screen1/components/charts/LineChartAndBarChart.vue new file mode 100644 index 0000000..ca1a363 --- /dev/null +++ b/src/views/screen1/components/charts/LineChartAndBarChart.vue @@ -0,0 +1,243 @@ + + + + diff --git a/src/views/screen1/components/charts/Pie3D.vue b/src/views/screen1/components/charts/Pie3D.vue new file mode 100644 index 0000000..3e09e3f --- /dev/null +++ b/src/views/screen1/components/charts/Pie3D.vue @@ -0,0 +1,323 @@ + + + + diff --git a/src/views/screen1/index.vue b/src/views/screen1/index.vue new file mode 100644 index 0000000..cf8067e --- /dev/null +++ b/src/views/screen1/index.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/src/views/screen1/mock.js b/src/views/screen1/mock.js new file mode 100644 index 0000000..44fc9c9 --- /dev/null +++ b/src/views/screen1/mock.js @@ -0,0 +1,318 @@ +export const card1_data = { + data: { + month_data: [ + { + data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 } + ] + }, + { + data: [ + { name: "1", value: 200 }, + { name: "2", value: 110 }, + { name: "3", value: 170 }, + { name: "4", value: 140 }, + { name: "5", value: 260 }, + { name: "6", value: 200 }, + { name: "7", value: 110 }, + { name: "8", value: 170 }, + { name: "9", value: 140 }, + { name: "10", value: 260 }, + { name: "11", value: 200 }, + { name: "12", value: 110 } + ] + }, + { + data: [ + { name: "1", value: 250 }, + { name: "2", value: 160 }, + { name: "3", value: 220 }, + { name: "4", value: 190 }, + { name: "5", value: 310 }, + { name: "6", value: 250 }, + { name: "7", value: 160 }, + { name: "8", value: 220 }, + { name: "9", value: 190 }, + { name: "10", value: 310 }, + { name: "11", value: 250 }, + { name: "12", value: 160 } + ] + } + ], + week_data: [ + { + data: [ + { name: "一", value: 150 }, + { name: "二", value: 60 }, + { name: "三", value: 120 }, + { name: "四", value: 90 }, + { name: "五", value: 210 }, + { name: "六", value: 150 }, + { name: "日", value: 60 } + ] + }, + { + data: [ + { name: "一", value: 120 }, + { name: "二", value: 110 }, + { name: "三", value: 170 }, + { name: "四", value: 140 }, + { name: "五", value: 260 }, + { name: "六", value: 200 }, + { name: "日", value: 110 } + ] + }, + { + data: [ + { name: "一", value: 250 }, + { name: "二", value: 160 }, + { name: "三", value: 220 }, + { name: "四", value: 190 }, + { name: "五", value: 310 }, + { name: "六", value: 250 }, + { name: "日", value: 160 } + ] + } + ], + day_data: [ + { + data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 }, + { name: "13", value: 150 }, + { name: "14", value: 60 }, + { name: "15", value: 120 }, + { name: "16", value: 90 }, + { name: "17", value: 210 }, + { name: "18", value: 150 }, + { name: "19", value: 60 }, + { name: "20", value: 120 }, + { name: "21", value: 150 }, + { name: "22", value: 60 }, + { name: "23", value: 120 }, + { name: "24", value: 90 }, + { name: "25", value: 210 }, + { name: "26", value: 150 }, + { name: "27", value: 60 }, + { name: "28", value: 120 }, + { name: "29", value: 90 }, + { name: "30", value: 210 }, + { name: "31", value: 150 } + ] + } + ] + } +}; + +export const card2_data = { + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ], + detail: [ + { + name: "A项目缺陷数", + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] + }, + { + name: "B项目缺陷数", + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] + }, + { + name: "C项目缺陷数", + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] + }, + { + name: "D项目缺陷数", + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] + } + ] +}; + +export const card3_data = { + data: { + month_data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 } + ], + week_data: [ + { name: "一", value: 150 }, + { name: "二", value: 60 }, + { name: "三", value: 120 }, + { name: "四", value: 90 }, + { name: "五", value: 210 }, + { name: "六", value: 150 }, + { name: "日", value: 60 } + ], + day_data: [ + { name: "1", value: 150 }, + { name: "2", value: 60 }, + { name: "3", value: 120 }, + { name: "4", value: 90 }, + { name: "5", value: 210 }, + { name: "6", value: 150 }, + { name: "7", value: 60 }, + { name: "8", value: 120 }, + { name: "9", value: 90 }, + { name: "10", value: 210 }, + { name: "11", value: 150 }, + { name: "12", value: 60 }, + { name: "13", value: 150 }, + { name: "14", value: 60 }, + { name: "15", value: 120 }, + { name: "16", value: 90 }, + { name: "17", value: 210 }, + { name: "18", value: 150 }, + { name: "19", value: 60 }, + { name: "20", value: 120 }, + { name: "21", value: 150 }, + { name: "22", value: 60 }, + { name: "23", value: 120 }, + { name: "24", value: 90 }, + { name: "25", value: 210 }, + { name: "26", value: 150 }, + { name: "27", value: 60 }, + { name: "28", value: 120 }, + { name: "29", value: 90 }, + { name: "30", value: 210 }, + { name: "31", value: 150 } + ] + } +}; + +export const card4_data = { + data: [ + { name: "08:20", value: 150 }, + { name: "10:00", value: 60 }, + { name: "13:00", value: 120 }, + { name: "15:00", value: 90 }, + { name: "17:00", value: 210 } + ] +}; + +export const card5_data = { + data: [ + { name: "CMR-025", value: "在线" }, + { name: "CMR-026", value: "离线" }, + { name: "CMR-027", value: "在线" }, + { name: "CMR-028", value: "在线" }, + { name: "CMR-029", value: "离线" }, + { name: "CMR-029", value: "在线" }, + { name: "CMR-029", value: "在线" } + ] +}; + +export const card6_data = { + data: [ + { name: "已占用", value: 50 }, + { name: "未占用", value: 100 } + ] +}; + +export const card7_data = { + data: [ + { name: "已占用", value: 50 }, + { name: "未占用", value: 80 } + ] +}; + +export const card8_data = { + data: [ + { name: "已占用", value: 50 }, + { name: "未占用", value: 60 } + ] +}; +export const card9_data = { + data: [ + { name: "已占用", value: 40 }, + { name: "未占用", value: 80 } + ] +}; +export const card10_data = { + cloud_cpu_used_top5: [ + { name: "xj-开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "yt-开发机-1", value: 62.16 }, + { name: "Zstack-Cloud-Server2", value: 60 }, + { name: "Zstack-Cloud-Server3", value: 41 } + ], + cloud_memory_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ], + local_cpu_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ], + local_memory_used_top5: [ + { name: "刘磊开发机-1", value: 96.19 }, + { name: "Zstack-Cloud-Server1", value: 87.41 }, + { name: "xintao-zstacas-server1", value: 62.16 }, + { name: "gongnian-cloud-server2", value: 60 }, + { name: "Zstack-Cloud-Server1", value: 41 } + ] +}; diff --git a/src/views/screen1/style.css b/src/views/screen1/style.css new file mode 100644 index 0000000..00628f0 --- /dev/null +++ b/src/views/screen1/style.css @@ -0,0 +1,94 @@ +.data-dashboard { + width: 1920px; + height: 1080px; + position: relative; + /* 添加其他样式 */ +} + +.data-dashboard-bg { + width: 1920px; + height: 1080px; + position: absolute; + left: 0; + bottom: 0; + + /* 添加其他样式 */ +} +section { + position: absolute; + /*border: red 1px solid;*/ +} + +.header { + top: 0; + left: 0; + width: 100%; + height: 66px; +} + +.card1 { + top: 94px; + left: 26px; + width: 430px; + height: 230px; +} + +.card2 { + top: 340px; + left: 26px; + width: 430px; + height: 474px; +} +.card3 { + top: 94px; + right: 26px; + width: 430px; + height: 230px; +} +.card4 { + top: 340px; + right: 26px; + width: 430px; + height: 230px; +} + +.card5 { + top: 584px; + right: 26px; + width: 430px; + height: 230px; +} + +.card6 { + top: 828px; + left: 26px; + width: 456px; + height: 230px; +} + +.card7 { + top: 828px; + left: 496px; + width: 456px; + height: 230px; +} + +.card8 { + top: 828px; + right: 496px; + width: 456px; + height: 230px; +} + +.card9 { + top: 828px; + right: 26px; + width: 456px; + height: 230px; +} +.card10 { + top: 182px; + left: 454px; + width: 1012px; + height: 552px; +}