470 lines
13 KiB
Vue
470 lines
13 KiB
Vue
<template>
|
||
<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||
<div class="chart-warp">
|
||
<div class="chart-warp-top">
|
||
<ChartHead />
|
||
</div>
|
||
<div class="chart-warp-bottom">
|
||
<!-- 左边 -->
|
||
<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">
|
||
<div class="sky">
|
||
<i class="sky-left el-icon-cloudy-and-sunny"></i>
|
||
<div class="sky-center">
|
||
<div class="mb2">
|
||
<span>多云转晴</span>
|
||
<span>东南风</span>
|
||
<span class="span ml5">良</span>
|
||
</div>
|
||
</div>
|
||
<div class="sky-right">
|
||
<span>25</span>
|
||
<span>°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 class="tip">{{ v.v5 }}</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">
|
||
<i class="d-btn-item-left el-icon-money"></i>
|
||
<div class="d-btn-item-center">
|
||
<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">
|
||
<div style="height: 100%" ref="chartsWarningRef"></div>
|
||
</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">
|
||
<div style="height: 100%" ref="chartsCenterOneRef"></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">
|
||
<div class="monitor-z-index">
|
||
<div class="monitor-item-label">{{ v.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-content-right">
|
||
<div style="height: 100%" ref="chartsMonitorRef"></div>
|
||
</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">
|
||
<div style="height: 100%" ref="chartsSevenDaysRef"></div>
|
||
</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>
|
||
<div class="progress">
|
||
<div class="progress-item">
|
||
<span>施肥率</span>
|
||
<div class="progress-box">
|
||
<el-progress :percentage="70" color="#43bdf0"></el-progress>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<span>施药率</span>
|
||
<div class="progress-box">
|
||
<el-progress :percentage="36" color="#43bdf0"></el-progress>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<span>农事率</span>
|
||
<div class="progress-box">
|
||
<el-progress :percentage="91" color="#43bdf0"></el-progress>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<div style="height: 100%" ref="chartsInvestmentRef"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
|
||
import { useStore } from '/@/store/index';
|
||
import ChartHead from '/@/views/chart/head.vue';
|
||
import * as echarts from 'echarts';
|
||
import 'echarts-wordcloud';
|
||
import { skyList, dBtnList, chartData4List, earth3DBtnList } from '/@/views/chart/chart';
|
||
export default {
|
||
name: 'chartIndex',
|
||
components: { ChartHead },
|
||
setup() {
|
||
const { proxy } = getCurrentInstance() as any;
|
||
const store = useStore();
|
||
const state = reactive({
|
||
tagViewHeight: '',
|
||
skyList,
|
||
dBtnList,
|
||
chartData4List,
|
||
earth3DBtnList,
|
||
});
|
||
// 设置主内容的高度
|
||
const initTagViewHeight = computed(() => {
|
||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||
if (isTagsview) return `114px`;
|
||
else return `80px`;
|
||
});
|
||
// 初始化中间图表1
|
||
const initChartsCenterOne = () => {
|
||
const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
|
||
const option = {
|
||
grid: {
|
||
top: 15,
|
||
right: 15,
|
||
bottom: 20,
|
||
left: 30,
|
||
},
|
||
tooltip: {},
|
||
series: [
|
||
{
|
||
type: 'wordCloud',
|
||
sizeRange: [12, 40],
|
||
rotationRange: [0, 0],
|
||
rotationStep: 45,
|
||
gridSize: Math.random() * 20 + 5,
|
||
shape: 'circle',
|
||
width: '100%',
|
||
height: '100%',
|
||
textStyle: {
|
||
fontFamily: 'sans-serif',
|
||
fontWeight: 'bold',
|
||
color: function () {
|
||
return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
|
||
},
|
||
},
|
||
data: [
|
||
{ name: 'vue-next-admin', value: 520 },
|
||
{ name: 'lyt', value: 520 },
|
||
{ name: 'next-admin', value: 500 },
|
||
{ name: '更名', value: 420 },
|
||
{ name: '智慧农业', value: 520 },
|
||
{ name: '男神', value: 2.64 },
|
||
{ name: '好身材', value: 4.03 },
|
||
{ name: '校草', value: 24.95 },
|
||
{ name: '酷', value: 4.04 },
|
||
{ name: '时尚', value: 5.27 },
|
||
{ name: '阳光活力', value: 5.8 },
|
||
{ name: '初恋', value: 3.09 },
|
||
{ name: '英俊潇洒', value: 24.71 },
|
||
{ name: '霸气', value: 6.33 },
|
||
{ name: '腼腆', value: 2.55 },
|
||
{ name: '蠢萌', value: 3.88 },
|
||
{ name: '青春', value: 8.04 },
|
||
{ name: '网红', value: 5.87 },
|
||
{ name: '萌', value: 6.97 },
|
||
{ name: '认真', value: 2.53 },
|
||
{ name: '古典', value: 2.49 },
|
||
{ name: '温柔', value: 3.91 },
|
||
{ name: '有个性', value: 3.25 },
|
||
{ name: '可爱', value: 9.93 },
|
||
{ name: '幽默诙谐', value: 3.65 },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
};
|
||
// 初始化近7天产品追溯扫码统计
|
||
const initChartsSevenDays = () => {
|
||
const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
|
||
const option = {
|
||
grid: {
|
||
top: 15,
|
||
right: 15,
|
||
bottom: 20,
|
||
left: 30,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: '邮件营销',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [12, 32, 11, 34, 90, 23, 21],
|
||
},
|
||
{
|
||
name: '联盟广告',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [22, 82, 91, 24, 90, 30, 30],
|
||
},
|
||
{
|
||
name: '视频广告',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [50, 32, 18, 14, 90, 30, 50],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
};
|
||
// 初始化近30天预警总数
|
||
const initChartsWarning = () => {
|
||
const myChart = echarts.init(proxy.$refs.chartsWarningRef);
|
||
const option = {
|
||
grid: {
|
||
top: 50,
|
||
right: 20,
|
||
bottom: 30,
|
||
left: 30,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
series: [
|
||
{
|
||
name: '面积模式',
|
||
type: 'pie',
|
||
radius: [20, 50],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 8,
|
||
},
|
||
data: [
|
||
{ value: 40, name: '监测设备预警' },
|
||
{ value: 38, name: '天气预警' },
|
||
{ value: 32, name: '任务预警' },
|
||
{ value: 30, name: '病虫害预警' },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
};
|
||
// 初始化当前设备监测
|
||
const initChartsMonitor = () => {
|
||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||
const option = {
|
||
grid: {
|
||
top: 15,
|
||
right: 15,
|
||
bottom: 20,
|
||
left: 30,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
itemStyle: {
|
||
color: '#289df5',
|
||
borderColor: '#289df5',
|
||
areaStyle: {
|
||
type: 'default',
|
||
opacity: 0.1,
|
||
},
|
||
},
|
||
data: [20, 32, 31, 34, 12, 13, 20],
|
||
type: 'line',
|
||
areaStyle: {},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
};
|
||
// 初始化近7天投入品记录
|
||
const initChartsInvestment = () => {
|
||
const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
|
||
const option = {
|
||
grid: {
|
||
top: 15,
|
||
right: 15,
|
||
bottom: 20,
|
||
left: 30,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
data: [10, 20, 15, 80, 70, 11, 30],
|
||
type: 'bar',
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
};
|
||
// 页面加载时
|
||
onMounted(() => {
|
||
initChartsCenterOne();
|
||
initChartsSevenDays();
|
||
initChartsWarning();
|
||
initChartsMonitor();
|
||
initChartsInvestment();
|
||
});
|
||
return {
|
||
initTagViewHeight,
|
||
...toRefs(state),
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './chart.scss';
|
||
</style>
|