You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

362 lines
8.6 KiB

9 months ago
  1. <template>
  2. <div class="content">
  3. <div class="card">
  4. <a-row :gutter="16" style="justify-content: space-between;">
  5. <a-col :span="4">
  6. <a-card>
  7. <a-statistic title="博客数量" :value="count.blogCount" suffix="篇" :value-style="{ color: '#3f8600' }"
  8. style="margin-right: 50px">
  9. <template #prefix>
  10. <BlogOutLined />
  11. </template>
  12. </a-statistic>
  13. </a-card>
  14. </a-col>
  15. <a-col :span="4">
  16. <a-card>
  17. <a-statistic title="照片数量" :value="count.photoCount" suffix="张" :value-style="{ color: '#3f8600' }"
  18. style="margin-right: 50px">
  19. <template #prefix>
  20. <PhotoOutLined />
  21. </template>
  22. </a-statistic>
  23. </a-card>
  24. </a-col>
  25. <a-col :span="4">
  26. <a-card>
  27. <a-statistic title="文件总数" :value="count.fileCount" suffix="个" :value-style="{ color: '#3f8600' }"
  28. style="margin-right: 50px">
  29. <template #prefix>
  30. <FileOutLined />
  31. </template>
  32. </a-statistic>
  33. </a-card>
  34. </a-col>
  35. <a-col :span="4">
  36. <a-card>
  37. <a-statistic title="日记发表" :value="count.diaryCount" suffix="篇" :value-style="{ color: '#3f8600' }"
  38. style="margin-right: 50px">
  39. <template #prefix>
  40. <DiaryOutLined />
  41. </template>
  42. </a-statistic>
  43. </a-card>
  44. </a-col>
  45. <a-col :span="4">
  46. <a-card>
  47. <a-statistic title="评论数量" :value="count.commentCount" suffix="条" :value-style="{ color: '#3f8600' }"
  48. style="margin-right: 50px">
  49. <template #prefix>
  50. <CommentOutLined />
  51. </template>
  52. </a-statistic>
  53. </a-card>
  54. </a-col>
  55. </a-row>
  56. </div>
  57. <div class="echarts-1">
  58. <div ref="blog"></div>
  59. <div ref="diary"></div>
  60. <div ref="photo"></div>
  61. </div>
  62. <div class="echarts-2">
  63. <div ref="own"></div>
  64. </div>
  65. <div class="comment">
  66. <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false">
  67. <template #bodyCell="{ column, text, record }">
  68. <template v-if="column.dataIndex === 'name'">
  69. <div class="editable-cell">
  70. <div class="editable-cell-text-wrapper">
  71. {{ text || ' ' }}
  72. </div>
  73. </div>
  74. </template>
  75. <template v-else-if="column.dataIndex === 'operation'">
  76. <a-popconfirm v-if="dataSource.length" title="确认删除么?" @confirm="onDelete(record.key)">
  77. <a>删除</a>
  78. </a-popconfirm>
  79. </template>
  80. </template>
  81. </a-table>
  82. </div>
  83. </div>
  84. </template>
  85. <script setup lang='ts'>
  86. import { reactive, ref, onMounted } from 'vue';
  87. import type { Ref } from 'vue';
  88. import { createEcharts } from '@/hooks/intex'
  89. const count = reactive({
  90. blogCount: '12',
  91. photoCount: '13',
  92. fileCount: '14',
  93. diaryCount: '15',
  94. commentCount: '16'
  95. })
  96. const blog = ref(null);
  97. const diary = ref(null);
  98. const photo = ref(null);
  99. const own = ref(null);
  100. onMounted(() => {
  101. const blogData = {
  102. title: {
  103. text: '周博客统计',
  104. left: 'center'
  105. },
  106. tooltip: {
  107. trigger: 'item'
  108. },
  109. legend: {
  110. orient: 'vertical',
  111. left: 'left'
  112. },
  113. series: [
  114. {
  115. name: '数量',
  116. type: 'pie',
  117. radius: '50%',
  118. data: [
  119. { value: 1048, name: '星期一' },
  120. { value: 735, name: '星期二' },
  121. { value: 580, name: '星期三' },
  122. { value: 484, name: '星期四' },
  123. { value: 300, name: '星期五' },
  124. { value: 300, name: '星期六' },
  125. { value: 300, name: '星期日' }
  126. ],
  127. emphasis: {
  128. itemStyle: {
  129. shadowBlur: 10,
  130. shadowOffsetX: 0,
  131. shadowColor: 'rgba(0, 0, 0, 0.5)'
  132. }
  133. }
  134. }
  135. ]
  136. };
  137. const diaryData = {
  138. title: {
  139. text: '周日记统计',
  140. left: 'center'
  141. },
  142. xAxis: {
  143. type: 'category',
  144. data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  145. },
  146. yAxis: {
  147. type: 'value'
  148. },
  149. series: [
  150. {
  151. data: [820, 932, 901, 934, 1290, 1330, 1320],
  152. type: 'line',
  153. smooth: true
  154. }
  155. ]
  156. };
  157. const photoData = {
  158. title: {
  159. text: '周照片统计',
  160. left: 'center'
  161. },
  162. xAxis: {
  163. type: 'category',
  164. data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  165. },
  166. yAxis: {
  167. type: 'value'
  168. },
  169. series: [
  170. {
  171. data: [120, 200, 150, 80, 70, 110, 130],
  172. type: 'bar'
  173. }
  174. ]
  175. };
  176. const ownData = {
  177. title: {
  178. text: '完全统计',
  179. left: 'center',
  180. },
  181. tooltip: {
  182. trigger: 'axis',
  183. axisPointer: {
  184. type: 'shadow'
  185. }
  186. },
  187. legend: {
  188. data: ['月日记量', '月博客量', '月照片量', '月评论量', '月文件量'],
  189. top: '10%',
  190. },
  191. toolbox: {
  192. show: true,
  193. orient: 'vertical',
  194. left: 'right',
  195. bottom: '10%',
  196. feature: {
  197. mark: { show: true },
  198. magicType: { show: true, type: ['line', 'bar', 'stack'] },
  199. restore: { show: true },
  200. saveAsImage: { show: true }
  201. }
  202. },
  203. xAxis: [
  204. {
  205. type: 'category',
  206. axisTick: { show: false },
  207. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  208. }
  209. ],
  210. yAxis: [
  211. {
  212. type: 'value'
  213. }
  214. ],
  215. series: [
  216. {
  217. name: '月日记量',
  218. type: 'bar',
  219. barGap: 0,
  220. emphasis: {
  221. focus: 'series'
  222. },
  223. data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332]
  224. },
  225. {
  226. name: '月博客量',
  227. type: 'bar',
  228. emphasis: {
  229. focus: 'series'
  230. },
  231. data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182]
  232. },
  233. {
  234. name: '月照片量',
  235. type: 'bar',
  236. emphasis: {
  237. focus: 'series'
  238. },
  239. data: [150, 232, 201, 154, 190, 220, 182, 191, 234, 290, 220, 182]
  240. },
  241. {
  242. name: '月评论量',
  243. type: 'bar',
  244. emphasis: {
  245. focus: 'series'
  246. },
  247. data: [98, 77, 101, 99, 40, 201, 154, 190, 220, 182, 191, 201, 154]
  248. },
  249. {
  250. name: '月文件量',
  251. type: 'bar',
  252. emphasis: {
  253. focus: 'series'
  254. },
  255. data: [98, 77, 101, 99, 40, 40, 201, 154, 190, 220, 182, 154, 190]
  256. }
  257. ],
  258. grid: [
  259. {
  260. bottom: '10%'
  261. }
  262. ]
  263. };
  264. createEcharts(blog, blogData)
  265. createEcharts(diary, diaryData)
  266. createEcharts(photo, photoData)
  267. createEcharts(own, ownData)
  268. });
  269. interface DataItem {
  270. key: string;
  271. name: string;
  272. blog: string;
  273. content: string;
  274. time: String
  275. }
  276. const columns = [
  277. {
  278. title: '评论人',
  279. dataIndex: 'name',
  280. width: '10%',
  281. },
  282. {
  283. title: '评论博客',
  284. dataIndex: 'blog',
  285. width: '15%',
  286. },
  287. {
  288. title: '评论内容',
  289. dataIndex: 'content',
  290. },
  291. {
  292. title: '评论时间',
  293. dataIndex: 'time',
  294. width: '10%',
  295. },
  296. {
  297. title: '操作',
  298. dataIndex: 'operation',
  299. },
  300. ];
  301. const dataSource: Ref<DataItem[]> = ref<DataItem[]>([
  302. {
  303. key: '0',
  304. name: 'wupeng',
  305. blog: "linux系统安装",
  306. content: '教程比较详细',
  307. time: '2014'
  308. },
  309. {
  310. key: '1',
  311. name: 'wulei',
  312. blog: "linux命令",
  313. content: '写的很好,值得借鉴!',
  314. time: '2014'
  315. },
  316. ]);
  317. const onDelete = (key: string) => {
  318. dataSource.value = dataSource.value.filter(item => item.key !== key);
  319. };
  320. </script>
  321. <style scoped>
  322. .content{
  323. margin: 24px;
  324. }
  325. .card,
  326. .comment,
  327. .echarts-1,
  328. .echarts-2 {
  329. background-color: #ececec;
  330. padding: 24px;
  331. }
  332. .echarts-1 {
  333. display: flex;
  334. justify-content: space-between;
  335. }
  336. .echarts-1 div{
  337. width: calc(85vw/3);
  338. height: calc((85vw/3)/(5/3));
  339. }
  340. .echarts-2 div{
  341. width: calc(85vw);
  342. height: calc((85vw/3)/2);
  343. }
  344. </style>