山东大学软件学院项目实训个人纪实（七）——图表界面设计

qyk20021117

已于 2024-06-24 00:46:09 修改

阅读量125

点赞数 1

文章标签： c++ python

于 2024-06-03 20:11:43 首次发布

本文链接：https://blog.csdn.net/qyk20021117/article/details/139329005

版权

写作目的：为积极响应戴鸿君老师对项目实训内容的建设性意见，特写本系列个人纪实，记录团队在项目实训的工作中个人的贡献。

系统核心图表的使用：

公告表

具体图表展示：

    <el-card class="fancy-font" style="width: 1200px;  margin: 10px auto">
      <h2 style="margin: 20px 0">公告列表</h2>
      <el-collapse accordion  v-model="active">
        <el-collapse-item v-for="(item,index) in notices" :key="item.id" :name="'' + index">
          <template slot="title">
            <span style="font-size: 20px;">{{ item.name }}</span>
            <span style="margin-left: 10px">{{ item.time }}</span>
          </template>
          <div>{{ item.content }}</div>
        </el-collapse-item>
      </el-collapse>
    </el-card>

样式：

.fancy-font {
  font-family: 'Pacifico', cursive; /* 使用 'Pacifico' 字体，如果字体加载失败则使用默认的手写字体 */
  color: #330000; /* 设置字体颜色 */
  font-size: 20px;
  opacity: 0.8;
  font-weight: bold;
}

文书表

流式布局分割类型的文书主体：

    <el-row>
      <el-col :span="3">
        
      </el-col>
      <el-col :span="20">
        
       </el-col>
     </el-row>

文书类型的展示与获取：

展示：

     <div style="margin-top: 20px;">
          <el-tabs v-model="type" @tab-click="handleClickType"  tab-position="left">
            <el-tab-pane disabled>
              <span slot="label" style="font-size: 18px;color: #8c939d;font-family: 'Great Vibes', cursive; font-weight: bold;">类型</span>
            </el-tab-pane>
            <el-tab-pane style="font-family: 'Great Vibes', cursive; " v-for="item in types" :label="item.name"></el-tab-pane>
          </el-tabs>
        </div>

获取：

    load() {
      console.log(this.type)
      this.request.get("/blog/page/type", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          type: this.type
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

      this.request.get("/blogType").then(res => {
        this.types = res.data
      })
    },

点击类型时触发分类检索功能

 handleClickType(tab, event) {
      this.type = this.types[tab.index - 1].name
      this.load();
    },

最终文书展示：分为图片和文书描述内容的流式布局

 <div>
   <el-row :gutter="10" style="margin: 10px 0" v-for="item in tableData" :key="item.id">
            <el-col :span="7" style="margin-bottom: 10px">
              <img :src="item.img" alt="" style="width: 100%;height:200px;opacity: 0.8 ">
            </el-col>
            <el-col :span="16" style="margin: 40px 0 10px 20px">
              <div class="fontCss" style="font-weight: bold" @click="$router.push('/front/blogDetail?id=' + item.id)">
                {{ item.name }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                发布人：{{ item.user }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                发布时间：{{ item.time }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                文书类别：{{ item.blogType }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                浏览量：{{ item.pageviews }}
              </div>

新的点击、刷新会触发页面更新功能，会进一步优化页面展示的文书内容

      this.request.get("/blog/page/type", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          type: this.type
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

      this.request.get("/blogType").then(res => {
        this.types = res.data
      })

文书搜索结果：因为没有写搜索文书触发时，自动补全文书类型以匹配侧边栏的类型，因此将搜索结果展示在一个新的页面中，显示用户希望检索的文书名字、文书类型。对input组件进行路由绑定，就可以直接跳转;

            <el-button size="medium" class="ml-5" type="text" @click="$router.push('/front/search?name=' + name2)">搜索</el-button>

搜索结果：以搜索中央法规的为例：

自动拼接搜索路由，并转到搜索结果页面：

http://localhost:8080/front/search?name=%E4%B8%AD%E5%A4%AE%E6%B3%95%E8%A7%84

与文书展示页面相同的流式布局

 <el-row :gutter="10" style="margin: 10px 0" v-for="item in tableData" :key="item.id">
        <el-col :span="5" style="margin-bottom: 10px">
          <img :src="item.img" alt="" style="width: 100%;height:200px;opacity: 0.8 ">
        </el-col>
        <el-col :span="18" style="margin: 20px 0 10px 20px">
          <div class="fontCss" style="font-weight: bold">
            <a @click="$router.push('/front/blogDetail?id=' + item.id)" href="#">{{ item.name }}</a>
          </div>
          <div  style="margin-top: 10px" class="fontCss">
            发布人：{{ item.user }}
          </div>
          <div style="margin-top: 10px" class="fontCss">
            发布时间：{{ item.time }}
          </div>
          <div style="margin-top: 10px" class="fontCss">
            文书类别：{{ item.blogType }}
          </div>
          <div style="margin-top: 10px" class="fontCss">
            浏览量：{{ item.pageviews }}
          </div>
        </el-col>
      </el-row>

触发函数：

    load() {
      console.log(this.type)
      this.request.get("/blog/page/search/", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

    },

模板文书表：采用流式布局实现模板文书生成选择器。用户可以通过点击相应的标题前往模板生成的页面生成自己需要的法律文书。

    <el-row>
      <el-col :span="20">
        <div>
          <el-row :gutter="10" style="margin: 10px 0" v-for="item in tableData" :key="item.id">
            <el-col :span="7" style="margin-bottom: 10px">
              <img :src="item.img" alt="" style="width: 100%;height:200px; ">
            </el-col>
            <el-col :span="16" style="margin: 10px 0 10px 20px">
              <div class="fontCss" style="font-weight: bold;color: #330000;font-size: 24px " @click="$router.push('/front/'+item.type)">
                {{ item.name }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                文书描述：{{ item.user }}
              </div>
              <div style="margin-top: 10px" class="fontCss">
                文书类别：{{ item.blogType }}
              </div>
            </el-col>
          </el-row>

          <div style="padding: 10px 0">
          </div>
        </div>
      </el-col>
    </el-row>

其中实现点击路由跳转的细节：

<div class="fontCss" style="font-weight: bold;color: #330000;font-size: 24px " @click="$router.push('/front/'+item.type)">

静态数据设置：

      tableData: [
        {"id":0,
          "name":"最好的判决书模板",
          "user":"判决书是法院对案件审理后，根据查明和认定的案件事实，依照法律规定，对案件实体问题作出的权威性判定。它标志着案件审理的终结，且判决书一经作出即具有法律效力，非经法定程序不得变更或撤销。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"判决书",
          "type":"PanJueShu",
        },
        {"id":1,
            "name":"最好的不予受理支付令申请通知书(通知申请人不予受理用)模板",
            "user":"主要作用在于通知并告知债权人支付令申请的处理结果、列明不符合的条件、指引后续操作、维护法律秩序、保障当事人权益以及作为法律文件等方面。",
            "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
            "blogType":"不予受理支付令申请通知书(通知申请人不予受理用)",
            "type":"1buYuShouLiTongZhiShu"
        },
        {"id":2,
          "name":"最好的担保书(案外人提供保全或者先予执行担保用)模板",
          "user":"其目的是确保在案件审理过程中，当申请人或被申请人因各种原因无法提供担保时，有案外人能够提供必要的担保，以保障诉讼活动的顺利进行。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"担保书(案外人提供保全或者先予执行担保用)",
          "type":"2danBaoShu"
        },
        {"id":4,
          "name":"最好的民事答辩状(法人或者其他组织对民事起诉提出答辩用)模板",
          "user":"法律赋予处于被告地位的法人或其他组织的一种权利，使其能够针对原告的起诉状内容，提出自己的反驳意见和理由。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"民事答辩状(法人或者其他组织对民事起诉提出答辩用)",
          "type":"4mingShiDaBianZhuang"
        },
        {"id":5,
          "name":"最好的民事反诉状(法人或者其他组织提起民事反诉用)模板",
          "user":"通过提交反诉状，被告可以主张自己的权益受损，并要求法院对其进行保护。这是被告行使其诉讼权利的一种方式，",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"民事反诉状(法人或者其他组织提起民事反诉用)",
          "type":"5mingShiFanShuZhuang"
        },
        {"id":6,
          "name":"最好的民事再审申请书(申请再审用)模板",
          "user":"它不仅为当事人提供了一个表达不服与申诉的平台，还是启动再审程序、保障司法公正以及促进法律程序完善的重要工具。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"民事再审申请书(申请再审用)",
          "type":"6MingShiZaiShenTongZhiShu"
        },
        {"id":7,
          "name":"最好的民事起诉状模板",
          "user":"民事起诉状是当事人向人民法院提起民事诉讼的书面申请。它是启动民事诉讼程序的重要法律文件，用以明确诉讼请求、事实和理由，以及相关的证据和法律依据。提交民事起诉状后，法院将进行审查，如果符合受理条件，将立案并通知被告应诉。随后，法院将组织双方当事人进行证据交换、庭审等诉讼活动，最终作出判决或裁定。\n" +
              "\n" +
              "民事起诉状是维护当事人合法权益的重要手段，应当认真准备，确保内容真实、合法、有效。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"民事起诉状",
          "type":"7minShiShangShuZhuang"
         },
        {"id":8,
          "name":"最好的行政赔偿调解书(一审行政赔偿案件用)模板",
          "user":"高效解决纠纷，和谐解决争议，保护当事人合法权益，推动法治政府建设，提供法律依据",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"行政赔偿调解书(一审行政赔偿案件用)",
          "type":"8xingZhengPeiChangTiaoJieShu"
        },
        {"id":9,
          "name":"最好的二审应诉通知书(通知被上诉人用)模板",
          "user":"明确告知被上诉人其作为案件当事人，在二审程序中需要履行的诉讼义务。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"二审应诉通知书(通知被上诉人用)",
          "type":"9yingSuTongZhiShu"
        },
        {"id":10,
          "name":"最好的异议书(对管辖权提出异议用)模板",
          "user":"主要用于当事人对法院的管辖权提出异议，并阐述相关理由和依据。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"异议书(对管辖权提出异议用)",
          "type":"10yiYiShu"
        },
        {"id":11,
          "name":"最好的民事上诉状模板",
          "user":"民事上诉状是指当事人对第一审人民法院作出的尚未生效的民事判决或裁定不服，向上一级人民法院提起上诉的书面申请。它是民事诉讼中的一种重要法律文书，用以启动上诉程序。",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"民事上诉状",
          "type":"11shangSuZhuang"
        },
        {"id":12,
          "name":"最好的声明书(社会组织声明无违法记录用)模板",
          "user":"证明社会组织合法性、满足法律程序要求、促进公正审判、加强社会监督、规范社会组织行为等方面具有重要的作用",
          "img":"http://localhost:9090/file/feb52f64c2694dc983f418fe1a22e7f9.png",
          "blogType":"声明书(社会组织声明无违法记录用)",
          "type":"12shengMingShu"
        },
      ],

以判决书为例：

点赞历史表：

根据用户名，检索用户历史点赞的记录，并展示在点赞历史表中

  <div class="main" style="margin-top: 15px">
    <el-card style="opacity: 0.8">
      <el-table :data="tableData">
        <el-table-column prop="blog.name" label="文书"></el-table-column>
        <el-table-column label="封面"><template slot-scope="scope"><el-image style="width: 100px; height: 100px" :src="scope.row.blog.img" :preview-src-list="[scope.row.blog.img]"></el-image></template></el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="time" label="点赞时间"></el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>

数据获取：

    load() {
      this.request.get("/collect/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },