修改

src/components/viitto/saleGuestTable.vue

@@ -3,6 +3,7 @@
   height: 100%;
   width: 100%;
   background-color: #1D243D;
+  font-family: 'MicrosoftYaHei'
 }
 .salesGuest .nav{
   padding: 25px 45px;
@@ -68,20 +69,24 @@
 .salesTable th,.salesTable td{
     height:40px;
     font-size:12px;
+    padding:0 6px;
 }
 .salescomSpan{
     display:inline-block;
-    padding:5px 20px;
+    padding:5px 0;
     border-radius: 18px;
     color:#fff;
+    width:100%;
+    text-align: center;
     font-size:15px;
     background-color: #2B314E;
 }
 .salesTable tr:nth-child(even){
     background-color: #252B48;
 }
-.salesTable tr:hover{
-    background-color: #2B314E;
+.salesTable tbody tr:hover{
+    background-color: #2B314E!important;
+    box-shadow: 0px 0px 10px rgba(81,84,99,0.8)!important;/*设置阴影,可以自定义参数*/
 }
 .saleSecondTh th{
     color:#8089B4;
@@ -95,6 +100,9 @@
     font-size:12px;
     color:#4BD7AA;
 }
+.saleFirstth{
+    height:60px!important;
+}
 </style>
 <template>
   <div class="salesGuest">
@@ -115,8 +123,9 @@
     </div>
     <div class="content" >
         <table class="salesTable" style="border-collapse:collapse; border-spacing:0;">
+            <thead>
                 <tr class="saleFirstth">
-                <th width="80"><span class="salescomSpan" style="padding:5px 15px;">日期</span></th>
+                    <th width="80"><span class="salescomSpan" style="padding:5px 10px;">日期</span></th>
                     <th colspan="2" v-for="item in companyList"><span class="salescomSpan">{{item.OutBranchName}}</span></th>
                 </tr>
                 <tr class="saleSecondTh">
@@ -149,6 +158,8 @@
                         <th>收客人数</th>
                     </th>
                 </tr> 
+            </thead>
+            <tbody>
                 <tr v-for="item in dataList">
                     <td><span style="color:#fff;padding-left:15px;">{{item.month}}月</span></td>
                     <template v-for="subItem in item.List">
@@ -156,6 +167,7 @@
                         <td><span class="guestNum">{{subItem.GuestNum}}</span></td>
                     </template>
                 </tr>
+            </tbody>
         </table>
     </div>
   </div>
@@ -221,6 +233,7 @@ export default {
                         }
                     }
                 })
+                console.log(this.dataList,'datalistt');
             }
         })
     },
@@ -237,7 +250,7 @@ export default {
     },
     //点击跳转
     goSalesMap(){
-        window.location="http://192.168.0.116:8080/#/salesGuestList"
+        window.location="http://192.168.0.117:8080/#/salesGuestList"
     }
   }
 }

src/components/viitto/salesGuestList.vue

@@ -113,6 +113,7 @@
 .MapIcon {
   /* float:right; */
   color: #fff;
+  text-align: right;
   /* margin-top:10px; */
 }
 .MapIcon span {
@@ -120,6 +121,9 @@
   margin-right: 10px;
   cursor: pointer;
 }
+.checkedSpan{
+    color:#459BC7;
+}
 </style>
 <template>
   <div class="salesGuest" v-loading="loading">
@@ -172,10 +176,11 @@
       </el-row>
     </div>
     <div class="content" >
-        <!-- <div class="MapIcon">
-            <span @click="LineMap()">折线图</span>
-            <span @click="BarMap()">柱状图</span>
-        </div> -->
+        <div class="MapIcon">
+            <span @click="getAll()" :class="{'checkedSpan':checkIndex==1}">不限</span>
+            <span @click="LineMap()" :class="{'checkedSpan':checkIndex==2}">折线图</span>
+            <span @click="BarMap()" :class="{'checkedSpan':checkIndex==3}">柱状图</span>
+        </div>
         <div class="myecharts" ref="myecharts" >
    
         </div>
@@ -198,7 +203,8 @@ export default {
       yearList: [],
       Mydatalist: [],
       //所有月份
-      monthList: []
+      monthList: [],
+      checkIndex:1,
     };
   },
   watch: {},
@@ -209,7 +215,6 @@ export default {
   },
   methods: {
     getList() {
-      this.dataList = [];
       let url =
         "http://47.96.23.199:5001/api/order/get_sale_numandpreferprice_statistics";
       this.loading = true;
@@ -223,12 +228,16 @@ export default {
               x.OutBranchName = x.OutBranchName.replace("印象", "");
             });
             this.getCompany(this.dataList);
+          }else{
+            this.dataList = [];
+            this.getCompany(this.dataList);
           }
         }
       });
     },
     //去重获取公司
     getCompany(dataList) {
+      this.Mydatalist=[];
       this.companyList = [];
       this.monthList = [];
       var obj = {};
@@ -281,14 +290,14 @@ export default {
         companyArr1.push(obj2);
         var tempArray = [];
         let obj = {
-          name: item.OutBranchName,
+          name: item.name,
           type: "bar",
           data: item.preferPriceList
         };
         let objline = {
           type: "line",
           symbolSize: 2,
-          name: item.OutBranchName,
+          name: item.name,
           yAxisIndex: 1,
           hoverAnimation: true,
           smooth: true,
@@ -298,7 +307,7 @@ export default {
         this.Mydatalist.push(obj);
         this.Mydatalist.push(objline);
       });
-      this.init(companyArr1);
+      this.init(companyArr1,this.Mydatalist);
     },
 
     getOtherMonth(branchId, monthStr) {
@@ -313,7 +322,7 @@ export default {
 
     //点击切换为折现图
     LineMap() {
-      // let newArr=this.Mydatalist;
+      this.checkIndex=2;
       let newArr = JSON.parse(JSON.stringify(this.Mydatalist));
       let myArr = [];
       newArr.forEach(x => {
@@ -321,7 +330,6 @@ export default {
           myArr.push(x);
         }
       });
-      this.Mydatalist = myArr;
       let companyArr1 = [];
       this.companyList.forEach((item, index) => {
         let obj2 = {
@@ -337,10 +345,11 @@ export default {
         };
         companyArr1.push(obj2);
       });
-      this.init(companyArr1);
+      this.init(companyArr1,myArr);
     },
     //点击切换为柱状图
     BarMap() {
+      this.checkIndex=3;
       let newArr = this.Mydatalist;
       let myArr = [];
       newArr.forEach(x => {
@@ -348,7 +357,6 @@ export default {
           myArr.push(x);
         }
       });
-      this.Mydatalist = myArr;
       let companyArr1 = [];
       this.companyList.forEach((item, index) => {
         let obj2 = {
@@ -364,9 +372,27 @@ export default {
         };
         companyArr1.push(obj2);
       });
-      this.init(companyArr1);
+      this.init(companyArr1,myArr);
+    },
+    getAll(){
+      this.checkIndex=1;
+      let companyArr1 = [];
+      this.companyList.forEach((item, index) => {
+        let obj2 = {
+          data: [item.OutBranchName],
+          icon: "circle",
+          x: index * 5 + 3.5 + "%",
+          orient: "horizontal",
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 16
+          }
+        };
+        companyArr1.push(obj2);
+      });
+      this.init(companyArr1,this.Mydatalist);
     },
-
     //获取年份
     getYear() {
       var myDate = new Date();
@@ -393,8 +419,7 @@ export default {
         }
       });
     },
-    init(companyArr1) {
-        console.log("companyArr1",companyArr1);
+    init(companyArr1,Mydatalist) {
       var that = this;
       var myChart = this.$echarts.init(this.$refs.myecharts);
       var option = {
@@ -421,14 +446,6 @@ export default {
             }
           }
         },
-        // toolbox: {
-        //     feature: {
-        //         dataView: {show: true, readOnly: false},
-        //         magicType: {show: true, type: ['line', 'bar']},
-        //         restore: {show: true},
-        //         saveAsImage: {show: true}
-        //     }
-        // },
         xAxis: {
           type: "category",
           boundaryGap: true,
@@ -513,7 +530,7 @@ export default {
             }
           }
         ],
-        series: this.Mydatalist,
+        series: Mydatalist,
         color: [
           "#FE7691",
           "#FA219C",
@@ -530,6 +547,7 @@ export default {
           "#E70000"
         ]
       };
+      myChart.clear();
       myChart.setOption(option, true);
     }
   }