123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317 |
- <template>
- <div class="MyDepart" v-infinite-scroll="handleInfiniteOnLoad">
- <!-- <div class="topBox"> </div> -->
- <div class="title">
- 我的部门
- </div>
- <div class="OKRBody" v-loading="loading">
- <div class="top-opt">
- <span class="year">
- <el-select v-model="yearValue" clearable placeholder="年份" @change="yearChange">
- <el-option
- v-for="item in yearsOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </span>
- <span class="cycle">
- <el-select v-model="cycleValue" clearable placeholder="周期" @change="cycleChange">
- <el-option
- v-for="item in cycleOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </span>
- <span class="nameSearch">
- <el-input
- placeholder="请输入搜索的名字"
- v-model="nameValue"
- clearable
- @change='searchName'>
- <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
- </el-input>
- </span>
- <!-- <span class="search">
- <el-button type="warning" round @click="search">搜索</el-button>
- </span> -->
- </div>
- <div class="listBody" v-if="list.length>0">
- <div class="itemBody" v-for="(item,index) in list" :key="index" >
- <div class="item" @click="getThisOKR(item)">
- <div class="item-top">
- <span class="jidu">第{{item.object.quarter}}季度</span>
- <div class="targetName">
- <span class="name">{{item.object.objectInfo}}</span>
- <span class="progress">{{item.object.completion}}%</span>
- </div>
- <div class="krlist">
- <span class="tip">KR</span>
- <span class="num">关键结果<span style="width:10px;display:inline-block"></span> <span class="nums"> {{item.krList.length}}</span> </span>
- </div>
- </div>
- <div class="item-bottom">
- <span>负责人:{{item.name}}</span>
- <span>
- <el-tooltip :content="item.follow?'取消关注':'关注'" placement="bottom" effect="dark">
- <img src="../assets/image/followRed.png" alt="" class="follow" v-if="item.follow" @click.stop="followHis(item)">
- <img src="../assets/image/follow.png" alt="" class="follow" v-else @click.stop="followHis(item)">
- </el-tooltip>
-
- </span>
- </div>
- </div>
- </div>
- </div>
- <div v-else>
- <div class="noListData">
- <img src="../assets/image/nodata.png" alt="" class="nodata">
- <p class="tip">咦,没有OKR哎~</p>
- </div>
- </div>
- </div>
- <!-- okr 四象限 -->
- <el-dialog
-
- :visible.sync="dialogVisible"
- :width="isCurrentQuarter==1? '65%' : '40%'"
-
- >
- <div class="justOKRBody" v-if="isCurrentQuarter==0">
- <div class="taskBody targetBody editKRBody" >
- <div class="targetO">
- <span class="target-tip">O</span>
- <span class="target-input">
- <div class="currentO">{{currentData.object.objectInfo}}</div>
- </span>
-
- </div>
- <div class="task-item">
- <div class="targetKR" v-for="(item,index) in currentData.krList" :key="index">
- <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
- <span class="info">
- {{item.krInfo}}
- <span v-for="element in item.remindVOS" :key="element.remindId" class="remindSpan">@{{element.name}}</span>
- </span>
-
- <span class="progress">
- <span class="progressBar">
- <span class="krtitle">KR的完成进度:</span>
- <span class="KR-opt">
- <span style="width:90%">
- <el-progress :percentage="item.completion" color='#cc9966'></el-progress>
- </span>
- </span>
- </span>
- </span>
- </div>
- </div>
- </div>
- </div>
- <div class="fourBoxBody okrPage" v-if="isCurrentQuarter==1">
- <div class="title" >
- {{time.year}}年第{{time.quarter}}季度OKR
- </div>
- <div class="okrBody" v-if="okr.length>0">
- <div class="okrBox first">
- <div class="okrBox-title">
- <p class="top-title">本周工作</p>
- </div>
- <div class="okrbox-list">
- <ul>
- <li v-for="(item) in taskInfoList" :key='item.id'>
- <el-popover
- placement="top-start"
- :title="'标题:'+item.taskTitle"
- width="300"
- trigger="hover"
- :content="'详细描述:'+item.taskInfo">
-
- <span slot="reference" class="content">
- <span class="taskGrade">
- <!-- P{{item.priority}} -->
- <img src="../assets/image/1.png" alt="" v-if="item.priority=='1'" class="priorityIMg">
- <img src="../assets/image/2.png" alt="" v-if="item.priority=='2'" class="priorityIMg">
- <img src="../assets/image/3.png" alt="" v-if="item.priority=='3'" class="priorityIMg">
- </span>
- <span class="taskTitle">
- {{item.taskTitle}}
- <span v-for="(element) in item.remindVOS" :key="element.krId" class="remindSpan">@{{element.name}}</span>
- </span>
- </span>
- </el-popover>
- </li>
- </ul>
- </div>
- </div>
- <div class="okrBox second">
- <div class="okrBox-title">
- <p class="top-title">OKR</p>
- </div>
- <div class="objectList" v-for="(item,index) in okr" :key="index">
- <div class="OBox">
- <span class="O-tip">目标</span>
- <span class="O-content">{{item.objectInfo.objectInfo}}</span>
- <span class="O-opt">
- <el-progress type="circle" :width='60' :height='60' :percentage="item.objectInfo.completion" :color="colors"></el-progress>
- </span>
- </div>
- <div class="KRBox">
- <ul>
- <li v-for="(ele,index) in item.krList" :key="index">
- <span class="KR-tip">KR</span>
- <el-popover
- placement="top-start"
-
-
- width="300"
- trigger="hover"
- :title="'KR:'+ele.krInfo"
- :content="'详细描述:'+(ele.krDesc|| '暂无')" >
-
- <span slot="reference" class="content">
- <span class="KR-content">{{ele.krInfo}}
- <span v-for="(element) in ele.remindVOS" :key="element.krId" class="remindSpan">@{{element.name}}</span>
- </span>
-
- </span>
- </el-popover>
- <!-- <span class="KR-content">{{ele.krInfo}}</span> -->
- <span class="KR-opt">
- <span style="width:90%;">
- <el-progress :percentage="ele.completion" color='#cc9966'></el-progress>
- </span>
-
- </span>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="okrBox third">
- <div class="okrBox-title">
- <p class="top-title">未来四周计划</p>
- </div>
- <div class="okrbox-list">
- <ul>
- <li v-for="(item) in taskFourWeek" :key='item.id'>
- <el-popover
- placement="top-start"
- :title="'标题:'+item.taskTitle"
- width="300"
- trigger="hover"
- :content="'详细描述:'+item.taskInfo">
- <span slot="reference" class="content">
- <span class="taskGrade">
- <!-- P{{item.priority}} -->
- <img src="../assets/image/1.png" alt="" v-if="item.priority=='1'" class="priorityIMg">
- <img src="../assets/image/2.png" alt="" v-if="item.priority=='2'" class="priorityIMg">
- <img src="../assets/image/3.png" alt="" v-if="item.priority=='3'" class="priorityIMg">
- </span>
- <span class="taskTitle">
- {{item.taskTitle}}
- <span v-for="(element) in item.remindVOS" :key="element.krId" class="remindSpan">@{{element.name}}</span>
- </span>
- </span>
- </el-popover>
-
- </li>
- </ul>
- </div>
- </div>
- <div class="okrBox four">
- <div class="okrBox-title">
- <p class="top-title">状态指标</p>
- </div>
- <div class="status-list">
- <li v-for="item in status" :key='item.id' class="status">
- <span class="itemStatus" :style="'background-color:'+item.color" >{{item.content}}</span>
- </li>
- </div>
- <!-- <div class="status-list">
-
- <span v-for="item in status" :key='item.id' :style="'background-color:'+item.color" class="status" @click="editSatus(item)">
- {{item.content}}
- </span>
- </div> -->
- </div>
- </div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- let cycleOptions=[
- // {
- // label:'全部',
- // value:0
- // },
- {
- label:'第一季度',
- value:1
- },
- {
- label:'第二季度',
- value:2
- },
- {
- label:'第三季度',
- value:3
- },
- {
- label:'第四季度',
- value:4
- },
- ]
- import {postAction , getAction} from '@/utils/api/http.js'
- import infiniteScroll from 'vue-infinite-scroll'
- export default {
- data() {
- return {
- loading:false,
- yearValue:undefined,
- yearsOptions:[],
- cycleValue:undefined,
- cycleOptions,
- nameValue:undefined,
- dialogVisible:false,
- isCurrentQuarter:2,
- list:[],
- currentData:{
- object:{},
- krLiat:[]
- },
- okr:[],
- okrList:[],
- okrObject:{},
- taskInfoList:[],
- taskFourWeek:[],
- status:[],
- time:{},
- percentage: 0,
- colors: [
- {color: '#f56c6c', percentage: 30},
- {color: '#e6a23c', percentage: 60},
- {color: '#5cb87a', percentage: 80},
- {color: '#5cb87a', percentage: 100}
- ],
- // 滚动加载更多
- loadingMore: false,//loading 加载更多
- isScroll: true,//是否可以滚动
- pageIndex: 1,
- pageSize: 16,
- loading: false,
- busy: false,
- }
- },
-
- directives: { infiniteScroll },
- methods: {
- followHis(item){
- console.log(item)
-
- let status=item.follow?0:1;
- this.list.forEach((ele,index)=>{
- if(item.object.userId==ele.object.userId){
- this.$set(ele,'follow',!item.follow)
- }
- })
- postAction('/okr/focusInfo/focus',{
- status,
- userId:item.object.userId
- }).then(res=>{
- console.log(res)
- if(res.success){
-
- }else{
- this.$meaasge.error(res.meaasge)
- this.getList()
- }
- })
- },
- handleClose(done) {
- this.$confirm('确认关闭?')
- .then(_ => {
- done();
- })
- .catch(_ => {});
- },
- searchName(){
- // console.log(this.nameValue)
- this.getList()
- },
- yearChange(){
- console.log(this.yearValue,this.isCurrentQuarter)
- // this.getList()
- this.cycleValue=undefined
- },
- cycleChange(){
- console.log(this.cycleValue,this.isCurrentQuarter)
- if(this.yearValue=='' || this.yearValue==undefined){
- this.$message({
- type:'warning',
- message:'记得先选择年份哟~'
- });
- this.cycleValue=undefined
- }else{
- this.getList()
- }
-
- },
- getList(){
- this.isCurrentQuarter=2;
- this.list=[];
- this.loading=true;
- this.loadingMore=true;
- this.pageIndex=2;
- postAction('/okr/focusInfo/myDepartment',{
- year:this.yearValue,
- quarter:this.cycleValue,
- name:this.nameValue
- }).then((res)=>{
- // console.log(res);
- this.loading=false;
- this.isCurrentQuarter=res.isCurrentQuarter;
- this.list=res.list
- })
- },
- getThisOKR(item){
- this.currentData={
- object:{},
- krLiat:[]
- },
- this.okr=[];
- this.taskInfoList=[];
- this.taskFourWeek=[];
- this.time='';
- this.status=[];
- this.okrObject={};
- this.dialogVisible=true;
- // console.log(item,this.isCurrentQuarter);
- if(this.isCurrentQuarter!=1){
- this.currentData=item
- }else{
- postAction('/okr/okr/getOkrInfo',{
- objectId:item.object.id
- }
- ).then((res)=>{
- // console.log(res);
- if(res.success){
- this.okr=res.result.okr;
- this.taskInfoList=res.result.taskInfoList;
- this.taskFourWeek=res.result.taskFourWeekList;
-
- this.time=res.result.time
- res.result.status.forEach((item,index)=>{
- if(item.type=='1'){
- item.color='#CC3300';
- }else if(item.type=='2'){
- item.color='#FFCC33';
- }else{
- item.color='#99CC99';
- }
- })
- this.status=res.result.status;
- this.okrObject=res.result.okr[0].objectInfo;
- }
- })
- }
-
- },
- // 滚动事件
- handleInfiniteOnLoad(){
- this.loading=true;
- this.loadingMore = true;
-
- postAction('/okr/focusInfo/myDepartment',{
- year:this.yearValue,
- quarter:this.cycleValue,
- name:this.nameValue,
- pageNumber:this.pageIndex
- }).then((res)=>{
- console.log(res);
- this.loading=false;
- this.loadingMore = false
-
- // this.list=res.result.list;
- this.yearValue=res.year;
- this.cycleValue=res.quarter
- if (res.list.length > 0) {
- this.isScroll = true
- this.list = [...this.list, ...res.list]
- let pageNumber = this.pageIndex += 1
- } else {
- // this.show = true
- this.$message.warning('没有更多数据了!')
- }
- this.isCurrentQuarter=res.isCurrentQuarter;
-
- })
- },
- },
- mounted() {
- this.loading=true;
- // postAction('/okr/focusInfo/myDepartment',{
-
- // }).then((res)=>{
- // // console.log(res);
- // this.loading=false
- // this.isCurrentQuarter=res.isCurrentQuarter;
- // this.list=res.list;
- // this.yearValue=res.year;
- // this.cycleValue=res.quarter
- // })
- postAction('/okr/okr/getObjectYear ',{
- }).then((res)=>{
- // console.log(res);
- this.yearsOptions=[]
- res.result.forEach((item)=>{
- this.yearsOptions.push({
- label: `${item}`,
- value:item
- })
- })
- })
- },
- }
- </script>
- <style lang="less" scoped>
- .MyDepart{
- // max-height: 300px;
- height: 100%;
- overflow: auto;
- .topBox{
- height: 41px;
- }
- .title{
- background-color: #f4f6f9;
- padding-left: 25px;
- height: 60px;
- line-height: 60px;
- text-align: left;
- }
- .OKRBody{
- min-height: calc(100% - 121px);
- background: #fff;
- .top-opt{
- padding: 10px 20px;
- text-align: left;
- position: relative;
- .year,.cycle{
- width: 120px;
- display: inline-block;
- margin-right: 15px;
- // height: 20px;
- border-right: 1px solid #DCDFE6;
- }
- .nameSearch{
- width: 200px;
- display: inline-block;
- margin-right: 15px;
- padding-right: 15px;
- border-right: 1px solid #DCDFE6;
- }
- .search{
- display: inline-block;
- position: absolute;
- top: 10px;
- right: 20px;
- }
- }
- .listBody{
- display: flex;
- flex-wrap: wrap;
- .itemBody{
- width: 25%;
- padding: 20px 0;
- box-sizing: border-box;
-
- .item{
- width: 80%;
- margin: 0 auto;
- text-align: left;
- box-sizing: border-box;
- box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px;
- .item-top{
- background-color:#CC9966;
- padding:15px 20px;
- span{
- display: inline-block;
- }
- .jidu{
- display: inline-block;
- // height: 20px;
- // width: 60px;
- padding: 5px 20px;
- background: rgb(255, 255, 255);
- border-radius: 20px;
- font-size: 12px;
- margin-bottom: 5px;
- }
- .targetName{
- height: 40px;
- margin: 10px 0;
- display: flex;
- color: #fff;
- .name{
- height: 40px;
- width: 80%;
- line-height: 20px;
- display: inline-block;
- padding: 0 5px 0 0;
- text-overflow: -o-ellipsis-lastline;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- -webkit-box-orient: vertical;
- font-size: 14px;
- }
- .progress{
- width: 30%;
- font-size: 30px;
- font-weight: 500;
- line-height: 40px;
- color: #fff;
- text-align: center;
- }
- }
- .krlist{
- .tip{
- height: 17px;
- width: 34px;
- font-size: 12px;
- color: #999;
- margin-right: 10px;
- text-align: center;
- line-height: 18px;
- background: rgba(255, 255, 255, 0.4);
- border-radius: 11px;
- }
- .num{
- font-size: 12px;
- .nums{
- color:rgb(204, 51, 0);
- font-size: 14px;
- }
- }
- }
- }
- .item-bottom{
- padding:10px 20px;
- height: 30px;
- line-height: 30px;
- background-color: #fff;
- font-size: 12px;
- position: relative;
- .follow{
- width: 20px;
- position: absolute;
- right: 20px;
- top: 16px;
- cursor: pointer;
- }
- }
- }
- .item:hover{
- transform: scale(1.03);
- }
- }
- }
- }
- .noListData{
- width: 30%;
- margin:50px auto ;
- // background-color: rgb(141, 200, 234);
- box-sizing: border-box;
- .nodata{
- width: 60%;
- }
- .tip{
- font-size: 16px;
- color: #999;
- margin: 0 auto;
- }
- }
- .taskBody{
- padding: 0 20px;
- .task-item{
- margin-bottom: 15px;
- .item-name{
- font-size: 12px;
- color: #CC9966;
- margin-bottom: 5px;
- display:inline-block;
- margin-right: 15px;
- }
- .remindSpan{
- color:#2e9cff;
- display: inline-block;
- margin-right: 3px;
- cursor: pointer;
- }
- }
- }
- .targetBody{
- .targetO{
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- flex-wrap: wrap;
- align-self: normal;
- padding: 10px;
- border-radius: 5px;
- background: rgb(29, 134, 240);
- margin-bottom: 30px;
- font-size: 18px;
- span{
- display: inline-block;
- font-size: 18px;
- }
- .target-tip{
- width: 35px;
- height: 35px;
- text-align: center;
- line-height: 36px;
- background-color: rgb(141, 200, 234);
- color: rgb(255, 255, 255);
- font-size: 12px;
- border-radius: 50%;
- font-size: 18px;
- }
- .target-input{
- width:90%;
- font-size: 18px;
- }
- }
- .addKR{
- padding: 0 80px;
- box-sizing: border-box;
- }
- .targetKR{
- display: flex;
- flex-wrap: wrap;
- -webkit-box-align: center;
- align-items: center;
- align-self: normal;
- // padding: 10px;
- border-radius: 5px;
- // background: rgb(29, 134, 240);
- margin-bottom: 10px;
- .tip{
- width: 10%;
- text-align: left;
- // background-color: tomato;
- font-family: sans-serif;
- text-shadow: rgb(14, 17, 20) 0px 0px 0px;
- .kArEgh {
- display: inline-block;
- width: 6px;
- height: 6px;
- margin-right: 5px;
- position: relative;
- top: -3px;
- background: rgb(29, 134, 240);
- }
- }
- .info{
- width: 90%;
- font-size: 16px;
- font-weight: 500;
- color: rgb(131, 137, 143);
- padding: 6px 0px 6px 0px;
- border-radius: 5px;
- background: rgb(245, 246, 250);
- text-align: left;
- padding: 20px;
- box-sizing: border-box;
- }
- .progress{
- margin-top: 5px;
- display: flex;
- padding-left: 80px;
- box-sizing: border-box;
- width: 100%;
- font-size: 12px;
- position: relative;
- span{
- display: inline-block;
- line-height: 40px;
- }
- .progressBar{
- width: 70%;
- display: flex;
- }
- .delete{
- // width: 25px;
- // height: 25px;
- // font-size: 12px;
- position:absolute;
- right: 5px;
- }
- }
- }
-
- }
- .editKRBody{
- .targetO{
- background-color:#CC9966 ;
- .target-tip{
- background-color: #99CC99 ;
- }
- .target-input{
- color: #FFF;
- }
- }
- .targetKR .progress{
- .progressBar{
- width: 90%;
- display: flex;
- .krtitle{
- line-height: 40px;
- display: inline-block;
- width: 30%;
- text-align: right;
- }
- .KR-opt{
- width: 60%;
- padding-left: 30px;
- text-align: left;
- }
- }
- }
-
- .currentO{
- color: #fff;
- font-size: 16px;
- line-height: 40px;
- padding-left: 15px;
- text-align: left;
- }
- }
- }
- ul{
- padding: 0;
- }
- ul,li{
- margin: 0;
- padding-top: 0;
- list-style: none;
- }
- .okrPage{
- width: 100%;
- height: 100%;
- background:#CC9966;
- box-sizing: border-box;
- position: relative;
-
- .title{
- height: 50px;
- padding: 10px 0;
- margin-bottom: 20px;
- color:#fff;
- box-sizing: border-box;
- background:#CC9966;
- line-height: 50px;
- font-size: 20px;
- text-align: center;
- margin-top: 15px;
- }
-
- .okrBody{
- background: rgb(247,247,247);
- border-radius: 30px 30px 0 0;
- height: 93%;
- display: flex;
- flex-wrap:wrap;
- color: #000;
- .okrBox{
- width: 49.5%;
- // height: 49%;
- height: 320px;
- min-height: 280px;
- margin-right: 1%;
- background: #fff;
- box-sizing: border-box;
- // overflow: auto;
- .okrBox-title{
- text-align: left;
- max-height: 20%;
- .top-title{
- font-size: 20px;
- margin: 8px 0;
- padding: 0 20px;
- // text-align: left;
- }
- .createTask{
- font-size: 12px;
- margin: 5px 0;
- padding: 0 20px;
- text-align: left;
- }
- }
- .okrbox-list{
- width: 100%;
- overflow: auto;
- max-height: 80%;
- // margin-top: 10px;
- text-align: left;
- font-size: 14px;
- color: #333;
- box-sizing: border-box;
- ul{
- width: 100%;
- height: 100%;
- overflow: auto
- }
- li{
- width: 100%;
- height: 41px;
- padding: 8px 15px 8px;
- line-height: 20px;
- border-bottom: 1px solid rgb(240, 242, 245);
- box-sizing: border-box;
- cursor: pointer;
- position: relative;
- .list-opt{
- display: none;
- width: 50%;
- position: absolute;
- right: 10px;
- top: 5px;
- // display: flex;
- justify-content:flex-end;
- align-items:center
- }
- // .taskprogress{
- // width:10px;
- // height: 10px;
- // }
- .content{
- display: inline-block;
- width: 100%;
- }
- .taskGrade{
- display: inline-block;
- width: 25px;
- height: 25px;
- border-radius: 50%;
- text-align: center;
- box-sizing: border-box;
- // background-color: turquoise;
- margin-right: 10px;
- }
- .priorityIMg{
- width: 25px;
- height: 25px;
-
- }
- .taskTitle{
- display: inline-block;
- width: 70%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- height: 25px;
- line-height: 25px;
- .remindSpan{
- color:#2e9cff;
- display: inline-block;
- margin-right: 3px;
- cursor: pointer;
- }
- }
- }
- li:hover .list-opt{
- display: flex;
- }
- }
- .status-list{
- overflow: auto;
- max-height: 250px;
- // margin-top: 10px;
- text-align: left;
- font-size: 14px;
- color: #333;
- box-sizing: border-box;
- // align-content: center;
- .status{
- display: block;
- // width: 20%;
- width: auto;
- min-width: 120px;
- height: 60px;
- // padding: 10px 10px;
- box-sizing: border-box;
- justify-content: center;
- display: flex;
-
- // margin-bottom: 10px;
- .itemStatus{
- display: inline-block;
- height: 40px;
- line-height: 40px;
- padding: 0 15px;
- border-radius: 10px;
- margin: 0 auto;
- cursor: pointer;
- }
- }
- }
- .objectList{
- text-align: left;
- overflow: auto;
- max-height: 85%;
- height: 80%;
-
- .OBox{
- background: #fafbfc;
- height: 62px;
- margin-bottom: 8px;
- line-height: 62px;
- padding: 5px 20px;
- // padding-bottom: 10px;
- position: relative;
- span{
- display: inline-block;
- }
- .O-tip{
- width: 36px;
- height: 20px;
- background: #50e3c2;
- border-radius: 22px;
- color: #fff;
- margin-right: 8px;
- font-size: 12px;
- display: inline-block;
- line-height: 20px;
- text-align: center;
- position: absolute;
- top: 25px;
- }
- .O-content{
- width: 60%;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- position: absolute;
- top: 5px;
- left: 70px;
- cursor: pointer;
- }
- .O-opt{
- position: absolute;
- top: 5px;
- right: 20px;
- }
- }
- .KRBox{
- background: #fafbfc;
- font-size: 14px;
- ul{
- li{
- width: 100%;
- height: 40px;
- padding: 5px 20px;
- position: relative;
- box-sizing:border-box;
- line-height: 40px;
- position: relative;
- .KR-tip{
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- color: rgb(46, 156, 255);
- margin-right: 10px;
- background: rgba(46, 156, 255, 0.1);
- border-radius: 11.5px;
- padding: 3px 9px;
- position: absolute;
- top: 8px;
- }
- .KR-content{
- width:60% ;
- display: inline-block;
- overflow:hidden;
- white-space:nowrap;
- text-overflow:ellipsis;
- height:100%;
- line-height: 30px;
- padding-left: 45px;
- .remindSpan{
- color:#2e9cff;
- display: inline-block;
- margin-right: 3px;
- cursor: pointer;
- }
- }
- .KR-opt{
- display: inline-block;
- width: 20%;
- position: absolute;
- right: 20px;
- top:5px;
- display: flex;
- // display: none;
-
- position: absolute;
- justify-content:flex-end;
- align-items:center
- }
- }
- li:hover .list-opt{
- display: flex;
- }
- }
- }
- }
- }
- .first{
- border-radius: 30px 0 0 0;
- margin-bottom: 0.5%;
- .okrBox-title{
- border-bottom: 1px solid rgb(240, 242, 245);
- }
- }
- .second{
- margin-right: 0;
- border-radius: 0 30px 0 0;
- margin-bottom: 0.5%;
- }
- .third{
- .okrBox-title{
- border-bottom: 1px solid rgb(240, 242, 245);
- }
- }
- .four{
- margin-right: 0
- }
- }
- }
- </style>
- <style lang="less">
- .el-tooltip__popper.is-dark {
- background: #303133;
- color: #FFF;
- opacity: 0.8;
- }
- .el-dialog__body {
- padding: 5px 20px 30px;
- color: #606266;
- font-size: 14px;
- word-break: break-all;
- }
- .top-opt{
- .el-input__inner{
- border: none;
- }
- .nameSearch{
- .el-input__inner{
- border-bottom: 1px solid #DCDFE6;
- border-radius: 0;
- }
- .el-input-group__append, .el-input-group__prepend{
- border: none;
- border-bottom: 1px solid #DCDFE6;
- background-color: transparent;
- }
- }
- .search{
- .el-button{
- border: 1px solid transparent;
- }
- }
- }
- </style>
- <style lang="less">
- .taskBody{
- .el-radio.is-bordered.is-checked {
- border-color: #CC9966;
- }
- .el-radio__input.is-checked .el-radio__inner {
- border-color: #CC9966;
- background: #CC9966;
- }
- .el-radio__input.is-checked+.el-radio__label {
- color: #CC9966;
- }
- .el-input.is-active .el-input__inner, .el-input__inner:focus {
- border-color: #CC9966;
- outline: 0;
- }
- .el-textarea__inner:focus {
- outline: 0;
- border-color: #CC9966;
- }
- .number__increase:hover {
- color: #CC9966;
- }
- .el-input-number__decrease:hover, .el-input-number__increase:hover {
- color: #CC9966;
- }
- .el-slider__input:hover,.el-input-number:hover,.el-input-number--small:hover{
- border-color: #CC9966;
- outline: 0;
- }
- .el-slider__button {
- width: 16px;
- height: 16px;
- border: 2px solid #CC9966;
- background-color: #FFF;
- border-radius: 50%;
- transition: .2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .el-slider__bar {
- height: 6px;
- background-color: #CC9966;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- position: absolute;
- }
- }
- .StatusBody{
- .second.el-radio.is-bordered.is-checked {
- border-color: #FFCC33;
- }
- .second .el-radio__input.is-checked .el-radio__inner {
- border-color: #FFCC33;
- background: #FFCC33;
- }
- .second .el-radio__input.is-checked+.el-radio__label {
- color: #FFCC33;
- }
- .first.el-radio.is-bordered.is-checked {
- border-color: #CC3300;
- }
- .first .el-radio__input.is-checked .el-radio__inner {
- border-color: #CC3300;
- background: #CC3300;
- }
- .first .el-radio__input.is-checked+.el-radio__label {
- color: #CC3300;
- }
- .third.el-radio.is-bordered.is-checked {
- border-color: #99CC99;
- }
- .third .el-radio__input.is-checked .el-radio__inner {
- border-color: #99CC99;
- background: #99CC99;
- }
- .third .el-radio__input.is-checked+.el-radio__label {
- color: #99CC99;
- }
- }
- .targetBody{
- .el-input__inner{
- border: none;
- background-color:transparent;
- color: #fff;
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- color:#FFF
- }
-
- .targetKR{
- .el-input__inner{
- border: none;
- background-color:transparent;
- color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- color:rgb(131, 137, 143);
- }
- .progress{
- .el-input-number__decrease{
- border-right: none;
- }
- .el-input-number__increase{
- border-left: none;
- }
- .el-input-number__decrease,.el-input-number__increase {
- background: none;
- }
- }
- .el-input--suffix .el-input__inner {
- padding-right: 66px;
- }
-
- }
- .el-input--suffix .el-input__inner {
- padding-right: 50px;
- }
- }
- .editKRBody{
- .progress{
- .el-input-number__decrease{
- border-right: none;
- }
- .el-input-number__increase{
- border-left: none;
- }
- .el-input-number__decrease, .el-input-number__increase {
- background: none;
- }
- .el-input__inner{
- border: none;
- background-color:transparent;
- color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- // color:rgb(131, 137, 143);
- }
- }
- .el-input__inner{
- border: none;
- background-color:transparent;
- // color: rgb(131, 137, 143);
- }
- .el-input .el-input__count .el-input__count-inner {
- background-color: transparent;
- line-height: initial;
- display: inline-block;
- padding: 0 5px;
- // color:rgb(131, 137, 143);
- }
- .el-input_icon .el-iocn-circle-close .el-input_clear{
- color:#fff
- }
- }
-
- </style>
|