...

src/App.vue

@@ -20,6 +20,8 @@ body,
   box-sizing: border-box;
 }
 
+
+
 // ::-webkit-scrollbar {
 //   width: .3vw;
 //   background-color: rgba(30, 111, 200, 0.8)b;
@@ -41,12 +43,16 @@ body,
   padding: 0 !important;
 }
 
+.ershi {
+  margin-left: 20px;
+}
+
 .lv,
 .lan,
 .huang {
   margin-top: 10px;
   padding: 10px 0;
-  width: 120px;
+  width: 35%;
   height: 70px;
 
   p {
@@ -73,4 +79,18 @@ body,
 .huang {
   background-color: rgb(230, 162, 60);
 }
+
+.unline {
+  box-sizing: border-box;
+  border-bottom: 1px solid rgb(255, 255, 255);
+  text-decoration: none;
+  color: white;
+  font-weight: 600;
+}
+
+.lvlanbox {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+}
 </style>

src/method/axios.js

@@ -2,8 +2,9 @@ import axios from "axios";
 // import { gettoken } from "../services/token";
 // axios.defaults.withCredentials=true;
 const instance = axios.create({
-    baseURL: 'http://192.168.2.55:8022', //请求的基础地址
-    timeout: 5000, //请求超时的时间
+  // baseURL: 'http://lhyt.zzly.vip:808', //请求的基础地址
+  baseURL: 'http://192.168.2.55:8022', //请求的基础地址
+  timeout: 5000, //请求超时的时间
 });
 //发一个get请求
 
@@ -17,29 +18,31 @@ export default instance;
 //全局请求拦截，发起网络请求之前执行
 instance.interceptors.request.use(
 
-    function(config) {
-        // Do something before request is sent
-        // config.headers.Authorization = gettoken();
-        return config;
-    },
-    function(error) {
-        // Do something with request error
-        return Promise.reject(error);
-    }
+  function (config) {
+    // Do something before request is sent
+    // config.headers.Authorization = gettoken();
+    return config;
+  },
+  (error) => {
+    // Do something with request error
+    return Promise.reject(error);
+  }
 
 );
-
+// instance.interceptors.request((config) => {
+//   return config
+// })
 // Add a response interceptor
 //全局响应拦截，网络请求返回之后执行
 instance.interceptors.response.use(
-    function(response) {
-        // Any status code that lie within the range of 2xx cause this function to trigger
-        // Do something with response data
-        return response.data;
-    },
-    function(error) {
-        // Any status codes that falls outside the range of 2xx cause this function to trigger
-        // Do something with response error
-        return Promise.reject(error);
-    }
+  function (response) {
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    return response.data;
+  },
+  function (error) {
+    // Any status codes that falls outside the range of 2xx cause this function to trigger
+    // Do something with response error
+    return Promise.reject(error);
+  }
 );

src/views/IndexView/IndexView.vue

@@ -12,9 +12,8 @@
         <div class="left">
           <div class="smallbox">
             <dv-border-box-1 class="dv-border-box-1one">
-              <router-link style="color: white;text-decoration: none;" :to="{ name: 'keliufenxidetails' }">
+              <router-link class="unline" :to="{ name: 'keliufenxidetails' }">
                 客流分析</router-link>
-
               <!-- <div class="lvlanbox">
                 <div class="lv">
                   <p>首次进店</p>
@@ -32,7 +31,7 @@
               <KLFX />
               <!-- </div> -->
             </dv-border-box-1>
-            <dv-border-box-1 class="dv-border-box-1two"><router-link style="color: white;text-decoration: none;"
+            <dv-border-box-1 class="dv-border-box-1two"><router-link class="unline"
                 :to="{ name: 'cheliangkucundetails' }">
                 车辆库存</router-link>
               <div class="lvlanbox">
@@ -42,21 +41,22 @@
                 </div>
                 <div class="lan">
                   <p>库存金额</p>
-                  <h4>{{ (clkcdata.stock_amount / 10000).toFixed(2) }}<span>万元</span></h4>
+                  <h4 style="overflow: hidden;height: 53px;">{{ (clkcdata.stock_amount / 10000).toFixed(2)
+                  }}<span>万</span></h4>
                 </div>
 
               </div>
               <div class="whater">
-                <dv-water-level-pond :config="chartConfig1" style="width:100px;height:100px" />
+                <dv-water-level-pond :config="chartConfig1" style="width:30%;height:100px" />
                 <p>超180天</p>
-                <dv-water-level-pond :config="chartConfig2" style="width:100px;height:100px" />
+                <dv-water-level-pond :config="chartConfig2" style="width:30%;height:100px" />
                 <p>现金车</p>
               </div>
             </dv-border-box-1>
           </div>
           <p style="text-align: center;padding: 10px;font-size: 1.2rem;">销售分析</p>
           <div class="monthly">
-            <dv-border-box-1 class="dv-border-box-1four"><router-link style="color: white;text-decoration: none;"
+            <dv-border-box-1 class="dv-border-box-1four"><router-link class="unline"
                 :to="{ name: 'xiaoshoufenximondetails' }">
                 月度</router-link>
               <div class="monthlyboxs">
@@ -97,8 +97,7 @@
               </div>
 
             </dv-border-box-1> -->
-            <dv-border-box-1 class="dv-border-box-1five"><router-link style="color: white;text-decoration: none;"
-                :to="{ name: 'fenqiyewudetails' }">
+            <dv-border-box-1 class="dv-border-box-1five"><router-link class="unline" :to="{ name: 'fenqiyewudetails' }">
                 分期业务</router-link>
               <FQYW />
               <!-- <div style="width: 30%;">
@@ -114,13 +113,14 @@
                   </div>
                 </div> -->
             </dv-border-box-1>
-            <dv-border-box-1 class="dv-border-box-1five"><router-link style="color: white;text-decoration: none;"
-                :to="{ name: 'keyuanfenxidetails' }">
+            <dv-border-box-1 class="dv-border-box-1five"><router-link class="unline" :to="{ name: 'keyuanfenxidetails' }">
                 客源分析</router-link>
               <KYFX />
             </dv-border-box-1>
             <div class="chanyetj">
-              <p style="text-align: center;margin:30px 0 30px  0;cursor: pointer;" @click="gojcdetail">交车排名</p>
+              <p style="text-align: center;margin:30px 0 30px  0;cursor: pointer;" @click="gojcdetail"><span
+                  class="unline">交车排名</span>
+              </p>
               <JCPM></JCPM>
               <!-- <div><dv-scroll-board :config="jiaoche"
                   style="width:600px;height:300px;text-align: center;margin: 0 auto;cursor: pointer;" />
@@ -156,7 +156,7 @@
                 <div class="lv">
                   <p>入厂产值</p>
                   <h4><span>{{ rctcdata.total_amount
-                  }}</span>元</h4>
+                  }}</span>万</h4>
                 </div>
                 <div class="shoubao2">
 
@@ -174,24 +174,25 @@
             </div>
           </div>
           <div class="chanyetj">
-            <p style="text-align: center;margin: 20px 0;" @click="goczdetail">产值统计</p>
+            <p style="text-align: center;margin: 20px 0;" @click="goczdetail"><span class="unline">产值统计</span></p>
             <CZTJ></CZTJ>
           </div>
           <div class="chanyetj">
             <p style="text-align: center;margin: 30px 0 30px 0;" @click="gobxdetail">
+              <span class="unline">保险承保核保</span>
 
-              保险承保核保
             </p>
             <BXHB></BXHB>
           </div>
           <div style="width: 100%;">
-            <p style="margin: 30px 0;text-align: center;cursor: pointer;" @click="gokcfxdetails">库存分析</p>
+            <p style="margin: 30px 0;text-align: center;cursor: pointer;" @click="gokcfxdetails"><span
+                class="unline">库存分析</span></p>
             <KCFX />
           </div>
           <div style="width: 100%;">
             <p style="text-align: center;margin: 0 0 50px 0;"><router-link style="color: white;text-decoration: none;"
                 :to="{ name: 'baokefenxidetails' }">
-                保客分析</router-link></p>
+                <span class="unline">保客分析</span></router-link></p>
             <BKFX />
           </div>
         </div>
@@ -224,12 +225,12 @@ export default {
       chartConfig1: {
         data: [],
         colors: ['rgb(10,101,140)'],
-        waveOpacity: 0.2
+        waveOpacity: 0.6
       },
       chartConfig2: {
         data: [],
         colors: ['rgb(10,101,140)'],
-        waveOpacity: 0.2
+        waveOpacity: 0.6
       },
     };
   },
@@ -281,8 +282,8 @@ export default {
       clkcchartInfo().then(res => {
         // const { chartConfig1 } = this
         // this.chartConfig1.data = res.data.cash_ratio
-        this.chartConfig1.data = [res.data.cash_ratio, 0]
-        this.chartConfig2.data = [res.data.overstock_ratio, 0]
+        this.chartConfig1.data = [(res.data.cash_ratio * 100).toFixed(2), 0]
+        this.chartConfig2.data = [(res.data.overstock_ratio * 100).toFixed(2), 0]
         // 第一个参数最大值，第二个是默认值(默认为0就行了，字段拼成的数组)
         this.clkcdata = res.data
         this.chartConfig2 = { ...this.chartConfig2 }
@@ -441,6 +442,7 @@ export default {
             margin-top: 30px;
             text-align: start;
             position: relative;
+            width: 100%;
 
             p {
               color: white;

src/views/IndexView/chart/BKFX.vue

@@ -7,16 +7,16 @@
 import * as echarts from 'echarts';
 import { bkfxchartInfo } from "../../../servuces/prove";
 export default {
-  data() {
+  data () {
     return {
       bkfxdata: []
     }
   },
-  mounted() {
+  mounted () {
     this.bkfxchartapi()
   },
   methods: {
-    chart5() {
+    chart5 () {
       const bkfx = document.getElementById('bkfx');
       const myChart5 = echarts.init(bkfx);
       const option5 = {
@@ -47,7 +47,7 @@ export default {
               fontSize: 16,
               color: 'white',
               show: true,
-              formatter(param) {
+              formatter (param) {
                 // correct the percentage
                 return param.name + ' (' + param.percent * 2 + '%)';
               }
@@ -65,9 +65,10 @@ export default {
       };
       option5 && myChart5.setOption(option5);
     },
-    bkfxchartapi() {
+    bkfxchartapi () {
       bkfxchartInfo().then(res => {
         this.bkfxdata = res.data
+        console.log(res.data);
         this.chart5()
       })
     }

src/views/IndexView/chart/BXHB.vue

@@ -5,7 +5,7 @@
 <script>
 import { bxcbhbchartInfo } from "../../../servuces/prove";
 export default {
-  data() {
+  data () {
     return {
       //保险承保核保
       baoxian: {
@@ -26,11 +26,11 @@ export default {
       },
     }
   },
-  mounted() {
+  mounted () {
     this.bxcbhbchartapi()
   },
   methods: {
-    bxcbhbchartapi() {
+    bxcbhbchartapi () {
       bxcbhbchartInfo().then(res => {
         console.log('保险承保核保', res.data);
         const keyindex = {
@@ -53,6 +53,7 @@ export default {
           item_values.push(item_value)
         })
         this.baoxian.data = item_values
+        console.log(this.baoxian.data);
         this.baoxian = { ...this.baoxian }
 
       })

src/views/IndexView/chart/FQYW.vue

@@ -3,14 +3,17 @@
     <div id="fqyw"></div>
     <div style="width: 30%;">
       <div>
-        <p style="margin: 20px 0;color: rgb(91, 211, 218);">高期限&nbsp;&nbsp;{{ fqywdata.gqx_count }}</p>
+        <p style="margin: 20px 0;color: rgb(91, 211, 218);">高期限&nbsp;&nbsp;{{
+          fqywdatagqx }}</p>
         <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
-            :stroke-width="20" color="rgb(80, 180, 210)" :percentage="fqywdata.gqx_count"></el-progress></div>
+            :stroke-width="20" color="rgb(80, 180, 210)" :percentage="fqywdatagqx"></el-progress>
+        </div>
       </div>
       <div>
-        <p style="margin: 20px 0;color: rgb(110, 211, 218);">渗透率&nbsp;&nbsp;{{ fqywdata.stl }}</p>
+        <p style="margin: 20px 0;color: rgb(110, 211, 218);">渗透率&nbsp;&nbsp;{{
+          fqywdatastl }}</p>
         <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
-            :stroke-width="20" color="rgb(100, 233, 180)" :percentage="fqywdata.stl"></el-progress></div>
+            :stroke-width="20" color="rgb(100, 233, 180)" :percentage="fqywdatastl"></el-progress></div>
       </div>
     </div>
   </div>
@@ -20,17 +23,19 @@ import * as echarts from 'echarts';
 import { fqywchartInfo } from "../../../servuces/prove";
 
 export default {
-  data() {
+  data () {
     return {
-      fqywdata: []
+      fqywdata: [],
+      fqywdatastl: undefined,
+      fqywdatagqx: undefined
     }
   },
-  mounted() {
+  mounted () {
 
     this.fqywchartapi()
   },
   methods: {
-    chart2() {
+    chart2 () {
       const fqyw = document.getElementById('fqyw');
       const myChart2 = echarts.init(fqyw);
       const option2 = {
@@ -45,11 +50,13 @@ export default {
       option2 && myChart2.setOption(option2);
 
     },
-    fqywchartapi() {
+    fqywchartapi () {
       fqywchartInfo().then(res => {
         this.fqywdata = res
+        this.fqywdatastl = Number.isInteger(res.stl) ? parseFloat(res.stl) : parseFloat(res.stl.toFixed(2))
+        this.fqywdatagqx = Number.isInteger(res.gqx_count) ? parseFloat(res.gqx_count) : parseFloat(res.gqx_count.toFixed(2))
         this.chart2()
-        console.log(res);
+        // console.log(res);
       })
     }
   }
@@ -58,6 +65,7 @@ export default {
 <style scoped>
 #fqyw {
   width: 50%;
-  height: 250px;
+  margin-top: 10px;
+  height: 240px;
 }
 </style>

src/views/IndexView/chart/JCPM.vue

@@ -5,20 +5,11 @@
 <script>
 import { jcpmchartInfo } from "../../../servuces/prove";
 export default {
-  data() {
+  data () {
     return {
       jiaoche: {
         header: ['#', '店面', '销售顾问', '集客数量', '订单数量', '成交率'],
-        data: [
-          ['1', '10', '85', '43', '46', '1'],
-          ['2', '20', '55', '54', '435', ''],
-          ['3', '30', '54', '33', '354', ''],
-          ['4', '40', '24', '54', '34', ''],
-          ['5', '40', '24', '54', '34', ''],
-          ['6', '40', '24', '54', '34', ''],
-          ['7', '40', '24', '54', '34', ''],
-          ['8', '40', '24', '54', '34', ''],
-        ],
+        data: [],
         rowNum: 7,
         headerBGC: '#050E18',
         oddRowBGC: 'rgb(20,42,64)',
@@ -27,21 +18,20 @@ export default {
       }
     }
   },
-  mounted() {
+  mounted () {
     this.jcpmchartapi()
   },
   methods: {
-    jcpmchartapi() {
+    jcpmchartapi () {
       jcpmchartInfo().then(res => {
         console.log('交车排名', res);
         const keyindex = {
-          'company': 0,
-          'pm': 1,
+          'pm': 0,
+          'company': 1,
           'xsgw': 2,
           'jksl': 3,
           'ddsl': 4,
           'cjl': 5
-
         }
 
         let item_values = []

src/views/IndexView/chart/KLFX.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="lvlanbox">
       <div class="lv">
-        <p>首次进店</p>
+        <p>再次进店</p>
         <h4>
           <span>
             <!-- <dv-digital-flop :config="confignumber1" style="width:100%;height:30px;" /> -->{{ klfxchartdata.ec_count
@@ -24,17 +24,17 @@ import * as echarts from 'echarts';
 import { klfxchartInfo } from "../../../servuces/prove";
 
 export default {
-  data() {
+  data () {
     return {
       //客流分析数据
       klfxchartdata: []
     }
   },
-  mounted() {
+  mounted () {
     this.klfxchartapi()
   },
   methods: {
-    chart1() {
+    chart1 () {
       const klfx = document.getElementById('klfx');
       const myChart1 = echarts.init(klfx);
       const option1 = {
@@ -74,7 +74,7 @@ export default {
       option1 && myChart1.setOption(option1);
 
     },
-    klfxchartapi() {
+    klfxchartapi () {
       klfxchartInfo().then(res => {
         this.klfxchartdata = res.data
         // console.log(this.klfxchartdata.tb);
@@ -93,11 +93,4 @@ export default {
   width: 100%;
   height: 180px;
 }
-
-.lvlanbox {
-  display: flex;
-  justify-content: space-evenly;
-
-
-}
 </style>

src/views/IndexView/chart/KYFX.vue

@@ -8,17 +8,17 @@ import * as echarts from 'echarts';
 import { kyfxchartInfo } from "../../../servuces/prove";
 
 export default {
-  data() {
+  data () {
     return {
       kyfxdata: []
     }
   },
-  mounted() {
+  mounted () {
 
     this.kyfxchartapi()
   },
   methods: {
-    chart3() {
+    chart3 () {
       var kyfx = document.getElementById('kyfx');
       var myChart3 = echarts.init(kyfx);
       const option3 = {
@@ -59,7 +59,7 @@ export default {
 
       option3 && myChart3.setOption(option3);
     },
-    kyfxchartapi() {
+    kyfxchartapi () {
       kyfxchartInfo().then(res => {
         this.kyfxdata = res.data;
         this.chart3()
@@ -73,8 +73,8 @@ export default {
 </script>
 <style scoped>
 #kyfx {
-  width: 500px;
+  width: 80%;
   height: 300px;
-  margin-left: 5%;
+  margin: 0 auto;
 }
 </style>

src/views/IndexView/chart/TCHB.vue

@@ -1,16 +1,16 @@
 <template>
-  <div style="display: flex;justify-content: space-around;">
-    <div class="monthlybox" style="padding-left: 20px;">
+  <div style="display: flex;justify-content: space-around;width: 100%;">
+    <div class="monthlybox" style="padding-left: 20px;width: 25%;">
       <div class="mon1 lv">
         <p>当日台次</p>
         <h4><span>{{ monthlydatas.today_count }}</span>台</h4>
       </div>
-      <div class="mon2 lan">
+      <div class="mon1 lan">
         <p>本月累计</p>
         <h4><span>{{ monthlydatas.month_count
         }}</span>台</h4>
       </div>
-      <div class="mon3 huang">
+      <div class="mon1 huang">
         <p>单车毛利</p>
         <h4><span>{{ monthlydatas.profit_amount
         }}</span>元</h4>
@@ -19,17 +19,19 @@
     <div class="monthlybox">
       <p style="margin-top: 20px;">台次环比</p>
       <div id="tchb"></div>
-      <p style="margin-bottom: 20px;">完成率{{ monthlydatas.wcl1
+      <p style="margin-bottom: 20px;">完成率{{ monthlydataswcl1
       }}</p>
       <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray" :stroke-width="12"
-          :percentage="monthlydatas.wcl1"></el-progress></div>
+          :percentage="monthlydataswcl1"></el-progress>
+      </div>
     </div>
     <div class="monthlybox">
       <p style="margin-top: 20px;">利润环比</p>
       <div id="lrhb"></div>
-      <p style="margin-bottom: 20px;">完成率{{ monthlydatas.wcl2 }}</p>
+      <p style="margin-bottom: 20px;">完成率{{ monthlydataswcl2 }}</p>
       <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
-          color=" rgb(230, 162, 60)" :stroke-width="12" :percentage="monthlydatas.wcl2"></el-progress></div>
+          color=" rgb(230, 162, 60)" :stroke-width="12" :percentage="monthlydataswcl2"></el-progress>
+      </div>
     </div>
   </div>
 </template>
@@ -39,7 +41,9 @@ import { monthlydata } from "../../../servuces/prove";
 export default {
   data () {
     return {
-      monthlydatas: []
+      monthlydatas: [],
+      monthlydataswcl1: undefined,
+      monthlydataswcl2: undefined
     }
   },
   mounted () {
@@ -82,11 +86,11 @@ export default {
               color: 'blueviolet',
               fontSize: 16,
               top: '30%',
-              offsetCenter: [0, '70%']
+              offsetCenter: [0, '90%']
             },
             data: [
               {
-                value: this.monthlydatas.count_QOQ * 100,
+                value: (this.monthlydatas.count_QOQ * 100).toFixed(2),
               }
             ]
           }
@@ -132,11 +136,11 @@ export default {
               color: 'blueviolet',
               fontSize: 16,
               top: '30%',
-              offsetCenter: [0, '70%']
+              offsetCenter: [0, '90%']
             },
             data: [
               {
-                value: this.monthlydatas.profit_amount_QOQ * 100,
+                value: (this.monthlydatas.profit_amount_QOQ * 100).toFixed(2),
               }
             ]
           }
@@ -147,6 +151,11 @@ export default {
     monthlydataapi () {
       monthlydata().then(res => {
         this.monthlydatas = res.data
+        this.monthlydataswcl1 = Number.isInteger(res.data.wcl1) ? parseFloat(res.data.wcl1) : parseFloat(res.data.wcl1.toFixed(2))
+        this.monthlydataswcl2 = Number.isInteger(res.data.wcl2) ? parseFloat(res.data.wcl2) : parseFloat(res.data.wcl2.toFixed(2))
+        // console.log(this.monthlydataswcl1);
+        // console.log(this.monthlydataswcl2);
+        // console.log(this.monthlydatas);
         this.chart6()
         this.chart7()
       })
@@ -169,4 +178,8 @@ export default {
   width: 180px;
   height: 135px;
 }
+
+.mon1 {
+  width: 100%;
+}
 </style>

src/views/IndexView/details/BKFXdetails.vue

@@ -1,79 +1,77 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
-
+  <div class="JCDetails" style="padding:0 50px;">
     <h1>保客分析</h1>
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" :height="taheight" show-summary :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
       textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="门店" width="100">
+        <el-table-column prop="company" fixed label="门店" width="100">
         </el-table-column>
-        <el-table-column label="客户总数">
-          <el-table-column prop="khzs" label="">
-          </el-table-column>
+        <el-table-column prop="khzs" sortable width="110" label="客户总数">
+
         </el-table-column>
-        <el-table-column label="保有客户">
-          <el-table-column prop="bykh" label="">
-          </el-table-column>
+        <el-table-column prop="bykh" sortable width="110" label="保有客户">
+
 
         </el-table-column>
         <el-table-column label="无价值(2年以上未回厂)">
-          <el-table-column prop="wjzkh" label="数量">
+          <el-table-column prop="wjzkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="wjzzb" label="占比">
+          <el-table-column prop="wjzzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="回归客户">
-          <el-table-column prop="hgkh" label="数量">
+          <el-table-column prop="hgkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="hgzb" label="占比">
+          <el-table-column prop="hgzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="忠实客户">
-          <el-table-column prop="zskh" label="数量">
+          <el-table-column prop="zskh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="zszb" label="占比">
+          <el-table-column prop="zszb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="重点客户">
-          <el-table-column prop="zdkh" label="数量">
+          <el-table-column prop="zdkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="zdzb" label="占比">
+          <el-table-column prop="zdzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="普通客户">
-          <el-table-column prop="ptkh" label="数量">
+          <el-table-column prop="ptkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="ptzb" label="占比">
+          <el-table-column prop="ptzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="新增客户">
-          <el-table-column prop="xzkh" label="数量">
+          <el-table-column prop="xzkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="xzzb" label="占比">
+          <el-table-column prop="xzzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="新建档客户">
-          <el-table-column prop="xjdkh" label="数量">
+          <el-table-column prop="xjdkh" sortable label="数量">
           </el-table-column>
-          <el-table-column prop="xjdzb" label="占比">
+          <el-table-column prop="xjdzb" sortable label="占比">
           </el-table-column>
         </el-table-column>
 
@@ -90,6 +88,7 @@ import { nowdaterange } from "../../../servuces/getnowtime";
 export default {
   data () {
     return {
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       tableDatahj: [],
       options: [],
@@ -107,9 +106,15 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.bkfxtabledataapi()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   computed: {
     // ...mapState(['storefront'])
   },
@@ -244,6 +249,11 @@ export default {
 
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .el-table {
   background-color: transparent;
   border-color: rgb(70, 91, 117);
@@ -267,6 +277,10 @@ export default {
   background-color: rgb(58, 147, 189);
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep #tab-first,
 ::v-deep #tab-second,
 ::v-deep #tab-third,

src/views/IndexView/details/BXDetails.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
+    <h1>保险核保</h1>
     <!-- <div class="topbox">
       <div class="selec">
         <el-select v-model="value" clearable placeholder="请选择">
@@ -12,89 +13,92 @@
       </div>
     </div> -->
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 50%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" :height="taheight" show-summary :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
+      textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="name" label="店名" width="150">
+        <el-table-column prop="name" fixed label="店名" width="150">
         </el-table-column>
-        <el-table-column header-align="center" label="平安保险">
-          <el-table-column prop="paxbds" label="新保单数">
+        <!-- <el-table-column header-align="center" label="平安保险"> -->
+        <el-table-column label="平安保险">
+          <el-table-column prop="paxbds" sortable width="110" label="新保单数">
           </el-table-column>
-          <el-table-column prop="paxbje" label="新保金额">
+          <el-table-column prop="paxbje" sortable width="110" label="新保金额">
           </el-table-column>
-          <el-table-column prop="pazbds" label="续保单数">
+          <el-table-column prop="pazbds" sortable width="110" label="续保单数">
           </el-table-column>
-          <el-table-column prop="pazbje" label="续保金额">
+          <el-table-column prop="pazbje" sortable width="110" label="续保金额">
           </el-table-column>
-          <el-table-column prop="pazje" width="100" label="总承包金额">
+          <el-table-column prop="pazje" sortable width="120" label="总承包金额">
           </el-table-column>
 
         </el-table-column>
-        <el-table-column header-align="center" label="人寿保险">
-          <el-table-column prop="rsxbds" label="新保单数">
+        <el-table-column label="人寿保险">
+          <el-table-column prop="rsxbds" sortable width="110" label="新保单数">
           </el-table-column>
-          <el-table-column prop="rsxbje" label="新保金额">
+          <el-table-column prop="rsxbje" sortable width="110" label="新保金额">
           </el-table-column>
-          <el-table-column prop="rszbds" label="续保单数">
+          <el-table-column prop="rszbds" sortable width="110" label="续保单数">
           </el-table-column>
-          <el-table-column prop="rszbje" label="续保金额">
+          <el-table-column prop="rszbje" sortable width="110" label="续保金额">
           </el-table-column>
-          <el-table-column prop="rszje" label="总承包金额">
+          <el-table-column prop="rszje" sortable width="120" label="总承包金额">
           </el-table-column>
 
         </el-table-column>
-        <el-table-column header-align="center" label="人保保险">
-          <el-table-column prop="rbxbds" label="新保单数">
+        <el-table-column label="人保保险">
+          <el-table-column prop="rbxbds" sortable width="110" label="新保单数">
           </el-table-column>
-          <el-table-column prop="rbxbje" label="新保金额">
+          <el-table-column prop="rbxbje" sortable width="110" label="新保金额">
           </el-table-column>
-          <el-table-column prop="rbzbds" label="续保单数">
+          <el-table-column prop="rbzbds" sortable width="110" label="续保单数">
           </el-table-column>
-          <el-table-column prop="rbzbje" label="续保金额">
+          <el-table-column prop="rbzbje" sortable width="110" label="续保金额">
           </el-table-column>
-          <el-table-column prop="rbzje" label="总承包金额">
+          <el-table-column prop="rbzje" sortable width="120" label="总承包金额">
           </el-table-column>
 
         </el-table-column>
-        <el-table-column header-align="center" label="太平洋保险">
-          <el-table-column prop="tpyxbds" label="新保单数">
+        <el-table-column label="太平洋保险">
+          <el-table-column prop="tpyxbds" sortable width="110" label="新保单数">
           </el-table-column>
-          <el-table-column prop="tpyxbje" label="新保金额">
+          <el-table-column prop="tpyxbje" sortable width="110" label="新保金额">
           </el-table-column>
-          <el-table-column prop="tpyzbds" label="续保单数">
+          <el-table-column prop="tpyzbds" sortable width="110" label="续保单数">
           </el-table-column>
-          <el-table-column prop="tpyzbje" label="续保金额">
+          <el-table-column prop="tpyzbje" sortable width="110" label="续保金额">
           </el-table-column>
-          <el-table-column prop="tpyzje" label="总承包金额">
+          <el-table-column prop="tpyzje" sortable width="120" label="总承包金额">
           </el-table-column>
 
         </el-table-column>
-        <el-table-column header-align="center" label="其他保险">
-          <el-table-column prop="qtxbds" label="新保单数">
+        <el-table-column label="其他保险">
+          <el-table-column prop="qtxbds" sortable width="110" label="新保单数">
           </el-table-column>
-          <el-table-column prop="qtxbje" label="新保金额">
+          <el-table-column prop="qtxbje" sortable width="110" label="新保金额">
           </el-table-column>
-          <el-table-column prop="qtzbds" label="续保单数">
+          <el-table-column prop="qtzbds" sortable width="110" label="续保单数">
           </el-table-column>
-          <el-table-column prop="qtzbje" label="续保金额">
+          <el-table-column prop="qtzbje" sortable width="110" label="续保金额">
           </el-table-column>
-          <el-table-column prop="qtzje" label="总承包金额">
+          <el-table-column prop="qtzje" sortable width="120" label="总承包金额">
           </el-table-column>
         </el-table-column>
 
@@ -109,6 +113,7 @@ import { nowdaterange } from "../../../servuces/getnowtime";
 export default {
   data () {
     return {
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       tableDatahj: [],
       options: [],
@@ -126,7 +131,13 @@ export default {
   },
   mounted () {
     this.bxcbhbtabledataapi()
-    column(this.tableData)
+    column(this)
+  },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
   },
   methods: {
     getSummaries () {
@@ -276,10 +287,19 @@ export default {
   color: rgb(5, 51, 159);
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .has-gutter th {
   border-color: rgb(70, 91, 117);
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
   background-color: rgb(58, 147, 189);
 }

src/views/IndexView/details/CLKCdetails.vue

@@ -1,95 +1,96 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
     <h1>车辆库存</h1>
 
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="进销存报表" name="first">
         <div class="topbox" style="display: flex;justify-content: space-between;">
-          <div style="width: 60%;"></div>
-          <div class="selec">
+          <div style="flex: 1;"></div>
+          <div class="selec ershi">
             <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
               <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
               </el-option>
             </el-select>
           </div>
-          <div class="timeselec">
+          <div class="timeselec ershi">
             <el-date-picker v-model="value2" type="date" placeholder="选择日期">
             </el-date-picker>
           </div>
-          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value2)">查询</button>
+          <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+            @click="chaxun2(value, value2)">查询</button>
         </div>
-        <div> <el-table ref="myrefs1" :header-cell-style="{
+        <div> <el-table ref="myrefs1" :height="taheight" :header-cell-style="{
           background: 'rgba(30, 111, 200,0.8)',
           color: 'white',
           textAlign: 'center',
           border: '1px rgb(70, 91, 117) solid',
         }" :data="tableData" style="width: 100%">
-            <el-table-column prop="company" label="店面" width="100">
+            <el-table-column prop="company" width="150" fixed label="店面">
             </el-table-column>
-            <el-table-column prop="tqxl" label="同期销量">
+            <el-table-column prop="tqxl" width="110" sortable label="同期销量">
             </el-table-column>
-            <el-table-column prop="ymb" label="月目标">
+            <el-table-column prop="ymb" width="110" sortable label="月目标">
             </el-table-column>
-            <el-table-column prop="rzdj" label="日增定交">
+            <el-table-column prop="rzdj" width="110" sortable label="日增定交">
             </el-table-column>
-            <el-table-column prop="lcdd" label="留存订单">
+            <el-table-column prop="lcdd" width="110" sortable label="留存订单">
             </el-table-column>
-            <el-table-column prop="drjc" label="当日交车">
+            <el-table-column prop="drjc" width="110" sortable label="当日交车">
             </el-table-column>
-            <el-table-column prop="yljc" label="月累交车">
+            <el-table-column prop="yljc" width="110" sortable label="月累交车">
             </el-table-column>
-            <el-table-column prop="wcl" label="完成率">
+            <el-table-column prop="wcl" width="110" sortable label="完成率">
             </el-table-column>
-            <el-table-column prop="hb" label="环比">
+            <el-table-column prop="hb" width="110" sortable label="环比">
             </el-table-column>
-            <el-table-column prop="tqxl_jzdq" label="同期销量(截至当前)">
+            <el-table-column prop="tqxl_jzdq" width="110" sortable label="同期销量(截至当前)">
             </el-table-column>
-            <el-table-column prop="tb" label="同比">
+            <el-table-column prop="tb" width="110" sortable label="同比">
             </el-table-column>
-            <el-table-column prop="kczl" label="库存总量">
+            <el-table-column prop="kczl" width="110" sortable label="库存总量">
             </el-table-column>
-            <el-table-column prop="kcje" label="库存金额">
+            <el-table-column prop="kcje" width="110" sortable label="库存金额">
             </el-table-column>
-            <el-table-column prop="kcsd" label="库存深度">
+            <el-table-column prop="kcsd" width="110" sortable label="库存深度">
             </el-table-column>
-            <el-table-column prop="yplqcltc" label="银票临期车辆台次">
+            <el-table-column prop="yplqcltc" width="110" sortable label="银票临期车辆台次">
             </el-table-column>
-            <el-table-column prop="180zb" label="180天以上库存占比">
+            <el-table-column prop="180zb" width="110" sortable label="180天以上库存占比">
             </el-table-column>
-            <el-table-column prop="180je" label="180以上车辆金额">
+            <el-table-column prop="180je" width="110" sortable label="180以上车辆金额">
             </el-table-column>
-            <el-table-column prop="xjczb" label="现金车占比">
+            <el-table-column prop="xjczb" width="130" sortable label="现金车占比">
             </el-table-column>
-            <el-table-column prop="xjcje" label="现金车金额">
+            <el-table-column prop="xjcje" width="130" sortable label="现金车金额">
             </el-table-column>
-            <el-table-column prop="ymygkcsd" label="月末预估库存深度">
+            <el-table-column prop="ymygkcsd" width="110" sortable label="月末预估库存深度">
             </el-table-column>
 
           </el-table></div>
       </el-tab-pane>
       <el-tab-pane label="分渠道销量统计分析" name="second">
         <div class="topbox" style="display: flex;justify-content: space-between;">
-          <div style="width: 60%;"></div>
-          <div class="selec">
+          <div style="flex: 1;"></div>
+          <div class="selec ershi">
             <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
               <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
               </el-option>
             </el-select>
           </div>
-          <div class="timeselec">
+          <div class="timeselec ershi">
             <el-date-picker v-model="value3" type="month" placeholder="选择日期">
             </el-date-picker>
           </div>
-          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun(value, value3)">查询</button>
+          <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+            @click="chaxun(value, value3)">查询</button>
         </div>
-        <div> <el-table ref="myrefs2" :header-cell-style="{
+        <div> <el-table ref="myrefs2" :height="taheight" :header-cell-style="{
           background: 'rgba(30, 111, 200,0.8)',
           color: 'white',
           textAlign: 'center',
           border: '1px rgb(70, 91, 117) solid',
-        }" :data="tableData2_data" style="width: 100%">
-            <el-table-column v-for="(item, index) in tableData2_title" :prop="item" :label="item" :key="index"
-              width="100">
+        }" :data="tableData2_data">
+            <el-table-column v-for="(item, index) in tableData2_title" :prop="item" :label="item" :key="index">
             </el-table-column>
 
           </el-table></div>
@@ -108,6 +109,7 @@ export default {
   data () {
     return {
       //进销存
+      taheight: window.innerHeight - (window.innerHeight * 0.2),
       tableData: [],
       tableData2_data: [],
       tableData2_title: [],
@@ -115,7 +117,7 @@ export default {
       value: '',
       value2: '',
       value3: '',
-      activeName: 'second'
+      activeName: 'first'
     }
   },
   created () {
@@ -130,15 +132,25 @@ export default {
     this.jxctabledataapi()
     this.fqdxltabledataapi()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.myrefs1.doLayout()
+      this.$refs.myrefs2.doLayout()
+    })
+  },
   methods: {
     refone () {
       const tableref1 = this.$refs.myrefs1.$el
       const tableref2 = this.$refs.myrefs2.$el
-
+      const ref1 = this.$refs.myrefs1
+      const ref2 = this.$refs.myrefs2
       const childone1 = tableref1.querySelectorAll('.el-table__body-wrapper tbody')
       const childone2 = tableref2.querySelectorAll('.el-table__body-wrapper tbody')
-      column(this.tableData, childone1[0])
-      column(this.tableData2_data, childone2[0])
+      // column(this.tableData, childone1[0], this)
+      // column(this.tableData2_data, childone2[0], this)
+      column(this, childone1[0], ref1)
+      column(this, childone2[0], ref2)
 
     },
     chaxun (value, value3) {
@@ -252,6 +264,10 @@ export default {
   border-color: rgb(70, 91, 117);
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
   background-color: rgb(58, 147, 189);
 }

src/views/IndexView/details/CZDetails.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding: 0 50px 0 50px;">
+    <h1>产值统计</h1>
     <!-- <div class="topbox">
       <div class="selec">
         <el-select v-model="value" clearable placeholder="请选择">
@@ -14,70 +15,71 @@
 
 
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" show-summary :height="taheight" :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
       textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="品牌" width="100">
+        <el-table-column prop="company" fixed label="品牌" width="100">
         </el-table-column>
         <el-table-column label="收入类">
-          <el-table-column prop="pjls" label="配件零售" width="100">
+          <el-table-column prop="pjls" sortable label="配件零售" width="110">
           </el-table-column>
           <el-table-column label="首保收入">
-            <el-table-column prop="sbgs" label="首保工时">
+            <el-table-column prop="sbgs" sortable width="110" label="首保工时">
             </el-table-column>
-            <el-table-column prop="sbll" label="首保领料">
+            <el-table-column prop="sbll" sortable width="110" label="首保领料">
             </el-table-column>
           </el-table-column>
           <el-table-column label="索赔收入">
-            <el-table-column prop="spll" label="索赔领料">
+            <el-table-column prop="spll" sortable width="110" label="索赔领料">
             </el-table-column>
-            <el-table-column prop="spgs" label="索赔工时">
+            <el-table-column prop="spgs" sortable width="110" label="索赔工时">
             </el-table-column>
           </el-table-column>
           <el-table-column label="定保收入">
-            <el-table-column prop="dbgs" label="定保工时">
+            <el-table-column prop="dbgs" sortable width="110" label="定保工时">
             </el-table-column>
-            <el-table-column prop="dbll" label="定保领料">
+            <el-table-column prop="dbll" sortable width="110" label="定保领料">
             </el-table-column>
           </el-table-column>
           <el-table-column label="一般维修收入">
-            <el-table-column prop="ybwxll" label="外修领料">
+            <el-table-column prop="ybwxll" sortable width="110" label="外修领料">
             </el-table-column>
-            <el-table-column prop="ybwxgs" label="外修工时">
+            <el-table-column prop="ybwxgs" sortable width="110" label="外修工时">
             </el-table-column>
 
           </el-table-column>
           <el-table-column label="钣喷收入">
-            <el-table-column prop="bpll" label="钣喷材料">
+            <el-table-column prop="bpll" sortable width="110" label="钣喷材料">
             </el-table-column>
-            <el-table-column prop="bpgs" label="钣喷工时">
+            <el-table-column prop="bpgs" sortable width="110" label="钣喷工时">
             </el-table-column>
 
           </el-table-column>
-          <el-table-column prop="jpsr" label="精品">
+          <el-table-column prop="jpsr" sortable label="精品">
 
           </el-table-column>
-          <el-table-column prop="qtsr" label="其他收入">
+          <el-table-column prop="qtsr" sortable label="其他收入">
 
           </el-table-column>
-          <el-table-column prop="srhj" label="收入合计">
+          <el-table-column prop="srhj" sortable label="收入合计">
 
           </el-table-column>
         </el-table-column>
@@ -98,6 +100,7 @@ import { nowdaterange } from "../../../servuces/getnowtime";
 export default {
   data () {
     return {
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       tableDatahj: [],
       options: [],
@@ -114,9 +117,15 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.cztjtabledataapi()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   methods: {
     // handleClick(tab, event) {
     //   console.log(tab, event);
@@ -263,10 +272,20 @@ export default {
   color: white;
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
+
 ::v-deep .el-table td:hover {
   color: rgb(5, 51, 159);
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .has-gutter th {
   border-color: rgb(70, 91, 117);
 }

src/views/IndexView/details/FQYWdetails.vue

@@ -1,77 +1,78 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px 0 50px;">
     <h1>分期业务</h1>
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="month" placeholder="选择日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun(value, value1)">查询</button>
     </div>
 
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" :height="taheight" show-summary :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
       textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="品牌" width="100">
+        <el-table-column prop="company" fixed label="品牌" width="100">
         </el-table-column>
         <el-table-column label="分期单数及渗透率">
-          <el-table-column prop="mbxl" label="目标">
+          <el-table-column prop="mbxl" sortable label="目标">
           </el-table-column>
-          <el-table-column prop="sjxl" label="实际">
+          <el-table-column prop="sjxl" sortable label="实际">
           </el-table-column>
-          <el-table-column prop="fqstl" label="分期渗透率">
+          <el-table-column prop="fqstl" sortable width="120" label="分期渗透率">
           </el-table-column>
-          <el-table-column prop="qntq" label="去年同期">
+          <el-table-column prop="qntq" sortable width="120" label="去年同期">
           </el-table-column>
-          <el-table-column prop="tbcz" label="同比差值">
+          <el-table-column prop="tbcz" sortable width="120" label="同比差值">
           </el-table-column>
-          <el-table-column prop="sysj" label="上月数据">
+          <el-table-column prop="sysj" sortable width="120" label="上月数据">
           </el-table-column>
-          <el-table-column prop="hbcz" label="环比差值">
+          <el-table-column prop="hbcz" sortable width="120" label="环比差值">
           </el-table-column>
         </el-table-column>
         <el-table-column label="高期限占比">
-          <el-table-column prop="lxsl" label="0息">
+          <el-table-column prop="lxsl" sortable label="0息">
           </el-table-column>
-          <el-table-column prop="lxzb" label="0息占比">
+          <el-table-column prop="lxzb" sortable width="120" label="0息占比">
           </el-table-column>
-          <el-table-column prop="36sl" label="36期">
+          <el-table-column prop="36sl" sortable label="36期">
           </el-table-column>
-          <el-table-column prop="36zb" label="占比">
+          <el-table-column prop="36zb" sortable label="占比">
           </el-table-column>
-          <el-table-column prop="48sl" label="48期">
+          <el-table-column prop="48sl" sortable label="48期">
           </el-table-column>
-          <el-table-column prop="48zb" label="占比">
+          <el-table-column prop="48zb" sortable label="占比">
           </el-table-column>
-          <el-table-column prop="60sl" label="60期">
+          <el-table-column prop="60sl" sortable label="60期">
           </el-table-column>
-          <el-table-column prop="60zb" label="占比">
+          <el-table-column prop="60zb" sortable label="占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="佣金收入">
-          <el-table-column prop="zxfwf" label="咨询服务费">
+          <el-table-column prop="zxfwf" sortable width="120" label="咨询服务费">
           </el-table-column>
-          <el-table-column prop="gps" label="GPS费用">
+          <el-table-column prop="gps" sortable width="120" label="GPS费用">
           </el-table-column>
-          <el-table-column prop="gcjrfy" label="工厂金融返佣">
+          <el-table-column prop="gcjrfy" sortable width="130" label="工厂金融返佣">
           </el-table-column>
-          <el-table-column prop="yhqdfy" label="银行渠道返佣">
+          <el-table-column prop="yhqdfy" sortable width="130" label="银行渠道返佣">
           </el-table-column>
-          <el-table-column prop="yjhj" label="收入合计">
+          <el-table-column prop="yjhj" sortable width="120" label="收入合计">
           </el-table-column>
-          <el-table-column prop="yjtby" label="同比月">
+          <el-table-column prop="yjtby" sortable width="120" label="同比月">
           </el-table-column>
-          <el-table-column prop="yjhby" label="环比月">
+          <el-table-column prop="yjhby" sortable width="120" label="环比月">
           </el-table-column>
         </el-table-column>
 
@@ -95,6 +96,7 @@ export default {
           return time.getTime() > Date.now();
         },
       },
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       value1: '',
       tableData: [],
       tableDatahj: [],
@@ -110,8 +112,14 @@ export default {
       this.options = JSON.parse(data)
     }
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.fqywtabledataapi()
   },
   methods: {
@@ -211,13 +219,13 @@ export default {
 }
 
 ::v-deep .el-table__footer {
-  border: none;
+
 
   tr {
-    border: none;
+
 
     td {
-      border: none;
+
       color: white;
       background-color: rgba(30, 111, 200, 0.8);
     }
@@ -248,6 +256,15 @@ export default {
   border-color: rgb(70, 91, 117);
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
   background-color: rgb(58, 147, 189);
 }

src/views/IndexView/details/JCDetails.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
+    <h1>交车排行</h1>
     <!-- <div class="topbox">
       <div class="selec">
         <el-select v-model="value" clearable placeholder="请选择">
@@ -14,22 +15,24 @@
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="销售顾问业绩排名" name="first">
         <div class="topbox" style="display: flex;justify-content: space-between;">
-          <div style="width: 60%;"></div>
-          <div class="selec">
+          <div style="flex: 1;"></div>
+          <div class="selec ershi">
             <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
               <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
               </el-option>
             </el-select>
           </div>
-          <div class="timeselec">
+          <div class="timeselec ershi">
             <el-date-picker v-model="value1" type="month" placeholder="选择日期">
             </el-date-picker>
           </div>
-          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun1(value, value1)">查询</button>
+          <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+            @click="chaxun1(value, value1)">查询</button>
         </div>
-        <div> <el-table ref="myrefs1" :header-cell-style="{
+        <div> <el-table ref="myrefs1" max-height="600" :header-cell-style="{
           background: 'rgba(30, 111, 200,0.8)',
           color: 'white',
+          textAlign: 'center',
           border: '1px rgb(70, 91, 117) solid',
         }" :data="tableData1" style="width: 100%">
             <el-table-column prop="pm" label="排名" width="100">
@@ -50,22 +53,24 @@
       </el-tab-pane>
       <el-tab-pane label="各品牌销量统计" name="second">
         <div class="topbox" style="display: flex;justify-content: space-between;">
-          <div style="width: 60%;"></div>
-          <div class="selec">
+          <div style="flex: 1;"></div>
+          <div class="selec ershi">
             <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
               <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
               </el-option>
             </el-select>
           </div>
-          <div class="timeselec">
+          <div class="timeselec ershi">
             <el-date-picker v-model="value2" type="date" placeholder="选择日期">
             </el-date-picker>
           </div>
-          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value2)">查询</button>
+          <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+            @click="chaxun2(value, value2)">查询</button>
         </div>
-        <div> <el-table ref="myrefs2" :header-cell-style="{
+        <div> <el-table max-height="600" ref="myrefs2" :header-cell-style="{
           background: 'rgba(30, 111, 200,0.8)',
           color: 'white',
+          textAlign: 'center',
           border: '1px rgb(70, 91, 117) solid',
         }" :data="tableData2" style="width: 100%">
             <el-table-column prop="company" label="店名" width="100">
@@ -121,101 +126,103 @@
       </el-tab-pane>
       <el-tab-pane label="销售数据对标" name="third">
         <div class="topbox" style="display: flex;justify-content: space-between;">
-          <div style="width: 60%;"></div>
-          <div class="selec">
+          <div style="flex: 1;"></div>
+          <div class="selec ershi">
             <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
               <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
               </el-option>
             </el-select>
           </div>
-          <div class="timeselec">
+          <div class="timeselec ershi">
             <el-date-picker v-model="value3" type="daterange" range-separator="至" start-placeholder="开始日期"
               end-placeholder="结束日期">
             </el-date-picker>
           </div>
-          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun3(value, value3)">查询</button>
+          <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+            @click="chaxun3(value, value3)">查询</button>
         </div>
-        <div> <el-table ref="myrefs3" show-summary :summary-method="getSummaries" :header-cell-style="{
+        <div> <el-table ref="myrefs3" max-height="600" show-summary :summary-method="getSummaries" :header-cell-style="{
           background: 'rgba(30, 111, 200,0.8)',
           color: 'white',
+          textAlign: 'center',
           border: '1px rgb(70, 91, 117) solid',
-        }" :data="tableData3" style="width: 100%">
-            <el-table-column prop="name" label="门店" width="100">
+        }" :data="tableData" style="width: 100%">
+            <el-table-column prop="name" fixed label="门店" width="100">
             </el-table-column>
             <el-table-column label="新增客流量">
-              <el-table-column prop="visitor_count" label="首次进店">
+              <el-table-column prop="visitor_count" sortable width="110" label="首次进店">
               </el-table-column>
-              <el-table-column prop="call_count" label="首次来店">
+              <el-table-column prop="call_count" sortable width="110" label="首次来店">
               </el-table-column>
-              <el-table-column prop="again_count" label="再次来店">
+              <el-table-column prop="again_count" sortable width="110" label="再次来店">
               </el-table-column>
-              <el-table-column prop="reception_count" label="接待合计">
+              <el-table-column prop="reception_count" sortable width="110" label="接待合计">
               </el-table-column>
-              <el-table-column prop="reception_new_count" label="新增合计">
+              <el-table-column prop="reception_new_count" sortable width="110" label="新增合计">
               </el-table-column>
 
             </el-table-column>
             <el-table-column label="新增建档量">
-              <el-table-column prop="visitor_filled_count" label="进店">
+              <el-table-column prop="visitor_filled_count" sortable label="进店">
               </el-table-column>
-              <el-table-column prop="call_filled_count" label="来电">
+              <el-table-column prop="call_filled_count" sortable label="来电">
               </el-table-column>
-              <el-table-column prop="filled_count" label="合计">
+              <el-table-column prop="filled_count" sortable label="合计">
               </el-table-column>
             </el-table-column>
-            <el-table-column prop="filled_ratio" label="建档率">
+            <el-table-column prop="filled_ratio" sortable width="100" label="建档率">
 
             </el-table-column>
             <el-table-column label="试乘驾驶">
-              <el-table-column prop="experience_count" label="数量">
+              <el-table-column prop="experience_count" sortable label="数量">
               </el-table-column>
-              <el-table-column prop="experience_ratio" label="试乘试驾率">
+              <el-table-column prop="experience_ratio" sortable width="120" label="试乘试驾率">
               </el-table-column>
 
             </el-table-column>
-            <el-table-column prop="again_ratio" label="再次进店率">
+            <el-table-column prop="again_ratio" sortable width="120" label="再次进店率">
 
             </el-table-column>
             <el-table-column label="交强险">
-              <el-table-column prop="policy1_count" label="数量">
+              <el-table-column prop="policy1_count" sortable label="数量">
               </el-table-column>
-              <el-table-column prop="policy1_rate" label="渗透率">
+              <el-table-column prop="policy1_rate" sortable width="100" label="渗透率">
               </el-table-column>
-              <el-table-column prop="policy1_amount" label="金额">
+              <el-table-column prop="policy1_amount" sortable label="金额">
               </el-table-column>
             </el-table-column>
             <el-table-column label="商业险">
-              <el-table-column prop="policy2_count" label="数量">
+              <el-table-column prop="policy2_count" sortable label="数量">
               </el-table-column>
               <!-- //////////////////////////////// -->
-              <el-table-column prop="policy2_rate" label="渗透率">
+              <el-table-column prop="policy2_rate" sortable width="100" label="渗透率">
               </el-table-column>
-              <el-table-column prop="policy2_amount" label="金额">
+              <el-table-column prop="policy2_amount" sortable label="金额">
               </el-table-column>
             </el-table-column>
             <el-table-column label="精品">
-              <el-table-column prop="article_unit_price" label="客单价">
+              <el-table-column prop="article_unit_price" sortable width="100" label="客单价">
               </el-table-column>
-              <el-table-column prop="article_count" label="单数">
+              <el-table-column prop="article_count" sortable label="单数">
               </el-table-column>
-              <el-table-column prop="article_rate" label="渗透率">
+              <el-table-column prop="article_rate" sortable width="100" label="渗透率">
               </el-table-column>
-              <el-table-column prop="article_amount" label="金额">
+              <el-table-column prop="article_amount" sortable label="金额">
               </el-table-column>
             </el-table-column>
-            <el-table-column prop="loan_count" label="分期">
+            <el-table-column prop="loan_count" sortable label="分期">
 
             </el-table-column>
-            <el-table-column prop="advance_count" label="订车数量">
+            <el-table-column prop="advance_count" sortable width="110" label="订车数量">
 
             </el-table-column>
-            <el-table-column prop="unpay_vehicle_count" label="未收银整车">
+            <el-table-column prop="unpay_vehicle_count" sortable width="120" label="未收银整车">
 
             </el-table-column>
-            <el-table-column prop="vehicle_count" label="销售台次">
+            <el-table-column prop="vehicle_count" sortable width="110" label="销售台次">
 
             </el-table-column>
-            <el-table-column prop="loan_ratio" label="分期比例">
+            <el-table-column prop="loan_ratio" sortable width="110" label="分期比例">
 
             </el-table-column>
 
@@ -241,14 +248,15 @@ export default {
     return {
       tableData1: [],
       tableData2: [],
-      tableData3: [],
+      tableData: [],
       tableDatahj: [],
       options: [],
       value: '',
       value1: '',
       value2: '',
       value3: '',
-      activeName: 'second'
+      activeName: 'first',
+      taheight: window.innerHeight - (window.innerHeight * 0.2),
     }
   },
   created () {
@@ -259,9 +267,18 @@ export default {
     }
   },
   mounted () {
-    this.tuodong()
-    // column(this.tableData)
     this.jcphdetailsapi()
+    this.$nextTick(() => {
+      this.tuodong()
+    })
+    // column(this.tableData)
+
+  },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.myrefs3.doLayout()
+    })
   },
   methods: {
     //拖动
@@ -269,13 +286,20 @@ export default {
       const tableref1 = this.$refs.myrefs1.$el
       const tableref2 = this.$refs.myrefs2.$el
       const tableref3 = this.$refs.myrefs3.$el
+      const ref3 = this.$refs.myrefs3
+      const ref2 = this.$refs.myrefs2
+      const ref1 = this.$refs.myrefs1
+
       const childone1 = tableref1.querySelectorAll('.el-table__body-wrapper tbody')
       const childone2 = tableref2.querySelectorAll('.el-table__body-wrapper tbody')
       const childone3 = tableref3.querySelectorAll('.el-table__body-wrapper tbody')
       // console.log(childone[0]);
-      column(this.tableData1, childone1[0])
-      column(this.tableData2, childone2[0])
-      column(this.tableData3, childone3[0])
+      // column(this.tableData1, childone1[0])
+      // column(this.tableData2, childone2[0])
+      // column(this.tableData3, childone3[0], ref3)
+      column(this, childone1[0], ref1)
+      column(this, childone2[0], ref2)
+      column(this, childone3[0], ref3)
 
 
     },
@@ -416,7 +440,7 @@ export default {
       })
       xsdbtabledataInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
         console.log('数据对标', res);
-        this.tableData3 = res.data
+        this.tableData = res.data
         this.tableDatahj = res.footer
       })
     }
@@ -470,6 +494,10 @@ export default {
 
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .el-table {
   background-color: transparent;
   border-color: rgb(70, 91, 117);
@@ -481,6 +509,11 @@ export default {
   color: white;
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .el-table td:hover {
   color: rgb(5, 51, 159);
 }

src/views/IndexView/details/KCFXdetails.vue

@@ -1,98 +1,101 @@
 <template>
-  <div class="KCDetails" style="padding: 50px;">
+  <div class="KCDetails" style="padding:0 50px 0 50px;">
+    <h1>库存分析</h1>
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value1)">查询</button>
     </div>
-    <div>
-      <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div class="station-search">
+      <el-table ref="table" show-summary :height="taheight" :summary-method="getSummaries" :header-cell-style="{
         background: 'rgba(30, 111, 200,0.8)',
         color: 'white',
+        textAlign: 'center',
         border: '1px rgb(70, 91, 117) solid',
       }" row-key="data[index]" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="店名" width="100">
+        <el-table-column prop="company" fixed label="店名" width="100">
         </el-table-column>
         <el-table-column label="库存种类">
-          <el-table-column prop="pjzl" label="配件种类">
+          <el-table-column prop="pjzl" sortable width="110" label="配件种类">
           </el-table-column>
-          <el-table-column prop="jpzl" label="精品种类">
+          <el-table-column prop="jpzl" sortable width="110" label="精品种类">
           </el-table-column>
-          <el-table-column prop="zlhj" label="种类合计">
+          <el-table-column prop="zlhj" sortable width="110" label="种类合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="库存数量">
-          <el-table-column prop="pjsl" label="配件数量">
+          <el-table-column prop="pjsl" sortable width="110" label="配件数量">
           </el-table-column>
-          <el-table-column prop="jpsl" label="精品数量">
+          <el-table-column prop="jpsl" sortable width="110" label="精品数量">
           </el-table-column>
-          <el-table-column prop="slhj" label="数量合计">
+          <el-table-column prop="slhj" sortable width="110" label="数量合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="库存金额(含税)">
-          <el-table-column prop="pjje" label="配件金额">
+          <el-table-column prop="pjje" sortable width="110" label="配件金额">
           </el-table-column>
-          <el-table-column prop="jpje" label="精品金额">
+          <el-table-column prop="jpje" sortable width="110" label="精品金额">
           </el-table-column>
-          <el-table-column prop="jehj" label="金额合计">
+          <el-table-column prop="jehj" sortable width="110" label="金额合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="库存金额(不含税)">
-          <el-table-column prop="pjje2" label="配件金额未税">
+          <el-table-column prop="pjje2" sortable width="100" label="配件金额未税">
           </el-table-column>
-          <el-table-column prop="jpje2" label="精品金额未税">
+          <el-table-column prop="jpje2" sortable width="100" label="精品金额未税">
           </el-table-column>
-          <el-table-column prop="jehj2" label="金额合计未税">
+          <el-table-column prop="jehj2" sortable width="100" label="金额合计未税">
           </el-table-column>
         </el-table-column>
         <el-table-column label="入库金额">
-          <el-table-column prop="pjrk" label="配件入库">
+          <el-table-column prop="pjrk" sortable width="110" label="配件入库">
           </el-table-column>
-          <el-table-column prop="jprk" label="精品入库">
+          <el-table-column prop="jprk" sortable width="110" label="精品入库">
           </el-table-column>
-          <el-table-column prop="rkhj" label="入库合计">
+          <el-table-column prop="rkhj" sortable width="110" label="入库合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="出库金额">
-          <el-table-column prop="pjck" label="配件出库">
+          <el-table-column prop="pjck" sortable width="110" label="配件出库">
           </el-table-column>
-          <el-table-column prop="jpck" label="精品出库">
+          <el-table-column prop="jpck" sortable width="110" label="精品出库">
           </el-table-column>
-          <el-table-column prop="ckhj" label="出库合计">
+          <el-table-column prop="ckhj" sortable width="110" label="出库合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="呆滞数量(90天以上未出库)">
-          <el-table-column prop="pjdzsl" label="配件呆滞数据">
+          <el-table-column prop="pjdzsl" sortable width="130" label="配件呆滞数据">
           </el-table-column>
-          <el-table-column prop="jpdzsl" label="精品呆滞数量">
+          <el-table-column prop="jpdzsl" sortable width="130" label="精品呆滞数量">
           </el-table-column>
-          <el-table-column prop="dzslhj" label="呆滞数量合计">
+          <el-table-column prop="dzslhj" sortable width="130" label="呆滞数量合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="呆滞数量(90天以上未出库)">
-          <el-table-column prop="pjdzje" label="配件呆滞金额">
+          <el-table-column prop="pjdzje" sortable width="130" label="配件呆滞金额">
           </el-table-column>
-          <el-table-column prop="jpdzje" label="精品呆滞金额">
+          <el-table-column prop="jpdzje" sortable width="130" label="精品呆滞金额">
           </el-table-column>
-          <el-table-column prop="dzjehj" label="呆滞金额合计">
+          <el-table-column prop="dzjehj" sortable width="130" label="呆滞金额合计">
           </el-table-column>
         </el-table-column>
         <el-table-column label="呆滞占比">
-          <el-table-column prop="pjdzzb" label="配件呆滞占比">
+          <el-table-column prop="pjdzzb" sortable width="130" label="配件呆滞占比">
           </el-table-column>
-          <el-table-column prop="jpdzzb" label="精品呆滞占">
+          <el-table-column prop="jpdzzb" sortable width="120" label="精品呆滞占">
           </el-table-column>
-          <el-table-column prop="dzzbhj" label="占比合计">
+          <el-table-column prop="dzzbhj" sortable width="110" label="占比合计">
           </el-table-column>
         </el-table-column>
 
@@ -109,6 +112,7 @@ export default {
   data () {
     return {
       //库存分析图表数据
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       tableDatahj: [],
       //公司
@@ -126,10 +130,16 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.kcfxdataapi()
     this.kcfxcompanAPI()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   methods: {
     chaxun2 (value, value1) {
       const strvalue = value.join(',')
@@ -234,11 +244,39 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
 /* .el-table tr {
   background-color: none;
   color: white;
 } */
+/* .station-search .table-head {
+  font-size: 14px !important;
+}
+
+.station-search .el-table .caret-wrapper {
+  position: absolute;
+  top: 2px;
+  right: 0;
+}
+
+.station-search .el-table .cell,
+.el-table th div {
+  padding: 0 !important;
+}
+
+.station-search .el-table tr td .cell {
+  padding: 5px 2px !important;
+}
+
+.station-search .el-table .cell,
+.station-search .el-table th div,
+.station-search .el-table--border td:first-child .cell,
+.station-search .el-table--border th:first-child .cell {
+  padding-left: 0 !important;
+} */
+
+
+
 .el-table .warning-row {
   background-color: rgba(15, 78, 146, 0.827);
 
@@ -258,6 +296,7 @@ export default {
 </style>
 <style scoped lang="scss">
 .KCDetails {
+
   .selec {
     margin: 0 0 20px 0;
   }
@@ -286,12 +325,21 @@ export default {
   border-color: rgb(70, 91, 117);
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .el-table td,
 .building-top .el-table th.is-leaf {
   border-color: rgb(70, 91, 117);
   color: white;
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .el-table td:hover {
   color: rgb(5, 51, 159);
 }

src/views/IndexView/details/KLFXdetails.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding: 0 50px 0 50px;height: 100%;">
     <h1>客流分析</h1>
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 40%;"></div>
+      <div style="flex: 1;"></div>
       <div class="selec">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec" style="margin: 0 20px;">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
@@ -17,42 +17,46 @@
       <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
     </div>
     <div>
-      <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+      <el-table ref="table" :height="taheight" show-summary :summary-method="getSummaries" :header-cell-style="{
         background: 'rgba(30, 111, 200,0.8)',
         color: 'white',
-      }" :row-key="(row, index) => index" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="店面" width="100">
+        textAlign: 'center',
+        border: '1px rgb(70, 91, 117) solid',
+      }" row-key="id" :data="tableData" style="width: 100%;">
+        <el-table-column prop="company" width="150" fixed label="店面">
+          <!-- <template slot-scope="scope">
+            <div class="handle" style="color: red;position: absolute;left: 0;top: 500px;">{{ scope.row.company }}</div>
+          </template> -->
         </el-table-column>
-
-        <el-table-column prop="scjdl" label="首次接待量">
+        <el-table-column prop="scjdl" sortable width="120" label="首次接待量">
         </el-table-column>
-        <el-table-column prop="scldl" label="首次留档量">
+        <el-table-column prop="scldl" sortable width="120" label="首次留档量">
         </el-table-column>
-        <el-table-column prop="ldv" label="留档率">
+        <el-table-column prop="ldv" sortable width="120" label="留档率">
         </el-table-column>
-        <el-table-column prop="sccjl" label="首次成交量">
+        <el-table-column prop="sccjl" sortable width="120" label="首次成交量">
         </el-table-column>
-        <el-table-column prop="skcjl" label="首客成交率">
+        <el-table-column prop="skcjl" sortable width="120" label="首客成交率">
         </el-table-column>
-        <el-table-column prop="ecddl" label="二次到店量">
+        <el-table-column prop="ecddl" sortable width="120" label="二次到店量">
         </el-table-column>
-        <el-table-column prop="eccjl" label="二次成交量">
+        <el-table-column prop="eccjl" sortable width="120" label="二次成交量">
         </el-table-column>
-        <el-table-column prop="ecddbl" label="二次到店率">
+        <el-table-column prop="ecddbl" sortable width="120" label="二次到店率">
         </el-table-column>
-        <el-table-column prop="eccjbl" label="二次成交率">
+        <el-table-column prop="eccjbl" sortable width="120" label="二次成交率">
         </el-table-column>
-        <el-table-column prop="hjcjl" label="合计成交量">
+        <el-table-column prop="hjcjl" sortable width="120" label="合计成交量">
         </el-table-column>
-        <el-table-column prop="lcddl" label="留存订单量">
+        <el-table-column prop="lcddl" sortable width="120" label="留存订单量">
         </el-table-column>
-        <el-table-column prop="ddcjl" label="到店成交率">
+        <el-table-column prop="ddcjl" sortable width="120" label="到店成交率">
         </el-table-column>
-        <el-table-column prop="ssfz" label="接待时长大于30分钟">
+        <el-table-column prop="ssfz" sortable width="180" label="接待时长大于30分钟">
         </el-table-column>
-        <el-table-column prop="wxldl" label="微信留档量">
+        <el-table-column prop="wxldl" sortable width="120" label="微信留档量">
         </el-table-column>
-        <el-table-column prop="wxldbzb" label="微信留档占比">
+        <el-table-column prop="wxldbzb" sortable width="140" label="微信留档占比">
         </el-table-column>
       </el-table>
     </div>
@@ -65,6 +69,7 @@ import { nowdaterange } from "../../../servuces/getnowtime";
 export default {
   data () {
     return {
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       options: [],
       tableDatahj: [],
@@ -81,9 +86,15 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.klfxtabledataapi()
   },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
+
   methods: {
     getSummaries () {
       const keyindex = {
@@ -128,8 +139,9 @@ export default {
         klfxtabledataInfo({ "company_ids": strvalue, "date_begin": strvaluezh[0], 'date_end': strvaluezh[1] }).then(res => {
           // console.log('查询分期业务', res);
           this.tableData = res.data
+          console.log(this.tableData, 1111);
           this.tableDatahj = res.footer
-          console.log(res);
+
         }
         )
       } else {
@@ -163,11 +175,14 @@ export default {
       klfxtabledataInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
         this.tableData = res.data
         this.tableDatahj = res.footer
+        // this.$nextTick(() => {
+        //   column(this.tableData)
+        // })
         // console.log(this.tableDatahj);
         // console.log(this.tableData);
 
       })
-    }
+    },
   }
 }
 </script>
@@ -201,11 +216,7 @@ export default {
 }
 
 ::v-deep .el-table__footer {
-  border: none;
-
   tr {
-    border: none;
-
     td {
       color: white;
       background-color: rgba(30, 111, 200, 0.8);
@@ -218,6 +229,10 @@ export default {
 
 }
 
+::v-deep .el-table .el-table__row {
+  height: 6vh !important;
+}
+
 ::v-deep .el-table {
   background-color: transparent;
   border-color: rgb(70, 91, 117);
@@ -233,6 +248,14 @@ export default {
   color: rgb(5, 51, 159);
 }
 
+// ::v-deep .el-table__body .el-table__cell {
+//   background-color: red !important;
+// }
+
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .has-gutter th {
   border-color: rgb(70, 91, 117);
 

src/views/IndexView/details/KYFXdetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px 0 50px;">
 
     <h1>客源分析</h1>
     <!-- <div class="topbox">
@@ -14,87 +14,147 @@
       </div>
     </div> -->
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" :height="taheight" show-summary :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
-
       textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="门店" width="100">
+        <el-table-column prop="company" fixed label="门店" width="100">
         </el-table-column>
         <el-table-column label="展厅">
-          <el-table-column prop="ztjc" label="交车数">
+          <el-table-column prop="ztjc" sortable width="100" label="交车数">
           </el-table-column>
-          <el-table-column prop="ztzs" label="客户总数">
+          <el-table-column prop="ztzs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="ztcjl" label="成交率">
+          <el-table-column prop="ztcjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="ztcjl" label="成交占比">
+          <el-table-column prop="ztcjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="转介绍">
-          <el-table-column prop="zjsjc" label="交车数">
+          <el-table-column prop="zjsjc" sortable width="100" label="交车数">
           </el-table-column>
-          <el-table-column prop="zjszs" label="客户总数">
+          <el-table-column prop="zjszs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="zjscjl" label="成交率">
+          <el-table-column prop="zjscjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="zjscjl" label="成交占比">
+          <el-table-column prop="zjscjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="网络直销">
-          <el-table-column prop="wlzxjc" label="交车数">
+          <el-table-column prop="wlzxjc" sortable width="100" label="交车数">
           </el-table-column>
-          <el-table-column prop="wlzxzs" label="客户总数">
+          <el-table-column prop="wlzxzs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="wlzxcjl" label="成交率">
+          <el-table-column prop="wlzxcjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="wlzxcjl" label="成交占比">
+          <el-table-column prop="wlzxcjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="车展外拓">
-          <el-table-column prop="czwtjc" label="交车数">
+          <el-table-column prop="czwtjc" sortable width="100" label="交车数">
           </el-table-column>
-          <el-table-column prop="czwtzs" label="客户总数">
+          <el-table-column prop="czwtzs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交率">
+          <el-table-column prop="czwtcjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交占比">
+          <el-table-column prop="czwtcjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="二网大客">
-          <el-table-column prop="ewdkjc" label="交车数">
+          <el-table-column prop="ewdkjc" sortable width="100" label="交车数">
           </el-table-column>
-          <el-table-column prop="czwtzs" label="客户总数">
+          <el-table-column prop="czwtzs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交率">
+          <el-table-column prop="czwtcjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交占比">
+          <el-table-column prop="czwtcjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
-        <el-table-column label="二网大客">
-          <el-table-column prop="ewdkjc" label="交车数">
+        <el-table-column label="厂家">
+          <el-table-column prop="cjjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="cjzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="cjcjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="cjcjl" sortable width="110" label="成交占比">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="懂车帝">
+          <el-table-column prop="dcdjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="dcdzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="dcdcjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="dcdcjl" sortable width="110" label="成交占比">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="抖音">
+          <el-table-column prop="dyjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="dyzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="dycjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="dycjl" sortable width="110" label="成交占比">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="易车网">
+          <el-table-column prop="ycwjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="ycwzs" sortable width="110" label="客户总数">
           </el-table-column>
-          <el-table-column prop="czwtzs" label="客户总数">
+          <el-table-column prop="ycwcjl" sortable width="100" label="成交率">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交率">
+          <el-table-column prop="ycwcjl" sortable width="110" label="成交占比">
           </el-table-column>
-          <el-table-column prop="czwtcjl" label="成交占比">
+        </el-table-column>
+        <el-table-column label="汽车之家">
+          <el-table-column prop="qczjjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="qczjzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="qczjcjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="qczjcjl" sortable width="110" label="成交占比">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="电台广告">
+          <el-table-column prop="dtggjc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="dtggzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="dtggcjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="dtggcjl" sortable width="110" label="成交占比">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="其他网络平台">
+          <el-table-column prop="qtwljc" sortable width="100" label="交车数">
+          </el-table-column>
+          <el-table-column prop="qtwlzs" sortable width="110" label="客户总数">
+          </el-table-column>
+          <el-table-column prop="qtwlcjl" sortable width="100" label="成交率">
+          </el-table-column>
+          <el-table-column prop="qtwlcjl" sortable width="110" label="成交占比">
           </el-table-column>
         </el-table-column>
 
@@ -111,6 +171,7 @@ export default {
   data () {
     return {
       tableData: [],
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableDatahj: [],
       options: [],
       value: '',
@@ -126,9 +187,14 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.kyfxtabledataapi()
   },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   methods: {
     getSummaries () {
       const keyindex = {
@@ -148,6 +214,27 @@ export default {
         'ewdkjc': 17,
         'ewdkzs': 18,
         'ewdkcjl': 19,
+        'cjjc': 21,
+        'cjzs': 22,
+        'cjcjl': 23,
+        'dcdjc': 25,
+        'dcdzs': 26,
+        'dcdcjl': 27,
+        'dyjc': 29,
+        'dyzs': 30,
+        'dycjl': 31,
+        'ycwjc': 33,
+        'ycwzs': 34,
+        'ycwcjl': 35,
+        'qczjjc': 37,
+        'qczjzs': 38,
+        'qczjcjl': 39,
+        'dtggjc': 41,
+        'dtggzs': 42,
+        'dtggcjl': 43,
+        'qtwljc': 45,
+        'qtwlzs': 46,
+        'qtwlcjl': 47,
       }
       const item_value = []
       for (let key in this.tableDatahj) {
@@ -206,9 +293,10 @@ export default {
     kyfxtabledataapi () {
       this.value1 = nowdaterange
       kyfxtabledataInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
-        // console.log('客源分析', res);
+        console.log('客源分析', res);
         this.tableData = res.data
         this.tableDatahj = res.footer
+
       })
     }
   }
@@ -270,6 +358,15 @@ export default {
   color: white;
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .el-table td:hover {
   color: rgb(5, 51, 159);
 }

src/views/IndexView/details/RCCZdetails.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
 
-    <h1>售后经验明细</h1>
+    <h1>售后收入明细</h1>
     <!-- <div class="topbox">
       <div class="selec">
         <el-select v-model="value" clearable placeholder="请选择">
@@ -14,71 +14,73 @@
       </div>
     </div> -->
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="month" placeholder="选择日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" show-summary :height="taheight" :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
+      textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="name" label="店面" width="100">
+        <el-table-column prop="name" fixed label="店面" width="100">
         </el-table-column>
-        <el-table-column text-align="center" label="产值">
-          <el-table-column prop="mbcz" label="目标">
+        <el-table-column label="产值">
+          <el-table-column prop="mbcz" sortable label="目标">
           </el-table-column>
-          <el-table-column prop="sjcz" label="实际达成">
+          <el-table-column prop="sjcz" sortable width="110" label="实际达成">
           </el-table-column>
-          <el-table-column prop="czwcl" label="完成率">
+          <el-table-column prop="czwcl" sortable label="完成率">
           </el-table-column>
-          <el-table-column prop="cztb" label="同比">
+          <el-table-column prop="cztb" sortable label="同比">
           </el-table-column>
-          <el-table-column prop="czhb" label="环比">
+          <el-table-column prop="czhb" sortable label="环比">
           </el-table-column>
 
         </el-table-column>
         <el-table-column label="产值分类">
-          <el-table-column prop="jdmb" label="机电目标">
+          <el-table-column prop="jdmb" sortable width="110" label="机电目标">
           </el-table-column>
-          <el-table-column prop="jdsj" label="实际达成">
+          <el-table-column prop="jdsj" sortable width="110" label="实际达成">
           </el-table-column>
-          <el-table-column prop="spmb" label="索赔目标">
+          <el-table-column prop="spmb" sortable width="110" label="索赔目标">
           </el-table-column>
-          <el-table-column prop="spsj" label="实际达成">
+          <el-table-column prop="spsj" sortable width="110" label="实际达成">
           </el-table-column>
-          <el-table-column prop="bpmb" label="钣喷目标">
+          <el-table-column prop="bpmb" sortable width="110" label="钣喷目标">
           </el-table-column>
-          <el-table-column prop="bpsj" label="实际达成">
+          <el-table-column prop="bpsj" sortable width="110" label="实际达成">
           </el-table-column>
         </el-table-column>
         <el-table-column label="毛利率">
-          <el-table-column prop="jdmlv" label="机电毛利率">
+          <el-table-column prop="jdmlv" sortable width="120" label="机电毛利率">
           </el-table-column>
-          <el-table-column prop="spmlv" label="索赔毛利率">
+          <el-table-column prop="spmlv" sortable width="120" label="索赔毛利率">
           </el-table-column>
-          <el-table-column prop="bpmlv" label="钣喷毛利率">
+          <el-table-column prop="bpmlv" sortable width="120" label="钣喷毛利率">
           </el-table-column>
-          <el-table-column prop="zhmlv" label="综合毛利率">
+          <el-table-column prop="zhmlv" sortable width="120" label="综合毛利率">
           </el-table-column>
-          <el-table-column prop="mlvhb" label="环比">
+          <el-table-column prop="mlvhb" sortable label="环比">
           </el-table-column>
-          <el-table-column prop="mlvtb" label="同比">
+          <el-table-column prop="mlvtb" sortable label="同比">
           </el-table-column>
         </el-table-column>
         <el-table-column label="客单价">
-          <el-table-column prop="jxkdj" label="机修客单价">
+          <el-table-column prop="jxkdj" sortable width="120" label="机修客单价">
           </el-table-column>
-          <el-table-column prop="bpkdj" label="钣喷客单价">
+          <el-table-column prop="bpkdj" sortable width="120" label="钣喷客单价">
           </el-table-column>
         </el-table-column>
 
@@ -96,6 +98,7 @@ export default {
   data () {
     return {
       tableData: [],
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableDatahj: [],
       options: [],
       value: '',
@@ -112,9 +115,15 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.rccztabledataapi()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   methods: {
     chaxun (value, value1) {
       const strvalue = value.join(',')
@@ -248,6 +257,15 @@ export default {
   background-color: rgb(58, 147, 189);
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep #tab-first,
 ::v-deep #tab-second,
 ::v-deep #tab-third,

src/views/IndexView/details/RCTCdetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
 
     <h1>售后进厂台次</h1>
     <!-- <div class="topbox">
@@ -14,49 +14,50 @@
       </div>
     </div> -->
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value1" type="month" placeholder="选择日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun(value, value1)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun(value, value1)">查询</button>
     </div>
-    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
+    <div> <el-table ref="table" show-summary :height="taheight" :summary-method="getSummaries" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
       textAlign: 'center',
       border: '1px rgb(70, 91, 117) solid',
     }" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="店面" width="100">
+        <el-table-column prop="company" fixed label="店面" width="100">
         </el-table-column>
         <el-table-column label="总进厂台次">
-          <el-table-column prop="shmb" label="目标">
+          <el-table-column prop="shmb" sortable label="目标">
           </el-table-column>
-          <el-table-column prop="shsj" label="实际">
+          <el-table-column prop="shsj" sortable label="实际">
           </el-table-column>
-          <el-table-column prop="shwcl" label="完成率">
+          <el-table-column prop="shwcl" sortable label="完成率">
           </el-table-column>
-          <el-table-column prop="shtby" label="同比月">
+          <el-table-column prop="shtby" sortable label="同比月">
           </el-table-column>
-          <el-table-column prop="shhby" label="环比月">
+          <el-table-column prop="shhby" sortable label="环比月">
           </el-table-column>
         </el-table-column>
         <el-table-column label="进厂明细分类">
-          <el-table-column prop="bptc" label="其中钣喷车辆台次">
+          <el-table-column prop="bptc" sortable label="其中钣喷车辆台次">
           </el-table-column>
-          <el-table-column prop="sbtc" label="首次进厂台次">
+          <el-table-column prop="sbtc" sortable label="首次进厂台次">
           </el-table-column>
-          <el-table-column prop="sptc" label="索赔进厂台词">
+          <el-table-column prop="sptc" sortable label="索赔进厂台词">
           </el-table-column>
-          <el-table-column prop="dbtc" label="定保进厂台次">
+          <el-table-column prop="dbtc" sortable label="定保进厂台次">
           </el-table-column>
-          <el-table-column prop="pditc" label="PDI检测">
+          <el-table-column prop="pditc" sortable label="PDI检测">
           </el-table-column>
         </el-table-column>
 
@@ -73,6 +74,7 @@ export default {
   data () {
     return {
       tableData: [],
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableDatahj: [],
       options: [{
         value: '选项1',
@@ -102,9 +104,15 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.rctctabledataapi()
   },
+  updated () {
+
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
   methods: {
     chaxun (value, value1) {
       const strvalue = value.join(',')
@@ -222,6 +230,11 @@ export default {
   color: rgb(5, 51, 159);
 }
 
+::v-deep .gutter {
+  background-color: rgba(30, 111, 200, 0.8) !important;
+  border: 0 !important;
+}
+
 ::v-deep .has-gutter th {
   border-color: rgb(70, 91, 117);
 }
@@ -237,6 +250,10 @@ export default {
   color: #fff; //设置修改默认蚊子颜色，背景颜色，等
 }
 
+::v-deep .el-table__body tr.hover-row>td.el-table__cell {
+  background-color: rgb(58, 147, 189) !important;
+}
+
 ::v-deep .el-tabs__item.is-active {
   color: rgb(37, 99, 214) !important;
 }

src/views/IndexView/details/XSFXmondetails.vue

@@ -1,48 +1,49 @@
 <template>
-  <div class="JCDetails" style="padding: 50px;">
+  <div class="JCDetails" style="padding:0 50px;">
     <h1>销售三级毛利</h1>
     <div class="topbox" style="display: flex;justify-content: space-between;">
-      <div style="width: 60%;"></div>
-      <div class="selec">
+      <div style="flex: 1;"></div>
+      <div class="selec ershi">
         <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
           </el-option>
         </el-select>
       </div>
-      <div class="timeselec">
+      <div class="timeselec ershi">
         <el-date-picker v-model="value2" type="date" placeholder="选择日期">
         </el-date-picker>
       </div>
-      <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value2)">查询</button>
+      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
+        @click="chaxun2(value, value2)">查询</button>
     </div>
-    <div> <el-table :header-cell-style="{
+    <div> <el-table ref="table" :height="taheight" :header-cell-style="{
       background: 'rgba(30, 111, 200,0.8)',
       color: 'white',
       border: '1px rgb(70, 91, 117) solid',
     }" :row-key="(row, index) => index" :data="tableData" style="width: 100%">
-        <el-table-column prop="company" label="品牌" width="100">
+        <el-table-column prop="company" label="品牌">
         </el-table-column>
-        <el-table-column prop="dymb" label="当月目标">
+        <el-table-column prop="dymb" sortable label="当月目标">
         </el-table-column>
-        <el-table-column prop="drxl" label="当日销量">
+        <el-table-column prop="drxl" sortable label="当日销量">
         </el-table-column>
-        <el-table-column prop="drtj" label="当日台均">
+        <el-table-column prop="drtj" sortable label="当日台均">
         </el-table-column>
-        <el-table-column prop="ylxl" label="月累销量">
+        <el-table-column prop="ylxl" sortable label="月累销量">
         </el-table-column>
-        <el-table-column prop="yltj" label="月累台均">
+        <el-table-column prop="yltj" sortable label="月累台均">
         </el-table-column>
-        <el-table-column prop="syzytjml" label="上月整月台均毛利">
+        <el-table-column prop="syzytjml" sortable width="160" label="上月整月台均毛利">
         </el-table-column>
-        <el-table-column prop="hb" label="环比">
+        <el-table-column prop="hb" sortable label="环比">
         </el-table-column>
-        <el-table-column prop="tb" label="同比">
+        <el-table-column prop="tb" sortable label="同比">
         </el-table-column>
-        <el-table-column prop="yltj1" label="月累台均一级毛利(进销存)">
+        <el-table-column prop="yltj1" sortable label="月累台均一级毛利(进销存)">
         </el-table-column>
-        <el-table-column prop="yltj2" label="月累台均二级毛利(返利政策)">
+        <el-table-column prop="yltj2" sortable label="月累台均二级毛利(返利政策)">
         </el-table-column>
-        <el-table-column prop="yltj3" label="月累台均三级毛利(衍生业务)">
+        <el-table-column prop="yltj3" sortable label="月累台均三级毛利(衍生业务)">
         </el-table-column>
       </el-table></div>
   </div>
@@ -54,6 +55,7 @@ import { nowdate } from "../../../servuces/getnowtime";
 export default {
   data () {
     return {
+      taheight: window.innerHeight - (window.innerHeight * 0.15),
       tableData: [],
       options: [],
       value: '',
@@ -69,7 +71,7 @@ export default {
     }
   },
   mounted () {
-    column(this.tableData)
+    column(this)
     this.monthlytabledataapi()
   },
   methods: {

src/views/IndexView/details/tuozhuai.js

@@ -1,44 +1,84 @@
 import Sortable from "sortablejs";
-function sortDatabyid (data, idOrder) {
-  const sortedData = [];
+// function sortDatabyid (data, idOrder) {
+//   const sortedData = [];
 
-  idOrder.forEach((id) => {
-    const item = data.findIndex((dataItem) => dataItem === id);
-    if (item) {
-      sortedData.push(item);
-    }
-  });
-  // this.tableData1 = sortedData;
-  // console.log(this.tableData1);
-  return sortedData
-}
+//   idOrder.forEach((id) => {
+//     const item = data.findIndex((dataItem) => dataItem === id);
+//     if (item) {
+//       sortedData.push(item);
+//     }
+//   });
+//   // this.tableData1 = sortedData;
+//   // console.log(this.tableData1);
+//   return sortedData
+// }
 // 拖拽排序
-export function column (tableData) {
+
+// function aaa () {
+//   console.log("------------------- aaa")
+// }
+
+export function column (fa) {
 
   // 获取对象
   const el = document.querySelector(".el-table__body-wrapper tbody");
   // 设置配置
   var ops = {
+
     // 丝滑拖拽
     animation: 800,
-    onEnd ({ newIndex, oldIndex }) {
-      // 获取拖动后的排序
-      const currRow = tableData.splice(oldIndex, 1)[0];
-      tableData.splice(newIndex, 0, currRow);
-      // 创建新数组
-      const tableArray = [];
-      tableData.forEach((item, index) => {
-        tableArray.push(index);
-
-      });
-      console.log(tableArray);
-      // // 调用排序接口
-      // getSort(tableArray);
-      sortDatabyid(tableData, tableArray);
-
-      console.log(sortDatabyid(tableData, tableArray));
-    },
+    // handle: '.handle',
+    // onEnd ({ newIndex, oldIndex }) {
+    //   // 获取拖动后的排序
+    //   const currRow = tableData.splice(oldIndex, 1)[0];
+    //   tableData.splice(newIndex, 0, currRow);
+    //   // 创建新数组
+    //   const tableArray = [];
+    //   tableData.forEach((item, index) => {
+    //     tableArray.push(index);
+    //   });
+    //   console.log(tableArray);
+
+
+
+
+    //   // // 调用排序接口
+    //   // getSort(tableArray);
+    //   // sortDatabyid(tableData, tableArray);
+
+    //   // console.log(sortDatabyid(tableData, tableArray));
+    // },
+
+    onEnd: function (evt) {
+      let newIndex = evt.newIndex;
+      let oldIndex = evt.oldIndex;
+      let oldData = this.fa.tableData.concat();
+      // let item1 = oldData[oldIndex];
+      // let item2 = oldData[newIndex];
+
+
+      // oldData[newIndex] = item1;
+      // oldData[oldIndex] = item2;
+      const currRow = oldData.splice(oldIndex, 1)[0];
+      oldData.splice(newIndex, 0, currRow);
+
+      console.log(oldData)
+
+      this.fa.tableData = [];
+      //this.fa.tableData = oldData.splice(0, 3);
+      //this.fa.newTableData
+
+      this.fa.$nextTick(() => {
+        this.fa.tableData = oldData;
+      })
+
+      this.fa.$refs.table.clearSelection();
+      this.fa.$refs.table.clearSort();
+      this.fa.$refs.table.clearFilter();
+    }
+
   };
   // 初始化
-  Sortable.create(el, ops);
+  let sortable = new Sortable(el, ops);
+  sortable.fa = fa;
 }

src/views/IndexView/details/tuozhuaitwo.js

@@ -1,44 +1,100 @@
+// import Sortable from "sortablejs";
+// function sortDatabyid (data, idOrder) {
+//   const sortedData = [];
+
+//   idOrder.forEach((id) => {
+//     const item = data.findIndex((dataItem) => dataItem === id);
+//     if (item) {
+//       sortedData.push(item);
+//     }
+//   });
+//   // this.tableData1 = sortedData;
+//   // console.log(this.tableData1);
+//   return sortedData
+// }
+// // 拖拽排序
+// export function column (tableData, res) {
+
+//   // 获取对象
+//   const el = res;
+//   // 设置配置
+//   var ops = {
+//     // 丝滑拖拽
+//     animation: 800,
+//     onEnd ({ newIndex, oldIndex }) {
+//       // 获取拖动后的排序
+//       const currRow = tableData.splice(oldIndex, 1)[0];
+//       tableData.splice(newIndex, 0, currRow);
+//       // 创建新数组
+//       const tableArray = [];
+//       tableData.forEach((item, index) => {
+//         tableArray.push(index);
+
+//       });
+//       console.log(tableArray);
+//       // // 调用排序接口
+//       // getSort(tableArray);
+//       sortDatabyid(tableData, tableArray);
+
+//       console.log(sortDatabyid(tableData, tableArray));
+//     },
+//   };
+//   // 初始化
+//   Sortable.create(el, ops);
+// }
 import Sortable from "sortablejs";
-function sortDatabyid (data, idOrder) {
-  const sortedData = [];
+// function sortDatabyid (data, idOrder) {
+//   const sortedData = [];
 
-  idOrder.forEach((id) => {
-    const item = data.findIndex((dataItem) => dataItem === id);
-    if (item) {
-      sortedData.push(item);
-    }
-  });
-  // this.tableData1 = sortedData;
-  // console.log(this.tableData1);
-  return sortedData
-}
+//   idOrder.forEach((id) => {
+//     const item = data.findIndex((dataItem) => dataItem === id);
+//     if (item) {
+//       sortedData.push(item);
+//     }
+//   });
+//   // this.tableData1 = sortedData;
+//   // console.log(this.tableData1);
+//   return sortedData
+// }
 // 拖拽排序
-export function column (tableData, res) {
-
+export function column (fa, res, ref) {
   // 获取对象
   const el = res;
   // 设置配置
   var ops = {
     // 丝滑拖拽
     animation: 800,
-    onEnd ({ newIndex, oldIndex }) {
-      // 获取拖动后的排序
-      const currRow = tableData.splice(oldIndex, 1)[0];
-      tableData.splice(newIndex, 0, currRow);
-      // 创建新数组
-      const tableArray = [];
-      tableData.forEach((item, index) => {
-        tableArray.push(index);
-
-      });
-      console.log(tableArray);
-      // // 调用排序接口
-      // getSort(tableArray);
-      sortDatabyid(tableData, tableArray);
-
-      console.log(sortDatabyid(tableData, tableArray));
-    },
+    onEnd: function (evt) {
+      let newIndex = evt.newIndex;
+      let oldIndex = evt.oldIndex;
+      let oldData = this.fa.tableData.concat();
+      // let item1 = oldData[oldIndex];
+      // let item2 = oldData[newIndex];
+
+
+      // oldData[newIndex] = item1;
+      // oldData[oldIndex] = item2;
+      const currRow = oldData.splice(oldIndex, 1)[0];
+      oldData.splice(newIndex, 0, currRow);
+
+      console.log(oldData)
+
+      this.fa.tableData = [];
+      //this.fa.tableData = oldData.splice(0, 3);
+      //this.fa.newTableData
+
+      this.fa.$nextTick(() => {
+        this.fa.tableData = oldData;
+      })
+
+      ref.clearSelection();
+      // ref.clearSort();
+      ref.clearFilter();
+      // console.log();
+      // console.log(this.fa.$refs.myrefs1);
+    }
   };
   // 初始化
-  Sortable.create(el, ops);
+  let sortable = new Sortable(el, ops);
+  sortable.fa = fa;
 }

src/views/LoginView.vue

@@ -7,8 +7,8 @@
 
 <script>
 import { settoken } from "../servuces/token";
-import { userloginInfo } from "../servuces/prove";
-import { stringify } from "qs";
+// import { userloginInfo } from "../servuces/prove";
+// import { stringify } from "qs";
 export default {
   data () {
     return {
@@ -43,25 +43,24 @@ export default {
   },
   methods: {
     async submit (form) {
-      // if (form.username == 123 || form.password == 123) {
+      if (form.username == 123 || form.password == 123) {
 
-      //   settoken(123654)
-      //   this.$router.replace('/')
-      //   this.$message.success('登陆成功')
-      // } else {
-      //   this.$message.error('密码错误')
-      // }
+        settoken(123654)
+        this.$router.replace('/')
+        this.$message.success('登陆成功')
+      } else {
+        this.$message.error('密码错误')
+      }
 
-      await userloginInfo(stringify({ username: form.username, password: form.password })).then(res => {
-        console.log(res);
-        if (res.success) {
-          settoken(123654)
-          this.$router.replace('/')
-        } else {
-          alert('res.errors')
-        }
-
-      })
+      // await userloginInfo(stringify({ username: form.username, password: form.password })).then(res => {
+      //   console.log(res);
+      //   if (res.success) {
+      //     settoken(123654)
+      //     this.$router.replace('/')
+      //   } else {
+      //     alert('res.errors')
+      //   }
+      // })
     }
   }
 }