From ece5b7b7d24f85a3253cf722291e69ca7a406192 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 16 八月 2022 13:05:18 +0800
Subject: [PATCH] 完善大屏
---
src/views/manageCenter/index.vue | 1062 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,058 insertions(+), 4 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index 892093a..cdb76cc 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -1,10 +1,1064 @@
<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" @click="jump(item)">
+ <img :src="item.icon" alt="" />
+ <div class="name">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="heart">
+ <div class="products">
+ <div class="title">缁熻鍒嗘瀽</div>
+ <div class="productList">
+ <p class="p-statis" style=" vertical-align: top">
+ <span>鏃堕棿锛�</span>
+ <el-date-picker
+ size="mini"
+ v-model="searchTime"
+ @change="searchHandler"
+ type="datetimerange"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :default-time="['00:00:00', '23:59:59']"
+ ></el-date-picker>
+ </p>
+ <!-- <p class="p-statis" style="margin-left: 10px">
+ <b style="width: 60px">鍦烘櫙锛�</b>
+ <el-select
+ v-model="taskValues"
+ multiple
+ @change="searchingBtn"
+ :disabled="typeDisable"
+ collapse-tags
+ size="mini"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in VideoPhotoData.tasks"
+ style="font-size: 12px"
+ :key="item.id + 'x'"
+ :value="item.id"
+ :label="item.isDelete ? item.name + '锛堝凡鍒犻櫎锛�' : item.name"
+ :title="item.isDelete ? item.name + '锛堝凡鍒犻櫎锛�' : item.name"
+ ></el-option>
+ </el-select>
+ </p> -->
+
+ <p class="p-statis" style="margin-left: 20px">
+ <span>閮ㄩ棬锛�</span>
+ <el-cascader
+ size="mini"
+ style="width:400px"
+ v-model="searchTree"
+ :options="menuTree"
+ :props="{ value: 'id', label: 'name', checkStrictly: true }"
+ collapse-tags
+ clearable
+ @change="handleTreeChange"
+ ></el-cascader>
+ </p>
+ <p class="p-statis" style="margin-left: 20px">
+ <span>绛夌骇锛�</span>
+ <el-select
+ v-model="alarmValues"
+ clearable
+ collapse-tags
+ size="mini"
+ style="width:140px"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in levelOptions"
+ :key="item.id"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </p>
+ <p class="p-statis" style="">
+ <el-button type="primary" size="mini" @click="searchHandler">鎼滅储</el-button>
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div class="equipmentInfo">
+ <div class="equipmentCard">
+ <div class="label">棰勮鎬婚噺</div>
+ <div class="number">
+ {{ warningTotal }}
+ <div class="upIcon iconfont"></div>
+ </div>
+
+ <img src="/images/manageCenter/total2.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">鎺掓煡鏁伴噺</div>
+ <div class="number">
+ {{ warningChecked }}
+ <div class="upIcon iconfont"></div>
+ </div>
+
+ <img src="/images/manageCenter/total3.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">鏁存敼鏁伴噺</div>
+ <div class="number">
+ {{ warningSolved }}
+ <div class="downIcon iconfont"></div>
+ </div>
+
+ <img src="/images/manageCenter/total4.png" alt="" />
+ </div>
+
+ <div class="equipmentCard">
+ <div class="label">澶勭悊鐜�</div>
+ <div class="number">
+ {{ warningManage }}
+ <div class="downIcon iconfont"></div>
+ </div>
+
+ <img src="/images/manageCenter/total1.png" alt="" />
+ </div>
+ </div>
+
+ <div class="equipmentStatus">
+ <div class="bar-chart">
+ <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>
+
+ <div class="hashRate">
+ <div class="left">
+ <div class="title">棰勮鏁版嵁鍗犳瘮:</div>
+ <div class="info">
+ <div class="equipmentInfo" style="margin-top:25px">
+ <div class="equipmentCard">
+ <div class="label">鏁存敼鎬婚噺</div>
+ <div class="number">
+ {{ solvedTotal }}
+ <!-- <div class="upIcon iconfont"> 2</div> -->
+ </div>
+
+ <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
+ </div>
+ <div class="equipmentCard">
+ <div class="label">鏃ュ潎娆℃暟</div>
+ <div class="number">
+ {{ solvedPre }}
+ <!-- <div class="upIcon iconfont"> 2</div> -->
+ </div>
+
+ <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
+ </div>
+ </div>
+
+ <div class="table-area">
+ <el-table
+ id="table"
+ ref="table"
+ tooltip-effect="dark"
+ :data="tableDataList"
+ :fit="true"
+ :stripe="true"
+ :max-height="350"
+ class="gutter"
+ >
+ <el-table-column prop="date" label="鏃ユ湡" show-overflow-tooltip></el-table-column>
+
+ <el-table-column prop="count" align="center" 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="solvedTotal"
+ background
+ ></el-pagination>
+ </div>
+ </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"
+import * as Base64 from "js-base64"
+
+import { analysisReport } from "@/api/es"
+import { getLocalCameraTree } from "@/api/area"
+import { getClusterDevList } from "@/api/clusterManage"
+
+export default {
+ components: {
+ IndexHeader,
+ Footer
+ },
+ computed: {
+ solvedPre() {
+ if (this.solvedTotal == 0 || this.tableDataList.length == 0) {
+ return 0
+ }
+ return parseInt(this.solvedTotal / this.tableDataList.length)
+ },
+ warningManage() {
+ if (this.warningChecked == 0 || this.warningTotal == 0) {
+ return 0
+ }
+ return parseInt(this.warningChecked / this.warningTotal) * 100 + "%"
+ }
+ },
+ data() {
+ return {
+ lineChart: {},
+ pieChart: {},
+ searchTree: "",
+ selectedOrg: "",
+ selectNodes: [],
+ searchTime: [
+ this.$moment()
+ .subtract(6, "days")
+ .format("YYYY-MM-DD 00:00:00"),
+ this.$moment().format("YYYY-MM-DD HH:mm:ss")
+ ],
+ alarmValues: "",
+ userName: "",
+ timeMsg: "",
+ selectBar: "day",
+ selectForm: "day",
+ productList: [
+ {
+ name: "璁惧绠＄悊",
+ icon: "/images/manageCenter/manage.png",
+ openPath: "/equipmentManagement",
+ path: "/equipmentList",
+ permission: "deviceMng"
+ },
+
+ {
+ name: "绠楀姏绠＄悊",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/hashrate",
+ path: "/hashrateDetail",
+ permission: "analysisMng"
+ },
+
+ {
+ name: "缁熻鏌ヨ",
+ icon: "/images/manageCenter/search.png",
+ openPath: "/searchOpen",
+ path: "/search",
+ permission: "statisticMng"
+ },
+ {
+ name: "缁熻鍒嗘瀽",
+ icon: "/images/manageCenter/search.png",
+ openPath: "/dataView",
+ path: "/dataView",
+ permission: "statisticMng"
+ },
+
+ {
+ name: "鎺ㄩ�佺鐞�",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/report",
+ path: "/report",
+ permission: "statisticMng"
+ },
+
+ {
+ name: "瀹炴椂鐩戞帶",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/video",
+ path: "/video",
+ permission: "statisticMng"
+ }
+ ],
+ cameraTree: [],
+ menuTree: [],
+ levelOptions: [
+ { id: 0, value: "", label: "鍏ㄩ儴" },
+ { id: 1, value: "涓�绾�", label: "涓�绾�" },
+ { id: 2, value: "浜岀骇", label: "浜岀骇" },
+ { id: 3, value: "涓夌骇", label: "涓夌骇" },
+ { id: 4, value: "鍥涚骇", label: "鍥涚骇" },
+ { id: 5, value: "浜旂骇", label: "浜旂骇" }
+ ],
+ barOption: {
+ grid: {
+ left: "3%",
+ right: "3%",
+ bottom: "10%",
+ containLabel: true
+ },
+ legend: {
+ x: "right",
+ y: "top",
+ itemHeight: 2,
+ itemWidth: 2,
+ icon: "circle"
+ },
+ tooltip: {},
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: "#666"
+ },
+ data: []
+ },
+ 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: "line",
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#0066FF"
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 102, 255, 0.25)"
+ }
+ ])
+ },
+ 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]
+ }
+ }
+ }
+ ]
+ },
+ pieOption: {
+ legend: {
+ top: "bottom"
+ },
+ color: [
+ "rgb(54, 60, 231)",
+ "rgb(54, 178, 74)",
+ "rgb(255, 178, 36)",
+ "rgb(240, 190, 231)",
+ "rgb(255, 124, 31)",
+ "rgb(165, 96, 255)"
+ ],
+ series: [
+ {
+ name: "Nightingale Chart",
+ type: "pie",
+ radius: [20, 160],
+ center: ["50%", "50%"],
+ roseType: "area",
+ itemStyle: {
+ borderRadius: 8
+ },
+ label: {
+ show: false
+ },
+ data: []
+ }
+ ]
+ },
+ tableDataList: [],
+ page: 1,
+ size: 5,
+ solvedTotal: 0,
+ warningTotal: 0,
+ warningChecked: 0,
+ warningSolved: 0
+ }
+ },
+ created() {
+ this.getInfo()
+ },
+ mounted() {
+ this.searchHandler()
+ this.initBar()
+ this.initPie()
+ this.getCameras()
+ },
+ methods: {
+ async getCameras() {
+ let clusterId = ""
+ let clusterReq = await getClusterDevList()
+ if (clusterReq && clusterReq.success) {
+ if (clusterReq.data.clusterList.length > 0) {
+ clusterId = clusterReq.data.clusterList[0].cluster_id
+ }
+ }
+ let camereReq = await getLocalCameraTree({ clusterId: clusterId })
+ if (camereReq && camereReq.success) {
+ this.cameraTree = camereReq.data.treeMenu
+ let tmpTree = JSON.parse(JSON.stringify(camereReq.data.treeMenu))
+ for (let i = 0; i < tmpTree.length; i++) this.clearNode(tmpTree[i])
+ this.menuTree = tmpTree
+ }
+ },
+ clearNode(tree) {
+ if (tree.children) {
+ tree.children = tree.children.filter((item) => {
+ return item.type == "MENU"
+ })
+ }
+ if (tree.children && tree.children.length > 0) {
+ for (let i = 0; i < tree.children.length; i++) this.clearNode(tree.children[i])
+ } else {
+ delete tree.children
+ }
+ },
+ collSelectedNodes() {
+ let selectedNodeId = this.selectedOrg
+ let selectedNode = {}
+ let orgNodeIds = []
+
+ if (this.selectedOrg == "") {
+ return orgNodeIds
+ }
+
+ function findNode(node) {
+ if (node.id == selectedNodeId) {
+ selectedNode = node
+
+ return
+ }
+
+ if (node.children) {
+ node.children.forEach((n) => {
+ findNode(n)
+ })
+ }
+ }
+
+ function collNode(node) {
+ if (node.type != "MENU") {
+ orgNodeIds.push(node.id)
+ return
+ }
+
+ if (node.children) {
+ node.children.forEach((n) => {
+ collNode(n)
+ })
+ }
+ }
+
+ this.cameraTree.forEach((n) => {
+ findNode(n)
+ })
+
+ collNode(selectedNode)
+
+ return orgNodeIds
+ },
+ searchHandler() {
+ let query = {
+ treeNodes: this.collSelectedNodes(),
+ searchTime: this.format(this.searchTime),
+ alarmLevel: this.alarmValues
+ }
+
+ analysisReport(query).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.decodeWarningRate(rsp.data.warningRate)
+ this.decodeWarningChartRate(rsp.data.warningChartRate)
+ this.decodeWarningStatics(rsp.data.warningTable)
+ this.decodeWarningTable(rsp.data.warningStatics)
+ }
+ })
+ },
+ decodeWarningTable(b64data) {
+ this.solvedTotal = 0
+ this.tableDataList = []
+ if (b64data) {
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ decodeResult = []
+ if (decodeResult) {
+ decodeResult.forEach((element) => {
+ this.solvedTotal = this.solvedTotal + element.doc_count
+ this.tableDataList.push({ date: element.key_as_string, count: element.doc_count })
+ })
+ }
+ }
+ }
+ },
+ // 鎶樼嚎鍥�
+ decodeWarningStatics(b64data) {
+ this.lineChart.clear()
+ this.barOption.xAxis.data = []
+ this.barOption.series[0].data = []
+ if (b64data) {
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult) {
+ decodeResult.forEach((element) => {
+ this.barOption.xAxis.data.push(element.key_as_string)
+ this.barOption.series[0].data.push(element.doc_count)
+ })
+ }
+ }
+ }
+
+ this.lineChart.setOption(this.barOption)
+ },
+ // 楗煎浘
+ decodeWarningChartRate(b64data) {
+ this.pieChart.clear()
+ this.pieOption.series[0].data = []
+ if (b64data) {
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult) {
+ decodeResult.forEach((element) => {
+ this.pieOption.series[0].data.push({ value: element.doc_count, name: element.key })
+ })
+ }
+ }
+ }
+ this.pieChart.setOption(this.pieOption)
+ },
+ // "warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}
+ //key 1=璇姤鏁版嵁,2=宸叉暣鏀�,3=鏈暣鏀�,4=宸叉帓鏌� doc_count=鏁伴噺 total=鎬婚噺
+ decodeWarningRate(b64data) {
+ if (b64data) {
+ this.warningTotal = 0
+ this.warningSolved = 0
+ this.warningChecked = 0
+
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult && decodeResult.total > 0) {
+ this.warningTotal = decodeResult.total
+ decodeResult.buckets.forEach((element) => {
+ switch (element.key) {
+ case 2:
+ this.warningSolved += element.doc_count
+ break
+ case 4:
+ this.warningChecked += element.doc_count
+ break
+ default:
+ break
+ }
+ })
+ }
+ // console.log("WarningRate:", decodeResult)
+ }
+ }
+ },
+ handleTreeChange(value) {
+ this.selectedOrg = value[value.length - 1]
+ },
+ 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")
+ this.lineChart = echarts.init(bartDom)
+ this.lineChart.setOption(this.barOption)
+ },
+
+ initPie() {
+ let pieDom = document.getElementById("pieChart")
+ this.pieChart = echarts.init(pieDom)
+ this.pieChart.setOption(this.pieOption)
+ },
+ jump(route) {
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
+
+ const val = userInfo.permissions.find((item) => {
+ return item == route.permission
+ })
+ if (val) {
+ if (route.path === "/search" || route.path === "/dataView") {
+ const { href } = this.$router.resolve({
+ path: route.path
+ })
+ window.open(href, "_blank")
+ return
+ }
+ this.$router.push(route.path)
+ } else if (!userInfo.parentId) {
+ this.$router.push(route.openPath)
+ }
+ },
+ refrash() {},
+ handleSizeChange() {},
+ format(array) {
+ if (!array || array.length === 0) {
+ return []
+ }
+ return [
+ this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
+ this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
+ ]
+ }
+ }
+}
</script>
-<style>
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+.manageCenter {
+ box-sizing: border-box;
+ min-width: 1346px;
+ background-color: rgb(243, 245, 248);
+
+ .p-statis {
+ display: flex;
+ padding-right: 10px;
+ box-sizing: border-box;
+ margin-top: 20px;
+ b:hover {
+ color: #2249b4;
+ }
+ }
+ .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;
+
+ .bar-chart {
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px;
+ background-color: #fff;
+ width: 100%;
+ height: 466px;
+
+ #bar {
+ height: 440px;
+ }
+ }
+
+ .right {
+ box-sizing: border-box;
+ padding: 20px;
+ width: 411px;
+ height: 466px;
+ background: #ffffff;
+ }
+ }
+
+ .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;
+ }
+
+ .table-area {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ width: 700px;
+ }
+ }
+
+ .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: flex-end;
+ align-items: center;
+
+ .label {
+ margin-right: 8px;
+ font-size: 14px;
+ color: #666;
+ }
+
+ .data {
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0