cxw-010203

src/api/comm/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-20 16:36:08
- * @LastEditTime: 2021-10-28 17:12:56
+ * @LastEditTime: 2021-11-05 15:53:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/comm/index.js
@@ -118,3 +118,16 @@ export function getExcel(params) {
         }
     })
 }
+
+// 获取推荐车型的接口
+export function getRecommendSeries(params) {
+    let obj =  Object.assign({action: 'getRecommendSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/views/BrandComparison/BrandBeginComparte.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:56:24
- * @LastEditTime: 2021-11-05 14:08:48
+ * @LastEditTime: 2021-11-05 15:34:05
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
@@ -10,6 +10,7 @@
     <div class="d-container">
         <div class="bbc-inner">
             <brandCompateHeader></brandCompateHeader>
+            
         </div> 
     </div>
 </template>

src/views/BrandComparison/brandCompateHeader/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:18:12
- * @LastEditTime: 2021-11-05 13:25:38
+ * @LastEditTime: 2021-11-05 15:49:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
@@ -17,13 +17,14 @@
                     <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
                         <span class="s1">{{item.name}}</span>
                         <span class="s2">{{item.name}}</span>
-                        <span class="s3" @click="openBrand(index)">切换品牌</span>
+                        <span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
+                        <span class="s3" @click="openBrand(index)" v-else>切换品牌</span>
                     </div>
                     <img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
                 </div>
             </template>
         </div>
-        <iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
+        <iSwitchBrand :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
     </div>
 </template>
 
@@ -36,22 +37,28 @@ export default {
             brandIndex: 0,
             brands: [
                 {
-                    name: "奥迪",
+                    name: "",
+                    isDel: false,
                 },
                 {
-                    name: "宝马",
+                    name: "",
+                    isDel: false,
                 },
                 {
-                    name: "奔驰",
+                    name: "",
+                    isDel: false,
                 },
                 {
-                    name: "吉利",
+                    name: "",
+                    isDel: false,
                 },
                 {
-                    name: "大众",
+                    name: "",
+                    isDel: false,
                 },
                 {
-                    name: "别克",
+                    name: "",
+                    isDel: false,
                 },
             ],
         }
@@ -60,10 +67,25 @@ export default {
         goback() {
             this.$router.go(-1);
         },
+        // 打开品牌选择
          openBrand(n) {
             this.brandShow = true;
             this.brandIndex = n;
         },
+        handlerBrand(arr) {
+            let name = arr[0].brandname;
+            let n = this.brands.findIndex(ele => ele.name === name);
+            if(n === -1) {
+               let row = this.brands[this.brandIndex];
+               row.name = name;
+               row.isDel = true;
+            }   
+        },
+        handlerDel(n) {
+            let row = this.brands[n];
+            row.name = "";
+            row.isDel = false;
+        }
     }
 };
 </script>

src/views/BrandInsight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 17:59:49
- * @LastEditTime: 2021-11-05 13:52:35
+ * @LastEditTime: 2021-11-05 15:46:06
  * @LastEditors: Please set LastEditors
  * @Description: 品牌洞察
  * @FilePath: /data-show/src/views/BrandInsight/index.vue
@@ -124,7 +124,7 @@ export default {
       // 获得获取品牌
       handlerBrand(arr) {
           this.setBrand(arr[0]);
-          this.setModel(arr[1]);
+        //   this.setModel(arr[1]);
           this.reload();
       }
     }

src/views/MarketingComparison/mcBeginCompare.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 17:12:47
- * @LastEditTime: 2021-11-05 14:32:56
+ * @LastEditTime: 2021-11-05 18:29:12
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Editiv
  * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
@@ -9,18 +9,18 @@
 <template>
     <div class="d-container">
         <div class="mbc-outter">
-            <mcChooseModel></mcChooseModel>
+            <mcChooseModel ref="modelRef" @del="handlerDel"></mcChooseModel>
             <div class="mbc-inner">
                 <v-label-div title="车型推荐">
                 </v-label-div>
                 <div class="mbc-dd">
                     <ul class="mb-ul">
-                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item}}</li>
+                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item.seriesname}}</li>
                     </ul>
                     <div style="clear: both"></div>
                 </div>
             </div>
-            <div class="beCpm-footer">
+            <div class="beCpm-footer" @click="handlerSubmit">
                 开始对比
             </div>
         </div>
@@ -28,51 +28,74 @@
 </template>
 
 <script>
+import {getRecommendSeries} from "@/api/comm"
 import mcChooseModel from "./mcChooseModel";
 export default {
     name: "mcBeginCompare",
     components: {
         mcChooseModel,
     },
+    inject: ['reload'],
     data() {
         return {
-            chooseArr: [],
+            form: {
+                token: ""
+            },
+            chooseArr: [null, null, null, null, null, null],
             models: [
-                "奥迪A4",
-                "奥迪A6",
-                "奥迪S3",
-                "奥迪S4",
-                "奥迪RS3",
-                "奥迪RS4",
-                "宝马1系",
-                "宝马2系",
-                "宝马3系",
-                "宝马M5",
-                "宝马M4",
-                "宝马M3",
-                "本田凌派",
-                "本田雅阁",
-                "本田缤智",
-                "本田冠道",
-                "本田奥德赛",
-                "本田艾力绅",
-                "比亚迪宋PRO",
-                "比亚迪唐",
-                "比亚迪汉EV",
-                "比亚迪秦",
-                "比亚迪元",
-                "比亚迪宋Max",
             ],
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
     methods: {
         // 选择默认的车型
-        handlerModel(ele) {
+        handlerModel(row) {
-            let n = this.chooseArr.findIndex((e) => e === ele);
+            for(let i = 0; i < this.chooseArr.length; i++) {
-            if (n === -1 && this.chooseArr.length < 6) {
+                if(!this.chooseArr[i]) {
-                this.chooseArr.push(ele);
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.modelRef.list[i]
+                    obj.brand = row.brandname;
+                    obj.model = row.seriesname;
+                    obj.isDel = true;
+                    return;
+                }
             }
+            
+        },
+        // 获取推荐车型
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRecommendSeries(obj).then(res => {
+                let data = res.data || [];
+                this.models = data;
+            })
         },
+        // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
+        },
+        // 开始比对
+        handlerSubmit() {
+           let arr = this.$refs.modelRef.list || [];
+           let filterArr = arr.filter(ele => {
+              return ele.brand && ele.model
+           });
+           if(filterArr.length < 2) {
+                this.$message.warning('至少2个车型进行对比');
+                return;
+           }
+           for(let i = 0; i < filterArr.length; i++) {
+               if(!filterArr[i].startTime || !filterArr[i].endTime) {
+                   this.$message.warning('请选择时间');
+                   return;
+               }
+           }
+           this.setSComparison(filterArr);
+           this.reload()
+        }
        
     },
 };

src/views/MarketingComparison/mcChooseModel/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:54:08
- * @LastEditTime: 2021-11-05 15:25:19
+ * @LastEditTime: 2021-11-05 18:20:55
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@@ -22,10 +22,10 @@
                     <div>
                         <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
                             <a-form-model-item label="开始时间">
-                                <a-date-picker v-model="item.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                                <a-date-picker v-model="item.startTime" show-time type="date" placeholder="开始时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)" />
                             </a-form-model-item>
                             <a-form-model-item label="结束时间">
-                                <a-date-picker v-model="item.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                                <a-date-picker v-model="item.endTime" show-time type="date" placeholder="结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)"/>
                             </a-form-model-item>
                         </a-form-model>
                     </div>
@@ -42,6 +42,7 @@
 </template>
 
 <script>
+import moment from "moment"
 import { getUserSeriesName } from "@/api/comm";
 export default {
     name: "mcChooseModel",
@@ -142,6 +143,7 @@ export default {
             row.startTime = "";
             row.endTime = "";
             row.isDel = false;
+            this.$emit('del', n)
         },
         // 获取切换车型的数据
         handlerBrand(arr) {
@@ -150,6 +152,16 @@ export default {
            row.model = arr[1].name;
            row.isDel = true;
         },
+        // 选择时间的判断
+        handlerTime(item) {
+            if(item.startTime && item.endTime) {
+               let isBefore= moment(item.startTime).isBefore(item.endTime);
+               if(!isBefore) {
+                   item.endTime = ""
+                   this.$message.warning('结束时间必须大于开始时间');
+               }
+            }
+        }
     },
 };
 </script>