feature(中心介绍)：平台简介、平台人员联调

package.json

@@ -8,11 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "await-to-js": "^3.0.0",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "element-ui": "^2.12.0",
     "js-cookie": "2.2.0",
     "sass": "^1.52.2",
+    "sm-crypto": "^0.3.13",
     "video.js": "^7.6.0",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^3.1.3",

public/config.js

@@ -1,44 +1,17 @@
+/*
+ * @Author: wanglj wanglijie@dashoo.cn
+ * @Date: 2025-01-09 14:34:22
+ * @LastEditors: wanglj
+ * @LastEditTime: 2025-01-10 09:14:02
+ * @Description: file content
+ * @FilePath: \labsop_website\public\config.js
+ */
 const $GlobalConfig = {
-  // 系统信息
-  APP_NAME: '生物样本库',
-  APP_VERSION: 'V5.1.0',
-  // 附件文件上传服务器
-  VUE_APP_PROTOCOL: 'http://',
-  //  Web API
-
-  VUE_APP_API: 'http://192.168.0.67:8199/api/',
-  // VUE_APP_API: "http://192.168.0.219:15001/api/",
-  // VUE_APP_API: 'http://192.168.0.84:8199/api/',
-  // 附件文件上传服务器
-  VUE_APP_UPLOADFILE: 'http://192.168.0.219:9333/dir/assign',
-  VUE_APP_UPLOADFILE_NEW: '/weedfs/upload',
-  // 整盘扫描地址
-  VUE_APP_SCANAPI: 'http://localhost:23412/api/',
-  //图片地址
-  VUE_APP_IMG_API: 'http://192.168.0.219:15001',
-  // 标签打印后台的url   -----这个url 不需要http://   切记
-  VUE_APP_PRINTURL: '192.168.0.219:15001/api/print',
-
-  // 打印文件上传地址   --  20220730 新增
-  VUE_APP_IMGSERVERHOS: 'http://192.168.0.219:24001',
-  //  excel 上传本地服务器地址
-  // VUE_APP_EXCEL_API: "http://192.168.0.219:10002/api/uoload/uploadfile",
-  VUE_APP_EXCEL_API: 'http://192.168.0.67:8199/api/uoload/uploadfile',
   VUE_APP_TENANT: 'biobankV4dev',
-  VUE_APP_CLI_BABEL_TRANSPILE_MODULES: false, //路由懒加载
-  VUE_APP_MicroSrvProxy_API: 'http://192.168.0.67:9981/',
-  // VUE_APP_MicroSrvProxy_API: 'http://192.168.0.67:9981/',
-  // VUE_APP_MicroSrvProxy_API1: 'http://192.168.0.67:9981/',
+  VUE_APP_MicroSrvProxy_API: 'http://192.168.0.219:9983/',
   // 登录验证微服务名称
-  VUE_APP_AdminPath: 'dashoo.admin-2.2.1-dev',
-  VUE_APP_SETTING_PATH: 'dashoo.biobank.biobank_setting-0.0.1',
-  VUE_APP_SAMPLE_PATH: 'dashoo.biobank.biobank_sample-01',
-  VUE_AUTO_PATH: 'dashoo.biobank.biobank_automation_v4_dev',
-  VUE_APP_QUALITY_PATH: 'dashoo.biobank.biobank.qa_v4_dev',
-  VUE_APP_REPORT_PATH: 'dashoo.biobank.biobank_report_v4_dev',
-  VUE_APP_PAYMENT_PATH: 'dashoo.biobank.biobank.payment_v4_dev',
-  VUE_HisLis: 'dashoo.biobank.biobank_interface_v4_dev',
-  GPY_TYPE: 'hw',
+  VUE_APP_AdminPath: 'dashoo.labsop.admin',
+  VUE_APP_SETTING_PATH: 'dashoo.labsop.finance-zzh',
   // 租户码
-  VUE_APP_TENANT: 'biobankV4dev'
+  VUE_APP_TENANT: 'default '
 }

src/App.vue

@@ -21,7 +21,6 @@
               <el-menu-item index="2-2">中心平台</el-menu-item>
               <el-menu-item index="2-3">技术服务</el-menu-item>
             </el-submenu>
-            <el-menu-item index="/appointment">预约管理</el-menu-item>
             <el-menu-item index="/product">教育培训</el-menu-item>
             <el-menu-item index="/case">资料下载</el-menu-item>
             <el-menu-item index="/download">联系我们</el-menu-item>
@@ -37,17 +36,13 @@
                      size="mini"
                      color="#386AFE"
                      @click="onRegister">个人中心</el-button>
-          <el-dropdown>
-            <span class="el-dropdown-link">
+          <el-dropdown class="ml12" size="mini">
+            <span class="flex flex-center">
               <img src="./assets/img/user-avatar.png" />
               <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>黄金糕</el-dropdown-item>
-              <el-dropdown-item>狮子头</el-dropdown-item>
-              <el-dropdown-item>螺蛳粉</el-dropdown-item>
-              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+              <el-dropdown-item>注销</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -156,6 +151,10 @@ body {
       line-height: 60px;
     }
   }
+  .user {
+    display: flex;
+    align-items: center;
+  }
 }
 .el-main {
   padding: 0 !important;

src/assets/styles/index.scss

@@ -42,7 +42,28 @@
     padding-left: #{$i}px !important;
   }
 }
-
+.el-menu.el-menu--popup {
+  padding: 4px 12px;
+  border-radius: 4px;
+  .el-menu-item {
+    font-weight: 400;
+    font-size: 16px;
+    color: #323232;
+  }
+}
+.el-card {
+  border-radius: 8px !important;
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    h4 {
+      font-weight: bold;
+      font-size: 18px;
+      color: #2c405e;
+    }
+  }
+}
 .common-container {
   padding: 20px 0 40px;
   background-color: #F8F9FD;

src/components/RightContent.vue

@@ -2,16 +2,16 @@
  * @Author: wanglj wanglijie@dashoo.cn
  * @Date: 2025-01-09 10:52:48
  * @LastEditors: wanglj
- * @LastEditTime: 2025-01-09 14:07:06
+ * @LastEditTime: 2025-01-09 19:55:04
  * @Description: file content
- * @FilePath: \Shkjem-master\src\components\RightContent.vue
+ * @FilePath: \labsop_website\src\components\RightContent.vue
 -->
 <template>
   <el-card class="right-content">
     <div slot="header"
          class="header">
       <h4>{{ selectTab.label }}</h4>
-      <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb separator-class="el-icon-d-arrow-right">
         <el-breadcrumb-item v-for="(item, index) in breadList"
                             :key="index"
                             :to="item.path ? { path: item.path } : null">{{ item.name }} </el-breadcrumb-item>
@@ -24,7 +24,7 @@
             :key="index">
           <div>
             <img src=""
-                 alt="">
+                 alt="" />
             {{ item.title }}
           </div>
           <span>{{ item.time }}</span>
@@ -38,26 +38,41 @@
       </el-pagination>
     </div>
     <div class="article"
-         v-else>
-      <h4>{{ article.title }}</h4>
+         v-else-if="selectTab.type == 'intro'">
+      <h4>{{ article.centerName }}</h4>
       <div class="snd-title">
         <p>
-          <strong>发布人：</strong><span>{{ article.createUser }}</span>
+          <strong>发布人：</strong><span>{{ article.updatedName }}</span>
         </p>
         <p>
-          <strong>发布时间：</strong><span>{{ article.createTime }}</span>
+          <strong>发布时间：</strong><span>{{ article.updatedTime }}</span>
         </p>
         <p>
-          <strong>点击量：</strong><span>{{ article.clickCount }}</span>
+          <strong>点击量：</strong><span>{{ article.clickNum }}</span>
         </p>
       </div>
+      <el-divider class="mt6"></el-divider>
       <div class="text"
-           v-html="article.content"></div>
+           v-html="article.centerDesc"></div>
+    </div>
+    <div class="article"
+         v-else-if="selectTab.type == 'staff'">
+      <h4>{{ article.staffName }}</h4>
+      <div class="text"
+           v-html="article.staffDesc"></div>
     </div>
   </el-card>
 </template>
 
 <script>
+import to from "await-to-js";
+import {
+  getCenterIntroduction,
+  viewCenterIntroduction,
+  getCenterStaff,
+  viewCenterStaff,
+  getCenterPlatformList
+} from "@/api/introduce";
 export default {
   name: "RightContent",
   props: {
@@ -82,22 +97,42 @@ export default {
       pageOptions: {
         pageSize: 10,
         pageNum: 1,
-        total: 100
+        total: 100,
       },
-      list: [
-        {
-          title: "科研实验室管理工作例会制度",
-          time: "2024-04-14",
-        },
-        {
-          title: "科研实验室管理工作例会制度",
-          time: "2024-04-14",
-        },
-      ],
+      list: [],
     };
   },
+  watch: {
+    selectTab() {
+      this.init();
+    },
+  },
   methods: {
-    init() {},
+    async init() {
+      if (this.selectTab.type == "intro") this.getIntro();
+      else if (this.selectTab.type == "staff") this.getStaff();
+      else if (this.selectTab.type == "institution") this.getInstitution();
+    },
+    // 获取平台简介
+    async getIntro() {
+      const [err, res] = await to(getCenterIntroduction());
+      if (err) return;
+      this.article = res.data;
+      viewCenterIntroduction();
+    },
+    // 获取人员
+    async getStaff() {
+      const [err, res] = await to(getCenterStaff());
+      if (err) return;
+      this.article = res.data;
+      viewCenterStaff();
+    },
+    // 获取规章制度
+    async getInstitution() {
+      const [err, res] = await to(getCenterPlatformList());
+      if (err) return;
+      this.list = res.data;
+    }
   },
 };
 </script>

src/views/Home.vue

@@ -1,10 +1,65 @@
 <template>
-  <div class="home" v-loading="loading">
-    <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
+  <div class="home"
+       v-loading="loading">
+    <swiper id="swiperBox"
+            v-bind:options="swiperOption"
+            ref="mySwiper">
       <swiper-slide class="swiper-slide slide-one"></swiper-slide>
       <swiper-slide class="swiper-slide slide-two"></swiper-slide>
       <swiper-slide class="swiper-slide slide-three"></swiper-slide>
     </swiper>
+    <div class="common-container">
+      <el-container>
+        <header>
+          <ul>
+            <li>
+              <img src=""
+                   alt="">
+              <div>
+                <p>1280</p>
+                <span>仪器总数</span>
+              </div>
+            </li>
+             <li>
+              <img src=""
+                   alt="">
+              <div>
+                <p>1280</p>
+                <span>仪器总数</span>
+              </div>
+            </li>
+             <li>
+              <img src=""
+                   alt="">
+              <div>
+                <p>1280</p>
+                <span>仪器总数</span>
+              </div>
+            </li>
+          </ul>
+        </header>
+        <div class="flex mt24">
+          <el-card class="flex-6">
+            <div slot="header" class="header">
+              <h4>通知公告</h4>
+              <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
+            </div>
+          </el-card>
+          <el-card class="flex-4 ml24">
+            <div slot="header" class="header">
+              <h4>卡片名称</h4>
+              <el-button style="float: right; padding: 3px 0" type="text">cha</el-button>
+            </div>
+          </el-card>
+        </div>
+        <el-card class="mt24">
+          <div slot="header" class="header">
+            <h4>卡片名称</h4>
+            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+          </div>
+        </el-card>
+      </el-container>
+    </div>
   </div>
 </template>
  
@@ -14,7 +69,7 @@ export default {
   name: "HelloWorld",
   components: {
     swiper,
-    swiperSlide
+    swiperSlide,
   },
   data() {
     return {
@@ -53,8 +108,8 @@ export default {
           //     this.list = this.list.concat(newList);
           //   }
           // }
-        }
-      }
+        },
+      },
     };
   },
   created() {},
@@ -62,13 +117,13 @@ export default {
   computed: {
     swiper() {
       return this.$refs.mySwiper.swiper;
-    }
+    },
   },
   mounted() {
     this.$http
       .all([
         this.$http.get("Cases/GetCasesAll"),
-        this.$http.get(`News?type=1&num=3`)
+        this.$http.get(`News?type=1&num=3`),
       ])
       .then(
         this.$http.spread((responseCases, responseNews) => {
@@ -77,116 +132,11 @@ export default {
           this.loading = false;
         })
       );
-  }
+  },
 };
 </script>
  
 <style lang="scss" scoped>
-/* .el-header {
-  position: absolute;
-} */
-.swiper-slide {
-  font-size: 24px;
-  // text-align: center;
-  // line-height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-
-  .page {
-    text-align: center;
-    height: 100%;
-    overflow: hidden;
-    h3,
-    p {
-      font-size: 40px;
-      font-weight: 400;
-      color: #fff;
-    }
-  }
-
-  .slogan {
-    text-align: center;
-    font-size: 50px;
-    color: #fff;
-    padding: 30px 0;
-  }
-}
-//经典案例
-.case-item {
-  width: 1100px;
-  height: 500px;
-  overflow: hidden;
-  margin: 0 auto;
-  margin-top: 30px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  li {
-    width: 330px;
-    height: 250px;
-    list-style: none;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    background-origin: content-box;
-    margin: 5px;
-    position: relative;
-    overflow: hidden;
-
-    &:hover {
-      .case-item-hover {
-        opacity: 1;
-        transition: all 0.4s ease-in-out;
-      }
-    }
-  }
-}
-//经典案例hover
-.case-item-hover {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  overflow: hidden;
-  background-color: rgba(225, 56, 52, 0.7);
-
-  .hover-title {
-    height: 50px;
-    color: #fff;
-    font-size: 18px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 400;
-    margin-top: 20px;
-  }
-  .bottom {
-    border-bottom: 1px solid #fff;
-    width: 60px;
-    margin: 0 auto;
-  }
-  .more {
-    width: 90px;
-    padding: 5px 5px;
-    margin: 0 auto;
-    margin-top: 100px;
-    border: 2px solid #fff;
-    span {
-      color: #fff;
-      font-size: 20px;
-    }
-  }
-}
-// .swiper-slide:nth-child(2n) {
-//   background: skyblue;
-// }
-// .swiper-slide:nth-child(2n-1) {
-//   background: seashell;
-// }
 .slide-one {
   height: 320px;
   background: url(../assets/img/home-banner.png) no-repeat center;
@@ -202,80 +152,50 @@ export default {
   background: url(../assets/img/home-banner.png) no-repeat center;
   background-size: cover;
 }
-//最新资讯
-.news-content {
-  width: 1240px;
-  margin: 0 auto;
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-
-  &-item {
-    width: 400px;
-    display: flex;
+.common-container {
+  padding: 0;
+  .el-container {
     flex-direction: column;
-
-    .item-img {
-      width: 360px;
-      height: 230px;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      background-origin: content-box;
-      margin: 0 auto;
-    }
-    .el-divider {
-      background-color: #fff;
-      height: 3px;
-      .el-divider__text {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        padding: 0px;
-        color: #fff;
+  }
+  header {
+    height: 100px;
+    width: 1200px;
+    margin-top: -50px;
+    background: #ffffff;
+    box-shadow: 0px 3px 12px 1px rgba(1, 64, 100, 0.16);
+    border-radius: 16px;
+    position: relative;
+    z-index: 999;
+    ul {
+      display: flex;
+      align-items: center;
+      height: 100px;
+      li {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        > div {
+          p {
+            font-weight: bold;
+            font-size: 32px;
+            color: #323232;
+          }
+          span {
+            font-weight: 400;
+            font-size: 14px;
+            color: #323232;
+          }
+        }
       }
     }
-    .item-content {
-      width: 360px;
-      height: 230px;
-      margin: 0 auto;
-      //border: 1px solid paleturquoise;
-      h3 {
-        font-size: 22px;
-        height: 30px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      p {
-        font-size: 15px;
-        height: 80px;
-        overflow: hidden;
-        margin: 10px 0;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        -webkit-box-orient: vertical;
-        white-space: normal !important;
-        word-wrap: break-word;
-      }
-      span {
-        display: block;
-        font-size: 14px;
-        text-align: end;
-      }
-      h3,
-      p,
-      span {
-        color: #fff;
-      }
+  }
+  .flex {
+    .flex-6 {
+      flex: 6;
+    }
+    .flex-4 {
+      flex: 4;
     }
   }
 }
-.order {
-  order: -1;
-}
-.order-img {
-  order: 1;
-}
 </style>

src/views/Introduce.vue

@@ -28,11 +28,11 @@ export default {
       options: [
         {
           label: '平台简介',
-          type: ''
+          type: 'intro'
         },
         {
           label: '平台人员',
-          type: ''
+          type: 'staff'
         },
         {
           label: '规章制度',

yarn.lock

@@ -1684,6 +1684,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+await-to-js@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/await-to-js/-/await-to-js-3.0.0.tgz#70929994185616f4675a91af6167eb61cc92868f"
+  integrity sha512-zJAaP9zxTcvTHRlejau3ZOY4V7SRpiByf3/dxx2uyKxxor19tpmpV2QRsTKikckwhaPmr2dVpxxMr7jOCYVp5g==
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.npmmirror.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -5463,6 +5468,11 @@ js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.9.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsbn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
+  integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -8116,6 +8126,13 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+sm-crypto@^0.3.13:
+  version "0.3.13"
+  resolved "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.13.tgz#9615d67f9f2280970c353122e5901ae87d64899a"
+  integrity sha512-ztNF+pZq6viCPMA1A6KKu3bgpkmYti5avykRHbcFIdSipFdkVmfUw2CnpM2kBJyppIalqvczLNM3wR8OQ0pT5w==
+  dependencies:
+    jsbn "^1.1.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"