From d4e6d812bf1e9fa55ea62745983f0b2a878ed8aa Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 31 三月 2022 10:24:33 +0800
Subject: [PATCH] 管理中心
---
src/views/manageCenter/index.vue | 1225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,222 insertions(+), 3 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index 892093a..8b5b91a 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -1,10 +1,1229 @@
<template>
- <div class="manageCenter">绠＄悊涓績</div>
+ <div class="manageCenter">
+ <!-- 椤靛ご -->
+ <IndexHeader :opacity="false"></IndexHeader>
+
+ <div class="centerTitle">
+ <div class="heart">
+ <div class="welcome">{{ userName }},娆㈣繋鎮ㄨ礉鎬濈绠＄悊涓績.</div>
+ <div class="time">{{ timeMsg }}</div>
+ </div>
+ </div>
+
+ <!-- 鐗堝績 -->
+ <div class="heart">
+ <div class="products">
+ <div class="title">鍏ㄩ儴浜у搧</div>
+ <div class="productList">
+ <div
+ class="productItem"
+ v-for="(item, index) in productList"
+ :key="index"
+ >
+ <router-link :to="item.path">
+ <img :src="item.icon" alt="" />
+ <div class="name">{{ item.name }}</div>
+ </router-link>
+ </div>
+ </div>
+ </div>
+
+ <div class="equipmentInfo">
+ <div class="equipmentCard">
+ <div class="label">璁惧鎬婚噺</div>
+ <div class="number">
+ 34
+ <div class="upIcon iconfont"> 2</div>
+ </div>
+
+ <img src="/images/manageCenter/浠诲姟鎬绘暟.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">鎽勫儚鏈烘�绘暟</div>
+ <div class="number">
+ 23
+ <div class="upIcon iconfont"> 2</div>
+ </div>
+
+ <img src="/images/manageCenter/鎽勫儚鏈烘�绘暟.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">绠楁硶鎬绘暟</div>
+ <div class="number">
+ 34
+ <div class="downIcon iconfont"> 2</div>
+ </div>
+
+ <img src="/images/manageCenter/绠楁硶鎬绘暟.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">浠诲姟鎬绘暟</div>
+ <div class="number">
+ 34
+ <div class="downIcon iconfont"> 2</div>
+ </div>
+
+ <img src="/images/manageCenter/浠诲姟鎬绘暟.png" alt="" />
+ </div>
+ </div>
+
+ <div class="equipmentStatus">
+ <div class="left">
+ <div class="title">璁惧杩愯鐘舵�佺洃娴�</div>
+ <div class="control">
+ <div
+ class="label"
+ @click="select('day', 'selectBar')"
+ :class="{ active: selectBar === 'day' }"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="label"
+ @click="select('week', 'selectBar')"
+ :class="{ active: selectBar === 'week' }"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="label"
+ @click="select('month', 'selectBar')"
+ :class="{ active: selectBar === 'month' }"
+ >
+ 鏈湀
+ </div>
+ </div>
+ <div id="bar"></div>
+ </div>
+
+ <div class="right">
+ <div class="title">璁惧绂荤嚎鏃堕暱鎺掕</div>
+ <div class="timeList scroll">
+ <div
+ class="timeItem"
+ v-for="(item, index) in timeList"
+ :key="index"
+ >
+ <div class="index">
+ {{ index / 10 >= 1 ? index : `0${index}` }}.
+ </div>
+ <div class="name">
+ {{ item.name }}
+ </div>
+ <div class="time">{{ item.time }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="performence">
+ <div class="title">璁惧杩愯鐘舵�佺洃娴�</div>
+ <div class="control">
+ <div
+ class="label"
+ @click="select('day', 'selectForm')"
+ :class="{ active: selectForm === 'day' }"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="label"
+ @click="select('week', 'selectForm')"
+ :class="{ active: selectForm === 'week' }"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="label"
+ @click="select('month', 'selectForm')"
+ :class="{ active: selectForm === 'month' }"
+ >
+ 鏈湀
+ </div>
+ </div>
+ <div class="table-area">
+ <el-table
+ id="table"
+ ref="table"
+ tooltip-effect="dark"
+ :data="dataList"
+ :fit="true"
+ :stripe="true"
+ class="gutter"
+ >
+ <el-table-column label="搴忓彿" class-name="index">
+ <template slot-scope="scope">{{
+ scope.$index + 1 + (page - 1) * size
+ }}</template>
+ </el-table-column>
+
+ <el-table-column
+ prop="name"
+ label="璁惧鍚嶇О"
+ show-overflow-tooltip
+ ></el-table-column>
+
+ <el-table-column
+ prop="id"
+ label="璁惧ID"
+ show-overflow-tooltip
+ ></el-table-column>
+
+ <el-table-column
+ prop="mem"
+ label="鍐呭瓨"
+ show-overflow-tooltip
+ ></el-table-column>
+
+ <el-table-column
+ prop="gpu"
+ label="绠楀姏"
+ show-overflow-tooltip
+ ></el-table-column>
+
+ <el-table-column
+ prop="cpu"
+ label="cpu"
+ show-overflow-tooltip
+ ></el-table-column>
+
+ <el-table-column
+ prop="dist"
+ label="纭洏"
+ show-overflow-tooltip
+ ></el-table-column>
+ </el-table>
+ <el-pagination
+ @current-change="refrash"
+ @size-change="handleSizeChange"
+ :current-page="page"
+ :page-size="size"
+ layout="total, sizes, prev, pager, next, jumper"
+ :page-sizes="[5, 10, 15, 20, 25]"
+ :total="total"
+ background
+ ></el-pagination>
+ </div>
+ </div>
+
+ <div class="map">
+ <div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮</div>
+ <div id="mapChart"></div>
+ </div>
+
+ <div class="hashRate">
+ <div class="left">
+ <div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮:</div>
+ <div class="info">
+ <div class="item">
+ <div class="label">浠婃棩骞冲潎绠楀姏:</div>
+ <div class="data">45</div>
+ </div>
+ <div class="item">
+ <div class="label">璁惧鎬婚噺:</div>
+ <div class="data">92</div>
+ </div>
+ </div>
+ <div id="scatterChart"></div>
+ </div>
+ <div class="right">
+ <div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮</div>
+ <div id="pieChart"></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 椤靛熬 -->
+ <Footer :isBlack="true"></Footer>
+ </div>
</template>
<script>
-export default {};
+import IndexHeader from "@/components/IndexHeader";
+import Footer from "@/components/Footer";
+import * as echarts from "echarts";
+import "echarts/map/js/china.js";
+
+export default {
+ components: {
+ IndexHeader,
+ Footer,
+ },
+ created() {
+ this.getInfo();
+ },
+ mounted() {
+ this.initBar();
+ this.initMap();
+ this.initScatter();
+ this.initPie();
+ },
+ data() {
+ return {
+ userName: "",
+ timeMsg: "",
+ selectBar: "day",
+ selectForm: "day",
+ productList: [
+ {
+ name: "璁惧绠＄悊",
+ icon: "/images/manageCenter/璁惧绠＄悊.png",
+ path: "/equipmentManagement",
+ },
+
+ {
+ name: "绠楀姏绠＄悊",
+ icon: "/images/manageCenter/绠楀姏绠＄悊.png",
+ path: "/hashrate",
+ },
+
+ {
+ name: "缁熻鏌ヨ",
+ icon: "/images/manageCenter/绠楀姏绠＄悊.png",
+ path: "/",
+ },
+ ],
+ timeList: [
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ ],
+ barOption: {
+ legend: {
+ x: "right",
+ y: "top",
+ itemHeight: 12,
+ itemWidth: 12,
+ icon: "circle",
+ },
+ tooltip: {},
+ dataset: {
+ source: [
+ ["status", "鍦ㄧ嚎", "绂荤嚎"],
+ ["00:00", 750, 130],
+ ["02:00", 650, 230],
+ ["04:00", 750, 130],
+ ["06:00", 550, 330],
+ ["08:00", 750, 130],
+ ["10:00", 700, 180],
+ ["12:00", 850, 30],
+ ["14:00", 750, 130],
+ ["16:00", 850, 30],
+ ["18:00", 980, 0],
+ ["20:00", 750, 130],
+ ["22:00", 750, 130],
+ ],
+ },
+ xAxis: {
+ type: "category",
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#666",
+ },
+ },
+ yAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ axisLabel: {
+ color: "#666",
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ // Declare several bar series, each will be mapped
+ // to a column of dataset.source by default.
+ series: [
+ {
+ type: "bar",
+ color: {
+ type: "linear",
+ x: 0.02,
+ y: 0.02,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#0066FF", // 0% 澶勭殑棰滆壊
+ radius: ["50%", "80%"],
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 102, 255, 0.25)", // 100% 澶勭殑棰滆壊
+ },
+ ],
+ global: false, // 缂虹渷涓� false
+ },
+ itemStyle: {
+ //鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius: [15, 15, 0, 0],
+ },
+ },
+ },
+ {
+ type: "bar",
+ color: {
+ type: "linear",
+ x: 0.02,
+ y: 0.02,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#FF4B33", // 0% 澶勭殑棰滆壊
+ radius: ["50%", "80%"],
+ },
+ {
+ offset: 1,
+ color: "rgba(255,75,51,0.25)", // 100% 澶勭殑棰滆壊
+ },
+ ],
+ global: false, // 缂虹渷涓� false
+ },
+ itemStyle: {
+ //鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius: [15, 15, 0, 0],
+ },
+ },
+ },
+ ],
+ },
+ mapOption: {
+ visualMap: {
+ left: "right",
+ min: 0,
+ max: 100,
+ inRange: {
+ color: ["#FCFDFF", "#0065FF"],
+ },
+ itemWidth: 56,
+ itemHeight: 200,
+ text: ["100", "0"],
+ calculable: false,
+ },
+ geo: {
+ //涓浗鍦板浘璁剧疆
+ map: "china",
+ scaleLimit: {
+ min: 1,
+ max: 2,
+ },
+ zoom: 1,
+ top: 120,
+ label: {
+ normal: {
+ show: false,
+ },
+ emphasis: {
+ show: false,
+ },
+ },
+ },
+ tooltip: {
+ //鏄剧ず鎮诞绐楀彛
+ trigger: "item", //浣跨敤杩欎釜鍑芥暟杩斿洖鎮诞鍐呭
+ backgroundColor: "#FFFFFF",
+ textStyle: {
+ color: "#0064FF",
+ fontSize: "14",
+ },
+ formatter: function (params) {
+ const msg = params.data.name + ":" + params.data.value;
+ return msg;
+ },
+ },
+
+ series: [
+ {
+ type: "map",
+ geoIndex: 0,
+ data: [
+ {
+ name: "鍗楁捣璇稿矝",
+ value: 0,
+ eventTotal: 100,
+ specialImportant: 10,
+ import: 10,
+ compare: 10,
+ common: 40,
+ specail: 20,
+ },
+ {
+ name: "鍖椾含",
+ value: 99,
+ },
+ {
+ name: "澶╂触",
+ value: 26,
+ },
+ {
+ name: "涓婃捣",
+ value: 44,
+ },
+ {
+ name: "閲嶅簡",
+ value: 0,
+ },
+ {
+ name: "娌冲寳",
+ value: 0,
+ },
+ {
+ name: "娌冲崡",
+ value: 0,
+ },
+ {
+ name: "浜戝崡",
+ value: 55,
+ },
+ {
+ name: "杈藉畞",
+ value: 19,
+ },
+ {
+ name: "榛戦緳姹�",
+ value: 0,
+ },
+ {
+ name: "婀栧崡",
+ value: 0,
+ },
+ {
+ name: "瀹夊窘",
+ value: 60,
+ },
+ {
+ name: "灞变笢",
+ value: 39,
+ },
+ {
+ name: "鏂扮枂",
+ value: 4,
+ },
+ {
+ name: "姹熻嫃",
+ value: 0,
+ },
+ {
+ name: "娴欐睙",
+ value: 0,
+ },
+ {
+ name: "姹熻タ",
+ value: 36,
+ },
+ {
+ name: "婀栧寳",
+ value: 52,
+ },
+ {
+ name: "骞胯タ",
+ value: 0,
+ },
+ {
+ name: "鐢樿們",
+ value: 7,
+ },
+ {
+ name: "灞辫タ",
+ value: 5,
+ },
+ {
+ name: "鍐呰挋鍙�",
+ value: 0,
+ },
+ {
+ name: "闄曡タ",
+ value: 22,
+ },
+ {
+ name: "鍚夋灄",
+ value: 4,
+ },
+ {
+ name: "绂忓缓",
+ value: 18,
+ },
+ {
+ name: "璐靛窞",
+ value: 5,
+ },
+ {
+ name: "骞夸笢",
+ value: 98,
+ },
+ {
+ name: "闈掓捣",
+ value: 1,
+ },
+ {
+ name: "瑗胯棌",
+ value: 0,
+ },
+ {
+ name: "鍥涘窛",
+ value: 44,
+ },
+ {
+ name: "瀹佸",
+ value: 4,
+ },
+ {
+ name: "娴峰崡",
+ value: 22,
+ },
+ {
+ name: "鍙版咕",
+ value: 3,
+ },
+ {
+ name: "棣欐腐",
+ value: 5,
+ },
+ {
+ name: "婢抽棬",
+ value: 555,
+ },
+ ],
+ },
+ ],
+ },
+ scatterOption: {
+ xAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ yAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+
+ series: [
+ {
+ symbolSize: 20,
+ data: [
+ [10.0, 8.04],
+ [8.07, 6.95],
+ [13.0, 7.58],
+ [9.05, 8.81],
+ [11.0, 8.33],
+ [14.0, 7.66],
+ [13.4, 6.81],
+ [10.0, 6.33],
+ [14.0, 8.96],
+ [12.5, 6.82],
+ [9.15, 7.2],
+ [11.5, 7.2],
+ [3.03, 4.23],
+ [12.2, 7.83],
+ [2.02, 4.47],
+ [1.05, 3.33],
+ [4.05, 4.96],
+ [6.03, 7.24],
+ [12.0, 6.26],
+ [12.0, 8.84],
+ [7.08, 5.82],
+ [5.02, 5.68],
+ ],
+ color: "rgba(0, 101, 255, 0.5)",
+ type: "scatter",
+ },
+ ],
+ },
+ pieOption: {
+ color: [
+ "rgb(54, 60, 231)",
+ "rgb(54, 178, 74)",
+ "rgb(255, 178, 36)",
+ "rgb(0, 190, 231)",
+ "rgb(255, 124, 31)",
+ "rgb(165, 96, 255)",
+ ],
+ series: [
+ {
+ name: "Nightingale Chart",
+ type: "pie",
+ radius: [35, 120],
+ center: ["50%", "50%"],
+ roseType: "area",
+ itemStyle: {
+ borderRadius: 8,
+ },
+ data: [
+ { value: 22.45, name: "绂诲矖" },
+ { value: 20.2, name: "浜鸿劯璇嗗埆" },
+ { value: 17.96, name: "杞﹁締璇嗗埆" },
+ { value: 15.71, name: "鐫″矖" },
+ { value: 12.86, name: "瀹夊叏甯芥娴�" },
+ { value: 10.82, name: "涓綋闈欐" },
+ ],
+ },
+ ],
+ },
+ dataList: [
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ {
+ name: "2.154",
+ id: "DSVAD010120190703",
+ mem: "78%",
+ gpu: "60%",
+ cpu: "23%",
+ dist: "10%",
+ },
+ ],
+ page: 1,
+ size: 5,
+ total: 30,
+ };
+ },
+ methods: {
+ getInfo() {
+ if (sessionStorage.getItem("userInfo")) {
+ this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username;
+ }
+
+ let date = new Date();
+ let year = date.getFullYear(); //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�)
+ let month = date.getMonth() + 1; //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let day = date.getDate(); //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let weekDay = "";
+ switch (date.getDay()) {
+ case 0:
+ weekDay = "鏄熸湡鏃�";
+ break;
+
+ case 1:
+ weekDay = "鏄熸湡涓�";
+ break;
+
+ case 2:
+ weekDay = "鏄熸湡浜�";
+ break;
+
+ case 3:
+ weekDay = "鏄熸湡涓�";
+ break;
+
+ case 4:
+ weekDay = "鏄熸湡鍥�";
+ break;
+
+ case 5:
+ weekDay = "鏄熸湡浜�";
+ break;
+
+ case 6:
+ weekDay = "鏄熸湡鍏�";
+ break;
+ }
+ this.timeMsg =
+ "浠婃棩, " + year + "骞�" + month + "鏈�" + day + "鏃�" + weekDay;
+ },
+ select(value, type) {
+ this[type] = value;
+ },
+ initBar() {
+ let bartDom = document.getElementById("bar");
+ let myChart = echarts.init(bartDom);
+ myChart.setOption(this.barOption);
+ },
+ initMap() {
+ let mapDom = document.getElementById("mapChart");
+ let myChart = echarts.init(mapDom);
+ myChart.setOption(this.mapOption);
+ },
+ initScatter() {
+ let scatterDom = document.getElementById("scatterChart");
+ let myChart = echarts.init(scatterDom);
+ myChart.setOption(this.scatterOption);
+ },
+ initPie() {
+ let pieDom = document.getElementById("pieChart");
+ let myChart = echarts.init(pieDom);
+ myChart.setOption(this.pieOption);
+ },
+ refrash() {},
+ handleSizeChange() {},
+ },
+};
</script>
-<style>
+<style lang="scss" scoped>
+.manageCenter {
+ box-sizing: border-box;
+ min-width: 1346px;
+ background-color: rgb(243, 245, 248);
+
+ .title {
+ margin-bottom: 20px;
+ box-sizing: border-box;
+ padding-left: 10px;
+ border-left: 4px solid #0064ff;
+ font-size: 16px;
+ font-weight: 700;
+ }
+
+ .control {
+ position: absolute;
+ display: flex;
+ top: 20px;
+ right: 20px;
+
+ .label {
+ margin-left: 10px;
+ width: 44px;
+ height: 24px;
+ line-height: 24px;
+ font-size: 14px;
+ text-align: center;
+ color: #666;
+ cursor: pointer;
+
+ &.active {
+ background: #0064ff;
+ border-radius: 12px;
+ color: #fff;
+ }
+ }
+ }
+
+ .centerTitle {
+ box-sizing: border-box;
+ padding-top: 47px;
+ height: 150px;
+ background-image: url("/images/manageCenter/Rectangle 2180.png");
+
+ .welcome {
+ font-size: 14px;
+ font-weight: 700;
+ }
+
+ .time {
+ margin-top: 5px;
+ font-size: 12px;
+ color: #999;
+ }
+ }
+
+ .products {
+ box-sizing: border-box;
+ margin: 24px 0;
+ padding: 20px;
+ max-height: 282px;
+ background-color: #fff;
+
+ .productList {
+ display: flex;
+
+ .productItem {
+ margin-right: 20px;
+ width: 190px;
+ height: 90px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+ border: 1px solid #e9ebee;
+ cursor: pointer;
+
+ img {
+ width: 60px;
+ height: 60px;
+ }
+
+ .name {
+ font-size: 14px;
+ color: #666;
+ }
+
+ &:hover {
+ box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
+ }
+
+ &:nth-child(6n) {
+ margin-right: 0px;
+ }
+ }
+ }
+ }
+
+ .equipmentInfo {
+ display: flex;
+ justify-content: space-between;
+
+ .equipmentCard {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ padding: 20px 0 20px 40px;
+ width: 302px;
+ height: 100px;
+ border-radius: 5px;
+ font-size: 14px;
+ color: #fff;
+
+ .number {
+ display: flex;
+ font-size: 32px;
+ font-weight: 700;
+ align-items: end;
+ }
+
+ .iconfont {
+ padding: 0 5px 0 2px;
+ margin-left: 10px;
+ font-size: 12px;
+ font-weight: normal;
+ margin-bottom: 6px;
+ background-color: #fff;
+ border-radius: 7px;
+
+ &.upIcon {
+ color: #ff6a00;
+ }
+
+ &.downIcon {
+ color: #3fb54a;
+ }
+ }
+
+ img {
+ position: absolute;
+ width: 96px;
+ height: 96px;
+ top: 10px;
+ right: -10px;
+ opacity: 0.2;
+ }
+
+ &:nth-child(1) {
+ background: linear-gradient(
+ 108deg,
+ #0065ff -8%,
+ #0065ff -8%,
+ #99cfff 100%,
+ #99cfff 100%
+ );
+ }
+
+ &:nth-child(2) {
+ background: linear-gradient(
+ 108deg,
+ #ff6a00 0%,
+ #ff6a00 0%,
+ #ffb599 100%,
+ #ffb599 100%
+ );
+ }
+
+ &:nth-child(3) {
+ background: linear-gradient(
+ 108deg,
+ #6d44e5 1%,
+ #6d44e5 1%,
+ #b299ff 100%,
+ #b299ff 100%
+ );
+ }
+
+ &:nth-child(4) {
+ background: linear-gradient(
+ 108deg,
+ #40b63a 0%,
+ #40b63a 0%,
+ #89e5bc 100%,
+ #89e5bc 100%
+ );
+ }
+ }
+ }
+
+ .equipmentStatus {
+ display: flex;
+ justify-content: space-between;
+ margin: 24px 0;
+ height: 466px;
+
+ .left {
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px;
+ background-color: #fff;
+ width: 845px;
+ height: 466px;
+
+ #bar {
+ height: 440px;
+ }
+ }
+
+ .right {
+ box-sizing: border-box;
+ padding: 20px;
+ width: 411px;
+ height: 466px;
+ background: #ffffff;
+
+ .timeList {
+ height: 392px;
+ overflow-y: auto;
+
+ .timeItem {
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ height: 32px;
+ border-radius: 16px;
+ background: rgb(249, 251, 253);
+ font-size: 14px;
+
+ &:nth-child(1),
+ &:nth-child(2),
+ &:nth-child(3) {
+ background: #eff4f9;
+ }
+
+ .index {
+ margin: 0 35px 0 20px;
+ font-size: 16px;
+ color: #0064ff;
+ }
+
+ .time {
+ margin-left: 50px;
+ color: #999;
+ }
+ }
+ }
+ }
+ }
+
+ .performence {
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px;
+ background-color: #fff;
+ width: 1280px;
+ height: 570px;
+
+ .el-pagination ::v-deep {
+ margin-left: 650px;
+ margin-top: 30px;
+ text-align: center;
+ height: 24px;
+ .el-pagination__sizes {
+ margin-right: 0;
+ }
+
+ button {
+ margin: 0;
+ background-color: #fff;
+ border: 1px solid #c0c5cc;
+ border-radius: 2px;
+ }
+
+ .number {
+ background-color: #fff;
+
+ &:not(.disabled):hover {
+ color: #0065ff;
+ }
+
+ &:not(.disabled).active {
+ background-color: #0065ff;
+ color: #fff;
+ }
+ }
+
+ .el-input .el-input__inner {
+ padding-left: 0;
+
+ &:hover,
+ &:focus {
+ border-color: #0065ff;
+ }
+ }
+ }
+ }
+
+ .map {
+ overflow: hidden;
+ box-sizing: border-box;
+ padding: 20px;
+ margin: 24px 0;
+ background-color: #fff;
+ height: 598px;
+
+ #mapChart {
+ margin-top: -100px;
+ width: 1100px;
+ height: 600px;
+ }
+ }
+
+ .hashRate {
+ margin-bottom: 20px;
+ display: flex;
+ height: 540px;
+
+ .left {
+ position: relative;
+ box-sizing: border-box;
+ padding: 20px;
+ margin-right: 24px;
+ width: 737px;
+ background-color: #fff;
+
+ #scatterChart {
+ height: 500px;
+ }
+ }
+
+ .right {
+ box-sizing: border-box;
+ padding: 20px;
+ width: 519px;
+ height: 540px;
+ background: #ffffff;
+
+ #pieChart {
+ margin-top: -40px;
+ height: 500px;
+ }
+ }
+
+ .info {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+
+ .item {
+ display: flex;
+ justify-content: end;
+ align-items: center;
+
+ .label {
+ margin-right: 8px;
+ font-size: 14px;
+ color: #666;
+ }
+
+ .data {
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0