diff --git a/src/views/jsc/allTable.vue b/src/views/jsc/allTable.vue
new file mode 100644
index 0000000..dd5b07a
--- /dev/null
+++ b/src/views/jsc/allTable.vue
@@ -0,0 +1,422 @@
+<template>
+  <el-card id="all-card" class="box-card" shadow="hover">
+    <div style="position: relative;height: 100%;width: 100%;overflow-y: scroll;padding-bottom:20px">
+      <div class="search-tab">
+        <div>
+          <el-date-picker @change="changeDateRange" v-model="modalSelect.dateRange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
+            type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+        <div>
+          <el-select v-model="modalSelect.searchTag" @change="changeTag" placeholder="请选择类型">
+            <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div>
+          <el-select style="width:250px" v-model="modalSelect.searchDepartmentId" placeholder="请选择科室">
+            <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </div>
+        <div>
+          <el-button type="primary" @click="getChartOverallList">查询</el-button>
+        </div>
+      </div>
+      <!-- :style="{'height':defaultModalSize.height}" -->
+      <div class="search-table">
+        <div  v-loading="loading" class="progress-card" element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
+          <el-table style="width: 100%;" size="mini" :header-cell-style="{
+              'font-weight': '600',
+              'background': '#fff',
+              'color': '#515a6e',
+               'text-align':'left'
+            }" :height="400" :data="list">
+            <el-table-column v-for="(item, index) in table" :key="index" :width="item.width" :label="item.title"
+              :prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
+              :align="item.align" :formatter="item.formatter" />
+          </el-table>
+          <el-pagination
+            style="margin-top: 10px;text-align: right;"
+            :current-page.sync="modalSelect.page"
+            :page-sizes="[20, 30, 40, 50]"
+            :page-size.sync="modalSelect.page_size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="e => {
+              modalSelect.page_size = e;
+              modalSelect.page = 1;
+              getChartOverallList();
+            }"
+            @current-change="e => {
+              modalSelect.page = e;
+              getChartOverallList();
+            }"
+          />
+        </div>
+      </div>
+
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import ElementResize from 'element-resize-detector'
+  import {
+    defaultModalSize
+  } from '@/settings'
+  import axios from 'axios'
+  import {
+    getToken
+  } from '@/utils/auth'
+
+  export default {
+    name: 'AllTable',
+    components: {},
+    props: {
+      departments: {
+        type: Array,
+        default: []
+      },
+      modalSelect: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
+
+    },
+    data() {
+      return {
+        defaultModalSize,
+        tableHeight: 400,
+        loading:false,
+        list: [],
+        total: 0,
+        table: [],
+        tableList: {
+          jiaban: [{
+              title: '人员',
+              key: 'flow.creator.name',
+              width: 100,
+              align: 'left',
+            },
+            {
+              title: '原因',
+              key: 'yuanyinshuoming',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              minWidth: 200
+            },
+            {
+              title: '时间',
+              key: 'kaishiriqi',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 180
+            }
+          ],
+          yongche: [{
+              title: '车辆',
+              key: 'chepaihao',
+              width: 120,
+              align: 'left',
+            },
+            {
+              title: '驾驶员',
+              key: 'jiashiyuan',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 100,
+            },
+            {
+              title: '目的地',
+              key: 'daodadidian',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              minWidth: 200,
+            },
+            {
+              title: '用车时间',
+              key: 'yongchekaishiriqi',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 180,
+            }
+          ],
+          qingjia: [{
+              title: '人员',
+              key: 'flow.creator.name',
+              width: 100,
+              align: 'left',
+            },
+            {
+              title: '事由',
+              key: 'qingjiashiyou',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              minWidth: 200
+            },
+            {
+              title: '时间',
+              key: 'kaishishijian',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 180,
+            },
+          ],
+          chuchai: [{
+              title: '人员',
+              key: 'flow.creator.name',
+              width: 120,
+              align: 'left',
+            },
+            {
+              title: '去向',
+              key: 'mudidi',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              minWidth: 120
+            },
+            {
+              title: '交通方式',
+              key: 'jiaotongfangshi',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              minWidth: 120
+            },
+            {
+              title: '出差说明',
+              key: 'chuchaishiyou',
+              align: 'left',
+              'show-overflow-tooltip': true,
+            },
+            {
+              title: '开始日期',
+              key: 'kaishi',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 120
+            },
+            {
+              title: '结束日期',
+              key: '结束',
+              align: 'left',
+              'show-overflow-tooltip': true,
+              width: 120
+            }
+          ]
+        },
+        // 弹窗选择
+        tagList: [{
+          name: '出差',
+          id: 'chuchai',
+          type:3
+        }, {
+          name: '用车',
+          id: 'yongche',
+          type:3
+        }, {
+          name: '加班',
+          id: 'jiaban',
+          type:1
+        }, {
+          name: '请假',
+          id: 'qingjia',
+          type:2
+        }],
+
+
+
+        dateRange: '',
+        pickerOptions: {
+          shortcuts: [{
+            text: '今日',
+            onClick(picker) {
+              const start = new Date();
+              start.setTime(start.getTime());
+              picker.$emit('pick', [start, start]);
+            }
+          }, {
+            text: '明日',
+            onClick(picker) {
+              const start = new Date();
+              start.setTime(start.getTime() + 3600 * 1000 * 24);
+              picker.$emit('pick', [start, start]);
+            }
+          }, {
+            text: '本周',
+            onClick(picker) {
+              const end = new Date();
+              const now = new Date();
+              const day = now.getDay(); // 获取当前是星期几，0 表示周日，1 - 6 表示周一到周六
+              const diff = now.getDate() - day + (day === 0 ? -6 : 1);
+              const start = new Date(now);
+              start.setDate(diff);
+              start.setHours(0, 0, 0, 0);
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * 6);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '本月',
+            onClick(picker) {
+              const end = new Date()
+              const now = new Date();
+              const year = now.getFullYear();
+              const month = now.getMonth() + 1; // getMonth 返回值是 0 - 11，所以加 1 得到实际月份
+              const nextMonth = new Date(year, month, 0);
+              const start = new Date(now.getFullYear(), now.getMonth(), 1)
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * (nextMonth.getDate() - 1));
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '本年',
+            onClick(picker) {
+              const now = new Date();
+              const start = new Date(now.getFullYear(), 0, 1);
+              const end = new Date(now.getFullYear(), 11, 31);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+
+      }
+    },
+    computed: {},
+    watch: {
+      modalSelect(newval){
+        console.log("isShowModal",newval)
+        this.getChartOverallList()
+      }
+    },
+    created() {
+      this.getChartOverallList()
+    },
+    beforeDestroy() {},
+    mounted() {
+      this.table = this.tableList['chuchai']
+      this.init()
+    },
+    methods: {
+
+      init() {
+        const cardDom = document.getElementById('all-card')
+        const cardTitleH = 109
+        const elementResize = ElementResize({
+          strategy: 'scroll'
+        })
+        elementResize.listenTo(cardDom, (ele) => {
+          this.tableHeight =
+            cardDom.getBoundingClientRect().height -
+            40 -
+            cardTitleH
+        })
+      },
+      // 弹出的总览数据
+      async getChartOverallList() {
+        try {
+          this.loading = true
+          this.list = []
+          this.total = 0
+          const res = await axios.get(`${process.env.VUE_APP_BASE_API}/api/oa/chart/overall-list`, {
+            headers: {
+              'Authorization': `Bearer ${getToken()}`
+            },
+            params: {
+              star_date: this.modalSelect.start_date,
+              end_date: this.modalSelect.end_date,
+              department_id: this.modalSelect.searchDepartmentId,
+              type: this.modalSelect.type,
+              page: this.modalSelect.page,
+              page_size: this.modalSelect.page_size
+            }
+          })
+          if (res.status === 200) {
+            console.log("res",res)
+
+            this.table = this.tableList[this.modalSelect.searchTag]
+            let list = res.data.data.data
+            this.total = res.data.data.total
+            if(this.modalSelect.searchTag==='yongche'){
+              let carList = []
+              list.map(a=>{
+                if(a.chucheqingkuang){
+                  carList.push(...JSON.parse(a.chucheqingkuang))
+                }
+              })
+              this.list = carList
+            }else{
+              this.list = list
+            }
+
+            // this.list.map(item => {
+            //   if (item.name == '今日') {
+            //     this.progress = item
+            //   }
+            // })
+          }
+          this.loading = false
+        } catch (err) {
+          this.loading = false
+        }
+      },
+      changeDateRange(e) {
+        console.log("e", e)
+        if (e) {
+          this.modalSelect.start_date = e[0] + ' 00:00:00'
+          this.modalSelect.end_date = e[1] + ' 23:59:59'
+        } else {
+          this.modalSelect.start_date = ''
+          this.modalSelect.end_date = ''
+        }
+      },
+      changeTag(e){
+        this.tagList.map(item=>{
+          if(item.id==e){
+            this.modalSelect.type = item.type
+          }
+        })
+      }
+
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .box-card {
+    height: 100%;
+  }
+
+  ::v-deep .el-card__body {
+    width: 100%;
+    height: calc(100% - 58px);
+  }
+
+  ::v-deep .el-table th,
+  ::v-deep .el-table td {
+    border-bottom-style: dashed;
+  }
+
+  .clearfix {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .vxe-modal--content {
+    padding: 0;
+  }
+
+  .search-tab {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+
+    &>div {
+      margin: 5px;
+    }
+  }
+</style>
diff --git a/src/views/jsc/components/total.vue b/src/views/jsc/components/1total.vue
similarity index 89%
rename from src/views/jsc/components/total.vue
rename to src/views/jsc/components/1total.vue
index a236da1..cd02302 100644
--- a/src/views/jsc/components/total.vue
+++ b/src/views/jsc/components/1total.vue
@@ -67,8 +67,14 @@
         tableHeight: 200
       }
     },
-    created() {},
-    mounted() {
+    created() {
+            this.layout = this.$options.layout;
+    },
+    mounted() {
+      if(this.$store.getters.device === 'mobile'){
+        this.layout.w = 12
+      }
+      console.log("this.totallayout",this.layout)
     },
     watch:{
       myData(newval){
@@ -110,12 +116,12 @@
 
   .progress-card {
     display: flex;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
 
     &-item {
-      min-width: 120px;
+      // min-width: 120px;
       margin: 10px;
       display: flex;
       flex-direction: column;
diff --git a/src/views/jsc/components/all.vue b/src/views/jsc/components/all.vue
index e53429f..1492bd5 100644
--- a/src/views/jsc/components/all.vue
+++ b/src/views/jsc/components/all.vue
@@ -13,32 +13,48 @@
 
     <div v-loading="loading" class="progress-card" element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
-      <div class="progress-card-left progress-card-item">
+      <div class="progress-card-left progress-card-item"
+        :style="{width:$store.getters.device === 'mobile'?'100%':'50%'}">
         <el-table style="width: 100%;" size="mini" :header-cell-style="{
             'font-weight': '600',
             'background': '#fff',
             'color': '#515a6e',
-            'text-align':'left'
-          }" :height="tableHeight" :data="list">
+          }" :height="250" :data="list">
           <el-table-column v-for="(item, index) in table" :key="index" :width="item.width" :label="item.title"
             :prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
-            :align="item.align" :formatter="item.formatter" />
+            :align="item.align" :formatter="item.formatter">
+            <template slot-scope="scope">
+              <div @click="handle(scope.row)" style="text-decoration: underline;color:#4771f8;cursor: pointer;"
+                v-if="item.key==='name'">
+                {{scope.row[item.key]}}
+              </div>
+              <div @click="handle(scope.row,item.key)" style="text-decoration: underline;color:#4771f8;cursor: pointer;"
+                v-else-if="scope.row[item.key]>0">
+                {{scope.row[item.key]}}
+              </div>
+              <div v-else>
+                {{scope.row[item.key]}}
+              </div>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
-      <div class="progress-card-right progress-card-item">
+      <div class="progress-card-right progress-card-item"
+        :style="{width:$store.getters.device === 'mobile'?'100%':'50%'}">
         <div class="progress-card-right-chart">
-          <MyProgress width="250px" height="250px" :title="myTitle" :chart-data="[{value:progress.chuchai,name:'出差'},{value:progress.jiaban,name:'加班'}
+          <MyProgress :width="$store.getters.device === 'mobile'?'200px':'250px'"
+            :height="$store.getters.device === 'mobile'?'200px':'250px'" :title="myTitle" :chart-data="[{value:progress.chuchai,name:'出差'},{value:progress.jiaban,name:'加班'}
             ,{value:progress.qingjia,name:'请假'},{value:progress.yongche,name:'用车'}]" />
         </div>
 
         <div class="progress-card-right-card">
           <div class="progress-card-right-change">
-            <i class="el-icon-arrow-left" @click="changeDatePara(-1)"></i>
+            <i class="el-icon-arrow-left" style="cursor: pointer;" @click="changeDatePara(-1)"></i>
             <div>
               <i class="el-icon-date"></i>
               <span v-if="changeDate==item" v-for="item in changeList">{{item}}</span>
             </div>
-            <i class="el-icon-arrow-right" @click="changeDatePara(1)"></i>
+            <i class="el-icon-arrow-right" style="cursor: pointer;" @click="changeDatePara(1)"></i>
           </div>
           <div class="progress-card-right-count">
             <div>
@@ -61,26 +77,38 @@
         </div>
       </div>
     </div>
+
+    <vxe-modal v-model="isShowModal" :z-index="zIndex" transfer resize show-zoom
+      :fullscreen="$store.getters.device === 'mobile'" title="总览" :width="defaultModalSize.width"
+      :height="defaultModalSize.height" esc-closable :padding="false">
+      <allTable ref="AllTable" v-show="isShowModal" :modalSelect="modalSelect" :departments="departments">
+      </allTable>
+    </vxe-modal>
+
+
   </el-card>
 </template>
 
 <script>
-  import ElementResize from 'element-resize-detector'
   import {
-    parseMoney
-  } from '@/utils'
-  import SvgIcon from '@/components/SvgIcon/index.vue'
+    PopupManager
+  } from 'element-ui/lib/utils/popup'
+  import ElementResize from 'element-resize-detector'
   import MyProgress from '@/components/Progress/jscindex.vue'
   import axios from 'axios'
   import {
     getToken
   } from '@/utils/auth'
+  import {
+    defaultModalSize
+  } from '@/settings'
+  import allTable from '../allTable.vue'
 
   export default {
     name: 'All',
     components: {
-      SvgIcon,
-      MyProgress
+      MyProgress,
+      allTable
     },
     layout: {
       x: 5,
@@ -92,7 +120,10 @@
     },
     data() {
       return {
+        defaultModalSize,
         loading: false,
+        zIndex: PopupManager.nextZIndex(),
+        isShowModal: false,
         departments: [],
         myTitle: '今日总览',
         progress: {
@@ -102,11 +133,18 @@
           qingjia: 0
         },
         changeList: ['今日', '明日', '本周', '本月', '本年'],
-        changeDate: '今日',
-        changeIndex:0,
+        changeDate: '今日',
+        changeIndex: 0,
         tableHeight: 200,
         department_id: 0,
         list: [],
+        modalSelect: {},
+        typeList: {
+          'jiaban': 1,
+          'qingjia': 2,
+          'chuchai': 3,
+          'yongche': 3
+        },
         table: [{
             title: '日期',
             key: 'name',
@@ -136,7 +174,15 @@
             align: 'center',
             'show-overflow-tooltip': true,
           }
-        ]
+        ],
+
+      }
+    },
+    watch: {
+      isShowModal(newVal) {
+        if (newVal) {
+          this.zIndex = PopupManager.nextZIndex()
+        } else {}
       }
     },
     created() {},
@@ -145,7 +191,6 @@
       this.getData()
     },
     methods: {
-      parseMoney,
       init() {
         const cardDom = this.$el
         const cardTitleH = 69
@@ -155,24 +200,23 @@
         elementResize.listenTo(cardDom, ele => {
           this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
         })
-      },
-      changeDatePara(para){
-        this.changeIndex = parseInt(this.changeIndex+para)
-        this.changeDate = this.changeList[this.changeIndex]
-        if(this.changeIndex<0){
-          this.changeIndex = this.changeList.length-1
-          this.changeDate = this.changeList[this.changeIndex]
-        }
-        if(this.changeIndex>this.changeList.length-1){
-          this.changeIndex = 0
-          this.changeDate = this.changeList[0]
-        }
-        console.log("this.changeIndex",this.changeIndex,this.changeDate)
-        this.list.map(item => {
-          if (item.name == this.changeDate) {
-            this.progress = item
-          }
-        })
+      },
+      changeDatePara(para) {
+        this.changeIndex = parseInt(this.changeIndex + para)
+        this.changeDate = this.changeList[this.changeIndex]
+        if (this.changeIndex < 0) {
+          this.changeIndex = this.changeList.length - 1
+          this.changeDate = this.changeList[this.changeIndex]
+        }
+        if (this.changeIndex > this.changeList.length - 1) {
+          this.changeIndex = 0
+          this.changeDate = this.changeList[0]
+        }
+        this.list.map(item => {
+          if (item.name == this.changeDate) {
+            this.progress = item
+          }
+        })
       },
       changeDepartment(e) {
         this.department_id = e
@@ -221,6 +265,10 @@
           if (res.status === 200) {
             let arr = res.data?.data
             this.departments = arr.filter(item => item.name != '中心领导').filter(item => item.name != '公共')
+            this.departments.unshift({
+              id: '',
+              name: '全部'
+            })
           }
         } catch (err) {
           this.loading = false
@@ -232,15 +280,37 @@
           await this.getDepartment()
           this.department_id = this.departments.length > 0 ? this.departments[0].id : ''
           this.myTitle = this.departments.length > 0 ? this.departments[0].name : ''
-          if (this.department_id) {
-            await this.getChartOverall()
-          }
+
+          await this.getChartOverall()
+
 
           this.loading = false
         } catch (err) {
           this.loading = false
           console.error(err)
         }
+      },
+      // 弹窗
+      handle(row, key) {
+        try {
+          console.log("row", row, key)
+
+          let type = this.typeList[key ? key : 'chuchai']
+          this.modalSelect = {
+            start_date: row.start,
+            end_date: row.end,
+            searchTag: key ? key : 'chuchai',
+            searchDepartmentId: this.department_id,
+            type: type,
+            dateRange: [row.start, row.end],
+            page: 1,
+            page_size: 20
+          }
+          this.isShowModal = true
+        } catch (err) {
+          // this.$message.warning('')
+          console.error(err)
+        }
       }
     }
   }
@@ -267,7 +337,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    height: 100%;
+    // height: 100%;
 
     &-item {
       // min-width: 120px;
@@ -276,6 +346,7 @@
       height: 100%;
       display: flex;
       justify-content: center;
+      margin: 10px 0;
     }
 
     &-left {}
@@ -297,20 +368,23 @@
         align-items: center;
         font-size: 14px;
         width: 100%;
-        justify-content: center;
-        margin:20px 0;
-        &>div{
-          margin:0 25px;
-          span{
-            margin-left:10px;
-          }
+        justify-content: center;
+        margin: 20px 0;
+
+        &>div {
+          margin: 0 25px;
+
+          span {
+            margin-left: 10px;
+          }
         }
       }
 
       &-count {
         display: flex;
         flex-wrap: wrap;
-        justify-content: center;
+        justify-content: flex-start;
+        margin-left: 15px;
 
         &>div {
           display: flex;
@@ -356,6 +430,8 @@
     }
   }
 
+
+
   ::v-deep .el-progress--circle .el-progress__text {
     white-space: break-spaces;
   }
diff --git a/src/views/jsc/components/overtime.vue b/src/views/jsc/components/overtime.vue
index d011eaf..ceb05f3 100644
--- a/src/views/jsc/components/overtime.vue
+++ b/src/views/jsc/components/overtime.vue
@@ -11,7 +11,7 @@
     <div style="position: relative;height: 100%;width: 100%;">
       <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
         <el-table
-          style="width: 100%;"
+          :style="{'width': '100%','height':tableHeight+'px'}"
           size="mini"
           :header-cell-style="{
             'font-weight': '600',
@@ -19,7 +19,6 @@
             'color': '#515a6e',
             'text-align':'left'
           }"
-          :height="tableHeight"
           :data="list"
         >
           <el-table-column
@@ -54,7 +53,8 @@ export default {
       default: () => {
         return []
       }
-    }
+    },
+
   },
   layout: {
     x: 8.5,
@@ -119,6 +119,7 @@ export default {
         strategy: 'scroll'
       })
       elementResize.listenTo(cardDom, (ele) => {
+
         this.tableHeight =
           cardDom.getBoundingClientRect().height -
           40 -
diff --git a/src/views/jsc/jsc.vue b/src/views/jsc/jsc.vue
index fbc8f91..3a00339 100644
--- a/src/views/jsc/jsc.vue
+++ b/src/views/jsc/jsc.vue
@@ -52,7 +52,16 @@
     created() {
       this.layoutList = layout.map(item => {
         layout.forEach(lay => {
-          lay.i === item.i ? item.component = lay.component : ''
+          lay.i === item.i ? item.component = lay.component : ''
+
+
+            if (this.$store.getters.device === 'mobile') {
+              if(lay.i=='All'){
+                lay.y = 5
+                lay.h = 14
+              }
+            }
+
         })
         return item
       }) ?? []
@@ -73,7 +82,8 @@
             headers: {
               'Authorization': `Bearer ${getToken()}`
             },
-            params: {
+            params: {
+              date:'2025-03-05'
             }
           })
           console.log("res", res)
@@ -117,8 +127,8 @@
       touch-action: auto !important;
     }
 
-    //#grid-card {
-    //  overflow-y: scroll;
-    //}
+    #grid-card {
+     overflow-y: scroll;
+    }
   }
 </style>