|
|
|
|
@ -3,7 +3,7 @@ import ReCol from "@/components/ReCol";
|
|
|
|
|
import { barChart, pieChart, pie3DChart } from "./components/chart";
|
|
|
|
|
import DeviceStatus from "./components/DeviceStatus.vue";
|
|
|
|
|
import Notify from "./components/Notify.vue";
|
|
|
|
|
import SwiperShow from "./components/SwiperShow.vue";
|
|
|
|
|
// import SwiperShow from "./components/SwiperShow.vue";
|
|
|
|
|
// import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
|
// import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
|
|
|
|
|
|
|
|
|
|
@ -12,7 +12,7 @@ defineOptions({
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**styles */
|
|
|
|
|
const headStyles: string = "inline-block mb-3 text-base font-bold";
|
|
|
|
|
const headStyles = "inline-block mb-3 text-base font-bold";
|
|
|
|
|
|
|
|
|
|
/** 分析概览 */
|
|
|
|
|
// const barChartData = [
|
|
|
|
|
@ -42,6 +42,8 @@ const dataViewList = [
|
|
|
|
|
color: "#FF861A",
|
|
|
|
|
bgColor: "#FFE9D6",
|
|
|
|
|
bigBgColor: "#FFFAF5",
|
|
|
|
|
bgImage: "/src/assets/home/abnormal_total.png",
|
|
|
|
|
bgIcon: "/src/assets/home/abnormal_icon.png",
|
|
|
|
|
icon: "icon-yichangzongliang1"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -50,6 +52,8 @@ const dataViewList = [
|
|
|
|
|
color: "#5786FF",
|
|
|
|
|
bgColor: "#D6E0FF",
|
|
|
|
|
bigBgColor: "#F5F8FF",
|
|
|
|
|
bgImage: "/src/assets/home/equipment_total.png",
|
|
|
|
|
bgIcon: "/src/assets/home/equipment_icon.png",
|
|
|
|
|
icon: "icon-shebeizongliang1"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -58,6 +62,8 @@ const dataViewList = [
|
|
|
|
|
color: "#5024FE",
|
|
|
|
|
bgColor: "#DDD5FD",
|
|
|
|
|
bigBgColor: "#F5F3FD",
|
|
|
|
|
bgImage: "/src/assets/home/coverage_workshop.png",
|
|
|
|
|
bgIcon: "/src/assets/home/coverage_icon.png",
|
|
|
|
|
icon: "icon-fugaichejian"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -65,6 +71,8 @@ const dataViewList = [
|
|
|
|
|
value: "89300",
|
|
|
|
|
color: "#14A1FF",
|
|
|
|
|
bgColor: "#D6EFFF",
|
|
|
|
|
bgImage: "/src/assets/home/resource_utilization.png",
|
|
|
|
|
bgIcon: "/src/assets/home/resource_icon.png",
|
|
|
|
|
bigBgColor: "#F5FBFF",
|
|
|
|
|
|
|
|
|
|
icon: "icon-ziyuanshiyong1"
|
|
|
|
|
@ -75,7 +83,7 @@ const dataViewList = [
|
|
|
|
|
<template>
|
|
|
|
|
<div class="main workbench_wrap">
|
|
|
|
|
<el-row :gutter="24" justify="space-around">
|
|
|
|
|
<re-col
|
|
|
|
|
<!-- <re-col
|
|
|
|
|
v-motion
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
:value="24"
|
|
|
|
|
@ -99,15 +107,15 @@ const dataViewList = [
|
|
|
|
|
<SwiperShow />
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
</re-col> -->
|
|
|
|
|
<!-- up -->
|
|
|
|
|
<re-col
|
|
|
|
|
v-motion
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
:value="8"
|
|
|
|
|
:md="8"
|
|
|
|
|
:sm="8"
|
|
|
|
|
:xs="8"
|
|
|
|
|
:value="24"
|
|
|
|
|
:md="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:xs="24"
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
@ -120,40 +128,53 @@ const dataViewList = [
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<span :class="headStyles">数据总览</span>
|
|
|
|
|
|
|
|
|
|
<ul class="flex justify-between flex-wrap h-[252px] dataView_box">
|
|
|
|
|
<!-- <pieChart /> -->
|
|
|
|
|
<li v-for="(v, k) in dataViewList" :key="k" class="w-1/2">
|
|
|
|
|
<el-card
|
|
|
|
|
class="line-card"
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{
|
|
|
|
|
backgroundColor: v.bigBgColor,
|
|
|
|
|
padding: '20px 16px'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center h-[77px]">
|
|
|
|
|
<el-card
|
|
|
|
|
class="line-card"
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{ padding: '16px 20px' }"
|
|
|
|
|
>
|
|
|
|
|
<span :class="headStyles">数据总览</span>
|
|
|
|
|
<ul class="flex justify-between flex-wrap h-[120px] dataView_box">
|
|
|
|
|
<!-- <pieChart /> -->
|
|
|
|
|
<li v-for="(v, k) in dataViewList" :key="k" class="w-1/4">
|
|
|
|
|
<el-card
|
|
|
|
|
class="line-card"
|
|
|
|
|
shadow="never"
|
|
|
|
|
:body-style="{
|
|
|
|
|
// backgroundColor: v.bigBgColor,
|
|
|
|
|
backgroundImage: `url(${v.bgImage})`,
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
padding: '20px 16px',
|
|
|
|
|
position: 'relative'
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center h-[77px] relative">
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="flex items-center justify-center"
|
|
|
|
|
style="width: 48px; height: 48px; border-radius: 50%"
|
|
|
|
|
:style="{ backgroundColor: v.bgColor }"
|
|
|
|
|
>
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont"
|
|
|
|
|
:class="v.icon"
|
|
|
|
|
style="font-size: 24px"
|
|
|
|
|
:style="{ color: v.color }"
|
|
|
|
|
/>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="dataView_info">
|
|
|
|
|
<span>{{ v.label }}</span>
|
|
|
|
|
<p>{{ v.value }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="flex items-center justify-center"
|
|
|
|
|
style="width: 48px; height: 48px; border-radius: 50%"
|
|
|
|
|
:style="{ backgroundColor: v.bgColor }"
|
|
|
|
|
class="w-[95px] h-[72px] absolute right-[1px] bottom-[1px]"
|
|
|
|
|
>
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont"
|
|
|
|
|
:class="v.icon"
|
|
|
|
|
style="font-size: 24px"
|
|
|
|
|
:style="{ color: v.color }"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dataView_info">
|
|
|
|
|
<span>{{ v.label }}</span>
|
|
|
|
|
<p>{{ v.value }}</p>
|
|
|
|
|
<img :src="v.bgIcon" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</el-card>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
<re-col
|
|
|
|
|
v-motion
|
|
|
|
|
@ -180,7 +201,7 @@ const dataViewList = [
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex justify-between h-[220px]"><DeviceStatus /></div>
|
|
|
|
|
<div class="flex justify-between h-[250px]"><DeviceStatus /></div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
<re-col
|
|
|
|
|
@ -208,12 +229,11 @@ const dataViewList = [
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex justify-between h-[220px]">
|
|
|
|
|
<div class="flex justify-between h-[250px]">
|
|
|
|
|
<pie3DChart :data="pie3Ddata.data" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
<!-- down -->
|
|
|
|
|
<re-col
|
|
|
|
|
v-motion
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
@ -233,24 +253,25 @@ const dataViewList = [
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<span :class="headStyles">违规总量</span>
|
|
|
|
|
<span :class="headStyles">算力占用</span>
|
|
|
|
|
<el-card
|
|
|
|
|
class="line-card"
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex justify-between h-[265px]">
|
|
|
|
|
<barChart />
|
|
|
|
|
<div class="flex justify-between h-[250px]">
|
|
|
|
|
<pieChart />
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
<!-- down -->
|
|
|
|
|
<re-col
|
|
|
|
|
v-motion
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
:value="8"
|
|
|
|
|
:md="8"
|
|
|
|
|
:sm="8"
|
|
|
|
|
:xs="8"
|
|
|
|
|
:value="14"
|
|
|
|
|
:md="14"
|
|
|
|
|
:sm="14"
|
|
|
|
|
:xs="14"
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
@ -263,24 +284,24 @@ const dataViewList = [
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<span :class="headStyles">算力占用</span>
|
|
|
|
|
<span :class="headStyles">违规总量</span>
|
|
|
|
|
<el-card
|
|
|
|
|
class="line-card"
|
|
|
|
|
shadow="always"
|
|
|
|
|
:body-style="{ padding: '16px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex justify-between h-[265px]">
|
|
|
|
|
<pieChart />
|
|
|
|
|
<barChart />
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</re-col>
|
|
|
|
|
<re-col
|
|
|
|
|
v-motion
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
:value="8"
|
|
|
|
|
:md="8"
|
|
|
|
|
:sm="8"
|
|
|
|
|
:xs="8"
|
|
|
|
|
:value="10"
|
|
|
|
|
:md="10"
|
|
|
|
|
:sm="10"
|
|
|
|
|
:xs="10"
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
@ -315,10 +336,13 @@ const dataViewList = [
|
|
|
|
|
& > li {
|
|
|
|
|
padding-right: 16px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
&:nth-child(2n) {
|
|
|
|
|
&:nth-child(4n) {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line-card {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
.dataView_info {
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
& > span {
|
|
|
|
|
|
JINGYJ
10 months ago
