cxw-010203

src/views/BrandComparison/BrandBeginComparte.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:56:24
- * @LastEditTime: 2021-11-05 15:34:05
+ * @LastEditTime: 2021-11-05 19:19:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
@@ -9,8 +9,20 @@
 <template>
     <div class="d-container">
         <div class="bbc-inner">
-            <brandCompateHeader></brandCompateHeader>
-            
+            <brandCompateHeader ref="brandRef"></brandCompateHeader>
+             <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 brands" :key="index" @click="handlerBrand(item)">{{item.seriesname}}</li>
+                    </ul>
+                    <div style="clear: both"></div>
+                </div>
+            </div>
+            <div class="beCpm-footer" @click="handlerSubmit">
+                开始对比
+            </div>
         </div> 
     </div>
 </template>
@@ -21,6 +33,45 @@ export default {
     name: "BrandBeginComparte",
     components: {
         brandCompateHeader
+    },
+    inject: ['reload'],
+    data() {
+        return {
+            form: {
+                token: ""
+            },
+            chooseArr: [null, null, null, null, null, null],
+            brands: [
+            ],
+        }
+    },
+    methods: {
+        // 选择默认的车型
+        handlerBrand(row) {
+            for(let i = 0; i < this.chooseArr.length; i++) {
+                if(!this.chooseArr[i]) {
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.modelRef.list[i]
+                    obj.brand = row.brandname;
+                    obj.model = row.seriesname;
+                    obj.isDel = true;
+                    return;
+                }
+            }    
+        },
+        // 开始对比
+        handlerSubmit() {
+            let arr = this.$refs.brandRef.brands || [];
+             let filterArr = arr.filter((ele) => {
+                 return ele.name;
+            });
+            if(filterArr.length < 2) {
+                this.$message.warning('至少2个品牌进行对比');
+                return;
+            }
+            this.setBComparison(filterArr);
+            this.reload()
+        }
     }
 }
 </script>
@@ -29,4 +80,61 @@ export default {
 .bbc-inner {
     padding: 0px 16px 16px 16px;
 }
+.mbc-inner {
+    width: 100%;
+    height: 488px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .mbc-dd {
+        width: 100%;
+        height: calc(100% - 48px);
+        .mb-ul {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            li {
+                float: left;
+                width: 295px;
+                height: 89px;
+                background-color: #0f2b47;
+                margin-left: 16px;
+                margin-top: 16px;
+                color: #fff;
+                text-align: center;
+                border-radius: 2px;
+                border: 1px solid transparent;
+                line-height: 89px;
+                font-size: 20px;
+                font-weight: 500;
+                cursor: pointer;
+                &:hover {
+                    border: 1px solid #0058e6;
+                }
+            }
+            .liActive {
+                color: #0058e6;
+                border: 1px solid #0058e6;
+            }
+        }
+    }
+}
+.beCpm-footer {
+    position: relative;
+    width: 354px;
+    height: 64px;
+    background-image: url("../../assets/images/login/img_dlan_nor.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%);
+    cursor: pointer;
+    color: #63aecc;
+    font-size: 24px;
+    text-align: center;
+    line-height: 64px;
+    margin-top: 16px;
+}
 </style>

src/views/BrandComparison/BrandComparison.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:49:05
- * @LastEditTime: 2021-11-05 13:49:06
+ * @LastEditTime: 2021-11-05 19:22:57
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@@ -17,7 +17,7 @@
 <template>
     <div class="d-container">
         <div class="bc-outter">
-            <brandCompateHeader></brandCompateHeader>
+            <brandCompateHeader :data="getBComparison" @change="handlerChangeBrand"></brandCompateHeader>
             <div class="bc-d2">
                 <informationTrend></informationTrend>
                 <overallInformation></overallInformation>
@@ -96,6 +96,7 @@ import tailTOPMedia from "./tailTOPMedia"
 import brandCompateHeader from "./brandCompateHeader"
 export default {
     name: "brandComparison",
+    inject: ['reload'],
     components: {
         informationTrend, // 信息量趋势
         overallInformation, // 整体信息量
@@ -130,7 +131,10 @@ export default {
         };	
     },
     methods: {
-        
+        handlerChangeBrand(arr) {
+            this.setBComparison(arr);
+            this.reload()
+        }
        
     },
 };

src/views/BrandComparison/brandCompateHeader/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:18:12
- * @LastEditTime: 2021-11-05 15:49:39
+ * @LastEditTime: 2021-11-05 19:09:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
@@ -31,6 +31,26 @@
 <script>
 export default {
     name: "brandCompateHeader",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.brands[index] = Object.assign(this.brands[index], ele);
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
     data() {
         return {
             brandShow: false,
@@ -72,6 +92,7 @@ export default {
             this.brandShow = true;
             this.brandIndex = n;
         },
+        // 获取选择品牌的数据
         handlerBrand(arr) {
             let name = arr[0].brandname;
             let n = this.brands.findIndex(ele => ele.name === name);
@@ -79,12 +100,21 @@ export default {
                let row = this.brands[this.brandIndex];
                row.name = name;
                row.isDel = true;
-            }   
+            }
+            let filterArr = this.brands.filter((ele) => {
+                 return ele.name;
+            });
+            this.$emit('change', filterArr)
         },
+        // 删除
         handlerDel(n) {
             let row = this.brands[n];
             row.name = "";
             row.isDel = false;
+            let filterArr = this.brands.filter((ele) => {
+                 return ele.name;
+            });
+            this.$emit('change', filterArr)
         }
     }
 };

src/views/BrandComparison/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-11-05 14:02:07
+ * @LastEditTime: 2021-11-05 19:31:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
@@ -14,27 +14,26 @@
 </template>
 
 <script>
-
-import BrandComparison from "./BrandComparison.vue"
-import BrandBeginComparte from "./BrandBeginComparte.vue"
+import BrandComparison from "./BrandComparison.vue";
+import BrandBeginComparte from "./BrandBeginComparte.vue";
 export default {
     name: "brandComparisonIndex",
     components: {
         BrandComparison,
-        BrandBeginComparte
+        BrandBeginComparte,
     },
     data() {
         return {
-             hasData: false
-        };	
+            hasData: false,
+        };
     },
     created() {
         this.hasData = this.getBComparison.length > 0 ? true : false;
     },
-    methods: {
-        
+    mounted() {
        
     },
+    methods: {},
 };
 </script>
 

src/views/MarketingComparison/marketingComparison.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:45:09
- * @LastEditTime: 2021-11-03 16:00:45
+ * @LastEditTime: 2021-11-05 18:51:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/index.vue
@@ -9,7 +9,7 @@
 <template>
     <div class="d-container">
        <div class="mc-outter">
-          <mcChooseModel></mcChooseModel>
+          <mcChooseModel :data="getSComparison" @change="handlerChangeModel"></mcChooseModel>
           <div class="mc-d1">
               <mcOSVC></mcOSVC>
               <mcIVC></mcIVC>
@@ -34,6 +34,7 @@ import mcCTNF from "./mcCTNF"
 import salesComparison from "./salesComparison"
 export default {
     name: "marketingComparison",
+    inject: ['reload'],
     components: {
         mcChooseModel, // 选择车型
         mcOSVC, // 整体声量对比
@@ -42,6 +43,12 @@ export default {
         mcChannelDistribution, // 渠道分布对比
         mcCTNF, // 论坛总量对比
         salesComparison // 销量对比
+    },
+    methods: {
+        handlerChangeModel(arr) {
+            this.setSComparison(arr);
+            this.reload()
+        }
     }
 }
 </script>

src/views/MarketingComparison/mcChooseModel/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:54:08
- * @LastEditTime: 2021-11-05 18:20:55
+ * @LastEditTime: 2021-11-05 18:50:42
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@@ -14,25 +14,25 @@
         <div class="mccm-inner">
             <template v-for="(item,index) in list">
                 <div :key="index" style="display: flex;justify-content: flex-start;">
-                <div class="mccm-item" style="margin-left: 1rem">
-                    <div class="mc-t">
-                        <div class="m-t-d1">{{item.brand|doStr(4)}}</div>
-                        <span class="m-t-s1">{{item.model|doStr(10)}}</span>
+                    <div class="mccm-item" style="margin-left: 1rem">
+                        <div class="mc-t">
+                            <div class="m-t-d1">{{item.brand|doStr(4)}}</div>
+                            <span class="m-t-s1">{{item.model|doStr(10)}}</span>
+                        </div>
+                        <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="开始时间" 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="结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)" />
+                                </a-form-model-item>
+                            </a-form-model>
+                        </div>
+                        <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
+                        <div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
                     </div>
-                    <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="开始时间" 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="结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" @change="handlerTime(item)"/>
-                            </a-form-model-item>
-                        </a-form-model>
-                    </div>
-                    <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
-                    <div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
-                </div>
-                <img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+                    <img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
                 </div>
             </template>
 
@@ -42,10 +42,30 @@
 </template>
 
 <script>
-import moment from "moment"
+import moment from "moment";
 import { getUserSeriesName } from "@/api/comm";
 export default {
     name: "mcChooseModel",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.list[index] = Object.assign(this.list[index], ele);
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
     data() {
         return {
             labelCol: { span: 9 },
@@ -56,7 +76,7 @@ export default {
             chooseIndex: -1,
             form: {
                 token: "",
-                sBrandName: ""
+                sBrandName: "",
             },
             list: [
                 {
@@ -64,42 +84,42 @@ export default {
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
                 {
                     brand: "",
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
                 {
                     brand: "",
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
                 {
                     brand: "",
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
                 {
                     brand: "",
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
                 {
                     brand: "",
                     model: "",
                     startTime: "",
                     endTime: "",
-                    isDel: false
+                    isDel: false,
                 },
             ],
         };
@@ -135,7 +155,7 @@ export default {
             this.chooseIndex = n;
             this.modelShow = true;
         },
-        // 删除车型 
+        // 删除车型
         handlerDel(n) {
             let row = this.list[n];
             row.brand = "";
@@ -143,25 +163,35 @@ export default {
             row.startTime = "";
             row.endTime = "";
             row.isDel = false;
-            this.$emit('del', n)
+            let filterArr = this.list.filter((ele) => {
+                return ele.brand && ele.model && ele.startTime && ele.endTime;
+            });
+            this.$emit("del", n);
+            this.$emit("change", filterArr);
+             
         },
         // 获取切换车型的数据
         handlerBrand(arr) {
-           let row = this.list[this.chooseIndex];
-           row.brand = arr[0].brandname;
-           row.model = arr[1].name;
-           row.isDel = true;
+            let row = this.list[this.chooseIndex];
+            row.brand = arr[0].brandname;
+            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('结束时间必须大于开始时间');
-               }
+            if (item.startTime && item.endTime) {
+                let isBefore = moment(item.startTime).isBefore(item.endTime);
+                if (!isBefore) {
+                    item.endTime = "";
+                    this.$message.warning("结束时间必须大于开始时间");
+                } else {
+                    let filterArr = this.list.filter((ele) => {
+                        return ele.brand && ele.model;
+                    });
+                    this.$emit("change", filterArr);
+                }
             }
-        }
+        },
     },
 };
 </script>