客户阶段数据-数据分析 & 阶段配置

.idea/workspace.xml

@@ -2,9 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c03feb23-5590-4b06-ae32-412ba98013a8" name="Default" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/project/src/components/dataBoard/playletData.vue" beforeDir="false" afterPath="$PROJECT_DIR$/project/src/components/dataBoard/playletData.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change beforePath="$PROJECT_DIR$/project/package-lock.json" afterPath="$PROJECT_DIR$/project/package-lock.json" />
     </list>
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="TRACKING_ENABLED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -95,6 +97,8 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scratches" />
+      <pane id="ProjectPane" />
       <pane id="Scope">
         <subPane subId="Project Files">
           <expand>
@@ -138,8 +142,6 @@
           <select />
         </subPane>
       </pane>
-      <pane id="Scratches" />
-      <pane id="ProjectPane" />
     </panes>
   </component>
   <component name="ProjectViewState">
@@ -152,10 +154,25 @@
     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/project" />
     <property name="ts.external.directory.path" value="C:\Program Files (x86)\webstorm\WebStorm 2021.2.1\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="ShelveChangesManager" show_recycled="false">
+    <option name="remove_strategy" value="false" />
+  </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="SvnConfiguration">
     <configuration />
@@ -195,17 +212,17 @@
       <workItem from="1661338111374" duration="432000" />
       <workItem from="1661392701143" duration="873000" />
       <workItem from="1661395150121" duration="2965000" />
+      <workItem from="1669605643306" duration="36000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="18119000" />
+    <option name="totallyTimeSpent" value="18155000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-11" y="-11" width="1942" height="1042" extended-state="6" />
-    <editor active="true" />
     <layout>
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.042417817" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="true" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2518558" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
@@ -226,16 +243,20 @@
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
+    <option name="version" value="1" />
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager />
+    <watches-manager />
   </component>
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/qwh5/src/router/index.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="189">
           <caret line="31" column="30" lean-forward="false" selection-start-line="31" selection-start-column="30" selection-end-line="31" selection-end-column="30" />
-          <folding>
-            <element signature="e#0#81#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -243,7 +264,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -251,10 +271,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-567">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding>
-            <element signature="e#19673#20472#0" expanded="false" />
-            <element signature="e#20496#20817#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -262,7 +278,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="459">
           <caret line="56" column="79" lean-forward="true" selection-start-line="56" selection-start-column="56" selection-end-line="56" selection-end-column="79" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -270,7 +285,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -278,9 +292,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="513">
           <caret line="22" column="16" lean-forward="false" selection-start-line="22" selection-start-column="16" selection-end-line="22" selection-end-column="16" />
-          <folding>
-            <element signature="e#0#28#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -288,14 +299,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="421">
           <caret line="86" column="17" lean-forward="true" selection-start-line="86" selection-start-column="17" selection-end-line="86" selection-end-column="17" />
-          <folding>
-            <element signature="n#style#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#form#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="e#3035#3073#0" expanded="false" />
-            <element signature="e#5577#5588#0" expanded="false" />
-            <element signature="n#style#0;n#!!top" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -303,9 +306,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="244">
           <caret line="17" column="13" lean-forward="false" selection-start-line="17" selection-start-column="8" selection-end-line="17" selection-end-column="13" />
-          <folding>
-            <element signature="e#0#31#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -313,18 +313,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="311">
           <caret line="487" column="23" lean-forward="true" selection-start-line="487" selection-start-column="23" selection-end-line="487" selection-end-column="23" />
-          <folding>
-            <element signature="n#style#0;n#template#0;n#!!top" expanded="true" />
-            <element signature="n#template#1;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-collapse-item#0;n#template#0;n#van-collapse#0;n#div#0;n#van-tab#0;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#template#2;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-collapse-item#0;n#template#0;n#van-collapse#0;n#div#0;n#van-tab#0;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#div#0;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-collapse-item#0;n#template#0;n#van-collapse#0;n#div#0;n#van-tab#0;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#template#1;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-tab#1;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#template#2;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-tab#1;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#div#0;n#div#1;n#div#0;n#div#0;n#van-list#0;n#van-tab#1;n#van-tabs#0;n#div#0;n#template#0;n#!!top" expanded="false" />
-            <element signature="n#style#0;n#div#0;n#div#0;n#van-action-sheet#0;n#div#0;n#template#0;n#!!top" expanded="true" />
-            <element signature="e#7708#7951#0" expanded="false" />
-            <element signature="e#9084#9241#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>

project/package-lock.json

@@ -1934,6 +1934,16 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -3583,6 +3593,11 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -4842,6 +4857,14 @@
         "minimatch": "~3.0.2"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
@@ -10649,6 +10672,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11627,6 +11655,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -12194,6 +12227,14 @@
       "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.2.5.tgz",
       "integrity": "sha512-V7XUzu0v3WOzd8PEF9m/ZoVivap+ToBPOXrhI8AsnczD93YXvGG+HkeQhJHAF/jeav8CsPDF3X/Z2vCqBbjsMQ=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

project/src/assets/config/interface_api.js

@@ -326,6 +326,12 @@ var api = {
   phaseDel: "/api/CustomerStage/stageRuleDel",
   phaseSort: "/api/CustomerStage/stageRuleSort",
   phaseSet: "/api/CustomerStage/setStageRule",
+  phaseSetConfirm: "/api/CustomerStage/confirmSet",
+
+  // 客户阶段分析
+  phaseAnalysis_data: "/api/CustomerStage/analysis",
+  phaseAnalysis_trend: "/api/CustomerStage/trend",
+  phaseAnalysis_situation: "/api/CustomerStage/situation",
 };
 
 export { api };

project/src/components/customerAnalysis/stageData/index.vue

@@ -1,20 +1,377 @@
 <template>
   <div>
-    客户阶段分析
+    <!-- 数据列表 -->
+    <div class="dataList">
+      <div class="itemBox" v-for="(item,index) in dataList" :key="item.name" :class="item.rule_id == acIdx ? 'itemBoxAc' : ''" @click="switchDataItem(item,index)">
+        <div class="f24 ">{{item.cnt || '-'}}</div>
+        <div class="tMar5 f14 ">{{item.stage_title || '-' }}</div>
+      </div>
+    </div>
+
+    <!-- 阶段趋势 -->
+    <div class="trendBox" v-loading="trends_loading">
+      <div class="legendBox">
+        <div class="legendItem" v-for="(item,index) in legendList" :key="index" @click="changeLegend('legendList',item,index)">{{item.name}}
+          <div :class="['checkbox',item.selectFlag?'checkbox_active':'']" :style="item.selectFlag?`background: ${item.color};
+    border-color: ${item.color};`:''"><i class="el-icon-check"></i></div>
+        </div>
+      </div>
+      <div class="screenBox">
+        <date-picker title="自定义" quickType='select' :afferent_quick_list="[
+        { label: '近一周', value: '7', date: [$getDay(-8, false), $getDay(-1, false)] },
+        { label: '近15天', value: '15', date: [$getDay(-16, false), $getDay(-1, false)] },
+        { label: '近30天', value: '30', date: [$getDay(-31, false), $getDay(-1, false)] },
+        { label: '近90天', value: '90', date: [$getDay(-91, false), $getDay(-1, false)] }]" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime" :pickerOptions='pickerOptions' :is_include_today='false'></date-picker>
+      </div>
+      <div id="trend" style="width:100%;height:250px"></div>
+      <noData class="noData" v-if="custTrends&&custTrends.length<=0&&!trends_loading"></noData>
+    </div>
+
+    <!-- 客户流转情况 -->
+    <div class="trendBox">
+      <div>客户流转情况</div>
+      <div class="screenBox">
+        <date-picker title="自定义" quickType='select' :afferent_quick_list="[
+        { label: '昨天', value: '1', date: [$getDay(-1, false), $getDay(-1, false)] },
+        { label: '近7天', value: '7', date: [$getDay(-7, false), $getDay(-1, false)] },
+        { label: '近30天', value: '30', date: [$getDay(-31, false), $getDay(-1, false)] }]" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime" :pickerOptions='pickerOptions' :is_include_today='false'></date-picker>
+      </div>
+      <div id="trend_situation" style="width:100%;height:250px"></div>
+      <noData class="noData" v-if="custTrends&&custTrends.length<=0&&!trends_loading"></noData>
+    </div>
+
   </div>
 </template>
 
 <script>
+  import datePicker from '@/components/assembly/screen/datePicker.vue'
+  import noData from "@/components/assembly/noData";
+  import _lodash from 'lodash'
 export default {
   name: "stageData",
+  components: { datePicker, noData },
   data() {
-    return {}
+    return {
+      dataList:[],
+      acIdx:null,
+      trends_loading: false,
+      legendList: [
+        { name: '客户总数', key: 'cust_total_uc', color: '#2983DF', selectFlag: true },
+        { name: '客户新增', key: 'cust_add_uc', color: '#00B38A', selectFlag: true },
+        { name: '客户流失', key: 'cust_loss_uc', color: '#EB4315', selectFlag: true },
+        { name: '客户净增', key: 'cust_gain_uc', color: '#AED570', selectFlag: true },
+        { name: '公众号关注', key: 'official_account_uc', color: '#EFAF47', selectFlag: true },
+        { name: '付费客户数', key: 'cust_pay_uc', color: '#7366FF', selectFlag: true },
+        { name: '付费金额', key: 'cust_pay_amount', color: '#F28544', selectFlag: true },
+        { name: '付费用户客单价', key: 'charge_user_cost', color: '#E360C8', selectFlag: true },
+      ],
+      default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
+      myChart: null,
+      pickerOptions: {
+        disabledDate (time) {
+          return time > Date.now() - 8.64e7;
+        }
+      },
+      custTrends: [],
+      time: [],
+    }
+  },
+  created() {
+    this.time = this.default_time;
+    this.getAnalysisData()
   },
-  created() {},
-  methods: {}
+  methods: {
+
+    trendEvent (chartDataName) {
+      chartDataName === 'custTrends' && this.myChart && this.myChart.clear()
+
+      const _this = this;
+      let series = [], yAxis = []
+      let xArr = this[chartDataName].map((v) => {
+        return v.idate
+      });
+      this.legendList.forEach((item, index) => {
+        if (item.selectFlag) {
+          yAxis.push(
+            {
+              type: "value",
+              name: '',
+              show: false,
+              position: 'left',
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#F2F2f2',
+                  type: "dashed"
+                }
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#F2F2f2'
+                }
+              },
+              nameTextStyle: {
+                color: "#999999",
+                fontSize: 13,
+              },
+              axisLabel: {
+                color: '#999999',
+                fontSize: 12,
+                show: true,
+                formatter: function (params) {
+                  let result = params;
+                  let resultData;
+                  resultData = _this.$NumberHandle(result)
+                  return resultData;
+                }
+              }
+            })
+
+          // series
+          let data = this[chartDataName].map((v) => {
+            return v[item.key] || v[item.key] == 0 ? v[item.key] : '-'
+          });
+          series.push({
+            type: "line",
+            smooth: true,
+            name: item.name,
+            yAxisIndex: 0,
+            data: data,
+            lineStyle: {
+              width: 2
+            },
+            symbol: xArr.length == 1 ? 'emptyCircle' : 'none',
+            itemStyle: {
+              color: item.color,
+              borderType: "emptyCircle"
+            },
+          })
+        }
+      })
+      yAxis.forEach((item, index) => {
+        item.show = index == 0 ? true : false
+      })
+      series.forEach((item, index) => {
+        item.yAxisIndex = index
+      })
+      let option = {
+        title: '',
+        tooltip: {
+          trigger: 'axis',
+          show: true,
+          formatter: function (params) {
+            let result = params[0].name;
+            result += '<br/>'
+            params.forEach((item, index) => {
+              result +=
+                item.marker +
+                item.seriesName +
+                "：" + (_this.$formatNum(item.value)) +
+                "<br/>";
+            });
+            return result;
+          }
+        },
+        legend: {
+          itemWidth: 8,
+          itemHeight: 2,
+          icon: "plain",
+          show: false,
+          textStyle: {
+            fontSize: 12,
+            color: '#666666'
+          },
+        },
+        grid:
+          {
+            top: '6%',
+            left: '4%',
+            right: '4%',
+            bottom: '16%',
+            containLabel: false
+          },
+        xAxis: [
+          {
+            type: "category",
+            data: xArr,
+            boundaryGap: false,//设置数据从头开始
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#F2F2f2'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666',
+              fontSize: 10,
+              rotate: 30,
+            },
+          }
+        ],
+        yAxis: yAxis,
+        series: series
+      };
+      //初始化echarts实例
+      this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+      this.myChart.setOption(option);
+    },
+
+    changeTime (time) {//筛选时间变化
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.getCustTrends()
+    },
+
+    changeLegend (legendListName, data, index) {
+      let arr = this[legendListName].filter((v) => {
+        return v.selectFlag
+      })
+      if (arr.length == 1 && arr[0].key == data.key) {
+        this.$message({
+          message: '至少存在一条曲线',
+          type: "warning"
+        })
+        return
+      }
+      let item = data;
+      item.selectFlag = !item.selectFlag;
+      this.$set(this[legendListName], index, item)
+      this.$nextTick(() => {
+        legendListName === 'legendList' && this.trendEvent('custTrends')
+      })
+    },
+    // 获取趋势数据
+    getAnalysisData(){
+      this.$axios.get(this.URL.BASEURL + this.URL.phaseAnalysis_data).then((_res) => {
+        const res = _res.data
+        if (res && res.errno == 0) {
+          if(res.rst&&res.rst.length>0){
+            this.dataList = res.rst
+            this.acIdx = this.dataList[this.dataList.length-1].rule_id
+            this.getCustTrends()
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.trends_loading = false
+      });
+    },
+
+    // 获取趋势数据
+    getCustTrends () {//客户数据趋势
+      this.$axios.get(this.URL.BASEURL + this.URL.phaseAnalysis_trend, {
+        params: {
+          rule_id: this.acIdx,
+          start_date: this.time[0],
+          end_date: this.time[1],
+        }
+      }).then((_res) => {
+        const res = _res.data
+        this.trends_loading = false
+        if (res && res.errno == 0) {
+          // 处理后端返回的数据 => 分离&提取新图表数据
+          this.custTrends = _lodash.cloneDeep(res.rst)
+          this.custTrends.forEach(item => {
+            delete item['total_cost']
+            delete item['total_cust_pay_amount']
+          })
+          this.custTrendsNew = _lodash.cloneDeep(res.rst).map(item => ({
+            idate: item['idate'],
+            total_cost: item['total_cost'],
+            total_cust_pay_amount: item['total_cust_pay_amount']
+          }))
+          this.$nextTick(() => {
+            this.trendEvent('custTrends') // 绘制图表
+          })
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.trends_loading = false
+      });
+    },
+
+    //切换数据项
+    switchDataItem(item,index){
+      this.acIdx = item.rule_id
+      this.getCustTrends()
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.dataList{
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  .itemBox{
+    margin-right: 10px;
+    width: 240px;
+    height: 86px;
+    background: #FFFFFF;
+    border-radius: 6px 6px 0px 0px;
+    padding: 18px 40px;
+    color: #333;
+    box-sizing: border-box;
+    border-top: 6px solid #fff;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .itemBoxAc{
+    color: #02B389!important;
+    border-top: 6px solid #02B389;
+  }
+}
 
+.trendBox {
+  background: #ffffff;
+  padding: 22px 23px;
+  position: relative;
+  margin-top: 10px;
+  .noData {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  .legendBox {
+    display: flex;
+    align-items: center;
+    .legendItem {
+      color: #333333;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+  .screenBox {
+    display: flex;
+  }
+}
 </style>

project/src/components/phaseConfig/addEditDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog class="dialogCon_permission" :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="600px" @close="closeEvent">
+    <el-dialog class="dialogCon_permission" :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="660px" @close="closeEvent">
       <div class="dialogCon">
         <div class="itemBox" style="margin-top: 0">
           <div class="name"><em>*</em>阶段名称:</div>
@@ -17,23 +17,22 @@
         <div class="itemBox" style="align-items: baseline">
           <div class="name"><em>*</em>阶段规则:</div>
           <div class="ipt phaseBox">
-            <div class="flex-row bMar15">
-              <div class="chooseItem" v-for="item in phaseList" :key="item.value"
-                   :class="item.value == phaseVal ? 'acItem' : ''"
-                   @click.stop="phaseVal = item.value"
-                   >
-                <span class="checkBox" @click.stop="switchCheckBox(item.value)"
-                                     :class="choosePhaseArr.indexOf(item.value)>-1 ? 'acCheck' : ''"></span>
-                {{item.label}}
+            <div class="flex-base" v-for="(rItem,rIdx) in ruleList">
+              <span class="f13 flexShrink0">规则：</span>
+              <el-select style="width: 120px" :disabled="rItem.disabled" v-model="rItem.type" size="mini" placeholder="请选择">
+                <el-option v-for="item in phaseList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+              <span class="lMar14 f13 flexShrink0">满足：</span>
+              <div>
+                <addTime v-if="rItem.type=='time'"></addTime>
+                <screen-pay :reset='resetFlag' title="" v-if="rItem.type=='pay'"></screen-pay>
+                <enterprise-tag :reset='resetFlag' title="" v-if="rItem.type=='label'"></enterprise-tag>
               </div>
+              <i class="el-icon-delete" v-if="ruleList&&ruleList.length > 1" @click="delePhaseEvent(rItem)"></i>
             </div>
-            <div>
-              <addTime v-show="phaseVal==1"></addTime>
-              <screen-pay :reset='resetFlag' title="" v-show="phaseVal==2"></screen-pay>
-              <enterprise-tag :reset='resetFlag' title="" v-show="phaseVal==3"></enterprise-tag>
+            <div class="addPhase" @click="addPhaseEvent">
+              <i class="el-icon-circle-plus "></i> 添加规则
             </div>
-
-
           </div>
         </div>
       </div>
@@ -57,23 +56,36 @@
         dialogTitle:'阶段配置',
         iptName:'',
         iptDesc:'',
-        phaseVal:1,
         resetFlag:false,
         phaseList:[
-          {label:'客户添加时间',value:1},
-          {label:'付费情况',value:2},
-          {label:'标签',value:3},
+          {label:'客户添加时间',value:'time'},
+          {label:'付费情况',value:'pay'},
+          {label:'标签',value:'label'},
         ],
-        choosePhaseArr:[],
+      /*
+        {type:'time',condition:{min:0,max:1}},
+        {type:'pay',condition:{
+          payStatus:'not - has',
+          payMin:'',
+          payMax:'',
+          payType:'number -  money'
+        }},
+        {type:'label',condition:{
+          tag:'1 - 2 - 3 ',
+            tag_id_list:'标签分割'
+        }}
+      * */
         ruleList:[
-          {type:'1',condition:'test'}
+          {type:'time',label:'客户添加时间',condition:{},disabled:false}
         ],//传给后台的格式和回显的规则
-      }
-    },
-    created () {
-
 
+        flag:true,// 校验是否通过
+        timeRef:'',
+        payRef:'',
+        tagRef:'',
+      }
     },
+    created () {},
     watch: {
       dialogVisible(isShow) {
         // 弹框显示 => 初始化表单数据
@@ -85,12 +97,46 @@
           }else{ //新增
             this.iptName = ''
             this.iptDesc = ''
-            this.phaseVal = 1
           }
         }
       },
     },
     methods: {
+      //删除规则
+      delePhaseEvent(rItem){
+        if(this.ruleList&&this.ruleList.length==1){
+          this.$message({
+            message: '最少需要一个规则',
+            type: "warning"
+          })
+          return
+        }
+        let idx = this.ruleList.findIndex(n=>n.type == rItem.type)
+        this.ruleList.splice(idx,1)
+        this.phaseList.push({
+          label:rItem.label,value:rItem.type
+        })
+        this.ruleList[this.ruleList.length-1].disabled = false
+      },
+      //添加规则
+      addPhaseEvent(){
+        if(this.ruleList&&this.ruleList.length==3){
+          this.$message({
+            message: '每个规则仅可添加一次',
+            type: "warning"
+          })
+          return
+        }
+        let idx = 0
+        this.ruleList.forEach(rItem=>{
+          rItem.disabled = true
+          idx = this.phaseList.findIndex(n=>n.value == rItem.type)
+        })
+        this.phaseList.splice(idx,1)
+        this.ruleList.push({
+          type:this.phaseList[0].value,label:this.phaseList[0].label,condition:{},disabled:false,
+        })
+      },
       // 添加编辑 规则
       addEditEvent(){
 
@@ -103,18 +149,22 @@
       closeEvent(){
         this.$emit('close')
       },
-      //选择规则
-      switchCheckBox(val){
-        let idx = this.choosePhaseArr.indexOf(val)
-        if(idx > -1){
-          this.choosePhaseArr.splice(idx,1)
-        }else{
-          this.phaseVal = val
-          this.choosePhaseArr.push(val)
-        }
+
+      //规则校验
+      handleAssignment(){
+        this.flag = true
+        console.log(this.$refs.timeRef.minVal);
+        // console.log(this.$refs.timeRef.handleVal());
+        // this.ruleList.forEach(rItem=>{
+        //   if(rItem.type == 'time'){
+        //    this.$nextTick(()=>{
+        //      console.log(this.$refs.timeRef.handleVal());
+        //    })
+        //   }
+        // })
       },
       //确定
-      confirmEvent(){
+      async confirmEvent (){
         if(this.iptName==''){
           this.$message({
             message: '规则标题必填',
@@ -122,27 +172,33 @@
           })
           return
         }
-        this.$axios.post(this.URL.BASEURL + this.URL.phaseSet, {
-          rule_id: this.echoObj ? this.echoObj.rule_id : '',
-          stage_title: this.iptName,
-          stage_desc:this.iptDesc,
-          stage_rule:this.ruleList
-        }).then((res) => {
-          var res = res.data
-          if (res && res.errno == 0) {
-            this.$message({
-              message: '添加成功',
-              type: "success"
-            })
-            this.$emit('close',true)
-          } else if (res.errno != 4002) {
-            this.$message({
-              message: res.err,
-              type: "warning"
-            })
-          }
-        }).catch((err) => {
-        });
+        await this.handleAssignment()
+        if(!this.flag){
+          return
+        }
+        console.log(this.ruleList);
+        return
+          this.$axios.post(this.URL.BASEURL + this.URL.phaseSet, {
+            rule_id: this.echoObj ? this.echoObj.rule_id : '',
+            stage_title: this.iptName,
+            stage_desc:this.iptDesc,
+            stage_rule:this.ruleList
+          }).then((res) => {
+            var res = res.data
+            if (res && res.errno == 0) {
+              this.$message({
+                message: '添加成功',
+                type: "success"
+              })
+              this.$emit('close',true)
+            } else if (res.errno != 4002) {
+              this.$message({
+                message: res.err,
+                type: "warning"
+              })
+            }
+          }).catch((err) => {
+          });
       }
 
     }
@@ -170,27 +226,24 @@
       .phaseBox{
         padding: 20px;
         background-color: #f8f8f8;
-        .chooseItem{
-          display: flex;
-          align-items: center;
+        .el-icon-delete{
+          color: #58BCA6;
+          margin-left: auto;
           cursor: pointer;
-          margin-right: 25px;
-          .checkBox{
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            border-radius: 3px;
-            border: 1px solid #d8d8d8;
-            margin-right: 6px;
-          }
         }
-        .acItem{
-          color: #00B38A;
-          font-weight: 600;
-        }
-        .acCheck{
-          background-color: #00B38A;
-          border: 1px solid #00B38A!important;
+        .addPhase{
+          margin-top: 10px;
+          display: inline-block;
+          .el-icon-circle-plus{
+            color: #58BCA6;
+            margin-right: 4px;
+          }
+          color: #58BCA6;
+          cursor: pointer;
+          font-size: 14px;
+          &:hover{
+
+          }
         }
       }
     }

project/src/components/phaseConfig/addTime.vue

@@ -1,26 +1,24 @@
 <template>
-  <div class="timeLineBox " style="margin: 10px 0;">
-    <el-radio v-model="timeline" :label="24">24小时</el-radio>
-    <el-radio v-model="timeline" :label="168">7天</el-radio>
-    <el-radio v-model="timeline" :label="360">15天</el-radio>
-    <el-radio v-model="timeline" :label="-1">自定义</el-radio>
-    <date-picker v-if="timeline == -1" title="" width="355px" :timeFlag="true"
-                 :afferent_time='afferent_time' @changeTime="changeTime"
-                 style="margin:6px 0 8px 0">
-    </date-picker>
-    <!-- :reset='resetFlag'-->
+  <div class="timeLineBox " style="margin: 15px 0;">
+    <div class="flex-row tMar10">
+      <el-input v-model="minVal" size="mini" type="number" placeholder="开始值" style="width: 100px"></el-input>
+      <span class="lMar5">天</span>
+      <span class="lMar5 rMar5">-</span>
+      <el-input v-model="maxVal" size="mini" type="number" placeholder="结束值" style="width: 100px"></el-input>
+      <span class="lMar5">天</span>
+    </div>
   </div>
 </template>
 <script>
-  import datePicker from '@/components/assembly/screen/datePicker.vue'
   export default {
     name: 'addTime',
-    components: { datePicker },
-    props: ["afferent_time"],
+    components: {  },
+    props: ["propVal"],
     data () {
       return {
-        timeline:24,
-        resetFlag:false
+        resetFlag:false,
+        minVal:'',
+        maxVal:''
       }
     },
     created () {
@@ -29,6 +27,9 @@
     },
     methods: {
       //
+      handleVal(){
+        return { min: this.minVal ,max:this.maxVal }
+      },
       changeEvent(){
 
       },

project/src/components/phaseConfig/index.vue

@@ -2,34 +2,45 @@
   <div>
     <div class="screenBox">
       <el-button type="primary" size="small" @click="addEditEvent">阶段配置</el-button>
-      <span class="f12 lMar8">*上下拖动调整阶段排列顺序</span>
+      <el-button type="primary" size="small" plain @click="confirmEvent">确认阶段配置</el-button>
     </div>
 
-    <el-table ref="phaseTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:10px" v-loading="loading">
-      <el-table-column min-width='160' v-for="(item,index) in desCol" :key="index+'des'" :prop="item.prop" :label="item.label" show-overflow-tooltip align="center" :fixed="item.prop=='date'?'left':false">
-        <template slot-scope="scope">
-          <template v-if="item.prop == 'enable'">
-            <span v-if="scope.row.enable==1" class="c-448AFF">启用</span>
-            <span v-else class="c-F03F5C">禁用</span>
+    <div class="tableBox">
+      <div class="f12 bMar15 pad015 c-00B38A">*上下拖动列表可以调整排序，请确保阶段排序为初级到高级的顺序，规则设置完成后点击【确认阶段配置】后开始同步数据</div>
+      <el-table ref="phaseTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:10px" v-loading="loading">
+        <el-table-column label="拖拽排序" width="80" align="center">
+          <template slot-scope="{ row }">
+            <div class="drag-handler">
+              <i class="el-icon-rank"  />
+            </div>
           </template>
-          <span v-else>{{scope.row[item.prop]}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" min-width="160" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="addEditEvent(scope.row)">编辑</el-button>
-          <el-popconfirm title="确定删除吗？" @confirm="deleEvent(scope.row.rule_id)">
-            <el-button slot="reference" type="danger" size="mini">删除</el-button>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column min-width='160' v-for="(item,index) in desCol" :key="index+'des'" :prop="item.prop" :label="item.label" show-overflow-tooltip align="center" :fixed="item.prop=='date'?'left':false">
+          <template slot-scope="scope">
+            <template v-if="item.prop == 'enable'">
+              <span v-if="scope.row.enable==1" class="c-448AFF">启用</span>
+              <span v-else class="c-F03F5C">禁用</span>
+            </template>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="160" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="addEditEvent(scope.row)">编辑</el-button>
+            <el-popconfirm title="确定删除吗？" @confirm="deleEvent(scope.row.rule_id)">
+              <el-button slot="reference" type="danger" size="mini">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <div class="pagination" v-show="total>0">
-      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
-      </el-pagination>
+      <div class="pagination" v-show="total>0">
+        <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+        </el-pagination>
+      </div>
     </div>
 
+
     <!--阶段配置弹框-->
     <addEditDialog
       :dialogVisible="dialogVisible"
@@ -40,13 +51,14 @@
 </template>
 <script>
   import addEditDialog from './addEditDialog.vue'
+  import Sortable from 'sortablejs'
   export default {
     name: 'phaseConfig',
     components: { addEditDialog },
     data () {
       return {
         desCol: [
-          { prop: "sort_order", label: "排序", min_width: 180, fixed: 'left' },
+          { prop: "rule_id", label: "规则id", min_width: 180,},
           { prop: "stage_title", label: "客户阶段", min_width: 180, },
           { prop: "stage_desc", label: "阶段描述", min_width: 180, },
           { prop: "stage_rule", label: "阶段规则", min_width: 180, },
@@ -59,14 +71,91 @@
         pages:0,
         page_size:20,
         loading:false,
-        echoObj:{}
+        echoObj:{},
+        operate_rule_id:'',//目标id
+        front_rule_id:'',//上
+        behind_rule_id:'',//下
       }
     },
     created () {
       this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
       this.init()
     },
+    mounted() {
+      // 表格行拖拽
+      this.handleRowDrop()
+    },
     methods: {
+      // 注册表格行拖拽事件
+      handleRowDrop() {
+        const tbody = document.querySelector('.el-table__body-wrapper tbody')
+        const _this = this
+        Sortable.create(tbody, {
+          handle: '.drag-handler',
+          onEnd({ newIndex, oldIndex }) {
+            if (newIndex == oldIndex) return
+            _this.tableData.splice(
+              newIndex,
+              0,
+              _this.tableData.splice(oldIndex, 1)[0]
+            )
+            const newArray = _this.tableData.slice(0)
+            _this.tableData = []
+            _this.$nextTick( async () => {
+              _this.tableData = newArray
+              await _this.getRuleId(newIndex)
+              await _this.sortEvent()
+            })
+          }
+        })
+      },
+      //获取排序需要的id
+      getRuleId(newIndex){
+        const _this = this
+        _this.operate_rule_id = _this.tableData[newIndex].rule_id
+        if(newIndex == 0){ //列表第一位
+          _this.front_rule_id = ''
+          _this.behind_rule_id = _this.tableData[newIndex+1].rule_id
+        }else if(newIndex == _this.tableData.length-1){ //列表最后一位
+          _this.front_rule_id = _this.tableData[newIndex-1].rule_id
+          _this.behind_rule_id = ''
+        }else{ //中间
+          _this.front_rule_id = _this.tableData[newIndex-1].rule_id
+          _this.behind_rule_id = _this.tableData[newIndex+1].rule_id
+        }
+      },
+      //排序事件
+      sortEvent(){
+        this.$axios.post(this.URL.BASEURL + this.URL.phaseSort, {
+          operate_rule_id:this.operate_rule_id,//目标id
+          front_rule_id:this.front_rule_id,//上
+          behind_rule_id:this.behind_rule_id,//下
+        }).then((res) => {
+          var res = res.data
+          this.$message({
+            message: res.err,
+            type: "info"
+          })
+          //如果排序失败，就刷新一下页面，否则之后的排序都是错误的
+          if(res.errno !== '0'){
+            this.init()
+          }
+        })
+      },
+      // 确认阶段配置
+      confirmEvent(){
+        this.$axios.get(this.URL.BASEURL + this.URL.phaseSetConfirm).then((res) => {
+          var res = res.data
+          if (res && res.errno == 0) {
+            this.init(1)
+          } else {
+            this.$message({
+              message: res.err,
+              type: "warning"
+            })
+          }
+        })
+      },
       // 添加编辑 规则
       addEditEvent( row ){
         this.dialogVisible = true
@@ -132,5 +221,9 @@
   }
 </script>
 <style lang="scss">
-
+.tableBox{
+  background-color: #fff;
+  padding: 15px 0;
+  margin-top: 10px;
+}
 </style>

project/src/components/phaseConfig/pay.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="common-screen-item pay">
     <label class="common-screen-label" v-if="title&&title!=''">{{title}}</label>
-    <el-popover placement="bottom" trigger="click" v-model="visible" @hide="visibleHide">
+    <el-popover placement="bottom" size="mini" trigger="click" v-model="visible" @hide="visibleHide">
       <div :style="width?'width:'+width:''" :class="['common-screen-self-box','common-input-select',valueObj.radio!=null&&clearable?'common-input-select-hover':'']" slot="reference">
         <div :class="['common-screen-self-con',valueObj.radio!=0&&valueObj.radio==null?'common-screen-self-placeholder':'']" :style="width?'text-align: left;padding-left: 15px !important;':''">
           <div class="common-screen-self-con-div">

project/src/style/self.scss

@@ -192,6 +192,9 @@
 .f22{
   font-size: 22px !important;
 }
+.f24{
+  font-size: 24px !important;
+}
 .f28{
   font-size: 28px;
 }
@@ -395,6 +398,10 @@
   display: flex;
   align-items: flex-start;
 }
+.flex-base{
+  display: flex;
+  align-items: baseline;
+}
 .clampTwo{
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
@@ -440,3 +447,6 @@
   margin:10px 0;
   color:red;
 }
+.drag-handler {
+  cursor: move;
+}