修改OKR部分功能

quasar.conf.js

@@ -48,7 +48,7 @@ module.exports = function (ctx) {
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
       env: ctx.dev ? {
-        API: 'http://192.168.1.27:8300/api'
+        API: 'http://192.168.1.13:8085/api'
       } : {
         API: 'http://eduapi.oytour.com/api'
       },

src/api/okr/work.js

@@ -226,3 +226,45 @@ export function setObjectiveStatus(data){
     data
   })
 }
+export function queryKRRuleList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRRuleDownLoadList',
+    method: 'post',
+    data
+  })
+}
+export function queryMyManageDepartment(data){
+  return request({
+    url: '/OKRPeriod/GetOKRMyManageDepartment',
+    method: 'post',
+    data
+  })
+}
+export function queryMyChildEmployeeList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRMyChildEmployeeList',
+    method: 'post',
+    data
+  })
+}
+export function setKRRule(data){
+  return request({
+    url: '/OKRPeriod/SetOKRKeyResultUseRule',
+    method: 'post',
+    data
+  })
+}
+export function queryKRRuleRangeList(data){
+  return request({
+    url: '/OKRPeriod/GetOKRKeyResultRuleReList',
+    method: 'post',
+    data
+  })
+}
+export function deleteKRRule(data){
+  return request({
+    url: '/OKRPeriod/CancelOKRKeyResultUseRule',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

src/components/okr/guide.vue

 <template>
-  <q-dialog v-model="dialog" maximized full-height seamless position="right">
-    <q-card style="margin-top:61px;width:420px" class="no-border-radius classinfo_Dialog">
+  <div style="height:100%">
+    <q-card style="width:420px;height:100%" class="no-border-radius classinfo_Dialog">
       <q-tabs
         v-model="tab"
         class="text-primary"
@@ -9,7 +9,7 @@
         <q-tab name="two"  label="最佳范例" />
 
       </q-tabs>
-        <div class="WritingAssistant-tabContent-1nYI5" v-if="tab=='one'">
+        <div class="WritingAssistant-tabContent-1nYI5  scroll myscroll" style="height:calc(100% - 48px)" v-if="tab=='one'">
           <div class="WritingGuide-section-1XCZt">
             <h3 class="WritingGuide-title-3wBKZ">
               如何写出好的 Objective？
@@ -108,14 +108,14 @@
 
           </div>
 
-          <div class="WritingGuide-otherPrinciple-2AhOv" >
+          <div class="WritingGuide-otherPrinciple-2AhOv" style="margin-bottom:20px;">
             <h3 class="WritingGuide-title-3wBKZ">
               其他制定原则
             </h3>
             <ul><li>Objective 和每个 Objective 对应的 Key Result 数量应控制在 3-5 个</li><li>及时与上级、合作方沟通目标，达成一致</li><li>想要了解更多？ <a href="https://bytedance.feishu.cn/docs/doccnNcwoql8HhrXSYZ7phudjMg" target="_blank" rel="noopener noreferrer">OKR 制定常见误区</a></li></ul>
           </div>
         </div>
-        <div v-else class="WritingAssistant-tabContent-1nYI5">
+        <div v-else class="WritingAssistant-tabContent-1nYI5 scroll myscroll"  style="height:calc(100% - 48px)">
             <div class="BestCase-tagContainer-1k1dW">
                 <div v-for="(x,y) in list" :key="y" class="BestCase-tag-206SU" :class="{'BestCase-focused-2aQSy':index == y}" @click="index=y,Selectlist = list[y].list">
                   {{x.title}}
@@ -171,13 +171,14 @@
               </div>
             </div>
           </div>
+          <div style="margin-bottom:10px">&nbsp;</div>
         </div>
     </q-card>
     <div class="dialog-out-close" @click="closeSaveForm"
          style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
       <q-icon name="iconfont icon-jujue1" size="26px" />
     </div>
-  </q-dialog>
+  </div>
 </template>
 
 <script>

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

@@ -74,9 +74,10 @@
               评论
             </q-tooltip>
           </q-btn>
-          <q-btn unelevated color="white icon-btn q-mr-md">
+          <q-btn unelevated color="white icon-btn q-mr-md" @click="showOkrStatus">
             <inline-svg
-              class="svg-icon svg-icon-secondary"
+              class="svg-icon"
+              :class="{'svg-icon-secondary':!isShowRemark,'svg-icon-white':isShowRemark}"
               src="icons/svg/Code/Spy.svg"
             ></inline-svg>
             <q-tooltip content-class="bg-dark">
@@ -178,7 +179,8 @@ export default {
       reloading: true,
       isShowBox: false,
       likeStatus: false,
-      auditPeroids: []
+      auditPeroids: [],
+      isShowRemark:false
     };
   },
   watch: {
@@ -216,6 +218,10 @@ export default {
     this.queryLikeState();
   },
   methods: {
+    showOkrStatus(){
+      this.isShowRemark=!this.isShowRemark
+      this.$emit('remark-status',this.isShowRemark)
+    },
     queryLikeState() {
       queryUserIsLike({ UserId: this.user.Id }).then(r => {
         this.likeStatus = r.Data;

src/components/okr/okr-info.vue

@@ -45,9 +45,10 @@
               评论
             </q-tooltip>
           </q-btn>
-          <q-btn unelevated color="white icon-btn q-mr-md">
+          <q-btn unelevated :color="isShowRemark?'secondary':'white'" @click="showOkrStatus" class="icon-btn q-mr-md" >
             <inline-svg
-              class="svg-icon svg-icon-secondary"
+              class="svg-icon"
+              :class="{'svg-icon-secondary':!isShowRemark,'svg-icon-white':isShowRemark}"
               src="icons/svg/Code/Spy.svg"
             ></inline-svg>
             <q-tooltip content-class="bg-dark">
@@ -98,6 +99,7 @@
         @cancel="changeUpdate"
         class="q-mb-lg"
         :ref="`object_${i}`"
+        :period='periodList[periodId]'
       ></okr-add>
     </div>
     <!-- <okr-add
@@ -185,7 +187,8 @@ export default {
       showPower: false,
       krPwoerInfo: {},
       powerType: 3,
-      isShowBox: false
+      isShowBox: false,
+      isShowRemark:false
     };
   },
   watch: {
@@ -201,6 +204,10 @@ export default {
      this.user =this.userObj
   },
   methods: {
+    showOkrStatus(){
+      this.isShowRemark=!this.isShowRemark
+      this.$emit('remark-status',this.isShowRemark)
+    },
     hideHistory() {
       this.isShowBox = false;
     },
@@ -237,6 +244,11 @@ export default {
     init() {
       queryOKRPeriodList().then(r => {
         this.periodList = r.Data;
+        this.periodList.forEach((x,i)=>{
+          if(x.IsCurrent==1){
+            this.periodId=i
+          }
+        })
         this.$emit("change",this.periodList[this.periodId].Id)
         this.queryMyObjective();
       });

src/components/okr/okr-process.vue

@@ -22,12 +22,14 @@
       style="width:240px;"
     >
       <div class="col">
+        <q-tooltip content-class="bg-dark" v-if="kr.RuleId>0">已使用系统模板，无法手动更新进度，如需更新请删除关联模板</q-tooltip>
         <div class="text-subtitle2 text-weight-bold">起始值</div>
         <q-input
           dense
           style="height:30px"
           v-model="kr.StartValue"
           @keyup="validateInput('StartValue')"
+          :disable="kr.RuleId>0"
         >
         </q-input>
       </div>
@@ -38,6 +40,7 @@
           style="height:30px"
           v-model="kr.CurrentValue"
           @keyup="validateInput('CurrentValue')"
+          :disable="kr.RuleId>0"
         >
         </q-input>
       </div>
@@ -48,6 +51,7 @@
           style="height:30px"
           v-model="kr.EndValue"
           @keyup="validateInput('EndValue')"
+          :disable="kr.RuleId>0"
         >
         </q-input>
       </div>
@@ -142,7 +146,7 @@ export default {
     calcProcess() {
       let crt = this.kr.CurrentValue - this.kr.StartValue;
       if (crt > 0) {
-        this.kr.Progress = (crt * 100) / this.kr.EndValue;
+        this.kr.Progress = ((crt * 100) / (this.kr.EndValue-this.kr.StartValue)).toFixed(2);
       } else {
         this.kr.Progress = 0;
       }

src/components/okr/okr-query.vue

@@ -40,27 +40,19 @@
             direction="down"
             v-if="newObjective.ChildList && newObjective.ChildList.length > 0"
           ></okr-align>
-        </div>
-      </template>
-      <template v-slot:prepend>
-        <div class="relative-position">
-          <inline-svg
-            v-if="newBoxState"
-            class="svg-icon svg-icon-primary"
-            src="icons/svg/Communication/Flag.svg"
-          ></inline-svg>
           <div
             class="absolute"
-            style="bottom:0px;right:5px;height:14px;"
+            style="top:0px;right:0px;height:14px;"
             v-if="newObjective.IsLock == 1"
           >
             <inline-svg
-              v-if="!newBoxState"
               class="svg-icon svg-icon-grey"
               src="icons/svg/General/Lock.svg"
               width="14px"
               height="14px"
+              
             ></inline-svg>
+            <q-tooltip content-class="bg-dark">已设为保密内容，请勿外传</q-tooltip>
           </div>
         </div>
       </template>
@@ -148,6 +140,19 @@
           class="flex row"
           v-if="newObjective.Title && newObjective.Title.length > 0"
         >
+        <div class="q-mr-lg" v-if="x.RuleId > 0" style="margin-top:22px">
+            <inline-svg
+              class="svg-icon svg-icon-secondary"
+              src="icons/svg/General/Save.svg"
+              width="20px"
+              height="20px"
+            ></inline-svg>
+            <q-tooltip content-class="bg-dark"
+              >使用模板「{{
+                x.RuleName
+              }}」自动更新进度，<br />更新时间间隔一小时</q-tooltip
+            >
+          </div>
           <div>
             <span class="block remark-font text-right">进度</span>
             <q-btn dense flat color="white" text-color="dark">
@@ -168,7 +173,7 @@
               <span>{{ x.Progress }}%</span>
             </q-btn>
           </div>
-          <div class="q-mx-lg" style="width:47px;text-align:right">
+          <div class="q-mx-lg" style="width:51px;text-align:right">
             <span class="block remark-font text-right">权重</span>
             <q-btn
               dense
@@ -221,7 +226,7 @@
           <div class="text-subtitle2 text-weight-bold  q-my-xs">
             进度记录
           </div>
-          <div class="text-body2" v-html="newObjective.ProgressRemark"></div>
+          <div class="text-body2" v-html="decodeURIComponent(newObjective.ProgressRemark)"></div>
         </div>
       </div>
     </div>
@@ -383,6 +388,7 @@ export default {
   created() {
     this.newObjective = this.objective;
     this.audit.ObjectiveId = this.objective.Id;
+    
   },
   watch: {
     objective: {

src/pages/Work.vue

 <template>
   <div class="flex column full-height" style="padding-top:54px !important;">
     <!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
-    <div class="sub-header" v-if="AccountType==2 || ispower==true">
+    <div class="sub-header">
       <!-- <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>
@@ -32,11 +32,11 @@
           </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 @click="changeMenu(2)"  v-if="AccountType==2 || ispower==true" flat :color="chosenMenu==2?'primary':'blue-grey-14'" :class="[chosenMenu==2?'text-weight-bold':'']" label="备课管理">
       </q-btn>
     </div>
     <div v-if="chosenMenu==1" class="flex col" style="flex: 1">
-      <okr></okr>
+      <okr v-if="okrMenu==1"></okr>
     </div>
     <div v-if="chosenMenu==2" class="col" style="height: 750px;overflow: auto">
       <teachplan></teachplan>
@@ -47,6 +47,7 @@
 <script>
   import teachplan from './course/teacherLesson'
   import okr from './okr/index'
+  import alignView from './okr/okr-align-view'
   export default {
     components:{
       teachplan,
@@ -62,7 +63,8 @@
         model: 'one',
         AccountType:1,
         ispower:false,//是否显示备课管理
-        chosenMenu:1
+        chosenMenu:1,
+        okrMenu:0
       }
     },
     created() {
@@ -90,6 +92,9 @@
     },
     methods:{
       changeMenu(i){
+        if(i==1){
+          this.okrMenu=1
+        }
         this.chosenMenu=i
       },
       getMapList(list){

src/pages/okr/index.vue

@@ -334,9 +334,22 @@
       <okr-info
         :user-obj="userParam"
         @change="queryMyList"
+        @remark-status="updateOkrRemarkStatus"
         v-if="!isOtherUser"
       ></okr-info>
-      <okr-emp-info :user-id="userInfo.Id" :user-obj="chosenUser" v-if="isOtherUser" :audit-mode="auditMode" :peroids="auditPeroids" @finish="deleteAuditUser" @addAudit="insertAuditUser"></okr-emp-info>
+      <okr-emp-info
+        :user-id="userInfo.Id"
+        :user-obj="chosenUser"
+        @remark-status="updateOkrRemarkStatus"
+        v-if="isOtherUser"
+        :audit-mode="auditMode"
+        :peroids="auditPeroids"
+        @finish="deleteAuditUser"
+        @addAudit="insertAuditUser"
+      ></okr-emp-info>
+    </div>
+    <div class="col-auto" v-if="showOkrRemark" style="height:100%">
+      <gruid></gruid>
     </div>
   </div>
 </template>
@@ -351,6 +364,7 @@ import {
 import { queryEmployee } from "../../api/users/user";
 import okrInfo from "../../components/okr/okr-info";
 import okrEmpInfo from "../../components/okr/okr-emp-info";
+import gruid from "../../components/okr/guide";
 export default {
   data() {
     return {
@@ -364,13 +378,15 @@ export default {
       usersList: [],
       showResult: false,
       aduitsList: [],
-      auditMode:false,
-      auditPeroids:""
+      auditMode: false,
+      auditPeroids: "",
+      showOkrRemark: false
     };
   },
   components: {
     okrInfo,
-    okrEmpInfo
+    okrEmpInfo,
+    gruid
   },
   computed: {
     ...mapGetters(["userInfo"])
@@ -391,20 +407,23 @@ export default {
     this.$root.$off("openUserObj", this.openUserObjective);
   },
   methods: {
-    insertAuditUser(obj){
+    updateOkrRemarkStatus(val) {
+      this.showOkrRemark = val;
+    },
+    insertAuditUser(obj) {
       let index = -1;
       this.aduitsList.forEach((x, i) => {
         if (x.Id == obj.Id) {
-          if(x.PeriodIds.split(',').indexOf(obj.PeriodIds)==-1){
-            x.PeriodIds+=','+obj.PeriodIds
+          if (x.PeriodIds.split(",").indexOf(obj.PeriodIds) == -1) {
+            x.PeriodIds += "," + obj.PeriodIds;
           }
         }
       });
-      if(index==-1){
-        this.aduitsList.push(obj)
+      if (index == -1) {
+        this.aduitsList.push(obj);
       }
     },
-    deleteAuditUser(id){
+    deleteAuditUser(id) {
       let index = 0;
       this.aduitsList.forEach((x, i) => {
         if (x.Id == id) {
@@ -463,15 +482,16 @@ export default {
         this.getMe();
         this.isOtherUser = false;
       } else {
-        this.auditMode=m.indexOf('aduits_')!=-1&&obj.PeriodIds!=''
+        this.auditMode = m.indexOf("aduits_") != -1 && obj.PeriodIds != "";
         this.chosenUser = obj;
         this.isOtherUser = true;
-        this.auditPeroids=obj.PeriodIds
+        this.auditPeroids = obj.PeriodIds;
       }
+      this.showOkrRemark=false
     },
     openUserObjective(obj) {
       this.isOtherUser = obj.Id != this.userInfo.Id;
-      console.log(this.isOtherUser,obj.Id,this.userInfo)
+      console.log(this.isOtherUser, obj.Id, this.userInfo);
       if (this.isOtherUser) {
         this.chosenUser = obj;
       } else {
@@ -479,10 +499,11 @@ export default {
       }
       this.activeMenu = "";
       this.searchText = "";
-      this.auditMode=false;
-      this.auditPeroids="";
+      this.auditMode = false;
+      this.auditPeroids = "";
       this.usersList = [];
       this.showResult = false;
+      this.showOkrRemark=false;
     },
     getMe() {
       this.userParam = {

src/pages/okr/okr-align-view.vue

+<template>
+  <div>
+    <div style="height:100%;">
+      <RelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import RelationGraph from "relation-graph";
+export default {
+  name: "Demo",
+  components: { RelationGraph },
+  data() {
+    return {
+      graphOptions: {
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultJunctionPoint: "border"
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    };
+  },
+  mounted() {
+    this.showSeeksGraph();
+  },
+  methods: {
+    showSeeksGraph(query) {
+      var __graph_json_data = {
+        rootId: "a",
+        nodes: [
+          { id: "a", text: "A", borderColor: "yellow" },
+          { id: "b", text: "B", color: "#43a2f1", fontColor: "yellow" },
+          { id: "c", text: "C", nodeShape: 1, width: 80, height: 60 },
+          { id: "e", text: "E", nodeShape: 0, width: 150, height: 150 }
+        ],
+        links: [
+          { from: "a", to: "b", text: "关系1", color: "#43a2f1" },
+          { from: "a", to: "c", text: "关系2" },
+          { from: "a", to: "e", text: "关系3" },
+          { from: "b", to: "e", color: "#67C23A" }
+        ]
+      };
+      // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
+      this.$refs.seeksRelationGraph.setJsonData(
+        __graph_json_data,
+        seeksRGGraph => {
+          // Called when the relation-graph is completed
+        }
+      );
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log("onNodeClick:", nodeObject);
+    },
+    onLineClick(lineObject, $event) {
+      console.log("onLineClick:", lineObject);
+    }
+  }
+};
+</script>
+
+<style></style>