...

src/assets/css/index.css

@@ -0,0 +1,72 @@
+.themetable .el-table--border {
+  border: 1px solid red;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  background-color: #00081d;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__item.is-active {
+  color: black;
+  background: url('../../bargound/tabActive.png') no-repeat;
+  background-size: 98% 92%;
+  border: none;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__active-bar {
+  border: none;
+  background-color: aquamarine;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__item {
+  color: #45a6c4;
+  background: url('../../bargound/tab.png') no-repeat;
+  background-size: 98% 92%;
+  border: none;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__item:hover {
+  color: #11ddf4;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  border-bottom: 1px solid #3c91ae;
+}
+.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__content {
+  padding: 0;
+  background-color: #00081d;
+}
+.el-tabs.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card.el-tabs--top.el-tabs.theme.el-tabs--top.theme.el-tabs--border-card.el-tabs--border-card {
+  border: none;
+}
+.select .el-input__inner {
+  background-color: #133654;
+  border: 1px solid #133654;
+}
+.select .el-input.is-focus .el-input__inner {
+  border: 1px solid #133654;
+}
+.date-style.el-date-picker {
+  width: 190px !important;
+  height: 235px !important;
+  line-height: 0px;
+}
+.date-style.el-date-picker .el-picker-panel__content {
+  width: 155px !important;
+  height: 180px !important;
+}
+.date-style.el-date-picker table {
+  font-size: 11px;
+}
+.date-style.el-date-picker .el-date-picker__header {
+  margin: 5px;
+}
+.date-style.el-date-picker .el-date-picker__header-label {
+  font-size: 11px;
+}
+.date-style.el-date-picker .el-date-picker__header el-date-picker__header-label {
+  font-size: 11px;
+}
+.date-style.el-date-picker .el-date-table td,
+.date-style.el-date-picker .el-date-table td div {
+  height: 22px;
+}
+.date-style.el-date-picker .el-month-table td .cell,
+.date-style.el-date-picker .el-year-table td .cell,
+.date-style.el-date-picker .el-date-table td .cell {
+  width: 100%;
+}

src/assets/iconfont.css

@@ -0,0 +1,53 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1689904918331') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-benyue:before {
+  content: "\e61c";
+}
+
+.icon-shouye:before {
+  content: "\e615";
+}
+
+.icon-youshuangjiantou:before {
+  content: "\e6c9";
+}
+
+.icon-lirun2:before {
+  content: "\e637";
+}
+
+.icon-mima:before {
+  content: "\e653";
+}
+
+.icon-riqi:before {
+  content: "\e612";
+}
+
+.icon-dangtianshichang:before {
+  content: "\e7ee";
+}
+
+.icon-xindiantu:before {
+  content: "\e62d";
+}
+
+.icon-zhuzhuangtu:before {
+  content: "\e6a3";
+}
+
+.icon-cheliangshuliang:before {
+  content: "\e6d1";
+}
+

src/assets/less/css/input.css

@@ -0,0 +1,7 @@
+.select .el-input__inner {
+  background-color: #133654;
+  border: 1px solid #133654;
+}
+.select .el-input.is-focus .el-input__inner {
+  border: 1px solid #133654;
+}

src/assets/less/element/input.less

@@ -0,0 +1,9 @@
+.select{
+    .el-input__inner{
+        background-color: #133654;
+        border: 1px solid #133654;
+    }
+    .el-input.is-focus .el-input__inner{
+        border: 1px solid #133654;
+    }
+}

src/assets/less/element/tab.less

@@ -0,0 +1,41 @@
+.theme {
+  .el-tabs&.el-tabs--top&.el-tabs--border-card{
+   .el-tabs__nav-scroll{
+    background-color: #00081d;
+   }
+   .el-tabs__item.is-active {
+    color: black; //当前标签页颜色
+  background: url('../../bargound/tabActive.png') no-repeat;
+  background-size: 98% 92%;
+    border: none;
+  }
+  .el-tabs__active-bar {
+   border: none;
+   background-color: aquamarine;
+  }
+  .el-tabs__item {
+    color: #45a6c4;//标签页默认颜色\
+    background: url('../../bargound/tab.png') no-repeat;
+    background-size: 98% 92%;
+    border: none;
+  }
+  .el-tabs__item:hover {
+    color: #11ddf4; //鼠标悬停标签页变化的颜色
+  }
+
+  .el-tabs__nav-scroll{
+    border-bottom: 1px solid #3c91ae;
+  }
+  .el-tabs__content{
+   padding: 0;
+   background-color: #00081d;
+  }
+  .el-tabs&.el-tabs--top&.el-tabs--border-card{
+    border: none;
+  }
+  
+  }
+ 
+
+
+  }

src/assets/less/element/table.less

@@ -0,0 +1,5 @@
+.themetable{
+    .el-table--border{
+        border:  1px solid red;
+      }
+}

src/assets/less/index.less

@@ -0,0 +1,4 @@
+@import './element/table.less';
+@import './element/tab.less';
+@import './element/input.less';
+@import './element/timer.less';

src/components/HomeChart/BKFX.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="bkfx" @click="baokefenxi">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;保客分析</div>
+
+    <div id="bkfxchart"></div>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {}
+  },
+  mounted () {
+    this.bkfxchart()
+  },
+  methods: {
+    bkfxchart () {
+      const bkfxchart = document.getElementById('bkfxchart')
+      const myChartbkfx = echarts.init(bkfxchart)
+      const bkfxoption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:{c}({d}%)',
+          backgroundColor: 'black',
+          textStyle: {
+            color: 'inherit',
+          }
+        },
+        legend: {
+          top: '2%',
+          left: 'center',
+          textStyle: {
+            color: 'inherit',
+            fontSize: '12'
+          }
+        },
+        color: ['rgb(188,253,247)', 'rgb(0,204,204)', 'rgb(32,79,253)', 'rgb(103,255,154)', 'rgb(104,117,245)', 'rgb(86,204,255)'],
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center: ['50%', '55%'],
+            // avoidLabelOverlap: false,
+            label: {
+              show: true,
+              // color: (params) => {
+              //   console.log(params);
+              // },
+              color: 'inherit',
+              formatter: (params) => {
+                return params.name + (params.percent + "%")
+              }
+            },
+            // emphasis: {
+            //   label: {
+            //     // show: true,
+            //     fontSize: 40,
+            //     fontWeight: 'bold'
+            //   }
+            // },
+
+            labelLine: {
+              normal: {
+                show: true,
+                length: 15,//引导线长度
+              }
+            },
+            data: [
+              { value: 2254, name: '新增客户' },
+              { value: 1254, name: '无价值客户' },
+              { value: 2123, name: '回归客户' },
+              { value: 1254, name: '重点客户' },
+              { value: 8545, name: '普通客户' },
+              { value: 5254, name: '忠实客户' },
+            ]
+          }
+        ]
+      }
+      bkfxoption && myChartbkfx.setOption(bkfxoption)
+      window.addEventListener('resize', function () {
+        myChartbkfx.resize()
+      })
+    },
+    baokefenxi(){
+      this.$router.push('/baokefenxidetail')
+  }
+  },
+ 
+}
+</script>
+<style scoped lang="scss">
+.bkfx {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+
+
+  #bkfxchart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/HomeChart/BXCBHB.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="bxcbhb" @click="bxcbhb">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;保险承保核保</div>
+    <dv-scroll-board :config="config" style="width:96%;height:82%;text-align: center;margin: 1% auto;" />
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {
+      config: {
+        header: ['/', '新保金额', '续保金额', '总承保金额', '理赔金额', '理赔比例'],
+        data: [
+          ['平安保险', '0', '0', '0', '0', '0'], ['太平洋保险', '570', '867', '687', '687', '687'], ['人寿保险', '0', '0', '0', '0', '0'], ['人保保险', '0', '0', '0', '0', '0'],
+
+        ],
+        rowNum: 4,
+        headerBGC: 'rgb(19,54,84)',
+        headerHeight: 28,
+        align: 'center',
+        evenRowBGC: 'rgb(8,27,43)',
+        oddRowBGC: 'rgb(19,54,84)',
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    bxcbhbchart () {
+      const bxcbhbchart = document.getElementById('bxcbhbchart')
+      const myChartbxcbhb = echarts.init(bxcbhbchart)
+      const bxcbhboption = {}
+      bxcbhboption && myChartbxcbhb.setOption(bxcbhboption)
+    },
+    bxcbhb(){
+      this.$router.push('/baoxianchengbaodetail')
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.bxcbhb {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/HomeChart/CZTJ.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="cztj" >
+    <div class="godetail"  @click="chanzhitongji"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;产值统计</div>
+    <dv-scroll-board :config="config" style="width:94%;height:30%;text-align: center;margin: 12px auto;flex: 1;" />
+    <div class="klfxtwosmallbox">
+      <div class="klfxtwosmallbox1">
+        <p @click="ruchangtaici">入场台次</p>
+        <p><span style="color: rgb(44,214,204);font-size: 1.2rem;">350</span>台</p>
+        <span class="iconfont icon-cheliangshuliang" style="font-size: 2.8rem;"></span>
+      </div>
+      <div class="klfxtwosmallbox2">
+        <p @click="ruchangchanzhi">入厂产值</p>
+        <p><span style="color: rgb(209,177,50);font-size: 1.2rem;">180</span>元</p>
+        <span class="iconfont icon-xindiantu" style="font-size: 3.5rem;"></span>
+      </div>
+    </div>
+    <div id="cztjchart">
+      <div>
+        <p><span>首保</span><span>18</span></p>
+        <p><span>索赔</span><span>54</span></p>
+        <p><span>定保</span><span>64</span></p>
+        <p><span>一般维修</span><span>6</span></p>
+        <p><span>钣喷</span><span>0</span></p>
+
+      </div>
+      <div>
+        <p><span>首保</span><span>1845156</span></p>
+        <p><span>索赔</span><span>54456</span></p>
+        <p><span>定保</span><span>6412</span></p>
+        <p><span>一般维修</span><span>6215</span></p>
+        <p><span>钣喷</span><span>0</span></p>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {
+      config: {
+        header: ['/', '索赔', '一般维修', '定保', '钣喷', '首保'],
+        data: [
+          ['目标', '0', '0', '0', '0', '0'], ['完成', '570', '867', '687', '687', '687'], ['完成率', '0', '0', '0', '0', '0'], [], [], [], [], [],
+
+        ],
+        rowNum: 3,
+        headerBGC: 'rgb(19,54,84)',
+        headerHeight: 28,
+        align: 'center',
+        evenRowBGC: 'rgb(8,27,43)',
+        oddRowBGC: 'rgb(19,54,84)',
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    cztjchart () {
+      const cztjchart = document.getElementById('cztjchart')
+      const myChartcztj = echarts.init(cztjchart)
+      const cztjoption = {}
+      cztjoption && myChartcztj.setOption(cztjoption)
+    },
+    chanzhitongji(){
+      this.$router.push('/chanzhitongjidetail')
+      
+    },
+    ruchangtaici(){
+      this.$router.push('/ruchangtaicidetail')
+
+    },
+    ruchangchanzhi(){
+      this.$router.push('/ruchangchanzhidetail')
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.cztj {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .klfxtwosmallbox {
+    display: flex;
+    justify-content: space-around;
+    font-size: 1rem;
+
+    .klfxtwosmallbox1,
+    .klfxtwosmallbox2 {
+      width: 44%;
+      padding: 2%;
+      border: 1px solid rgb(69, 166, 196);
+      position: relative;
+
+
+      .icon-cheliangshuliang {
+        position: absolute;
+        right: 5%;
+        top: 15%;
+        color: rgb(47, 218, 226);
+      }
+
+      .icon-xindiantu {
+        position: absolute;
+        right: 5%;
+        top: 5%;
+        color: rgb(47, 218, 226);
+      }
+
+    }
+  }
+
+  #cztjchart {
+    width: 100%;
+    height: 34%;
+    display: flex;
+    justify-content: space-around;
+
+    div {
+      width: 46%;
+      height: 100%;
+      background-image: url(../../assets//bargound//chanzhitongjibiankuang.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      padding: 3% 3% 10px 4%;
+      font-size: .6rem;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+
+      p {
+        display: flex;
+        justify-content: space-between;
+
+        span:nth-child(1) {
+          width: 50%;
+
+        }
+
+        span:nth-child(2) {
+          max-width: 40%;
+          min-width: 15%;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/HomeChart/FQYW.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="fqyw" @click="fenqiyewu">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;分期业务</div>
+    <div class="progress">
+      <div class="progress1"><span>高期限</span><el-progress :percentage="gaoqixian" define-back-color="rgb(5,26,53)"
+          text-color="white" :stroke-width="10"></el-progress>
+      </div>
+      <div class="progress2"><span>渗透率</span><el-progress :percentage="shentoulv" define-back-color="rgb(5,26,53)"
+          text-color="white" :stroke-width="10"></el-progress></div>
+    </div>
+    <div id="fqywchart"></div>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {
+      //高期限
+      gaoqixian: 99,
+
+      //渗透率
+      shentoulv: 40,
+      //折线图数据
+      data: [1, 1, 1, 1, 1, 5]
+    }
+  },
+  mounted () {
+    this.fqywchart();
+  },
+  methods: {
+    //折线图数据处理
+    zhexiantu () {
+      var percent = [];
+      var total = 0;
+      for (let i in this.data) {
+        total += this.data[i];
+      }
+      this.data.forEach(item => {
+        var newitem = ((item / total) * 100).toFixed(2)
+        percent.push(newitem);
+      });
+      // console.log(percent.map(Number));
+      return percent.map(Number)
+
+    },
+    fqywchart () {
+      const fqywchart = document.getElementById('fqywchart')
+      const myChartfqyw = echarts.init(fqywchart)
+      const fqywoption = {
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'black',
+          formatter: (params) => {
+            // console.log(params);
+            return params[0].axisValue + ':' + this.data[params[0].dataIndex] + '<br/>' + params[0].data + '%'
+
+            // console.log();
+          },
+          textStyle: {
+            color: 'white'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['全款', '36期', '24期', '18期', '12期', '其他'],
+          axisLine: {
+            lineStyle: {
+              color: 'rgb(70,166,196)'
+            },
+
+          },
+          axisLabel: {
+            color: 'white' // 设置x轴标签字体颜色为黑色
+          },
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          max: 100,//最大值
+          min: 0,
+          interval: 20,
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgb(116,116,116,0.2)'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgb(70,166,196)',
+            }
+          },
+          axisLabel: {
+            color: 'white',
+            show: true,
+            formatter: '{value}%'
+          },
+          axisTick: {
+            show: true
+          }
+        },
+        grid: {
+          left: '10%',
+          top: '10%',
+          bottom: '20%',
+          right: '10%'
+        },
+        series: [
+          {
+            data: this.zhexiantu(),
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: 'yellow'
+              }
+            },
+            lineStyle: {
+              normal: {
+                color: 'rgb(250,211,46)'
+              }
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgb(120,105,35)',
+                    // color: 'rgb(120,105,50)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(60,55,33,.5)',
+                  }
+                ],
+                global: false
+              }
+            }
+          }
+        ]
+      }
+      fqywoption && myChartfqyw.setOption(fqywoption)
+      window.addEventListener('resize', function () {
+        myChartfqyw.resize()
+      })
+    },
+    fenqiyewu(){
+      this.$router.push('/fenqiyewudetail')
+
+    }
+  }
+}
+</script>
+<style>
+.progress1 .el-progress-bar__inner {
+  background-color: unset;
+  background-image: linear-gradient(to right, rgb(49, 155, 102), rgb(33, 140, 156));
+}
+
+.progress2 .el-progress-bar__inner {
+  background-color: unset;
+  background-image: linear-gradient(to right, rgb(60, 160, 100), rgb(250, 200, 50));
+}
+</style>
+<style scoped lang="scss">
+.fqyw {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+
+  .progress {
+    width: 70%;
+    margin: 0 0 0 20%;
+
+    div {
+      position: relative;
+      margin: 2% 0;
+
+      span {
+        position: absolute;
+        left: -20%;
+      }
+    }
+  }
+
+  #fqywchart {
+    width: 100%;
+    height: 70%;
+    flex: 1;
+  }
+}
+</style>

src/components/HomeChart/JCPM.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="jcpm" @click="jiaochepaihang">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;交车排行</div>
+    <dv-scroll-board :config="config" style="width:94%;height:82%;text-align: center;margin: 1% auto;" />
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {
+      config: {
+        header: ['#', '店面', '销售顾问', '集客数量', '订单数量', '成交率'],
+        data: [
+          ['平安保险', '0', '0', '0', '0', '0'], ['太平洋保险', '570', '867', '687', '687', '687'], ['人寿保险', '0', '0', '0', '0', '0'], ['人保保险', '0', '0', '0', '0', '0'],
+
+        ],
+        rowNum: 3,
+        headerBGC: 'rgb(19,54,84)',
+        headerHeight: 30,
+        align: 'center',
+        evenRowBGC: 'rgb(8,27,43)',
+        oddRowBGC: 'rgb(19,54,84)',
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    jcpmchart () {
+      const jcpmchart = document.getElementById('jcpmchart')
+      const myChartjcpm = echarts.init(jcpmchart)
+      const jcpmoption = {}
+      jcpmoption && myChartjcpm.setOption(jcpmoption)
+    },
+    jiaochepaihang(){
+      this.$router.push('/jiaochepaihangdetail')
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.jcpm {
+  width: 100%;
+  height: 100%;
+
+}
+</style>

src/components/HomeChart/KCFX.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="kcfx" @click="kucunfenxi">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;库存分析</div>
+    <div id="kcfxchart"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {}
+  },
+  mounted () {
+    this.kcfxchart()
+  },
+  methods: {
+    kcfxchart () {
+      const kcfxchart = document.getElementById('kcfxchart')
+      const myChartkcfx = echarts.init(kcfxchart)
+      const kcfxoption = {
+        legend: [{
+          data: ['线索总量'],
+          right: '25%',
+          textStyle: {
+            color: 'white' // 设置柱子1的图例文本颜色
+          },
+          itemStyle: {
+            color: 'rgb(216,183,49)' // 设置柱子1的图例文本颜色
+          }
+        },
+        {
+          data: ['精品数量'],
+          right: '6%',
+          textStyle: {
+            color: 'white' // 设置柱子2的图例文本颜色
+          },
+          itemStyle: {
+            color: 'rgb(50,87,250)' // 设置柱子2的图例文本颜色
+          }
+        }
+        ],
+        tooltip: {
+          backgroundColor: 'black',
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          top: '20%',
+          left: '1%',
+          right: '6%',
+          bottom: '6%',
+          containLabel: true
+        },
+        dataset: {
+          source: [
+            // ['product', '线索总量', '交车量'],
+            ['库存金额', 120000, 75000],
+            ['呆滞金额', 150000, 95000],
+            ['本月入库', 60000, 30000],
+            ['本月出库', 90000, 80000],
+          ]
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
+            }
+          },
+          axisLabel: {
+            color: 'white' // 设置x轴标签字体颜色为黑色
+          },
+        },
+        yAxis: {
+          show: true,
+          splitLine: {
+            //去除网格线
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgb(116, 116, 116,0.2)'
+            },
+            show: true
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
+            }
+          },
+          axisLabel: {
+            color: 'white' // 设置x轴标签字体颜色为黑色
+          },
+          axisTick: {
+            //坐标刻度
+            show: true
+          },
+          // boundaryGap: [0, '10%']
+        },
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          {
+            name: '线索总量', type: 'bar', barWidth: 20, barGap: '60%', itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变方向从左上到右下
+                  [
+                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
+                    { offset: 0, color: 'rgb(216,183,49)' }  // 渐变结束颜色
+                  ]
+                )
+              }
+            },
+          },
+          {
+            name: '精品数量', type: 'bar', barWidth: 20, barGap: '60%', itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变方向从左上到右下
+                  [
+                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
+                    { offset: 0, color: 'rgb(50,87,250)' }  // 渐变结束颜色
+                  ]
+                )
+              }
+            },
+          }]
+      }
+      kcfxoption && myChartkcfx.setOption(kcfxoption)
+      window.addEventListener('resize', function () {
+        myChartkcfx.resize();
+      })
+    },
+    kucunfenxi(){
+      this.$router.push('/kucunfenxidetail')
+      
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.kcfx {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .godetail {
+    position: absolute;
+    top: 0;
+  }
+
+  #kcfxchart {
+    width: 100%;
+    height: 100%;
+
+  }
+}
+</style>

src/components/HomeChart/KLFX.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="klfx" @click="keliufenxi">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="" >&nbsp;客流分析</div>
+    <div class="klfxtwosmallbox">
+      <div class="klfxtwosmallbox1">
+        <p>首次进店</p>
+        <p><span style="color: rgb(44,214,204);font-size: 22px;">350</span>人</p>
+      </div>
+      <div class="klfxtwosmallbox2">
+        <p>再次进店</p>
+        <p><span style="color: rgb(209,177,50);font-size: 22px;">180</span>人</p>
+      </div>
+    </div>
+    <div id="klfxchart"></div>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { klfxchartInfo } from "@/servuces/prove";
+
+export default {
+  data () {
+    return {
+       //客流分析数据
+       klfxchartdata: []
+    }
+  },
+  mounted () {
+    this.klfxchart()
+  },
+  methods: {
+    klfxchart () {
+      let dataPie = [
+
+        {
+          value: 10,
+          name: '首次进店'
+        },
+        {
+          value: 80,
+          name: '再次进店'
+        },
+      ];
+      let colorPie = ['#173852', '#0b2036'];
+      let colorWrap = ['#3087d6', '#f6ce54',];
+      let baseDataPie = [],
+        baseDataWrap = [];
+      let total = 0;
+      dataPie.forEach(function (val, idx, arr) {
+        total += val.value;
+      })
+      for (let i = 0; i < dataPie.length; i++) {
+        baseDataPie.push({
+          value: dataPie[i].value,
+          name: dataPie[i].name,
+          itemStyle: {
+            normal: {
+              borderWidth: 6,
+              borderColor: colorPie[i],
+            }
+          }
+        });
+        baseDataWrap.push({
+          value: dataPie[i].value,
+          name: dataPie[i].name,
+          itemStyle: {
+            normal: {
+              color: colorWrap[i],
+              borderWidth: 5,
+              borderColor: colorWrap[i],
+              shadowBlur: 1,
+              shadowColor: 'rgba(7, 132, 250, 0.8)',
+            }
+          }
+        }, {
+          value: 5,
+          name: '',
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderWidth: 5,
+              borderColor: 'transparent',
+
+            }
+          }
+        });
+      }
+      const klfxchart = document.getElementById('klfxchart')
+      const myChartklfx = echarts.init(klfxchart)
+      const klfxoption = {
+        // title: {
+        //   text: '设备总数',
+        //   subtext: '10,225',
+        //   textStyle: {
+        //     color: '#00b5f3',
+        //     fontSize: 14,
+
+        //   },
+        //   // subtextStyle: {
+        //   //   align: 'center',
+        //   //   fontSize: 20,
+        //   //   color: ['#85c7e3'],
+        //   //   fontWeight: 100
+        //   // },
+        //   // x: '1%',
+        //   // y: 'center',
+        // },
+        // grid: {
+        //   left: '1%', // 与容器左侧的距离
+        //   right: '1%', // 与容器右侧的距离
+        //   top: '1%', // 与容器顶部的距离
+        //   bottom: '1%', // 与容器底部的距离
+
+        // },
+        tooltip: {
+          show: true,
+          backgroundColor: 'black',
+          trigger: 'item',
+          formatter: "{b} <br/>占比：{d}%",
+          textStyle: {
+            color: 'inherit',
+          }
+        },
+        legend: {
+          data: ['首次进店', '再次进店',],
+          icon: 'vertical',
+          right: '5%',
+          top: 'center',
+          orient: 'vertical',
+          itemGap: 20,
+          itemWidth: 15,
+          itemHeight: 8,
+          formatter: function (name) {
+
+
+            let target, percent;
+            for (let i = 0; i < dataPie.length; i++) {
+              if (dataPie[i].name === name) {
+                target = dataPie[i].value;
+                percent = ((target / total) * 100).toFixed(2);
+              }
+            }
+            let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}'];
+            return arr.join("\n")
+
+          },
+          textStyle: {
+
+            lineHeight: 15,
+            color: '#f0f4f6',
+            align: 'right',
+            rich: {
+              yellow: {
+                color: '#f6ce54',
+
+
+              },
+              blue: {
+                color: '#4be1ff',
+                align: 'right',
+
+              },
+            }
+
+          },
+        },
+
+        series: [{
+          name: '',
+          type: 'pie',
+          clockWise: false, //顺时加载
+          // hoverAnimation: false, //鼠标移入变大
+          center: ['40%', '50%'],
+          radius: ['80%', '81%'],
+          tooltip: {
+            show: false
+          },
+          label: {
+            normal: {
+              show: true,
+              color: 'inherit'
+            },
+
+          },
+          labelLine: {
+            normal: {
+              show: true,
+
+              length2: 80,
+
+            },
+          },
+          data: baseDataWrap
+        },
+        {
+          name: '',
+          type: 'pie',
+          // color: colorPie,
+          // selectedMode: 'single',
+          radius: ['60%', '61%'],
+          center: ['40%', '50%'],
+          hoverAnimation: false,
+          label: {
+            normal: {
+              show: false,
+            }
+          },
+          data: baseDataPie
+        },
+
+        ]
+      }
+      klfxoption && myChartklfx.setOption(klfxoption)
+      window.addEventListener('resize', function () {
+        myChartklfx.resize()
+      })
+    },
+    keliufenxi(){
+      this.$router.push('/keliufenxidetail')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.klfx {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .klfxtwosmallbox {
+    display: flex;
+    justify-content: space-around;
+
+    .klfxtwosmallbox1,
+    .klfxtwosmallbox2 {
+      width: 48%;
+      padding: 2%;
+      background-image: url(../../assets/bargound/klfxbiankuang.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+  }
+
+  #klfxchart {
+    width: 100%;
+    height: 55%;
+    padding-top: 5px;
+  }
+}
+</style>

src/components/HomeChart/KYFX.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="kyfx" @click="keyuanfenxi">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;客源分析</div>
+    <div id="kyfxchart"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {}
+  },
+  mounted () {
+    this.kyfxchart()
+  },
+  methods: {
+    kyfxchart () {
+      const kyfxchart = document.getElementById('kyfxchart')
+      const myChartkyfx = echarts.init(kyfxchart)
+      const kyfxoption = {
+        legend: [{
+          data: ['线索总量'],
+          right: '25%',
+          textStyle: {
+            color: 'white' // 设置柱子1的图例文本颜色
+          },
+          itemStyle: {
+            color: 'rgb(84,112,198)' // 设置柱子1的图例文本颜色
+          }
+        },
+        {
+          data: ['交车量'],
+          right: '6%',
+          textStyle: {
+            color: 'white' // 设置柱子2的图例文本颜色
+          },
+          itemStyle: {
+            color: 'rgb(145,204,117)' // 设置柱子2的图例文本颜色
+          }
+        }
+        ],
+        tooltip: {
+          backgroundColor: 'black',
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          top: '20%',
+          left: '3%',
+          right: '6%',
+          bottom: '6%',
+          containLabel: true
+        },
+        dataset: {
+          source: [
+            ['product', '线索总量', '交车量'],
+            ['展厅', 43.3, 85.8],
+            ['转介绍', 83.1, 73.4],
+            ['网络直销', 86.4, 65.2],
+            ['车展外拓', 72.4, 53.9],
+            ['二网大客', 72.4, 53.9],
+          ]
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
+            }
+          },
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        yAxis: {
+          show: true,
+
+          splitLine: {
+            //去除网格线
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgb(116, 116, 116,0.2)'
+            },
+            show: true
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
+            }
+          },
+          axisLabel: {
+            color: 'white' // 设置x轴标签字体颜色为黑色
+          },
+          axisTick: {
+            //坐标刻度
+            show: true
+          },
+          // boundaryGap: [0, '10%']
+        },
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          {
+            name: '线索总量', type: 'bar', barWidth: 10, barGap: '80%', itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变方向从左上到右下
+                  [
+                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
+                    { offset: 0, color: 'rgb(84,112,198)' }  // 渐变结束颜色
+                  ]
+                )
+              }
+            },
+          },
+          {
+            name: '交车量', type: 'bar', barWidth: 10, barGap: '80%', itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变方向从左上到右下
+                  [
+                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
+                    { offset: 0, color: 'rgb(145,204,117)' }  // 渐变结束颜色
+                  ]
+                )
+              }
+            },
+          }]
+      }
+      kyfxoption && myChartkyfx.setOption(kyfxoption);
+      window.addEventListener('resize', function () {
+        myChartkyfx.resize();
+      })
+    },
+    keyuanfenxi(){
+      this.$router.push('/keyuanfenxidetail')
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.kyfx {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: space-between;
+  // background-color: red;
+
+  .godetail {
+    position: absolute;
+    top: 0;
+  }
+
+  #kyfxchart {
+    width: 100%;
+    height: 100%;
+    // flex: 1;
+  }
+}
+</style>

src/components/HomeChart/XSFX.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="xsfx" @click="xiaoshoufenxi">
+    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;销售分析</div>
+    <div class="xsfxtwosmallbox">
+      <div class="xsfxtwosmallbox1">
+        <p>当日台次</p>
+        <p class="dangri"><span style="color: rgb(44,214,204);font-size: 22px;">350</span>台</p><span
+          class="iconfont icon-dangtianshichang" style="font-size: 32px;"></span>
+      </div>
+      <div class="xsfxtwosmallbox2">
+        <p>本月累计</p>
+        <p><span style="color: rgb(44,214,204);font-size: 22px;">180</span>台</p>
+        <span class="iconfont icon-benyue" style="font-size: 32px;"></span>
+      </div>
+      <div class="xsfxtwosmallbox2">
+        <p>单车毛利</p>
+        <p><span style="color: rgb(44,214,204);font-size: 22px;">180</span>元</p>
+        <span class="iconfont icon-lirun2" style="font-size: 32px;"></span>
+      </div>
+    </div>
+    <div id="xsfxchart">
+      <div id="xsfxchart1">
+
+      </div>
+      <!-- <p class="p1">完成率</p> -->
+      <div id="xsfxchart2">
+      </div>
+      <!-- <p class="p2">完成率</p> -->
+    </div>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  data () {
+    return {}
+  },
+  mounted () {
+    this.xsfxchart1();
+    this.xsfxchart2()
+  },
+  methods: {
+    xsfxchart1 () {
+      const xsfxchart1 = document.getElementById('xsfxchart1')
+      const myChartxsfx1 = echarts.init(xsfxchart1)
+      var value = 29;
+      const xsfxoption1 = {
+        series: [{
+          type: 'gauge',
+          radius: '100%',
+          title: '111',
+          //splitNumber: 10,
+          min: 10,
+          max: 100,
+          startAngle: 225,
+          endAngle: -45,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: [
+                [1, 'rgba(0,0,0,0)']
+              ]
+            }
+          }, //仪表盘轴线
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.6)',
+              width: 1
+            },
+            length: -4
+          }, //刻度样式
+          splitLine: {
+            show: true,
+            length: -10,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.6)'
+            }
+          }, //分隔线样式
+          axisLabel: {
+            show: false,
+            // distance: -30,
+            // textStyle: {
+            //   color: '#03b7c9',
+            //   fontSize: '14',
+            //   fontWeight: 'bold'
+            // },
+            // formatter: '{value}%'
+          },
+          pointer: {
+            show: 0
+          },
+          detail: {
+            show: 0
+          }
+        },
+
+        // 内侧指针、数值显示
+        {
+          name: '台词环比',
+          type: 'gauge',
+          radius: '75%',
+          startAngle: 225,
+          endAngle: -45,
+          min: 0,
+          max: 100,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 10,
+              color: [
+                [
+                  value / 100, new echarts.graphic.LinearGradient(
+                    0, 0, 1, 0, [{
+                      offset: 0,
+                      color: 'rgb(53,156,100)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgb(255,213,45)',
+                    }
+                  ]
+                  )
+                ],
+                [
+                  1, 'rgb(5,26,53)'
+                ]
+              ]
+            }
+          },
+          axisTick: {
+            show: 0,
+          },
+          splitLine: {
+            show: 0,
+          },
+          axisLabel: {
+            show: 0
+          },
+          pointer: {
+            show: false,
+            length: '105%'
+          },
+          detail: {
+            show: true,
+            offsetCenter: [0, '35%'],
+            textStyle: {
+              fontSize: 20,
+              color: '#fff'
+            },
+            formatter: [
+              '{name|台次环比}' + '',
+              value + '%',
+              '' + '{val|完成率：{value}%}',
+            ].join('\n'),
+            rich: {
+              name: {
+                fontSize: 14,
+                fontWeight: 200,
+                color: '#fff',
+                // fontWeight: 'bold'
+              },
+              val: {
+                color: 'white',
+                align: 'middle',
+                padding: [20, 0, 0, 0]
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: '#03b7c9',
+            }
+          },
+          data: [{
+            value: value
+          }]
+        }
+        ]
+      }
+      xsfxoption1 && myChartxsfx1.setOption(xsfxoption1)
+      window.addEventListener('resize', function () {
+        myChartxsfx1.resize()
+      })
+    },
+    xsfxchart2 () {
+      const xsfxchart2 = document.getElementById('xsfxchart2')
+      const myChartxsfx2 = echarts.init(xsfxchart2)
+      var value = 30;
+      const xsfxoption2 = {
+        series: [{
+          type: 'gauge',
+          radius: '100%',
+
+          //splitNumber: 10,
+          min: 10,
+          max: 100,
+          startAngle: 225,
+          endAngle: -45,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: [
+                [1, 'rgba(0,0,0,0)']
+              ]
+            }
+          }, //仪表盘轴线
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.6)',
+              width: 1
+            },
+            length: -4
+          }, //刻度样式
+          splitLine: {
+            show: true,
+            length: -10,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.6)'
+            }
+          }, //分隔线样式
+          axisLabel: {
+            show: false,
+            // distance: -30,
+            // textStyle: {
+            //   color: '#03b7c9',
+            //   fontSize: '14',
+            //   fontWeight: 'bold'
+            // },
+            // formatter: '{value}%'
+          },
+          pointer: {
+            show: 0
+          },
+          detail: {
+            show: 0
+          }
+        },
+
+        // 内侧指针、数值显示
+        {
+          name: '台词环比',
+          type: 'gauge',
+          radius: '75%',
+          startAngle: 225,
+          endAngle: -45,
+          min: 0,
+          max: 100,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 10,
+              color: [
+                [
+                  value / 100, new echarts.graphic.LinearGradient(
+                    0, 0, 1, 0, [{
+                      offset: 0,
+                      color: 'rgb(53,156,100)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgb(255,213,45)',
+                    }
+                  ]
+                  )
+                ],
+                [
+                  1, 'rgb(5,26,53)'
+                ]
+              ]
+            }
+          },
+          axisTick: {
+            show: 0,
+          },
+          splitLine: {
+            show: 0,
+          },
+          axisLabel: {
+            show: 0
+          },
+          pointer: {
+            show: false,
+            length: '105%'
+          },
+          detail: {
+            show: true,
+            offsetCenter: [0, '30%'],
+            textStyle: {
+              fontSize: 20,
+              color: '#fff'
+            },
+            formatter: [
+              '{name|台次环比}' + '',
+              value + '%',
+              '' + '{val|完成率：{value}%}',
+            ].join('\n'),
+            rich: {
+              name: {
+                fontSize: 14,
+                fontWeight: 200,
+                color: '#fff',
+                // fontWeight: 'bold'
+              },
+              val: {
+                color: 'white',
+                align: 'middle',
+                padding: [20, 0, 0, 0]
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: '#03b7c9',
+            }
+          },
+          data: [{
+            value: value,
+          }]
+        }
+        ]
+      }
+      xsfxoption2 && myChartxsfx2.setOption(xsfxoption2)
+      window.addEventListener('resize', function () {
+        myChartxsfx2.resize()
+      })
+    },
+    xiaoshoufenxi(){
+      this.$router.push('/xiaoshoufenxidetail')
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.xsfx {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .godetail {
+    margin-bottom: 5px;
+  }
+
+  .xsfxtwosmallbox {
+    display: flex;
+    justify-content: space-around;
+
+    .xsfxtwosmallbox1,
+    .xsfxtwosmallbox2 {
+      width: 30%;
+      padding: 10px;
+      border: 1px solid rgb(69, 166, 196);
+      position: relative;
+
+      .iconfont {
+        position: absolute;
+        right: 5%;
+        top: 30%;
+        color: rgb(47, 218, 226);
+      }
+    }
+  }
+
+  #xsfxchart {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex: 1;
+    justify-content: space-evenly;
+    position: relative;
+
+    div {
+      width: 45%;
+      height: 100%;
+      padding-top: 10px;
+
+    }
+
+    // .p1 {
+    //   position: absolute;
+    //   bottom: 3%;
+    //   left: 20%
+    // }
+
+    // .p2 {
+    //   position: absolute;
+    //   bottom: 3%;
+    //   left: 68%
+    // }
+  }
+}
+</style>

src/servuces/axios.js

@@ -0,0 +1 @@
+import axios from 'axios'

src/views/HomeView.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="home">
+    <div class="top">
+      <div class="time"><span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}</div>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="klfx modulbox leftbox1">
+          <KLFX />
+        </div>
+        <div class="xsfx modulbox leftbox2">
+          <XSFX />
+        </div>
+        <div class="fqyw modulbox leftbox3">
+          <FQYW />
+        </div>
+      </div>
+      <div class="middle">
+        <div class="cztj modulbox middlebox1">
+          <CZTJ />
+        </div>
+        <div class="kyfx modulbox middlebox2">
+          <KYFX />
+        </div>
+        <div class="jcpm modulbox middlebox3">
+          <JCPM />
+        </div>
+      </div>
+      <div class="right">
+        <div class="bxcb modulbox rightbox1">
+          <BXCBHB />
+        </div>
+        <div class="kcfx modulbox rightbox2">
+          <KCFX />
+        </div>
+        <div class="bkfx modulbox rightbox3">
+          <BKFX />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import KLFX from "../components/HomeChart/KLFX.vue";
+import XSFX from "../components/HomeChart/XSFX.vue";
+import FQYW from "../components/HomeChart/FQYW.vue";
+import CZTJ from "../components/HomeChart/CZTJ.vue";
+import KYFX from "../components/HomeChart/KYFX.vue";
+import JCPM from "../components/HomeChart/JCPM.vue";
+import BXCBHB from "../components/HomeChart/BXCBHB.vue";
+import KCFX from "../components/HomeChart/KCFX.vue";
+import BKFX from "../components/HomeChart/BKFX.vue"
+
+export default {
+  name: 'HomeView',
+  data () {
+    return {
+      currentTime: '',//当前时间
+    }
+  },
+  mounted () {
+    this.updateTime()//时间
+  },
+  beforeDestroy () {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //更新时间
+    updateTime () {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime()
+      }, 1000);
+    },
+    getCurrentTime () {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    }
+  },
+  components: {
+    KLFX, XSFX, FQYW, CZTJ, KYFX, JCPM, BXCBHB, KCFX, BKFX
+  }
+}
+</script>
+<style scoped lang="scss">
+.home {
+  width: 100%;
+  height: 100vh;
+  color: white;
+  padding: 1% 0 0 0;
+
+  .top {
+    display: flex;
+    height: 7%;
+    justify-content: flex-end;
+    background-image: url(../assets/bargound/title.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+
+    .time {
+      color: rgb(174, 201, 222);
+      margin-right: 2%;
+      font-size: 16px;
+      overflow: hidden;
+      max-width: 15%;
+      white-space: nowrap;
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: 91%;
+    display: flex;
+    justify-content: space-evenly;
+
+    .left {
+      height: 100%;
+      width: 32%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .leftbox1 {
+        width: 100%;
+        height: 32%;
+
+      }
+
+      .leftbox2 {
+        width: 100%;
+        height: 32%;
+        min-height: 250px;
+      }
+
+      .leftbox3 {
+        width: 100%;
+        height: 32%;
+        min-height: 150px;
+      }
+    }
+
+    .middle {
+      height: 100%;
+      width: 32%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+
+      .middlebox1 {
+        height: 48%;
+        min-height: 320px;
+      }
+
+      .middlebox2 {
+        height: 26%;
+        min-height: 130px;
+      }
+
+      .middlebox3 {
+        height: 22%;
+        min-height: 150px;
+      }
+    }
+
+    .right {
+      height: 90vh;
+      width: 32%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .rightbox1 {
+        height: 25%;
+        min-height: 170px;
+      }
+
+      .rightbox2 {
+        height: 29%;
+        min-height: 150px;
+      }
+
+      .rightbox3 {
+        height: 42%;
+        min-height: 280px;
+      }
+    }
+  }
+}
+</style>

src/views/TableDetail/BKFXtable.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <el-tabs type="border-card" class="theme"  style="overflow: auto;">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >保客分析</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="company_ids"
+                multiple
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="——"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          fixed
+          stripe
+          :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width:3000px;"
+          max-height="750">
+          
+          
+        >
+          <el-table-column prop="company" fixed label="门店"> </el-table-column>
+          <el-table-column prop="khzs" label="客户总数"> </el-table-column>
+          <el-table-column prop="bykh" label="保有客户"> </el-table-column>
+          <el-table-column prop="name" label="无价值(2年以上未回厂)">
+            <el-table-column prop="wjzkh" label="数量"> </el-table-column>
+            <el-table-column prop="wjzzb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="回归客户">
+            <el-table-column prop="hgkh" label="数量"> </el-table-column>
+            <el-table-column prop="hgzb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="重点客户">
+            <el-table-column prop="zdkh" label="数量"> </el-table-column>
+            <el-table-column prop="zdzb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="普通客户">
+            <el-table-column prop="ptkh" label="数量"> </el-table-column>
+            <el-table-column prop="ptzb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="新增客户">
+            <el-table-column prop="xzkh" label="数量"> </el-table-column>
+            <el-table-column prop="xzzb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="新建档客户">
+            <el-table-column prop="xjdkh" label="数量"> </el-table-column>
+            <el-table-column prop="xjdzb" label="占比"> </el-table-column>
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+import { number } from "echarts";
+export default {
+  data() {
+    return {
+      company_ids:[],
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01", "2023-08-08"],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+   
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/bkfx_detail", {
+          params: {
+            company_ids:this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1],
+          },
+       
+        })
+        .then((res) => {
+          // console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    searchBtn() {
+      this.getTableDate();
+      console.log(this.company_ids );
+    },
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+:deep(.el-table__fixed::before ){
+  background-color: transparent;
+}
+:deep(tr.hover-row>td.el-table__cell){
+  background-color: transparent;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+ 
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+
+/* 边框颜色 */
+:deep([data-v-76df8a39].el-table td) {
+    border: 1px solid #102b47;
+    border-right: none !important;
+}
+/* 合计 */
+
+:deep(.el-table__fixed-footer-wrapper tbody td.el-table__cell ){
+   border: none;
+    background-color: rgb(2, 62, 2);
+    color: #606266;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+
+</style>

src/views/TableDetail/BXCBtable.vue

@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >保险承保</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="——"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px"
+          max-height="800"
+        >
+          <el-table-column prop="name" fixed label="店面"> </el-table-column>
+          <el-table-column prop="name" label="平安保险">
+            <el-table-column prop="paxbds" label="新保单数"> </el-table-column>
+            <el-table-column prop="paxbje" label="新保金额"> </el-table-column>
+            <el-table-column prop="pazbds" label="续保单数"> </el-table-column>
+            <el-table-column prop="pazbje" label="续保金额"> </el-table-column>
+            <el-table-column prop="pazje" label="总承包金额">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column prop="name" label="人寿保险">
+            <el-table-column prop="rsxbds" label="新保单数"> </el-table-column>
+            <el-table-column prop="rsxbje" label="新保金额"> </el-table-column>
+            <el-table-column prop="rszbds" label="续保单数"> </el-table-column>
+            <el-table-column prop="rszbje" label="续保金额"> </el-table-column>
+            <el-table-column prop="rszje" label="总承包金额">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column prop="name" label="人保保险">
+            <el-table-column prop="rbxbds" label="新保单数"> </el-table-column>
+            <el-table-column prop="rbxbje" label="新保金额"> </el-table-column>
+            <el-table-column prop="rbzbds" label="续保单数"> </el-table-column>
+            <el-table-column prop="rbzbje" label="续保金额"> </el-table-column>
+            <el-table-column prop="rbzje" label="总承包金额">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column prop="name" label="*****保险">
+            <el-table-column prop="qtxbds" label="新保单数"> </el-table-column>
+            <el-table-column prop="qtxbje" label="新保金额"> </el-table-column>
+            <el-table-column prop="qtzbds" label="续保单数"> </el-table-column>
+            <el-table-column prop="qtzbje" label="续保金额"> </el-table-column>
+            <el-table-column prop="qtzje" label="总承包金额">
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      company_ids:[],
+
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01", "2023-08-08"],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/bxcb_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1],
+          },
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    searchBtn() {
+      this.getTableDate()
+      
+    },
+  },
+};
+</script>
+
+<style scoped="scop">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+:deep(.el-table__fixed::before ){
+  background-color: transparent;
+}
+:deep(tr.hover-row>td.el-table__cell){
+  background-color: transparent;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+:deep(.el-table__footer-wrapper td.el-table__cell) {
+    border-top: transparent;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+ 
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+
+/* 边框颜色 */
+:deep([data-v-76df8a39].el-table td) {
+    border: 1px solid #102b47;
+    border-right: none !important;
+}
+/* 合计 */
+
+:deep(.el-table__fixed-footer-wrapper tbody td.el-table__cell ){
+   border: none;
+    background-color: rgb(2, 62, 2);
+    color: #606266;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+
+</style>

src/views/TableDetail/CLKCtable.vue

@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+      <div>
+        <p>
+          <img src="../../assets/bargound/data.png" alt="" /><span class="kccl"
+            >库存车辆</span
+          >
+        </p>
+      </div>
+      <el-tabs type="border-card" class="theme">
+        <el-tab-pane label="进销存报表">
+          <div
+            style="display: flex; justify-content: flex-end; margin-top: 10px"
+          >
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="value"
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </div>
+
+            <el-button
+              @click="clearFilter"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+
+          <!-- 表格 -->
+          <el-table
+            class="exporttable"
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{
+              'text-align': 'center',
+              background: '#03111c',
+            }"
+            :cell-style="{ 'text-align': 'center' }"
+            show-summary
+            style="width: 100%; margin: 1px"
+          >
+            <el-table-column prop="id" label="店面"> </el-table-column>
+            <el-table-column prop="name" label="同期销量"> </el-table-column>
+            <el-table-column prop="amount1" label="月目标"> </el-table-column>
+            <el-table-column prop="amount2" label="日赠定交"> </el-table-column>
+            <el-table-column prop="amount3" label="留存订单"> </el-table-column>
+            <el-table-column prop="amount4" label="当日交车"> </el-table-column>
+            <el-table-column prop="amount5" label="月累交车"> </el-table-column>
+            <el-table-column prop="amount6" label="完成率"> </el-table-column>
+            <el-table-column prop="amount6" label="环比"> </el-table-column>
+            <el-table-column prop="amount7" label="同期销量(截止当前)">
+            </el-table-column>
+            <el-table-column prop="amount6" label="同比"> </el-table-column>
+            <el-table-column prop="amount7" label="库存金额"> </el-table-column>
+            <el-table-column prop="amount7" label="库存深度"> </el-table-column>
+            <el-table-column prop="amount7" label="库存深度"> </el-table-column>
+            <el-table-column prop="amount7" label="银票临期车辆台次">
+            </el-table-column>
+            <el-table-column prop="amount7" label="180天以上库存占比">
+            </el-table-column>
+            <el-table-column prop="amount7" label="180以上库存占比">
+            </el-table-column>
+            <el-table-column prop="amount7" label="180以上车辆金额">
+            </el-table-column>
+            <el-table-column prop="amount7" label="现金车占比">
+            </el-table-column>
+            <el-table-column prop="amount7" label="现车金额"> </el-table-column>
+            <el-table-column prop="amount7" label="月末预估库存深度">
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <el-tab-pane label=" 分渠道销量统计分析">
+          <div
+            style="display: flex; justify-content: flex-end; margin-top: 10px"
+          >
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="value"
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="——"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </div>
+
+            <el-button
+              @click="clearFilter"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+
+          <!-- 表格 -->
+          <el-table
+            class="exporttable"
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{
+              'text-align': 'center',
+              background: '#03111c',
+            }"
+            :cell-style="{ 'text-align': 'center' }"
+            show-summary
+            style="width: 100%; margin: 1px"
+          >
+            <el-table-column prop="id" label="店面"> </el-table-column>
+            <el-table-column prop="name" label="无锡"> </el-table-column>
+            <el-table-column prop="amount1" label="许昌"> </el-table-column>
+            <el-table-column prop="amount2" label="郑州"> </el-table-column>
+            <el-table-column prop="amount3" label="开封"> </el-table-column>
+            <el-table-column prop="amount4" label="——"> </el-table-column>
+            <el-table-column prop="amount5" label="——"> </el-table-column>
+            <el-table-column prop="amount6" label="——"> </el-table-column>
+            <el-table-column prop="amount6" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount6" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+            <el-table-column prop="amount7" label="——"> </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01", "2023-08-03"],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //指定列求和
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/CZTJtable.vue

@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >产值统计</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="——"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{
+            'text-align': 'center',
+            background: '#03111c',
+          }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px"
+        >
+          <el-table-column prop="company" label="品牌"> </el-table-column>
+          <el-table-column  label="收入类">
+            <el-table-column prop="pjls" sortable label="零件配售"> </el-table-column>
+          </el-table-column>
+          <el-table-column  label="首保收入">
+            <el-table-column prop="sbgs" label="首保工时"> </el-table-column>
+            <el-table-column prop="sbll" label="首保领料"> </el-table-column>
+          </el-table-column>
+
+          <el-table-column  label="索赔收入">
+            <el-table-column prop="spll" label="索赔领料"> </el-table-column>
+            <el-table-column prop="spgs" label="索赔工时"> </el-table-column>
+          </el-table-column>
+          <el-table-column  label="定保收入">
+            <el-table-column prop="dbgs" label="定保工时"> </el-table-column>
+            <el-table-column prop="dbll" label="定保领料"> </el-table-column>
+          </el-table-column>
+          <el-table-column  label="一般维修收入">
+            <el-table-column prop="ybwxll" label="外修领料"> </el-table-column>
+            <el-table-column prop="ybwxgs" label="外修工时"> </el-table-column>
+          </el-table-column>
+          <el-table-column label="钣喷收入">
+            <el-table-column prop="bpll" label="钣喷材料"> </el-table-column>
+            <el-table-column prop="bpgs" label="钣喷工时"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="jpsr" label="精品"> </el-table-column>
+          <el-table-column prop="qtsr" label="其他收入"> </el-table-column>
+          <el-table-column prop="srhj" label="收入合计"> </el-table-column>
+        </el-table>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      company_ids:[],
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01", "2023-08-03"],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/shsr_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1],
+          },
+        })
+        .then((res) => {
+          console.log("--------", res.data.rows);
+          this.tableData = res.data.rows;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          console.log(ret);
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    
+    searchBtn() {
+      this.getTableDate()
+    },
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/FQYWtable.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >分期业务</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="company_ids"
+                multiple
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="month"
+                placeholder="2023-08"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >搜索</el-button
+            >
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          fixed
+          fit
+          stripe
+          :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 2000px; margin: 1px"
+        >
+          <el-table-column prop="company" label="品牌"> </el-table-column>
+          <el-table-column label="分期单数及渗透率">
+            <el-table-column prop="mbxl" label="目标"> </el-table-column>
+            <el-table-column prop="sjxl" label="实际"> </el-table-column>
+            <el-table-column prop="fqstl" label="分期渗透率"> </el-table-column>
+            <el-table-column prop="qntq" label="去年同期"> </el-table-column>
+            <el-table-column prop="tbcz" label="同比差值"> </el-table-column>
+            <el-table-column prop="sysj" label="上月数据"> </el-table-column>
+            <el-table-column prop="hbcz" label="环比差值"> </el-table-column>
+          </el-table-column>
+          <el-table-column label="高期限占比">
+            <el-table-column prop="lxsl" label="0息"> </el-table-column>
+            <el-table-column prop="lxzb" label="0息占比"> </el-table-column>
+            <el-table-column prop="36sl" label="36期"> </el-table-column>
+            <el-table-column prop="36zb" label="占比"> </el-table-column>
+            <el-table-column prop="48sl" label="48期"> </el-table-column>
+            <el-table-column prop="48zb" label="占比"> </el-table-column>
+            <el-table-column prop="60sl" label="60期"> </el-table-column>
+            <el-table-column prop="60zb" label="占比"> </el-table-column>
+          </el-table-column>
+          <el-table-column label="佣金收入">
+            <el-table-column prop="zxfwf" label="咨询服务费"> </el-table-column>
+            <el-table-column prop="gps" label="GPS费用"> </el-table-column>
+            <el-table-column prop="gcjrfy" label="工厂金融返佣">
+            </el-table-column>
+            <el-table-column prop="yhqdfy" label="银行渠道返佣">
+            </el-table-column>
+            <el-table-column prop="sysj" label="收入合计"></el-table-column>
+            <el-table-column prop="yjtby" label="同比月"></el-table-column>
+            <el-table-column prop="yjhb" label="环比"></el-table-column>
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      company_ids: [],
+
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08"],
+    };
+  },
+  computed: {
+    Riqi : function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+
+      return `${year}-${month}-${strDate}`;
+    }
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+    console.log(this.Riqi);
+    this.value1 =this.Riqi;
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/fqyx_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_month: this.value1[0],
+          },
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    searchBtn() {
+      this.getTableDate();
+    },
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+/* 日期 */
+:deep(.el-input__inner) {
+  background-color: #133654;
+  border: none;
+  color: #ffffffc1;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+/* 日期表 */
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/JCPHtable.vue

@@ -0,0 +1,553 @@
+<template>
+  <div>
+    <!-- 标题 -->
+
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >交车排行</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="company_ids"
+                multiple
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="month"
+                placeholder="2023-08"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >查询</el-button
+            >
+          </div>
+        </div>
+        <!-- 表格 -->
+        <el-tabs type="border-card" class="theme">
+          <el-tab-pane label="销售顾问业绩排名" >
+            <el-table
+              class="exporttable"
+              :data="tableDataOne"
+              border
+              stripe
+              :header-cell-style="{
+                'text-align': 'center',
+                background: '#03111c',
+              }"
+              :cell-style="{ 'text-align': 'center' }"
+              style="width: 100%; margin: 1px"
+            >
+              <el-table-column prop="pm" label="排名"> </el-table-column>
+              <el-table-column prop="company" label="店面"> </el-table-column>
+              <el-table-column prop="xsgw" label="销售顾问"> </el-table-column>
+
+              <el-table-column prop="xzjk" label="新增集客"> </el-table-column>
+              <el-table-column prop="xzdd" label="新增订单"> </el-table-column>
+              <el-table-column prop="cjl" label="成交率"> </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="各品牌销售统计" >
+            <!-- 表格 -->
+            <el-table
+              class="exporttable"
+              :data="tableDataTwo"
+              border
+              stripe
+              :header-cell-style="{
+                'text-align': 'center',
+                background: '#03111c',
+              }"
+              :cell-style="{ 'text-align': 'center' }"
+              style="width: 100%; margin: 1px"
+            >
+              <el-table-column prop="company" label="店名"> </el-table-column>
+              <el-table-column prop="name" label="">
+                <el-table-column prop="pp" label="品牌"> </el-table-column>
+              </el-table-column>
+              <el-table-column prop="amount1" label="周度销量">
+                <el-table-column prop="week1" label="1"> </el-table-column>
+                <el-table-column prop="week2" label="2"> </el-table-column>
+                <el-table-column prop="week3" label="3"> </el-table-column>
+                <el-table-column prop="week4" label="4"> </el-table-column>
+                <el-table-column prop="week5" label="5"> </el-table-column>
+                <el-table-column prop="week6" label="6"> </el-table-column>
+                <el-table-column prop="week7" label="7"> </el-table-column>
+                <el-table-column label="环比">
+                  <el-table-column prop="week_hb_1" label=""> </el-table-column>
+                  <el-table-column prop="week_hb_2" label=""> </el-table-column>
+                </el-table-column>
+              </el-table-column>
+
+              <el-table-column prop="amount6" label="月销量">
+                <el-table-column prop="dylj" label="当月累计">
+                </el-table-column>
+                <el-table-column prop="sysj" label="上月数据">
+                </el-table-column>
+                <el-table-column prop="amount7" label="环比">
+                  <el-table-column prop="month_hb_1" label="">
+                  </el-table-column>
+                  <el-table-column prop="month_hb_2" label="">
+                  </el-table-column>
+                </el-table-column>
+                <el-table-column prop="month_tb" label="同比">
+                </el-table-column>
+              </el-table-column>
+              <el-table-column prop="amount7" label="">
+                <el-table-column prop="bymb" label="本月目标">
+                </el-table-column>
+                <el-table-column prop="wcl" label="完成率"> </el-table-column>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <!-- <el-tab-pane label="销售数据对标">
+       
+
+          表格
+          <el-table
+            class="exporttable"
+            :data="tableData"
+            border
+            show-summary
+            stripe
+            :header-cell-style="{
+              'text-align': 'center',
+              background: '#03111c'
+            }"
+            :cell-style="{ 'text-align': 'center' }"
+           
+            style="width: 100%; margin: 1px">
+            <el-table-column
+              prop="id"
+              label="店名">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="新增客流量">
+              <el-table-column
+              prop="amount1"
+              label="首次进店">
+            </el-table-column>
+            <el-table-column
+              prop="amount1"
+              label="首次来店">
+            </el-table-column>
+            <el-table-column
+              prop="amount1"
+              label="再次来店">
+            </el-table-column>
+            <el-table-column
+              prop="amount1"
+              label="接待合计">
+            </el-table-column>
+            <el-table-column
+              prop="amount1"
+              label="新增合计">
+            </el-table-column>
+           
+            
+            </el-table-column>
+            <el-table-column
+              prop="amount1"
+              label="新增建档量">
+              <el-table-column
+              prop="amount2"
+              label="进店">
+            </el-table-column>
+            <el-table-column
+              prop="amount3"
+              label="来店">
+            </el-table-column>
+            <el-table-column
+              prop="amount4"
+              label="合计">
+            </el-table-column>
+           
+            </el-table-column>
+            <el-table-column
+              prop="amount4"
+              label="建档率">
+            </el-table-column>
+            <el-table-column
+              prop="amount6"
+              label="试乘驾驶">
+              <el-table-column
+              prop="amount7"
+              label="数量">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="试乘试驾率">
+            </el-table-column>
+           
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="再次进店率">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="交强险">
+              <el-table-column
+              prop="amount7"
+              label="数量">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="渗透率">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="金额">
+            </el-table-column>
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="商业险">
+              <el-table-column
+              prop="amount7"
+              label="数量">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="渗透率">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="金额">
+            </el-table-column>
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="精品">
+              <el-table-column
+              prop="amount7"
+              label="客单价">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="单数">
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="渗透率">
+            </el-table-column>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane> -->
+        </el-tabs>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+import { number } from "echarts";
+export default {
+  data() {
+    return {
+      
+      company_ids: [],
+      currentTime: "",
+      value: "",
+
+      //表格各类属性
+      tableDataOne: [],
+      tableDataTwo: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01"],
+    };
+  },
+  computed: {
+    Riqi: function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+     
+      return `${year}-${month}`;
+    },
+    nianyue: function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+     
+      return `${year}-${month}-${strDate}`;
+    },
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDateOne(); //开始获取表格
+    this.getTableDateTwo(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+    console.log(this.Riqi);
+    this.value1 = this.Riqi;
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //表格接口数据
+    getTableDateOne() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/jcpm_detail/xsgwyjpm", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_month: this.Riqi,
+          },
+        })
+        .then((res) => {
+          console.log("--------11111", res.data.data);
+          this.tableDataOne = res.data.data;
+        });
+    },
+    getTableDateTwo() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/jcpm_detail/gppxltj", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_date: this.nianyue,
+          },
+        })
+        .then((res) => {
+          console.log("--------2222", res.data);
+          this.tableDataTwo = res.data.data;
+        });
+    },
+    // getTableDateThree() {
+    //   axios
+    //     .get("http://192.168.2.55:8022/plugins/lhyt/jcpm_detail/fcxxltj", {
+    //       params: {
+    //         company_ids:this.company_ids,
+    //         date_begin: this.value1[0],
+    //         date_end: this.value1[1],
+    //       },
+
+    //     })
+    //     .then((res) => {
+    //       console.log("--------33333",res);
+    //       this.tableData = res.data.data;
+    //     });
+    // },
+    //表格接口数据
+
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    searchBtn() {
+      this.getTableDateOne();
+      console.log(this.company_ids);
+    },
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+/* 日期表 */
+:deep(.el-input__inner) {
+  background-color: #133654;
+  border: none;
+  color: #ffffffc1;
+}
+
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/KCFXtable.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >库存分析</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="company_ids"
+                multiple
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="——"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black">查询
+            </el-button>
+          </div>
+        </div>
+
+       
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{
+            'text-align': 'center',
+            background: '#03111c',
+          }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px"
+        >
+          <el-table-column prop="company" label="品牌"> </el-table-column>
+          <el-table-column  label="库存种类">
+            <el-table-column prop="pjzl" label="配件种类"> </el-table-column>
+            <el-table-column prop="jpzl" label="精品种类"> </el-table-column>
+            <el-table-column prop="zlhj" label="种类合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column label="库存数量">
+            <el-table-column prop="pjsl" label="配件数量"> </el-table-column>
+            <el-table-column prop="jpsl" label="精品数量"> </el-table-column>
+            <el-table-column prop="slhj" label="数量合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount2" label="库存金额(含税)">
+            <el-table-column prop="pjje" label="配件金额"> </el-table-column>
+            <el-table-column prop="jpje" label="精品金额"> </el-table-column>
+            <el-table-column prop="jehj" label="金额合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount3" label="">
+            <el-table-column prop="pjje2" label="配件金额未税"> </el-table-column>
+            <el-table-column prop="jpje2" label="精品金额未税"> </el-table-column>
+            <el-table-column prop="jehj2" label="金额合计未税"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount4" label="入库金额">
+            <el-table-column prop="pjrk" label="配件入库"> </el-table-column>
+            <el-table-column prop="jprk" label="精品入库"> </el-table-column>
+            <el-table-column prop="rkhj" label="入库合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount5" label="出库金额">
+            <el-table-column prop="pjck" label="配件出库"> </el-table-column>
+            <el-table-column prop="jpck" label="精品出库"> </el-table-column>
+            <el-table-column prop="ckhj" label="出库合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="呆滞数量(90天以上未出库)">
+            <el-table-column prop="pjdzsl" label="配件呆滞数量"> </el-table-column>
+            <el-table-column prop="jpdzsl" label="精品呆滞数量"> </el-table-column>
+            <el-table-column prop="dzslhj" label="呆滞数量合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount6" label="呆滞金额(90天以上未出库)">
+            <el-table-column prop="pjdzje" label="配件呆滞金额"> </el-table-column>
+            <el-table-column prop="jpdzje" label="精品呆滞金额"> </el-table-column>
+            <el-table-column prop="dzjehj" label="呆滞金额合计"> </el-table-column>
+          </el-table-column>
+          <el-table-column prop="amount1" label="呆滞占比(90天以上未出库)">
+            <el-table-column prop="pjdzzb" label="配件呆滞占比"> </el-table-column>
+            <el-table-column prop="jpdzzb" label="精品呆滞占比"> </el-table-column>
+            <el-table-column prop="dzzbhj" label="占比合计"> </el-table-column>
+            
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      company_ids: [],
+
+      currentTime: "",
+      value: "",
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01", "2023-08-03"],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+   
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/product_stock/detail", {
+          params: {
+            company_ids:this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1],
+          },
+       
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    searchBtn() {
+    this.getTableDate();
+  },
+  },
+
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+::v-deep .el-table {
+  border: none;
+}
+::v-deep .el-table::before {
+  background-color: black;
+}
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/KLFXtable.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">客流分析</span>
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker v-model="value1" type="daterange" range-separator="——" start-placeholder="开始日期"
+                end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
+          </div>
+        </div>
+        <!-- 表格 -->
+        <el-table class="exporttable" :data="tableData" border stripe :header-cell-style="{
+          'text-align': 'center',
+          background: '#03111c',
+        }" :cell-style="{ 'text-align': 'center' }" show-summary style="width: 100%; margin: 1px">
+          <el-table-column prop="company" label="店面"> </el-table-column>
+          <el-table-column prop="scjdl" label="首次接待量"> </el-table-column>
+          <el-table-column prop="scldl" label="首次留档量"> </el-table-column>
+          <el-table-column prop="ldv" label="留档率"> </el-table-column>
+          <el-table-column prop="sccjl" label="首次成交量"> </el-table-column>
+          <el-table-column prop="skcjl" label="首客成交率"> </el-table-column>
+          <el-table-column prop="ecddl" label="二次到店量"> </el-table-column>
+          <el-table-column prop="eccjl" label="二次成交率"> </el-table-column>
+          <el-table-column prop="hjcjl" label="合计成交量"> </el-table-column>
+          <el-table-column prop="lcddl" label="留存订单量"> </el-table-column>
+          <el-table-column prop="ddcjl" label="到店成交率"> </el-table-column>
+          <el-table-column prop="ssfz" label="接待时长大于30分钟">
+          </el-table-column>
+          <el-table-column prop="wxldl" label="微信留档量"> </el-table-column>
+          <el-table-column prop="wxldbzb" label="微信留档占比">
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      
+      currentTime: "",
+      company_ids: [],
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: [("2023-08-01"), ("2023-08-08")],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate();//开始获取表格
+    this.getSelectDate()//下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+ 
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/klfx_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1]
+          }
+        })
+        .then((res) => {
+          // console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //查询
+    searchBtn() {
+     this.getTableDate()
+    
+    }
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+
+::v-deep .el-table {
+  border: none;
+}
+
+::v-deep .el-table::before {
+  background-color: black;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #133654;
+}
+
+::v-deep .el-table tr {
+  background: #133654;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/KYFXtable.vue

@@ -0,0 +1,502 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">客源分析</span>
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker v-model="value1" type="daterange" range-separator="——" start-placeholder="开始日期"
+                end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
+          </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px">
+          <el-table-column
+            prop="company"
+            label="品牌">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="展厅">
+            <el-table-column
+              prop="ztjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="ztzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="ztcjl"
+              label="成交率">
+            </el-table-column>
+            
+            
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="转介绍">
+            <el-table-column
+              prop="zjsjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="zjszs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="zjscjl"
+              label="成交率">
+            </el-table-column>
+            
+            
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="网络直销">
+            <el-table-column
+              prop="wlzxjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="wlzxzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="wlzxcjl"
+              label="成交率">
+            </el-table-column>
+           
+            
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="车展外拓">
+            <el-table-column
+              prop="czwtjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="czwtzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="czwtcjl"
+              label="成交率">
+            </el-table-column>
+           
+            
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="二网大客">
+            <el-table-column
+              prop="ewdkjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="ewdkzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="ewdkcjl"
+              label="成交率">
+            </el-table-column>
+           
+            
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="厂家">
+            <el-table-column
+              prop="cjjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="cjzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="cjcjl"
+              label="成交率">
+            </el-table-column>
+            
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="懂车帝">
+            <el-table-column
+              prop="dcdjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="dcdzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="dcdcjl"
+              label="成交率">
+            </el-table-column>
+           
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="抖音">
+            <el-table-column
+              prop="dyjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="dyzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="dycjl"
+              label="成交率">
+            </el-table-column>
+           
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="易车网">
+            <el-table-column
+              prop="ycwjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="ycwzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="ycwcjl"
+              label="成交率">
+            </el-table-column>
+           
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="汽车之家">
+            <el-table-column
+              prop="qczjjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="qczjzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="qczjcjl"
+              label="成交率">
+            </el-table-column>
+           
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="电台广告">
+            <el-table-column
+              prop="dtggjc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="dtggzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="dtggcjl"
+              label="成交率">
+            </el-table-column>
+          
+           
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="其他网络平台">
+            <el-table-column
+              prop="qtwljc"
+              label="交车数">
+            </el-table-column>
+            <el-table-column
+              prop="qtwlzs"
+              label="客户总数">
+            </el-table-column>
+            <el-table-column
+              prop="qtwlcjl"
+              label="成交率">
+            </el-table-column>
+            
+           
+          </el-table-column>
+        </el-table>
+
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      
+      currentTime: "",
+      company_ids: [],
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+        
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        
+        ],
+      },
+      value1: [("2023-08-01"), ("2023-08-08")],
+    };
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate();//开始获取表格
+    this.getSelectDate()//下拉框接口数据
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+ 
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/kyfx_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            date_begin: this.value1[0],
+            date_end: this.value1[1]
+          }
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //查询
+    searchBtn() {
+     this.getTableDate()
+    
+    }
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+
+::v-deep .el-table {
+  border: none;
+}
+
+::v-deep .el-table::before {
+  background-color: black;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #133654;
+}
+
+::v-deep .el-table tr {
+  background: #133654;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/RCCZtable.vue

@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">首次入厂产值</span>
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="month"
+                placeholder="2023-08"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
+          </div>
+        </div>
+       <!-- 表格 -->
+       <el-table
+            class="exporttable"
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{
+              'text-align': 'center',
+              background: '#03111c'
+            }"
+            :cell-style="{ 'text-align': 'center' }"
+            show-summary
+            style="width: 100%; margin: 1px">
+            <el-table-column
+              prop="name"
+              label="品牌">
+            </el-table-column>
+            <el-table-column
+              
+              label="产值">
+              <el-table-column
+              prop="mbcz"
+              label="目标">
+            </el-table-column>
+            <el-table-column
+              prop="sjcz"
+              label="实际达成">
+            </el-table-column>
+            <el-table-column
+              prop="czwcl"
+              label="完成率">
+            </el-table-column>
+            <el-table-column
+              prop="cztb"
+              label="同比">
+            </el-table-column>
+            <el-table-column
+              prop="czhb"
+              label="环比">
+            </el-table-column>
+            </el-table-column>
+           
+            <el-table-column
+              prop="name"
+              label="产值分类">
+              <el-table-column
+              prop="jdmb"
+              label="机电目标">
+            </el-table-column>
+            <el-table-column
+              prop="jdsj"
+              label="实际达成">
+            </el-table-column>
+            <el-table-column
+              prop="spmb"
+              label="索赔目标">
+            </el-table-column>
+            <el-table-column
+              prop="spsj"
+              label="实际达成">
+            </el-table-column>
+            <el-table-column
+            
+              label="钣喷目标">
+            </el-table-column>
+            <el-table-column
+              prop="bpsj"
+              label="实际达成">
+            </el-table-column>
+          
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="毛利率">
+              <el-table-column
+              prop="jdmlv"
+              label="机电毛利率">
+            </el-table-column>
+            <el-table-column
+              prop="spmll"
+              label="索赔毛利率">
+            </el-table-column>
+            <el-table-column
+              prop="bpmll"
+              label="钣喷毛利率">
+            </el-table-column>
+            <el-table-column
+              prop="zhmlv"
+              label="综合毛利率">
+            </el-table-column>
+            <el-table-column
+              prop="mlvhb"
+              label="环比">
+            </el-table-column>
+            <el-table-column
+              prop="mlvtb"
+              label="同比">
+            </el-table-column>
+            </el-table-column>
+            <el-table-column
+              prop="amount7"
+              label="客单价">
+              <el-table-column
+              prop="jxkdj"
+              label="机修客单价">
+            </el-table-column>
+            <el-table-column
+              prop="bpkdj"
+              label="钣喷客单价">
+            </el-table-column>
+            </el-table-column>
+            
+          </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      
+      currentTime: "",
+      company_ids: [],
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+        
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        
+        ],
+      },
+      value1: [("2023-08-01")],
+    };
+  },
+  computed: {
+    Riqi : function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+
+      return `${year}-${month}`;
+    }
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+    console.log(this.Riqi);
+    this.value1 =this.Riqi;
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+ 
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/shjy_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_month: this.Riqi,
+          }
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //查询
+    searchBtn() {
+     this.getTableDate()
+    
+    }
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+
+::v-deep .el-table {
+  border: none;
+}
+
+::v-deep .el-table::before {
+  background-color: black;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+/* 日期表 */
+:deep(.el-input__inner) {
+  background-color: #133654;
+  border: none;
+  color: #ffffffc1;
+}
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #133654;
+}
+
+::v-deep .el-table tr {
+  background: #133654;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/RCTCtable.vue

@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">入厂台次</span>
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
+                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="month"
+                placeholder="2023-08"
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
+          </div>
+        </div>
+       <!-- 表格 -->
+       <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{
+            'text-align': 'center',
+            background: '#03111c',
+          }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px"
+        >
+          <el-table-column prop="company" label="店面"> </el-table-column>
+          <el-table-column prop="name" label="总进厂台次">
+            <el-table-column prop="shmb" label="目标"> </el-table-column>
+            <el-table-column prop="shsj" label="实际"> </el-table-column>
+            <el-table-column prop="shwcl" label="完成率"> </el-table-column>
+            <el-table-column prop="shtby" label="同比月"> </el-table-column>
+            <el-table-column prop="shhby" label="环比月"> </el-table-column>
+          </el-table-column>
+
+          <el-table-column prop="name" label="进厂明细分类">
+            <el-table-column prop="bptc" label="其中钣喷车辆台次">
+            </el-table-column>
+            <el-table-column prop="sbtc" label="首保进厂台次">
+            </el-table-column>
+            <el-table-column prop="sptc" label="索赔进厂台次">
+            </el-table-column>
+            <el-table-column prop="dbtc" label="定保进厂台次">
+            </el-table-column>
+            <el-table-column prop="pditc" label="PDI检测"> </el-table-column>
+          </el-table-column>
+        </el-table>
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      
+      currentTime: "",
+      company_ids: [],
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+        
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        
+        ],
+      },
+      value1: [("2023-08-01")],
+    };
+  },
+  computed: {
+    Riqi : function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+
+      return `${year}-${month}`;
+    }
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+    console.log(this.Riqi);
+    this.value1 =this.Riqi;
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+ 
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/shtc_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_month: this.Riqi,
+          }
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //查询
+    searchBtn() {
+     this.getTableDate()
+    
+    }
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+
+::v-deep .el-table {
+  border: none;
+}
+
+::v-deep .el-table::before {
+  background-color: black;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #133654;
+}
+/* 日期表 */
+:deep(.el-input__inner) {
+  background-color: #133654;
+  border: none;
+  color: #ffffffc1;
+}
+::v-deep .el-table tr {
+  background: #133654;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/TableDetail/XSFXtable.vue

@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="title" style="margin-top: 10px">
+      <div style="display: flex; justify-content: space-between">
+        <h1 style="color: azure">漯河亿通集团数据看板</h1>
+
+        <div class="time">
+          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
+        </div>
+      </div>
+      <img src="../../assets/bargound/图层 6.png" width="100%" />
+    </div>
+    <div class="content">
+      <!-- 库存车辆 -->
+
+      <el-tabs type="border-card" class="theme">
+        <div style="display: flex; justify-content: space-between">
+          <!-- 图标 -->
+          <div>
+            <p>
+              <img src="../../assets/bargound/data.png" alt="" /><span
+                class="kccl"
+                >销售三季毛利</span
+              >
+            </p>
+          </div>
+          <div style="display: flex">
+            <!-- 下拉框 -->
+            <div style="margin-right: 20px">
+              <el-select
+                class="select"
+                v-model="company_ids"
+                multiple
+                placeholder="请选择"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <!-- 日期表 -->
+            <div class="dataForm" style="margin-right: 20px">
+              <el-date-picker
+                v-model="value1"
+                type="date"
+               
+              >
+              </el-date-picker>
+            </div>
+            <!-- 按钮 -->
+            <el-button
+              @click="searchBtn"
+              style="background-color: rgb(40, 155, 209); color: black"
+              >查询</el-button
+            >
+          </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+          class="exporttable"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{
+            'text-align': 'center',
+            background: '#03111c',
+          }"
+          :cell-style="{ 'text-align': 'center' }"
+          show-summary
+          style="width: 100%; margin: 1px"
+        >
+          <el-table-column prop="company" label="品牌"> </el-table-column>
+          <el-table-column prop="dymb" label="当月目标"> </el-table-column>
+          <el-table-column prop="dyxl" label="当日销量"> </el-table-column>
+          <el-table-column prop="dytj" label="当日台均"> </el-table-column>
+          <el-table-column prop="ylxl" label="月累销量"> </el-table-column>
+          <el-table-column prop="yltj" label="月累台均"> </el-table-column>
+          <el-table-column prop="syzytjml" label="上月整月台均毛利">
+          </el-table-column>
+          <el-table-column prop="hb" label="环比"> </el-table-column>
+          <el-table-column prop="tb" label="同比"> </el-table-column>
+          <el-table-column prop="yltj1" label="月累台均一级毛利(进销存)">
+          </el-table-column>
+          <el-table-column prop="yltj2" label="月累台均二级毛利(返利政)">
+          </el-table-column>
+          <el-table-column prop="yltj3" label="月累台均三级毛利(衍生)">
+          </el-table-column>
+        </el-table>
+
+        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+     
+      currentTime: "",
+      company_ids: [],
+      //表格各类属性
+      tableData: [],
+      //下拉框内属性
+      options: [],
+      //日期表属性
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value1: ["2023-08-01"],
+    };
+  },
+  computed: {
+    Riqi : function getNowFormatDate() {
+      let date = new Date(),
+        year = date.getFullYear(), //获取完整的年份(4位)
+        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+        strDate = date.getDate(); // 获取当前日(1-31)
+      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
+      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
+
+      return `${year}-${month}-${strDate}`;
+    }
+  },
+  mounted() {
+    this.updateTime(); //时间
+    this.getTableDate(); //开始获取表格
+    this.getSelectDate(); //下拉框接口数据
+    console.log(this.Riqi);
+    this.value1 =this.Riqi;
+  },
+  beforeDestroy() {
+    // 在组件销毁前清除定时器，避免内存泄漏
+    clearInterval(this.timer);
+  },
+  methods: {
+    //表格接口数据
+    getTableDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/xssjml_detail", {
+          params: {
+            company_ids: this.company_ids.join(),
+            search_date: this.Riqi,
+          },
+        })
+        .then((res) => {
+          console.log("--------", res.data.data);
+          this.tableData = res.data.data;
+        });
+    },
+    //下拉框数据
+    getSelectDate() {
+      axios
+        .get("http://192.168.2.55:8022/plugins/lhyt/get_companies")
+        .then((ret) => {
+          this.options = ret.data.data;
+        });
+    },
+    //更新时间
+    updateTime() {
+      // 在组件挂载结束时启动定时器，每秒更新一次时间
+      this.currentTime = this.getCurrentTime();
+      //每秒更新一次
+      this.timer = setInterval(() => {
+        this.currentTime = this.getCurrentTime();
+      }, 1000);
+    },
+    getCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter("date");
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    //查询
+    searchBtn() {
+      this.getTableDate();
+    },
+  },
+};
+</script>
+
+<style scoped="less">
+.content {
+  padding: 10px;
+}
+
+.title {
+  width: 100%;
+  /* background: url('../../assets/bargound/'); */
+  height: 64px;
+
+  p {
+    height: 100px;
+  }
+}
+
+.kccl {
+  color: #697c91;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.el-input__inner {
+  background-color: #133654;
+}
+
+.el-input__inner {
+  border: 0;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  display: inline-block;
+  height: 100%;
+  width: 39%;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffffba;
+  background-color: #133654;
+}
+
+::v-deep .el-table {
+  border: none;
+}
+
+::v-deep .el-table::before {
+  background-color: black;
+}
+
+::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
+.el-table__header-wrapper tbody td.el-table__cell {
+  background-color: rgb(2, 62, 2);
+  color: #93acbf;
+}
+/* 日期表 */
+:deep(.el-input__inner) {
+  background-color: #133654;
+  border: none;
+  color: #ffffffc1;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: "";
+  position: absolute;
+  background-color: black;
+  z-index: 1;
+}
+
+::v-deep .el-table td,
+.building-top .el-table th.is-leaf {
+  color: #93acbf;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #133654;
+}
+
+::v-deep .el-table tr {
+  background: #133654;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #081b2b;
+}
+
+/**
+改变边框颜色
+ */
+.el-table {
+  border-bottom: 1px solid #102b47;
+  border-right: 1px solid #102b47;
+  margin: 0 auto;
+}
+
+::v-deep
+  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
+  .el-tabs__nav-scroll {
+  border-bottom: 1px solid;
+}
+
+::v-deep.el-table th {
+  border: 1px solid #102b47 !important;
+  border-right: none !important;
+  border-bottom: none !important;
+}
+
+::v-deep.el-table td {
+  border: 1px solid #102b47;
+  border-right: none !important;
+}
+
+.time {
+  color: rgb(174, 201, 222);
+  margin-right: 2%;
+  font-size: 16px;
+  overflow: hidden;
+  max-width: 15%;
+  white-space: nowrap;
+}
+</style>

src/views/alarmLog.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="kaung">
+        <p class="text"><span>欢迎登录使用</span></p>
+        <div class="inkuang">
+            <el-input class="theme"></el-input>
+            <el-input class="theme"></el-input>
+            <span class="login">立即登录</span>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+<style lang="less" scoped>
+.kaung {
+    background: url('./kuang.png') no-repeat;
+    width: 462px;
+    height: 372px;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    .text {
+        width: 360px;
+        height: 10px;
+        background: url('./span.png') no-repeat;
+        background-size: 100% 100%;
+        margin-top: 80px;
+        margin-left: 50px;
+        position: relative;
+
+        span {
+            display: block;
+            color: #FFFFFF;
+            font-size: 20px;
+            position: absolute;
+            left: 34%;
+            top: -8px;
+        }
+    }
+
+    .inkuang {
+        display: flex;
+        flex-direction: column;
+        width: 240px;
+        margin: 0 auto;
+        margin-top: 40px;
+
+        .login {
+            background: url('./login.png') no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            height: 60px;
+            margin-top: 20px;
+            text-align: center;
+            padding: 20px 0 0 0;
+            font-size: 12px;
+            color: black;
+            cursor: pointer;
+        }
+
+        .theme {
+            margin-top: 10px;
+        }
+    }
+
+}
+</style>