Browse Source

add new

master
panda 7 months ago
parent
commit
39fab14e1d
  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

@ -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

@ -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

@ -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

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

Loading…
Cancel
Save