修改小组件统计展示方式

src/views/nfc-interaction/nfcInteraction.vue

@@ -2,7 +2,7 @@
 
   <div class="container">
     <el-row>
-      <el-col :span="6">
+      <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>-->
@@ -29,7 +29,7 @@
         </el-menu>
       </el-col>
 
-      <el-col :span="18">
+      <el-col :span="20">
 <!--        <el-date-picker-->
 <!--            style="float: right"-->
 <!--            v-model="value"-->
@@ -49,12 +49,48 @@
           </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-row style="margin: 20px 20px 0 20px" :gutter="30">
+          <el-col :span="8">
+            <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight)+'px'}" >
+              <div style="padding: 10px">
+                <el-timeline v-if="this.nfcInteractionList.length > 0" style="margin: 10px">
+                  <el-timeline-item
+                      v-for="(dayInteraction, index) in this.nfcInteractionList"
+                      :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>
+              </div>
+            </el-scrollbar>
+          </el-col>
 
-            </el-card>
+          <el-col :span="16">
+            <el-collapse v-model="activeName" style="margin: 10px">
+              <el-collapse-item v-for="(item, index) in functions" :index="index+''" :key="index" :title="titleStr(item)" :name="item.function_code">
+                <span style="margin: 10px"> {{ nfcInteractionList.length }} </span>
+              </el-collapse-item>
+            </el-collapse>
           </el-col>
+<!--          <div class="table-wrapper" style="margin: 15px">-->
+<!--            <el-table :data="tableData" :default-sort = "{prop: 'count', order: 'descending'}" stripe border style="width: 100%">-->
+<!--              <el-table-column type="index" width="100" :label="this.$t('action.index')" align="center" />-->
+<!--              <el-table-column prop="name" :label="this.$t('interaction.actionType')" min-width="130" align="center" />-->
+<!--              <el-table-column prop="count" :label="this.$t('interaction.actionTime')" min-width="130" align="center" sortable />-->
+<!--            </el-table>-->
+<!--          </div>-->
         </el-row>
       </el-col>
     </el-row>
@@ -67,9 +103,15 @@ import * as API_nfcInteraction from "@/api/nfc_interatcion";
 import {parseTime} from "@/utils";
 import {FUNCTION_TYPE} from "@/utils/enum/FunctionEnum";
 import {unixToDate} from "@/utils/Foundation";
+import * as API_Function from "@/api/ncs_functions";
 
 export default {
   name: "nfcInteractionManager",
+  computed: {
+    asideHeight() {
+      return this.mainAreaHeight - 100
+    }
+  },
   data() {
     return {
       pickerOptions: {
@@ -105,18 +147,23 @@ export default {
         clerk_id: null,
         type: 'MONTH'
       },
+      value: null,
+      dateType: '',
       year: '',
       month: '',
       day: '',
       nfcInteractionList: [],
-      dayNfcInteractionList: [],
       clerkList: [],
-      currentClerk: {}
+      currentClerk: {},
+      functions: [],
+      activeName: ''
     }
   },
   mounted() {
+    this.value = new Date()
     // this.getClerkList()
     this.getRoleGroupClerk()
+    this.getAllFunctions()
   },
   methods: {
     handleOpen() {
@@ -129,7 +176,7 @@ export default {
       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()
+      this.clerkChange(this.value)
     },
     getClerkList() {
       this.loading = true
@@ -153,75 +200,39 @@ export default {
     // 获取选择月的nfc数据
     getNfcInteraction() {
       this.loading = true
+      console.log(this.param.clerk_id)
+      console.log(this.param)
       API_nfcInteraction.get_list_by_clerk_id(this.param).then(r => {
+        this.nfcInteractionList = r.filter(i => i.components_type !== FUNCTION_TYPE.MANAGE_BED);
+        console.log(this.nfcInteractionList)
         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)
       })
     },
     /** 年月份发生变化 */
     handleYearMonthChanged(date) {
-      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();
-        }
+        this.param.type = 'MONTH'
+        this.param.year = date.year
+        this.param.month = date.month
+        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.value = date.date_val
 
-          this.param.type = 'MONTH'
-          this.param.year = date.date_val.getFullYear()
-          this.param.month = _month
-          console.log(this.param)
-          this.getNfcInteraction();
-        }
+        this.param.type = 'MONTH'
+        this.param.year = this.value.getFullYear()
+        this.param.month = this.checkTime(this.value.getMonth() + 1)
+        this.param.day = this.checkTime(this.value.getDate())
+        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();
-      //   }
-      // }
+      // 应该在随后才将这个放进去
+      this.dateType = date.type
     },
     // 时间处理,如果时间小于10 ，则再前面加一个'0'
     checkTime(i) {
@@ -237,11 +248,40 @@ export default {
     formatterDate(param) {
       return unixToDate(param)
     },
+    getAllFunctions(){
+      API_Function.getAll().then(res=>{
+        this.functions = res.filter(i => i.function_code !== FUNCTION_TYPE.MANAGE_BED)
+        this.activeName = this.functions[0].function_code
+      })
+    },
+    titleStr(item) {
+      return this.$t(item.language_dependence_code)
+    },
+    // 修改时间线的圆圈颜色，打卡为绿色，其他为蓝色，没有为灰色
+    getTimelineItemColor(param) {
+      if (param === FUNCTION_TYPE.POSITION_COMPONENT) {
+        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)
+    },
+    getFunctionString(param) {
+      return FUNCTION_TYPE.getDescFromValue(param)
+    },
   }
 }
 </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)
+}
 ._el-card {
   padding: 0;
   min-height: 300px;

src/views/nfc-interaction/nfcPosition.vue

@@ -43,73 +43,79 @@
           </el-date-picker>
         </el-row>
 
-        <el-row style="margin: 30px" :gutter="30">
+        <el-row style="margin: 20px 20px 0 20px" :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-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight)+'px'}" >
+              <div style="padding: 10px">
+                <el-timeline v-if="this.dayNfcInteractionList.length > 0" style="margin: 10px">
+                  <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>
+              </div>
+            </el-scrollbar>
           </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-scrollbar wrap-class="scrollbar-wrapper" :style="{height: (asideHeight)+'px'}">
+              <el-card shadow="never">
+                <el-row :gutter="20">
+                  <el-divider>{{ partStr + ' : ' + this.partTree.full_name }}</el-divider>
+                  <el-col :span="6">
+                    <el-card :id="'myFrame' + this.partTree.id" style="text-align: left; margin: 0 0 15px 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>
+                <el-row
+                    :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-divider>{{ roomStr + ' : ' + item.full_name }}</el-divider>
+                  <el-col :span="24" :label="item.full_name" :value="item.id">
+                    <el-card :id="'myFrame' + item.id" style="text-align: left; margin: 0 0 15px 10px; width: 22%">
+                      <span class="text-style" :title=item.full_name>
                         <svg-icon :icon-class="item.type===4?'sickroom':item.type===5?'bed':'area'"/>
-                        {{ _item.full_name }}
+                        {{ item.full_name }}
                       </span>
                     </el-card>
-                  </el-col>
-                </el-col>
-              </el-row>
 
-            </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: 0 0 15px 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-scrollbar>
           </el-col>
         </el-row>
       </el-col>
@@ -128,6 +134,11 @@ import {FRAME_TYPE} from "@/utils/enum/FrameTypeEnum";
 
 export default {
   name: "nfcPosition",
+  computed: {
+    asideHeight() {
+      return this.mainAreaHeight - 100
+    }
+  },
   data() {
     return {
       pickerOptions: {
@@ -160,15 +171,16 @@ export default {
       loading: false,
       mount: "",
       param: {
-        type: 'MONTH'
+        type: 'DATE'
       },
       value: null,
-      month: "",
       nfcInteractionList: [],
       dayNfcInteractionList: [],
       clerkList: [],
       currentClerk: {},
-      partTree: {}
+      partTree: {},
+      partStr: this.$t('frameManage.part'),
+      roomStr: this.$t('frameManage.room2')
     }
   },
   mounted() {
@@ -225,13 +237,7 @@ export default {
         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)
-        }
+        this.getNfcInteraction();
       }
     },
     // 时间处理,如果时间小于10 ，则再前面加一个'0'
@@ -251,16 +257,11 @@ export default {
     },
     // 获取选择日的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) {
+        if (this.nfcInteractionList[i].components_type === FUNCTION_TYPE.POSITION_COMPONENT) {
           this.dayNfcInteractionList.push(this.nfcInteractionList[i])
         }
       }
@@ -274,7 +275,7 @@ export default {
     },
     // 修改时间线的圆圈颜色，打卡为绿色，其他为蓝色，没有为灰色
     getTimelineItemColor(param) {
-      if (param === FUNCTION_TYPE.SIGN_IN) {
+      if (param === FUNCTION_TYPE.POSITION_COMPONENT) {
         return '#4abe84'
       }
       else {
@@ -288,23 +289,29 @@ export default {
     changeStyle(){
       const _this = this
       let myId = ''
+      let frameId = 0
+      let _partTree = this.partTree
       for (let i = 0; i< _this.dayNfcInteractionList.length; i++) {
-        myId = 'myFrame' + _this.dayNfcInteractionList[i].frame_id
+        frameId = _this.dayNfcInteractionList[i].frame_id
+        myId = 'myFrame' + frameId
         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'
+          const index = this.partTree.children.findIndex((frame) => frame.id === frameId)
+
+          // let frame = this.partTree.children.filter((frame) => frame.id === frameId);
+          if (index !== -1) {
+            elem.style = 'text-align: left; margin: 0 0 15px 10px; width: 22%; background: #4abe84'
+          }
+          else {
+            // elem.style = 'text-align: left; margin: 10px 10px 10px 0; background: #d3dce6'
+            elem.style = 'text-align: left; margin: 0 0 15px 10px; background: #4abe84'
+          }
         }
       }
     },
     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)
       })
     },
   }
@@ -316,12 +323,14 @@ export default {
   padding: 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
 }
+._el-card {
+  box-shadow: 0 0 0 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>