Merge branch 'feature/act-code' into dev

src/views/salesleads/actCodeManage/attractFlowLink/index.vue

@@ -22,8 +22,8 @@
         <el-button type="primary" @click="$router.push('attractFlowLinkAdd')" v-if="$getButtonLimit($buttonCode.addLink)" :limit-code="$buttonCode.addLink">新增链接</el-button>
       </div>
     </div>
-    <el-table :data="tableData" style="width:100%" v-loading="loading" @sort-change="handleSortChange">
-      <el-table-column width="120" prop="linkCode" label="链接ID" />
+    <el-table :data="tableData" style="width:100%" v-loading="loading" :max-height="tableMaxHeight" @sort-change="handleSortChange">
+      <el-table-column min-width="120" prop="linkCode" label="链接ID" />
       <el-table-column minWidth="180" prop="memberId" label="链接信息">
         <template slot-scope="{ row }">
           <p class="overFlow">{{ row.name }}</p>
@@ -42,7 +42,7 @@
           <span v-else>{{ scope.row[v.prop] }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="160" fixed="right">
+      <el-table-column label="操作" min-width="160" fixed="right">
         <template slot-scope="{ row }">
           <dm-dropdown ref="drop" :scope-data="row" :configs="btnArr" />
         </template>
@@ -63,7 +63,7 @@ const tableHead = [
   {
     label: '添加好友人数',
     prop: 'addNumT',
-    width: '130',
+    minWidth: '130',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.addNumT ? row.addNumT : '- -'}</span>`;
@@ -72,7 +72,7 @@ const tableHead = [
   {
     label: '今日新增人数',
     prop: 'addNum',
-    width: '130',
+    minWidth: '130',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.addNum ? row.addNum : '- -'}</span>`;
@@ -81,7 +81,7 @@ const tableHead = [
   {
     label: '点击总人次',
     prop: 'clickTimesT',
-    width: '120',
+    minWidth: '120',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.clickTimesT ? row.clickTimesT : '- -'}</span>`;
@@ -90,7 +90,7 @@ const tableHead = [
   {
     label: '今日点击人次',
     prop: 'clickTimes',
-    width: '130',
+    minWidth: '130',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.clickTimes ? row.clickTimes : '- -'}</span>`;
@@ -99,7 +99,7 @@ const tableHead = [
   {
     label: '点击总人数',
     prop: 'clickNumT',
-    width: '120',
+    minWidth: '120',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.clickNumT ? row.clickNumT : '- -'}</span>`;
@@ -108,7 +108,7 @@ const tableHead = [
   {
     label: '今日点击人数',
     prop: 'clickNum',
-    width: '130',
+    minWidth: '130',
     sortable: 'custom',
     formatter: function(row) {
       return `<span>${row.clickNum ? row.clickNum : '- -'}</span>`;
@@ -137,7 +137,9 @@ const tableHead = [
 ];
 export default {
   data() {
+    let tableMaxHeight = document.body.clientHeight - 285 + 'px';
     return {
+      tableMaxHeight,
       activeName: 'first',
       loading: false,
       form: {

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

@@ -47,6 +47,7 @@ export default {
     async drawChart() {
       this.chart && this.chart.destroy();
       if (!this.charData.length) return;
+      const data = this.handleData(this.charData);
       this.chart = new G2.Chart({
         container: this.id,
         autoFit: true,
@@ -55,7 +56,7 @@ export default {
         width: 1400,
         padding: [70, 60, 40, 70]
       });
-      this.chart.source(this.charData, {
+      this.chart.source(data, {
         value: {
           type: 'linear',
           tickInterval: 50
@@ -66,32 +67,25 @@ export default {
         shared: true
       });
       this.chart.scale({
-        bizDate: {
+        date: {
           dataKey: 'date',
           type: 'cat'
         },
-        clickTimes: {
+        num: {
           min: 0,
+          tickCount: 5,
           nice: true
         },
-        clickNum: {
-          min: 0
-        },
-        addNum: {
-          min: 0
+        times: {
+          min: 0,
+          tickCount: 5,
+          nice: true
         }
       });
-      // 图例
       this.chart.legend({
-        custom: true,
-        position: 'top-left',
-        items: [
-          { name: '今日添加人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } },
-          { name: '今日点击人次', value: 'clickTimes', marker: { symbol: 'line', style: { stroke: '#D6B38C', lineWidth: 12, lineHeight: 8 } } },
-          { name: '今日点击人数', value: 'clickNum', marker: { symbol: 'line', style: { stroke: '#14C9C9', lineWidth: 12, lineHeight: 8 } } }
-        ]
+        position: 'top-left'
       });
-      this.chart.axis('clickTimes', {
+      this.chart.axis('times', {
         grid: {
           line: {
             type: 'line',
@@ -108,7 +102,7 @@ export default {
           }
         }
       });
-      this.chart.axis('clickNum', {
+      this.chart.axis('num', {
         grid: {
           line: {
             type: 'line',
@@ -120,50 +114,49 @@ export default {
         },
         label: {
           formatter: text => {
-            let num = Number(text);
+            let num = text >= 1 ? text : 0;
             return num + '人';
           }
         }
       });
-      this.chart.axis('addNum', false);
-
       this.chart.tooltip({
-        showCrosshairs: true,
+        showMarkers: false,
         shared: true,
-        itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
-            <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-            {name}: {value}
-            </div>`
+        showCrosshairs: true
       });
       this.chart
         .line()
-        .position('bizDate*clickNum')
-        .tooltip('clickNum', clickNum => {
-          return { name: '今日点击人数', value: clickNum };
-        })
-        .color('#14C9C9');
-      this.chart
-        .line()
-        .position('bizDate*addNum')
-        .color('#4B74E8')
-        .tooltip('addNum', addNum => {
-          return {
-            name: '今日添加人数',
-            value: addNum
-          };
-        });
+        .position('date*num')
+        .color('type', ['rgba(75,116,232,1)', 'rgba(105,200,168,1)', 'rgba(251, 159, 45, 1)']);
 
       this.chart
         .line()
-        .position('bizDate*clickTimes')
-        .tooltip('clickTimes', clickTimes => {
-          return { name: '今日点击人次', value: clickTimes };
-        })
-        .color('#D6B38C');
-
-      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
+        .position('date*times')
+        .color('type', ['rgba(251, 159, 45, 1)']);
+      // this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
       //图表绘制的最后一步，用于将图表渲染至画布
       this.chart.render();
+    },
+    handleData(data) {
+      let arr = [];
+      data.forEach(item => {
+        arr.push({
+          date: item.bizDate,
+          type: '今日添加人数',
+          num: item.addNum
+        });
+        arr.push({
+          date: item.bizDate,
+          type: '今日点击人数',
+          num: item.clickNum
+        });
+        arr.push({
+          date: item.bizDate,
+          type: '今日点击人次',
+          times: item.clickTimes
+        });
+      });
+      return arr;
     }
   }
 };