OKR页面功能

package.json

@@ -20,12 +20,14 @@
     "element-ui": "^2.14.1",
     "js-md5": "^0.7.3",
     "lockr": "^0.8.5",
+    "mavon-editor": "^2.9.1",
     "quasar": "^1.0.0",
     "relation-graph": "^1.0.8",
     "v-viewer": "^1.5.1",
     "vue-amap": "^0.5.10",
     "vue-easytable": "^1.7.2",
     "vue-i18n": "^8.0.0",
+    "vue-inline-svg": "^2.0.0",
     "xlsx": "^0.16.8",
     "xlsx-style": "^0.8.13"
   },

public/static/UE/ueditor.all.js

@@ -6920,9 +6920,11 @@ var fillCharReg = new RegExp(domUtils.fillChar, 'g');
                     '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +
                     //设置默认字体和字号
                     //font-family不能呢随便改，在safari下fillchar会有解析问题
-                    'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
+                    'body{margin:8px;font-family:sans-serif;font-size:14px;}' +
                     //图片最大宽度
                     'img{max-width: 100%;height:auto;}' +
+                    'a{border-bottom:1px solid #1296db;cursor: pointer;}' +
+                    "li::marker{color:#2961fe;font-family:pingfang;font-weight:bold}"+
                     //设置段落间距
                     'p{margin:5px 0;}</style>' +
                     ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +

quasar.conf.js

@@ -145,7 +145,8 @@ module.exports = function (ctx) {
         'QCheckbox',
         'QTree',
         'QOptionGroup',
-        'QRadio'
+        'QRadio',
+        'QBtnGroup'
       ],
       // directives: [],
 

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_ctho1lelfhe.css');
+@import url('//at.alicdn.com/t/font_2077629_r9bz8pay7o.css');
 
 html,
 body,
@@ -23,6 +23,9 @@ body,
     font-family: -apple-system,BlinkMacSystemFont,'pingfang',' Microsoft YaHei',"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
     color: #3f4254;
 }
+.q-position-engine{
+    z-index: 9999;
+}
 .remark-font{
     font-size:12px;
     font-family: Poppins,Helvetica,sans-serif;
@@ -39,7 +42,7 @@ body,
 }
 .svg-icon.svg-icon-grey g [fill] {
     transition: fill .3s ease;
-    fill:grey!important;
+    fill:#ccc!important;
 }
 .svg-icon.svg-icon-warning g [fill] {
     transition: fill .3s ease;
@@ -53,10 +56,84 @@ body,
     transition: fill .3s ease;
     fill:var(--q-color-accent) !important;
 }
+.svg-icon.svg-icon-dark g [fill] {
+    transition: fill .3s ease;
+    fill:var(--q-color-dark) !important;
+}
+.svg-icon.svg-icon-orange g [fill] {
+    transition: fill .3s ease;
+    fill:rgb(255, 152, 0) !important;
+}
 .svg-icon.svg-icon-positive g [fill] {
     transition: fill .3s ease;
     fill:var(--q-color-positive) !important;
 }
+.svg-icon.svg-icon-white g [fill] {
+    transition: fill .3s ease;
+    fill:white !important;
+}
+.svg-icon.svg-icon-g-p g [fill] {
+    transition: fill .3s ease;
+    fill:grey !important;
+}
+.svg-icon.svg-icon-g-p{
+    cursor: pointer;
+}
+.svg-icon.svg-icon-g-p:hover g [fill] {
+    transition: fill .3s ease;
+    fill:var(--q-color-primary) !important;
+}
+.svg-icon.svg-icon-b-p g [fill] {
+    transition: fill .3s ease;
+    fill:#000 !important;
+}
+.svg-icon.svg-icon-b-p{
+    cursor: pointer;
+}
+.svg-icon.svg-icon-b-p:hover g [fill] {
+    transition: fill .3s ease;
+    fill:var(--q-color-primary) !important;
+}
+.hover-primary:hover .svg-icon g [fill]{
+    transition: fill .3s ease;
+    fill:white !important;
+}
+.hover-primary:hover .q-avatar{
+    background-color: var(--q-color-primary) !important;
+}
+.hover-primary:hover{
+    color: var(--q-color-primary) !important;
+}
+.hover-d-p{
+    cursor: pointer;
+    color:var(--q-color-dark) !important;
+}
+.hover-d-p .svg-icon g [fill]{
+    transition: fill .3s ease;
+    fill:var(--q-color-dark) !important;
+}
+.hover-d-p:hover{
+    color:var(--q-color-primary) !important;
+}
+.hover-d-p:hover .svg-icon g [fill]{
+    transition: fill .3s ease;
+    fill:var(--q-color-primary) !important;
+}
+.hover-g-p{
+    cursor: pointer;
+    color:#ccc !important;
+}
+.hover-g-p .svg-icon g [fill]{
+    transition: fill .3s ease;
+    fill:#ccc !important;
+}
+.hover-g-p:hover{
+    color:var(--q-color-primary) !important;
+}
+.hover-g-p:hover .svg-icon g [fill]{
+    transition: fill .3s ease;
+    fill:var(--q-color-primary) !important;
+}
 .text-muted {
     color: #B5B5C3 !important;
 }
@@ -75,22 +152,24 @@ body,
     font-family: "perfectFont";
 }
 
-.page-content .q-table__container .scroll::-webkit-scrollbar {
+.page-content .q-table__container .scroll::-webkit-scrollbar,
+.myscroll::-webkit-scrollbar {
     width: 10px;
     height: 5px;
 }
 
-.page-content .q-table__container .scroll::-webkit-scrollbar-thumb {
+.page-content .q-table__container .scroll::-webkit-scrollbar-thumb,
+.myscroll::-webkit-scrollbar-thumb {
     border-radius: 10px;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     background: #535353;
 }
 
-.page-content .q-table__container .scroll::-webkit-scrollbar-track {
+.page-content .q-table__container .scroll::-webkit-scrollbar-track,
+.myscroll::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     background: #EDEDED;
-
 }
 
 .micfont {

src/api/okr/work.js

+import request from '../../utils/request'
+
+/**
+ * 获取OKR左侧人员列表
+ * @param {JSON参数} data 
+ */
+export function queryOKRMyEmployeeList(data) {
+  return request({
+    url: '/OKRPeriod/GetOKRMyEmployeeList',
+    method: 'post',
+    data
+  })
+}
+/**
+ * 查询已存在的指定人员的Objective
+ * @param {*} data 
+ */
+export function queryOKRPeriodList(data) {
+  return request({
+    url: '/OKRPeriod/GetOKRPeriodList',
+    method: 'post',
+    data
+  })
+}
+/**
+ * 新增目标
+ * @param {*} data 
+ */
+export function saveMyObjective(data) {
+  return request({
+    url: '/OKRPeriod/SgetOKRMyObjectiveInfo',
+    method: 'post',
+    data
+  })
+}
+/**
+ * 新增KR
+ * @param {*} data 
+ */
+export function saveMyKR(data) {
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultInfo',
+    method: 'post',
+    data
+  })
+}
+export function queryMyOKR(data) {
+  return request({
+    url: '/OKRPeriod/GetOKRMyObjectiveList',
+    method: 'post',
+    data
+  })
+}
+export function deleteMyKR(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultDel',
+    method: 'post',
+    data
+  })
+}
+export function querySignObject(data){
+  return request({
+    url: '/OKRPeriod/GetOKRMyObjectiveInfo',
+    method: 'post',
+    data
+  })
+}
+export function saveKRWeight(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultWeight',
+    method: 'post',
+    data
+  })
+}
+export function setKRProgressState(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultState',
+    method: 'post',
+    data
+  })
+}
+export function setKRProgress(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultProgress',
+    method: 'post',
+    data
+  })
+}
+export function setKRScore(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyKeyResultScore',
+    method: 'post',
+    data
+  })
+}
+export function setObjectiveProgress(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyObjectiveState',
+    method: 'post',
+    data
+  })
+}
+export function queryPower(data){
+  return request({
+    url: '/OKRPeriod/GetOKRPermissionList',
+    method: 'post',
+    data
+  })
+}
+export function setPower(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRPermissionInfo',
+    method: 'post',
+    data
+  })
+}
+export function queryDefaultStatus(data){
+  return request({
+    url: '/OKRPeriod/GetOKRDefaultPermissionInfo',
+    method: 'post',
+    data
+  })
+}
+export function setDefaultStatus(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRDefaultPermissionInfo',
+    method: 'post',
+    data
+  })
+}
+export function queryObjectiveBySearch(data){
+  return request({
+    url: '/OKRPeriod/GetOKROthersObjectiveDropListByName',
+    method: 'post',
+    data
+  })
+}
+export function setAlign(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyObjectiveParent',
+    method: 'post',
+    data
+  })
+}
+export function deleteAlign(data){
+  return request({
+    url: '/OKRPeriod/SgetOKRMyObjectiveParentCancel',
+    method: 'post',
+    data
+  })
+}
+export function setComment(data){
+  return request({
+    url: '/OKRPeriod/SetComment',
+    method: 'post',
+    data
+  })
+}
+export function queryComment(data){
+  return request({
+    url: '/OKRPeriod/GetCommentPageList',
+    method: 'post',
+    data
+  })
+}
+export function setCommentStatus(data){
+  return request({
+    url: '/OKRPeriod/SetCommentStatus',
+    method: 'post',
+    data
+  })
+}
+export function queryAlignList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRMyEmployeeAlignList',
+    method: 'post',
+    data
+  })
+}
+export function queryOtherObjectiveList(data){
+  return request({
+    url: '/OKRPeriod/GetOKROthersObjectiveList',
+    method: 'post',
+    data
+  })
+}
+export function setUserLike(data){
+  return request({
+    url: '/OKRPeriod/SgetOKREmployeeAttention',
+    method: 'post',
+    data
+  })
+}
+export function queryUserIsLike(data){
+  return request({
+    url: '/OKRPeriod/GetOKREmployeeAttention',
+    method: 'post',
+    data
+  })
+}
+export function setObjectiveState(data){
+  return request({
+    url: '/OKRPeriod/SetOKRObjectiveAuditAgain',
+    method: 'post',
+    data
+  })
+}
+export function getMyAuditUsersList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRMyEmployeeAuditList',
+    method: 'post',
+    data
+  })
+}
+export function getMyAuditList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRObjectiveAuditList',
+    method: 'post',
+    data
+  })
+}
+export function setObjectiveStatus(data){
+  return request({
+    url: '/OKRPeriod/SetOKRObjectiveAudit',
+    method: 'post',
+    data
+  })
+}

src/components/editor/UeEditor.vue

@@ -21,7 +21,7 @@
       //插入图片图标
       labelIcon: {
         type: String,
-        default: '插入图片',
+        default: '插入图片', 
       },
       //是否显示插入图片
       isShowInsertImage: {
@@ -42,6 +42,14 @@
       config: {
         type: Object
       },
+      noMargin: {
+        type: Boolean,
+        default: false
+      },
+      placeHolder: {
+        type: String,
+        default: '请输入内容', 
+      },
     },
     components: {
       appAttachment
@@ -62,6 +70,7 @@
           if (this.ue) {
             if (this.ue.isReady !== 1) {
               let self = this;
+              
               let time = setInterval(() => {
                 //循环查
                 if (self.ue.isReady === 1) {
@@ -84,6 +93,9 @@
       this.loadUe();
     },
     methods: {
+      focus(){
+        this.ue.focus(true)
+      },
       //关闭上传文件弹窗
       attachmentClosed() {
         this.attachmentDialogVisible = false;
@@ -208,10 +220,17 @@
           });
         }
         this.ue = UE.getEditor(this.id, this.config);
+       
         this.ue.addListener('ready', editor => {
+          this.$emit("ready")
           if (this.tempContent) {
             this.ue.setContent(this.tempContent);
           }
+          if(this.noMargin){
+           UE.dom.domUtils.setStyles(this.ue.body, {
+              'margin': '0px'
+              });
+          }
         });
         this.ue.addListener('keyup', editor => {
           this.isInputChange = true;
@@ -221,6 +240,13 @@
           this.isInputChange = true;
           this.$emit('input', this.ue.getContent());
         });
+        this.ue.addListener('blur', editor => {
+          this.isInputChange = true;
+          this.$emit('blur',this.ue.getContent());
+        });
+        this.ue.addListener('focus', editor => {
+          this.$emit('focus');
+        });
       }
     },
   }

src/components/global/none-data.vue

 <template>
   <div class="q-mt-lg flex column justify-center items-center">
-    <inline-svg class="svg-icon svg-icon-positive" src="icons/svg/General/Clipboard.svg" width="50px" height="50px"></inline-svg>
+    <inline-svg class="svg-icon svg-icon-info" src="icons/svg/General/Clipboard.svg" width="50px" height="50px"></inline-svg>
     <span class="q-mt-md remark-font">没有找到相关数据信息</span>
   </div>
 </template>

src/components/okr/align-info.vue

+<template>
+  <div style="width:480px">
+    <div class="q-pa-md flex row items-center">
+      <q-avatar
+        size="34px"
+        font-size="18px"
+        rounded
+        color="blue-2"
+        text-color="blue-13"
+      >
+        <img :src="align.Icon" v-if="align.Icon" />
+        <span v-else-if="align.AccountName">{{
+          align.AccountName.substring(0, 1)
+        }}</span>
+      </q-avatar>
+      <div class="col text-subtitle2 q-ml-md">{{ align.AccountName }}</div>
+      <div class="text-primary cursor-pointer" @click="openObjective(align)">查看详情</div>
+    </div>
+    <div
+      class="q-py-md"
+      style="border-top:1px solid #eee"
+      v-for="(x, i) in align.AlignList"
+      :key="i"
+    >
+      <div class="flex row item-center">
+        <div style="width:26px;padding-left:6px;">
+          <inline-svg
+            v-if="x.IsLock == 1"
+            class="svg-icon svg-icon-grey"
+            src="icons/svg/General/Lock.svg"
+            width="14px"
+            height="14px"
+            style="margin-top: 5px;"
+          ></inline-svg>
+          <q-tooltip content-class="bg-dark text-white" v-if="x.IsLock == 1"
+            >已设保密，请勿外出</q-tooltip
+          >
+        </div>
+        <div class="col text-subtitle2 text-weight-bold">{{ x.Title }}</div>
+        <div class="text-primary q-mx-md cursor-pointer" @click="cancelAlign(x.Id,i)" v-if="canDel && !showOnly">取消对齐</div>
+      </div>
+      <template v-for="(y, yi) in x.KeyResultList">
+        <div
+          class="flex q-pa-xs flex row items-center"
+          v-if="y.IsNotLook != 1"
+          :key="yi"
+        >
+          <div style="width:20px;margin-left: 20px;">
+            <inline-svg
+              class="svg-icon svg-icon-primary"
+              src="icons/svg/Design/Circle.svg"
+              width="8px"
+              height="8px"
+              v-if="y.IsLock == 2"
+            ></inline-svg>
+            <inline-svg
+              class="svg-icon svg-icon-grey"
+              src="icons/svg/General/Lock.svg"
+              width="14px"
+              height="14px"
+              style="margin-top:5px"
+              v-if="y.IsLock == 1"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark text-white" v-if="y.IsLock == 1"
+            >已设保密，请勿外出</q-tooltip
+          >
+          </div>
+          <div class="col">{{ y.Name }}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import {deleteAlign} from "../../api/okr/work";
+export default {
+  props: ["align", "sourceId",'num','canDel','showOnly'],
+  data() {
+    return {};
+  },
+  methods: {
+    openObjective(x){
+      let obj={
+        Id:x.AccountId,
+        EmployeeName:x.AccountName,
+        UserIcon:x.Icon
+      }
+      this.$root.$emit("openUserObj",obj)
+    },
+    cancelAlign(id, i) {
+      deleteAlign({
+        ObjectiveId: this.sourceId,
+        ParentId: id
+      }).then(r => {
+        this.align.AlignList.splice(i, 1);
+        let t={
+            num:this.num,
+            AlignList:this.align.AlignList
+        }
+        this.$$emit('delete',t)
+        this.$forceUpdate()
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/history-comment.vue

+<template>
+  <div style="width:360px;max-height:480px">
+    <div class="q-pa-md" style="border:1px solid #eee;" v-for="(x,i) in commitsList">
+      <div class="flex row items-center">
+        <div class="col">{{x.UpdateByName}}已解决此评论</div>
+        <div class="text-primary q-mx-md cursor-pointer col-auto" @click="deleteCommmit(x.Id,i)">重新打开</div>
+      </div>
+      <div
+        class="q-pa-xs bg-grey-3 rounded-borders q-mt-xs"
+        style="padding-left:8px;"
+      >
+        <div
+          class="text-grey-7 q-pl-md"
+          style="border-left:2px solid #9e9e9e;height:20px;"
+        >
+          评论
+        </div>
+      </div>
+      <div class="flex row items-center q-mt-md">
+        <q-avatar
+          size="25px"
+          font-size="16px"
+          rounded
+          color="orange-2"
+          text-color="orange"
+          class="q-mr-xs"
+        >
+          <img :src="x.CreateByIco" v-if="x.CreateByIco" />
+          <span v-else-if="x.CreateByName">{{
+            x.CreateByName.substring(0, 1)
+          }}</span>
+        </q-avatar>
+        <div class="remark-font col q-mx-xs">{{ x.CreateByName }}</div>
+        <div class="remark-font">{{x.CreateTimeStr}}</div>
+      </div>
+      <div style="padding-left:30px;margin-top:10px;">
+        {{decodeURIComponent(x.Content)}}
+      </div>
+    </div>
+    <div class="q-my-lg text-center" v-if="commitsList.length==0">
+        <img src="../../assets/images/history.png" width="80px" />
+        <div class="text-center q-mt-md remark-font">已解决的评论会存档在这里</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryComment,setCommentStatus } from "../../api/okr/work";
+export default {
+  props: ["periodId", "accountId"],
+  data() {
+    return {
+      CreateByIco: null,
+      CreateByName: "罗超",
+      commitsList:[],
+      queryParmam: {
+        PageIndex: 1,
+        PageSize: 1000,
+        School_Id: 0,
+        PeriodId: 0,
+        State: 2,
+        AccountId:0
+      }
+    };
+  },
+  watch: {
+    periodId: {
+      handler(newV, oldV) {
+        this.queryParmam.PeriodId = newV;
+        this.queryCommit();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.queryParmam.PeriodId = this.periodId;
+    this.queryParmam.AccountId = this.accountId;
+    this.queryCommit();
+    
+  },
+  methods: {
+    deleteCommmit(Id, i) {
+      setCommentStatus({
+        Id,
+        State:1
+      }).then(r => {
+        this.commitsList.splice(i, 1);
+        this.$emit('change')
+      });
+    },
+    queryCommit() {
+      queryComment(this.queryParmam).then(r => {
+        this.commitsList = r.Data.PageData;
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/objective-process.vue

+<template>
+  <q-card class="q-pa-md">
+    <div class="text-subtitle2 text-weight-bold flex row">
+        <span class="q-mr-md">当前进度：{{obj.Progress}}%</span>
+        <span style="padding-top:2px;">
+            <inline-svg
+                class="svg-icon svg-icon-g-p"
+                src="icons/svg/Code/Warning-1-circle.svg"
+                width="16px"
+                height="16px"
+            ></inline-svg>
+            <q-tooltip content-class="bg-black text-white">
+              根据 Key Result 的进度和权重计算得出
+            </q-tooltip>
+        </span>
+    </div>
+    <q-separator class="q-my-md"></q-separator>
+    <div class="text-subtitle2 text-weight-bold q-mb-md">默认状态</div>
+    <div class="q-mb-md">
+      <q-radio
+        keep-color
+        v-model="status"
+        size="xs"
+        val="0"
+        label="风险最高的 Key Result 状态"
+        color="black"
+      />
+    </div>
+    <div class="text-subtitle2 text-weight-bold q-mb-md">自定义状态</div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="status"
+        size="xs"
+        val="1"
+        label="正常"
+        color="primary"
+      />
+    </div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="status"
+        size="xs"
+        val="2"
+        label="有风险"
+        color="warning"
+      />
+    </div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="status"
+        size="xs"
+        val="3"
+        label="已延期"
+        color="negative"
+      />
+    </div>
+  </q-card>
+</template>
+
+<script>
+export default {
+    props:["obj"],
+    data() {
+        return {
+            status:0
+        }
+    },
+    mounted() {
+        console.log(this.obj)
+        if(this.obj.IsDefaultState==1){
+            this.status='0'
+        }else{
+            this.status=this.obj.ProgressState.toString()
+        }
+    },
+    beforeDestroy() {
+        this.$emit("close",this.status)
+    },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/components/okr/okr-align.vue

+<template>
+  <div class="absolute flex row " style="width:500px;z-index:999;" :style="{'left':direction=='up'?'15px':'15px','top':direction=='up'?'-16px':'11px'}">
+    <svg
+      width="24px"
+      height="24px"
+      style="margin-right:8px"
+      :style="{'transform':direction=='up'?'rotate(0deg)':'rotateX(180deg)','margin-top':direction=='up'?'7px':'4px'}"
+      viewBox="0 0 24 24"
+      version="1.1"
+      v-if="!showOnly || (showOnly && obj.ParentList.length>0 && direction=='up')||(showOnly && obj.ChildList.length>0 && direction=='down')"
+    >
+      <g
+        id="shangduiqi"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <path
+          d="M21.1160533,2.07953591 C9.847689,3.03519298 1,12.4843522 1,24 L0,24 C0,11.9510478 9.2650232,2.06605774 21.0593866,1.08071282 C21.2407969,0.456342432 21.8171062,0 22.5,0 C23.3284271,0 24,0.671572875 24,1.5 C24,2.32842712 23.3284271,3 22.5,3 C21.8770146,3 21.3427332,2.62021284 21.1160533,2.07953591 Z"
+          id="Combined-Shape"
+          fill="rgb(191,208,255)"
+          fill-rule="nonzero"
+        ></path>
+      </g>
+    </svg>
+    <template v-for="(x, i) in obj.ParentList">
+      <div
+        class="hover-primary remark-font cursor-pointer q-mr-xs"
+        :style="{'margin-top':direction=='up'?'0px':'20px'}"
+        v-if="x.AlignList.length > 0 && direction=='up'"
+        :key="i"
+      >
+        <span>{{ x.AccountName }}</span
+        ><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
+        <q-popup-proxy>
+          <align-info
+            :align="x"
+            :source-id="obj.Id"
+            :num="i"
+            @delete="delAlign"
+            :ref="`align_info_${i}`"
+            :can-del="true"
+            :show-only="showOnly"
+          ></align-info>
+        </q-popup-proxy>
+      </div>
+    </template>
+    <template  v-for="(x, i) in obj.ChildList">
+      <div
+        class="hover-primary remark-font cursor-pointer q-mr-xs"
+        :style="{'margin-top':direction=='up'?'0px':'18px'}"
+        v-if="x.AlignList.length > 0 && direction=='down'"
+        :key="i"
+      >
+        <span>{{ x.AccountName }}</span
+        ><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
+        <q-popup-proxy>
+          <align-info
+            :align="x"
+            :source-id="obj.Id"
+            :num="i"
+            @delete="delAlign"
+            :ref="`align_info_${i}`"
+            :can-del="false"
+          ></align-info>
+        </q-popup-proxy>
+      </div>
+    </template>
+    <div class="hover-primary remark-font cursor-pointer" v-if="direction=='up' && !showOnly">
+      <q-icon
+        name="iconfont icon-add"
+        class="cursor-pointer"
+        size="12px"
+      ></q-icon>
+      <span>添加对齐</span>
+      <q-popup-proxy style="z-index: 9999;">
+        <search-okr :period-id="periodId" :source-id="obj.Id" @add="addNewAlign"></search-okr>
+      </q-popup-proxy>
+    </div>
+  </div>
+</template>
+
+<script>
+import searchOkr from "./search-okr";
+import alignInfo from "./align-info";
+export default {
+  props: ["obj", "periodId",'direction','showOnly'],
+  components: {
+    searchOkr,
+    alignInfo
+  },
+  methods: {
+    delAlign(r) {
+      obj.ParentList[r.num].AlignList = r.AlignList ? r.AlignList : [];
+      if (!r.AlignList || r.AlignList.length == 0) {
+        this.$refs[`align_info_${r.num}`].hide();
+      }
+    },
+    addNewAlign(r) {
+      let isHave = false;
+      this.obj.ParentList.forEach(x => {
+        if (x.AccountName == r.AccountName) {
+          x.AlignList.push(r.AlignList[0]);
+          isHave = true;
+        }
+      });
+      if (!isHave) {
+        this.obj.ParentList.push(r);
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/okr-commit.vue

+<template>
+  <div class="q-my-xl q-mr-md">
+    <div class="text-h6 q-pb-md" style="border-bottom:1px solid #dedede" v-if="commitsList && commitsList.length>0">
+      评论
+    </div>
+    <q-card flat v-for="(x, i) in commitsList" :key="i" class=" q-mt-md">
+      <q-card-section>
+        <div class="flex row items-center">
+          <q-avatar
+            size="40px"
+            font-size="18px"
+            rounded
+            color="orange-2"
+            text-color="orange"
+            class="text-weight-bold"
+          >
+            <img :src="x.CreateByIco" v-if="x.CreateByIco" />
+            <span v-else-if="x.CreateByName">{{
+              x.CreateByName.substring(0, 1)
+            }}</span>
+          </q-avatar>
+          <div class="col q-ml-md">
+            <div class="text-subtitle1">{{ x.CreateByName }}</div>
+            <div class="remark-font">{{ x.CreateTimeStr }}</div>
+          </div>
+          <div class="col-auto flex row" v-if="!showOnly">
+            <div
+              class="q-mr-md"
+              style="margin-top:3px;"
+              @click="deleteCommmit(x.Id, 2, i)"
+            >
+              <q-icon
+                color="dark"
+                size="16px;"
+                name="iconfont icon-dagou"
+              ></q-icon>
+              <q-tooltip content-class="bg-dark text-white"
+                >标为解决并隐藏评论</q-tooltip
+              >
+            </div>
+            <q-btn dense flat color="white" text-color="dark">
+              <inline-svg
+                class="svg-icon svg-icon-g-p"
+                src="icons/svg/General/Other2.svg"
+                width="16px"
+                height="16px"
+              ></inline-svg>
+              <q-popup-proxy :offset="[0, 5]">
+                <q-list separator style="width:120px;">
+                  <q-item
+                    class="items-center"
+                    clickable
+                    v-ripple
+                    @click="deleteCommmit(x.Id, 3, i)"
+                  >
+                    <q-item-section avatar>
+                      <inline-svg
+                        class="svg-icon svg-icon-g-p"
+                        src="icons/svg/Home/Trash.svg"
+                        width="20px"
+                        height="20px"
+                      ></inline-svg>
+                    </q-item-section>
+                    <q-item-section>删除</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-popup-proxy>
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-md">
+          {{ decodeURIComponent(x.Content) }}
+        </div>
+      </q-card-section>
+    </q-card>
+    <!--<none-data v-if="!commitsList || commitsList.length == 0"></none-data>-->
+    <q-card flat class=" q-mt-md">
+      <q-card-section>
+        <div class="flex row items-start">
+          <q-avatar
+            size="40px"
+            font-size="18px"
+            rounded
+            color="orange-2"
+            text-color="orange"
+            class="text-weight-bold"
+          >
+            <img :src="userInfo.UserIcon" v-if="userInfo.UserIcon" />
+            <span v-else-if="userInfo.AccountName">{{
+              userInfo.AccountName.substring(0, 1)
+            }}</span>
+          </q-avatar>
+          <div class="col q-ml-md">
+            <q-input
+              flat
+              dense
+              outlined
+              v-model="comment"
+              :type="commitFocusStatus == 1 ? 'textarea' : 'input'"
+              autogrow
+              :placeholder="
+                commitFocusStatus == 1 ? '输入评论（按Enter换行）' : '添加评论'
+              "
+              @focus="commitFocusStatus = 1"
+              @blur="commitFocusStatus = 0"
+            ></q-input>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions
+        align="right"
+        class="q-pr-md q-pb-md"
+        v-if="comment.trim().length > 0"
+      >
+        <q-btn flat color="dark" @click="comment = ''">取消</q-btn>
+        <q-btn color="primary" :loading="isAdding" @click="setCommit">发 送</q-btn>
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { setComment, queryComment, setCommentStatus } from "../../api/okr/work";
+import noneData from "../global/none-data";
+export default {
+  props: ["periodId",'showOnly','currentId'],
+  computed: {
+    ...mapGetters(["userInfo"])
+  },
+  components: {
+    noneData
+  },
+  data() {
+    return {
+      commitsList: [],
+      commitFocusStatus: 0,
+      comment: "",
+      queryParmam: {
+        PageIndex: 1,
+        PageSize: 1000,
+        School_Id: 0,
+        PeriodId: this.periodId,
+        State: 1
+      },
+      isAdding: false
+    };
+  },
+  watch: {
+    periodId: {
+      handler(newV, oldV) {
+        this.queryParmam.PeriodId = newV;
+        this.queryCommit();
+      },
+      deep: true
+    },
+    currentId: {
+      handler(newV, oldV) {
+        this.queryParmam.AccountId = newV;
+        this.queryCommit();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.queryParmam.PeriodId = this.periodId;
+    this.queryParmam.AccountId = this.currentId?this.currentId:this.userInfo.Id;
+    this.queryCommit();
+    
+  },
+  methods: {
+    deleteCommmit(Id, State, i) {
+      setCommentStatus({
+        Id,
+        State
+      }).then(r => {
+        this.commitsList.splice(i, 1);
+      });
+    },
+    setCommit() {
+      if (!this.isAdding) {
+        this.isAdding=true
+        if (this.comment.trim() != "") {
+          let msg = {
+            School_Id: 0,
+            PeriodId: this.periodId,
+            Content: encodeURIComponent(this.comment),
+            AccountId: this.currentId?this.currentId:this.userInfo.Id,
+            Type: 4,
+            ParentId: 0
+          };
+          setComment(msg).then(r => {
+            this.queryCommit();
+          });
+        }
+      }
+    },
+    queryCommit() {
+      if(!this.isAdding){
+          this.commitsList = null;
+      }
+      queryComment(this.queryParmam).then(r => {
+        this.commitsList = r.Data.PageData;
+        this.isAdding=false
+        this.comment = "";
+        // this.commitsList.push({
+        //     Id:r.Data,
+        //     CreateByName:this.userInfo.AccountName,
+        //     CreateByIco:this.userInfo.UserIcon,
+        //     UpdateByName:'',
+        //     Content:this.comment,
+        //     CreateTimeStr:'刚刚'
+        // })
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/okr-emp-info.vue

+<template>
+  <div class="">
+    <div class="flex row q-mb-md" v-if="user">
+      <div class="col flex items-center row">
+        <q-avatar
+          size="40px"
+          font-size="18px"
+          rounded
+          color="positive"
+          text-color="white"
+        >
+          <img :src="user.UserIcon" v-if="user.UserIcon" />
+          <span v-else-if="user.EmployeeName">{{
+            user.EmployeeName.substring(0, 1)
+          }}</span>
+        </q-avatar>
+        <div class="text-h5 text-black q-ml-md">
+          {{ user.EmployeeName }}
+        </div>
+        <div class="q-ml-md cursor-pointer" @click="setLikeUser">
+          <inline-svg
+            class="svg-icon svg-icon-grey"
+            src="icons/svg/General/Star.svg"
+            v-if="!likeStatus"
+          ></inline-svg>
+          <inline-svg
+            class="svg-icon svg-icon-primary"
+            src="icons/svg/General/Star.svg"
+            v-if="likeStatus"
+          ></inline-svg>
+          <q-tooltip content-class="bg-dark">
+            {{ !likeStatus ? "关注" : "取消关注" }}
+          </q-tooltip>
+        </div>
+        <div class="col">&nbsp;</div>
+        <div class="flex row q-mr-md">
+          <q-btn-group outline class="q-mr-md">
+            <template v-for="(x, i) in periodList">
+              <q-btn
+                @click="changePeriod(i)"
+                :key="i"
+                class="no-border-radius relative-position"
+                outline
+                color="grey-4"
+                :class="[periodId == i ? 'action-btn' : 'no-action-btn']"
+                :label="x.Name"
+              >
+                <div
+                  class="absolute"
+                  v-if="x.isHaveAudit"
+                  style="top:-3px;right:6px;width:10px;height:10px;"
+                >
+                  <inline-svg
+                    class="svg-icon svg-icon-negative"
+                    src="icons/svg/Design/Circle.svg"
+                    width="10"
+                    height="10"
+                  ></inline-svg>
+                </div>
+              </q-btn>
+              <q-separator
+                vertical
+                v-if="i < periodList.length - 1"
+                color="grey"
+              ></q-separator>
+            </template>
+          </q-btn-group>
+          <q-btn unelevated color="white icon-btn q-mr-md">
+            <inline-svg
+              class="svg-icon svg-icon-secondary"
+              src="icons/svg/Communication/Chat6.svg"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark">
+              评论
+            </q-tooltip>
+          </q-btn>
+          <q-btn unelevated color="white icon-btn q-mr-md">
+            <inline-svg
+              class="svg-icon svg-icon-secondary"
+              src="icons/svg/Code/Spy.svg"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark">
+              填写助手
+            </q-tooltip>
+          </q-btn>
+          <q-btn unelevated color="white icon-btn">
+            <inline-svg
+              class="svg-icon svg-icon-dark"
+              src="icons/svg/General/Other2.svg"
+            ></inline-svg>
+            <q-popup-proxy :offset="[0, 5]" ref="showMoreOption">
+              <q-list separator>
+                <q-item
+                  class="items-center"
+                  @click="showHistory"
+                  clickable
+                  v-ripple
+                >
+                  <div>历史评论</div>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </q-btn>
+          <q-popup-proxy
+            ref="historyBox"
+            v-if="isShowBox"
+            @hide="hideHistory"
+            :offset="[-250, 5]"
+          >
+            <history-comment
+              :periodId="periodList[periodId].Id"
+              v-if="periodList && periodList.length > 0"
+              :accountId="user.Id"
+              @change="reloadComment"
+            ></history-comment>
+          </q-popup-proxy>
+        </div>
+      </div>
+    </div>
+    <div v-if="!reloading">
+      <okr-add
+        v-for="(x, i) in objectiveList"
+        :key="i"
+        :objective="x"
+        :show-only="true"
+        class="q-mb-lg"
+        :ref="`object_${i}`"
+        :audit-mode="auditMode"
+        @audit-notify="deleteObjective"
+        :user-id="userId"
+        @reset-audit-notify="resetStatus"
+      ></okr-add>
+    </div>
+    <div
+      style="margin-top:200px;"
+      v-if="objectiveList.length == 0 && !reloading"
+    >
+      <div class="q-mb-lg text-center">
+        <img src="../../assets/images/nonedata.png" width="250px" />
+      </div>
+      <div class="q-mb-lg text-center">暂无数据</div>
+    </div>
+    <okr-commit
+      :periodId="periodList[periodId].Id"
+      v-if="periodList && periodList.length > 0 && objectiveList.length > 0"
+      ref="commentBox"
+      :show-only="true"
+      :current-id="user.Id"
+    ></okr-commit>
+  </div>
+</template>
+
+<script>
+import {
+  queryOKRPeriodList,
+  queryOtherObjectiveList,
+  setUserLike,
+  queryUserIsLike,
+  getMyAuditList
+} from "../../api/okr/work";
+import okrAdd from "./okr-query";
+import okrCommit from "./okr-commit";
+import historyComment from "./history-comment";
+export default {
+  props: ["userObj", "auditMode", "peroids",'userId'],
+  components: {
+    okrAdd,
+    okrCommit,
+    historyComment
+  },
+  data() {
+    return {
+      periodList: [],
+      user: {},
+      periodId: 0,
+      objectiveList: [],
+      newObjective: {},
+      reloading: true,
+      isShowBox: false,
+      likeStatus: false,
+      auditPeroids: []
+    };
+  },
+  watch: {
+    userObj: {
+      handler(newV, oldV) {
+        console.log(newV);
+        this.user = newV;
+        this.init();
+        this.queryLikeState();
+      },
+      deep: true
+    },
+    auditMode: {
+      handler(newV, oldV) {
+        this.init();
+        if (newV) {
+          this.auditPeroids = this.peroids.split(",");
+        } else {
+          this.auditPeroids = [];
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.user = this.userObj;
+    console.log(this.auditMode);
+    if (this.auditMode) {
+      this.auditPeroids = this.peroids.split(",");
+      console.log(this.auditPeroids);
+    }
+  },
+  mounted() {
+    this.init();
+    this.queryLikeState();
+  },
+  methods: {
+    queryLikeState() {
+      queryUserIsLike({ UserId: this.user.Id }).then(r => {
+        this.likeStatus = r.Data;
+      });
+    },
+    hideHistory() {
+      this.isShowBox = false;
+    },
+    showHistory() {
+      this.isShowBox = true;
+      setTimeout(() => {
+        this.$refs.historyBox.show();
+        this.$refs.showMoreOption.hide();
+      }, 200);
+    },
+    changePeriod(id) {
+      this.periodId = id;
+      this.$emit("change", this.periodList[this.periodId].Id);
+      this.reloading = true;
+      if (this.auditMode) {
+        this.queryMyAudits();
+      } else {
+        this.queryMyObjective();
+      }
+    },
+    deleteObjective(id) {
+      let index = 0;
+      this.objectiveList.forEach((x, i) => {
+        if (x.Id == id) {
+          index = i;
+        }
+      });
+      this.objectiveList.splice(index, 1);
+      if(this.objectiveList.length==0){
+        this.auditPeroids.splice(this.auditPeroids.indexOf(id.toString()),1)
+        if(this.auditPeroids.length==0) {
+          this.$emit('finish',this.user.Id)
+        }
+      }
+    },
+    resetStatus(id){
+      let index = 0;
+      this.objectiveList.forEach((x, i) => {
+        if (x.Id == id) {
+          index = i;
+        }
+      });
+      let obj=this.user
+      obj.PeriodIds=this.periodList[this.periodId].Id.toString()
+      this.$emit('addAudit', obj)
+    },
+    init() {
+      queryOKRPeriodList().then(r => {
+        this.periodList = r.Data;
+        this.periodList.forEach(x => {
+          x.isHaveAudit = this.auditPeroids.indexOf(x.Id.toString()) != -1;
+        });
+        console.log(this.periodList);
+        this.$emit("change", this.periodList[this.periodId].Id);
+        if (!this.auditMode) {
+          this.queryMyObjective();
+        } else {
+          this.queryMyAudits();
+        }
+      });
+    },
+    queryMyAudits() {
+      getMyAuditList({
+        UserId: this.user.Id,
+        PeriodId: this.periodList[this.periodId].Id
+      }).then(r => {
+        this.objectiveList = r.Data;
+        this.reloading = false;
+      });
+    },
+    queryMyObjective() {
+      let msg = {
+        PeriodId: this.periodList[this.periodId].Id,
+        UserId: this.user.Id
+      };
+      queryOtherObjectiveList(msg).then(r => {
+        console.log(r);
+        if (r.Data.List && r.Data.List.length > 0) {
+          r.Data.List.forEach(x => {
+            x.PeriodId = this.periodList[this.periodId].Id;
+          });
+          this.objectiveList = r.Data.List;
+        } else {
+          this.objectiveList = [];
+        }
+        this.reloading = false;
+      });
+    },
+    reloadComment() {
+      this.$refs.commentBox.queryCommit();
+    },
+    setLikeUser() {
+      setUserLike({
+        Type: this.likeStatus ? 2 : 1,
+        UserId: this.user.Id
+      }).then(r => {
+        let obj = {
+          status: this.likeStatus ? 2 : 1,
+          user: this.user
+        };
+        this.$root.$emit("setLikes", obj);
+        this.likeStatus = !this.likeStatus;
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.action-btn .q-btn__content .block {
+  color: var(--q-color-primary) !important;
+  font-weight: bold !important;
+}
+.no-action-btn .q-btn__content .block {
+  color: var(--q-color-dark) !important;
+}
+.icon-btn .q-btn__wrapper {
+  padding: 4px 8px !important;
+}
+</style>

src/components/okr/okr-info.vue

+<template>
+  <div class="">
+    <div class="flex row q-mb-md" v-if="user">
+      <div class="col flex items-center row">
+        <q-avatar
+          size="40px"
+          font-size="18px"
+          rounded
+          color="positive"
+          text-color="white"
+        >
+          <img :src="user.UserIcon" v-if="user.UserIcon" />
+          <span v-else-if="user.EmployeeName">{{
+            user.EmployeeName.substring(0, 1)
+          }}</span>
+        </q-avatar>
+        <div class="text-h5 text-black q-ml-md col">
+          {{ user.EmployeeName }}
+        </div>
+        <div class="flex row q-mr-md">
+          <q-btn-group outline class="q-mr-md">
+            <template v-for="(x, i) in periodList">
+              <q-btn
+                @click="changePeriod(i)"
+                :key="i"
+                class="no-border-radius"
+                outline
+                color="grey-4"
+                :class="[periodId == i ? 'action-btn' : 'no-action-btn']"
+                :label="x.Name"
+              />
+              <q-separator
+                vertical
+                v-if="i < periodList.length - 1"
+                color="grey"
+              ></q-separator>
+            </template>
+          </q-btn-group>
+          <q-btn unelevated color="white icon-btn q-mr-md">
+            <inline-svg
+              class="svg-icon svg-icon-secondary"
+              src="icons/svg/Communication/Chat6.svg"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark">
+              评论
+            </q-tooltip>
+          </q-btn>
+          <q-btn unelevated color="white icon-btn q-mr-md">
+            <inline-svg
+              class="svg-icon svg-icon-secondary"
+              src="icons/svg/Code/Spy.svg"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark">
+              填写助手
+            </q-tooltip>
+          </q-btn>
+          <q-btn unelevated color="white icon-btn">
+            <inline-svg
+              class="svg-icon svg-icon-dark"
+              src="icons/svg/General/Other2.svg"
+            ></inline-svg>
+            <q-popup-proxy :offset="[0, 5]" ref="showMoreOption">
+              <q-list separator>
+                <q-item
+                  class="items-center"
+                  clickable
+                  v-ripple
+                  @click="openPower"
+                  >周期权限设置</q-item
+                >
+                <q-item class="items-center" clickable v-ripple
+                  >历史版本</q-item
+                >
+                <q-item
+                  class="items-center"
+                  @click="showHistory"
+                  clickable
+                  v-ripple
+                >
+                  <div>历史评价</div>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </q-btn>
+          <q-popup-proxy ref="historyBox" v-if="isShowBox"  @hide="hideHistory" :offset="[-250,5]">
+            <history-comment :periodId="periodList[periodId].Id" v-if="periodList && periodList.length > 0" :accountId="user.Id" @change="reloadComment"></history-comment>
+          </q-popup-proxy>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!reloading">
+      <okr-add
+        v-for="(x, i) in objectiveList"
+        :key="i"
+        :objective="x"
+        @delete="deleteObjective"
+        @cancel="changeUpdate"
+        class="q-mb-lg"
+        :ref="`object_${i}`"
+      ></okr-add>
+    </div>
+    <!-- <okr-add
+      :objective="newObjective"
+      v-if="adding && !reloading"
+      @cancel="changeUpdate"
+    ></okr-add> -->
+    <div
+      style="margin-top:200px;"
+      v-if="objectiveList.length == 0 && !reloading"
+    >
+      <div class="q-mb-lg text-center">
+        <img src="../../assets/images/nonedata.png" width="250px" />
+      </div>
+      <div class="q-mb-lg text-center">暂无数据</div>
+      <div class="q-mb-lg text-center">
+        <q-btn unelevated color="primary" @click="createNewObjective()">
+          <inline-svg
+            class="svg-icon svg-icon-white  q-mr-xs"
+            src="icons/svg/Navigation/Plus.svg"
+          ></inline-svg>
+          添加 Objective
+        </q-btn>
+      </div>
+    </div>
+    <div
+      class="q-my-md q-mr-md cursor-pointer"
+      @click="createNewObjective"
+      v-else
+    >
+      <q-banner class="bg-white" rounded>
+        <div class="row items-center hover-primary">
+          <q-avatar
+            style="background-color: #eaeaea;"
+            rounded
+            size="30px"
+            class="q-mr-md"
+          >
+            <inline-svg
+              class="svg-icon svg-icon-white  q-mr-xs"
+              src="icons/svg/Navigation/Plus.svg"
+            ></inline-svg>
+          </q-avatar>
+          <span class="text-subtitle2">添加 Objective</span>
+        </div>
+      </q-banner>
+    </div>
+    <okr-commit
+      :periodId="periodList[periodId].Id"
+      v-if="periodList && periodList.length > 0"
+      ref="commentBox"
+    ></okr-commit>
+    <q-dialog v-model="showPower">
+      <kr-power
+        :kr="krPwoerInfo"
+        :type="powerType"
+        @save="saveFinish"
+      ></kr-power>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { queryOKRPeriodList, queryMyOKR } from "../../api/okr/work";
+import okrAdd from "./okr-add";
+import krPower from "./kr-power";
+import okrCommit from "./okr-commit";
+import historyComment from "./history-comment";
+export default {
+  props: ["userObj"],
+  components: {
+    okrAdd,
+    krPower,
+    okrCommit,
+    historyComment
+  },
+  data() {
+    return {
+      periodList: [],
+      user: {},
+      periodId: 0,
+      objectiveList: [],
+      newObjective: {},
+      reloading: true,
+      showPower: false,
+      krPwoerInfo: {},
+      powerType: 3,
+      isShowBox: false
+    };
+  },
+  watch: {
+    userObj: {
+      handler(newV, oldV) {
+        this.user = newV;
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.init();
+     this.user =this.userObj
+  },
+  methods: {
+    hideHistory() {
+      this.isShowBox = false;
+    },
+    showHistory() {
+      this.isShowBox = true;
+      setTimeout(() => {
+        this.$refs.historyBox.show();
+        this.$refs.showMoreOption.hide();
+      }, 200);
+    },
+    changePeriod(id) {
+      this.periodId = id;
+      this.$emit("change",this.periodList[this.periodId].Id)
+      this.reloading = true;
+      this.queryMyObjective();
+    },
+    deleteObjective(id) {
+      let index = 0;
+      this.objectiveList.forEach((x, i) => {
+        if (x.Id == id) {
+          index = i;
+        }
+      });
+      this.objectiveList.splice(index, 1);
+    },
+    openPower() {
+      this.krPwoerInfo = this.periodList[this.periodId];
+      this.powerType = 1;
+      this.showPower = true;
+    },
+    saveFinish() {
+      this.showPower = false;
+    },
+    init() {
+      queryOKRPeriodList().then(r => {
+        this.periodList = r.Data;
+        this.$emit("change",this.periodList[this.periodId].Id)
+        this.queryMyObjective();
+      });
+    },
+    queryMyObjective() {
+      let msg = {
+        PeriodId: this.periodList[this.periodId].Id
+      };
+      queryMyOKR(msg).then(r => {
+        r.Data.forEach(x => {
+          x.PeriodId = this.periodList[this.periodId].Id;
+        });
+        this.objectiveList = r.Data;
+        this.reloading = false;
+      });
+    },
+    createNewObjective() {
+      if (
+        this.objectiveList.length == 0 ||
+        this.objectiveList[this.objectiveList.length - 1].Id != 0
+      ) {
+        this.newObjective = {
+          Id: 0,
+          Title: "",
+          PeriodId: this.periodList[this.periodId].Id,
+          ProgressRemark: "",
+          placeHolder: ""
+        };
+        this.objectiveList.push(this.newObjective);
+        setTimeout(() => {
+          let keyn = `object_${this.objectiveList.length - 1}`;
+          this.$refs[keyn][0].$refs.obj_content.focus();
+        }, 200);
+      } else {
+        let keyn = `object_${this.objectiveList.length - 1}`;
+        console.log(this.$refs[keyn]);
+        this.$refs[keyn][0].$refs.obj_content.focus();
+      }
+    },
+    changeUpdate() {
+      this.objectiveList.splice(this.objectiveList.length - 1, 1);
+    },
+    reloadComment(){
+      this.$refs.commentBox.queryCommit()
+    }
+  }
+};
+</script>
+
+<style>
+.action-btn .q-btn__content .block {
+  color: var(--q-color-primary) !important;
+  font-weight: bold !important;
+}
+.no-action-btn .q-btn__content .block {
+  color: var(--q-color-dark) !important;
+}
+.icon-btn .q-btn__wrapper {
+  padding: 4px 8px !important;
+}
+</style>

src/components/okr/okr-process.vue

+<template>
+  <q-card class="q-pa-md">
+    <div v-if="kr.IsEasyMode == 1">
+      <div class="text-subtitle2 text-weight-bold">当前进度</div>
+      <q-input
+        dense
+        autofocus
+        v-model="kr.progressTemp"
+        @keyup="validateInput2"
+      >
+        <template v-slot:append>
+          <inline-svg
+            class="svg-icon svg-icon-primary"
+            src="icons/svg/Shopping/Sale1.svg"
+          ></inline-svg>
+        </template>
+      </q-input>
+    </div>
+    <div
+      v-if="kr.IsEasyMode == 2"
+      class="flex row items-center"
+      style="width:240px;"
+    >
+      <div class="col">
+        <div class="text-subtitle2 text-weight-bold">起始值</div>
+        <q-input
+          dense
+          style="height:30px"
+          v-model="kr.StartValue"
+          @keyup="validateInput('StartValue')"
+        >
+        </q-input>
+      </div>
+      <div class="col q-mx-md">
+        <div class="text-subtitle2 text-weight-bold">当前值</div>
+        <q-input
+          dense
+          style="height:30px"
+          v-model="kr.CurrentValue"
+          @keyup="validateInput('CurrentValue')"
+        >
+        </q-input>
+      </div>
+      <div class="col">
+        <div class="text-subtitle2 text-weight-bold">目标值</div>
+        <q-input
+          dense
+          style="height:30px"
+          v-model="kr.EndValue"
+          @keyup="validateInput('EndValue')"
+        >
+        </q-input>
+      </div>
+    </div>
+    <div class="q-mt-lg text-subtitle2 text-weight-bold">状态</div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="kr.ProgressState"
+        size="xs"
+        val="1"
+        label="正常"
+        color="primary"
+      />
+    </div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="kr.ProgressState"
+        size="xs"
+        val="2"
+        label="有风险"
+        color="warning"
+      />
+    </div>
+    <div>
+      <q-radio
+        keep-color
+        v-model="kr.ProgressState"
+        size="xs"
+        val="3"
+        label="已延期"
+        color="negative"
+      />
+    </div>
+    <div
+      class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
+      v-if="kr.IsEasyMode == 1"
+      @click="changeMode(2)"
+    >
+      切换为高级模式
+    </div>
+    <div
+      class="q-mt-lg text-subtitle2 text-grey-7 cursor-pointer"
+      v-if="kr.IsEasyMode == 2"
+      @click="changeMode(1)"
+    >
+      切换为简单模式
+    </div>
+  </q-card>
+</template>
+
+<script>
+export default {
+  props: ["kr"],
+  data() {
+    return {
+      processStatus: "0",
+      modeType: 0
+    };
+  },
+  mounted() {
+    this.kr.ProgressState = this.kr.ProgressState.toString();
+    this.kr.progressTemp = this.kr.Progress;
+  },
+  methods: {
+    changeMode(t) {
+      this.kr.IsEasyMode = t;
+    },
+    validateInput(key) {
+      let obj = this.kr[key];
+      if (obj.length == 1) {
+        obj = obj.replace(/[^1-9]/g, "");
+      } else if (obj && obj != "") {
+        obj = obj.replace(/\D/g, "");
+      }
+      this.kr[key] = !obj || obj == "" ? "0" : obj;
+      this.calcProcess();
+    },
+    validateInput2() {
+      let obj = this.kr.progressTemp;
+      if (obj.length == 1) {
+        obj = obj.replace(/[^1-9]/g, "");
+      } else if (obj && obj != "") {
+        obj = obj.replace(/\D/g, "");
+      }
+      obj = !obj || obj == "" ? "0" : obj;
+      obj = obj > 100 ? 100 : obj;
+      this.kr.progressTemp = Number.parseInt(obj);
+      this.kr.Progress = this.kr.progressTemp;
+    },
+    calcProcess() {
+      let crt = this.kr.CurrentValue - this.kr.StartValue;
+      if (crt > 0) {
+        this.kr.Progress = (crt * 100) / this.kr.EndValue;
+      } else {
+        this.kr.Progress = 0;
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/search-okr.vue

+<template>
+  <div style="width:420px;">
+    <q-input
+      flat
+      v-model="searchText"
+      style="margin:0 12px;"
+      borderless
+      placeholder="按姓名搜索同事"
+      @input="querySearchResult"
+    >
+      <template v-slot:append>
+        <inline-svg
+          class="svg-icon svg-icon-primary"
+          src="icons/svg/General/Search.svg"
+        ></inline-svg>
+      </template>
+    </q-input>
+    <div class="results">
+      <div class="result-item" v-for="(x, i) in usersList" :key="i">
+        <div class="bg-grey-3 flex row items-center" style="padding:6px 12px">
+          <q-avatar
+            size="20px"
+            font-size="14px"
+            rounded
+            color="blue-2"
+            text-color="blue-13"
+          >
+            <img :src="x.UserPhoto" v-if="x.UserPhoto" />
+            <span v-else-if="x.UserName">{{ x.UserName.substring(0, 1) }}</span>
+          </q-avatar>
+          <div class="q-mx-md remark-font">{{ x.UserName }}</div>
+          <div class="col remark-font">{{ x.DeptName }}·{{ x.PostName }}</div>
+        </div>
+        <q-list v-if="x.List && x.List.length > 0">
+          <template v-for="(y, yi) in x.List">
+            <q-item
+              class="rounded-borders"
+              clickable
+              v-ripple
+              v-if="y.IsNotLook != 1"
+              :key="yi"
+              active-class="bg-red"
+              :disable="y.IsParent == 1"
+              @click="setAlign(x, y)"
+            >
+              <div class="flex row items-center">
+                <div style="width:30px;margin-top:5px;">
+                  <inline-svg
+                    v-if="y.IsLock == 1"
+                    class="svg-icon svg-icon-grey"
+                    src="icons/svg/General/Lock.svg"
+                    width="14px"
+                    height="14px"
+                  ></inline-svg>
+                  <q-tooltip
+                    content-class="bg-dark text-white"
+                    v-if="y.IsLock == 1"
+                    >已设保密，请勿外出</q-tooltip
+                  >
+                </div>
+                <div class="col">
+                  <span>Objective{{ yi + 1 }}:{{ y.Title }}</span>
+                  <q-tooltip
+                    content-class="bg-dark text-white"
+                    v-if="y.IsParent == 1"
+                    >已对其，无需再次对齐</q-tooltip
+                  >
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-list>
+        <div v-else class="q-pa-md text-center remark-font">暂无objective</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryObjectiveBySearch, setAlign } from "../../api/okr/work";
+export default {
+  props: ["periodId", "sourceId"],
+  data() {
+    return {
+      searchText: "",
+      usersList: []
+    };
+  },
+  methods: {
+    querySearchResult() {
+      this.usersList = [];
+      this.searchText = this.searchText.trim();
+      if (this.searchText != "") {
+        queryObjectiveBySearch({
+          PeriodId: this.periodId,
+          UserName: this.searchText,
+          ObjectiveId: this.sourceId
+        }).then(r => {
+          this.usersList = r.Data;
+        });
+      }
+    },
+    setAlign(x, y) {
+      if (y.IsNotLook == 2 && y.IsParent == 2) {
+        let temp = JSON.parse(JSON.stringify(y));
+        setAlign({
+          ObjectiveId: this.sourceId,
+          ParentId: y.Id
+        }).then(r => {
+          this.$q.notify({
+            message: "对齐成功",
+            color: "#21ba45",
+            position: "top"
+          });
+          y.IsParent=1;
+          let newObj = {
+            AccountId: 0,
+            AccountName: x.UserName,
+            AlignList: [y],
+            Icon:x.UserPhoto
+          };
+          this.$emit('add',newObj)
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

src/css/quasar.variables.sass

@@ -14,7 +14,7 @@
 
 $primary   : #2961fe
 $secondary : #1bc5bd
-$accent    : #8950fc
+$accent    : #232125
 
 $dark      : #1d1d1d
 

src/layouts/MainLayout.vue

@@ -65,7 +65,7 @@
         </div>
         <div class="col" style="background: #f2f4f7;">
           <q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
-            <router-view style="margin:20px" />
+            <router-view />
           </q-scroll-area>
         </div>
       </div>

src/pages/Index.vue → src/pages/Work.vue

 <template>
-  <div class="home flex column " style="height:calc(100vh - 101px);margin:0px !important;flex-wrap: nowrap">
+  <div class="flex column full-height" style="padding-top:54px !important;">
     <!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
-    <div class="box" v-if="AccountType==2 || ispower==true">
-      <div style="margin: 0 auto;width: 130px;">
+    <div class="sub-header" v-if="AccountType==2 || ispower==true">
+      <!-- <div style="margin: 0 auto;width: 130px;">
         <el-tabs v-model="model" >
           <el-tab-pane :label="item.label" :name="item.value" :key="item.value" v-for="(item, index) in options"></el-tab-pane>
         </el-tabs>
-      </div>
+      </div> -->
+      <q-btn @click="changeMenu(1)"  flat :color="chosenMenu==1?'primary':'blue-grey-14'" :class="[chosenMenu==1?'text-weight-bold':'']" label="OKR 工作区">
+        <q-menu v-if="chosenMenu==1">
+          <q-list>
+            <q-item clickable>
+              <q-item-section q-item-section avatar>
+                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Text/Edit-text.svg"></inline-svg>
+              </q-item-section>
+              <q-item-section>OKR</q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable>
+              <q-item-section q-item-section avatar>
+                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/General/Visible.svg"></inline-svg>
+              </q-item-section>
+              <q-item-section>对齐视图</q-item-section>
+            </q-item>
+            <q-item clickable>
+              <q-item-section q-item-section avatar>
+                <inline-svg class="svg-icon svg-icon-secondary" src="icons/svg/Shopping/Chart-pie.svg"></inline-svg>
+              </q-item-section>
+              <q-item-section>数据看板</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+      <q-btn @click="changeMenu(2)" flat :color="chosenMenu==2?'primary':'blue-grey-14'" :class="[chosenMenu==2?'text-weight-bold':'']" label="备课管理">
+      </q-btn>
     </div>
-    <div v-if="model=='one'" class="flex flex-center col" style="flex: 1;min-height: 750px">
-          <img style="width:250px;" alt="Quasar logo" src="../assets/images/logo.png" />
+    <div v-if="chosenMenu==1" class="flex col" style="flex: 1">
+      <okr></okr>
     </div>
-    <div v-if="model=='two'" class="col" style="overflow: auto">
+    <div v-if="chosenMenu==2" class="col" style="height: 750px;overflow: auto">
       <teachplan></teachplan>
     </div>
   </div>
@@ -19,9 +46,11 @@
 
 <script>
   import teachplan from './course/teacherLesson'
+  import okr from './okr/index'
   export default {
     components:{
-      teachplan
+      teachplan,
+      okr
     },
     name: 'PageIndex',
     data(){
@@ -33,7 +62,7 @@
         model: 'one',
         AccountType:1,
         ispower:false,//是否显示备课管理
-
+        chosenMenu:1
       }
     },
     created() {
@@ -60,6 +89,9 @@
      }
     },
     methods:{
+      changeMenu(i){
+        this.chosenMenu=i
+      },
       getMapList(list){
         list.forEach(x=>{
           if(x.MenuUrl == '/course/teacherLesson'){
@@ -83,7 +115,25 @@
   .homebx {
     margin: 0;
   }
+  ::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+
   .box .el-tabs__header{
     margin: 0;
   }
+  .sub-header{
+    position: fixed;
+    height: 56px;
+    top: 60px;
+    left: 0;
+    right: 0;
+    transition: top .3s ease;
+    z-index: 95;
+    box-shadow: 0 10px 30px 0 rgba(82,63,105,.08);
+    background-color: #fff;
+    border-top: 1px solid #ebedf3;
+    margin: 0;
+    padding: 10px 20px;
+  }
 </style>

src/router/routes.js

@@ -15,7 +15,7 @@ const routes = [{
     children: [{
         path: "",
         component: () =>
-          import("pages/Index.vue")
+          import("src/pages/Work.vue")
       },
       {
         path: "/school/manager",