4.10每日总结

今天课上老师让我们完成以下项目

河北省科技政策查询系统需求

一、项目背景说明：

近期，河北省省长视察河北省科技厅，需要开发一个科技政策查询界面，展示在河北省科技厅办公大厅触摸大屏上，实现多条件查询和按照政策分类树分类浏览。

二、项目功能说明：

科技政策查询主界面样式如下图所示：

主界面主要分成五部分：

1、顶部为LOGO区，主要展示科技技术情报研究院的LOGO，并用蓝黑色显示科技政策查询系统。

2、第二部分为多条件查询区，主要包括政策图解（按钮式超级链接），查询条件包括政策名称、政策文号、发文机构、全文检索四个查询条件，可以根据四个条件进行综合查询。

3、第三部分为左侧科技政策分类树形结构，要求从policy_kind科技政策分类表中读取科技政策分类属性，后面括号内标注的是属于这个分类的科技政策数量，政策数量的统计来源于科技政策数据库。点击相关的分类，右侧的政策接过去显示相应数量的科技政策列表。

4、第四部分为右侧政策查询结果显示区，显示科技政策查询结果列表，点击查看或者具体的政策名称，跳转到政策详细信息显示界面

查询结果列表包括政策名称、发文机构、颁布日期、政策分类、操作五项内容。

显示结果要求：

（1）结果表标题政策名称包括政策名称、发文机构、颁布日期、政策分类、操作五个标题居中显示。

（2）政策名称、发文机构结果列表左对齐，颁布日期、政策分类、操作的结果列表居中显示。

（3）要求分页显示，按照图示要求。

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