gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add new

master
panda 7 months ago
parent
10d0328b7b
commit
39fab14e1d
4 changed files with 47 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 83
      src/views/blog/AmountChartView.vue
  2. 143
      src/views/blog/DiaryContentView.vue
  3. 2
      src/views/blog/imagemanage/OtherImgView.vue
  4. 2
      src/views/blog/imagemanage/PersonSelfView.vue

83
src/views/blog/AmountChartView.vue
View File

@ -1,31 +1,39 @@
<template>
<div class="charts">
<div class="line-chart">
<a-select v-model:value="selectedLinePeriod" @change="updateLineChart">
<a-select-option value="nighweek">近一周</a-select-option>
<a-select-option value="nighmonth">近一月</a-select-option>
<a-select-option value="nighyear">近一年</a-select-option>
</a-select>
<div ref="linechart" class="echart"></div>
</div>
<div class="pie-chart">
<a-select v-model:value="selectedPiePeriod" @change="updatePieChart">
<a-select-option value="nighweek">近一周</a-select-option>
<a-select-option value="nighmonth">近一月</a-select-option>
<a-select-option value="nighyear">近一年</a-select-option>
</a-select>
<div ref="piechart" class="echart"></div>
</div>
<div class="lines-chart">
<a-select v-model:value="selectedLinesPeriod" @change="updateLinesChart">
<a-select-option value="thisyear">今年</a-select-option>
<a-select-option value="lastyear">去年</a-select-option>
</a-select>
<div ref="lineschart" class="echart"></div>
</div>
<div class="bar-chart">
<div ref="barchart" class="echart"></div>
</div>
<a-card hoverable>
<div class="line-chart">
<a-select v-model:value="selectedLinePeriod" @change="updateLineChart">
<a-select-option value="nighweek">近一周</a-select-option>
<a-select-option value="nighmonth">近一月</a-select-option>
<a-select-option value="nighyear">近一年</a-select-option>
</a-select>
<div ref="linechart" class="echart"></div>
</div>
</a-card>
<a-card hoverable>
<div class="pie-chart">
<a-select v-model:value="selectedPiePeriod" @change="updatePieChart">
<a-select-option value="nighweek">近一周</a-select-option>
<a-select-option value="nighmonth">近一月</a-select-option>
<a-select-option value="nighyear">近一年</a-select-option>
</a-select>
<div ref="piechart" class="echart"></div>
</div>
</a-card>
<a-card hoverable>
<div class="lines-chart">
<a-select v-model:value="selectedLinesPeriod" @change="updateLinesChart">
<a-select-option value="thisyear">今年</a-select-option>
<a-select-option value="lastyear">去年</a-select-option>
</a-select>
<div ref="lineschart" class="echart"></div>
</div>
</a-card>
<a-card hoverable>
<div class="bar-chart">
<div ref="barchart" class="echart"></div>
</div>
</a-card>
</div>
</template>
@ -356,10 +364,10 @@ const updateLineChart = () => {
const updateLinesChart = () => {
if (lineschart.value) {
createEcharts(lineschart, linesChartOptions[selectedLinesPeriod.value]);
console.log(`output->`,selectedLinesPeriod.value)
if(selectedLinesPeriod.value==="thisyear"){
console.log(`output->`, selectedLinesPeriod.value)
if (selectedLinesPeriod.value === "thisyear") {
fetchLinesAndUpdateChart(0, linesChartOptions.thisyear)
}else{
} else {
fetchLinesAndUpdateChart(1, linesChartOptions.thisyear)
}
}
@ -367,7 +375,7 @@ const updateLinesChart = () => {
const updatePieChart = () => {
if (piechart.value) {
createEcharts(piechart, pieChartOptions[selectedPiePeriod.value]);
if(selectedPiePeriod.value){
if (selectedPiePeriod.value) {
fetchPieAndUpdateChart(pieChartOptions[selectedPiePeriod.value], selectedPiePeriod.value);
}
}
@ -388,7 +396,7 @@ const updatePieChartData = (pieData: any, chartOptions: any) => {
const updateBarChartData = (barData: any) => {
barChartOptions.dataset.source = barData;
}
const fetchLineAndUpdateChart = async (chartOptions: any, datetype:any="nighweek" ) => {
const fetchLineAndUpdateChart = async (chartOptions: any, datetype: any = "nighweek") => {
const response = await get(`/disburses/line/${datetype}`);
const data = response.data.data;
const createDates = data.map((item: any) => item.create_date);
@ -396,7 +404,7 @@ const fetchLineAndUpdateChart = async (chartOptions: any, datetype:any="nighweek
updateLineChartData(createDates, totalDisbursePrices, chartOptions);
createEcharts(linechart, chartOptions);
}
const fetchPieAndUpdateChart = async (chartOptions: any, datetype:any="nighweek") => {
const fetchPieAndUpdateChart = async (chartOptions: any, datetype: any = "nighweek") => {
const response = await get(`/disburses/pie/${datetype}`);
const data = response.data.data;
updatePieChartData(data, chartOptions);
@ -454,16 +462,15 @@ onMounted(() => {
.charts {
display: flex;
flex-direction: column;
width: 45%;
margin: 0 24px ;
}
.charts>*{
margin-bottom: 24px;
}
.echart {
width: calc(45vw);
height: calc(45vw*2/5);
margin: 24px 0 48px 0;
}
.charts {
width: 45%;
margin: 24px;
}
</style>

143
src/views/blog/DiaryContentView.vue
View File

@ -1,143 +0,0 @@
<template>
<div class="main">
<div class="mainContent" v-for="article in 2">
<a-badge-ribbon text="Hippies" color="black">
<a-card hoverable>
<h2>操作系统的安装</h2>
<div class="tag-group">
<a-tag color="#E6E6FA">
<template #icon>
<RiLiLined />
</template>
{{ mainStatistic.mainDate }}
</a-tag>
<a-tag color="#6495ED">
<template #icon>
<YanJingLined />
</template>
{{ mainStatistic.mainWatchCount }}
</a-tag>
<a-tag color="#B0C4DE">
<template #icon>
<XieZiLined />
</template>
字数≈{{ mainStatistic.mainWordCount }}字
</a-tag>
<a-tag color="#20B2AA">
<template #icon>
<YueDuLined />
</template>
阅读时长≈{{ mainStatistic.mainReadCount }}分
</a-tag>
</div>
<div class="blog-content">
<div>
<a-image :preview="false" :width="200"
src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
</div>
<div class="text-container">
这是内容
</div>
</div>
<div class="read-button">
<a-button type="primary" shape="round">阅读全文</a-button>
</div>
</a-card>
</a-badge-ribbon>
</div>
</div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue';
const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
mainDate: "2024-06-11",
mainWatchCount: "9999",
mainWordCount: "9999",
mainReadCount: "9999"
})
</script>
<style scoped>
.main {
width: 45%;
margin: 0 24px;
}
.main .mainContent {
margin-bottom: 24px;
}
.main h2 {
text-align: center;
}
.main .tag-group {
display: flex;
justify-content: center;
}
.main .tag-group>* {
color: black;
margin: 0 12px;
}
.main .blog-content {
display: flex;
margin: 48px;
}
.main .blog-content>:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
/* 防止文本换行 */
}
.main .read-button {
display: flex;
justify-content: center;
}
.main .read-button button {
color: #fff;
border: none;
cursor: pointer;
background-color: #007bff;
/* 初始背景颜色 */
animation: colorChange 3s infinite alternate;
/* 添加颜色变化的动画 */
}
@keyframes colorChange {
0% {
background-color: #007bff;
/* 初始颜色 */
}
50% {
background-color: #ff7e5f;
/* 中间颜色 */
}
100% {
background-color: #feb47b;
/* 结束颜色 */
}
}
.main .text-container {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 2;
margin-left: 24px;
}
</style>

2
src/views/blog/imagemanage/OtherImgView.vue
View File

@ -47,7 +47,7 @@ onMounted(() => {
<style scoped>
.otherimg {
width: 45%;
margin: 0 24px;
margin: 0 24px 24px 24px;
}
.img {

2
src/views/blog/imagemanage/PersonSelfView.vue
View File

@ -46,7 +46,7 @@ onMounted(() => {
<style scoped>
.personself {
width: 45%;
margin: 0 24px;
margin: 0 24px 24px 24px;
}
.img {

Write Preview
Loading…
Cancel
Save