今天课上老师让我们完成以下项目
河北省科技政策查询系统需求
一、项目背景说明：
近期，河北省省长视察河北省科技厅，需要开发一个科技政策查询界面，展示在河北省科技厅办公大厅触摸大屏上，实现多条件查询和按照政策分类树分类浏览。
二、项目功能说明：
科技政策查询主界面样式如下图所示：
主界面主要分成五部分：
1、顶部为LOGO区，主要展示科技技术情报研究院的LOGO，并用蓝黑色显示科技政策查询系统。
2、第二部分为多条件查询区，主要包括政策图解（按钮式超级链接），查询条件包括政策名称、政策文号、发文机构、全文检索四个查询条件，可以根据四个条件进行综合查询。
3、第三部分为左侧科技政策分类树形结构，要求从policy_kind科技政策分类表中读取科技政策分类属性，后面括号内标注的是属于这个分类的科技政策数量，政策数量的统计来源于科技政策数据库。点击相关的分类，右侧的政策接过去显示相应数量的科技政策列表。
4、第四部分为右侧政策查询结果显示区，显示科技政策查询结果列表，点击查看或者具体的政策名称，跳转到政策详细信息显示界面
查询结果列表包括政策名称、发文机构、颁布日期、政策分类、操作五项内容。
显示结果要求：
（1）结果表标题政策名称包括政策名称、发文机构、颁布日期、政策分类、操作五个标题居中显示。
（2）政策名称、发文机构结果列表左对齐，颁布日期、政策分类、操作的结果列表居中显示。
（3）要求分页显示，按照图示要求。
5、底部的系统说明区：要求按照样式加载：Copyright 1996-2022 All Rights Reserved 版权所有：河北省科学技术情报研究院 河北省科技创新战略研究院 技术支持：河北省科技信息处理实验室。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Title</title> <link rel="stylesheet" href="plugins/element-ui/index.css"> <link rel="stylesheet" href="plugins/layui-v2.7.6/layui/css/layui.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css"> <style> body{ float: left; } #left{ width: 10%; float: left; } #right{ width:87%; margin-left: 200px; } .right-top{ text-align: center; height: 50px; } .right-content{ margin-top: 5px; margin-left: 5px; width: available; height: available; float: left; } .right-content-left{ width: 10%; height: available; float: left; } .right-content-right{ width:75%; height:available ; float: left; margin-left: 150px; } #text1{ width:80px; margin-left: 30px; font-size: 15px; height: available; } .filter-container .el-button,.filter-container .el-input__inner{ padding: 0 15px; height: 34px; line-height: 34px; } </style> </head> <body class="hold-transition"> <div id="app"> <div id="left"> <ul class="layui-nav layui-nav-tree layui-nav-side"> <li class="layui-nav-item"><a href="">科技文档管理</a></li> <li class="layui-nav-item"><a href="">系统设置</a></li> </ul> </div> <div id="right"> <div class="right-top layui-card"> <div class="right-top-title"><img src="images/LOGO.png" width="40" height="40" alt="logo"><span style="font-size:25px;color: #01aaed;font-weight: bold;margin-left: 15px;">科技政策查询系统</span></div> </div> <div class="right-content"> <div class="right-content-left"> <div class="layui-card" id="text1">图解政策</div> <div id="tree" style="font-size: 15px;"> <el-tree :data="typeTree" nodeKey="id" :props="children" default-expand-all @node-click="handleNodeClick" v-model="type" > </el-tree> </div> </div> <div class="right-content-right"> <div class="filter-container"> <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px" > <div class="app-container"> <div class="box"> <div class="filter-container"> 政策名称 <el-input placeholder="请输入政策名称" v-model="formData.name" style="width: 150px" class="filter-item" ></el-input> 发文字号 <el-input placeholder="发文字号" v-model="formData.document" style="width: 100px" class="filter-item" ></el-input> 发文机构 <el-input placeholder="发文机构" v-model="formData.organ" style="width: 100px" class="filter-item" ></el-input> 全文检索 <el-input placeholder="全文检索" v-model="formData.text" style="width: 100px" class="filter-item"> </el-input> <el-button @click="handleQuery()" class="dalfBut">查询</el-button> </div> </div> </div> </el-form> </div> <el-table size="middle" :data="policyList" stripe highlight-current-row> <el-table-column prop="name" align="center" label="政策名称"></el-table-column> <el-table-column prop="organ" align="center" label="发文机构"></el-table-column> <el-table-column prop="pubdata" align="center" label="发布日期"></el-table-column> <el-table-column prop="type" align="center" label="政策分类"></el-table-column> <el-table-column laybel="操作" align="center"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="read(scope.row)">查看</el-button> </template> </el-table-column> </el-table> <el-pagination class="pageList" :page-sizes="[3,5,10,15,20,30]" :page-size="pageSize" layout="total,sizes,prev,pager,next,jumper" :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination> </div> <!-- 政策查看层--> <div class="add-form"> <el-dialog title="政策内容" width="90%" :visible.sync="dialogVisible"> <div><el-input v-html="text" type="textarea"></el-input></div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </span> </div> </div> </div> </div> </div> <script src="plugins/vue/vue.js"></script> <script src="plugins/element-ui/index.js"></script> <script src="plugins/axios/axios.min.js"></script> <script> var vue = new Vue({ el:'#app', data:{ counts:0, page:1, pageSize:3, dialogVisible:false, type:'', policyList:[], text:{}, typeTree:{}, formData:{ 'name':'', 'document':'', 'organ':'', 'text':'', } }, created(){ // this.getType(); this.getAllPolicies() this.getAllType() }, methods:{ handleNodeClick(data) { axios.get("/type/"+data.label).then((res)=>{ this.policyList = res.data }) }, getAllPolicies(){ const params = { 'page': this.page, 'pageSize': this.pageSize } axios({ url:'/policy/page',method:'get',params}).then((res)=>{ this.policyList = res.data.records; this.counts = res.data.total }) }, read(row){ console.log(row); this.dialogVisible=true axios.get("/policy/"+row.id).then((res)=>{ this.text=res.data.text }) }, handleQuery(){ const params = { 'page': this.page, 'pageSize': this.pageSize, 'policy': this.formData } axios({url:'/policy/page1',method:'post',params}).then((res)=>{ this.policyList = res.data.records; this.counts = res.data.total }) }, getAllType() { axios.get("/type").then((res)=>{ this.typeTree = res.data; }) }, handleSizeChange(val){ this.pageSize = val this.getAllPolicies(); }, handleCurrentChange(val){ this.pageSize = val this.getAllPolicies(); } }, mounted(){ } }) </script> </body> </html>