ss

src/components/addIcon/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="addIcon" :style="{ background: outColor }">
+    <div class="inner" :style="{ background: innerColor }">
+      <i class="el-icon-plus icon" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    innerColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    outColor: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+<style scoped lang='scss'>
+.addIcon {
+  display: inline-block;
+  width: 38px;
+  height: 38px;
+  border-radius: 13px;
+  text-align: center;
+  padding: 10px;
+  .inner {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    border-radius: 50%;
+    .icon {
+      color: #fff;
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/components/chartView/index.vue

@@ -37,7 +37,7 @@
 </template>
 <script>
 import normalEchart from '@/components/chart/normalEchart'
-import { getBarOption } from '@/utils/options'
+import { getOption } from '@/utils/options'
 export default {
   components: {
     normalEchart
@@ -68,7 +68,7 @@ export default {
     data: {
       handler(newV) {
         if (newV) {
-          this.echartsOption3 = getBarOption(newV.xaxis, newV.data)
+          this.echartsOption3 = getOption(newV.xaxis, newV.data, 'bar')
         }
       },
       immediate: true
@@ -84,7 +84,7 @@ export default {
   mounted() {
     // const d = new Date()
     const { data, xaxis } = this.data
-    this.echartsOption3 = getBarOption(xaxis, data)
+    this.echartsOption3 = getOption(xaxis, data, 'bar')
   },
   methods: {
     changeList(data) {

src/components/searchHeader/index.vue

@@ -8,7 +8,7 @@
           @getOption="(key, q, utilName) => getOption(key, q, utilName, 'default')"
         />
       </div>
-      <div class="dateSelected">
+      <div v-if="!isHiddenTime" class="dateSelected">
         <el-select
           v-model="year"
           size="small"
@@ -57,6 +57,11 @@ export default {
       type: Object,
       required: false,
       default: () => {}
+    },
+    isHiddenTime: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {

src/components/searchHeader/searchBox.vue

@@ -33,7 +33,7 @@ export default {
 <style scoped lang="scss">
 .searchBox {
   .row {
-    width: 810px;
+    min-width: 810px;
     margin-top: 15px;
     &:first-child {
       margin-top: 0;

src/components/searchHeader/searchForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="searchForm">
-    <div v-for="l in data" :key="l.key" class="Layout" style="display: inline-flex;padding-left: 15px; width:270px;" :style="styles">
+    <div v-for="l in data" :key="l.key" class="Layout" style="display: inline-flex;padding-left: 15px; width:270px;" :style="l.styles">
       <div class="name">{{ l.name }}</div>
       <el-select
         v-if="l.type === 'select'"
@@ -40,6 +40,30 @@
         </div>
         <el-option v-for="o in l.option" v-else :key="o.value" :label="o.label" :value="o.value" />
       </el-select>
+      <div v-else-if="l.type === 'showItemDataPicker'" class="showItemDataPicker">
+        <div class="inlineBlock item">
+          <span
+            v-for="item in dateSelect"
+            :key="item.key"
+            :value="item.key"
+            :class="item.key === showItemDataPickerItem && 'active'"
+            @click="setDate(item.key, l.type)"
+          >{{ item.label }}</span>
+        </div>
+        <el-date-picker
+          v-model="l.value"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          size="small"
+          value-format="yyyy.MM.dd"
+          :default-time="['00:00:00','23:59:59']"
+          @change="(e) => $emit('change', l.key, e)"
+        />
+      </div>
       <el-date-picker
         v-else-if="l.type === 'dateStartAndEnd'"
         v-model="l.value"
@@ -70,6 +94,8 @@
   </div>
 </template>
 <script>
+import moment from 'moment'
+moment.locale('zh-cn')
 export default {
   props: {
     data: {
@@ -116,7 +142,55 @@ export default {
             picker.$emit('pick', [start, end])
           }
         }]
+      },
+      dateSelect: [
+        {
+          key: 'week',
+          label: '本周'
+        },
+        {
+          key: 'month',
+          label: '本月'
+        },
+        {
+          key: 'year',
+          label: '本年'
+        }
+      ],
+      showItemDataPickerItem: 'week'
+    }
+  },
+  mounted() {
+    this.setDate(this.showItemDataPickerItem, 'showItemDataPicker')
+  },
+  methods: {
+    setDate(type, key) { // 日期筛选
+      let startDate = null
+      let endDate = null
+      switch (type) {
+        case 'week':
+          startDate = moment().startOf('week').format('YYYY.MM.DD')
+          endDate = moment().endOf('week').format('YYYY.MM.DD')
+          // this.bugCountTimeType = this.timeTypeList[0].code
+          break
+        case 'month':
+          startDate = moment().startOf('month').format('YYYY.MM.DD')
+          endDate = moment().endOf('month').format('YYYY.MM.DD')
+          // this.bugCountTimeType = this.timeTypeList[1].code
+          break
+        case 'year':
+          startDate = moment().startOf('year').format('YYYY.MM.DD')
+          endDate = moment().endOf('year').format('YYYY.MM.DD')
+          // this.bugCountTimeType = this.timeTypeList[2].code
+          break
       }
+      this.showItemDataPickerItem = type
+      this.data.map(g => {
+        // data[g.key] = g.value
+        if (g.type === key) g.value = [startDate, endDate]
+      })
+      this.showItemDataPickerStratAndEnd = [startDate, endDate]
+      this.$emit('change', key, [startDate, endDate])
     }
   }
 }
@@ -132,6 +206,24 @@ export default {
       width: auto;
     }
   }
+  .showItemDataPicker {
+    .item {
+      span {
+        color: #666;
+        background: #fff;
+        display: inline-block;
+        width: 40px;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 2px;
+        margin-right: 5px;
+      }
+      .active {
+        background: #409EFF;
+        color: #fff;
+      }
+    }
+  }
 }
 .item-style {
   display: flex;

src/icons/svg/empty.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="39.953" viewBox="0 0 47 39.953">
+  <g id="组_4586" data-name="组 4586" transform="translate(-637 -1354.047)">
+    <ellipse id="椭圆_277" data-name="椭圆 277" cx="23.5" cy="12" rx="23.5" ry="12" transform="translate(637 1370)" fill="#999" opacity="0.158"/>
+    <path id="暂无数据" d="M96.586,73.128h0L80.939,65.3l-15.62,7.81H65.29V88.777L80.939,96.6l15.649-7.824V73.128h0ZM80.939,67.2l11.767,5.9-4.481,2.259L76.4,69.476Zm-6.588,3.387,11.976,5.77-5.388,2.61L69.172,73.128l5.179-2.542Zm-7.1,4.521h.622l-.622-.023v-.978l12.715,6.358V94.157L67.246,87.8Zm27.386.955V87.8L81.917,94.157V80.464l12.715-6.358v1.956Z" transform="translate(579.771 1288.743)" fill="#999"/>
+  </g>
+</svg>

src/styles/PublicStyle/index.scss

@@ -451,4 +451,4 @@
   color: #E6A23C;
   font-size: 12px;
 }
-// 排期锁定截止
+// 排期锁定截止

src/styles/index.scss

@@ -96,3 +96,67 @@ div:focus {
   color: #303133;
   padding-left: 10px;
 }
+
+
+.page-wrap {
+  background: #F7F8FC;
+  width: 100%;
+  .page-header {
+    padding: 15px 15px 5px 15px;
+    margin-bottom: 10px;
+    background: #fff;
+    border-radius: 0 0 6px 6px;
+    &.detial {
+      padding: 15px;
+    }
+  }
+  .page-content {
+    background: #fff;
+    border-radius: 6px;
+    min-width: 890px;
+    &.detial, .detial {
+      padding: 15px 30px;
+    }
+  }
+}
+.mt40 {
+  margin-top: 40px;
+}
+.mb25 {
+  margin-bottom: 25px;
+}
+.mb10 {
+  margin-bottom: 10px;
+}
+.inlineBlock {
+  display: inline-block;
+}
+.titleLevel3 {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.flex-center-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.flex-center-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.flex-center-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  width: 80%;
+}

src/utils/options.js

@@ -1,4 +1,4 @@
-export function getBarOption(xAxis, data) {
+export function getOption(xAxis, data, type) {
   return {
     'color': ['#3AA1FF'],
     'tooltip': {
@@ -48,7 +48,7 @@ export function getBarOption(xAxis, data) {
     }],
     'series': [{
       'name': null,
-      'type': 'bar',
+      'type': type,
       'barWidth': '20px',
       'data': data,
       'itemStyle': {

src/utils/request.js

@@ -10,7 +10,7 @@ import store from '@/store/index.js'
 // create an axios instance
 const service = axios.create({
   baseURL: '/apis', // url = base url + request url
-  timeout: 5000, // request timeout
+  timeout: 10000, // request timeout
   withCredentials: true
 })
 

src/views/dataBigManage/components/dataItem/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="dataItem flex-center-start" :style="{ background: bgColor, padding: padding }">
+    <addIcon :inner-color="innerColor" :out-color="outColor" />
+    <div class="textWord">
+      <div class="ellipsis" v-html="title" />
+      <div class="ellipsis" v-html="subTitle" />
+    </div>
+  </div>
+</template>
+<script>
+import addIcon from '@/components/addIcon'
+export default {
+  components: {
+    addIcon
+  },
+  props: {
+    bgColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    innerColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    outColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    padding: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+<style scoped lang='scss'>
+.dataItem {
+  border-radius: 6px;
+  padding: 8px 12px;
+  .textWord {
+    padding-left: 10px;
+    width: 90%;
+  }
+}
+</style>

src/views/dataBigManage/components/dataTitle.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="data-title-wrapper">
-    <div ref="tips" class="tips" />
-    <div class="title">{{ title }}</div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'DataTitle',
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: () => ''
-    },
-    color: {
-      type: String,
-      required: false,
-      default: () => ''
-    }
-  },
-  watch: {
-    color() {
-      setTimeout(() => {
-        this.$refs.tips.style.setProperty('--bcColor', this.color || 'rgb(64, 158, 255)')
-      }, 300)
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-.data-title-wrapper {
-  --bcColor: rgb(64, 158, 255);
-  padding: 15px 0;
-  > div {
-    line-height: initial;
-    display: inline-block;
-  }
-
-  .tips {
-    width: 4px;
-    height: 15px;
-    border-radius: 1px;
-    position: relative;
-    top: 2px;
-    background-color: var(--bcColor);
-  }
-
-  .title {
-    margin-left: 4px;
-    font-size: 16px;
-    font-family: PingFangSC-Medium;
-    line-height: 35px;
-    color: #333333;
-  }
-
-}
-</style>

src/views/dataBigManage/components/drawerAll.vue → src/views/dataBigManage/components/drawerModal/index.vue

@@ -31,6 +31,9 @@
       />
     </div>
     <div class="qz-footer-laout">
+      <div style="line-height: 60px;">
+        <el-button type="primary" size="mini" @click="exportTable">导 出</el-button>
+      </div>
       <el-pagination
         :current-page.sync="currentPage"
         :page-size="10"

src/views/dataBigManage/components/efficiencyModule/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <el-row class="qualityModule">
+    <el-col :span="7">
+      <div class="itemBox" style="border-left-color: #3F9DFE; background: #F5FAFF">
+        <div class="titleLevel3" style="color: #3F9DFE;">需求平均交付周期</div>
+        <div class="content">
+          <div class="item effic" style="color: #3F9DFE;">
+            <span class="num">14.5</span>
+            <span class="unit">天</span>
+          </div>
+          <div class="item point">
+            <span class="title">环比：</span>
+            <span class="num">
+              <i class="el-icon-caret-top" />
+              <i class="el-icon-caret-bottom" />
+              11%
+            </span>
+          </div>
+        </div>
+        <div class="foot">
+          <div class="item">
+            <span class="title">产品周期：</span>
+            <span class="value">
+              <span class="num">14</span>
+              天
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">研发周期：</span>
+            <span class="value">
+              <span class="num">14</span>
+              天
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">测试周期：</span>
+            <span class="value">
+              <span class="num">14</span>
+              天
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="7">
+      <div class="itemBox" style="border-left-color: #7ED321; background: #F7FDF2">
+        <div class="titleLevel3" style="color: #7ED321;">平均需求使用人力</div>
+        <div class="content">
+          <div class="item effic" style="color: #7ED321;margin-bottom: 20px;">
+            <span class="num">14.5</span>
+            <span class="unit">人/日</span>
+          </div>
+          <div class="item point" style="margin-bottom: 20px;">
+            <span class="title">环比：</span>
+            <span class="num">
+              <i class="el-icon-caret-top" />
+              <i class="el-icon-caret-bottom" />
+              11%
+            </span>
+          </div>
+        </div>
+        <div class="foot">
+          <div class="item">
+            <span class="title">开发人力：</span>
+            <span class="value">
+              <span class="num">14</span>
+              人/日
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">测试人力：</span>
+            <span class="value">
+              <span class="num">14</span>
+              人/日
+            </span>
+          </div>
+          <!-- <div class="line" /> -->
+          <div class="item" style="display: block; margin-left: 0px">
+            <span class="title">联调人力：</span>
+            <span class="value">
+              <span class="num">14</span>
+              人/日
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="itemBox" style="border-left-color: #F5222D; background: #FFF8F8">
+        <div class="titleLevel3" style="color: #F5222D;">缺陷平均修复时长</div>
+        <div class="content">
+          <div class="item effic" style="color: #F5222D;">
+            <span class="num">20.5</span>
+            <span class="unit">h</span>
+          </div>
+          <div class="item point">
+            <span class="title">环比：</span>
+            <span class="num">
+              <i class="el-icon-caret-top" />
+              <i class="el-icon-caret-bottom" />
+              11%
+            </span>
+          </div>
+        </div>
+        <div class="foot">
+          <div class="item">
+            <span class="title">P0&P1：</span>
+            <span class="value">
+              <span class="num">14</span>
+              h
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">P1以上：</span>
+            <span class="value">
+              <span class="num">14</span>
+              h
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="4">
+      <div class="itemBox" style="border-left-color: #62D9AA; background: #62D9AA; color: #fff">
+        <!-- <div class="titleLevel3">小小的</div> -->
+        <dataItem
+          inner-color="#62D9AA"
+          out-color="#fff"
+          title="延期提测"
+          sub-title="1%"
+          bg-color="transparent"
+          padding="8px 0px"
+        />
+        <div class="line" />
+        <dataItem
+          inner-color="#62D9AA"
+          out-color="#fff"
+          title="延期提测"
+          sub-title="1%"
+          bg-color="transparent"
+          padding="8px 0px"
+        />
+      </div>
+    </el-col>
+    <!-- 第二行 -->
+    <el-col :span="7">
+      <div class="itemBox" style="border-left-color: #FAAD14; background: #FFFAF1">
+        <div class="titleLevel3" style="color: #FAAD14;">任务平均交付周期</div>
+        <div class="content">
+          <div class="item effic" style="color: #FAAD14;">
+            <span class="num">20.5</span>
+            <span class="unit">天</span>
+          </div>
+          <div class="item point">
+            <span class="title">环比：</span>
+            <span class="num">
+              <i class="el-icon-caret-top" />
+              <i class="el-icon-caret-bottom" />
+              11%
+            </span>
+          </div>
+        </div>
+        <div class="foot">
+          <div class="item">
+            <span class="title">研发周期：</span>
+            <span class="value">
+              <span class="num">14</span>
+              天
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">测试周期：</span>
+            <span class="value">
+              <span class="num">14</span>
+              天
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="7">
+      <div class="itemBox" style="border-left-color: #999999; background: #FAFAFA">
+        <div class="empty">
+          <svg-icon icon-class="empty" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="itemBox" style="border-left-color: #C97DE9; background: #FCF8FE">
+        <div class="titleLevel3" style="color: #C97DE9;">缺陷24小时修复率</div>
+        <div class="content">
+          <div class="item effic" style="color: #C97DE9;">
+            <span class="num">20.5</span>
+            <span class="unit">%</span>
+          </div>
+          <div class="item point">
+            <span class="title">环比：</span>
+            <span class="num">
+              <i class="el-icon-caret-top" />
+              <i class="el-icon-caret-bottom" />
+              11%
+            </span>
+          </div>
+        </div>
+        <div class="foot">
+          <div class="item">
+            <span class="title">P0&P1：</span>
+            <span class="value">
+              <span class="num">14</span>
+              %
+            </span>
+          </div>
+          <div class="line" />
+          <div class="item">
+            <span class="title">P1以上：</span>
+            <span class="value">
+              <span class="num">14</span>
+              %
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="4">
+      <div class="itemBox" style="border-left-color: #6394FA; background: #6394FA; color: #fff">
+        <dataItem
+          inner-color="#6394FA"
+          out-color="#fff"
+          title="延期提测"
+          sub-title="1%"
+          bg-color="transparent"
+          padding="8px 0px"
+        />
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import dataItem from '../dataItem'
+export default {
+  components: {
+    dataItem
+  }
+}
+</script>
+<style scoped lang='scss'>
+.qualityModule {
+  // .itemBox {
+    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
+    padding: 5px 20px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    .itemBox {
+      height: 134px;
+      border-left: 4px solid transparent;
+      margin-bottom: 10px;
+      border-radius: 6px;
+      padding: 8px 10px;
+      margin: 10px 10px;
+      .empty {
+        text-align: center;
+        line-height: 134px;
+        font-size: 50px;
+      }
+      .content {
+        .item {
+          display: inline-block;
+          margin: 12px 16px 30px 0;
+          .num {
+            font-size: 18px;
+          }
+          .unit {
+            font-size: 14px;
+          }
+        }
+        .point {
+          .title {
+            font-size: 12px;
+            color: #666;
+          }
+          .num {
+            font-size: 12px;
+          }
+        }
+      }
+      .foot {
+        .item {
+          display: inline-block;
+          margin: 0 5px;
+          font-size: 12px;
+          color: #666;
+          &:first-child {
+            margin-left: 0;
+          }
+          .num {
+            color: #333;
+          }
+        }
+        .line {
+          height: 12px;
+          width: 1px;
+          background: #DDDFE5;
+          display: inline-block;
+          // border-right: 1px solid #DDDFE5;
+        }
+      }
+    }
+    .line {
+      color: #fff;
+      width: 100%;
+      height: 1px;
+      background: #fff;
+      opacity: 0.7;
+    }
+  //   :last-child {
+  //     margin-bottom: 0px;
+  //   }
+  // }
+}
+</style>

src/views/dataBigManage/components/qualityModule/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-row :gutter="20" class="qualityModule">
+    <el-col :span="8">
+      <div class="itemBox onlineProblem">
+        <div class="titleLevel3 mb10">线上问题</div>
+        <el-row :gutter="10">
+          <el-col v-for="(item, index) in itemList" :key="index" :span="12" class="mb10">
+            <dataItem
+              :inner-color="item.innerColor"
+              :out-color="item.outColor"
+              :title="item.title"
+              :sub-title="item.subTitle"
+              :bg-color="item.bgColor"
+            />
+          </el-col>
+        </el-row>
+        <div class="chartSearchbar inlineBetween mt15">
+          <div style="width: 200px">
+            <el-select
+              v-model="viewType"
+              size="small"
+              filterable
+              style="width: 115px"
+              @change="$emit('search')"
+            >
+              <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t.label" :value="t.value" />
+            </el-select>
+          </div>
+        </div>
+        <div class="chartViewHeight">
+          <normal-echart v-if="echartsOption1" :chart-id="'chart1'" :option="echartsOption1" @onClick="changeList" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="8">
+      <div class="itemBox quality">
+        <div class="titleLevel3 mb10">线下质量</div>
+        <el-row :gutter="10">
+          <el-col v-for="(item, index) in itemList" :key="index" :span="12" class="mb10">
+            <dataItem
+              :inner-color="item.innerColor"
+              :out-color="item.outColor"
+              :title="item.title"
+              :sub-title="item.subTitle"
+              :bg-color="item.bgColor"
+            />
+          </el-col>
+        </el-row>
+        <div class="chartSearchbar inlineBetween mt15">
+          <div style="width: 200px">
+            <el-select
+              v-model="viewType"
+              size="small"
+              filterable
+              style="width: 115px"
+              @change="$emit('search')"
+            >
+              <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t.label" :value="t.value" />
+            </el-select>
+          </div>
+        </div>
+        <div class="chartViewHeight">
+          <normal-echart v-if="echartsOption1" :chart-id="'chart2'" :option="echartsOption1" @onClick="changeList" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="8">
+      <div class="itemBox progress">
+        <div class="titleLevel3 mb10">上线过程</div>
+        <el-row :gutter="10">
+          <el-col v-for="(item, index) in itemList" :key="index" :span="12" class="mb10">
+            <dataItem
+              :inner-color="item.innerColor"
+              :out-color="item.outColor"
+              :title="item.title"
+              :sub-title="item.subTitle"
+              padding="8px 0px"
+            />
+          </el-col>
+        </el-row>
+        <el-row :gutter="10" style="height: 100px">
+          <el-col :span="12" class="mb10">
+            123
+          </el-col>
+          <el-col :span="12" class="mb10">
+            456
+          </el-col>
+        </el-row>
+      </div>
+      <div class="itemBox progress" style="margin-top: 20px; height: 102px;">
+        123
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import dataItem from '../dataItem'
+import normalEchart from '@/components/chart/normalEchart'
+import { getOption } from '@/utils/options'
+export default {
+  components: {
+    dataItem,
+    normalEchart
+  },
+  data() {
+    return {
+      itemList: [
+        {
+          'innerColor': '#F5222D',
+          'outColor': '#F5DDE2',
+          'title': '<div>新增问题15个</div>',
+          'subTitle': '线上故障率15%',
+          'bgColor': '#F5F7FC'
+        },
+        {
+          'innerColor': '#FAAD14',
+          'outColor': '#F7ECDA',
+          'title': '新增问题15个',
+          'subTitle': '线上故障率15%',
+          'bgColor': '#F5F7FC'
+        },
+        {
+          'innerColor': '#C97DE9',
+          'outColor': '#EFE5FA',
+          'title': '<div>新增问题15个</div>',
+          'subTitle': '线上故障率15%',
+          'bgColor': '#F5F7FC'
+        },
+        {
+          'innerColor': '#7ED321',
+          'outColor': '#E4F2DC',
+          'title': '新增问题15个',
+          'subTitle': '线上故障率15%'
+        }
+      ],
+      typeOptionList: [],
+      echartsOption1: null,
+      viewType: null
+    }
+  },
+  mounted() {
+    this.echartsOption1 = getOption([1, 2, 3], [4, 5, 6], 'bar')
+  },
+  methods: {
+    changeList() {}
+  }
+}
+</script>
+<style scoped lang='scss'>
+.qualityModule {
+  .itemBox {
+    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
+    padding: 10px 20px;
+    border-radius: 6px;
+  }
+  .chartSearchbar {
+    margin-top: 20px;
+  }
+  .chartViewHeight {
+    height: 170px;
+    // padding-left: 15px;
+  }
+}
+</style>

src/views/dataBigManage/components/throughputModule/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-row :gutter="20" class="qualityModule">
+    <el-col :span="6">
+      <div class="itemBox whole" style="background: #EEF0F5">
+        <div class="tab">
+          <span
+            v-for="item in wholeTabList"
+            :key="item"
+            class="tabItem"
+            :class="wholeTab === item && 'active'"
+            @click="changeTab('wholeTab', item)"
+          >{{ item }}</span>
+        </div>
+        <div class="list">
+          <div v-for="item in wholeList[wholeTab]" :key="item.pointer" class="listItem flex-center-between">
+            <div v-html="item.text" />
+            <div v-html="item.pointer" />
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="7">
+      <div class="itemBox">
+        <div class="titleLevel3 mb25">需求方向分布图</div>
+        <div class="chartViewHeight">
+          <normal-echart v-if="echartsOption1" :chart-id="'chart3'" :option="echartsOption1" @onClick="changeList" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="itemBox">
+        <div class="titleLevel3 mb25">需求积压率</div>
+        <div class="chartSearchbar inlineBetween mt15">
+          <div style="width: 200px">
+            <el-select
+              v-model="viewType"
+              size="small"
+              filterable
+              style="width: 115px"
+              @change="$emit('search')"
+            >
+              <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t.label" :value="t.value" />
+            </el-select>
+          </div>
+        </div>
+        <div class="chartViewHeight" style="height: 178px">
+          <normal-echart v-if="echartsOption2" :chart-id="'chart4'" :option="echartsOption2" @onClick="changeList" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="5">
+      <div class="itemBox">
+        <div class="titleLevel3  mb25">版本需求</div>
+        <div class="tab">
+          <span
+            v-for="item in verTabList"
+            :key="item"
+            class="tabItem"
+            :class="verTab === item && 'active'"
+            @click="changeTab('verTab', item)"
+          >{{ item }}</span>
+        </div>
+        <div class="chartViewHeight" style="height: 189px">
+          <normal-echart v-if="echartsOption1" :chart-id="'chart5'" :option="echartsOption1" @onClick="changeList" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import normalEchart from '@/components/chart/normalEchart'
+import { getOption } from '@/utils/options'
+export default {
+  components: {
+    normalEchart
+  },
+  data() {
+    return {
+      typeOptionList: [],
+      echartsOption1: null,
+      echartsOption2: null,
+      viewType: null,
+      verTabList: ['青桔端', '滴滴小程序'],
+      verTab: '青桔端',
+      wholeTabList: ['需求', '任务', '项目'],
+      wholeTab: '需求',
+      wholeList: {
+        '需求': [{
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }],
+        '任务': [{
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }],
+        '项目': [{
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }, {
+          text: '<div>新增需求<b>8</b>个</div>',
+          points: '环比：4.25%'
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.echartsOption1 = getOption([1, 2, 3], [4, 5, 6], 'bar')
+    this.echartsOption2 = getOption([1, 2, 3], [4, 5, 6], 'line')
+  },
+  methods: {
+    changeList() {},
+    changeTab(type, value) {
+      this[type] = value
+    }
+  }
+}
+</script>
+<style scoped lang='scss'>
+.qualityModule {
+  .itemBox {
+    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
+    padding: 10px 20px;
+    border-radius: 6px;
+    &.whole {
+      padding: 10px 0px;
+      height: 276px;
+      .tab {
+        padding: 0 20px;
+      }
+      .list {
+        margin-top: 8px;
+        .listItem {
+          height: 38px;
+          line-height: 38px;
+          width: 100%;
+          background: #fff;
+          margin: 7px 0px;
+          padding: 0 20px;
+        }
+      }
+    }
+    .tab {
+      .tabItem {
+        margin-right: 15px;
+        cursor: pointer;
+        &.active {
+          color: #409EFF;
+        }
+      }
+    }
+  }
+  .chartSearchbar {
+    margin-top: 20px;
+  }
+  .chartViewHeight {
+    height: 210px;
+    width: 100%;
+  }
+}
+</style>

src/views/dataBigManage/data.js

@@ -0,0 +1,35 @@
+export const listSearchData = {
+  default: [
+    [
+      {
+        name: '部门',
+        value: '',
+        key: 'title',
+        type: 'select',
+        placeholder: '请选择部门',
+        option: [{ value: 1, label: 22 }, { value: 2, label: 33 }]
+      },
+      {
+        name: '时间',
+        value: '',
+        key: 'time',
+        type: 'showItemDataPicker',
+        placeholder: '请选择时间',
+        styles: { minWidth: '270px', width: 'auto' }
+      }
+    ]
+  ],
+  adv: [
+    [{
+      name: '团队',
+      key: 'priority',
+      type: 'select',
+      multiple: false,
+      placeholder: '',
+      value: '',
+      requried: true,
+      option: [{ value: 1, label: 22 }, { value: 2, label: 33 }]
+    }]
+  ]
+}
+

src/views/dataBigManage/index.vue

@@ -1,284 +1,91 @@
 <template>
-  <div class="data-big-wrapper">
-    <div :class="['filter-wrapper', DetailedScreening && 'padding-bottom-10']">
-      <el-form
-        :model="form_all"
-        class="form-wrapper"
-        inline
-        label-position="right"
-      >
-        <el-form-item label="部门">
-          <el-cascader
-            size="small"
-            :options="sectorOptions"
-            :props="{ checkStrictly: true }"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="时间：">
-          <div class="date-select">
-            <span
-              v-for="item in dateSelect"
-              :key="item.key"
-              :class="[dateType === item.key ? 'date-active' : '']"
-              class="date-item"
-              @click.stop="
-                dateType = item.key;
-                setDate(item.key);
-              "
-            >{{ item.label }}</span>
-          </div>
-          <el-date-picker
-            v-model="stratAndEnd"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="small"
-            value-format="yyyy.MM.dd"
-            :default-time="['00:00:00', '23:59:59']"
-            @change="dateType = ''"
-          />
-        </el-form-item>
-        <el-button type="text" @click="DetailedScreening = !DetailedScreening">
-          {{ !DetailedScreening ? "更多" : "收起" }}筛选
-        </el-button>
-      </el-form>
-      <div v-show="DetailedScreening" class="stylus-more">
-        <div>
-          <el-form :model="form_all" class="flex_start">
-            <el-form-item label="团队">
-              <el-cascader
-                size="small"
-                :options="teamOptions"
-                :props="{ checkStrictly: true }"
-                clearable
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="more-btn-wrapper">
-          <el-button
-            type="primary"
-            size="mini"
-            @click="query_project(form_all)"
-          >筛 选
-          </el-button>
-          <el-button size="mini" @click="query_Reset">重 置</el-button>
-        </div>
-      </div>
+  <div class="page-wrap data-big-wrapper">
+    <div class="page-header detial">
+      <searchHeader
+        :data="listSearch"
+        :is-hidden-time="true"
+        @search="search"
+        @moreReset="moreReset"
+        @changeShowMore="changeShowMore"
+      />
     </div>
-    <div class="data-wrapper">
-      <dataTitle title="质量" />
-      <dataTitle title="吞吐量" />
-      <dataTitle title="效率" />
+    <div class="page-content detial" style="min-width: 1320px">
+      <header class="header mb25">
+        <headTitle title="质量" />
+      </header>
+      <qualityModule />
+      <header class="header mb25 mt40">
+        <headTitle title="吞吐量" />
+      </header>
+      <throughputModule />
+      <header class="header mb25 mt40">
+        <headTitle title="效率" />
+      </header>
+      <efficiencyModule />
+    </div>
+    <div @click.stop>
+      <drawer-modal v-if="openDrawer" :drawer="openDrawer" :data="requireList" :status="reqStatus" @clone="clone" />
     </div>
   </div>
 </template>
 
 <script>
-import moment from 'moment'
-import { projectList } from '@/api/projectIndex'
-import { testPost } from '@/api/dataBig'
-/* 页面专有展示组件*/
-import dataTitle from './components/dataTitle'
-
+import { listSearchData } from './data'
+import searchHeader from '@/components/searchHeader'
+import headTitle from '@/components/headTitle'
+import throughputModule from './components/throughputModule/index.vue'
+import qualityModule from './components/qualityModule/index.vue'
+import efficiencyModule from './components/efficiencyModule/index.vue'
+import drawerModal from './components/drawerModal/index.vue'
 export default {
-  components: { dataTitle },
+  components: {
+    searchHeader,
+    headTitle,
+    throughputModule,
+    qualityModule,
+    efficiencyModule,
+    drawerModal
+  },
   data() {
     return {
       // enum
-      dateSelect: [
-        {
-          key: 'week',
-          label: '本周'
-        },
-        {
-          key: 'month',
-          label: '本月'
-        },
-        {
-          key: 'year',
-          label: '本年'
-        }
-      ],
-      // 筛选
-      form_all: {},
-      DetailedScreening: false,
-      stratAndEnd: [], // 开始结束日期
-      dateType: 'week', // 时间选择类型
-      bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
-      timeTypeList: [
-        // 日期选择
-        { code: 1, label: '周' },
-        { code: 2, label: '月' },
-        { code: 3, label: '年' }
-      ],
-      sectorOptions: [], // 部门数据
-      teamOptions: [] // 团队数据
+      listSearch: listSearchData,
+      showMore: false,
+      openDrawer: true,
+      requireList: {},
+      reqStatus: '缺陷状态'
     }
   },
   created() {
-    this.init()
+    // this.init()
   },
   methods: {
-    setDate(type) {
-      // 日期筛选
-      let startDate = null
-      let endDate = null
-      switch (type) {
-        case 'week':
-          startDate = moment()
-            .startOf('week')
-            .format('YYYY.MM.DD')
-          endDate = moment()
-            .endOf('week')
-            .format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[0].code
-          break
-        case 'month':
-          startDate = moment()
-            .startOf('month')
-            .format('YYYY.MM.DD')
-          endDate = moment()
-            .endOf('month')
-            .format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[1].code
-          break
-        case 'year':
-          startDate = moment()
-            .startOf('year')
-            .format('YYYY.MM.DD')
-          endDate = moment()
-            .endOf('year')
-            .format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[2].code
-          break
-      }
-      this.stratAndEnd = [startDate, endDate]
-      this.onSubmit()
-    },
-    query_project(e) {
-      // 查询
-      if (this.isToOne) {
-        this.curIndex = 1
-        this.currentPage = 1
+    search() {
+      const data = {}
+      // 因为高级筛选不自动搜索，所以每次出发搜索都map renderList就好。
+      this.listSearch.default.map(t => t.map(g => {
+        data[g.key] = g.value
+      }))
+      if (this.showMore) {
+        this.listSearch.adv.map(t => t.map(g => {
+          data[g.key] = g.value
+        }))
       }
-      this.table_loading = true
-      this.query_object = {}
-      this.query_object = e
-      this.query_object.bizId = this.bizId
-      this.query_object.curIndex = this.curIndex
-      this.query_object.pageSize = this.pageSize
-      projectList(this.query_object).then(res => {
-        this.table_project = res.data
-        this.total = res.total
-        this.table_loading = false
-      })
-      this.isToOne = true
-    },
-    query_Reset() {
-      // 重置
-      this.$set(this.form_all, 'priority', this.query_object.priority)
-      this.$set(this.form_all, 'name', this.query_object.name)
-      this.$set(this.form_all, 'projectOwner', this.query_object.projectOwner)
-      this.$set(this.form_all, 'bizType', '')
-      this.$set(this.form_all, 'creater', '')
-      this.$message({
-        message: '已重置',
-        type: 'success',
-        duration: 1000,
-        offset: 150
-      })
-      this.query_project(this.form_all)
+      console.log(data)
     },
-    init() {
-      testPost().then(res => {
-        console.log(res)
-      })
+    moreReset(data) {
+      this.renderList.adv.map(t => t.map(g => {
+        g.value = null
+      }))
     },
-    onSubmit() {}
+    changeShowMore(e) {
+      this.showMore = e
+    }
   }
 }
 </script>
 <style lang="scss">
 .data-big-wrapper {
   padding: 0 10px;
-
-  .filter-wrapper {
-    background-color: #ffffff;
-    padding: 10px 13px 0;
-    box-shadow: 0px 0px 11px #eef0f5;
-    border-radius: 0px 0px 6px 6px;
-
-    &.padding-bottom-10 {
-      padding-bottom: 1px;
-    }
-
-    /*表单样式*/
-    .form-wrapper {
-      padding-left: 16px;
-
-      .el-form-item:nth-child(2) {
-        margin-left: 97px;
-      }
-
-      > button {
-        float: right;
-        margin-right: 35px;
-      }
-    }
-
-    /*时间选择*/
-    .date-select {
-      line-height: 20px;
-      display: inline-block;
-
-      .date-item {
-        display: inline-block;
-        width: 40px;
-        text-align: center;
-        cursor: pointer;
-        border-radius: 2px;
-        margin-right: 5px;
-      }
-
-      .date-active {
-        color: #ffffff;
-        background-color: #409eff;
-      }
-    }
-
-    /*更多筛选*/
-    .stylus-more {
-      height: 98px;
-      background: #fcfcfc;
-      padding: 15px;
-      margin-bottom: 15px;
-      border: 1px solid #dddfe5;
-      position: relative;
-
-      .more-btn-wrapper {
-        position: absolute;
-        right: 23.33px;
-        bottom: 20px;
-      }
-    }
-
-    /*elm样式重写*/
-    .el-form-item {
-      margin-bottom: 15px;
-    }
-  }
-
-  .data-wrapper {
-    padding: 0 30px;
-    margin-top: 10px;
-    box-shadow: 0px 0px 11px #eef0f5;
-    border-radius: 6px;
-    background-color: #ffffff;
-  }
 }
 </style>

src/views/projectManage/onlineproblem/component/chart.vue

@@ -31,7 +31,7 @@
 </template>
 <script>
 import normalEchart from '@/components/chart/normalEchart'
-import { getBarOption } from '@/utils/options'
+import { getOption } from '@/utils/options'
 export default {
   components: {
     normalEchart
@@ -64,7 +64,7 @@ export default {
   watch: {
     data: {
       handler(newV) {
-        this.echartsOption3 = getBarOption(newV.xaxis, newV.data)
+        this.echartsOption3 = getOption(newV.xaxis, newV.data, 'bar')
       },
       immediate: true
     },
@@ -83,7 +83,7 @@ export default {
     for (let i = 0; i <= nowYear - 2020; i++) {
       this.yearList.unshift('' + (2020 + i))
     }
-    this.echartsOption3 = getBarOption(xaxis, data)
+    this.echartsOption3 = getOption(xaxis, data, 'bar')
   },
   methods: {
     changeList(data) {