From 21b42dd856bd5a2a2422aeea2e63232abe4170b8 Mon Sep 17 00:00:00 2001
From: pyx <3317187936@qq.com>
Date: Mon, 14 Oct 2024 20:48:47 +0800
Subject: [PATCH] 10-14-20:47

---
 src/views/BookView.vue |  48 ++++++++++++-
 src/views/HomeView.vue | 158 +++++++++++++++++++++++++++++++++++------
 2 files changed, 183 insertions(+), 23 deletions(-)

diff --git a/src/views/BookView.vue b/src/views/BookView.vue
index 0f4a67c..7dd3da7 100644
--- a/src/views/BookView.vue
+++ b/src/views/BookView.vue
@@ -24,6 +24,13 @@
 
 
         <el-table-column prop="name" label="图书名称" width="180"></el-table-column>
+
+        <el-table-column label="图书介绍">
+          <template v-slot="scope">
+            <el-button type="success" @click="viewBook(scope.row.content)">点击查看</el-button>
+          </template>
+        </el-table-column>
+
         <el-table-column prop="author" label="作者"></el-table-column>
         <el-table-column prop="price" label="价格"></el-table-column>
         <el-table-column prop="press" label="出版社"></el-table-column>
@@ -31,7 +38,7 @@
 
 
 
-        <el-table-column label="操作">
+        <el-table-column label="操作" width="250px">
 
           <template v-slot="scope">
 
@@ -63,7 +70,7 @@
     </div>
 
     <div>
-      <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="30%">
+      <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="50%">
         <el-form :model="form">
           <el-form-item label="图书名称:" label-width="20%">
             <el-input v-model="form.name"  autocomplete="off" style="width: 90%"></el-input>
@@ -99,6 +106,9 @@
 
           </el-form-item>
 
+          <el-form-item label="图书介绍：" label-width="20%">
+           <div id="editor" style="width: 90%"></div>
+          </el-form-item>
 
 
         </el-form>
@@ -109,6 +119,12 @@
       </el-dialog>
     </div>
 
+    <el-dialog title="图书信息" :visible.sync="bookFormVisible" width="50%">
+      <div v-html="this.form.content" class="w-e-text"></div>
+    </el-dialog>
+
+
+
   </div>
 
 
@@ -116,7 +132,23 @@
 
 <script>
 import request from "@/utils/request";
+import E from 'wangeditor'
 
+let editor
+function initWangEditor(content){ setTimeout(() => {
+
+  if(!editor){
+    editor = new E('#editor')
+    editor.config.placeholder = '请输入内容'
+    editor.config.uploadFileName = 'file'
+    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
+    editor.create()
+  }
+  editor.txt.html(content)
+
+},0)
+
+}
 
 export default {
 
@@ -133,7 +165,8 @@ export default {
         author:'',
       },
       total: 0,
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      bookFormVisible:false,
     }
   },
 
@@ -162,8 +195,10 @@ export default {
 
     add(){
       this.form = {};//新增之前先把值清空
+      initWangEditor("");//清空简介
       this.dialogFormVisible = true;
 
+
     },
 
     reset(){
@@ -188,6 +223,7 @@ export default {
     },
 
     submit() {
+      this.form.content = editor.txt.html();//富文本输入框往后端传输
       request.post("/book/save",this.form).then(res =>{
         if(res.code === '0'){
           this.$message({
@@ -207,6 +243,7 @@ export default {
 
     edit(obj){
       this.form = obj;
+      initWangEditor(obj.content ? this.form.content : "");//点击编辑按钮时，实现数据库向富文本输入框的数据回填
       this.dialogFormVisible = true;
     },
 
@@ -247,6 +284,11 @@ export default {
 
     },
 
+    viewBook(data){
+      this.form.content = data;
+      this.bookFormVisible = true;
+    },
+
 
 
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a0f4000..ad0d560 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,38 @@
 <template>
   <div>
-    <div style="margin-bottom: 15px;font-weight: bold;font-size:19px">系统公告</div>
 
-    <el-collapse v-model="activeName" accordion>
+    <div style="display: flex">
+      <div style="flex: 1">
+      <div style="margin-bottom: 15px;font-weight: bold;font-size:19px">系统公告</div>
 
-      <el-collapse-item v-for="item in data" :title="item.name" :name="item.id" :key="item.id" >
-        <div>{{item.content}}</div>
-      </el-collapse-item>
+      <el-collapse v-model="activeName" accordion>
 
-    </el-collapse>
-    <div style="margin-top: 15px;">精确到秒的魔法</div>
+        <el-collapse-item v-for="item in data" :title="item.name" :name="item.id" :key="item.id" >
+          <div>{{item.content}}</div>
+        </el-collapse-item>
+
+      </el-collapse>
+      <div style="margin-top: 15px;">精确到秒的魔法</div>
+      </div>
+
+      <div style="flex: 1">
+        <div id="pie" style="width: 100%;height: 400px"></div>
+      </div>
+
+    </div>
+
+
+
+    <div style="display: flex">
+
+      <div style="width: 50%">
+        <div id="bar" style="width: 100%;height: 400px"></div>
+      </div>
+
+      <div style="width: 50%">
+        <div id="line" style="width: 100%;height: 400px"></div>
+      </div>
 
-    <div style="width: 50%;margin-top: 5%">
-      <div id="pie" style="width: 100%;height: 400px"></div>
     </div>
 
 
@@ -20,6 +40,8 @@
 
 
 
+
+
   </div>
 
 
@@ -47,7 +69,8 @@ export default {
 
   mounted() {
     this.findNotice();
-    this.initPie();
+    this.initEcharts();
+
 
   },
 
@@ -67,16 +90,53 @@ export default {
       })
     },
 
+    initEcharts(){
+      request.get("/book/echarts/pie").then(res =>{
+        if (res.code === '0'){
+          //渲染数据
+          this.initPie(res.data);
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+
+      request.get("/book/echarts/bar").then(res =>{
+        if(res.code === '0'){
 
-    initPie() {
+          let map = res.data;
+
+          this.initBar(map.xAis,map.yAis)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+
+      request.get("/book/echarts/line").then(res =>{
+        if(res.code === '0'){
+
+          let map = res.data;
+
+          this.initline(map.xAis,map.yAis)
+        }else{
+          this.$message.error(res.msg)
+        }
+      })
+
+
+
+
+
+    },
+
+    initPie(data) {
       let chartDom = document.getElementById('pie');
       let myChart = echarts.init(chartDom);
       let option;
 
       option = {
         title: {
-          text: 'Referer of a Website',
-          subtext: 'Fake Data',
+          text: '图书种类饼图',
+          subtext: '种类',
           left: 'center'
         },
         tooltip: {
@@ -91,13 +151,7 @@ export default {
             name: 'Access From',
             type: 'pie',
             radius: '50%',
-            data: [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ],
+            data: data,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
@@ -110,11 +164,75 @@ export default {
       };
 
       option && myChart.setOption(option);
+    },
+
+
+
+    initBar(xAis,yAis){
+      let chartDom = document.getElementById('bar');
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: '图书种类柱状图',
+          subtext: '种类',
+          left: 'center'
+        },
+
+        xAxis: {
+          type: 'category',
+          data: xAis,
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yAis,
+            type: 'bar'
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+
+    },
+
+    initline(xAis,yAis){
+     let chartDom = document.getElementById('line');
+     let myChart = echarts.init(chartDom);
+     let option;
+
+      option = {
+        title: {
+          text: '轴续证痴迷的图书种类折线图',
+          subtext: '种类',
+          left: 'center'
+        },
+        xAxis: {
+          type: 'category',
+          data: xAis,
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yAis,
+            type: 'line'
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+
     }
 
 
 
 
+
   },
 
 
-- 
Gitee