<template>
|
<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>
|
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/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") {
|
const { href } = this.$router.resolve({
|
path: "/search"
|
})
|
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 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>
|
