数据大盘：半浮层改造&组件迁移

src/apiConfig/requestIP.js

@@ -1,4 +1,4 @@
-export let host = 'http://zhihui-test.intra.xiaojukeji.com'
+export let host = 'http://zhihui-pre.intra.xiaojukeji.com'
 // export let host = 'http://localhost:8990'
 export let requestIp = host + '/zuul'
 export let loginUrl = host + '/sso/login?jumpto=' + 'http://zhihui-test.intra.xiaojukeji.com' + location.pathname

src/views/dataBigManage/components/drawerModal/components/table.vue → src/components/baseTable/table.vue

@@ -6,8 +6,8 @@
       :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }"
       :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }"
       row-key="id"
-      size="mini"
       style="width: auto;"
+      :size="size"
       :height="tableHeight"
     >
       <el-table-column
@@ -83,6 +83,11 @@ export default {
       type: String,
       required: false,
       default: () => '100%'
+    },
+    size: {
+      type: String,
+      required: false,
+      default: () => ''
     }
   },
   data() {

src/components/timeline/index.vue

@@ -1,114 +1,114 @@
-<template>
-  <div :class="[!bgmargin ? 'qz-timeline-bg' : 'qz-timeline-bgOne']">
-    <div class="qz-timeline-layout">
-      <div v-for="(item, index) in list" ref="ss" :key="'item' + index">
-        <div class="qz-timeline-name" :class="[index === key ? 'qz-time-color1' : 'qz-time-color']">{{ item }}</div>
-        <span class="circular" :class="[index === key ? 'qz-time-code1' : 'qz-time-code']" @click="qz_click_code({value: index, name: item})" />
-        <div class="qz-timeline-divider" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: { type: Array, required: true },
-    num: { type: Number, default: 0 },
-    bgmargin: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      list: [],
-      key: this.num
-    }
-  },
-  watch: {
-    data: {
-      handler(newV) {
-        if (!newV) return
-        this.list = newV
-      },
-      deep: true,
-      immediate: true
-    },
-    num: {
-      handler(newV) {
-        this.key = newV
-        document.getElementById('index').scrollLeft += 500
-        // this.$refs.ss.scrollLeft = 300
-      },
-      deep: true
-    }
-  },
-  methods: {
-    // 初始化
-    timeline_init() {
-      this.list = this.list.map(item => ({
-        ...item,
-        show: false
-      }))
-    },
-    // 点击节点
-    qz_click_code(val) {
-      this.key = val.value
-      this.$emit('update', val)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.qz-timeline-bgOne {
-  min-width: max-content;
-  margin: 0 30px 18px;
-  text-align: center;
-  padding-right: 30px;
-}
-.qz-timeline-bg {
-  min-width: max-content;
-  margin: 29px 30px 30px;
-  text-align: center;
-  padding-right: 30px;
-}
-.qz-timeline-layout {
-  display: flex;
-  justify-content: center;
-}
-.qz-timeline-divider {
-  content: '';
-  min-width: 100px;
-  border: 1px solid #E5E5E5;
-}
-.qz-timeline-name {
-  padding: 0 10px;
-  font-weight: 400;
-  font-size: 12px;
-  color: #444444;
-  position: relative;
-  top: 12px;
-}
-.circular {
-  width: 10px;
-  height: 10px;
-  margin: 0 8px;
-  display: inline-block;
-  border: 1px solid #60AEFF;
-  border-radius: 50%;
-  position: relative;
-  top: 12px;
-  cursor: pointer;
-}
-.qz-time-code {
-  background: #FFF;
-}
-.qz-time-code1 {
-  background: #60AEFF;
-}
-.qz-time-color {
-  color: #444;
-}
-.qz-time-color1 {
-  color: #60AEFF;
-}
-</style>
+<template>
+  <div :class="[!bgMargin ? 'timeline-bg' : 'timeline-bgOne']">
+    <div class="timeline-layout">
+      <div v-for="(item, index) in list" ref="ss" :key="'item' + index">
+        <div class="timeline-name" :class="[index === key ? 'time-color1' : 'time-color']">{{ item }}</div>
+        <span class="circular" :class="[index === key ? 'time-code1' : 'time-code']" @click="click_code({value: index, name: item})" />
+        <div class="timeline-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Array, required: true },
+    num: { type: Number, default: 0 },
+    bgMargin: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      list: [],
+      key: this.num
+    }
+  },
+  watch: {
+    data: {
+      handler(newV) {
+        if (!newV) return
+        this.list = newV
+      },
+      deep: true,
+      immediate: true
+    },
+    num: {
+      handler(newV) {
+        this.key = newV
+        document.getElementById('index').scrollLeft += 500
+        // this.$refs.ss.scrollLeft = 300
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 初始化
+    timeline_init() {
+      this.list = this.list.map(item => ({
+        ...item,
+        show: false
+      }))
+    },
+    // 点击节点
+    click_code(val) {
+      this.key = val.value
+      this.$emit('update', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.timeline-bgOne {
+  min-width: max-content;
+  margin: 0 30px 18px;
+  text-align: center;
+  padding-right: 30px;
+}
+.timeline-bg {
+  min-width: max-content;
+  margin: 29px 30px 30px;
+  text-align: center;
+  padding-right: 30px;
+}
+.timeline-layout {
+  display: flex;
+  justify-content: center;
+}
+.timeline-divider {
+  content: '';
+  min-width: 100px;
+  border: 1px solid #E5E5E5;
+}
+.timeline-name {
+  padding: 0 10px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #444444;
+  position: relative;
+  top: 12px;
+}
+.circular {
+  width: 10px;
+  height: 10px;
+  margin: 0 8px;
+  display: inline-block;
+  border: 1px solid #60AEFF;
+  border-radius: 50%;
+  position: relative;
+  top: 12px;
+  cursor: pointer;
+}
+.time-code {
+  background: #FFF;
+}
+.time-code1 {
+  background: #60AEFF;
+}
+.time-color {
+  color: #444;
+}
+.time-color1 {
+  color: #60AEFF;
+}
+</style>

src/views/dataBigManage/components/drawerModal/components/timeline.vue

@@ -1,114 +0,0 @@
-<template>
-  <div :class="[!bgmargin ? 'timeline-bg' : 'timeline-bgOne']">
-    <div class="timeline-layout">
-      <div v-for="(item, index) in list" ref="ss" :key="'item' + index">
-        <div class="timeline-name" :class="[index === key ? 'time-color1' : 'time-color']">{{ item }}</div>
-        <span class="circular" :class="[index === key ? 'time-code1' : 'time-code']" @click="click_code({value: index, name: item})" />
-        <div class="timeline-divider" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: { type: Array, required: true },
-    num: { type: Number, default: 0 },
-    bgmargin: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      list: [],
-      key: this.num
-    }
-  },
-  watch: {
-    data: {
-      handler(newV) {
-        if (!newV) return
-        this.list = newV
-      },
-      deep: true,
-      immediate: true
-    },
-    num: {
-      handler(newV) {
-        this.key = newV
-        // document.getElementById('index').scrollLeft += 500
-        // this.$refs.ss.scrollLeft = 300
-      },
-      deep: true
-    }
-  },
-  methods: {
-    // 初始化
-    timeline_init() {
-      this.list = this.list.map(item => ({
-        ...item,
-        show: false
-      }))
-    },
-    // 点击节点
-    click_code(val) {
-      this.key = val.value
-      this.$emit('update', val)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.timeline-bgOne {
-  min-width: max-content;
-  margin: 0 30px 18px;
-  text-align: center;
-  padding-right: 30px;
-}
-.timeline-bg {
-  min-width: max-content;
-  margin: 29px 30px 30px;
-  text-align: center;
-  padding-right: 30px;
-}
-.timeline-layout {
-  display: flex;
-  justify-content: center;
-}
-.timeline-divider {
-  content: '';
-  min-width: 100px;
-  border: 1px solid #E5E5E5;
-}
-.timeline-name {
-  padding: 0 10px;
-  font-weight: 400;
-  font-size: 12px;
-  color: #444444;
-  position: relative;
-  top: 12px;
-}
-.circular {
-  width: 10px;
-  height: 10px;
-  margin: 0 8px;
-  display: inline-block;
-  border: 1px solid #60AEFF;
-  border-radius: 50%;
-  position: relative;
-  top: 12px;
-  cursor: pointer;
-}
-.time-code {
-  background: #FFF;
-}
-.time-code1 {
-  background: #60AEFF;
-}
-.time-color {
-  color: #444;
-}
-.time-color1 {
-  color: #60AEFF;
-}
-</style>

src/views/dataBigManage/components/drawerModal/drawerModalData.js

@@ -42,7 +42,7 @@ export const columns = {
     },
     {
       label: '不可用时长',
-      key: 'undone',
+      key: 'uat',
       minWidth: 100,
       align: 'center'
     },

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

@@ -21,10 +21,10 @@
       :style="{paddingTop: !isTimeLine(2) ? '30px':'20px'}"
       @click.stop
     >
-      <div ref="timeline1" class="qz-drawer-scll">
+      <div id="index" ref="timeline1" class="qz-drawer-scll">
         <timeline
           :num="timelineData.firstActive"
-          bgmargin
+          bg-margin
           :data="timelineData.first"
           @update="(params) => timeLineClick(params, 1)"
         />
@@ -33,7 +33,7 @@
         <timeline
           :num="timelineData.secondActive"
           :data="timelineData.second"
-          :bgmargin="true"
+          bg-margin
           @update="(params)=>timeLineClick(params, 2)"
         />
       </div>
@@ -107,8 +107,8 @@
 import { bugList } from '@/api/defectManage'
 import _ from 'lodash'
 import { getReportList } from '@/api/reportTemplate'
-import dmTable from './components/table.vue'
-import timeline from './components/timeline'
+import dmTable from '@/components/baseTable/table'
+import timeline from '@/components/timeline/index'
 import { columns, timelineList } from './drawerModalData'
 import { EncryptId } from '@/utils/crypto-js'
 import Clickoutside from 'element-ui/src/utils/clickoutside'