开发定位轨迹

languages/en.js

@@ -139,6 +139,7 @@ module.exports = {
     searchDateRange: 'Search time period',
     to: ' to ',
     of: ' of ',
+    in: ' in ',
     index: 'Serial number',
     null: 'None',
     all: 'All',
@@ -151,7 +152,10 @@ module.exports = {
     monthly: 'by month',
     yearly: 'by year',
     choiceMonth: 'Choose month',
-    choiceHYear: 'Choose year',
+    choiceYear: 'Choose year',
+    today: 'today',
+    yesterday: 'yesterday',
+    aWeekAgo: 'a week ago',
     lastWeek: 'Last week',
     lastMonth: 'Last month',
     lastThreeMonths: 'Last three months',

languages/es.js

@@ -137,8 +137,9 @@ module.exports = {
     paste: 'pegar',
     colour: 'Color',
     searchDateRange: 'Período de tiempo de búsqueda',
-    to: ' Para ',
-    of: ' De ',
+    to: ' para ',
+    of: ' de ',
+    in: ' en el interior ',
     index: 'Número de serie',
     null: 'Ninguno',
     all: 'todo',
@@ -151,7 +152,10 @@ module.exports = {
     monthly: 'por mes',
     yearly: 'por año',
     choiceMonth: 'Elegir mes',
-    choiceHYear: 'Elegir año',
+    choiceYear: 'Elegir año',
+    today: 'Hoy',
+    yesterday: 'Ayer',
+    aWeekAgo: 'Hace una semana',
     lastWeek: 'La semana pasada',
     lastMonth: 'Último mes',
     lastThreeMonths: 'Últimos tres meses',

languages/ru-RU.js

@@ -27,7 +27,7 @@ module.exports = {
     systemCreate: 'Создание системы',
     cancelHandle: 'Отменить операцию! ',
     handleSuccess: 'Операция выполнена успешно',
-    handleFailed:'Ошибка операции',
+    handleFailed: 'Ошибка операции',
     saveEdit: 'Сохранить изменения',
     saveSettings: 'Сохранить настройки',
     deleteSettings: 'Удалить настройки',
@@ -139,10 +139,11 @@ module.exports = {
     searchDateRange: 'Период поиска',
     to: ' к ',
     of: ' в ',
+    in: ' Внутри ',
     index: 'Серийный номер',
     null: 'Нет',
     all: 'Все',
-    selectionData: 'Выберите дату и время',
+    choiceData: 'Выберите дату и время',
     startDate: 'Дата начала',
     endDate: 'Дата окончания',
     startTime: 'Время начала',
@@ -150,8 +151,11 @@ module.exports = {
     daily: 'день',
     monthly: 'по месяцам',
     yearly: 'по годам',
-    selectionMonth: 'Выберите месяц',
-    selectionHYear: 'Выберите год',
+    choiceMonth: 'Выберите месяц',
+    choiceYear: 'Выберите год',
+    today: 'Сегодня',
+    yesterday: 'Вчера',
+    aWeekAgo: 'Неделю назад.',
     lastWeek: 'На прошлой неделе',
     lastMonth: 'Последний месяц',
     lastThreeMonths: 'Последние три месяца',
@@ -211,8 +215,8 @@ module.exports = {
     inputParamName: 'Введите имя параметра',
     inputParamValue: 'Введите значение параметра',
     addParam: 'Дополнительные параметры',
-    opendebug:'Отладка',
-    reboot:'Перезагрузка'
+    opendebug: 'Отладка',
+    reboot: 'Перезагрузка'
   },
   member: {
     face: 'Аватар',

languages/zh-CN.js

@@ -139,6 +139,7 @@ module.exports = {
     searchDateRange: '搜索时间段',
     to: '至',
     of: '的',
+    in: '在',
     index: '序号',
     null: '无',
     all: '全部',
@@ -151,7 +152,10 @@ module.exports = {
     monthly: '按月',
     yearly: '按年',
     choiceMonth: '选择月份',
-    choiceHYear: '选择年份',
+    choiceYear: '选择年份',
+    today: '今天',
+    yesterday: '昨天',
+    aWeekAgo: '一周前',
     lastWeek: '最近一周',
     lastMonth: '最近一个月',
     lastThreeMonths: '最近三个月',

src/api/ncs_clerk.js

@@ -88,13 +88,20 @@ export function updateParentById(params) {
     data: params
   })
 }
-export function getRoleGroupClerk(partId) {
+export function getRoleGroupClerkNoDoctor(partId) {
   return request({
     url: `/ncs/clerk/getrolegroupclerk/${partId}`,
     method: 'GET'
   })
 }
 
+export function getRoleGroupClerk(partId) {
+  return request({
+    url: `/ncs/clerk/get_role_group_clerk/${partId}`,
+    method: 'GET'
+  })
+}
+
 export function getClerkManageFrame(clerkId,frameRootType) {
   return request({
     url: `/ncs/clerk/getclerkmanageframe/${clerkId}/${frameRootType}`,

src/components/YearMonthPicker/src/main.vue

@@ -13,7 +13,7 @@
       :clearable="clearable"
       :type="date_type"
       :value-format="date_type === 'year' ? 'yyyy' : date_type === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-      :placeholder="date_type === 'month' ? this.$t('action.choiceMonth') : this.$t('action.choiceHYear')"
+      :placeholder="date_type === 'month' ? this.$t('action.choiceMonth') : this.$t('action.choiceYear')"
       :picker-options="{disabledDate(time) { return time.getTime() > Date.now() }}"
       @change="handleDateChange" />
   </div>

src/utils/domain.js

@@ -48,8 +48,8 @@ module.exports = {
 // docker run -idt -p 8007:80 -e uiVersion=2 --name ncs-ui-yz --log-opt max-size=500m --log-opt max-file=1  -v /etc/localtime:/etc/localtime --restart always  registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.77
 //
 // 网盘医院版
-// docker build -t   registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.122 .
-// docker push registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.122
+// docker build -t   registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.124 .
+// docker push registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.124
 // docker pull registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.47
 // 删除ui
 // docker run -idt -p 80:80 --name ncs-ui --log-opt max-size=500m --log-opt max-file=1  -v /etc/localtime:/etc/localtime --restart always  registry.cn-shenzhen.aliyuncs.com/wdkl/hp_ui:bdhp1.119

src/views/ncs-clerk-frame-manage/components/employeeView.vue

@@ -246,6 +246,7 @@
 
 <script>
     import * as API_Clerk from '@/api/ncs_clerk'
+    import {getRoleGroupClerkNoDoctor} from "@/api/ncs_clerk";
 
     const uiVersion = domain.uiVersion
     const groupBy = (arr, func) =>
@@ -288,7 +289,7 @@
         },
         methods: {
             getRoleGroupClerk() {
-                API_Clerk.getRoleGroupClerk(this.$store.getters.partId).then(res => {
+                API_Clerk.getRoleGroupClerkNoDoctor(this.$store.getters.partId).then(res => {
                     this.clerks = {...res}
                     this.currentClerk = {...this.clerks[Object.keys(this.clerks)[0]][0]}
                     this.getClerkManageFrame(this.currentClerk.clerk_id, 4)

src/views/nfc-interaction/nfcCalender.vue

@@ -16,7 +16,7 @@
                 <div style="margin: auto;min-width: 90px;min-height: 70px">
 <!--                <div style="margin: auto">-->
                   {{ data.day.split('-').slice(2).join('-') }}
-                  <div style="float: right" class="signIn" v-if="isSignInFunction(data.day)"></div>
+                  <p style="float: right" class="signIn" v-if="isSignInFunction(data.day)"/>
 <!--                    <p style="float: right" class="budge green" v-if="isSignInFunction(data.day)"></p>-->
 <!--                    <p style="float: right" class="budge blue" v-if="isOtherFunction(data.day)"></p>-->
 
@@ -63,6 +63,7 @@ import { parseTime } from "@/utils";
 import {unixToDate} from "@/utils/Foundation";
 import * as API_Clerk from "@/api/ncs_clerk";
 import {getClerksByShopId} from "@/api/ncs_clerk";
+import log from "@/views/vital-sign/log";
 export default {
   name: "nfc-calender",
   // clerkId: {
@@ -76,6 +77,8 @@ export default {
       loading: false,
       mount: "",
       param: {
+        clerk_id: null,
+        type: 'MONTH'
       },
       value: new Date(),
       month: "",
@@ -115,7 +118,6 @@ export default {
   },
   mounted() {
     this.value = new Date()
-    this.calendarOnClick(this.value)
     this.getClerkList()
   },
   methods: {
@@ -123,6 +125,8 @@ export default {
       this.loading = true
       API_Clerk.getClerksByShopId(this.$store.getters.partId).then(res => {
         this.clerkList = res
+        this.param.clerk_id = this.clerkList[0].clerk_id
+        this.calendarOnClick(this.value)
         this.loading = false
       })
     },
@@ -154,12 +158,15 @@ export default {
     /** 年月份发生变化 */
     handleYearMonthChanged(date) {
       // console.log(object)
-      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) {
+        let _month = this.checkTime(date.getMonth() + 1)
+        if (_month !== this.month) {
+          this.month = _month
+          this.param.year = date.getFullYear()
+          this.param.month = _month
+          this.param.day = this.checkTime(date.getDate())
+          this.getNfcInteraction();
+        }
       }
     },
     // 时间处理,如果时间小于10 ，则再前面加一个'0'
@@ -210,7 +217,6 @@ export default {
           this.dayNfcInteractionList.push(this.nfcInteractionList[i])
         }
       }
-
     },
     formatterDate(param) {
       return unixToDate(param)
@@ -229,7 +235,7 @@ export default {
     },
     getCardString(dayInteraction) {
       let time = unixToDate(dayInteraction.create_time).substring(11, 16);
-      return time + '  ' + dayInteraction.clerk_name + this.$t('functions.currently') + this.getFunctionString(dayInteraction.operation)
+      return time + '  ' + dayInteraction.clerk_name + this.$t('action.in') +  dayInteraction.frame_full_name + this.$t('functions.currently') + this.getFunctionString(dayInteraction.components_type)
     }
   }
 }
@@ -273,7 +279,7 @@ export default {
   border-top-color: transparent;
   border-left-color: transparent;
   transform: rotate(45deg);
-  margin: 36px 110px;
+  margin: 36px 0;
   /*margin: auto;*/
 }
 

src/views/nfc-interaction/nfcInteraction.vue

@@ -2,64 +2,61 @@
 
   <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-row>
+      <el-col :span="6">
+<!--      <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-row>
-<!--      <el-col :span="24" class="frame" style="margin: 15px auto auto" >-->
-<!--        <el-tabs tab-position="left" style="margin: 20px;height: 700px" >-->
-<!--          <el-tab-pane label="用户管理">用户管理</el-tab-pane>-->
-<!--          <el-tab-pane label="配置管理">配置管理</el-tab-pane>-->
-<!--          <el-tab-pane label="角色管理">角色管理</el-tab-pane>-->
-<!--          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>-->
-<!--        </el-tabs>-->
-<!--      </el-col>-->
-      <el-menu>
-        <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-submenu index="1">
-          <template slot="title">
-            <i class="el-icon-location"></i>
-            <span>导航一</span>
-          </template>
-          <el-menu-item-group>
-            <template slot="title">分组一</template>
-            <el-menu-item index="1-1">选项1</el-menu-item>
-            <el-menu-item index="1-2">选项2</el-menu-item>
-          </el-menu-item-group>
-          <el-menu-item-group title="分组2">
-            <el-menu-item index="1-3">选项3</el-menu-item>
-          </el-menu-item-group>
-          <el-submenu index="1-4">
-            <template slot="title">选项4</template>
-            <el-menu-item index="1-4-1">选项1</el-menu-item>
+        <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-submenu>
         </el-menu>
+      </el-col>
+
+      <el-col :span="18">
+<!--        <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-row>
+          <span style="margin-left: 10px;float: right" >
+            <span>{{ this.$t('interaction.selectData') }}</span>
+            <en-year-month-picker :bool-day="true" @changed="handleYearMonthChanged" />
+          </span>
+        </el-row>
+
+        <el-row style="margin: 15px" :gutter="20">
+          <el-col :span="8" v-for="(o, index) in 2" :key="o">
+            <el-card  class="_el-card">
+
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -80,19 +77,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);
@@ -105,20 +102,35 @@ export default {
       loading: false,
       mount: "",
       param: {
+        clerk_id: null,
+        type: 'MONTH'
       },
-      value: new Date(),
-      month: "",
+      year: '',
+      month: '',
+      day: '',
       nfcInteractionList: [],
       dayNfcInteractionList: [],
       clerkList: [],
+      currentClerk: {}
     }
   },
   mounted() {
-    this.value = new Date()
-    this.calendarOnClick(this.value)
-    this.getClerkList()
+    // this.getClerkList()
+    this.getRoleGroupClerk()
   },
   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.getNfcInteraction()
+    },
     getClerkList() {
       this.loading = true
       API_Clerk.getClerksByShopId(this.$store.getters.partId).then(res => {
@@ -126,6 +138,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()
@@ -149,16 +169,59 @@ export default {
     },
     /** 年月份发生变化 */
     handleYearMonthChanged(date) {
-      // console.log(date)
-      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
+      console.log("date == " +  date)
+      console.log("date.type == " +  date.type)
+      console.log("date.year == " +  date.year)
+      console.log("date.month == " +  date.month)
+      if (date.type === 'YEAR') {
+        // 如果替换成按年来，就必须清空this.month，否则切换回按月可能会重复
+        this.month = ''
+
+        this.param.type = 'YEAR'
+        this.param.year = date.year
+        this.getNfcInteraction();
+        console.log(this.param)
+      }
+      else if (date.type === 'MONTH') {
+        // 如果替换成按月来，就必须清空this.year，否则切换会按年可能会重复
+        this.year = ''
+
+        let _month = date.month
+        if (_month !== this.month) {
+          this.month = _month
+          this.param.type = 'MONTH'
+          this.param.year = date.year
+          this.param.month = _month
+          console.log(this.param)
+          this.getNfcInteraction();
+        }
+      }
+      else if (date.type === 'DATE') {
+        // 如果替换成按日来，就必须清空this.year，否则切换会按年可能会重复
+        this.year = ''
+        this.day = this.checkTime(date.date_val.getDate())
+
+        let _month = this.checkTime(date.date_val.getMonth() + 1)
+        if (_month !== this.month) {
+          this.month = _month
+
+          this.param.type = 'MONTH'
+          this.param.year = date.date_val.getFullYear()
+          this.param.month = _month
+          console.log(this.param)
           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();
+      //   }
+      // }
     },
     // 时间处理,如果时间小于10 ，则再前面加一个'0'
     checkTime(i) {
@@ -179,10 +242,10 @@ export default {
 </script>
 
 <style scoped>
-
-.frame{
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
-  border-radius: 0
+._el-card {
+  padding: 0;
+  min-height: 300px;
+  margin: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
 }
-
 </style>

src/views/nfc-interaction/nfcPosition.vue

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