首页优化

src/App.vue

@@ -33,6 +33,12 @@ export default {
       document.body.style.filter = 'grayscale(100%)'
     }
 
+    //切换主题
+    var theme = localStorage.getItem('theme')
+    if (theme) {
+      var dom = document.getElementsByTagName('html')[0]
+      dom.setAttribute('theme-type',theme)
+    }
   },
   methods: {
     
@@ -211,8 +217,8 @@ html, body, #app {
 }
 .custom-table-header > th {
   word-break: break-word;
-  background-color: #f8f8f9 !important;
-  color: #515a6e;
+  background: var(--bg) !important;
+  color: #fff;
   height: 40px;
   font-size: 13px;
 }

src/assets/css/theme.css

@@ -1,4 +1,20 @@
 html{
     --bg:#316192;
-    --fm:黑体;
+    --color:#fff; 
+}
+
+html[theme-type='#6768ab']{
+    --bg:#6768ab;
+    --color:#fff; 
+}
+html[theme-type='#316192']{
+  --bg:#316192;
+  --color:#fff; 
+}
+html[theme-type='#879cf3']{
+  --bg:#879cf3;
+  --color:#fff; 
+}
+body{
+  --fm:黑体;
 }

src/router/index.js

@@ -35,6 +35,7 @@ const routes = [
         name: 'Home',
         meta: {
           title: '首页',
+          sign:'home'
         },
         component: () => import('@/views/home/index.vue'),
       },

src/views/event/components/view/table.vue

@@ -1,24 +1,50 @@
 <template>
   <div class="eventTable">
     <div>
-      <el-table :data="tableData" border style="width: 100%" header-row-class-name="headerClass" :header-cell-style="{ background: '#316192', color: '#fff' }">
+      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header"
+        >
         <el-table-column label="#" width="60" type="index" align="center">
+          <template slot-scope="scope">
+            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+          </template>
         </el-table-column>
-        <el-table-column prop="date" label="事件名称" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="相关报告数量" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="相关专题库数量" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="事件场景" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="事件时间" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="描述" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="创建人" align="center">
+
+        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
+              <el-link @click="handleItem(scope.row,item.key)">{{ scope.row[item.key] }}</el-link>
+            </div>
+            <div v-else v-html="getColumnData(scope.row,item.key)"></div>
+          </template>
         </el-table-column>
-        <el-table-column prop="time" label="创建时间" align="center">
+
+        <el-table-column v-if="isOperate != '首页'" label="操作" align="center" width="150px">
+          <template slot-scope="scope">
+            <el-dropdown split-button type="primary" size="small" @click="handleClick($event,scope.row)"
+              @command="handleCommand($event,scope.row)">
+              <p>编 辑</p>
+              <el-dropdown-menu slot="dropdown" style="text-align:center">
+                <el-dropdown-item command="0">新增专题库</el-dropdown-item>
+                <el-dropdown-item>
+                  <el-dropdown @command="handleCommand($event,scope.row)" placement="left-start">
+                    <span> 新增报告 </span>
+                    <el-dropdown-menu style="text-align:center">
+                      <el-dropdown-item command="1"> 无效分析 </el-dropdown-item>
+                      <el-dropdown-item command="2">第三方意见 </el-dropdown-item>
+                      <el-dropdown-item command="3">稳定性分析 </el-dropdown-item>
+                      <el-dropdown-item command="4">FTO调查 </el-dropdown-item>
+                      <el-dropdown-item command="5">侵权分析 </el-dropdown-item>
+                      <el-dropdown-item command="6">回避设计 </el-dropdown-item>
+                      <el-dropdown-item command="7">无效应对报告 </el-dropdown-item>
+                      <el-dropdown-item command="8">专利挖掘 </el-dropdown-item>
+                      <el-dropdown-item command="9">其他 </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-dropdown-item>
+                <el-dropdown-item command="10" divided style="color:red">删 除</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -27,36 +53,133 @@
 
 <script>
 export default {
+  props: {
+    isOperate: {//控制显示
+      type: String,
+      default:''
+    },
+    tableData: {//数据
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, {name:'场景二'}]},]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
+        }
+      }
+    },
+    column: {//显示栏位管理数组
+      type: Array,
+      default: () => {
+        return [
+          {
+            "key": "name",
+            "name": "事件名称",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "eventNumber",
+            "name": "相关报告数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber",
+            "name": "相关专题库数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber1",
+            "name": "事件场景",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber2",
+            "name": "事件时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber3",
+            "name": "描述",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber4",
+            "name": "创建人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "time",
+            "name": "创建时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+        ]
+      }
+    }
+  },
   data() {
     return {
-      tableData: [],
-      queryParams: {
-        size: 10,
-        current: 1,
-        total: 0,
-      },
+      
     };
   },
+  watch: {
+    
+  },
   mounted() {
-    // this.getList()
+   
   },
   methods: {
-    getList() {
-      
+    // 点击名称等事件
+    handleItem(row,key) {
+      // console.log(row,key);
     },
-    // 分页
-    handleCurrentChange(val) {
-      this.queryParams.current = val
-      this.getList()
+    // 
+    getColumnData(row,key) {
+      if (key == 'projectNumber1') {
+        if (row[key]) {
+          var a=''
+          row[key].forEach(item => {
+            a+=item.name + '</br>'
+          });
+          return a
+        } else {
+          return ''
+        }
+      }
+    },
+    // 编辑按钮事件
+    handleClick(row) {
+
+    },
+    handleCommand(event,row) {
+      
     },
   },
 };
 </script>
 <style lang="scss">
-  .eventTable{
-    .headerClass{
-      background: red;
-    }
-  }
+.eventTable {
+
+}
 </style>
 <style lang="scss" scoped></style>

src/views/home/index.vue

@@ -1,43 +1,39 @@
 <template>
   <div class="home">
     <div class="main">
-      <div>
+      <div id="step1">
         <el-carousel :interval="4000" type="card">
-          <el-carousel-item v-for="item in srcList" :key="item.src" >
+          <el-carousel-item v-for="item in srcList" :key="item.src">
             <el-image :src="require('../../assets/' + item.src)" class="medium"></el-image>
-            <!-- <el-image :src="item.src" class="medium"></el-image> -->
-            <el-button round class="btnImg" @click="solution(item)">寻找解决方案</el-button>
           </el-carousel-item>
         </el-carousel>
       </div>
-      <div>
+      <div class="title">
         <h2>知识产权风控与组织记忆系统</h2>
       </div>
-      <div class="serch" >
-        <el-select v-model="queryParams.queryType" placeholder="请选择" :change="selectChange" class="special">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-        <el-input placeholder="请输入内容" v-model="queryParams.query" clearable class="queryInput"></el-input>
-        <el-button @click="query">
-          <i class="el-icon-search"></i>
-        </el-button>
-        
+      <div class="home_search">
+        <div class="input_search" id="step2">
+          <el-input :placeholder="getPlaceholder()" v-model="queryParams.content" class="input-with-select">
+            <el-select v-model="queryParams.select" slot="prepend" placeholder="请选择" style="width:100px">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
+          </el-input>
+        </div>
       </div>
-      <div>
+      <div id="step3">
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="事件" name="event">
-            <eventTable></eventTable>
+            <eventTable :isOperate="'首页'"></eventTable>
           </el-tab-pane>
           <el-tab-pane label="专题库" name="project">
-            <projectTable></projectTable>
+            <projectTable :isOperate="'首页'"></projectTable>
           </el-tab-pane>
           <el-tab-pane label="报告" name="report">
-            <reportTable></reportTable>
+            <reportTable :isOperate="'首页'"></reportTable>
+          </el-tab-pane>
+          <el-tab-pane label="我的任务" name="task">
+            <taskTable></taskTable>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -45,44 +41,44 @@
         <el-link class="link" @click="seeMore">查看更多> > ></el-link>
       </div>
     </div>
-    <!-- 底部 -->
-    <div class="footer" >
+    <div class="footer">
       <div class="footerDiv">
-        <div class="footerDiv_one">
-          <div class="one_div1">
-            <div class="logo">
-              <img class="img" src="@/assets/logo-3.png" style="background: #fff;"/>
-              <h4>知识产权风控与组织记忆系统</h4>
-            </div>
-            <el-link class="bei">粤IPC备010101010101</el-link>
+        <div>
+          <div class="logo">
+            <img class="img" src="@/assets/logo-3.png" />
+            <span class="title">知识产权风控与组织记忆系统</span>
+          </div>
+          <div class="bei">
+            <el-link class="elLink">粤<span class="en">IPC</span>备010101010101</el-link>
           </div>
         </div>
-        <div class="footerDiv_two">
-          <div class="two_div1"></div>
-          <div class="two_div2">
-            <el-link class="elLink1">联系我们</el-link>
-            <el-link class="elLink2" >反馈建议</el-link>
+        <div>
+          <div>
+            <el-link class="elLink">联系我们</el-link>
+          </div>
+          <div>
+            <el-link class="elLink">反馈建议</el-link>
           </div>
         </div>
-        <div class="footerDiv_two">
-          <div class="two_div1"></div>
-          <div class="two_div2">
-            <el-link class="elLink1" href="">官方网站</el-link>
-            <el-link class="elLink2" href="">xswip.cn</el-link>
+        <div>
+          <div>
+            <el-link class="elLink" href="">官方网站</el-link>
+          </div>
+          <div>
+            <el-link class="elLink en" href="">xswip.cn</el-link>
           </div>
         </div>
-        <div class="footerDiv_two">
-          <div class="two_div1"></div>
-          <div class="two_div2" style="">
-            <el-link class="elLink1">实时动态</el-link>
-            <div class="elLink2">
-              <i class="iconfont icon-weixinfang "></i>
-            </div>
-            <!-- <el-link class="elLink2" href=""></el-link> -->
+        <div>
+          <div>
+            <el-link class="elLink">实时动态</el-link>
+          </div>
+          <div class="elLink">
+            <i class="iconfont icon-weixinfang "></i>
           </div>
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -90,207 +86,220 @@
 import eventTable from '../event/components/view/table.vue';
 import projectTable from '../project/components/view/table.vue';
 import reportTable from '../report/components/view/table.vue';
+import taskTable from '../task/components/view/table.vue';
 export default {
   components: {
     eventTable,
     projectTable,
     reportTable,
+    taskTable,
   },
   data() {
     return {
       srcList: [
-        // {src:'@/assets/lun1.jpg'},
-        // {src:'@/assets/lun2.jpg'},
-        // {src:'@/assets/lun3.jpg'},
-        {src:'lun1.jpg'},
-        {src:'lun2.jpg'},
-        {src:'lun3.jpg'},
+        { src: 'lun1.jpg' },
+        { src: 'lun2.jpg' },
+        { src: 'lun3.jpg' },
       ],
+      activeName: 'event',
       options: [
-        {value:0,label:'专题库'},
-        {value:1,label:'报告'},
-        {value:2,label:'事件'},
+        {
+          label: '专题库',
+          value: 'Workspace',
+          placeholder: '请输入专题库名称'
+        },
+        {
+          label: '专利',
+          value: 'patentNo',
+          placeholder: '请输入专利'
+        },
+        {
+          label: '产品',
+          value: 'Product',
+          placeholder: '请输入产品名称'
+        },
+        {
+          label: '事件',
+          value: 'QuestionEvent',
+          placeholder: '请输入事件名称'
+        },
+        {
+          label: '报告',
+          value: 'AllReport',
+          placeholder: '请输入报告名称'
+        },
       ],
-      queryParams:{
-        queryType: '',
-        query:'',
+      queryParams: {
+        content: '',
+        select: ''
       },
-      activeName: "event",
     }
   },
-  mounted() {
-    
-  },
   methods: {
-    // 查看更多
+    // 点击查看更多
     seeMore() {
-      switch (this.activeName) {
-        case 'event'://事件
-          
-          break;
-        case 'project'://专题库
-          
-          break;
-        case 'report'://报告
-          
-          break;
-      
-        default:
-          break;
-      }
     },
-    // 切换tab
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-    // select change
-    selectChange(val) {
-      console.log(val);
-    },
-    // 搜索
-    query() {
-      console.log(this.queryParams);
+    // 点击搜索
+    search(){},
+    //切换tag
+    handleClick() { },
+    //获取提示信息
+    getPlaceholder() {
+      if (this.queryParams.select) {
+        var a = this.options.find(item => {
+          return item.value == this.queryParams.select
+        }).placeholder
+      } else {
+        var a = '请输入内容'
+      }
+      return a
     },
-    // 解决方案
-    solution(){},
-  },
-};
+  }
+}
 </script>
-
 <style lang="scss">
-.home{
-  .el-carousel__container{
+.home {
+  .el-carousel__container {
     height: 200px;
   }
-  .serch{
-    // select整体颜色改变
-    .el-select .el-input__inner{
-      background: #316192;
-      border: 1px solid #316192;
+
+  .input_search {
+    .el-input-group__append, .el-input-group__prepend{
+      background: var(--bg);
     }
     // select中选中项颜色、上下角颜色改变
     .el-select .el-input .el-select__caret{
-      color:#fff;
+      color:var(--color);
     }
-    .special {
-      .el-input__inner{
-        border-radius: 0px;
-        color: aliceblue !important;
-      }
-    }
-    .queryInput{
-      .el-input__inner{
-        border-radius: 0px;
-      }
+    .el-input-group__prepend div.el-select .el-input__inner{
+      color: var(--color) !important;
     }
-    .el-button{
+    .el-button {
       border-radius: 0px;
-      background: #316192;
-      border: 1px solid #316192;
+      background: var(--bg);
+      border: 1px solid var(--bg);
+      color: var(--color);
     }
   }
+
 }
 </style>
 <style lang="scss" scoped>
-.home{
-  .main{
+.home {
+  --minHeight:150px;
+  --marginTop:50px;
+  .main {
     width: 80%;
-    margin: auto;
-    .medium{
-      width: 100%; 
+    margin: 0 auto;
+    position: relative;
+    min-height: calc(100% - var(--minHeight) - var(--marginTop));
+    .medium {
+      width: 100%;
       height: 260px;
     }
-    .btnImg{
-      position: absolute;
-      top: 75%; 
-      left: 50%; 
-      transform: translate(-50%, 0px);
-    }
-    h2{
+
+    .title {
       text-align: center;
-      color: #316192;
+      color: var(--bg);
+      font-family: 迷你简汉真广标;
+    }
+
+    .home_search {
+      width: 100%;
+      background: var(--color);
+      z-index: 999;
+      margin: 20px auto;
+      position: sticky;
+      top: 0;
     }
-    .serch{
+
+    .input_search {
       min-width: 654px;
       width: 50%;
-      display: flex;
-      margin: auto;
-      i{
-        color: aliceblue;
-      }
+      height: 100%;
+      margin: 0 auto;
     }
-    .link{
+
+    .link {
       float: right;
       margin-top: 10px;
       color: #409EFF;
     }
   }
-  .footer{
+
+  .footer {
     width: 100%;
-    height: 200px;
-    margin-top: 80px;
-    background: #316192;
-    .footerDiv{
-      width: 1000px;
-      height: 100%
-      ;margin: auto;
+    min-height: var(--minHeight);
+    margin-top: var(--marginTop);
+    background: var(--bg);
+
+    .footerDiv {
+      max-width: 80%;
+      width: 800px;
+      margin: auto;
+      padding: 10px 0 20px;
       display: flex;
-      .footerDiv_one{
-        width: 400px;
-        position: relative;
-        .one_div1{
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%,-50%);
-        }
-        .logo{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .img{
-            width: 100px;
-            height: 50px;
-          }
-          h4{
-            width: 220px;
-            margin-left: 10px;
-            color: aliceblue;
-          }
+      flex-wrap: wrap;
+
+      &>div {
+        min-width: 140px;
+        padding: 10px 0;
+        color: var(--color);
+        font-family: 仿宋_GB2312 !important;
+        border-right: 2px solid var(--color);
+
+        div {
+          padding: 10px 30px;
+          text-align: center;
         }
-        .bei{
-          color: aliceblue;
+
+      }
+
+      &>div:last-child {
+        border-right: none;
+      }
+
+      &>div:first-child {
+        min-width: 330px;
+
+        &:last-child {
+          text-align: left !important;
         }
       }
-      .footerDiv_two{
-        width: 200px;
-        position: relative;
-        .two_div1{
-          width: 100%;
-          height: 50px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%,-50%);
-          border-left: 2px solid aliceblue;
-          
+
+      .bei {
+        text-align: left !important;
+      }
+
+      .title {
+        font-weight: bolder;
+      }
+
+      .en {
+        font-family: Arial !important;
+      }
+
+      .logo {
+        display: flex;
+        align-items: center;
+
+        .img {
+          height: 20px;
+          margin-right: 20px;
+         background: #fff;
         }
-        .two_div2{
-          text-align: center;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%,-50%);
-          .elLink1{
-            margin-bottom: 15px;
-            color: aliceblue ;
-          }
-          .elLink2{
-            color: aliceblue;
-          }
+      }
+
+      .elLink {
+        color: var(--color);
+        font-family: inherit;
+
+        i {
+          font-size: 20px;
         }
       }
+
     }
   }
 }
-</style>
+</style>

src/views/home/index2.vue

@@ -1,229 +0,0 @@
-<template>
-  <div style="height:100%;width:80%;margin:0 auto;">
-    <div>
-      <div id="step1">
-        <carousel></carousel>
-      </div>
-        <div class="imgDiv">
-          <img class="logo" src="@/assets/logo-3.png" alt="">
-        </div>
-      <div class="home_search" >
-        <div class="input_search" id="step2">
-          <el-input :placeholder="getPlaceholder()" v-model="queryParams.content" class="input-with-select">
-            <el-select v-model="queryParams.select" slot="prepend" placeholder="请选择" style="width:100px">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
-          </el-input>
-        </div>
-        
-      </div>
-    </div>
-    <div :style="{'margin-top':margin_top}">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="事件" name="event">
-          <div style="background:white;padding:10px 0 20px;">
-            <QuestionTable @checkVisual="checkVisual" :show="true"></QuestionTable>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="专题库" name="workspace">
-          <div style="background:white;padding:10px 0 20px;">
-            <Project @checkVisual="checkVisual" :show="true"></Project>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="报告" name="report">
-          <div style="background:white;padding:10px 0 20px;">
-            <Report @checkVisual="checkVisual" :show="true"></Report>
-          </div>
-          
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
-    <visualDialog ref="visualDialog"></visualDialog>
-  </div>
-</template>
-
-<script>
-// import Project from './components/project.vue'
-import Project from '@/views/visual/components/drawer/components/project.vue';
-import Report from '@/views/visual/components/drawer/components/report.vue';
-// import Report from './components/report.vue'
-import QuestionTable from "@/views/questionEvent/components/questionIndex.vue";
-import visualDialog from './components/visualDialog.vue'
-import { openVisual } from './components/mixins';
-
-import carousel from './components/carousel.vue'
-export default {
-  components: {
-    Project,
-    Report,
-    visualDialog,
-    carousel,
-    QuestionTable
-  },
-  props: {},
-  mixins:[openVisual],
-  data() {
-    return {
-      show:false,
-      margin_top:'0px',
-      activeName:'event',
-      options:[
-        {
-          label:'专题库',
-          value:'Workspace',
-          placeholder:'请输入专题库名称'
-        },
-        {
-          label:'专利',
-          value:'patentNo',
-          placeholder:'请输入专利'
-        },
-        {
-          label:'产品',
-          value:'Product',
-          placeholder:'请输入产品名称'
-        },
-        {
-          label:'事件',
-          value:'QuestionEvent',
-          placeholder:'请输入事件名称'
-        },
-        {
-          label:'报告',
-          value:'AllReport',
-          placeholder:'请输入报告名称'
-        },
-      ],
-      
-      queryParams:{
-        content:'',
-        select:''
-      },
-    };
-  },
-  watch: {},
-  computed: {},
-  created() {},
-  mounted() {
-    document.getElementsByClassName('el-main')[0].addEventListener("scroll", this.handleScroll)
-  },
-  methods: {
-    //监听滚动条的位置
-    handleScroll(){
-      let demo = document.querySelector('.home_search')
-      const scrollTop = document.getElementsByClassName('el-main')[0].scrollTop
-      if(scrollTop >= 250 && !this.show) {
-        this.show =  true
-          demo.classList.add('fixHeader')
-          this.margin_top = '70px'
-      } else if(scrollTop < 250 && this.show){
-        this.show =  false
-          demo.classList.remove('fixHeader')
-          this.margin_top = '0px'
-      }
-      // console.log('滚动条位置:', scrollTop);
-    },
-    //切换tag
-    handleClick(){},
-    //获取提示信息
-    getPlaceholder(){
-      if(this.queryParams.select){
-        var a = this.options.find(item=>{
-          return item.value == this.queryParams.select
-        }).placeholder
-      }else{
-        var a = '请输入内容'
-      }
-      return a
-    },
-    //查询
-    search(){
-      if(!this.queryParams.select){
-        this.$message.error('请选择需要检索的信息')
-        return false
-      }
-      localStorage.searchContent = this.queryParams.content
-      this.$router.push({
-        name:this.queryParams.select,
-      })
-      setTimeout(function () {
-        localStorage.searchContent = ''
-      }, 1000);
-    },
-  },
-};
-</script>
-<style lang="scss">
-  .el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-  }
-  
-  .el-carousel__item:nth-child(2n+1) {
-    background-color: #d3dce6;
-  }
-  .fixHeader{
-    .input-with-select{
-      // min-width: 654px;
-      // width: 50%;
-      // margin-left:20px;
-    }
-  }
-</style>
-<style lang="scss" scoped>
-.small{
-  color: #475669;
-    font-size: 14px;
-    opacity: 0.75;
-    line-height: 150px;
-    margin: 0;
-}
-.fixHeader{
-  width:100% !important;
-  height: 50px;
-  background: white;
-  max-height: 50px;
-  position: fixed;
-  top:40px;
-  left:0;
-  right:0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-  margin:0 auto;
-  // .logo1{
-  //   // width:100px;
-  //   height: 40px;
-  //   margin-right:20px;
-  // }
-  .input_search{
-    width: 50%;
-  }
-}
-.home_search{
-  
-  min-width: 654px;
-  width: 50%;
-  height: 50px;
-  // min-height: 50px;
-  // max-height: 510px;
-  // position:absolute;
-  // left: 0;
-  // right: 0;
-  // top: 0;
-  // bottom: 0;
-  margin:20px auto;
- 
-}
-.imgDiv{
-  display: flex;
-  justify-content: center;
-  margin-bottom:10px;
- 
-}
- .logo{
-    width:100px;
-  }
-</style>

src/views/layout/components/UserBar.vue

@@ -29,6 +29,16 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
+          <el-dropdown-item>
+            <el-dropdown @command="handleCommand1" trigger="hover" placement="right-start">
+              <span class="el-dropdown-link">  主题 </span>
+              <el-dropdown-menu  class="children_item">
+                <el-dropdown-item command="#6768ab"> 深紫色 </el-dropdown-item>
+                <el-dropdown-item command="#316192"> 深蓝色 </el-dropdown-item>
+                <el-dropdown-item command="#879cf3"> 浅紫色 </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
           <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
           <el-dropdown-item command="changePwd" v-if="$permission('/admin/updatePassword')" >修改密码</el-dropdown-item>
           <el-dropdown-item command="setStyle">文本样式设置</el-dropdown-item>
@@ -222,6 +232,11 @@ export default {
       }
     },
     //头像处下拉菜单按钮
+    handleCommand1(command) {
+      localStorage.setItem('theme', command)
+      var dom = document.getElementsByTagName('html')[0]
+      dom.setAttribute('theme-type',command)
+    },
     handleCommand(command) {
       switch (command) {
         case 'zh':

src/views/layout/components/guide.js

@@ -35,28 +35,28 @@
 // }
 
 const steps = {
-    '首页':[
+    'home':[
         {
             element: "#step1", // 需要引导展示的iD
             popover: {
-                title: "系统使用指导", //展示模块标题
-                description: "鼠标悬浮在各个功能模块上，可快速查找系统对应操作SOP以及运维人员。", // 展示模块类容
+                title: "轮播图", //展示模块标题
+                description: "介绍系统的功能。", // 展示模块类容
                 position: "right" // 模块的位置 可以定位 看自己了
             } 
         },
         {
             element: "#step2", // 需要引导展示的iD
             popover: {
-                title: "个人信息", //展示模块标题
-                description: "点击个人头像/下拉图标，选择个人信息，初始密码为******，建议修改为个人账号密码。", // 展示模块类容
+                title: "检索框", //展示模块标题
+                description: "可以搜索想要搜索的信息。", // 展示模块类容
                 position: "right" // 模块的位置 可以定位 看自己了
             } 
         },
         {
             element: "#step3", // 需要引导展示的iD
             popover: {
-                title: "重新引导", //展示模块标题
-                description: "点击此处可重新查看引导流程。", // 展示模块类容
+                title: "列表展示", //展示模块标题
+                description: "展示一些重要信息。", // 展示模块类容
                 position: "right" // 模块的位置 可以定位 看自己了
             } 
         },

src/views/layout/index.vue

@@ -60,7 +60,7 @@ export default {
     $route() {
       this.button = this.$route.meta.button || []
       this.showProjectName = this.$route.meta.showProjectName
-      this.openGuide(this.$route.meta.title)
+      this.openGuide(this.$route.meta.sign)
     },
     showProjectName(val){
       this.projectName = this.$s.getSession('projectName')
@@ -86,7 +86,7 @@ export default {
       await this.$store.dispatch('getCustomField', this.projectId)
       await this.$store.dispatch('getSystemField', this.projectId)
     }
-    this.openGuide(this.$route.meta.title)
+    this.openGuide(this.$route.meta.sign)
   },
   methods: {
     

src/views/project/components/view/table.vue

@@ -1,24 +1,49 @@
 <template>
   <div class="eventTable">
     <div>
-      <el-table :data="tableData" border style="width: 100%" header-row-class-name="headerClass" :header-cell-style="{ background: '#316192', color: '#fff' }">
+      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header">
         <el-table-column label="#" width="60" type="index" align="center">
+          <template slot-scope="scope">
+            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+          </template>
         </el-table-column>
-        <el-table-column prop="date" label="名称(专题库)" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="报告数量" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="事件" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="应用场景" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="专题库负责人" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="委托方" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="调查类型" align="center">
+
+        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
+              <el-link @click="handleItem(scope.row,item.key)">{{ scope.row[item.key] }}</el-link>
+            </div>
+            <div v-else v-html="getColumnData(scope.row,item.key)"></div>
+          </template>
         </el-table-column>
-        <el-table-column prop="time" label="技术主题" align="center">
+
+        <el-table-column v-if="isOperate != '首页'" label="操作" align="center" width="150px">
+          <template slot-scope="scope">
+            <el-dropdown split-button type="primary" size="small" @click="handleClick($event,scope.row)"
+              @command="handleCommand($event,scope.row)">
+              <p>编 辑</p>
+              <el-dropdown-menu slot="dropdown" style="text-align:center">
+                <el-dropdown-item>
+                  <el-dropdown @command="handleCommand($event,scope.row)" placement="left-start">
+                    <span> 专利导入 </span>
+                    <el-dropdown-menu style="text-align:center">
+                      <el-dropdown-item command="0"> Excel导入 </el-dropdown-item>
+                      <el-dropdown-item command="1">专利号导入 </el-dropdown-item>
+                      <el-dropdown-item command="2">检索条件导入 </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-dropdown-item>
+                <el-dropdown-item command="3">任务清单</el-dropdown-item>
+                <el-dropdown-item command="4">分配参与者</el-dropdown-item>
+                <el-dropdown-item command="5">报告管理</el-dropdown-item>
+                <el-dropdown-item command="6">产品架构</el-dropdown-item>
+                <el-dropdown-item command="7">事件</el-dropdown-item>
+                <el-dropdown-item command="8">其他附件</el-dropdown-item>
+                <el-dropdown-item command="9">项目分享</el-dropdown-item>
+                <el-dropdown-item command="10" divided style="color:red">删 除</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -27,36 +52,133 @@
 
 <script>
 export default {
+  props: {
+    isOperate: {//控制显示
+      type: String,
+      default:''
+    },
+    tableData: {//数据
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, {name:'场景二'}]},]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
+        }
+      }
+    },
+    column: {//显示栏位管理数组
+      type: Array,
+      default: () => {
+        return [
+          {
+            "key": "name",
+            "name": "事件名称",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "eventNumber",
+            "name": "相关报告数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber",
+            "name": "相关专题库数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber1",
+            "name": "事件场景",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber2",
+            "name": "事件时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber3",
+            "name": "描述",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber4",
+            "name": "创建人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "time",
+            "name": "创建时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+        ]
+      }
+    }
+  },
   data() {
     return {
-      tableData: [],
-      queryParams: {
-        size: 10,
-        current: 1,
-        total: 0,
-      },
+      
     };
   },
+  watch: {
+    
+  },
   mounted() {
-    // this.getList()
+   
   },
   methods: {
-    getList() {
-      
+    // 点击名称等事件
+    handleItem(row,key) {
+      // console.log(row,key);
     },
-    // 分页
-    handleCurrentChange(val) {
-      this.queryParams.current = val
-      this.getList()
+    // 
+    getColumnData(row,key) {
+      if (key == 'projectNumber1') {
+        if (row[key]) {
+          var a=''
+          row[key].forEach(item => {
+            a+=item.name + '</br>'
+          });
+          return a
+        } else {
+          return ''
+        }
+      }
+    },
+    // 编辑按钮事件
+    handleClick(row) {
+
+    },
+    handleCommand(event,row) {
+     
     },
   },
 };
 </script>
 <style lang="scss">
-  .eventTable{
-    .headerClass{
-      background: red;
-    }
-  }
+.eventTable {
+
+}
 </style>
 <style lang="scss" scoped></style>

src/views/report/components/view/table.vue

@@ -1,25 +1,47 @@
 <template>
   <div class="eventTable">
     <div>
-      <el-table :data="tableData" border style="width: 100%" header-row-class-name="headerClass" :header-cell-style="{ background: '#316192', color: '#fff' }">
+      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header">
         <el-table-column label="#" width="60" type="index" align="center">
+          <template slot-scope="scope">
+            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+          </template>
         </el-table-column>
-        <el-table-column prop="date" label="名称" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="标的专利/产品" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="相关专题库" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="应用场景" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="负责人" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="客户" align="center">
-        </el-table-column>
-        <el-table-column prop="address" label="技术/产品" align="center">
-        </el-table-column>
-        <el-table-column prop="time" label="状态" align="center">
+
+        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
+              <el-link @click="handleItem(scope.row,item.key)">{{ scope.row[item.key] }}</el-link>
+            </div>
+            <div v-else v-html="getColumnData(scope.row,item.key)"></div>
+          </template>
         </el-table-column>
+
+        <el-table-column v-if="isOperate != '首页'" label="操作" align="center" width="150px">
+        <template slot-scope="scope">
+          <el-dropdown @command="handleCommand($event, scope.row)" split-button type="primary" size="small"  @click="handleEdit(scope.row)">
+            <p v-if="$reportPermission(scope.row.id,[0,1])">编辑</p>
+            <p v-else>查看</p>
+            <el-dropdown-menu slot="dropdown" class="text-align_center">
+              <el-dropdown-item command="0" v-if="$reportPermission(scope.row.id,[0,1])">分享</el-dropdown-item>
+              <el-dropdown-item command="1" v-if="[2,3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">导出报告</el-dropdown-item>
+              <el-dropdown-item command="2" v-if="[2,3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">报告文档</el-dropdown-item>
+              <el-dropdown-item command="3" v-if="[1,2].includes(scope.row.status)&&[0,1,2,3].includes(scope.row.type) && $reportPermission(scope.row.id,[0,1])">自定义字段</el-dropdown-item>
+              <el-dropdown-item command="4" v-if="[2].includes(scope.row.status)&& [0,1,2,3].includes(scope.row.type) && $reportPermission(scope.row.id,[0,1])">任务分配</el-dropdown-item>
+              <el-dropdown-item command="5" v-if="([1].includes(scope.row.status) || (scope.row.type == 4 && [1,2].includes(scope.row.status))) && $reportPermission(scope.row.id,[0,1])">{{!([3,4].includes(scope.row.type))?'拆分特征':'产品信息录入'}}</el-dropdown-item>
+              <el-dropdown-item command="8" v-if="(scope.row.type == 4 && [1,2].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">专利与产品关联比对</el-dropdown-item>
+              <el-dropdown-item command="9" v-if="(scope.row.type == 5 && [1,2].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])"> 规避方案填写</el-dropdown-item>
+              <el-dropdown-item command="10" v-if="[0,1,2,3].includes(scope.row.type)&&[2].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])"> 添加对比文件</el-dropdown-item>
+              <el-dropdown-item command="11" v-if="[1,2].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])"> 完成报告</el-dropdown-item>
+              <el-dropdown-item command="12" v-if="[3].includes(scope.row.status) && $reportPermission(scope.row.id,[0,1])">添加追踪报告</el-dropdown-item>
+              <el-dropdown-item command="13" v-if="(scope.row.type == 7 && [1,2,3].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">添加无效理由和证据</el-dropdown-item>
+              <el-dropdown-item command="14" v-if="(scope.row.type == 7 && [1,2,3].includes(scope.row.status)) && $reportPermission(scope.row.id,[0,1])">证据文献</el-dropdown-item>
+              <!-- <el-dropdown-item command="6" v-if="[2,3].includes(scope.row.status)&& scope.row.type != 4">导入 </el-dropdown-item> -->
+              <el-dropdown-item command="7" divided style="color: red;" v-if=" $reportPermission(scope.row.id,[0,1])">删除 </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
       </el-table>
     </div>
   </div>
@@ -27,36 +49,133 @@
 
 <script>
 export default {
+  props: {
+    isOperate: {//控制显示
+      type: String,
+      default:''
+    },
+    tableData: {//数据
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, {name:'场景二'}]},]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
+        }
+      }
+    },
+    column: {//显示栏位管理数组
+      type: Array,
+      default: () => {
+        return [
+          {
+            "key": "name",
+            "name": "事件名称",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "eventNumber",
+            "name": "相关报告数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber",
+            "name": "相关专题库数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber1",
+            "name": "事件场景",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber2",
+            "name": "事件时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber3",
+            "name": "描述",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber4",
+            "name": "创建人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "time",
+            "name": "创建时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+        ]
+      }
+    }
+  },
   data() {
     return {
-      tableData: [],
-      queryParams: {
-        size: 10,
-        current: 1,
-        total: 0,
-      },
+      
     };
   },
+  watch: {
+    
+  },
   mounted() {
-    // this.getList()
+   
   },
   methods: {
-    getList() {
-      
+    // 点击名称等事件
+    handleItem(row,key) {
+      // console.log(row,key);
     },
-    // 分页
-    handleCurrentChange(val) {
-      this.queryParams.current = val
-      this.getList()
+    // 
+    getColumnData(row,key) {
+      if (key == 'projectNumber1') {
+        if (row[key]) {
+          var a=''
+          row[key].forEach(item => {
+            a+=item.name + '</br>'
+          });
+          return a
+        } else {
+          return ''
+        }
+      }
+    },
+    // 编辑按钮事件
+    handleClick(row) {
+
+    },
+    handleCommand(event,row) {
+    
     },
   },
 };
 </script>
 <style lang="scss">
-  .eventTable{
-    .headerClass{
-      background: red;
-    }
-  }
+.eventTable {
+
+}
 </style>
 <style lang="scss" scoped></style>

src/views/task/components/view/table.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="eventTable">
+    <div>
+      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header">
+        <el-table-column label="#" width="60" type="index" align="center">
+          <template slot-scope="scope">
+            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
+              <el-link @click="handleItem(scope.row,item.key)">{{ scope.row[item.key] }}</el-link>
+            </div>
+            <div v-else v-html="getColumnData(scope.row,item.key)"></div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="operation" label="操作" align="center" width="180px">
+				  <template slot-scope="scope">	
+					<div>
+						 <span><el-button size="mini" @click="handleEdit(scope.row)">处理</el-button></span> 
+						 <span v-if="scope.row.type!=0">
+							 <el-popconfirm 
+								  style="margin-left: 10px;"
+									title="这一条任务确定完成吗？" 
+									confirm-button-text='确定'
+									cancel-button-text='取消'
+									@confirm="handleFinish(scope.row)">
+								<el-button size="mini" slot="reference"  type="primary">确认完成</el-button>
+								</el-popconfirm>
+						 </span>
+					</div>
+				  </template>
+			  </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isOperate: {//控制显示
+      type: String,
+      default:''
+    },
+    tableData: {//数据
+      type: Array,
+      default: () => {
+        return [{ name: '123', eventNumber: 2, projectNumber: 3, projectNumber1: [{ name: '场景一' }, {name:'场景二'}]},]
+      }
+    },
+    queryParams: {//分页信息
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          current: 1,
+        }
+      }
+    },
+    column: {//显示栏位管理数组
+      type: Array,
+      default: () => {
+        return [
+          {
+            "key": "name",
+            "name": "事件名称",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "eventNumber",
+            "name": "相关报告数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber",
+            "name": "相关专题库数量",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber1",
+            "name": "事件场景",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber2",
+            "name": "事件时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber3",
+            "name": "描述",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "projectNumber4",
+            "name": "创建人",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+          {
+            "key": "time",
+            "name": "创建时间",
+            "type": "list",
+            "order": 0,
+            "hidden": true
+          },
+        ]
+      }
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  watch: {
+    
+  },
+  mounted() {
+   
+  },
+  methods: {
+    handleFinish() { },
+    // 处理事件
+    handleEdit(){},
+    // 点击名称等事件
+    handleItem(row,key) {
+      // console.log(row,key);
+    },
+    // 
+    getColumnData(row,key) {
+      if (key == 'projectNumber1') {
+        if (row[key]) {
+          var a=''
+          row[key].forEach(item => {
+            a+=item.name + '</br>'
+          });
+          return a
+        } else {
+          return ''
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.eventTable {
+
+}
+</style>
+<style lang="scss" scoped></style>