|
|
@@ -1,21 +1,118 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<el-row>
|
|
|
- <el-select v-model="param.clerk_id" :placeholder="this.$t('clerkManage.choiceClerk')" @change="clerkChange">
|
|
|
- <el-option v-for="(item, index) in this.clerkList" :key="index" :label="item.clerk_name" :value="item.clerk_id" />
|
|
|
- </el-select>
|
|
|
-
|
|
|
- <el-date-picker
|
|
|
- style="float: right"
|
|
|
- v-model="value"
|
|
|
- align="right"
|
|
|
- type="date"
|
|
|
- :placeholder="this.$t('action.choiceData')"
|
|
|
- :picker-options="pickerOptions"
|
|
|
- :clearable="false"
|
|
|
- @change="handleYearMonthChanged"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
+ <el-col :span="4">
|
|
|
+ <!-- <el-select v-model="param.clerk_id" :placeholder="this.$t('clerkManage.choiceClerk')" @change="clerkChange">-->
|
|
|
+ <!-- <el-option v-for="(item, index) in this.clerkList" :key="index" :label="item.clerk_name" :value="item.clerk_id" />-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+
|
|
|
+ <el-menu
|
|
|
+ default-active="0-0"
|
|
|
+ class="el-menu-vertical-demo"
|
|
|
+ @open="handleOpen"
|
|
|
+ @select="handleSelect"
|
|
|
+ @close="handleClose"
|
|
|
+ style="min-height: 700px"
|
|
|
+ >
|
|
|
+ <el-submenu v-for="(key,index) in Object.keys(clerkList)" :index="index+''" :key="index">
|
|
|
+ <template slot="title">
|
|
|
+ <svg-icon icon-class="role"/>
|
|
|
+ <span>{{key}}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item-group v-if="clerkList[key].length>0">
|
|
|
+ <el-menu-item :index="index+'-'+_idx" v-for="(item,_idx) in clerkList[key]" :key="_idx">
|
|
|
+ {{item.clerk_name}}
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu-item-group>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-row>
|
|
|
+ <el-date-picker
|
|
|
+ style="float: right"
|
|
|
+ v-model="value"
|
|
|
+ align="right"
|
|
|
+ type="date"
|
|
|
+ :placeholder="this.$t('action.choiceData')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :clearable="false"
|
|
|
+ @change="calendarOnClick"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row style="margin: 30px" :gutter="30">
|
|
|
+ <el-col :span="8">
|
|
|
+<!-- <el-card style="margin: 15px 15px 15px 0;height: 700px;overflow: scroll">-->
|
|
|
+ <el-timeline v-if="this.dayNfcInteractionList.length > 0">
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(dayInteraction, index) in this.dayNfcInteractionList"
|
|
|
+ :key="index"
|
|
|
+ :color="getTimelineItemColor(dayInteraction.components_type)"
|
|
|
+ :timestamp="formatterDate(dayInteraction.create_time)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-card>
|
|
|
+ <h4>{{ getCardString(dayInteraction) }}</h4>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ <el-timeline v-else>
|
|
|
+ <el-timeline-item>
|
|
|
+ <el-card>
|
|
|
+ {{ this.$t('functions.notRecords') }}
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+
|
|
|
+ </el-timeline>
|
|
|
+ </el-col>
|
|
|
+<!-- </el-card>-->
|
|
|
+
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <el-row style="margin: 15px" :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card :id="'myFrame' + this.partTree.id" style="text-align: left; margin: 10px">
|
|
|
+ <span class="text-style" :title=this.partTree.full_name>
|
|
|
+ <svg-icon icon-class="area"/>
|
|
|
+ {{ this.partTree.full_name }}
|
|
|
+ </span>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row
|
|
|
+ style="margin: 15px"
|
|
|
+ :gutter="20"
|
|
|
+ v-for="(item, index) in this.partTree.children"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+<!-- <el-col :span="12" v-for="(item, index) in this.partTree.children" :key="index" :label="item.full_name" :value="item.id">-->
|
|
|
+ <el-col :span="24" :label="item.full_name" :value="item.id">
|
|
|
+ <el-card :id="'myFrame' + item.id" style="text-align: left; margin: 10px; width: 46%">
|
|
|
+ <span class="text-style" :title=item.full_name>
|
|
|
+ <svg-icon :icon-class="item.type===4?'sickroom':item.type===5?'bed':'area'"/>
|
|
|
+ {{ item.full_name }}
|
|
|
+ </span>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-col :span="6" v-for="(_item, _index) in item.children" :key="_index" :label="_item.full_name" :value="_item.id">
|
|
|
+ <el-card :id="'myFrame' + _item.id" style="text-align: left; margin: 10px">
|
|
|
+ <span class="text-style" :title=_item.full_name>
|
|
|
+ <svg-icon :icon-class="item.type===4?'sickroom':item.type===5?'bed':'area'"/>
|
|
|
+ {{ _item.full_name }}
|
|
|
+ </span>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -26,6 +123,8 @@ import {parseTime} from "@/utils";
|
|
|
import {FUNCTION_TYPE} from "@/utils/enum/FunctionEnum";
|
|
|
import * as API_Clerk from "@/api/ncs_clerk";
|
|
|
import {unixToDate} from "@/utils/Foundation";
|
|
|
+import * as API_FrameGroup from "@/api/ncs_frameGroup";
|
|
|
+import {FRAME_TYPE} from "@/utils/enum/FrameTypeEnum";
|
|
|
|
|
|
export default {
|
|
|
name: "nfcPosition",
|
|
|
@@ -36,19 +135,19 @@ export default {
|
|
|
return time.getTime() > Date.now();
|
|
|
},
|
|
|
shortcuts: [{
|
|
|
- text: '今天',
|
|
|
+ text: this.$t('action.today'),
|
|
|
onClick(picker) {
|
|
|
picker.$emit('pick', new Date());
|
|
|
}
|
|
|
}, {
|
|
|
- text: '昨天',
|
|
|
+ text: this.$t('action.yesterday'),
|
|
|
onClick(picker) {
|
|
|
const date = new Date();
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
picker.$emit('pick', date);
|
|
|
}
|
|
|
}, {
|
|
|
- text: '一周前',
|
|
|
+ text: this.$t('action.aWeekAgo'),
|
|
|
onClick(picker) {
|
|
|
const date = new Date();
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
@@ -61,20 +160,36 @@ export default {
|
|
|
loading: false,
|
|
|
mount: "",
|
|
|
param: {
|
|
|
+ type: 'MONTH'
|
|
|
},
|
|
|
- value: new Date(),
|
|
|
+ value: null,
|
|
|
month: "",
|
|
|
nfcInteractionList: [],
|
|
|
dayNfcInteractionList: [],
|
|
|
clerkList: [],
|
|
|
+ currentClerk: {},
|
|
|
+ partTree: {}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.value = new Date()
|
|
|
- this.calendarOnClick(this.value)
|
|
|
- this.getClerkList()
|
|
|
+ // this.getClerkList()
|
|
|
+ this.getRoleGroupClerk()
|
|
|
+ this.getAllFrame()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleOpen() {
|
|
|
+
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSelect(val){
|
|
|
+ let path =val.split('-').map(p=>Number(p))
|
|
|
+ this.currentClerk = {...this.clerkList[Object.keys(this.clerkList)[path[0]]][path[1]]}
|
|
|
+ this.param.clerk_id = this.currentClerk.clerk_id
|
|
|
+ this.clerkChange(this.value)
|
|
|
+ },
|
|
|
getClerkList() {
|
|
|
this.loading = true
|
|
|
API_Clerk.getClerksByShopId(this.$store.getters.partId).then(res => {
|
|
|
@@ -82,6 +197,14 @@ export default {
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ getRoleGroupClerk() {
|
|
|
+ API_Clerk.getRoleGroupClerk(this.$store.getters.partId).then(res => {
|
|
|
+ this.clerkList = {...res}
|
|
|
+ this.currentClerk = {...this.clerkList[Object.keys(this.clerkList)[0]][0]}
|
|
|
+ this.param.clerk_id = this.currentClerk.clerk_id
|
|
|
+ this.calendarOnClick(this.value)
|
|
|
+ })
|
|
|
+ },
|
|
|
clerkChange(val) {
|
|
|
// this.param.clerk_id = val
|
|
|
this.getNfcInteraction()
|
|
|
@@ -92,26 +215,23 @@ export default {
|
|
|
API_nfcInteraction.get_list_by_clerk_id(this.param).then(r => {
|
|
|
this.loading = false;
|
|
|
this.nfcInteractionList = r;
|
|
|
-
|
|
|
- let date = ''
|
|
|
- for (let i = 0; i < this.nfcInteractionList.length; i++) {
|
|
|
- date = parseTime(this.nfcInteractionList[i].create_time, '{y}-{m}-{d}')
|
|
|
- if (this.nfcInteractionList[i].operation === FUNCTION_TYPE.SIGN_IN) {
|
|
|
- } else {
|
|
|
- }
|
|
|
- }
|
|
|
- // console.log(this.nfcInteractionList)
|
|
|
+ this.getNfcInteractionByDay(this.value)
|
|
|
})
|
|
|
},
|
|
|
/** 年月份发生变化 */
|
|
|
handleYearMonthChanged(date) {
|
|
|
// console.log(date)
|
|
|
- this.param.year = date.getFullYear()
|
|
|
- this.param.month = this.checkTime(date.getMonth() + 1)
|
|
|
- this.param.day = this.checkTime(date.getDate())
|
|
|
- if (this.param.month !== this.month) {
|
|
|
- this.month = this.param.month
|
|
|
- this.getNfcInteraction();
|
|
|
+ if (date !== null) {
|
|
|
+ this.param.year = date.getFullYear()
|
|
|
+ this.param.month = this.checkTime(date.getMonth() + 1)
|
|
|
+ this.param.day = this.checkTime(date.getDate())
|
|
|
+ if (this.param.month !== this.month) {
|
|
|
+ this.month = this.param.month
|
|
|
+ this.getNfcInteraction();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.getNfcInteractionByDay(date)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
// 时间处理,如果时间小于10 ，则再前面加一个'0'
|
|
|
@@ -123,15 +243,85 @@ export default {
|
|
|
},
|
|
|
//点击日期块
|
|
|
calendarOnClick(date) {
|
|
|
+ // console.log('date == ' + date)
|
|
|
this.handleYearMonthChanged(date)
|
|
|
},
|
|
|
formatterDate(param) {
|
|
|
return unixToDate(param)
|
|
|
},
|
|
|
+ // 获取选择日的nfc数据
|
|
|
+ getNfcInteractionByDay(date) {
|
|
|
+ let startTime = date.getFullYear() + '-' + this.checkTime(date.getMonth() + 1) + '-' + this.checkTime(date.getDate()) + ' 00:00:00'
|
|
|
+ let endTime = date.getFullYear() + '-' + this.checkTime(date.getMonth() + 1) + '-' + this.checkTime(date.getDate()) + ' 23:59:59'
|
|
|
+ startTime = new Date(startTime).getTime() / 1000;
|
|
|
+ endTime = new Date(endTime).getTime() / 1000;
|
|
|
+
|
|
|
+ // 每次点击都需要清空 this.dayNfcInteractionList
|
|
|
+ this.dayNfcInteractionList = []
|
|
|
+ // 再通过循环，将列表里属于选择日的数据放入 this.dayNfcInteractionList
|
|
|
+ for (let i = 0; i < this.nfcInteractionList.length; i++) {
|
|
|
+ if (startTime <= this.nfcInteractionList[i].create_time && this.nfcInteractionList[i].create_time <= endTime && this.nfcInteractionList[i].components_type === FUNCTION_TYPE.POSITION_COMPONENT) {
|
|
|
+ this.dayNfcInteractionList.push(this.nfcInteractionList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.dayNfcInteractionList.length > 0) {
|
|
|
+ this.changeStyle()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getFunctionString(param) {
|
|
|
+ return FUNCTION_TYPE.getDescFromValue(param)
|
|
|
+ },
|
|
|
+ // 修改时间线的圆圈颜色，打卡为绿色，其他为蓝色，没有为灰色
|
|
|
+ getTimelineItemColor(param) {
|
|
|
+ if (param === FUNCTION_TYPE.SIGN_IN) {
|
|
|
+ return '#4abe84'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return '#409eff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCardString(dayInteraction) {
|
|
|
+ let time = unixToDate(dayInteraction.create_time).substring(11, 16);
|
|
|
+ return time + ' ' + dayInteraction.clerk_name + this.$t('action.in') + dayInteraction.frame_full_name + this.$t('functions.currently') + this.getFunctionString(dayInteraction.components_type)
|
|
|
+ },
|
|
|
+ changeStyle(){
|
|
|
+ const _this = this
|
|
|
+ let myId = ''
|
|
|
+ for (let i = 0; i< _this.dayNfcInteractionList.length; i++) {
|
|
|
+ myId = 'myFrame' + _this.dayNfcInteractionList[i].frame_id
|
|
|
+ var elem = document.getElementById(myId)
|
|
|
+ console.log(myId)
|
|
|
+ console.log(elem)
|
|
|
+ if (elem !== null) {
|
|
|
+ // elem.style = 'text-align: left; margin: 10px 10px 10px 0; background: #d3dce6'
|
|
|
+ elem.style = 'text-align: left; margin: 10px; background: #409eff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAllFrame(){
|
|
|
+ API_FrameGroup.getframestruct(this.$store.getters.partId, FRAME_TYPE.PART).then(res => {
|
|
|
+ this.partTree = res.frameTree[0]
|
|
|
+ console.log(this.partTree)
|
|
|
+ console.log(this.partTree.children)
|
|
|
+ console.log(this.partTree.full_name)
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.el-card {
|
|
|
+ padding: 0;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
|
|
|
+}
|
|
|
+.text-style {
|
|
|
+ width: 90%;
|
|
|
+ overflow: hidden; /*超出的文本隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 溢出用省略号 */
|
|
|
+ white-space: nowrap; /* 溢出不换行 */
|
|
|
+ display: block; /* 将对象作为弹性伸缩盒子模型显示 */
|
|
|
|
|
|
+}
|
|
|
</style>
|
vothin