更新样式

src/css/home.less

@@ -8,7 +8,7 @@
     height: 100%;
 
     .el-header {
-      height: 80px;
+      height: 80px !important;
       background-color: #3871B8;
       padding: 0px 50px;
       color: #FFFFFF;
@@ -29,11 +29,15 @@
 
       .user-area {
         margin-left: 84px;
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+        gap: 0px 20px;
       }
     }
 
     &>.el-container {
-      height: 100vh - 80px;
+      flex-grow: 1;
       white-space: no-wrap;
       flex-wrap: nowrap;
 
@@ -43,10 +47,10 @@
         height: 100%;
         // transition: all 10 linear;
         position: relative;
-        transition: width 0.5s linear;
-        -webkit-transition: width 0.5s linear;
-        -moz-transition: width 0.5s linear;
-        -o-transition: width 0.5s linear;
+        // transition: width 0.5s linear;
+        // -webkit-transition: width 0.5s linear;
+        // -moz-transition: width 0.5s linear;
+        // -o-transition: width 0.5s linear;
 
 
         .collapse-sign {
@@ -60,15 +64,22 @@
         .collapse-sign-open {
           width: 24px;
           height: 34px;
-          background-color: #2D97B2;
-          border-radius: 0px 5px 5px 0px;
+          // background-color: #2D97B2;
+          // border-radius: 0px 5px 5px 0px;
+
+          background-image: url(./img/toright1.png);
+          background-repeat: no-repeat;
+          background-size: cover;
         }
 
         .collapse-sign-close {
           width: 24px;
           height: 34px;
-          background: #2D97B2;
-          border-radius: 0px 5px 5px 0px;
+          // background: #2D97B2;
+          // border-radius: 0px 5px 5px 0px;
+          background-image: url(./img/toleft1.png);
+          background-repeat: no-repeat;
+          background-size: cover;
         }
 
 
@@ -76,11 +87,12 @@
         .el-menu--vertical {
           width: 100%;
 
-          // transition: width 0.15s linear !important;
-          // -webkit-transition: width 0.15s linear !important;
-          // -moz-transition: width 0.15s linear !important;
-          // -webkit-transition: width 0.15s linear !important;
-          // -o-transition: width 0.15s linear !important;
+          transition: width 0.1s linear !important;
+          -webkit-transition: width 0.1s linear !important;
+          -moz-transition: width 0.1s linear !important;
+          -webkit-transition: width 0.1s linear !important;
+          -o-transition: width 0.1s linear !important;
+
           .el-submenu__title {
             height: 72px;
             display: flex;
@@ -133,10 +145,13 @@
         .tags {
           height: 72px;
           flex: 0 0 auto;
-
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+          // font-size: 0px;
 
           .el-tabs {
-            height: 100%;
+            // height: 100%;
             display: flex;
             align-items: flex-end;
 
@@ -188,6 +203,11 @@
 
           }
 
+          .padding {
+            height: 10px;
+            background-color: #F2F4FC;
+          }
+
         }
 
         .content {
@@ -215,7 +235,7 @@
 
   // 对话框样式
   .el-dialog {
-    margin-top: 262px !important;
+    // margin-top: 262px !important;
 
     .el-dialog__header {
       border-bottom: 1px solid #D9D9D9;
@@ -256,6 +276,13 @@
       }
     }
 
+    .add-row {
+      // vertical-align: middle;
+      display: flex;
+      align-items: center;
+      gap: 0px 10px;
+    }
+
     .entityLink {
       height: 400px;
     }
@@ -431,7 +458,7 @@
         gap: 0px 20px;
         margin-bottom: 10px;
         align-items: center;
-        
+
       }
 
       .tools-2 {
@@ -456,6 +483,9 @@
           }
 
           .right {
+            display: flex;
+            flex-wrap: nowrap;
+
             span {
               margin-left: 24px;
             }
@@ -645,8 +675,28 @@
 
 .icon-close-gray {
   .icon();
-  width: 18px;
-  height: 12px;
+  // width: 18px;
+  // height: 12px;
   background-image: url("./img/图层13@2x-2.png");
-  background-size: 18px 12px;
+  // background-size: 18px 12px;
+}
+
+.icon-avatar {
+  .icon();
+  width: 32px;
+  height: 32px;
+  background-image: url("./img/avatar.png");
+}
+
+.icon-dropdown-down {
+  .icon();
+  width: 22px;
+  height: 12px;
+  vertical-align: bottom;
+  background-image: url("./img/todown.png");
+}
+
+.icon-add {
+  .icon();
+  background-image: url("./img/add.png");
 }

src/css/knowledgeMap.less

@@ -59,20 +59,22 @@
         margin: 0px;
         position: absolute;
         // border-right: none;
-        width: calc(100% - 394px);
+        width: calc(100% - 461px);
         box-sizing: border-box;
+        overflow: hidden;
 
         #main {
             // width: 796px;
             height: 100% !important;
             cursor: pointer;
             background-color: #FFFFFF;
+            overflow: hidden;
         }
 
     }
 
     .right {
-        width: 394px;
+        width: 461px;
         // float: right;
         height: 100% !important;
         position: absolute;
@@ -83,13 +85,15 @@
 
         .top {
             // position: relative;
-            width: 392px;
+            // width: 392px;
             height: 80px;
             background: rgb(238, 246, 255);
             // border: 1px #6794A8 solid;
             border-radius: 2px;
             margin: 20px 0px;
             font-size: 14px;
+            display: flex;
+            align-items: center;
 
             .select {
                 display: inline-block;
@@ -97,32 +101,51 @@
                 height: 40px;
                 background: rgba(66, 143, 220, 0.25);
                 border-radius: 4px;
-                margin: 20px 10px 10px;
+                margin: 0px 20px;
                 position: relative;
                 cursor: pointer;
 
+                &>.box {
+                    width: 112px;
+                    height: 40px;
+                    border: 1px solid #E7E7E7;
+                    display: flex;
+                    align-items: center;
+                    background-color: rgb(238, 246, 255);
+                    // overflow: hidden;
+                }
 
                 .selectedName {
                     display: inline-block;
-                    width: 92px;
+                    // width: 92px;
                     height: 40px;
                     line-height: 40px;
-                    color: #5BBBFF;
-                    position: relative;
+                    // position: relative;
                     padding: 0 10px;
+                    padding-right: 0;
+                    flex-grow: 1;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #333333;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
                 }
 
                 .iconSlide {
                     width: 13px;
-                    position: absolute;
-                    top: 16px;
-                    right: 10px;
+                    // height: 13px;
+                    margin-left: auto;
+                    margin-right: 12px;
+                    // position: absolute;
+                    // top: 16px;
+                    // right: 10px;
                 }
 
                 .selectList {
                     position: absolute;
                     display: none;
-                    width: 90px;
+                    width: 112px;
                     line-height: 30px;
                     background: #fff;
                     color: #fff;
@@ -146,6 +169,7 @@
                 display: inline-block;
                 width: 272px;
                 position: relative;
+                margin-left: 39px;
 
                 input {
                     width: 192px;
@@ -261,14 +285,24 @@
                     display: inline-block;
                     height: 42px;
                     line-height: 42px;
-                    margin: 0 20px 0 10px;
+                    margin-left: 20px;
                     font-size: 14px;
                     color: #000;
                     cursor: pointer;
+
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #333333;
+
+                    // &:last-child {
+                    //     margin-left: 0px;
+                    // }
                 }
 
                 .tab:hover {
                     color: #5A8EEE;
+                    position: relative;
                 }
 
                 .activeTab {
@@ -277,6 +311,11 @@
                     font-weight: bold;
                     border-bottom: 3px solid #5BBBFF;
                     box-sizing: border-box;
+
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #409EF1;
                 }
             }
 
@@ -297,26 +336,33 @@
             }
 
             .toggleArrow {
-                width: 11px;
-                position: absolute;
-                top: 15px;
-                right: 0px;
+                // width: 11px;
+                // position: absolute;
+                // top: 15px;
+                // right: 0px;
+
             }
 
             .toggleTab {
                 display: inline-block;
                 position: absolute;
-                font-size: 14px;
+                // font-size: 14px;
                 color: #A7CFFC;
                 line-height: 44px;
-                right: 20px;
-                top: 0;
+                // right: 20px;
+                top: 0px;
+                right: 10px;
                 cursor: pointer;
-                padding: 0 10px 0 0;
+                // padding: 0 10px 0 0;
+                // width: 100px;
             }
 
             .toggleTabTxt {
-                margin-right: 3px;
+                // margin-right: 3px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                font-size: 20px;
+                color: #333333;
             }
 
             .hideTabList {
@@ -344,16 +390,25 @@
 
             .radioItem {
                 font-size: 14px;
-                color: #000;
+                color: #333333;
                 line-height: 16px;
-                margin-right: 20px;
+                margin-right: 42px;
                 cursor: pointer;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                font-size: 20px;
+
+                &:first-child {
+                    color: #409EF1;
+                }
+
             }
 
             .iconRadio {
-                width: 14px;
+                width: 20px;
                 position: relative;
                 top: 2px;
+
             }
 
             .iconSelect {
@@ -419,6 +474,7 @@
         height: calc(100% - 60px) !important;
         padding: 0 10px 0 30px;
         position: relative;
+        font-size: 16px !important;
     }
 
     .right-aside-collapse {
@@ -427,7 +483,34 @@
         bottom: 315px;
         width: 24px;
         height: 34px;
-        background: #2D97B2;
-        border-radius: 0px 5px 5px 0px;
+        // background: #2D97B2;
+        // border-radius: 0px 5px 5px 0px;
+        background-image: url("./img/toright2.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+
+
+    }
+
+    .right-aside-collapsed {
+        position: absolute;
+        display: inline-block;
+        bottom: 315px;
+        width: 24px;
+        height: 34px;
+        background-image: url("./img/toleft2.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+
+    }
+
+    .dropdown-up {
+        display: inline-block;
+        width: 22px;
+        height: 12px;
+        background-image: url("./img/toup4.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        vertical-align: baseline;
     }
 }

src/css/knowledgeUpdate.less

@@ -211,7 +211,48 @@
       height: 100% !important;
       cursor: pointer;
       background-color: #FFFFFF;
-      // position: relative;
+      position: relative;
+    }
+
+    .legendIcon {
+      position: absolute;
+      display: none;
+      width: 34px;
+      height: 24px;
+      bottom: 50px;
+      right: 379px;
+      // border-top: 1px dotted black;
+      /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
+    }
+
+    .legendIconImg {
+      width: 34px;
+      height: 24px;
+      // border-radius: 50%;
+      // position: absolute;
+      // right: 0px;
+      // top: 0px;
+      cursor: pointer;
+    }
+
+    .legendIconImg {
+      background: url('./img/缩4@2x-2.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendIconImg:hover {
+      background: url('./img/缩4@2x-2.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendSlideUp {
+      background: url('./img/缩4@2x-1.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendSlideUp:hover {
+      background: url('./img/缩4@2x-1.png') no-repeat;
+      background-size: 34px 24px;
     }
 
 
@@ -219,14 +260,14 @@
   }
 
   .right {
-    width: 369px;
+    width: 359px;
     // float: right;
     height: 100% !important;
     // position: absolute;
     right: 0px;
     border-left: 1px dotted #000;
     box-sizing: border-box;
-    overflow: hidden;
+    overflow-y: auto;
     padding-top: 19px;
 
     .content-right-box {
@@ -423,4 +464,4 @@
   background-image: url("./img/组105@2x.png");
   // border: 1px solid #5BBBFF;
   // box-sizing: content-box;
-}
+}

src/html/home.html

@@ -35,12 +35,15 @@
         <div class="logo">知识图谱系统logo</div>
         <div class="time">{{nowDate}}</div>
         <div class="user-area">
+          <span class="icon-avatar"></span>
           <span class="user-identity">邵逸夫管理员</span>
+          <span class="icon-dropdown-down"></span>
         </div>
       </el-header>
       <el-container>
-        <el-aside :width="isCollapse?'69px':'288px'">
-          <div class="collapse-sign collapse-sign-close" @click="isCollapse=!isCollapse"></div>
+        <el-aside :width="isCollapse?'69px':'268px'">
+          <div :class="isCollapse? 'collapse-sign collapse-sign-open': 'collapse-sign collapse-sign-close'"
+            @click="isCollapse=!isCollapse"></div>
           <el-menu :default-active="currentPage.id" :collapse-transition="false" :collapse="isCollapse"
             background-color="#D5E9FE" text-color="#000000" active-text-color="#FFFFFF">
             <el-submenu v-for="menu in menuData" :key="menu.id" :index="menu.id">
@@ -66,6 +69,7 @@
                 </span>
               </el-tab-pane>
             </el-tabs>
+            <div class="padding"></div>
           </div>
           <div class="content">
             <iframe ref="iframe" v-show="currentPage.url" :src="currentPage.url" frameborder="0"></iframe>
@@ -82,7 +86,7 @@
           <div class="tools">
             <span>导出模板</span>
             <span>导入</span>
-            <span @click="addEntityAddRow">新增行</span>
+            <span @click="addEntityAddRow" class="add-row add-row"><span class="icon-add"></span>新增行</span>
           </div>
           <div class="content">
             <el-table border :data="tableData" style="width: 100%" height="230">
@@ -174,7 +178,7 @@
           <div class="tools">
             <span>导出模板</span>
             <span>导入</span>
-            <span @click="addRelationshipDropdownAddRow">新增行</span>
+            <span @click="addRelationshipDropdownAddRow" class="add-row"><span class="icon-add"></span>新增行</span>
           </div>
           <div class="content">
             <el-table border :data="addRelationshipDropdown" style="width: 100%" height="230">
@@ -251,7 +255,7 @@
               <div class="right">
                 <span class="blue">导出模板</span>
                 <span class="blue">导出</span>
-                <span @click="addPropertyDropdownAddRow()" class="blue">新增行</span>
+                <span @click="addPropertyDropdownAddRow()" class="blue add-row"><span class="icon-add"></span>新增行</span>
               </div>
             </div>
             <div class="tools-2-down"> <span>请添加实体：<span class="blue">{{addPropertyDropdown.name}}</span> 相关的属性值</span>
@@ -290,7 +294,7 @@
                 <span>实体名称：{{addProperty.name}}</span>
               </div>
               <div class="right">
-                <span @click="addPropertyAddRow()" class="blue">新增行</span>
+                <span @click="addPropertyAddRow()" class="blue add-row"><span class="icon-add"></span>新增行</span>
               </div>
             </div>
             <div class="tools-2-down"></div>
@@ -1412,7 +1416,7 @@
         handler(newVal, oldVal) {
           setTimeout(() => {
             this.sendChildWindowMessage("left-collapse", this.isCollapse)
-          }, 500)
+          }, 200)
         }
       },
       "searchInp": {

src/html/knowledgeGraph.html

@@ -37,8 +37,11 @@
 			<div class="right">
 				<div class="top">
 					<div class="select">
-						<span class="selectedName">疾病</span>
-						<img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+						<div class="box">
+							<span class="selectedName">疾病</span>
+							<img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+						</div>
+
 						<ul class="selectList">
 							<li class="selectItem" title="疾病" data-id="疾病">疾病</li>
 							<li class="selectItem" title="药品" data-id="药品通用名">药品</li>
@@ -67,7 +70,7 @@
 						</div>
 						<div class="toggleTab">
 							<span class="toggleTabTxt">展开</span>
-							<img class="toggleArrow" src="./images/iconDown.png" alt="">
+							<span class="toggleArrow dropdown-up" style="transform: rotate(180deg);">
 						</div>
 						<div class="hideTabList">
 							<!-- <span  class="tab lab" data-id="实验室检查">实验室检查</span>

src/html/knowledgeUpdate.html

@@ -116,6 +116,9 @@
     <div class="content clearfix">
       <div class="left">
         <div id="main" class="mapWrapper"></div>
+        <div id="dragMe" class="legendIcon">
+          <div class="legendIconImg"></div>
+        </div>
       </div>
       <div class="right">
         <div class="content-right-box basic-information">

src/js/graphMap.js

@@ -117,20 +117,21 @@ function drawGraph(data, resultShowId) {
             icon: 'circle',
             width: '100%',
             left: 0,
+            // left: '10%',
+            // right: '10%',
+            // bottom: '10%',
             // right: 0,
             verticalAlign: 'top',
-            color: '#fff',
-            borderColor: '#000',
-            // borderTopWidth: 1,  // 上边框宽度
+            color: '#ccc',
+            // borderColor: '#000',
             // borderWidth: 1,
             // borderStyle: 'dotted',  // 设置边框样式为虚线
-            padding: [40, 20, 20, 20],
-            backgroundColor: "#FFF",
+            padding: [20, 2000, 20, 20],
+            backgroundColor: "#ccc",
             margin: [0, 0, 0, 0],
             selected: {},
             textStyle: {
                 color: '#000',
-
             },
             // orient: 'vertical',
             data: legends.slice(0, showLegendNum).map(function (a) {
@@ -386,6 +387,7 @@ const rightMsgRender = function (data) {
     const mainId = data.nodeId
     // const mainIndex = data.name
     let entity_node_str = ""
+    console.log("getOption", window.graphMap.getOption())
     window.graphMapUpdatedData.node.forEach(node => {
         if (node.nodeId === mainId && node.symbol === "diamond") {
             window.graphMapUpdatedData.links.forEach(link => {
@@ -808,8 +810,8 @@ function renderTab(data) {
     }
     hidetabStr += `<div class="toggleTab">
     <span class="toggleTabTxt">收起</span>
-    <img class="toggleArrow" style="transform: rotate(180deg);top:18px;" src="./images/iconDown.png" alt="">
-</div>`
+    <span class="toggleArrow dropdown-up" style="bottom:0px;"  alt=""/>
+    </div>`
     // console.log('showtabStr',showtabStr)
 
     $('.showTabList').html(showtabStr)

src/js/homeMini.js

@@ -0,0 +1,2 @@
+require("../css/home.less")
+require("./../css/common.less");

src/js/index.js

@@ -102,6 +102,8 @@ $("#searchInp").bind("input propertychange", function (event) {
 
 //切换条目
 $('.radioItem').click(function (e) {
+    $('.radioItem').css('color', '#333333')
+    $(this).css("color", '#409EF1')
     const initDiag = disease || "急性胰腺炎"
     const type = $(this).attr('data-type')
     // $(this).children('img').attr('src')
@@ -213,15 +215,15 @@ $('html').click(function () {
 let toggleTabHtml = ""
 $(".right-aside-collapse").on("click", function () {
     isRightCollapse = !isRightCollapse
-
     if (isRightCollapse) {
+        $(this).attr('class', 'right-aside-collapsed')
         toggleTabHtml = $("#tabList > .toggleTab").html()
         $("#tabList > .toggleTab").empty()
         // document.querySelector('.toggleTab').style.display = 'none';
-        $(".right").animate({ "width": '110px' }, function () {
+        $(".right").animate({ "width": '150px' }, function () {
         })
         const contentWidth = $(".content").width()
-        const leftWidth = (contentWidth - 110).toString() + 'px'
+        const leftWidth = (contentWidth - 150).toString() + 'px'
         // console.log("contentWidth", leftWidth);
         $(".content .left").animate({ 'width': leftWidth, }, function () {
             window.graphMap.resize()
@@ -229,10 +231,11 @@ $(".right-aside-collapse").on("click", function () {
         })
 
     } else {
+        $(this).attr('class', 'right-aside-collapse')
         $("#tabList > .toggleTab").html(toggleTabHtml)
-        $(".right").animate({ "width": '394px' })
+        $(".right").animate({ "width": '461px' })
         const contentWidth = $(".content").width()
-        const leftWidth = (contentWidth - 394).toString() + 'px'
+        const leftWidth = (contentWidth - 461).toString() + 'px'
         $(".content .left").animate({ 'width': leftWidth, }, function () {
             window.graphMap.resize()
             // console.log("graphMap", window.graphMap)
@@ -247,11 +250,11 @@ window.addEventListener("message", function (event) {
         console.log("contentWidth", contentWidth)
         let leftWidth = 0
         if (isRightCollapse) {
-            leftWidth = (contentWidth - 110).toString() + 'px'
+            leftWidth = (contentWidth - 150).toString() + 'px'
             $(".content .left").css('width', leftWidth)
 
         } else {
-            leftWidth = (contentWidth - 394).toString() + 'px'
+            leftWidth = (contentWidth - 461).toString() + 'px'
             $(".content .left").css('width', leftWidth)
 
         }

src/js/knowledgeUpdate.js

@@ -36,7 +36,7 @@ window.knowledgeMapData = {}
 
 window.knowledgeMapSetting = {
   operation: "edit", //操作类型,修改
-  showLegend: false,
+  showLegend: true,
   draggable: false,
 }
 

webpack.config.js

@@ -20,6 +20,7 @@ module.exports = {
     login: path.resolve(__dirname, 'src/js', 'login.js'),
     home: path.resolve(__dirname, 'src/js', 'home.js'),
     knowledgeUpdate: path.resolve(__dirname, 'src/js', 'knowledgeUpdate.js'),
+    homeMini: path.resolve(__dirname, 'src/js', 'homeMini.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
   },
   output: {
@@ -45,6 +46,19 @@ module.exports = {
         collapseWhitespace: true //删除空白符与换行符
       }
     }),
+    new HtmlWebpackPlugin({
+      title: '简化更新',
+      template: path.resolve(__dirname, 'src/html', 'homeMini.html'),
+      filename: 'homeMini.html',
+      chunks: ['homeMini', 'vendor', 'common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
     new HtmlWebpackPlugin({
       title: '登录界面',
       template: path.resolve(__dirname, 'src/html', 'login.html'),