提交工时成本统计项目名称和项目编号切换的功能

fhKeeper/formulahousekeeper/timesheet/src/views/project/cost.vue

@@ -1,14 +1,14 @@
 <template>
     <section>
         <el-row style="padding-bottom: 0px;text-align:center;margin-top:20px;z-index: 999;">
-        <el-col :span="6" >
+        <el-col :span="5" >
             <div ><span style="color:#999;">{{ $t('chartY') }} </span>
             <el-radio-group v-model="yAxisValue" @change="onYAxisChange" size="small">
                 <el-radio-button label="1" v-if="permissions.countHours">{{ $t('accordingtoworkinghours') }}</el-radio-button>
                 <el-radio-button label="0" v-if="permissions.countCost">{{ $t('accordingtothecost') }}</el-radio-button>
             </el-radio-group></div>
         </el-col>
-        <el-col :span="14" style="display: flex;flex-wrap: wrap;justify-content: flex-end;">
+        <el-col :span="16" style="display: flex;flex-wrap: wrap;justify-content: flex-end;">
             <el-date-picker v-show="user.timeType.fixMonthcost==0"  size="small"
             v-model="dateRange" :editable="false" 
             format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
@@ -39,15 +39,11 @@
             </el-radio-group>
 
             <el-select v-if="radio == $t('other.project')||radio == namess " v-model="proJuctId" :placeholder="$t('defaultText.pleaseSelectSnItem')" clearable filterable size="small" @change="getEchart" style="margin-left:10px">
-          <el-option v-for="(item) in projectList" :key="item.id" :label="item.projectName + (item.projectCode ? item.projectCode : '')" :value="item.id">
-            <span style="float: left;color: #8492a6;">{{ item.projectCode }}</span>
-            <span style="float: right;font-size: 13px;margin-left: 20px">{{ item.projectName }}</span>
-          </el-option>
+            <el-option v-for="(item) in projectList" :key="item.id" :label="item.projectName + (item.projectCode ? item.projectCode : '')" :value="item.id">
+                <span style="float: left;color: #8492a6;">{{ item.projectCode }}</span>
+                <span style="float: right;font-size: 13px;margin-left: 20px">{{ item.projectName }}</span>
+            </el-option>
         </el-select>
-<!-- 
-            <el-select v-model="customName" filterable placeholder="请选择" style="margin-top: 10px;width: 350px" v-if="theCustomListFlg" @change="jieliu()">
-                <el-option v-for="item in customList" :key="item.id" :label="item.name" :value="item.name"></el-option>
-            </el-select> -->
 
             <el-select v-model="personnelValue" filterable clearable :placeholder="hasReportUserList.length == 0 ? $t('nodata') : $t('pleaseselectpersonnel')"  size="small" style="margin-top: 10px;width: 350px" v-if="(radio == $t('ren-yuan'))&& user.userNameNeedTranslate != '1'" @change="personnel()"
             :disabled="hasReportUserList.length == 0 ? true : false">
@@ -61,31 +57,31 @@
             </span>
 
         </el-col>
-        <el-col :span="4">
+        <el-col :span="3">
             <el-button @click="exportProjectData" v-if="theCustomListFlg"  size="small">{{ $t('reporderived') }}</el-button>
             <el-button @click="showExportDialog" v-else  size="small">{{ $t('reporderived') }}</el-button>
         </el-col>
         </el-row>
-        <!-- <div id="clearfix" :style="'width:'+widthHtval+'px;position: relative; height:'+containerHeight+'px;'">
-             <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
-        </div> -->
         <div id="clearfix" :class="radio == $t('ren-yuan') ? 'ryuans' : ''" :style="'overflow-x: auto;width:100%;padding-bottom: 100px; position: relative; height:'+containerHeight+'px;'" v-loading="radioLoading">
-            <div id="container" :style="'height:'+(containerHeight - 20)+'px;width:100%'"></div>
-            <div class="poss">
+            <div id="container" ref="container" :style="'height:'+(containerHeight - 20)+'px;width:100%'"></div>
+            <div class="poss" :style="`width:${possWidth}px;`">
+                <div class="poss-btn">
+                    <el-radio-group v-model="possradio" size="small" @change="onYAxisChange" v-if="radio == '项目'">
+                        <el-radio-button label="1">项目名称</el-radio-button>
+                        <el-radio-button label="2">项目编号</el-radio-button>
+                    </el-radio-group>
+                </div>
                 <el-pagination
-                  @size-change="echartsSizeChange"
-                  @current-change="echartsCurrentChange"
-                  :current-page="page"
-                  :page-sizes="[50]"
-                  :page-size="50"
-                  layout="total, sizes, prev, pager, next"
-                  :total="total">
+                @size-change="echartsSizeChange"
+                @current-change="echartsCurrentChange"
+                :current-page="page"
+                :page-sizes="[50]"
+                :page-size="50"
+                layout="total, sizes, prev, pager, next"
+                :total="total">
                 </el-pagination>
             </div>
         </div>
-        <!-- <div>
-             <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
-        </div> -->
         <div style="position:fixed;top:170px;left:600px;" v-show="radio==$t('lable.department') && parentDeptId != null">
             <el-button @click="backToParentDept">{{ $t('returnsuperior') }}</el-button>
         </div>
@@ -252,6 +248,8 @@
                 departmentList: [],
                 radioLoading: false,
                 proJuctId:'',
+                possWidth: 300,
+                possradio: '1'
             };
         },
         methods: {
@@ -1059,7 +1057,7 @@
                             for(var i in list) {
                                 if(this.radio==this.$t('other.project') || this.radio == this.$t('zhu-xiang-mu')) {
                                     if(this.radio == this.$t('other.project')){
-                                        xList.push(list[i].project);
+                                        xList.push(this.possradio == '1' ? list[i].project : list[i].projectCode);
                                     }else{
                                         xList.push(list[i].mainProjectName);
                                     }
@@ -1439,12 +1437,11 @@
             this.myChart = null
         },
         mounted() {
+            this.possWidth = this.$refs.container.clientWidth
             this.containerHeight = window.innerHeight - 200
-            // this.containerHeight = window.innerHeight - 130
             const that = this;
             window.onresize = function temp() {
                 this.containerHeight = window.innerHeight - 130
-                // this.containerHeight = window.innerHeight - 200
             };
             if(this.permissions.countCost && !this.permissions.countHours){
                 this.yAxisValue = '0'
@@ -1521,8 +1518,14 @@
     .poss {
         position: fixed;
         bottom: 10px;
-        right: 1%;
         box-sizing: border-box;
+        padding: 0 1%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .poss-btn {
+            display: flex;
+        }
     }
 </style>