wangziqian 4 жил өмнө
parent
commit
ac157b2913

+ 86 - 9
src/views/workbench/components/statisticsSection.vue

@@ -9,10 +9,32 @@
               <label>交付已延期</label>
               <div class="number">1</div>
             </div>
+            <div class="data-item" />
+            <div class="data-item" />
+            <div class="data-item" />
+            <div class="data-item" />
+            <div class="data-item" />
           </div>
         </div>
-        <div class="statistics-chart">
+        <div v-if="title !=='缺陷'" class="statistics-chart">
           <h2>未上线{{ title }}状态分布</h2>
+          <div class="chart-contain">
+            <normal-echart v-if="echartsOption" :chart-id="type+title" :option="echartsOption" />
+          </div>
+        </div>
+        <div v-if="title ==='缺陷'" class="statistics-chart">
+          <div class="two-title">
+            <h2>我提报的-未完成缺陷状态分布</h2>
+            <h2>提给我的-未完成缺陷状态分布</h2>
+          </div>
+          <div class="two-chart-contain">
+            <div class="chart-contain">
+              <normal-echart v-if="echartsOption" :chart-id="type+title+'1'" :option="echartsOption" />
+            </div>
+            <div class="chart-contain">
+              <normal-echart v-if="echartsOption" :chart-id="type+title+'2'" :option="echartsOption2" />
+            </div>
+          </div>
         </div>
       </div>
     </transition>
@@ -26,10 +48,12 @@
 </template>
 
 <script>
+import normalEchart from '@/components/chart/normalEchart'
 export default {
   name: 'StatisticsSectionVue',
+  components: { normalEchart },
   props: {
-    searchForm: {
+    searchForm: { // 搜索项的信息
       type: Object,
       default: () => {
         return {
@@ -39,7 +63,7 @@ export default {
       },
       required: true
     },
-    type: {
+    type: { // 个人还是团队
       type: String,
       default: 'person',
       required: false
@@ -48,11 +72,34 @@ export default {
       type: String,
       default: '需求',
       required: false
+    },
+    requestObj: { // 请求的接口
+      type: Object,
+      default: () => null,
+      required: false
     }
   },
   data() {
     return {
-      show: true
+      show: true,
+      echartsOption: null,
+      echartsOption2: null,
+      tips: {
+        '需求': [
+          '交付日期为今天,且状态仍未变更为“已上线”的需求数量。',
+          '已过交付日期,状态仍未变更为“已上线”的需求数量。',
+          '交付日期在本周内的需求数量。',
+          '交付日期在本周,且状态仍未变更为“已上线”的需求数量。',
+          '交付日期在下周的需求数量。'
+        ],
+        '任务': [
+          '交付日期为今天,且状态仍未变更为“已上线”的任务数量。',
+          '已过交付日期,状态仍未变更为“已上线”的任务数量。',
+          '交付日期在本周内的任务数量。',
+          '交付日期在本周,且状态仍未变更为“已上线”的任务数量。',
+          '交付日期在下周任务数量。'
+        ]
+      }
     }
   },
   watch: {
@@ -61,11 +108,24 @@ export default {
 
       },
       deep: true
-    },
-    type: {
-      handler(newV) {
-
+    }
+  },
+  methods: {
+    initData() {
+      if (this.requestObj) {
+        const { requestData, requestChart } = this.requestObj
+        this.getData(requestData)
+        this.getChart(requestChart)
       }
+    },
+    async getData(requestUrl) {
+      const res = await requestUrl()
+    },
+    async getChart(requestUrl) {
+      const res = await requestUrl()
+    },
+    changeData() {
+      this.$emit('change', this.title)
     }
   }
 }
@@ -93,7 +153,7 @@ export default {
   position: relative;
   width: 100%;
   height: 474px;
-  padding: 35px;
+  padding: 27px 35px;
   display: grid;
   grid-template-columns: repeat(2,50%);
   h2 {
@@ -130,6 +190,23 @@ export default {
     }
   }
 }
+.statistics-chart {
+  .two-title {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2,50%);
+  }
+  .two-chart-contain {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2,50%);
+  }
+  .chart-contain {
+    width: 100%;
+    height: 350px;
+  }
+}
 .drawer-statistics:after {
   content: '';
   width: 100%;

+ 46 - 0
src/views/workbench/mixins/websocket.js

@@ -0,0 +1,46 @@
+export default {
+  name: 'test',
+  data() {
+    return {
+      webSock: null,
+      responesData: null
+    }
+  },
+  watch: {
+    responesData: {
+      handler(newV) {
+        console.log(newV)
+      }
+    }
+  },
+  created() {
+    this.initWebSocket()
+  },
+  destroyed() {
+    this.websock.close() // 离开路由之后断开websocket连接
+  },
+  methods: {
+    initWebSocket() { // 初始化weosocket
+      const wsUri = 'ws://123.207.136.134:9010/ajaxchattest'
+      this.websock = new WebSocket(wsUri)
+      this.websock.onmessage = this.websocketonmessage
+      this.websock.onopen = this.websocketonopen
+      this.websock.onerror = this.websocketonerror
+      this.websock.onclose = this.websocketclose
+    },
+    websocketonopen() { // 连接建立之后执行send方法发送数据
+    },
+    websocketonerror() { // 连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketsend(Data) { // 数据发送
+      this.websock.send(Data)
+    },
+    websocketonmessage(e) { // 数据接收
+      this.responesData = e.data
+    },
+    websocketclose(e) { // 关闭
+      this.websock.close()
+    }
+  }
+}

+ 38 - 7
src/views/workbench/team/index.vue

@@ -32,9 +32,15 @@
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="团队日程" name="1" />
           <el-tab-pane label="项目" name="2" />
-          <el-tab-pane label="需求" name="3" />
-          <el-tab-pane label="任务" name="4" />
-          <el-tab-pane label="缺陷" name="5" />
+          <el-tab-pane name="3">
+            <span slot="label">需求<div class="tips" /> </span>
+          </el-tab-pane>
+          <el-tab-pane name="4">
+            <span slot="label">任务<div class="tips" /> </span>
+          </el-tab-pane>
+          <el-tab-pane name="5">
+            <span slot="label"><span style="margin-right: 5px">缺陷</span> <div class="tips-last" /> </span>
+          </el-tab-pane>
         </el-tabs>
       </div>
     </el-header>
@@ -87,8 +93,8 @@
     </el-container>
     <el-container v-if="activeName === '3'">
       <section class="main-section">
-        <statistics-section :search-form="searchForm" />
-        <needs-list :search-form="searchForm" type="team" />
+        <statistics-section :search-form="searchForm" @change="changeData" />
+        <needs-list ref="needs-list" :search-form="searchForm" type="team" />
       </section>
     </el-container>
     <el-container v-if="activeName === '4'">
@@ -135,7 +141,7 @@ import { settingGetBizList } from '@/api/defectManage'
 import { queryTeamInfoList, queryTeamWorkListByTime, deleteSelfSchedule, queryTeamMember } from '@/api/workSchedule'
 import { scheduleDelete } from '@/api/projectViewDetails'
 import modifySchedule from '@/views/projectManage/projectList/components/modifySchedule'
-import ganntViews from './components/ganntViews'
+import ganntViews from '@/views/workbench/team/components/ganntViews'
 import MyFullCalendar from '@/views/workbench/person/components/myFullCalendar'
 import calenderDetail from '@/views/workbench/person/components/calenderDetail'
 import calendarDialog from '@/views/workbench/person/components/calendarFormDialog'
@@ -143,7 +149,8 @@ import projectList from '@/views/workbench/team/components/projectList'
 import needsList from '@/views/workbench/team/components/needsList'
 import taskList from '@/views/workbench/team/components/taskList'
 import bugTableList from '@/views/workbench/bugTableList.vue'
-import statisticsSection from '../components/statisticsSection'
+import statisticsSection from '@/views/workbench/components/statisticsSection'
+import websocket from '@/views/workbench/mixins/websocket'
 
 export default {
   components: {
@@ -158,6 +165,7 @@ export default {
     taskList,
     statisticsSection
   },
+  mixins: [websocket],
   data() {
     return {
       activeName: '1', // 顶部导航栏
@@ -418,6 +426,11 @@ export default {
           }
         })
       }
+    },
+    changeData(e) { // 数据变更
+      if (e === '需求') {
+        this.$refs['needs-list'].getNeedsList()
+      }
     }
   }
 }
@@ -445,6 +458,24 @@ export default {
     left: 50%;
     transform: translate(-50%, 0);
   }
+  .tips {
+    height: 10px;
+    width: 10px;
+    background-color: tomato;
+    border-radius: 50%;
+    position: absolute;
+    top: 18px;
+    right: 14px;
+  }
+  .tips-last {
+    height: 10px;
+    width: 10px;
+    background-color: tomato;
+    border-radius: 50%;
+    position: absolute;
+    top: 18px;
+    right: 0;
+  }
 }
 .main-header::after {
   @include main-header-after;