演示地址：
代码语言：javascript复制https://lyt-top.gitee.io/vue-next-admin-preview/#/visualizingDemo2演示效果：
代码：
代码语言：javascript复制<template>
<div class="visualizing-demo2">
<!-- 顶部 -->
<div class="big-data-up">
<div class="up-left">
<i class="el-icon-time mr5"></i>
<span>{{ time.txt }}</span>
</div>
<div class="up-center">
<span>智慧农业系统平台</span>
</div>
<div class="up-right">
<el-dropdown size="small">
<span class="el-dropdown-link">
{{ dropdownActive }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(v, k) in dropdownList" :key="k">{{ v.label }} </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="ml15">
<i class="el-icon-bell mr5"></i>
<span>消息</span>
</div>
<div class="ml15">
<i class="el-icon-user mr5"></i>
<span>个人</span>
</div>
<div class="ml15">
<i class="el-icon-switch-button mr5"></i>
<span>返回</span>
</div>
</div>
</div>
<div class="big-data-down">
<!-- 左边 -->
<div class="big-data-down-left">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">天气预报</div>
<div class="flex-content flex-content-overflow">
<div class="sky">
<i class="sky-left el-icon-cloudy-and-sunny"></i>
<div class="sky-center">
<div class="mb2">
<span class="font">多云转晴</span>
<span class="font">东南风</span>
<span>良</span>
</div>
<div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div>
</div>
<div class="sky-right">
<span>25</span>
<span class="font">°C</span>
</div>
</div>
<div class="sky-dd">
<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
<div>{{ v.v1 }}</div>
<div v-if="v.type === 'title'">{{ v.v2 }}</div>
<div v-else>
<i :class="v.v2"></i>
</div>
<div>{{ v.v3 }}</div>
<div>{{ v.v4 }}</div>
<div class="tip">{{ v.v5 }}</div>
<div>{{ v.v6 }}</div>
<div>{{ v.v7 }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">当前设备状态</div>
<div class="flex-content flex-content-overflow">
<div class="d-states">
<div class="d-states-item">
<i class="el-icon-odometer i-bg1"></i>
<div class="d-states-flex">
<div class="d-states-item-label">园区设备数</div>
<div class="d-states-item-value">99</div>
</div>
</div>
<div class="d-states-item">
<i class="el-icon-first-aid-kit i-bg2"></i>
<div class="d-states-flex">
<div class="d-states-item-label">预警设备数</div>
<div class="d-states-item-value">10</div>
</div>
</div>
<div class="d-states-item">
<i class="el-icon-video-play i-bg3"></i>
<div class="d-states-flex">
<div class="d-states-item-label">运行设备数</div>
<div class="d-states-item-value">20</div>
</div>
</div>
</div>
<div class="d-btn">
<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k" :class="{ 'd-btn-active': dBtnActive === k }">
<i class="d-btn-item-left el-icon-money"></i>
<div class="d-btn-item-center">
<div>{{ v.v1 }}</div>
<div>{{ v.v2 }}|{{ v.v3 }}</div>
</div>
<div class="d-btn-item-eight">{{ v.v4 }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">近30天预警总数</div>
<div class="flex-content" ref="rightChartData1"></div>
</div>
</div>
</div>
<!-- 中间 -->
<div class="big-data-down-center">
<div class="big-data-down-center-one">
<div class="big-data-down-center-one-content" ref="rightChartData5">
<div id="3DEarth"></div>
<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k">
<div class="circle" v-for="i in 4" :key="i"></div>
<div class="text-box">
<i :class="v.icon"></i>
<div class="text">{{ v.label }}</div>
</div>
</div>
</div>
</div>
<div class="big-data-down-center-two">
<div class="flex-warp-item-box">
<div class="flex-title">
<span>当前设备监测</span>
<span class="flex-title-small">单位：次</span>
</div>
<div class="flex-content">
<div class="flex-content-left">
<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
<div class="monitor-wave" :class="{ 'monitor-active': k === chartData4Index }">
<div class="monitor-z-index">
<div class="monitor-item-label">{{ v.label }}</div>
</div>
</div>
</div>
</div>
<div class="flex-content-right" ref="rightChartData4"></div>
</div>
</div>
</div>
</div>
<!-- 右边 -->
<div class="big-data-down-right">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">
<span>近7天产品追溯扫码统计</span>
<span class="flex-title-small">单位：次</span>
</div>
<div class="flex-content" ref="rightChartData3"></div>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">当前任务统计</div>
<div class="flex-content">
<div class="task">
<div class="task-item task-first-item">
<div class="task-item-value task-first">25</div>
<div class="task-item-label">待办任务</div>
</div>
<div class="task-item">
<div class="task-item-box task1">
<div class="task-item-value">12</div>
<div class="task-item-label">施肥</div>
</div>
</div>
<div class="task-item">
<div class="task-item-box task2">
<div class="task-item-value">3</div>
<div class="task-item-label">施药</div>
</div>
</div>
<div class="task-item">
<div class="task-item-box task3">
<div class="task-item-value">5</div>
<div class="task-item-label">农事</div>
</div>
</div>
<div class="task-item">
<div class="task-item-box task4">
<div class="task-item-value">3</div>
<div class="task-item-label">巡园</div>
</div>
</div>
<div class="task-item">
<div class="task-item-box task5">
<div class="task-item-value">2</div>
<div class="task-item-label">采集</div>
</div>
</div>
</div>
<div ref="rightChartData6" class="progress"></div>
</div>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="flex-title">
<span>近7天投入品记录</span>
<span class="flex-title-small">单位：件</span>
</div>
<div class="flex-content" ref="rightChartData2"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { formatDate } from '/@/utils/formatTime';
import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2';
import worldImg from './images/world.jpg';
import bathymetryImg from './images/bathymetry.jpg';
export default defineComponent({
name: 'visualizingLinkDemo2',
setup() {
const { proxy } = getCurrentInstance() as any;
const state = reactive({
time: {
txt: '',
fun: 0,
},
dropdownList,
dropdownActive: '请选择',
skyList,
dBtnList,
chartData4Index: 0,
dBtnActive: 0,
earth3DBtnList,
chartData4List,
myCharts: [],
});
// 初始化时间
const initTime = () => {
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
state.time.fun = window.setInterval(() => {
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
}, 1000);
};
// 近30天预警总数
const initRightChartData1 = () => {
const myChart = echarts.init(proxy.$refs.rightChartData1);
const option = {
tooltip: {
trigger: 'item',
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [10, 60],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5,
},
data: [
{ name: '天气预警', value: 100 },
{ name: '病虫害预警', value: 50 },
{ name: '任务预警', value: 130 },
{ name: '监测设备预警', value: 62 },
],
label: {
color: '#c0d1f2',
},
},
],
};
myChart.setOption(option);
state.myCharts.push(myChart);
};
// 当前设备监测
const initRightChartData4 = () => {
const myChart = echarts.init(proxy.$refs.rightChartData4);
const option = {
grid: {
top: 10,
right: 10,
bottom: 20,
left: 30,
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: 'rgba(22, 207, 208, 0.1)',
width: 1,
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: '#c0d1f2',
textStyle: {
fontSize: 10,
},
},
},
yAxis: [
{
type: 'value',
axisLabel: {
color: '#c0d1f2',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(22, 207, 208, 0.3)',
},
},
splitArea: {
show: true,
areaStyle: {
color: 'rgba(22, 207, 208, 0.02)',
},
},
nameTextStyle: {
color: '#16cfd0',
},
},
],
series: [
{
name: '温度',
type: 'line',
smooth: true,
lineStyle: {
width: 0,
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(128, 255, 165)',
},
{
offset: 1,
color: 'rgba(1, 191, 236)',
},
]),
},
emphasis: {
focus: 'series',
},
data: [140, 232, 101, 264, 90, 70],
},
],
};
myChart.setOption(option);
state.myCharts.push(myChart);
};
// 近7天产品追溯扫码统计
const initRightChartData3 = () => {
const myChart = echarts.init(proxy.$refs.rightChartData3);
const option = {
grid: {
top: 10,
right: 0,
bottom: 20,
left: 30,
},
tooltip: {
trigger: 'axis',
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: 'rgba(22, 207, 208, 0.1)',
width: 1,
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#c0d1f2',
},
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(22, 207, 208, 0.1)',
},
},
axisLabel: {
color: '#c0d1f2',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(22, 207, 208, 0.3)',
},
},
splitArea: {
show: true,
areaStyle: {
color: 'rgba(22, 207, 208, 0.02)',
},
},
nameTextStyle: {
color: '#16cfd0',
},
},
],
series: [
{
name: '预购队列',
type: 'line',
data: [200, 85, 112, 275, 305, 415],
itemStyle: {
color: '#16cfd0',
},
},
{
name: '最新成交价',
type: 'line',
data: [50, 85, 22, 155, 170, 25],
itemStyle: {
color: '#febb50',
},
},
],
};
myChart.setOption(option);
state.myCharts.push(myChart);
};
// 当前任务统计
const initRightChartData6 = () => {
const myChart = echarts.init(proxy.$refs.rightChartData6);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: 20,
right: 50,
bottom: 0,
left: 80,
},
xAxis: [
{
splitLine: {
show: false,
},
type: 'value',
show: false,
},
],
yAxis: [
{
splitLine: {
show: false,
},
axisLine: {
//y轴
show: false,
},
type: 'category',
axisTick: {
show: false,
},
inverse: true,
data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'],
axisLabel: {
color: '#A7D6F4',
fontSize: 12,
},
},
],
series: [
{
name: '标准化',
type: 'bar',
barWidth: 10, // 柱子宽度
label: {
show: true,
position: 'right', // 位置
color: '#A7D6F4',
fontSize: 12,
distance: 15, // 距离
formatter: '{c}%', // 这里是数据展示的时候显示的数据
}, // 柱子上方的数值
itemStyle: {
barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: '#51C5FD',
},
{
offset: 1,
color: '#005BB1',
},
],
false
), // 渐变
},
data: [75, 100, 60],
},
],
};
myChart.setOption(option);
state.myCharts.push(myChart);
};
// 近7天投入品记录
const initRightChartData2 = () => {
const myChart = echarts.init(proxy.$refs.rightChartData2);
const option = {
grid: {
top: 10,
right: 0,
bottom: 20,
left: 30,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: 'rgba(22, 207, 208, 0.5)',
width: 1,
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#c0d1f2',
},
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(22, 207, 208, 0.1)',
},
},
axisLabel: {
color: '#c0d1f2',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(22, 207, 208, 0.3)',
},
},
splitArea: {
show: true,
areaStyle: {
color: 'rgba(22, 207, 208, 0.02)',
},
},
nameTextStyle: {
color: '#16cfd0',
},
},
{
type: 'value',
position: 'right',
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value}%',
textStyle: {
color: '#16cfd0',
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: 'rgba(22, 207, 208, 0.02)',
},
},
nameTextStyle: {
color: '#16cfd0',
},
},
],
series: [
{
name: '销售水量',
type: 'line',
yAxisIndex: 1,
smooth: true,
showAllSymbol: true,
symbol: 'circle',
itemStyle: {
color: '#058cff',
},
lineStyle: {
color: '#058cff',
},
areaStyle: {
color: 'rgba(5,140,255, 0.2)',
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
},
{
name: '主营业务',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#00FFE3',
},
{
offset: 1,
color: '#4693EC',
},
]),
},
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
},
],
};
myChart.setOption(option);
state.myCharts.push(myChart);
};
// 3DEarth 地图
const init3DEarth = (globeRadius) => {
let el = document.getElementById('3DEarth');
el.style.height = `${proxy.$refs.rightChartData5.offsetHeight}px`;
const myChart = echarts.init(el);
const option = {
globe: {
baseTexture: worldImg,
heightTexture: bathymetryImg,
shading: 'realistic',
light: {
ambient: {
intensity: 0.4,
},
main: {
intensity: 0.4,
},
},
viewControl: {
autoRotate: true,
},
postEffect: {
enable: true,
bloom: {
enable: true,
},
},
globeRadius,
},
series: {
type: 'lines3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
lineStyle: {
width: 1,
color: 'rgb(50, 50, 150)',
opacity: 0.1,
},
data: [],
},
};
// 随机模拟攻击线
let rodamData = function () {
let longitude = 105.18;
let longitude2 = Math.random() * 360 - 180;
let latitude = 37.51;
let latitude2 = Math.random() * 180 - 90;
return {
coords: [
[longitude2, latitude2],
[longitude, latitude],
],
value: (Math.random() * 3000).toFixed(2),
};
};
for (let i = 0; i < 150; i ) {
option.series.data = option.series.data.concat(rodamData());
}
myChart.setOption(option);
};
// 监听地球大小变化
const initAddEventListener3DEarth = () => {
let w = document.body.clientWidth;
let globeRadius = 0;
if (w >= 1920) globeRadius = 100;
else if (w > 1200 && w < 1920) globeRadius = 70;
else if (w > 992 && w < 1200) globeRadius = 60;
else if (w > 768 && w < 992) globeRadius = 40;
else if (w < 768) globeRadius = 20;
init3DEarth(globeRadius);
};
// 批量设置 echarts resize
const initEchartsResize = () => {
initAddEventListener3DEarth();
window.addEventListener('resize', () => {
for (let i = 0; i < state.myCharts.length; i ) {
state.myCharts[i].resize();
}
initAddEventListener3DEarth();
});
};
// 页面加载时
onMounted(async () => {
initTime();
await initRightChartData1();
await initRightChartData4();
await initRightChartData3();
await initRightChartData2();
await initRightChartData6();
await initEchartsResize();
});
// 页面卸载时
onUnmounted(() => {
window.clearInterval(state.time.fun);
});
return {
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.visualizing-demo2 {
height: 100%;
width: 100%;
overflow: hidden;
background: url(https://gitee.com/lyt-top/vue-next-admin-images/raw/master/visualizing/demo2.jpg);
background-size: 100% 100%;
display: flex;
flex-direction: column;
font-size: 13px;
.big-data-up {
height: 70px;
width: 100%;
display: flex;
align-items: center;
padding: 0 15px;
color: #43bdf0;
overflow: hidden;
.up-left {
width: 30%;
font-style: italic;
}
.up-center {
width: 40%;
display: flex;
justify-content: center;
font-size: 20px;
letter-spacing: 5px;
background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-size: 200% 100%;
animation: masked-animation 4s infinite linear;
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
position: relative;
&::after {
content: '';
width: 50%;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
border: 1px transparent solid;
border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
}
span {
cursor: pointer;
}
}
.up-right {
width: 30%;
justify-content: flex-end;
display: flex;
align-items: center;
.ml15:hover {
cursor: pointer;
}
::v-deep(.el-dropdown) {
font-size: 13px !important;
color: #43bdf0;
cursor: pointer;
}
}
}
.big-data-down {
flex: 1;
overflow: hidden;
display: flex;
.big-data-down-left,
.big-data-down-right {
width: 30%;
display: flex;
flex-direction: column;
.flex-warp-item {
padding: 0 7.5px 15px 15px;
width: 100%;
height: 33.33%;
.flex-warp-item-box {
width: 100%;
height: 100%;
background: rgba(22, 34, 58, 0.4);
display: flex;
flex-direction: column;
padding: 15px;
.flex-title {
margin-bottom: 15px;
color: #c0d1f2;
display: flex;
justify-content: space-between;
.flex-title-small {
font-size: 12px;
}
}
.flex-content {
flex: 1;
font-size: 12px;
}
.flex-content-overflow {
overflow: hidden;
}
}
}
}
.big-data-down-left {
color: #c0d1f2;
.sky {
display: flex;
align-items: center;
.sky-left {
font-size: 30px;
}
.sky-center {
flex: 1;
overflow: hidden;
padding: 0 10px;
.font {
margin-right: 15px;
background: unset !important;
border-radius: unset !important;
padding: unset !important;
}
span {
background: #22bc76;
border-radius: 2px;
padding: 0 5px;
}
.sky-tip {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.sky-right {
span {
font-size: 30px;
}
font {
font-size: 20px;
}
}
}
.sky-dd {
.sky-dl {
display: flex;
align-items: center;
height: 28px;
overflow: hidden;
div {
flex: 1;
overflow: hidden;
i {
font-size: 14px;
}
}
.tip {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:hover {
background: rgba(0, 0, 0, 0.05);
cursor: default;
border-radius: 4px;
}
&:first-child:hover {
background: unset;
}
}
.sky-dl-first {
color: #43bdf0;
}
}
.d-states {
display: flex;
.d-states-item {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
i {
font-size: 20px;
height: 33px;
width: 33px;
line-height: 33px;
text-align: center;
border-radius: 100%;
flex-shrink: 1;
}
.i-bg1 {
background: #22bc76;
}
.i-bg2 {
background: #e2356d;
}
.i-bg3 {
background: #43bbef;
}
.d-states-flex {
overflow: hidden;
padding: 0 10px 0;
.d-states-item-label {
color: #43bdf0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.d-states-item-value {
font-size: 20px;
text-align: center;
}
}
}
}
.d-btn {
margin-top: 15px;
.d-btn-item {
border: 1px solid #c0d1f2;
display: flex;
width: 100%;
height: 35px;
border-radius: 35px;
align-items: center;
padding: 0 4px;
margin-top: 15px;
cursor: pointer;
transition: all ease 0.3s;
.d-btn-item-left {
font-size: 20px;
border: 1px solid #c0d1f2;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 100%;
text-align: center;
font-size: 14px;
}
.d-btn-item-center {
padding: 0 10px;
flex: 1;
}
.d-btn-item-eight {
text-align: right;
padding-right: 10px;
}
}
.d-btn-active {
transition: all ease 0.3s;
border: 1px solid #43bdf0;
color: #43bdf0;
.d-btn-item-left {
border: 1px solid #43bdf0;
}
}
}
}
.big-data-down-center {
width: 40%;
display: flex;
flex-direction: column;
.big-data-down-center-one {
height: 66.67%;
padding: 0 7.5px 15px;
.big-data-down-center-one-content {
height: 100%;
position: relative;
.fixed-top,
.fixed-right,
.fixed-bottom,
.fixed-left {
position: absolute;
width: 100px;
height: 100px;
display: flex;
cursor: pointer;
.circle {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.01);
z-index: 10;
}
.text-box {
position: relative;
z-index: 11;
color: #c0d1f2;
margin: auto;
text-align: center;
font-size: 12px;
i {
font-size: 28px;
margin-bottom: 10px;
}
}
}
.fixed-top {
left: 20px;
top: 20px;
}
.fixed-right {
right: 20px;
top: 20px;
}
.fixed-bottom {
right: 20px;
bottom: 20px;
}
.fixed-left {
left: 20px;
bottom: 20px;
}
.circle:nth-of-type(1) {
width: 100px;
height: 95px;
animation: turnAround 6s infinite linear;
box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
}
.circle:nth-of-type(2) {
width: 95px;
height: 100px;
animation: turnAround 10s infinite linear;
box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
}
.circle:nth-of-type(3) {
width: 110px;
height: 100px;
animation: turnAround 5s infinite linear;
box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
}
.circle:nth-of-type(4) {
width: 100px;
height: 110px;
animation: turnAround 15s infinite linear;
box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f;
}
@keyframes turnAround {
100% {
transform: rotate(360deg);
}
}
}
}
.big-data-down-center-two {
padding: 0 7.5px 15px;
height: 33.33%;
.flex-warp-item-box {
width: 100%;
height: 100%;
background: rgba(22, 34, 58, 0.4);
display: flex;
flex-direction: column;
padding: 15px;
.flex-title {
margin-bottom: 15px;
color: #c0d1f2;
display: flex;
justify-content: space-between;
.flex-title-small {
font-size: 12px;
}
}
.flex-content {
flex: 1;
font-size: 12px;
display: flex;
height: calc(100% - 30px);
.flex-content-left {
display: flex;
flex-wrap: wrap;
width: 120px;
height: 100%;
.monitor-item {
width: 50%;
display: flex;
align-items: center;
.monitor-wave {
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
background-color: #43bdf0;
border-radius: 50%;
overflow: hidden;
text-align: center;
&::before,
&::after {
content: '';
position: absolute;
left: 50%;
width: 40px;
height: 40px;
background: #f4f4f4;
animation: roateOne 10s linear infinite;
transform: translateX(-50%);
z-index: 1;
}
&::before {
bottom: 10px;
border-radius: 60%;
}
&::after {
bottom: 8px;
opacity: 0.7;
border-radius: 37%;
}
.monitor-z-index {
position: relative;
z-index: 2;
color: #4eb8ff;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
font-weight: bold;
}
}
@keyframes roateOne {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
.monitor-active {
background-color: #22bc76;
.monitor-z-index {
color: #22bc76;
}
}
}
}
.flex-content-right {
flex: 1;
}
}
}
}
}
.big-data-down-right {
.flex-warp-item {
padding: 0 15px 15px 7.5px;
.flex-content {
display: flex;
flex-direction: column;
.task {
display: flex;
height: 45px;
.task-item {
flex: 1;
color: #c0d1f2;
display: flex;
justify-content: center;
.task-item-box {
position: relative;
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 100%;
z-index: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
&::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
linear-gradient(#ffb980, #ffb980);
animation: rotate 2s linear infinite;
}
&::after {
content: '';
position: absolute;
z-index: -1;
left: 1px;
top: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
border-radius: 100%;
}
.task-item-value {
text-align: center;
font-size: 14px;
font-weight: bold;
}
.task-item-label {
text-align: center;
}
}
.task1 {
&::after {
background: #5492be;
}
}
.task2 {
&::after {
background: #43a177;
}
}
.task3 {
&::after {
background: #a76077;
}
}
.task4 {
&::after {
background: #b4825a;
}
}
.task5 {
&::after {
background: #74568f;
}
}
}
.task-first-item {
flex-direction: column;
text-align: center;
.task-first {
font-size: 20px;
}
}
}
}
}
.progress {
flex: 1;
}
}
}
}
</style>
