组件分化

src/components/input/textArea.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div v-show="isEmpty && !edit" class="text-edit">
-      您还没有设定目标请
-      <el-button type="text" @click="ImmediateAddition">立即添加</el-button>
+      {{ emptyText }}
+      <el-button type="text" @click="ImmediateAddition">{{ inputButton }}</el-button>
     </div>
     <div v-show="edit">
       <el-tooltip effect="dark" content="单击‘编辑’，失去焦点 ‘保存’" placement="bottom">
@@ -35,6 +35,16 @@ export default {
       type: String,
       default: 'small',
       required: false
+    },
+    emptyText: {
+      type: String,
+      default: '',
+      required: false
+    },
+    inputButton: {
+      type: String,
+      default: '',
+      required: false
     }
   },
   data() {

src/styles/detail-pages.scss

@@ -74,56 +74,4 @@
       margin-left: 6px;
     }
   }
-}
-@mixin time-line {
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px;
-  width: 100%;
-  height: 20vh;
-  min-height: 150px;
-  white-space: nowrap;
-  li {
-    display: inline-block;
-    position: relative;
-    text-align: center;
-    width: 24%;
-    padding-top: 5%;
-    margin: 0 1%;
-    i div {
-      position: absolute;
-      top: -10px;
-      left: 50%;
-      margin-left: -10px;
-      width: 20px;
-      height: 20px;
-      b {
-        display: inline-block;
-        cursor: pointer;
-        border: 2px solid #61D3B8;
-        border-radius: 50%;
-        background: #61D3B8;
-        color: #61D3B8;
-        z-index: 9999;
-        width: 20px;
-        height: 20px;
-      }
-    }
-    i:before {
-      content: '';
-      width: 0%;
-      text-align: center;
-      position: absolute;
-      top: -50%;
-      left: 49.3%;
-      height: 100%;
-      border: 1px dashed #BBBBBB;
-    }
-    div {
-      text-align: center;
-      width: 100%;
-      position: absolute;
-      bottom: 284%;
-    }
-  }
-}
+}

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="data-main">
+    <article>
+      <div class="data-num">
+        <div class="data-add blue" @click="need_open = true" />
+        <div class="data-detail">
+          <b>{{ inputValue.requirementCount }}</b>
+          <span>需求数量</span>
+        </div>
+      </div>
+      <div class="data-line" />
+      <div class="data-chart">
+        <normal-echart v-if="value" :chart-id="'chartFirst'" :option="echartsOption1" />
+      </div>
+    </article>
+    <article>
+      <div class="data-num">
+        <div class="data-add green" @click="reated_task()" />
+        <div class="data-detail">
+          <b>{{ inputValue.taskCount }}</b>
+          <span>任务数量</span>
+        </div>
+      </div>
+      <div class="data-line" />
+      <div class="data-chart">
+        <normal-echart v-if="value" :chart-id="'chartFirst'" :option="echartsOption1" />
+      </div>
+    </article>
+    <article>
+      <div class="data-num">
+        <div class="data-add red" @click="created_bug()" />
+        <div class="data-detail">
+          <b>{{ inputValue.bugCount }}</b>
+          <span>缺陷数量</span>
+        </div>
+      </div>
+      <div class="data-line" />
+      <div class="data-chart">
+        <normal-echart v-if="value" :chart-id="'chartFirst'" :option="echartsOption1" />
+      </div>
+    </article>
+    <requirement-create
+      class="diologPadding"
+      title="新建需求"
+      :data="requirement"
+      :visible="need_open"
+      @cancel="closeDioang()"
+      @confirm="need_open=false"
+    />
+    <openDialog v-if="task_open" ref="task_createdUpdata" />
+    <createdBug v-if="bug_open" ref="createdBug" />
+  </div>
+</template>
+<script>
+import normalEchart from '@/components/chart/normalEchart'
+import RequirementCreate from '@/views/projectManage/requirement/list/create'
+import openDialog from '@/views/projectManage/dialog_vue'
+import createdBug from '@/views/projectManage/bugList/file/createdBug'
+export default {
+  components: {
+    normalEchart,
+    RequirementCreate,
+    openDialog,
+    createdBug
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => null,
+      required: false
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      edit: false,
+      need_open: false, // 新建需求
+      dataChart1: false,
+      echartsOption1: {},
+      requirement: {},
+      task_open: false, // 新建任务
+      bug_open: false// 新建缺陷
+    }
+  },
+  watch: {
+    value: {
+      handler(newV, oldV) {
+        this.inputValue = newV
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initRequirementCreateDialog() {
+      this.requirement.belongingProject = this.$route.query.id // 这里传入项目id
+      this.requirement.bizId = localStorage.getItem('bizId') // 这里传入业务线id
+    },
+    closeDioang() {
+      this.need_open = false
+      this.initRequirementCreateDialog()
+      this.change()
+    },
+    reated_task(e) { // 建任务
+      this.task_open = true
+      this.$nextTick(() => {
+        this.$refs.task_createdUpdata.init(2)
+      })
+    },
+    created_bug() { // 缺陷创建
+      this.bug_open = true
+      this.$nextTick(() => {
+        this.$refs.createdBug.init(1)
+      })
+    },
+    change() {
+      this.$emit('update:valuesList', this.inputValue)
+      this.$emit('change', this.inputValue)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.data-main {
+  padding: 61px 0 41px 0;
+}
+article{
+  width: 85%;
+  height: 260px;
+  min-width: 1043px;
+  margin: 0 auto 20px auto;
+  box-shadow:0px 0px 11px rgba(238,240,245,1);
+  border-radius:7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .data-num {
+    width: 41%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 127px 0 62px;
+    .data-add {
+      height: 92px;
+      width: 92px;
+      border-radius: 50%;
+    }
+    .blue {
+      background-color:rgba(64,158,255,0.15);
+    }
+    .green {
+      background-color:rgba(126,211,33,0.15);
+    }
+    .red {
+      background-color: rgba(245,108,108, 0.15);
+    }
+    .data-detail {
+      color: #333333;
+      display: flex;
+      width: 70px;
+      flex-direction: column;
+      align-items: center;
+      b{
+        font-size: 75px;
+      }
+      span {
+        font-size: 16px;
+      }
+    }
+  }
+  .data-line {
+    width:0px;
+    height:156px;
+    border:1px solid rgba(112,112,112,1);
+    opacity:0.15;
+  }
+  .data-chart {
+    width: 58%;
+    height: 100%;
+  }
+}
+</style>

src/views/projectManage/projectList/projectViewDetails.vue

@@ -34,7 +34,7 @@
           <el-dropdown placement="bottom">
             <i class="el-icon-circle-plus icon-add" />
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="createDialogVisible = true">新建需求</el-dropdown-item>
+              <el-dropdown-item @click.native="need_open = true">新建需求</el-dropdown-item>
               <el-dropdown-item @click.native="reated_task()">新建任务</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -46,36 +46,8 @@
           <i class="el-icon-delete icon-delete" @click="dele_pro()" />
         </div>
       </el-header>
-      <el-container class="is-vertical">
-        <section v-show="activeName === '5'" class="bgborder" style=" margin:0 1%;minWidth: 55%;overflow-x: hidden;">
-          <div class="titDiv">
-            <div class="titIcon" />
-            <div class="titSonName">数据统计</div>
-          </div>
-          <div class="special-button" style="display: flex; justify-content: space-between; align-items: center;">
-            <span style="text-align: center; margin-left: 10%">
-              <p>需求数量</p>
-              <p style="font-size: 72px;margin: 0">{{ form_query.requirementCount }}</p>
-              <p>
-                <el-button size="mini" type="info" plain @click="createDialogVisible = true">提需求</el-button>
-              </p>
-            </span>
-            <span style="text-align: center;">
-              <p>任务数量</p>
-              <p style="font-size: 72px;margin: 0">{{ form_query.taskCount }}</p>
-              <p>
-                <el-button size="mini" type="info" plain @click="reated_task()">建任务</el-button>
-              </p>
-            </span>
-            <span style="text-align: center;margin-right:10%;">
-              <p>Bug数量</p>
-              <p style="font-size: 72px;margin: 0">{{ form_query.bugCount }}</p>
-              <p>
-                <el-button size="mini" type="info" plain @click="created_bug">提bug</el-button>
-              </p>
-            </span>
-          </div>
-        </section>
+      <!-- 概览 -->
+      <el-container v-show="activeName === '1'" class="is-vertical">
         <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
@@ -113,13 +85,22 @@
             </el-form>
           </article>
         </section>
+        <section class="main-section">
+          <div class="el-main-title">
+            <div class="title-left-icon" />
+            <div class="title-left-name">项目描述</div>
+          </div>
+          <article>
+            <text-area :value.sync="form_query.description" :empty-text="'请输入'" :input-button="'需求描述'" @change="changeArea" />
+          </article>
+        </section>
         <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
             <div class="title-left-name">项目总目标</div>
           </div>
           <article>
-            <text-area :value.sync="form_query.target" @change="changeArea" />
+            <text-area :value.sync="form_query.target" :empty-text="'您还没有设定目标请'" :input-button="'立即添加'" @change="changeArea" />
           </article>
         </section>
         <section class="main-section">
@@ -132,6 +113,14 @@
           </article>
         </section>
       </el-container>
+      <!-- 概览 -->
+      <!-- 统计 -->
+      <el-container v-show="activeName === '5'" class="is-vertical">
+        <section class="main-section">
+          <data-statistics :value="form_query" @change="get_list" />
+        </section>
+      </el-container>
+      <!-- 统计 -->
       <el-container v-show="activeName === '3'">
         <el-aside class="bgborder" style="margin:0 1% 1% 1%;">
           <div class="titDiv">
@@ -446,15 +435,15 @@
       </span>
     </el-dialog>
     <!-- 弹窗 -->
-    <openDialog v-if="dialog_open" ref="task_createdUpdata" />
-    <createdBug v-if="modalShow" ref="createdBug" />
+    <openDialog v-if="task_open" ref="task_createdUpdata" />
+    <createdBug v-if="bug_open" ref="createdBug" />
     <requirement-create
       class="diologPadding"
       title="新建需求"
       :data="requirement"
-      :visible="createDialogVisible"
+      :visible="need_open"
       @cancel="closeDioang()"
-      @confirm="createDialogVisible=false"
+      @confirm="need_open=false"
     />
     <TestReport v-if="dialogTestReport" ref="TestReport" />
     <DailyReport v-if="dialogDailyReport" ref="DailyReport" />
@@ -482,9 +471,6 @@ import {
   projectUpdate,
   mileStoneList,
   settingGetBizList,
-  mileStoneCreate,
-  mileStoneUpdate,
-  mileStoneDelete,
   projectDelete,
   projectDeleteCheck,
   taskList,
@@ -493,6 +479,7 @@ import {
 import searchPeople from '@/components/select/searchPeople'
 import textArea from '@/components/input/textArea'
 import mileStone from './component/mileStone'
+import dataStatistics from './component/dataStatistics'
 import openDialog from '@/views/projectManage/dialog_vue'
 import Utils from '../../../util.js'
 import RequirementCreate from '@/views/projectManage/requirement/list/create'
@@ -515,7 +502,8 @@ export default {
     drawer,
     searchPeople,
     textArea,
-    mileStone
+    mileStone,
+    dataStatistics
   },
   filters: {
     ellipsis(value, num) {
@@ -528,15 +516,15 @@ export default {
   },
   data() {
     return {
-      activeName: '1', // 顶部tab切换
+      activeName: '5', // 顶部tab切换
       num: '',
       image_url: image_url,
       display: false,
-      modalShow: false, // 弹窗（新建）
+      bug_open: false, // 弹窗（新建）
       loading: false,
-      dialog_open: false,
+      task_open: false,
       pauseDescription: '',
-      createDialogVisible: false, // 需求
+      need_open: false, // 需求
       options: [],
       test: [],
       rules_form: {
@@ -648,7 +636,7 @@ export default {
       })
     },
     closeDioang() {
-      this.createDialogVisible = false
+      this.need_open = false
       this.get_list()
       this.initRequirementCreateDialog()
     },
@@ -675,15 +663,9 @@ export default {
         }
         this.form_query = res.data[0]
         this.project_from = res.data[0]
-        this.form_query.status === 0
-          ? this.$set(this.form_query, 'statusString', '未开始')
-          : ''
-        this.form_query.status === 1
-          ? this.$set(this.form_query, 'statusString', '进行中')
-          : ''
-        this.form_query.status === 2
-          ? this.$set(this.form_query, 'statusString', '已完成')
-          : ''
+        this.form_query.status === 0 ? this.$set(this.form_query, 'statusString', '未开始') : ''
+        this.form_query.status === 1 ? this.$set(this.form_query, 'statusString', '进行中') : ''
+        this.form_query.status === 2 ? this.$set(this.form_query, 'statusString', '已完成') : ''
         this.get_allTask()
       })
       settingGetBizList({}).then(res => {
@@ -783,7 +765,7 @@ export default {
       window.open(href, '_blank')
     },
     created_bug() {
-      this.modalShow = true
+      this.bug_open = true
       this.$nextTick(() => {
         this.$refs.createdBug.init(1)
       })
@@ -899,7 +881,7 @@ export default {
     },
     reated_task(e) {
       // 建任务
-      this.dialog_open = true
+      this.task_open = true
       this.$nextTick(() => {
         this.$refs.task_createdUpdata.init(2)
       })
@@ -1017,9 +999,6 @@ export default {
       }
     }
   }
-  .time-line {
-    @include time-line;
-  }
 }
 .plan-checked {
   padding-left: 21px;