可视化展示——输入界面

最新推荐文章于 2022-09-19 14:35:35 发布
最新推荐文章于 2022-09-19 14:35:35 发布
阅读量813 收藏
点赞数
分类专栏： 可视化 文章标签： python web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lw03060402/article/details/106960299
版权

输入界面：

   这个界面用来选择论文集合，在论文集合选择完成之后，分析出论文集合的一些性质，比如平均reference引用数目，平均字数等等论文集合的特征，并用柱状图等形象化表示出来。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>基于规则嵌入的论文比对系统</title>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="./bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
    <script src="./bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <style>
        .jumbotron {
            background: #d0e1f0;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="jumbotron text-center" style="height: 220px;">
            <h1>基于规则嵌入的论文比对系统</h1><br>
            <!-- <span class="label label-success" style="font-size: large;">输入一篇科普文章，您将得到它的“主题”与“行文思路”</span> -->
        </div>

        <div class="row">

            <div class="col-xs-3">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3>查询历史</h3>
                        <span class="label label-default">历史记录</span>
                    </div>
                </div>
            </div>

            <div class="col-xs-9">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="text-center">论文集合输入</h3>
                    </div>
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                        通过年份会议选择论文集合
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <div class="col-sm-2 col-lg-offset-1">
                                                <p>年份</p>
                                                <input type="text" id="date" name="datetimepicker" value=" "
                                                    placeholder="选择年份" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2 col-lg-offset-1">
                                                <p>会议</p>
                                                <div class="form-group">
                                                    <select class="form-control">
                                                        <option>会议1</option>
                                                        <option>会议2</option>
                                                        <option>会议3</option>
                                                        <option>会议4</option>
                                                        <option>会议5</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-3">
                                                <button type="button submit" class="btn btn-info btn-lg btn-block">
                                                    详情</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button submit" class="btn btn-success btn-lg btn-block">
                                                分析</button>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    输入论文名选择对应论文集合
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">论文名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" placeholder="请输入论文名" name="title">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button submit" class="btn btn-info btn-lg btn-block">
                                                详情</button>
                                        </div>
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button submit" class="btn btn-success btn-lg btn-block">
                                                分析</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>

    </div>
    <script type="text/javascript">
        $('#date').datetimepicker({
            startView: 4,//日期时间选择器打开之后首先显示的视图。 可接受的值：0 - 小时 视图，1 - 天 视图，2 - 月 视图，3 - 年 视图，4 - 十年 视图
            minView: 4,//Number, String. 默认值：0, ‘hour’，日期时间选择器所能够提供的最精确的时间选择视图
            autoclose: true,//当选择一个日期之后是否立即关闭此日期时间选择器
            todayBtn: true,//在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期
            format: 'yyyy'//日期显示格式

        });
    </script>
</body>
</html>

上述内容详见：

https://blog.csdn.net/qq_41798302/article/details/106713205

lw03060402
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可视化输入和输出/流程
weixin_51648979的博客
12-09 756
特殊注射第一个#/use/···是表明注释在哪里；utf-8是中文编码 列表list：一种有序和可更改的集合，允许重复成员 元组Tuple：一种有序和不可更改的集合，允许重复成员 集合（Set）：一种无序的和无索引的集合，没有重复的成员 词典（dictionary）：一种无序，可变和有索引，没有重复成员 > print(thislist[2:5]) 从0开始检索，这表明了第二项开始检索（包含第二项），第五项结束，不包含第五项 For遍历循环所有的项目 可视化输出 可视化语法：字符...
yml文件关键词自动可视化替换.zip
最新发布
04-26
**YAML 配置替换工具 —— 您的个人化配置编辑器** ------------------------------------------------------------------------------- 厌倦了手动编辑复杂的 YAML 文件吗？YAML 配置替换工具是您的完美解决方案。...
可视化排序过程
12-28
　　 1. 该程序为一个可以展示不同排序算法的排序过程动画，具有良好的图形界面； 　　2. 一共有三种排序方法——直接插入排序、直接选择排序和冒泡排序快速排序，； 　　3. 排序元素输入为手动输入； 　　4. 有进度条显示排序的进度； 5. IDE：Eclipse
当前最为流行的可视化大屏都是怎么做的？
明月说数据
12-15 1276
不得不承认，人是比较抗拒枯燥数字的生物，用可视化方式呈现出来，会更易于接受、理解并记住。同时综合性的数据可视化一般会借助大屏、多屏的手段进行呈现。也只有通过可视化手段，才能将大量前期、底层工作当中蕴含的价值快速、全面的呈现出来，并突出系统的亮点和重点。因此数据可视化系统，也常用于向上级领导、来宾进行展示汇报。这就体现出了“一把手工程”的另一层含义。也许也会有人说，数据可视化大屏就只是把数据展示的更漂亮而已？ 事实上，人，天然都喜欢美好的事物。数据可视化的目标是让数据、信息更易于被人理解，而美观则是令人易于接
MFC--界面输入
weixin_46858088的博客
11-07 478
编辑界面 菜单 对话框 注意:单选按钮要添加组属性 添加变量 CMydlg变量 CTestView 添加消息 OnShow 编辑消息 CTestView OnDraw void CTestView::OnDraw(CDC* pDC) { CTestDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for native data here for(int .
整理输入输出，与可视化对接
鱼香土豆丝
09-02 619
Spark Mllib机器学习库 一共有六大类，有12个算法   一、回归算法 1.线性回归 数据输入格式：（1）、 “标签，特征值1 特征值2 特征值3 特征值4 .....”              （2）、 “标签 特征值ID:特征值 特征值ID2:特征值......” 数据输出格式： （预测1，标签1） （预测2，标签2） ... 2.逻辑回归 数据输入格
输入和用户界面——Input类
weixin_30319153的博客
08-17 107
Input类 Input类有许多轻松获得所有最常用的键盘，鼠标和手柄键状态（见图10-1 ）的属性。此类还提供了一些辅助方法来管理键盘输入，文字输入，但你可能不会在第一个游戏中使用的Input类的所有代码，但当你的游戏发展并使用更多的用户界面代码时，就会觉得它们的用处了。此类最重要的方法是Update方法，该方法每一帧都被调用（在BaseGame类的Update方法中被自动调用）。 图1...
IEEE 802.3以太网帧封装——javafx可视化计算八位CRC
02-28
使用javafx框架，带此框架的... 1）基本要求： A)要求画出界面，以太网帧的数据部分、源MAC地址和目的MAC地址均从界面输入； B)计算后的校验和字段和封装后的结果可以从界面上输出； C) 生成多项式G（X）=X8+X2+X+1；
android开发——简易计算器的设计报告.doc
03-09
简易计算机的设计 摘要：Android是当今最重要的手机开发平台之一，... 三、设计流程 1、系统的软件结构图 2、功能的操作流程 得出程序结果后，输入数据，选择运算符号，再输入数据，选择等号，即可得到结果 。 3、计算
信息论与编码课程设计——霍夫曼编码
05-21
二、编写的程序应具备在windows下的可视化操作界面，不同的编码类型用不同的菜单加以分割。 三、对于霍夫曼编码应该具备输入Q、N、R的能力，而费诺、香农编码能够输入Q。 四、不同编码类型均应当展现编码的结果，...
创建可输入可选择页面组件
我的博客
09-19 373
可输入可选择页面组件
c风格输入输出解决常见可视化输出（第十四节）
RememberingC的博客
04-23 613
在引入头文件cstdio后便可使用；输入scanf、输出printf。 scanf基本格式：scanf("格式控制字符串", 若干参数（用逗号隔开）); 格式控制字符串中分为两种不同的字符串：格式控制说明，普通字符。 常见格式控制说明 %d 有符号十进制整数 %u 无符号十进制整数 %c 字符 %s 字符串 %f 浮点数 %lf 长浮...
APS界面展示
chiwu2303的博客
12-11 278
APS软件开发交流Q群:99091465 转载于:https://my.oschina.net/u/1174476/blog/542943
java list jsp页面,如何在JSP页面中显示集合
weixin_33987275的博客
02-16 487
My servlet class and jsp is given below.ContactManager.javapublic class ContactManager extends HttpServlet {List contactsList = new ArrayList();public List getContactsList() {return contactsList;}publ...
一个多标签页、可输入网址可前进后退刷新的简易浏览器
(ÒωÓױ)
03-08 1057
一个多标签页、可输入网址可前进后退刷新的简易浏览器因为本人之前做过一个单标签页的简易浏览器，所以与标签页逻辑处理无关的介绍就不再赘述了，想要了解的可以查看这里单标签页简易浏览器实现。此程序的功能如下： 可输入网址，敲击Enter或者点击Go按钮发起浏览 可记录标签页的浏览痕迹，可前进后退 可以刷新当前网页 标签页可以新建、删除、切换，网页内容也随之变动 如何实现多标签页多标签页该如何实现呢？考虑了很
数据可视化——关系图可视化
lw03060402的博客
07-01 5452
关系图可视化数据预处理可视化 数据预处理 首先需要两个基本的数据，title对应论文标题，id_dic是论文id与索引的对应关系。 # 获取title filepath0 = 'D:/大学资料/大三下/项目实训/code+data/ACM数据集/nodes.txt' f0 = open(filepath0,'r') title = [] for line in f0: lines = line.strip('\n') title.append(lines) print(title[:3])
可视化展示——实现论文引用关系动图展示
lw03060402的博客
06-25 2348
实现论文引用关系动图展示效果代码：遇到的问题：将队友获取的year，venues文件导入django：解决时间选择器不显示问题： 效果 实现将队友处理好的用pyecharts展示出来的论文引用之间的关系（动态图）展示到web界面上： 首先，到pyecharts官方文档学习怎么和django后台进行融合： https://pyecharts.org/#/zh-cn/intro 代码： 思路： 在django 的view视图中，将生成的动态图的json文件传到前端，从而从前端进行展示。 paper_d
数据可视化——词语embedding的可视化
lw03060402的博客
07-01 1519
词语embedding的可视化 在可视化我找到了一个宝藏网站http://projector.tensorflow.org/ 使用方法 点击load载入自己的数据 数据需要tsv格式，第一个文件是embedding结果，第二个是标签，按照提示格式载入 在下面还可以选择向量降维的模式 最后结果 上述内容详见： https://blog.csdn.net/qq_41824131/article/details/107057803 ...
neo4j数据可视化怎么弄？
08-06
要将Neo4j数据库可视化，你可以使用Neo4j提供的内置Web界面——Neo4j Browser。以下是一些步骤： 1. 确保你已经安装并启动了Neo4j服务器。如果没有，请根据你的操作系统和安装方式进行安装和启动。 2. 打开你的Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值