RFID

rest/project.http

@@ -64,8 +64,8 @@ POST {{record}}/debug/record
 
 {
   "param":{
-    "carNumber": "001",
+    "authId": "1",
-    "type": "1",
+    "type": "2",
     "value":"70000",
     "time":"1607937529000"
   }

src/common/index.styl

@@ -106,6 +106,7 @@
     display: inline-block;
     position: relative;
     top: -10px;
+    z-index: 999;
     text-shadow: rgb(0, 117, 255) 0px 0px 8px;
     font-family: SourceHanSansCN-Bold;
     font-size: 1.2rem;
@@ -120,9 +121,11 @@
 }
 
 .s-pic{
-    width:200px;
+    width:191.85px;
-    height: 100px;
+    height: 107.85px;
-    position: relative;
+    position: absolute;
     top: 10px;
-    left: 10px
+    left: 10px;
+    border-radius: 6px;
+    overflow: hidden;
 }

src/components/Duration/Duration.js

@@ -66,11 +66,6 @@ const mixin = {
             // symbol: 'star',
             data: this.pointTimeHospital,
             color: 'rgb(18, 131, 227)',
-            lineStyle: {
-              shadowColor: '#5cfbff',
-              shadowBlur: 8,
-              width: 4,
-            },
           },
           {
             name: '国际水准',
@@ -79,11 +74,6 @@ const mixin = {
             symbolSize: 6,
             data: this.pointTimeInternation,
             color: 'rgb(30, 231, 231)',
-            lineStyle: {
-              shadowColor: '#5cfbff',
-              shadowBlur: 8,
-              width: 4,
-            },
           },
           {
             name: '当前数据',
@@ -92,11 +82,6 @@ const mixin = {
             symbolSize: 6,
             data: this.pointTimeCurrentList,
             color: 'rgb(227, 18, 187)',
-            lineStyle: {
-              shadowColor: '#5cfbff',
-              shadowBlur: 8,
-              width: 4,
-            },
           },
         ],
       };

src/components/FastEd/FastEd.vue

@@ -9,7 +9,12 @@
         <div class="flex-1">{{ item.b }}</div>
         <div class="flex-1">{{ item.c }}</div>
       </div>
-      <div :key="index" class="flex-1 flex-row" style="height: 25%" v-for="(item, index) in dataList">
+      <div
+        :key="index"
+        class="flex-1 flex-row"
+        style="height: 25%"
+        v-for="(item, index) in dataList"
+      >
         <div class="flex-1">{{ item.a }}</div>
         <div class="flex-1">{{ item.b }}</div>
         <div class="flex-1">{{ item.c }}</div>

src/components/Map/Map.js

@@ -8,7 +8,7 @@ var option = {
       regionHeight: 6, //地图高度
       map: '山西',
       viewControl: {
-        distance: 1000, //地图视角 控制初始大小
+        distance: 350, //地图视角 控制初始大小
         rotateSensitivity: 1, //禁止旋转
         zoomSensitivity: 1, //禁止缩放
       },

src/components/RFID/RFID.styl

@@ -9,25 +9,19 @@
     color: #C8CED5;
     background: url('~assets/rfid-bg.png') no-repeat center;
     background-size: contain;
-    position: absolute;
-}
-
-.list span{
-    display: inline-block;
-    position: relative;
-    top: 25%;
-    width: 100%;
-    height: 50%;
     text-align: center;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 }
 
 .active {
-  width: 5.4rem;
+    width: 5.4rem;
-  height: 5.4rem;
+    height: 5.4rem;
-  font-size: 12px;
+    background: url('~assets/rfid-bg-active.png') no-repeat center;
-  background: url('~assets/rfid-bg-active.png') no-repeat center;
+    background-size: contain;
-  background-size: contain;
-  text-align: center;
 }
 
 .list.active span{
@@ -50,37 +44,37 @@
 }
 
 .list4 {
-    top: 5.5rem;
+    top: 5rem;
     left: 0.5rem;
 }
 
 .list5 {
-    top: 5.5rem;
+    top: 5rem;
     left: 8rem;
 }
 
 .list6 {
-    top: 5.5rem;
+    top: 5rem;
     left: 15.5rem;
 }
 
 .list7 {
-    top: 5.5rem;
+    top: 5rem;
     left: 23rem;
 }
 
 .list8 {
-    top: 10.5rem;
+    top: 10rem;
     left: 4rem;
 }
 
 .list9 {
-    top: 10.5rem;
+    top: 10rem;
     left: 11.5rem;
 }
 
 .list10 {
-    top: 10.5rem;
+    top: 10rem;
     left: 19rem;
 }
 

src/components/RFID/RFID.vue

@@ -13,36 +13,112 @@
   </div>
 </template>
 <script>
+import { mapState, mapActions, mapMutations } from 'vuex';
+
 export default {
   name: 'RFID',
   data() {
     return {
       lists: [
-        { code: 1, active: false, name: '急救医生到场' },
         { code: 1, active: false, name: '急救护士到场' },
+        { code: 1, active: false, name: '急救医生到场' },
         { code: 3, active: false, name: '护士采血' },
         { code: 3, active: false, name: '采血车到场' },
         { code: 4, active: false, name: 'CT室' },
         { code: 8, active: false, name: '介入室' },
-        { code: 8, active: false, name: '抢救室' },
+        { code: 17, active: false, name: '分诊区' },
-        { code: 8, active: false, name: '抢救室' },
+        { code: 18, active: false, name: '平车停放点' },
+        { code: 19, active: false, name: '卒中中心' },
+        { code: 20, active: false, name: '急诊' },
+        { code: 21, active: false, name: '抢救室' },
+        { code: 22, active: false, name: '走廊' },
+        { code: 23, active: false, name: '心电图' },
+        { code: 24, active: false, name: '专用电梯（一楼）' },
+        { code: 25, active: false, name: '专用电梯（四楼）' },
+        { code: 26, active: false, name: 'CCU导管室' },
       ],
       num: 0, //当前正在展示的div
     };
   },
 
   computed: {
+    ...mapState('home', ['rfidMessage']),
     newArr() {
       const arr = this.group(this.lists, 10);
       return arr;
     },
   },
 
+  watch: {
+    weighSensor1(value) {
+      // console.log('value: ', value);
+      // if (value) {
+      //   this.lists[0].number = value.split('');
+      //   console.log('this.lists: ', this.lists);
+      // }
+    },
+  },
+
   mounted() {
-    let i = 0;
+    console.log('收到消息rfid', this.rfidMessage);
-    var t = setInterval(() => {
+    // this.setLight();
+    this.setTime();
+    // this.changePage();
+  },
+
+  methods: {
+    // 数组拆分
+    group(array, subGroupLength) {
+      let index = 0;
+      let newArray = [];
+      while (index < array.length) {
+        newArray.push(array.slice(index, (index += subGroupLength)));
+      }
+      return newArray;
+    },
+
+    // 定时高亮
+    setTime() {
+      let i = 0;
+      setInterval(() => {
+        this.lists.forEach((element, j) => {
+          if (j === i) {
+            element.active = true;
+            // 翻页
+            for (let a = 0; a < this.newArr.length; a++) {
+              const arr = this.newArr[a];
+              const item = arr.find(item => item.name === element.name);
+              if (item) {
+                this.num = a;
+              }
+            }
+          } else {
+            element.active = false;
+          }
+        });
+        i++;
+        //如果超过数组长度，清除定时器
+        if (i === this.lists.length) {
+          i = 0;
+        }
+      }, 1500);
+    },
+
+    // 分页
+    changePage() {
+      setInterval(() => {
+        this.num++;
+        if (this.num === this.newArr.length) {
+          this.num = 0;
+        }
+      }, 5000);
+    },
+
+    // 收到消息高亮
+    setLight(code) {
+      // debugger;
       this.lists.forEach((element, j) => {
-        if (j === i) {
+        if (element.code === code) {
           element.active = true;
           // 翻页
           for (let a = 0; a < this.newArr.length; a++) {
@@ -56,22 +132,6 @@ export default {
           element.active = false;
         }
       });
-      i++;
-      //如果超过数组长度，清除定时器
-      if (i === this.lists.length) {
-        i = 0;
-      }
-    }, 1500);
-  },
-
-  methods: {
-    group(array, subGroupLength) {
-      let index = 0;
-      let newArray = [];
-      while (index < array.length) {
-        newArray.push(array.slice(index, (index += subGroupLength)));
-      }
-      return newArray;
     },
   },
 };

src/store/modules/messages/mutations.js

@@ -95,6 +95,7 @@ const mutations = {
    * @param {*} data
    */
   messagesAddRfid(state, data) {
+    console.log('RFID: ', data);
     state.rfidMessage = data;
   },
 

src/views/Index/Index.vue

@@ -1,124 +1,132 @@
 <template>
   <div class="wrap">
-    <div class="bg-left">
+    <div v-if="!showVideo">
-      <img class="pic" src="~assets/bg-left.png" />
+      <div class="bg-left">
-    </div>
+        <img class="pic" src="~assets/bg-left.png" />
-    <div class="bg-top">
-      <img class="pic" src="~assets/bg-top.png" />
-      <div class="animation">
-        <!-- <video src="~assets/top-video.webm"></video> -->
-        <video
-          autoplay
-          height="162"
-          loop
-          src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
-          style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%)"
-        ></video>
       </div>
-      <span class="bg-title">盐湖区人民医院数据看板</span>
+      <div class="bg-top">
-    </div>
+        <img class="pic" src="~assets/bg-top.png" />
-    <div class="bg-right">
+        <div class="animation">
-      <img class="pic" src="~assets/bg-right.png" />
+          <!-- <video src="~assets/top-video.webm"></video> -->
-    </div>
+          <video
-    <div class="bg-bottom">
+            autoplay
-      <img class="pic" src="~assets/bg-bottom.png" />
+            height="162"
-    </div>
+            loop
-    <div class="time">{{ nowTime }}</div>
+            src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
-    <!--内容区-->
+            style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%)"
-    <div class="content d-flex flex-column">
+          ></video>
-      <!-- 第一行 -->
+        </div>
-      <div class="flex-2 flex-row">
+        <span class="bg-title">盐湖区人民医院数据看板</span>
-        <div class="flex-1 ma-2">
+      </div>
-          <div class="d-flex flex-column flex-1">
+      <div class="bg-right">
+        <img class="pic" src="~assets/bg-right.png" />
+      </div>
+      <div class="bg-bottom">
+        <img class="pic" src="~assets/bg-bottom.png" />
+      </div>
+      <div class="time">{{ nowTime }}</div>
+      <!--内容区-->
+      <div class="content d-flex flex-column">
+        <!-- 第一行 -->
+        <div class="flex-2 flex-row">
+          <div class="flex-1 ma-2">
             <div class="d-flex flex-column flex-1">
-              <div class="box-top">
+              <div class="d-flex flex-column flex-1">
-                <span>急救数量统计</span>
+                <div class="box-top">
+                  <span>急救数量统计</span>
+                </div>
+                <div class="flex-1 fill-width box-bottom">
+                  <statistics class="flex-1" />
+                </div>
               </div>
-              <div class="flex-1 fill-width box-bottom">
+              <div style="width: 100%; height: 6%"></div>
-                <statistics class="flex-1" />
+              <div class="d-flex flex-column flex-1">
+                <div class="box-top">
+                  <span>急救时长分析</span>
+                </div>
+                <div class="flex-1 fill-width box-bottom">
+                  <duration class="flex-1" />
+                </div>
               </div>
             </div>
-            <div style="width: 100%; height: 6%"></div>
+          </div>
+          <div class="flex-2 ma-2" style="position:relative">
+            <iframe
+              class="fill-width fill-height"
+              src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"
+            ></iframe>
+            <!-- 地图 -->
+            <shanxi-map class="sxmap" />
+            <!-- 视频 -->
+            <!-- <div class="s-pic">
+              <img @click="showVideo = true" class="fill-width fill-height" src="~assets/aaa.png" />
+            </div>-->
+          </div>
+          <div class="flex-1 ma-2">
             <div class="d-flex flex-column flex-1">
-              <div class="box-top">
+              <div class="d-flex flex-column flex-1">
-                <span>急救时长分析</span>
+                <div class="box-top">
+                  <span>振动传感器</span>
+                </div>
+                <div class="flex-1 fill-width box-bottom">
+                  <sensor class="flex-1" />
+                </div>
               </div>
-              <div class="flex-1 fill-width box-bottom">
+              <div style="width: 100%; height: 6%"></div>
-                <duration class="flex-1" />
+              <div class="d-flex flex-column flex-1">
+                <div class="box-top">
+                  <span>称重传感器</span>
+                </div>
+                <div class="flex-1 fill-width box-bottom">
+                  <div class="flex-1">
+                    <load-cells />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="flex-2 ma-2" style="position:relative">
+        <!-- 第三行 -->
-          <iframe
+        <div style="width: 100%; height: 2%"></div>
-            class="fill-width fill-height"
+        <div class="flex-1 flex-row">
-            src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"
+          <div class="flex-1 ma-2">
-          ></iframe>
-          <shanxi-map class="sxmap" />
-          <!-- <div class="bg s-pic"> -->
-          <!-- </div> -->
-        </div>
-        <div class="flex-1 ma-2">
-          <div class="d-flex flex-column flex-1">
             <div class="d-flex flex-column flex-1">
               <div class="box-top">
-                <span>振动传感器</span>
+                <span>FAST ED结果</span>
               </div>
               <div class="flex-1 fill-width box-bottom">
-                <sensor class="flex-1" />
+                <fast-ed class="flex-1" />
               </div>
             </div>
-            <div style="width: 100%; height: 6%"></div>
+          </div>
+          <!-- 第二列 -->
+          <div class="flex-2 ma-2">
             <div class="d-flex flex-column flex-1">
               <div class="box-top">
-                <span>称重传感器</span>
+                <span>智慧平车面板数据</span>
               </div>
               <div class="flex-1 fill-width box-bottom">
-                <div class="flex-1">
+                <panel class="flex-1" />
-                  <load-cells />
-                </div>
               </div>
             </div>
           </div>
-        </div>
+          <!-- 第三列 -->
-      </div>
+          <div class="flex-1 ma-2">
-      <!-- 第三行 -->
+            <div class="d-flex flex-column flex-1">
-      <div style="width: 100%; height: 2%"></div>
+              <div class="box-top">
-      <div class="flex-1 flex-row">
+                <span>RFID</span>
-        <div class="flex-1 ma-2">
+              </div>
-          <div class="d-flex flex-column flex-1">
+              <div class="flex-1 fill-width box-bottom">
-            <div class="box-top">
+                <r-f-i-d />
-              <span>FAST ED结果</span>
+              </div>
-            </div>
-            <div class="flex-1 fill-width box-bottom">
-              <fast-ed class="flex-1" />
-            </div>
-          </div>
-        </div>
-        <!-- 第二列 -->
-        <div class="flex-2 ma-2">
-          <div class="d-flex flex-column flex-1">
-            <div class="box-top">
-              <span>智慧平车面板数据</span>
-            </div>
-            <div class="flex-1 fill-width box-bottom">
-              <panel class="flex-1" />
-            </div>
-          </div>
-        </div>
-        <!-- 第三列 -->
-        <div class="flex-1 ma-2">
-          <div class="d-flex flex-column flex-1">
-            <div class="box-top">
-              <span>RFID</span>
-            </div>
-            <div class="flex-1 fill-width box-bottom">
-              <r-f-i-d />
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div v-else>
+      <img class="fill-width fill-height" src="~assets/aaa.png" />
+    </div>
   </div>
 </template>
 
@@ -141,6 +149,7 @@ export default {
     return {
       nowTime: new Date(),
       str: '',
+      showVideo: false,
     };
   },