初始化仓库
This commit is contained in:
160
src/components/EChartsComponent.vue
Normal file
160
src/components/EChartsComponent.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 500px; height: 300px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
|
||||
|
||||
export default {
|
||||
name: 'EChartsComponent',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
dataType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
seriesData: [],
|
||||
num: 0,
|
||||
inputTime: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.inputTime = this.time
|
||||
this.getTkhostdetail();
|
||||
console.log(this.time)
|
||||
|
||||
console.log(this.getPrevious7Days(this.inputTime))
|
||||
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.$refs.chart) {
|
||||
console.error('DOM element not found');
|
||||
return;
|
||||
}
|
||||
const myChart = echarts.init(this.$refs.chart);
|
||||
const option = {
|
||||
title: {
|
||||
text: this.title
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: [this.title]
|
||||
},
|
||||
xAxis: {
|
||||
data: [this.getPrevious7Days(this.inputTime)[0].slice(4), this.getPrevious7Days(this.inputTime)[1].slice(4), this.getPrevious7Days(this.inputTime)[2].slice(4), this.getPrevious7Days(this.inputTime)[3].slice(4), this.getPrevious7Days(this.inputTime)[4].slice(4), this.getPrevious7Days(this.inputTime)[5].slice(4), this.getPrevious7Days(this.inputTime)[6].slice(4)]
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: this.title,
|
||||
type: 'line',
|
||||
data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
|
||||
smooth: true
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
console.log(this.dataTime)
|
||||
|
||||
},
|
||||
getTkhostdetail() {
|
||||
tkhostdetail({
|
||||
hostId: this.id,
|
||||
dataType: this.dataType,
|
||||
searchTimeStart: this.getPrevious7Days(this.inputTime)[0],
|
||||
searchTimeEnd: this.getPrevious7Days(this.inputTime)[6]
|
||||
}).then(res => {
|
||||
// console.log("返回数据", res[0][this.getPrevious7Days(this.inputTime)[2]])
|
||||
//echarts 数据初始化
|
||||
this.seriesData = [
|
||||
res[0][this.getPrevious7Days(this.inputTime)[0]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[0]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[1]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[1]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[2]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[2]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[3]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[3]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[4]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[4]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[5]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[5]][this.dataType]),
|
||||
res[0][this.getPrevious7Days(this.inputTime)[6]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[6]][this.dataType]),
|
||||
]
|
||||
|
||||
this.initChart();
|
||||
this.num++
|
||||
console.log("返回数据", this.seriesData)
|
||||
console.log("返回数据", this.num)
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// getCurrentDate() {
|
||||
// const dates = [];
|
||||
// const today = new Date();
|
||||
|
||||
// for (let i = 6; i >= 0; i--) {
|
||||
// const date = new Date(today);
|
||||
// date.setDate(today.getDate() - i);
|
||||
|
||||
// const year = date.getFullYear();
|
||||
// const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
// const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// dates.push(`${year}${month}${day}`);
|
||||
// }
|
||||
|
||||
// return dates;
|
||||
// },
|
||||
getPrevious7Days(dateStr) {
|
||||
// 验证输入格式是否正确
|
||||
if (!/^\d{8}$/.test(dateStr)) {
|
||||
console.error('输入的格式不是YYYYMMDD.');
|
||||
return [];
|
||||
}
|
||||
|
||||
// 解析输入的日期字符串
|
||||
const year = parseInt(dateStr.substring(0, 4));
|
||||
const month = parseInt(dateStr.substring(4, 6)) - 1; // 月份从 0 开始
|
||||
const day = parseInt(dateStr.substring(6, 8));
|
||||
|
||||
// 创建日期对象
|
||||
const date = new Date(year, month, day);
|
||||
|
||||
// 存储结果的数组
|
||||
const result = [];
|
||||
|
||||
// 计算前 7 天的日期
|
||||
for (let i = 0; i <= 6; i++) {
|
||||
const currentDate = new Date(date);
|
||||
currentDate.setDate(date.getDate() - i); // 减去 i 天
|
||||
|
||||
// 格式化为 YYYYMMDD
|
||||
const formattedDate = `${currentDate.getFullYear()}${(currentDate.getMonth() + 1).toString().padStart(2, '0')}${currentDate.getDate().toString().padStart(2, '0')}`;
|
||||
result.push(formattedDate);
|
||||
}
|
||||
|
||||
// 按时间顺序排序（从最早到最晚）
|
||||
result.sort((a, b) => a.localeCompare(b));
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
148
src/components/Sidebar.vue
Normal file
148
src/components/Sidebar.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<!-- <img style="margin-right: 10px;" src="@/assets/logo.png"> -->
|
||||
<img src="@/assets/logotext.png">
|
||||
</div>
|
||||
<ul>
|
||||
<li @click="updateActiveIndex(1)">
|
||||
<div>
|
||||
<img v-show="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
||||
<div style="display: flex;">
|
||||
<img v-show="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
|
||||
<img v-show="activeIndex == 2" src="@/assets/workAction.png" style="margin-right: 10px;">
|
||||
<div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">{{
|
||||
$t('menu.workbenches')
|
||||
}}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li @click="updateActiveIndex(2)">
|
||||
<div>
|
||||
<img v-show="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
|
||||
|
||||
<div style="display: flex;">
|
||||
<img v-show="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
|
||||
<img v-show="activeIndex == 1" src="@/assets/listAction.png" style="margin-right: 10px;">
|
||||
<div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">{{
|
||||
$t('menu.hostList')
|
||||
}}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a @click="$router.push('/')" href="javascript:void(0);"
|
||||
style="position: absolute; bottom: 30px; color: aliceblue; font-size: 20px; font-weight: 500;">
|
||||
{{
|
||||
$t('menu.logout')
|
||||
}}
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { getUser } from '@/utils/storage'
|
||||
import { defineEmits } from 'vue';
|
||||
|
||||
|
||||
|
||||
const userInfo = ref(getUser())
|
||||
|
||||
let activeIndex = ref(1);
|
||||
|
||||
const emit = defineEmits(['activeIndex']);
|
||||
|
||||
|
||||
const updateActiveIndex = (index) => {
|
||||
activeIndex.value = index;
|
||||
emit('activeIndex', index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 900px;
|
||||
width: 280px;
|
||||
background-color: @bg-color;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.logo {
|
||||
border-bottom: 1px solid #fff;
|
||||
padding-top: 20px;
|
||||
|
||||
img:nth-of-type(1) {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-top: 50px;
|
||||
padding-top: 30px;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 50px;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
|
||||
}
|
||||
|
||||
/* .sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
} */
|
||||
|
||||
|
||||
.background-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 13px;
|
||||
width: 247px;
|
||||
height: 126px;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
/* 确保视频在内容之下 */
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user