wangyifang
/
cz-hjjc-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

驾驶舱

Browse Source
master
lion 1 year ago
parent 822ec0e9a9
commit e8a2413288
5 changed files with 575 additions and 60 deletions
Show Stats Download Patch File Download Diff File

422
src/views/jsc/allTable.vue
Unescape View File

@ -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>

14
src/views/jsc/components/total.vue → src/views/jsc/components/1total.vue
Unescape View File

@ -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;

172
src/views/jsc/components/all.vue
Unescape View File

@ -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;
}

7
src/views/jsc/components/overtime.vue
Unescape View File

@ -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 -

20
src/views/jsc/jsc.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save