Merge branch 'feature/act-code' of http://git.gicdev.com/office/haoban-3 into feature/act-code

src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue

@@ -48,14 +48,12 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    <el-tabs v-model="activeName" type="card">
-      <!-- <el-tab-pane label="详情信息" name="first" v-if="$getButtonLimit($buttonCode.infoActCode)" :limit-code="$buttonCode.infoActCode"> -->
-      <el-tab-pane label="详情信息" name="first" v-if="$getButtonLimit(this.$buttonCode.infoActCode)" :limit-code="$buttonCode.infoActCode">
+    <el-tabs v-model="activeName" type="card" ref="page">
+      <el-tab-pane label="详情信息" name="first" v-if="$getButtonLimit($buttonCode.infoActCode)" :limit-code="$buttonCode.infoActCode">
         <act-code-detail-info :enterprise-id="codeInfo.enterpriseId" :welcome-id="codeInfo.welcomeId" :hm-id="$route.query.hmId" @useMemberList="useMemberData"></act-code-detail-info>
       </el-tab-pane>
-      <!-- <el-tab-pane label="数据统计" name="second" v-if="$getButtonLimit($buttonCode.dataActCode)" :limit-code="$buttonCode.dataActCode"> -->
-      <el-tab-pane label="数据统计" name="second" v-if="$getButtonLimit(this.$buttonCode.dataActCode)" :limit-code="$buttonCode.dataActCode">
-        <act-code-detail-statistics :hm-id="$route.query.hmId"></act-code-detail-statistics>
+      <el-tab-pane label="数据统计" name="second" v-if="$getButtonLimit($buttonCode.dataActCode)" :limit-code="$buttonCode.dataActCode">
+        <act-code-detail-statistics :chart-width="chartWidth" :hm-id="$route.query.hmId"></act-code-detail-statistics>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -77,6 +75,7 @@ export default {
   },
   data() {
     return {
+      chartWidth: 0,
       fixedHeight: 237,
       codeInfo: {},
       loading: false,
@@ -167,6 +166,7 @@ export default {
   mounted() {
     let that = this;
     this.activeName = this.$route.query.activeName || 'first';
+    this.chartWidth = this.$refs.page.$el.clientWidth;
     that.getActCodeInfo();
     document.getElementById('hb-layout-pager-one').addEventListener('scroll', that.scrollMethod);
   },

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue

@@ -42,7 +42,7 @@
           <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange" value-format="yyyy-MM-dd" :format="[2, 3, 4].includes(dateKey) ? 'yyyy-MM' : 'yyyy-MM-dd'" :clearable="false"> </el-date-picker>
         </div>
       </div>
-      <new-add-chart :charData="overViewData.dateList" id="new-add-chart"></new-add-chart>
+      <new-add-chart :chart-width="chartWidth" :charData="overViewData.dateList" id="new-add-chart"></new-add-chart>
     </div>
     <div>
       <div class="flex justify-between title">
@@ -73,7 +73,8 @@ export default {
       default() {
         return '';
       }
-    }
+    },
+    chartWidth: Number
   },
   mixins: [mixin],
   data() {

src/views/salesleads/actCodeManage/staffActCode/newAddChart.vue

 <template>
   <div>
-    <div :id="id" class="chart--nodata" :style="!charData.length ? 'height:0;' : ''"></div>
-    <div v-if="!charData.length" class="chart--nodata">
+    <div :id="id" class="chart--box" v-show="charData.length > 0"></div>
+    <div v-if="charData.length == 0" class="chart--nodata">
       <div>
         <img class="image-120" src="@/assets/no-data.svg" />
         <p class="font-14 color-606266 no-data-text">暂无数据</p>
@@ -27,23 +27,14 @@ export default {
         return [];
       }
     },
-    id: String
-  },
-  mounted() {
-    setTimeout(() => {
-      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
-    }, 30);
+    id: String,
+    chartWidth: Number
   },
   beforeUpdate() {
     this.drawChart();
   },
-  watch: {
-    charData() {
-      this.drawChart();
-    }
-  },
   methods: {
-    async drawChart() {
+    drawChart() {
       this.chart && this.chart.destroy();
       if (!this.charData.length) return;
       this.chart = new G2.Chart({
@@ -51,7 +42,7 @@ export default {
         autoFit: true,
         forceFit: true,
         height: 359,
-        width: 1400,
+        width: this.chartWidth,
         padding: [70, 60, 40, 70]
       });
       //装载数据
@@ -143,6 +134,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.chart--box {
+  height: 359px;
+  width: calc(100% - 20px);
+}
 .chart--nodata {
   height: 359px;
   width: 100%;