diff --git a/.env.development b/.env.development
index 743073c..fc5c371 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 检查员管理系统
+VUE_APP_TITLE = 产品档案管理系统
 
 # 开发环境配置
 ENV = 'development'
diff --git a/.env.production b/.env.production
index e5c0a62..c6adc7d 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 检查员管理系统
+VUE_APP_TITLE = 产品档案管理系统
 
 # 生产环境配置
 ENV = 'production'
diff --git a/.env.staging b/.env.staging
index 1505517..b2583a0 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 检查员管理系统
+VUE_APP_TITLE = 产品档案管理系统
 
 NODE_ENV = production
 
diff --git a/src/assets/images/home/baocun@2x.png b/src/assets/images/home/baocun@2x.png
new file mode 100644
index 0000000..5f62a0a
Binary files /dev/null and b/src/assets/images/home/baocun@2x.png differ
diff --git a/src/assets/images/home/chongzhi@2x.png b/src/assets/images/home/chongzhi@2x.png
new file mode 100644
index 0000000..f6658d4
Binary files /dev/null and b/src/assets/images/home/chongzhi@2x.png differ
diff --git a/src/assets/images/home/download.png b/src/assets/images/home/download.png
new file mode 100644
index 0000000..03da685
Binary files /dev/null and b/src/assets/images/home/download.png differ
diff --git a/src/assets/images/home/edit@2x.png b/src/assets/images/home/edit@2x.png
new file mode 100644
index 0000000..d09c052
Binary files /dev/null and b/src/assets/images/home/edit@2x.png differ
diff --git a/src/assets/images/home/excel.png b/src/assets/images/home/excel.png
new file mode 100644
index 0000000..5532cab
Binary files /dev/null and b/src/assets/images/home/excel.png differ
diff --git a/src/assets/images/home/img.png b/src/assets/images/home/img.png
new file mode 100644
index 0000000..0810350
Binary files /dev/null and b/src/assets/images/home/img.png differ
diff --git a/src/assets/images/home/pdf.png b/src/assets/images/home/pdf.png
new file mode 100644
index 0000000..af6bc00
Binary files /dev/null and b/src/assets/images/home/pdf.png differ
diff --git a/src/assets/images/home/world.png b/src/assets/images/home/world.png
new file mode 100644
index 0000000..86ce9bd
Binary files /dev/null and b/src/assets/images/home/world.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4f5cfcd..9ef0db6 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -6,6 +6,7 @@
 @import "./btn.scss";
 @import "./leaflet.scss";
 @import "./font.css";
+@import "./utils.scss";
 
 body {
   height: 100%;
diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
new file mode 100644
index 0000000..4fdc498
--- /dev/null
+++ b/src/assets/styles/utils.scss
@@ -0,0 +1,20 @@
+/** 
+解决大屏可视化适配问题
+设计稿：1920（宽度），1080（高度）
+*/
+
+// @function px2vw($px) {
+//     @return $px/1920*100vw;
+// }  
+
+// @function px2vh($px) { 
+//     @return $px/1920*100vh;
+// }  
+
+@function vw($px) {
+    @return $px/1920*100vw;
+}  
+
+@function vh($px) {
+    @return $px/1080*100vh;
+}  
\ No newline at end of file
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 55f766e..68e2135 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,4 +1,4 @@
-<template>
+<template>    <!-- TODO:标签页 -->
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane
       ref="scrollPane"
diff --git a/src/router/index.js b/src/router/index.js
index 21abf03..2a89513 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,67 +87,76 @@ export const constantRoutes = [
     children: [
       {
         path: "/netWorkStat",
-        name: "检查员统计",
+        name: "产品档案",
         icon: require("@/assets/images/tree1.svg"),
         component: () => import("@/views/netWorkStat/index"),
-        meta: { title: "检查员统计", icon: "netWork", affix: true },
-      },
-      {
-        path: "/censor",
-        name: "全局检查员信息",
-        icon: require("@/assets/images/tree2.svg"),
-        component: () => import("@/views/censor/index"),
-        meta: { title: "全局检查员信息", icon: "netWork" },
-      },
-      {
-        path: "/statistics",
-        name: "培训情况统计",
-        icon: require("@/assets/images/tree3.svg"),
-        component: () => import("@/views/statistics/index"),
-        meta: { title: "培训情况统计", icon: "netWork" },
-      },
-      {
-        path: "/personalData",
-        name: "检查员个人资料",
-        icon: require("@/assets/images/tree3.svg"),
-        component: () => import("@/views/personalData/index"),
-        meta: { title: "检查员个人资料", icon: "netWork" },
-      },
-      {
-        path: "/changePassword",
-        name: "修改密码",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/changePassword/index"),
-        meta: { title: "修改密码", icon: "netWork" },
-      },
-      {
-        path: "/changePassword",
-        name: "行政审批",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/changePassword/index"),
-        meta: { title: "行政审批", icon: "netWork" },
-      },
-      {
-        path: "/changePassword",
-        name: "企业档案",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/changePassword/index"),
-        meta: { title: "企业档案", icon: "netWork" },
-      },
-      {
-        path: "/changePassword",
-        name: "产品档案",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/changePassword/index"),
-        meta: { title: "产品档案", icon: "netWork" },
-      },
-      {
-        path: "/changePassword",
-        name: "依法注销",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/changePassword/index"),
-        meta: { title: "依法注销", icon: "netWork" },
+        meta: { title: "产品档案", icon: "netWork", affix: true },
+        children:[
+          {
+            path: "/drugFile",
+            name: "药品档案",
+            icon: require("@/assets/images/tree2.svg"),
+            component: () => import("@/views/drugFile/index"),
+            meta: { title: "产品档案", icon: "netWork", affix: true },
+          }
+        ]
       },
+      // {
+      //   path: "/censor",
+      //   name: "全局检查员信息",
+      //   icon: require("@/assets/images/tree2.svg"),
+      //   component: () => import("@/views/censor/index"),
+      //   meta: { title: "全局检查员信息", icon: "netWork" },
+      // },
+      // {
+      //   path: "/statistics",
+      //   name: "培训情况统计",
+      //   icon: require("@/assets/images/tree3.svg"),
+      //   component: () => import("@/views/statistics/index"),
+      //   meta: { title: "培训情况统计", icon: "netWork" },
+      // },
+      // {
+      //   path: "/personalData",
+      //   name: "检查员个人资料",
+      //   icon: require("@/assets/images/tree3.svg"),
+      //   component: () => import("@/views/personalData/index"),
+      //   meta: { title: "检查员个人资料", icon: "netWork" },
+      // },
+      // {
+      //   path: "/changePassword",
+      //   name: "修改密码",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/changePassword/index"),
+      //   meta: { title: "修改密码", icon: "netWork" },
+      // },
+      // {
+      //   path: "/changePassword",
+      //   name: "行政审批",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/changePassword/index"),
+      //   meta: { title: "行政审批", icon: "netWork" },
+      // },
+      // {
+      //   path: "/changePassword",
+      //   name: "企业档案",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/changePassword/index"),
+      //   meta: { title: "企业档案", icon: "netWork" },
+      // },
+      // {
+      //   path: "/changePassword",
+      //   name: "产品档案",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/changePassword/index"),
+      //   meta: { title: "产品档案", icon: "netWork" },
+      // },
+      // {
+      //   path: "/changePassword",
+      //   name: "依法注销",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/changePassword/index"),
+      //   meta: { title: "依法注销", icon: "netWork" },
+      // },
     ],
   },
 ];
diff --git a/src/views/components/blockHeader/index.vue b/src/views/components/blockHeader/index.vue
new file mode 100644
index 0000000..224a8c1
--- /dev/null
+++ b/src/views/components/blockHeader/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="blockHeader">
+    <div class="header--title">
+      <div class="title--left">
+        <div class="line"></div>
+        <div class="title">{{ title }}</div>
+      </div>
+      <div class="title--right" v-if="edit">
+        <div class="anniu--btn--left">
+          <el-button type="primary" plain size="mini" class="informant-btn" @click="sendEdit(0)">
+            <img :src=" clickEdit ? require('@/assets/images/home/chongzhi@2x.png') :require('@/assets/images/home/edit@2x.png')" alt="" />
+            {{ clickEdit ? '重置':'编辑' }}
+          </el-button>
+        </div>
+        <div class="anniu--btn--right" v-if="clickEdit">
+          <el-button type="primary" plain size="mini" class="informant-btnTwo" @click="sendEdit(1)">
+            <img src="@/assets/images/home/baocun@2x.png" alt="" />
+            保存
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="is--Slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name:'blockHeader',
+  props:{
+    title:{
+      type:String,
+      required:true
+    },
+    edit:{
+      type:Boolean,
+      default:false,
+    }
+  },
+  data() {
+    return {
+      clickEdit:false,
+    }
+  },
+  methods:{
+    sendEdit(id){
+      if(id) {
+        // 保存按钮事件
+        this.$emit('btnClick',2);
+        this.clickEdit = false;
+      } else {
+        // 重置编辑按钮
+        if(this.clickEdit) {
+          // 重置按钮事件
+          // this.clickEdit = false;
+          this.$emit('btnClick',3);
+        } else {
+          // 编辑按钮事件
+          this.clickEdit = true;
+          this.$emit('btnClick',1);
+        }
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/utils.scss";
+.blockHeader {
+  .header--title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title--left {
+      display: flex;
+      align-items: center;
+      .line {
+        width: vw(4);
+        height: vh(22);
+        background: #1E80EB;
+        margin-right: vw(9);
+      }
+      .title {
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #1E80EB;
+      }
+    }
+    .title--right {
+      display: flex;
+      align-items: center;
+
+      .anniu--btn--left {
+        ::v-deep .informant-btn {
+            width: vw(84);
+            height: vh(40);
+            background: #e4effd;
+            border: vw(1) solid #1E80EB;
+            border-radius: vw(4);
+            line-height: vh(33);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #fff;
+            img {
+              width: vw(13);
+              margin-right: vw(5);
+            }
+            span {
+              display: inline-block;
+              font-size: vw(14);
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #1E80EB;
+            }
+          }
+      }
+      .anniu--btn--right {
+        margin-left: vw(10);
+        ::v-deep .informant-btnTwo {
+          width: vw(84);
+          height: vh(40);
+          background: #e4effd;
+          border: vw(1) solid #1E80EB;
+          border-radius: vw(4);
+          line-height: vh(33);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #1E80EB;
+          img {
+            width: vw(13);
+            margin-right: vw(5);
+          }
+          span {
+            display: inline-block;
+            font-size: vw(14);
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .is--Slot {
+    margin-top: vh(24);
+  }
+}
+</style>
diff --git a/src/views/components/descriptions/index.vue b/src/views/components/descriptions/index.vue
new file mode 100644
index 0000000..ee0fab2
--- /dev/null
+++ b/src/views/components/descriptions/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="my--descriptions" :class=" changeStyle ? 'my--descriptionsChange':''">
+    <el-descriptions class="margin-top" 
+      :column="column" 
+      :size="size" 
+      :border="border" 
+      :colon="!changeStyle"
+      :labelClassName=" width ? 'descriptions-labelWidth-style': changeStyle ? 'descriptions-labelChange-style':'descriptions-label-style'" 
+      :contentClassName=" width ? 'descriptions-contentWidth-style' : changeStyle ? 'descriptions-contentChange-style':'descriptions-content-style'">
+      <el-descriptions-item v-for="item in descriptions" :key="item.id" :span="item.span ? item.span : 1 ">
+        <template slot="label">
+          {{ item.label }}
+        </template>
+        {{ item.value }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+<script>
+export default {
+  name:'myDescriptions',
+  props:{
+    descriptions:{
+      type:Array,
+      required:true
+    },
+    size:{
+      type:String,
+      default:'mini'
+    },
+    column:{
+      type:Number,
+      default:2
+    },
+    width:{
+      type:Boolean,
+      default:false,
+    },
+    border:{
+      type:Boolean,
+      default:true,
+    },
+    changeStyle:{
+      type:Boolean,
+      default:false,
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods:{
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/utils.scss";
+.my--descriptions {
+  ::v-deep .descriptions-label-style {
+    background-color: #F7FBFE;
+    font-size: vw(16);
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #6A6C6F;
+    width: vw(246);
+  }
+  ::v-deep .descriptions-labelWidth-style {
+    background-color: #F7FBFE;
+    font-size: vw(16);
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #6A6C6F;
+    width: vw(306);
+  }
+  
+  ::v-deep .descriptions-content-style {
+    font-size: vw(16);
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #292F38;
+    width: vw(610);
+  }
+  ::v-deep .descriptions-contentWidth-style {
+    font-size: vw(16);
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    width: vw(450);
+    color: #292F38;
+  }
+}
+.my--descriptionsChange {
+  background-color: #F7FAFC;
+  padding: vh(25) 0;
+  .margin-top {
+    ::v-deep .el-descriptions__body {
+      background-color: #F7FAFC;
+      .descriptions-labelChange-style {
+        background-color: #F7FAFC;
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #6A6C6F;
+        width: vw(246);
+        display: inline-block;
+        text-align: right;
+      }
+      .descriptions-contentChange-style {
+        background-color: #F7FAFC;
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #292F38;
+        width: vw(610);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/dialogTitle/index.vue b/src/views/components/dialogTitle/index.vue
new file mode 100644
index 0000000..5e3b25e
--- /dev/null
+++ b/src/views/components/dialogTitle/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="dialog-boxed"
+    :width="width"
+  >
+
+    <div class="dialog-slot">
+      <div class="closeClick">
+        <div>{{ title }}</div>
+        <i class="el-icon-close" @click="Close"></i>
+      </div>
+      <slot></slot>
+    </div>
+
+  </el-dialog>
+ 
+  
+</template>
+<script>
+import { stringify } from 'querystring';
+
+export default {
+   name:"dialogTitle",
+   data() {
+      return {
+        dialogVisible:false
+      }
+   },
+   props:{
+    title:{
+      type:String,
+      default:"title",
+    },
+    width:{
+      type:String,
+      default:'50%'
+    }
+   },
+   methods:{
+    open() {
+      this.dialogVisible = true;
+    },
+    Close() {
+      this.dialogVisible = false;
+      this.$emit('myForm')
+    },
+    tianbaoclose(){
+      this.dialogVisible = false;
+
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/utils.scss";
+
+.dialog-slot {
+  padding: 0;
+  .closeClick {
+    position: absolute;
+    top: vh(0);
+    right: vw(0);
+    padding: vw(10) vw(20);
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    background: #f8f9fa;
+    box-shadow: 0px 1px 0px 0px #dbe0e8;
+    cursor: pointer;
+    i {
+      font-family: Source Han Bolde CN;
+      font-weight: bold;
+      text-align: center;
+      padding: vh(5) 0 0 0;
+    }
+    div {
+      font-size: vw(20);
+      font-family: Source Han Bolde CN;
+      font-weight: bold;
+      color: #292f38;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/downloadFileBox/index.vue b/src/views/components/downloadFileBox/index.vue
new file mode 100644
index 0000000..524ab07
--- /dev/null
+++ b/src/views/components/downloadFileBox/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="file-box">
+    <div class="file-item" v-for="item,index in files" :key="item.id">
+      <div class="item-left">
+        <img src="@/assets/images/home/world.png" alt="">
+        <div @click="downloadFile(index)">{{ item.name }}{{ item.size }}</div>
+      </div>
+      <div class="item-right">
+        <img src="@/assets/images/home/download.png" alt="" @click="downloadFile(index)">
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      imageDate:[
+        {
+          url:require('@/assets/images/home/excel.png')
+        },
+        {
+          url:require('@/assets/images/home/img.png')
+        },
+        {
+          url:require('@/assets/images/home/world.png')
+        },
+        {
+          url:require('@/assets/images/home/pdf.png')
+        },
+      ],
+      throttle:true,
+    }
+  },
+  props:{
+    files:{
+      type:Array,
+      default:function(){
+        return []
+      },
+    }
+  },
+  methods:{
+    //图标
+    getImg(){
+      let res = this.fileName.split('.')
+      let msg =res[res.length-1]
+      console.log(msg);
+      if(msg == 'doc' || msg == 'docx'){
+         return this.imageDate[2].url
+      }else if(msg == 'xlsx' || msg == 'xls'){
+        return this.imageDate[0].url
+      }else if(msg == 'pdf'){
+        return this.imageDate[3].url
+      }else if(msg == 'png' || msg == 'jpg' ||msg == 'jpeg'){
+        return this.imageDate[1].url
+      }
+    },
+    downloadFile(index){
+      // if(this.throttle) {
+      //   this.throttle = false;
+      //   this.download(
+      //     this.files.split(",")[1].split("/").splice(4).join("/"),
+      //     this.fileName
+      //   );
+      //   setTimeout(()=>{
+      //     this.throttle = true;
+      //   },1500)
+      // }else {
+      //   this.$message({
+      //     message: "下载中请稍后",
+      //     type: "warning",
+      //   });
+      // }
+      this.$message({
+        message: "下载中请稍后",
+        type: "warning",
+      });
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/utils.scss";
+.file-box {
+  display: grid;
+  grid-column: 1fr;
+  grid-row-gap: vh(10);
+
+  .file-item {
+    padding: vh(9) vw(10);
+    width: 100%;
+    background-color: #F8F9FA;
+    border-radius: vw(2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .item-left {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: vw(21);
+        // height: vw(23);
+        margin-right: vw(10);
+      }
+      div {
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #6A6C6F;
+        cursor: pointer;
+      }
+    }
+    .item-right {
+      img {
+        width: vw(19);
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/drugFile/index.vue b/src/views/drugFile/index.vue
new file mode 100644
index 0000000..bcb0ba2
--- /dev/null
+++ b/src/views/drugFile/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="container">
+    <div class="right-content">
+      <div class="name-content">
+        <div class="drug-name">
+          <span class="name">药品通用名称 : </span>
+          <span class="tag">健母宝经典修护精华液</span>
+          <div class="info-Tag">
+            <div>10年老企</div>
+            <div>高风险企业</div>
+          </div>
+        </div>
+        <div class="close-icon">
+          <i class="el-icon-close" size="50"></i>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="left">
+      <div class="left-grids">
+        <gridsTitle title="检查人员组成" />
+        <div class="main">
+          <people />
+        </div>
+      </div>
+      <div class="left-grids middle-box">
+        <gridsTitle title="检查队伍学历分布" />
+        <div class="main">
+          <xueli />
+        </div>
+      </div>
+      <div class="left-grids">
+        <gridsTitle title="执法监督工作" />
+        <div class="main">
+          <zfdb />
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <gridsTitle title="全省数据" />
+      <div class="main">
+        <leafletMap />
+      </div>
+    </div>
+    <div class="right">
+      <div class="right-grids">
+        <gridsTitle title="检查员层级分布" />
+        <div class="main">
+          <hierarchy />
+        </div>
+      </div>
+      <div class="right-grids middle-box">
+        <gridsTitle title="检查员类别分布" />
+        <div class="main">
+          <typePie />
+        </div>
+      </div>
+      <div class="right-grids">
+        <gridsTitle title="检查员级别分布" />
+        <div class="main">
+          <LevelPie />
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import gridsTitle from "../components/gridsTitle";
+import leafletMap from "../components/home/map";
+// 左侧图表
+import people from "../components/home/leftEcharts/people.vue";
+import xueli from "../components/home/leftEcharts/xueli.vue";
+import zfdb from "../components/home/leftEcharts/zfdb.vue";
+// 右侧图表
+import hierarchy from "../components/home/rightEchats/hierarchy.vue";
+import typePie from "../components/home/rightEchats/typePie.vue";
+import LevelPie from "../components/home/rightEchats/LevelPie.vue";
+export default {
+  components: {
+    gridsTitle,
+    leafletMap,
+    people,
+    xueli,
+    zfdb,
+    hierarchy,
+    typePie,
+    LevelPie,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #f2f2f2;
+  padding: 10px;
+  & > div {
+    flex: 1;
+    height: 100%;
+  }
+  & > div:nth-child(2) {
+    flex: 2;
+    margin: 0 10px;
+  }
+  .middle {
+    height: 100%;
+    background: #ffff;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & > div {
+      width: 100%;
+      border-radius: 8px;
+      flex: 1;
+      background: #ffffff;
+    }
+  }
+  .middle-box {
+    margin: 10px;
+  }
+
+  .main {
+    height: calc(100% - 40px);
+  }
+  .right-content {
+    background-color: #fff;
+    .name-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      border-bottom: 1px solid #F2F3F5;
+      .drug-name {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
+        font-weight: bold;
+        color: #323233;
+        .name {
+
+        }
+        .tag {
+          color: #1349C5;
+          margin-left: 4px;
+        }
+        .info-Tag {
+          // margin-top: vh(9);
+          margin-left: 12px;
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          div {
+            padding: 4px 11px;
+            margin-right: 10px;
+            background: #DDEBFA;
+            border-radius: 4px;
+            color: #1E80EB;
+            &:last-child {
+              margin-right: 0;
+              background: #FDEBEB;
+              border-radius: 4px;
+              color: #E42424;
+            }
+          }
+          
+        }
+      }
+      .close-icon {
+        cursor: pointer;
+        i {
+          font-size: 25px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 4fe5c08..da678ac 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <myHeader></myHeader>
     <div class="body-container">
-      <div class="tree-menu">
+      <!-- <div class="tree-menu">
         <router-link
           tag="div"
           :to="{ path: item.path }"
@@ -15,13 +15,54 @@
             {{ item.name }}
           </div>
         </router-link>
+      </div> -->
+      <!-- 左边  -->
+      <div class="sidebar_content">
+        <div class="mycontent-left">
+          <el-menu
+            :default-active="routerIndex"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            @close="handleClose"
+            :router="true"
+          >
+            <el-submenu
+              :index="indexOne - '0'"
+              v-for="(item, indexOne) in myRouter"
+              :key="indexOne - '0'"
+            >
+              <template slot="title">
+                <img :src="item.icon" alt="" class="title_img" />
+                <span>{{ item.name }}</span>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item
+                  :index="indexOne + '-' + index"
+                  v-for="(itemb, index) in item.children"
+                  :key="index"
+                  :route="itemb.path"
+                  >{{ itemb.name }}</el-menu-item
+                >
+              </el-menu-item-group>
+            </el-submenu>
+          </el-menu>
+        </div>
+        <!-- 右边 -->
+        <div class="mycontent-content">
+          <tags-view ref="tagsView" />
+          <div class="mycontent-content-title">
+            <!-- <i class="el-icon-location-outline title-icon" />
+            <span class="title-font">{{ routerTitle }}</span> -->
+          </div>
+          <router-view></router-view>
+        </div>
       </div>
-      <div class="view-box">
+      <!-- <div class="view-box">
         <tags-view ref="tagsView" />
         <div class="child-views">
           <router-view />
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -33,12 +74,13 @@ import router from "@/router";
 export default {
   components: { myHeader, TagsView },
   data() {
-    return {};
+    return {
+      routerIndex: "0-0",
+    };
   },
   computed: {
     //获取自定义路由
     myRouter() {
-      console.log(this.$router.options.routes);
       // let staticRouter = router.options.routes.filter(
       //   (item) => item.isDiy == true
       // )[0].children;
@@ -47,6 +89,14 @@ export default {
       return this.$router.options.routes[6].children;
     },
   },
+  methods:{
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
   created() {},
 };
 </script>
@@ -61,43 +111,143 @@ export default {
     & > div {
       height: 100%;
     }
-    .tree-menu {
-      background: #465970;
-      width: 220px;
+    // .tree-menu {
+    //   background: #465970;
+    //   width: 220px;
+    //   box-sizing: border-box;
+    //   padding: 14px 10px;
+    //   & > div {
+    //     width: 200px;
+    //     height: 40px;
+    //     display: flex;
+    //     align-items: center;
+    //     font-size: 14px;
+    //     font-weight: 400;
+    //     color: #ffffff;
+    //     padding: 0 10px;
+    //     cursor: pointer;
+    //     .router-icon {
+    //       display: inline-block;
+    //       height: 14px;
+    //       width: 14px;
+    //       margin-right: 10px;
+    //     }
+    //   }
+    // }
+    // .view-box {
+    //   flex: 1;
+    //   height: 100%;
+    //   background: #f2f2f2;
+
+    //   overflow: hidden;
+    // }
+    // .child-views {
+    //   height: calc(100% - 40px);
+    //   width: 100%;
+    //   box-sizing: border-box;
+    //   padding: 10px;
+    // }
+    // 左边侧边栏
+.sidebar_content {
+  width: 100%;
+  height: 94.5%;
+  display: flex;
+  .mycontent-left {
+    width: 18%;
+    height: 100%;
+    background: #465970;
+    .el-menu-vertical-demo {
       box-sizing: border-box;
-      padding: 14px 10px;
-      & > div {
-        width: 200px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        font-weight: 400;
+
+      background: #465970;
+      color: #ffffff;
+      overflow: hidden;
+      height: 100%;
+      .title_img {
+        width: vw(20);
+        margin-right: vw(10);
+      }
+      ::v-deep .el-submenu__title {
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 500;
         color: #ffffff;
-        padding: 0 10px;
-        cursor: pointer;
-        .router-icon {
-          display: inline-block;
-          height: 14px;
-          width: 14px;
-          margin-right: 10px;
+        height: vh(80);
+        line-height: vh(80);
+        &:hover {
+          background: none;
         }
       }
-    }
-    .view-box {
-      flex: 1;
-      height: 100%;
-      background: #f2f2f2;
+      ::v-deep .el-menu-item-group__title {
+        padding: 0;
+      }
+      ::v-deep .el-submenu .el-menu-item {
+        margin: vh(5) 0;
+        height: vh(60);
+        line-height: vh(60);
+        min-width: 100%;
+        font-size: vw(16);
+        font-family: Source Han Regular CN;
+        font-weight: 400;
+        color: #b6cbe4;
+        box-sizing: border-box;
 
-      overflow: hidden;
+        &:hover {
+          background: #1e80eb;
+          border-radius: vw(5);
+          color: #ffffff;
+        }
+      }
+      ::v-deep .el-menu-item.is-active {
+        box-sizing: border-box;
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #ffffff;
+        background: #1e80eb;
+        border-radius: vw(5);
+      }
+      ::v-deep .el-submenu__icon-arrow {
+        box-sizing: border-box;
+        font-size: vw(16);
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #ffffff;
+      }
+      ::v-deep .el-menu {
+        padding: 0 vw(20);
+        box-sizing: border-box;
+        background: #465970;
+      }
     }
-    .child-views {
-      height: calc(100% - 40px);
+  }
+
+  //   右侧内容
+    .mycontent-content {
       width: 100%;
-      box-sizing: border-box;
-      padding: 10px;
+      height: 100%;
+      padding: vw(0) vw(18) vh(18);
+      background: #f2f2f2;
+      .mycontent-content-title {
+        display: flex;
+        align-items: center;
+        margin: vh(13) vw(7);
+        .title-icon,
+        .title-font {
+          font-size: vw(14);
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #292f38;
+        }
+        .title-icon {
+          margin: 0 vw(5) 0 0;
+          font-size: vw(18);
+          color: #1e80eb;
+        }
+      }
     }
   }
+  }
   .routerActive {
     background: #1e80eb;
     border-radius: 4px;
diff --git a/src/views/netWorkStat/index.vue b/src/views/netWorkStat/index.vue
index ebe8348..7aa204f 100644
--- a/src/views/netWorkStat/index.vue
+++ b/src/views/netWorkStat/index.vue
@@ -1,78 +1,154 @@
 <template>
   <div class="container">
-    <div class="left">
-      <div class="left-grids">
-        <gridsTitle title="检查人员组成" />
-        <div class="main">
-          <people />
-        </div>
-      </div>
-      <div class="left-grids middle-box">
-        <gridsTitle title="检查队伍学历分布" />
-        <div class="main">
-          <xueli />
-        </div>
-      </div>
-      <div class="left-grids">
-        <gridsTitle title="执法监督工作" />
-        <div class="main">
-          <zfdb />
-        </div>
-      </div>
-    </div>
-    <div class="middle">
-      <gridsTitle title="全省数据" />
-      <div class="main">
-        <leafletMap />
-      </div>
-    </div>
-    <div class="right">
-      <div class="right-grids">
-        <gridsTitle title="检查员层级分布" />
-        <div class="main">
-          <hierarchy />
-        </div>
-      </div>
-      <div class="right-grids middle-box">
-        <gridsTitle title="检查员类别分布" />
-        <div class="main">
-          <typePie />
-        </div>
-      </div>
-      <div class="right-grids">
-        <gridsTitle title="检查员级别分布" />
-        <div class="main">
-          <LevelPie />
-        </div>
+    <div class="right-content">
+      <div class="tabs">
+        <el-tabs
+          v-model="activeName"
+          style="color: #edeef0"
+        >
+          <el-tab-pane label="查询条件" name="first">
+            <div class="screen">
+              <div class="task-name">
+                <span class="task-name-text">全文检索：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.fullTextSearch"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">企业名称：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.firmName"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">批准文号：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.approvalNumber"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">处方内容：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.PrescriptionContent"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">功能主治：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.majorFunction"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">产品名称：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.taskName"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <div class="time-interval">
+                <div class="interval-text">
+                  批号有效期：
+                </div>
+                <div class="interval-select">
+                  <div class="star-time">
+                    <el-date-picker
+                      v-model="queryCondition.startTime"
+                      type="datetime"
+                      align="right"
+                      :clearable="false"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      placeholder="请选择开始时间"
+                    >
+                    </el-date-picker>
+                    <!-- <i class="el-icon-date data_icon"></i> -->
+                  </div> 
+                  <!-- <i class="el-icon-sort-up"></i> -->
+                  <div class="symbol">~</div>
+                  <div class="end-time">
+                    <el-date-picker
+                      v-model="queryCondition.endTime"
+                      type="datetime"
+                      align="right"
+                      :clearable="false"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      placeholder="请选择结束时间"
+                    >
+                    </el-date-picker>
+                    <i class="el-icon-date data_icon"></i>
+                  </div>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">产品标签：</span>
+                <div class="task-checkbox">
+                  <el-checkbox-group v-model="queryCondition.checkList">
+                    <el-checkbox label="全部"></el-checkbox>
+                    <el-checkbox label="百年产品"></el-checkbox>
+                    <el-checkbox label="疗效显著"></el-checkbox>
+                    <el-checkbox label="无刺激"></el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+              <div class="task-name">
+                <span class="task-name-text">产品筛选：</span>
+                <div class="task-checkbox">
+                  <el-checkbox-group v-model="queryCondition.checkListTwo">
+                    <el-checkbox label="全部"></el-checkbox>
+                    <el-checkbox :label="'药品' + drugnum"></el-checkbox>
+                    <el-checkbox label="医疗器械"></el-checkbox>
+                    <el-checkbox label="化妆品"></el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
+      
     </div>
   </div>
 </template>
 
 <script>
-import gridsTitle from "../components/gridsTitle";
-import leafletMap from "../components/home/map";
-// 左侧图表
-import people from "../components/home/leftEcharts/people.vue";
-import xueli from "../components/home/leftEcharts/xueli.vue";
-import zfdb from "../components/home/leftEcharts/zfdb.vue";
-// 右侧图表
-import hierarchy from "../components/home/rightEchats/hierarchy.vue";
-import typePie from "../components/home/rightEchats/typePie.vue";
-import LevelPie from "../components/home/rightEchats/LevelPie.vue";
 export default {
   components: {
-    gridsTitle,
-    leafletMap,
-    people,
-    xueli,
-    zfdb,
-    hierarchy,
-    typePie,
-    LevelPie,
   },
   data() {
-    return {};
+    return {
+      drugnum:"(20)",
+      activeName: "first",
+      queryCondition:{
+        fullTextSearch:"",             // 全文检索
+        firmName:"",                   // 企业名称
+        approvalNumber:"",             // 批准文号
+        taskName:"",                   // 产品名称
+        PrescriptionContent:"",        // 处方内容
+        majorFunction:"",              // 功能主治
+        startTime:"",                  // 开始日期
+        endTime:"",                    // 结束日期
+        checkList:[],
+        checkListTwo:[],
+      },
+    };
   },
   mounted() {},
   methods: {},
@@ -86,6 +162,7 @@ export default {
   display: flex;
   align-items: center;
   background: #f2f2f2;
+  padding: 10px;
   & > div {
     flex: 1;
     height: 100%;
@@ -119,5 +196,136 @@ export default {
   .main {
     height: calc(100% - 40px);
   }
+  .right-content {
+    background-color: #fff;
+    ::v-deep .el-tabs__header{
+      margin: 0;
+      .el-tabs__nav-scroll {
+        padding-left: 15px;
+        padding-top: 3px;
+      }
+      .el-tabs__item {
+        font-size: 18px;
+        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
+        font-weight: bold;
+        color: #323233;
+      }
+      .el-tabs__active-bar {
+        background-color: #1349C5;
+        height: 2px;
+        border-radius: 0px 0px 0px 0px;
+      }
+    }
+    .tabs {
+      background: rgba(255, 255, 255, 0.9);
+      box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
+      border-radius: vw(10);
+      min-height: 90vh;
+      // padding-top: 3px;
+      // padding-left: 15px;
+    }
+    .screen {
+      padding: 15px 0 26px 28px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      .task-name {
+        display: flex;
+        align-items: center;
+        margin-right: 30px;
+        .task-name-text {
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #6a6c6f;
+          line-height: 50px;
+          // margin-right: vw(10);
+        }
+        .task-input {
+          width: 251px;
+          height: 32px;
+          ::v-deep .el-input {
+            width: 251px;
+            height: 32px;
+          }
+          ::v-deep .el-input__inner {
+            width: 100%;
+            height: 100%;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            // color: #B1B6BF;
+            line-height: 50px;
+            padding-left: 15px;
+          }
+        }
+      }
+      .time-interval {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        .interval-text {
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #6a6c6f;
+          // line-height: 50px;
+          // margin-right: vw(10);
+        }
+        .interval-select {
+          display: flex;
+          align-items: center;
+          border: 1px solid #dbe0e8;
+          border-radius: 4px;
+          height: 32px;
+          .star-time,
+          .end-time {
+            position: relative;
+            .data_icon {
+              position: absolute;
+              top: 50%;
+              right: 17px;
+              z-index: 9;
+              color: #c0c4cc;
+              font-size: 14px;
+              transform: translateY(-50%);
+            }
+            ::v-deep .el-input__prefix {
+              display: none;
+            }
+            ::v-deep .el-input {
+              width: 243px;
+              height: 30px;
+            }
+            ::v-deep .el-input__inner {
+              width: 100%;
+              height: 100%;
+              font-size: 16px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              // color: #B1B6BF;
+              line-height: 30px;
+              padding-left: 15px;
+              border: none;
+              cursor: pointer;
+            }
+          }
+          .symbol {
+            background: rgba(219, 224, 232, 0.5);
+            width: 40px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #292f38;
+            line-height: 28px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index b250845..821e41d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || "检查员管理系统"; // 网页标题
+const name = process.env.VUE_APP_TITLE || "产品档案管理系统"; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口