统计页面时间轴定位

src/components/timeline/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="[!bgmargin ? 'qz-timeline-bg' : 'qz-timeline-bgOne']">
     <div class="qz-timeline-layout">
-      <div v-for="(item, index) in list" :key="index">
+      <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" />
@@ -35,6 +35,8 @@ export default {
     num: {
       handler(newV) {
         this.key = newV
+        document.getElementById('index').scrollLeft += 500
+        // this.$refs.ss.scrollLeft = 300
       },
       deep: true
     }

src/views/quality/components/drawerAll.vue

@@ -4,10 +4,10 @@
     <div v-if="Statistics.title === '分布图数据'" class="qz-drawer-grade-tow">按缺陷等级分布</div>
     <div>
       <div v-if="Statistics.title !== '模块分布数据' && Statistics.title !== '需求方向分布图数据' && Statistics.title !== '责任人分布数据' && Statistics.title !== `模块分布图数据` && show === true " :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
-        <div class="qz-drawer-scll">
+        <div id="index" class="qz-drawer-scll">
           <timeline :data="list" :num="defaultKey" :bgmargin="bgMargin" @update="getvalue" />
         </div>
-        <div v-if="Statistics.towTimeLine" class="qz-drawer-scll">
+        <div v-if="Statistics.towTimeLine" id="index1" class="qz-drawer-scll">
           <timeline :data="Statistics.towTimeLine" :num="defaultKey2" :bgmargin="bgMargin" @update="getvalueTow" />
         </div>
       </div>
@@ -111,6 +111,12 @@ export default {
       immediate: true
     }
   },
+  mounted() {
+    // this.$nextTick(() => {
+    //   const dateId = document.getElementById('index')
+    //   dateId.scrollLeft = Number(this.defaultKey) * 100 - 60
+    // })
+  },
   methods: {
     setDrawerDate() {
       this.show = true
@@ -170,6 +176,14 @@ export default {
         this.dataList = this.Statistics.idList
         this.getTableData(this.dataList)
       }
+      this.$nextTick(() => { // 时间轴定位
+        const dateId = document.getElementById('index')
+        dateId.scrollLeft = Number(this.defaultKey) * 109 - 60
+        if (this.Statistics.towTimeLine) {
+          const dateIds = document.getElementById('index1')
+          dateIds.scrollLeft = Number(this.defaultKey2) * 100 - 60
+        }
+      })
     },
     getvalue(e) { // 时间轴one
       this.oneVal = e
@@ -322,7 +336,7 @@ export default {
   padding: 1px 0;
 }
 .qz-drawer-scll {
-  overflow-x: auto;
+  overflow-x: scroll;
 }
 .qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
 .qz-drawer-H {