优化统计echarts

src/views/projectManage/components/demand.vue

@@ -74,7 +74,7 @@
 </template>
 <script>
 import { listByRequire } from '@/api/requirement.js'
-import scheduleList from '@/views/projectManage/requirement/components/scheduleList.vue'
+import scheduleList from '@/views/projectManage/components/scheduleList.vue'
 import '@/styles/PublicStyle/index.scss' // 通用css
 import { taskUpdate } from '@/api/taskIndex'
 import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗

src/views/projectManage/components/scheduleList.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="white">
+    <el-table
+      :id="'schedule-'+id"
+      :data="scheduleList"
+      show-overflow-tooltip="true"
+      :show-header="false"
+      :cell-class-name="addClass"
+      row-key="id"
+      border
+      style="min-height: 90px;"
+      size="mini"
+    >
+      <el-table-column prop="type" label="类型" min-width="70">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+          <div :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="desc" label="描述" min-width="150" align="left" show-overflow-tooltip />
+      <el-table-column prop="seperateDaysNoHoliday" label="排期" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="dayLength" label="时长" min-width="50" />
+      <el-table-column prop="peopleList" label="参与人员" min-width="150" show-overflow-tooltip />
+      <el-table-column label="操作" width="120">
+        <template slot-scope="scope">
+          <div class="btn-style">
+            <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="editSchedule(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="deleteSchedule(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <modify-schedule
+      v-if="visibleSchedule"
+      :visible.sync="visibleSchedule"
+      :select-task-list="selectTaskList"
+      :is-delete.sync="isDelete"
+      :detail-data="detailData"
+      :title="DialogTitle"
+      @update="listByTask(id)"
+    />
+  </div>
+</template>
+<script>
+import Sortable from 'sortablejs'
+import { sortForTask } from '@/api/projectViewDetails'
+import modifySchedule from '@/views/projectManage/requirement/components/modifySchedule.vue'
+import '@/styles/PublicStyle/index.scss' // 通用css
+export default {
+  components: {
+    modifySchedule
+  },
+  props: {
+    id: {
+      type: Number,
+      default: NaN,
+      required: true
+    },
+    selectTaskList: { // 已选任务列表
+      type: Array,
+      default: () => [],
+      required: false
+    },
+    requiredList: {
+      type: Array,
+      default: () => [],
+      required: false
+    },
+    typeList: {
+      type: Array,
+      default: () => [],
+      required: false
+    }
+  },
+  data() {
+    return {
+      scheduleList: [],
+      scheduleDetail: {},
+      visibleSchedule: false,
+      detailData: null,
+      taskScheduleEvent: [], // 排期类型
+      DialogTitle: '新建排期',
+      isDelete: false // 删除排期操作
+    }
+  },
+  watch: {
+    // id: {
+    //   handler(newV, oldV) {
+    //     this.listByTask(newV)
+    //   },
+    //   immediate: true
+    // },
+    requiredList: {
+      handler(newV, oldV) {
+        this.scheduleList = newV
+      },
+      immediate: true
+    },
+    typeList: {
+      handler(newV, oldV) {
+        this.taskScheduleEvent = newV
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.rowDrop()
+  },
+  methods: {
+    rowDrop() {
+      const tbody = document.querySelector(`#schedule-${this.id} tbody`)
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = _this.scheduleList.splice(oldIndex, 1)[0]
+          _this.scheduleList.splice(newIndex, 0, currRow)
+          _this.sortForTask(_this.scheduleList.map(item => item.id))
+        }
+      })
+    },
+    async sortForTask(arr) {
+      const res = await sortForTask(this.id, arr)
+      if (res.code === 200) {
+        this.$message({ message: '移动成功', type: 'success', duration: 1000, offset: 150 })
+      }
+    },
+    getType(value) {
+      const res = this.taskScheduleEvent.find(item => item.code === value) || {}
+      return res.msg
+    },
+    async listByTask(id) { // 获取排期列表
+      this.$emit('listByTask')
+    },
+    addSchedule() {
+      this.detailData = null
+      this.DialogTitle = '新建排期'
+      this.visibleSchedule = true
+    },
+    deleteSchedule(row) { // 删除排期
+      this.DialogTitle = '删除排期'
+      this.isDelete = true
+      this.visibleSchedule = true
+      this.detailData = row
+    },
+    editSchedule(row) { // 编辑排期
+      this.DialogTitle = '编辑排期'
+      this.visibleSchedule = true
+      this.detailData = row
+    },
+    addClass({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex <= 5) {
+        return 'cell-greys'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.white {
+  background: #ffffff;
+  .add-schedule {
+    padding: 0 0 20px 0;
+  }
+  /deep/.el-table{
+    background: #ffffff !important;
+  }
+}
+.btn-style {
+ >>> .el-button {
+    padding: 0;
+  }
+}
+.add-schedule {
+  cursor: pointer;
+  color: #409EFF;
+  font-size: 14px;
+  margin: 0 20px;
+  padding: 20px 0;
+  i {
+    margin-right: 4px;
+  }
+  span {
+    margin-right: 20px;
+  }
+}
+>>>.el-table, .el-table__expanded-cell{
+  background:rgba(248,248,248,0.6);
+}
+.white {
+  background: #ffffff;
+  .add-schedule {
+    padding: 0 0 20px 0;
+  }
+  /deep/.el-table{
+    background: #ffffff !important;
+  }
+}
+.sortable-tip {
+  height: 26px;
+  width: 15px;
+  border-radius:2px;
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 8px;
+  }
+}
+</style>
+<style>
+ .cell-greys .cell {
+   margin-left: 10px !important;
+ }
+.el-tooltip__popper.is-dark {
+  background:rgba(121,132,150,0.8);
+  color: #FFF;
+}
+</style>
+

src/views/projectManage/projectList/components/dataStatistics.vue

@@ -112,7 +112,7 @@ export default {
         color: ['#3AA1FF'],
         tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
         grid: { left: '15%', right: '15%', top: '15%', bottom: '10%', containLabel: true },
-        xAxis: [{ type: 'category', data: data.xaxis, axisTick: { alignWithLabel: true }}],
+        xAxis: [{ type: 'category', data: data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
         series: [
           {

src/views/projectManage/requirement/components/scheduleList.vue

@@ -1,29 +1,38 @@
 <template>
-  <div class="white">
+  <div class="schedule-list" :class="className">
+    <!-- <el-col align="right" class="add-schedule"><span @click="addSchedule()"><i class="el-icon-circle-plus-outline" />添加排期</span></el-col> -->
     <el-table
       :id="'schedule-'+id"
       :data="scheduleList"
+      :header-cell-style="{ backgroundColor: 'rgba(232,232,232,0.4)', color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}"
       show-overflow-tooltip="true"
-      :show-header="false"
-      :cell-class-name="addClass"
       row-key="id"
       border
-      style="min-height: 90px;"
+      stripe
       size="mini"
     >
-      <el-table-column prop="type" label="类型" min-width="70">
+      <el-table-column v-if="noMove" width="80">
+        <template>
+          <el-tooltip class="item" effect="dark" content="代表移动，鼠标选中区域可以向上移动" placement="bottom">
+            <div class="sortable-tip">
+              <img :src="move">
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" min-width="100">
         <template slot-scope="scope">
           {{ scope.row.name }}
-          <div :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" />
+          <div v-show="showunlock" :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" />
         </template>
       </el-table-column>
       <el-table-column prop="desc" label="描述" min-width="150" align="left" show-overflow-tooltip />
-      <el-table-column prop="seperateDaysNoHoliday" label="排期" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="seperateDaysNoHoliday" label="排期" min-width="200" show-overflow-tooltip />
       <el-table-column prop="dayLength" label="时长" min-width="50" />
-      <el-table-column prop="peopleList" label="参与人员" min-width="150" show-overflow-tooltip />
-      <el-table-column label="操作" width="120">
+      <el-table-column prop="peopleList" label="参与人员" min-width="150" />
+      <el-table-column label="操作" width="200">
         <template slot-scope="scope">
-          <div class="btn-style">
+          <div v-if="showunlock">
             <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="editSchedule(scope.row)">编辑</el-button>
             <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="deleteSchedule(scope.row)">删除</el-button>
           </div>
@@ -31,10 +40,19 @@
       </el-table-column>
 
     </el-table>
+    <div class="bottom-detail">
+      <el-row>排期总汇：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }}</el-row>
+      <el-row v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length>0">
+        <el-col :span="2" style="width: 100px">预计上线版本：</el-col>
+        <el-col :span="6">
+          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}<br></span>
+        </el-col>
+      </el-row>
+      <el-row v-else>预计上线版本：</el-row>
+    </div>
     <modify-schedule
       v-if="visibleSchedule"
       :visible.sync="visibleSchedule"
-      :select-task-list="selectTaskList"
       :is-delete.sync="isDelete"
       :detail-data="detailData"
       :title="DialogTitle"
@@ -44,22 +62,31 @@
 </template>
 <script>
 import Sortable from 'sortablejs'
-import { sortForTask } from '@/api/projectViewDetails'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import { listByRequire } from '@/api/requirement.js'
+import { listByTask, sortForTask } from '@/api/projectViewDetails'
 import modifySchedule from './modifySchedule'
+import move from '@/assets/麻将@2x.png'
 import '@/styles/PublicStyle/index.scss' // 通用css
 export default {
   components: {
     modifySchedule
   },
+  filters: {
+    handlerDate(val) {
+      return val ? moment(val).format('YYYY-MM-DD') : ''
+    }
+  },
   props: {
     id: {
       type: Number,
       default: NaN,
       required: true
     },
-    selectTaskList: { // 已选任务列表
-      type: Array,
-      default: () => [],
+    all: {
+      type: Boolean,
+      default: false,
       required: false
     },
     requiredList: {
@@ -71,10 +98,26 @@ export default {
       type: Array,
       default: () => [],
       required: false
+    },
+    className: {
+      type: String,
+      default: '',
+      required: false
+    },
+    noMove: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    showunlock: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   data() {
     return {
+      move: move,
       scheduleList: [],
       scheduleDetail: {},
       visibleSchedule: false,
@@ -85,12 +128,12 @@ export default {
     }
   },
   watch: {
-    // id: {
-    //   handler(newV, oldV) {
-    //     this.listByTask(newV)
-    //   },
-    //   immediate: true
-    // },
+    id: {
+      handler(newV, oldV) {
+        this.listByTask(newV)
+      },
+      immediate: true
+    },
     requiredList: {
       handler(newV, oldV) {
         this.scheduleList = newV
@@ -131,7 +174,15 @@ export default {
       return res.msg
     },
     async listByTask(id) { // 获取排期列表
-      this.$emit('listByTask')
+      const res = this.all ? await listByRequire(id) : await listByTask(id)
+      if (res.code === 200) {
+        this.scheduleList = res.data.scheduleDetailRespons || []
+        this.scheduleDetail = res.data || {}
+        this.scheduleList = this.scheduleList.map(item => ({
+          ...item,
+          peopleList: item.peopleObjectList.map(item => item.name).join('，')
+        }))
+      }
     },
     addSchedule() {
       this.detailData = null
@@ -148,30 +199,11 @@ export default {
       this.DialogTitle = '编辑排期'
       this.visibleSchedule = true
       this.detailData = row
-    },
-    addClass({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex <= 5) {
-        return 'cell-greys'
-      }
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.white {
-  background: #ffffff;
-  .add-schedule {
-    padding: 0 0 20px 0;
-  }
-  /deep/.el-table{
-    background: #ffffff !important;
-  }
-}
-.btn-style {
- >>> .el-button {
-    padding: 0;
-  }
-}
 .add-schedule {
   cursor: pointer;
   color: #409EFF;
@@ -185,6 +217,10 @@ export default {
     margin-right: 20px;
   }
 }
+.schedule-list {
+  margin: 0 20px;
+  padding: 0;
+}
 >>>.el-table, .el-table__expanded-cell{
   background:rgba(248,248,248,0.6);
 }
@@ -197,6 +233,15 @@ export default {
     background: #ffffff !important;
   }
 }
+.bottom-detail {
+  font-size: 14px;
+  // width: calc(100% - 40px);
+  margin: 0 20px;
+  padding: 20px 0;
+  :first-child {
+    margin-bottom: 10px;
+  }
+}
 .sortable-tip {
   height: 26px;
   width: 15px;
@@ -210,12 +255,8 @@ export default {
 }
 </style>
 <style>
- .cell-greys .cell {
-   margin-left: 10px !important;
- }
 .el-tooltip__popper.is-dark {
   background:rgba(121,132,150,0.8);
   color: #FFF;
 }
 </style>
-

src/views/projectManage/taskList/components/dataStatistics.vue

@@ -55,7 +55,7 @@ export default {
         color: ['#3AA1FF'],
         tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
         grid: { left: '15%', right: '15%', top: '15%', bottom: '10%', containLabel: true },
-        xAxis: [{ type: 'category', data: data.xaxis, axisTick: { alignWithLabel: true }}],
+        xAxis: [{ type: 'category', data: data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
         series: [
           {

src/views/quality/defectStatistics.vue

@@ -445,7 +445,7 @@ export default {
         color: ['#3AA1FF'],
         tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
         grid: { left: '0', right: '0', top: '5%', bottom: '0', containLabel: true },
-        xAxis: [{ type: 'category', data: this.chart3Data.xaxis, axisTick: { alignWithLabel: true }}],
+        xAxis: [{ type: 'category', data: this.chart3Data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
         series: [
           {
@@ -477,7 +477,7 @@ export default {
           color: ['#3AA1FF'],
           tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
           grid: { left: '0', right: '0', top: '5%', bottom: '0', containLabel: true },
-          xAxis: [{ type: 'category', data: this.chart1Data.xaxis, axisTick: { alignWithLabel: true }}],
+          xAxis: [{ type: 'category', data: this.chart1Data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
           yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
           series: [
             {