智能问答页面，公共样式抽取

src/css/common.css

@@ -26,7 +26,49 @@ ul,li{
 table,tr,td{
     list-style: none;
 }
-
+.wrappper{
+    width: 100%;
+    min-width: 1200px;
+    .content{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin: 10px 0 0 -600px;
+        cursor: default;
+        height: 100%;
+        border: 1px solid #f4f4f4;
+        border-radius: 2px;
+    }
+}
+.title{
+    width: 100%;
+    min-width: 1200px;
+    height: 40px;
+    background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
+    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+}
+.titleTxt{
+    width: 1200px;
+    padding-top: 7px;
+    margin: auto;
+    color: #fff;
+    font-size: 14px;
+}
+.titleLogo{
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+.titleLogoShaiyifu{
+    height: 30px;
+}
+.titleInfo{
+    display: inline-block;
+    color: #fff;
+    vertical-align: middle;
+    height: 17px;
+}
 .pop-box{
     position: absolute;
     display: none;

src/css/knowledgeMap.less

@@ -1,39 +1,39 @@
 .knowledgeMapWrapper{
-    min-width: 1200px;
-    .title{
-        position: relative;
-        height: 40px;
-        line-height: 40px;
-        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
-       filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
-        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+    /* min-width: 1200px;
+   * .title{
+         position: relative;
+         height: 40px;
+         line-height: 40px;
+         background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+         -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
 
-    }
-    .titleTxt{
-        position: relative;
-        width: 1200px;
-        left: 50%;
-        margin-left: -600px;
-        color: #fff;
-        font-size: 14px;
-    }
-    .titleLogo{
-        position: relative;
-        top: -2px;
-        height: 20px;
-        margin: 0 20px 0 0;
-    }
-    .titleLogoShaiyifu{
-        top: 5px;
-        height: 30px;
-    }
-    .titleInfo{
-        position: relative;
-        display: inline-block;
-        top: -4px;
-        height: 40px;
-        line-height: 40px;
-    }
+     }
+     .titleTxt{
+         position: relative;
+         width: 1200px;
+         left: 50%;
+         margin-left: -600px;
+         color: #fff;
+         font-size: 14px;
+     }
+     .titleLogo{
+         position: relative;
+         top: -2px;
+         height: 20px;
+         margin: 0 20px 0 0;
+     }
+     .titleLogoShaiyifu{
+         top: 5px;
+         height: 30px;
+     }
+     .titleInfo{
+         position: relative;
+         display: inline-block;
+         top: -4px;
+         height: 40px;
+         line-height: 40px;
+     }
     .content{
         position: relative;
         width: 1200px;
@@ -41,7 +41,7 @@
         margin-left: -600px;
         cursor: default;
         height: 100%;
-    }
+    }*/
     .left{
         float: left;
         background: #fff;

src/css/knowledgeTree.less

@@ -1,12 +1,12 @@
 .knowledgeTreeWrapper{
-    min-width: 1200px;
+    /*min-width: 1200px;
     .title{
         position: relative;
         height: 40px;
         line-height: 40px;
         background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
-        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
-        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
     }
     .titleTxt{
         position: relative;
@@ -33,7 +33,7 @@
         height: 40px;
         color: #fff;
         line-height: 40px;
-    }
+    }*/
     .content{
         position: relative;
         width: 1200px;

src/css/participle.less

@@ -1,15 +1,15 @@
 .participleWrappper{
-    width: 100%;
+    /* width: 100%;
     min-width: 1200px;
-    .title{
+   .title{
         width: 100%;
         min-width: 1200px;
         position: relative;
         height: 40px;
         line-height: 40px;
         background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
-        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
-        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
     }
     .titleTxt{
         position: relative;
@@ -36,7 +36,7 @@
         height: 40px;
         color: #fff;
         line-height: 40px;
-    }
+    }*/
     .content{
         position: relative;
         width: 1200px;

src/css/qaPage.less

@@ -0,0 +1,118 @@
+.contentTitle{
+  font-size: 16px;
+  height: 44px;
+  line-height: 44px;
+  border-bottom: 1px solid #E6E6E6;
+  font-weight: 600;
+  color: #333;
+  position: relative;
+}
+.contentInfoBox{
+  width: 1160px;
+  padding: 0 20px;
+  background: #fff;
+  margin: 0 0 10px 0;
+  position: relative;
+}
+.infoBox{
+  display: block;
+}
+.infoTxt{
+  min-height: 33px;
+  width: 1160px;
+  font-size: 14px;
+  color: #333;
+  resize: none;
+  line-height: 18px;
+  // outline: none;
+  padding: 10px;
+  background: #F7F8FA;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin: 15px 0 0 0;
+}
+.infoTxt:focus{
+  border: 1px solid #58a6e7;
+  outline: 0;
+  -webkit-box-shadow:#58a6e7 0px 0px 2px;
+  -moz-box-shadow: #58a6e7 0px 0px 2px;
+  box-shadow: #58a6e7 0px 0px 2px;
+}
+.loading{
+  color: #aaa;
+  text-align: center;
+  margin-top:50px;
+  font-size:14px;
+}
+.disabled{
+  opacity: 0.5;
+  filter: "alpha(opacity=50)";
+  filter: alpha(opacity=50);
+}
+input::-webkit-input-placeholder{
+  color: #ccc;
+}
+
+　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+  color: #ccc;
+}
+　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+  color: #ccc;
+}
+　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+  color: #ccc;
+}
+
+.btnBox{
+  height: 36px;
+  padding: 20px 0;
+  position: relative;
+}
+.btn{
+  position: absolute;
+  left: 50%;
+  margin-left: -48px;
+  background-color: #5A8EEE;
+  border-color: #5A8EEE;
+  color: #fff;
+  padding: 9px 20px;
+  text-align: center;
+  border-radius:4px;
+  font-size: 14px;
+  display: inline-block;
+  cursor: pointer;
+}
+.resultBox{
+  white-space: pre-wrap;
+  min-height: 155px;
+  line-height: 21px;
+  padding: 20px 0;
+  width: 1160px;
+  position: relative;
+  font-size: 14px;
+  color: #333;
+  // css保留换行符
+  // white-space: pre-line;
+}
+.empty{
+  position: absolute;
+  // display: none;
+  width: 120px;
+  height: 140px;
+  top: 50%;
+  left: 50%;
+  margin: -50px 0 0 -51px;
+  // display: none;
+  .emptyImg{
+    position: relative;
+    width: 100px;
+    left: 10px;
+  }
+  .emptyTxt{
+    width: 120px;
+    font-size:12px;
+    margin: 20px 0 0 0;
+    text-align: center;
+    color: #aaa;
+  }
+}

src/html/knowledgeGraph.html

@@ -11,7 +11,7 @@
 </head>
 
 <body>
-	<div class="knowledgeMapWrapper">
+	<div class="knowledgeMapWrapper wrappper">
 		<div class="title">
 			<div class="titleTxt">
 				<img class="titleLogo" src="./images/logo.png" alt="logo">

src/html/knowledgeTree.html

@@ -11,7 +11,7 @@
 </head>
 
 <body>
-  <div class="knowledgeTreeWrapper">
+  <div class="knowledgeTreeWrapper wrappper">
       <div class="title">
       
         <div class="titleTxt">

src/html/participle.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-	<div class="participleWrappper">
+	<div class="participleWrappper wrappper">
 		<div class="title">
 			<div class="titleTxt">
 				<img class="titleLogo" src="./images/logo.png" alt="logo">

src/html/qaPage.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+<div class="qaPageWrappper wrappper">
+    <div class="title">
+        <div class="titleTxt">
+            <img class="titleLogo" src="./images/logo.png" alt="logo">
+            <!-- <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo"> -->
+            <span class="titleInfo">|&nbsp;&nbsp;智能问答</span>
+        </div>
+    </div>
+    <div class="content">
+        <div class="contentInfoBox">
+            <p class="contentTitle">请输入问题</p>
+            <div class="infoBox">
+                <textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请在此输入问题......"></textarea>
+            </div>
+            <div class="btnBox clearfix">
+                <span class="btn disabled" id="analy">提交</span>
+            </div>
+        </div>
+        <div class="contentInfoBox">
+            <p class="contentTitle">
+                智能回答
+            </p>
+            <div class="resultBox">
+                <div class="empty">
+                    <img class="emptyImg" src="./images/empty2.png" alt="暂无智能回答">
+                    <p class="emptyTxt">暂无智能回答～</p>
+                </div>
+                <div class="resultBoxInfo" id="resultBoxInfo"></div>
+            </div>
+        </div>
+        <!-- <div class="footer">
+            杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+        </div> -->
+    </div>
+</div>
+
+
+</body>
+
+</html>

src/js/api.js

@@ -6,6 +6,7 @@ const api = {
   getTree:'/api/ltkg/kg/getTree',
   entity_predict:'api/ltkg/nlp/getNlp',
   getMrInfo:'/api/ltkg/presetInfo/getMrInfo',
+  getAnswer:'/api/ltkg/qa/charBot',
 };
 
 const getUrlArgObject = function(name) {//

src/js/index.js

@@ -2,7 +2,7 @@ const $ = require("jquery");
 require("babel-polyfill");
 const echarts = require("echarts");
 require("./../css/knowledgeMap.less");
-require("./../css/common.css");
+require("./../css/common.less");
 // require("ztree");
 require('./../resources/images/icon.png');
 require('./../resources/images/iconOpen.png');

src/js/knowledgeTree.js

@@ -2,7 +2,7 @@ const $ = require("jquery");
 require("babel-polyfill");
 const echarts = require("echarts");
 require("./../css/knowledgeTree.less");
-require("./../css/common.css");
+require("./../css/common.less");
 // require("ztree");
 require('./../resources/images/icon.png');
 require('./../resources/images/iconOpen.png');

src/js/participle.js

@@ -1,7 +1,7 @@
 const $ = require("jquery");
 require("babel-polyfill");
 require("./../css/participle.less");
-require("./../css/common.css");
+require("./../css/common.less");
 const { post, api } = require('./api.js');
 require('./../resources/images/empty2.png');
 require('./../resources/images/iconUp.png');
@@ -264,7 +264,7 @@ function initTxtData(data){
 }
 
 $("#infoTxt").bind("input propertychange",function(event){
-    const val = $("#infoTxt").val().trim()
+    const val = $("#infoTxt").val().trim();
     if(!val){
         $('#analy').addClass('disabled')
         $('#resultBoxInfo').html('')

src/js/qaPage.js

@@ -0,0 +1,38 @@
+require("./../css/common.less");
+require("./../css/qaPage.less");
+const { post, api } = require('./api.js');
+const $ = require("jquery");
+
+(function(){
+  $("#analy").click(function(){
+    getAnswer();
+  });
+  $("#infoTxt").bind("input propertychange",function(event){
+    const val = $("#infoTxt").val().trim();
+    if(!val){
+      $('#analy').addClass('disabled')
+      $('#resultBoxInfo').html('');
+      $('.empty').css("display","block");
+    }else{
+      $('#analy').removeClass('disabled')
+    }
+  });
+
+  function getAnswer(){
+    const qa = $("#infoTxt").val().trim();
+    if(!qa)return;
+    $('#resultBoxInfo').html(`<p class="loading">正在检索中…</p>`);
+    post(api.getAnswer, {question:qa}).then(res =>{
+      const data=res.data;
+      if(data.code==="0"){
+        const ans = data.data.answer;
+        $('#resultBoxInfo').html(ans);
+        $('.empty').css("display","none");
+      }else{
+        $('#resultBoxInfo').html('');
+        $('.empty').css("display","block");
+        $('.analying').css("display","none");
+      }
+    });
+  }
+})();

webpack.config.js

@@ -5,13 +5,14 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const webpack = require('webpack');
-const proxyHost = "http://192.168.2.121:5050";
+const proxyHost = "http://192.168.2.236:5050";
 // const proxyHost = "http://192.168.3.119:5050";
 module.exports = {
   entry: {
     index: path.resolve(__dirname, 'src/js', 'index.js'),
     knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
     participle: path.resolve(__dirname,'src/js', 'participle.js'),
+    qaPage:path.resolve(__dirname,'src/js', 'qaPage.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
   },
   output: {
@@ -25,7 +26,7 @@ module.exports = {
   },
   plugins: [// 多入口的html文件用chunks这个参数来区分
     new HtmlWebpackPlugin({
-      title: 'knowledgeGraph',
+      title: '医学知识图谱',
       template: path.resolve(__dirname, 'src/html', 'knowledgeGraph.html'),
       filename: 'knowledgeGraph.html',
       chunks: ['index', 'vendor', 'common'],
@@ -38,7 +39,7 @@ module.exports = {
       }
     }),
     new HtmlWebpackPlugin({
-        title: 'knowledgeTree',
+        title: '描述框架',
         template: path.resolve(__dirname, 'src/html', 'knowledgeTree.html'),
         filename: 'knowledgeTree.html',
         chunks: ['knowledgeTree', 'vendor', 'common'],
@@ -51,7 +52,7 @@ module.exports = {
         }
       }),
       new HtmlWebpackPlugin({
-        title: 'participle',
+        title: '电子病历信息抽取',
         template: path.resolve(__dirname, 'src/html', 'participle.html'),
         filename: 'participle.html',
         chunks: ['participle', 'vendor', 'common'],
@@ -62,7 +63,19 @@ module.exports = {
           removeComments: true, //移除HTML中的注释
           collapseWhitespace: true //删除空白符与换行符
         }
-      }),
+      }),new HtmlWebpackPlugin({
+      title: '智能问答',
+      template: path.resolve(__dirname, 'src/html', 'qaPage.html'),
+      filename: 'qaPage.html',
+      chunks: ['qaPage', 'vendor', 'common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: '[id].css'