车辆总览交互

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/vehicleMent/components/bigScreenHead/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bigScreenHead">
-    <div class="tit">汽车</div>
+    <div class="tit">车辆总览</div>
   </div>
 </template>
 

src/views/vehicleMent/overview/index.vue

@@ -35,15 +35,24 @@
             <div
               class="bg_box"
               :style="{
-                top: `calc(${100 - item.carOrdinate + '%'} - 26px)`,
+                top: `calc(${100 - item.ordinate + '%'} - 26px)`,
-                left: item.carAbscissa
+                left: item.abscissa
-                  ? `calc(${item.carAbscissa + '%'} - 16px)`
+                  ? `calc(${item.abscissa + '%'} - 16px)`
                   : 'calc(0% - 16px)',
               }"
-              v-for="item in vehicleList"
+              v-for="item in cardList"
               :key="item.id"
             >
+              <el-tooltip
+                v-model="item.disabled"
+                :hide-after="3000"
+                content="您有一条新消息"
+                placement="top"
+                effect="light"
+              >
+                <!-- manual -->
                 <i class="el-icon-location"></i>
+              </el-tooltip>
             </div>
           </div>
         </div>
@@ -132,53 +141,39 @@ export default {
       scrollList1: [],
       data: [
         {
-          readId: 1,
+          carAbscissa: "49.969116",
-          readName: "实际名称1",
+          carId: "皖A 12345",
-          carId: "车牌号1",
+          carOrdinate: "59.233448",
-          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          cardNumber: "0000090759",
-          status: 1,
+          createTime: 1645148782783,
+          distance: 80,
+          driverName: "小王",
+          driverPhone: "13166778765",
+          lowVoltage: "0",
+          northAngle: 0,
+          readId: 254,
+          readName: "254号读卡器",
+          status: "0",
         },
         {
-          readId: 2,
+          carAbscissa: "49.969116",
-          readName: "实际名称2",
+          carId: "皖A 12345",
-          carId: "车牌号2",
+          carOrdinate: "59.233448",
-          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          cardNumber: "0000090759",
-          status: 1,
+          createTime: 1645148782783,
-        },
+          distance: 80,
-        {
+          driverName: "小王",
-          readId: 3,
+          driverPhone: "13166778765",
-          readName: "实际名称3",
+          lowVoltage: "0",
-          carId: "车牌号3",
+          northAngle: 0,
-          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
+          readId: 254,
-          status: 0,
+          readName: "254号读卡器",
-        },
+          status: "0",
-        {
-          readId: 4,
-          readName: "实际名称4",
-          carId: "车牌号4",
-          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
-          status: 0,
-        },
-        {
-          readId: 5,
-          readName: "实际名称5",
-          carId: "车牌号5",
-          // createTime: this.parseTime(new Date(), "{h}:{i}:{s}"),
-          status: 1,
         },
       ],
     };
   },
   methods: {
-    setDataList(obj) {
-      this.scrollList1.push(obj);
-      this.listData = Array(this.scrollList1.length).fill(0);
-      this.$refs.seamlessScroll.reset();
-      setTimeout(() => {
-        this.$refs.seamlessScroll.$refs.wrap.scrollTop =
-          this.$refs.seamlessScroll.$refs.wrap.scrollHeight;
-      }, 0);
-    },
     getUrl() {
       this.request({
         url: "/getSocketUrl",
@@ -211,6 +206,26 @@ export default {
     error: function () {
       console.log("连接错误");
     },
+    setDataList(obj) {
+      this.scrollList1.push(obj);
+      this.listData = Array(this.scrollList1.length).fill(0);
+      this.$refs.seamlessScroll.reset();
+      setTimeout(() => {
+        this.$refs.seamlessScroll.$refs.wrap.scrollTop =
+          this.$refs.seamlessScroll.$refs.wrap.scrollHeight;
+      }, 0);
+      this.setLeftNew(obj);
+    },
+    setLeftNew(obj) {
+      this.cardList.map((item) => {
+        if (item.id == obj.readId) {
+          item.disabled = true;
+          setTimeout(() => {
+            item.disabled = false;
+          }, 3000);
+        }
+      });
+    },
     getMessage(msg) {
       let data = JSON.parse(msg.data);
       if (data.isLocationUpdate) {
@@ -219,9 +234,8 @@ export default {
       // let time = setInterval(() => {
       //   data.isLocationUpdate = Object.assign(
       //     {},
-      //     this.data[Math.floor(Math.random() * 5)]
+      //     this.data[Math.floor(Math.random() * 2)]
       //   );
-      //   data.isLocationUpdate["createTime"] = +new Date();
       //   if (this.scrollList1.length > 20) {
       //     return clearInterval(time);
       //   }
@@ -268,15 +282,16 @@ export default {
       type: "3",
     }).then((res) => {
       this.dataInfo = res.rows[0] || {};
-      bigPicList().then((response) => {
-        this.vehicleList = response.data;
       readerCardList().then((response) => {
-          console.log(response.rows);
+        this.cardList = response.rows.map((item) => {
+          return { ...item, disabled: false };
+        });
         this.loading = false;
-          this.cardList = response.rows;
         this.getUrl();
       });
-      });
+      // bigPicList().then((response) => {
+      //   this.vehicleList = response.data;
+      // });
     });
   },
 };

src/views/vehicleMent/reader.vue

@@ -82,6 +82,7 @@
       <el-table-column label="横坐标" align="center" prop="abscissa" />
       <el-table-column label="纵坐标" align="center" prop="ordinate" />
       <el-table-column label="与正北夹角" align="center" prop="northAngle" />
+      <el-table-column label="区域范围" align="center" prop="recordDistance" />
       <el-table-column label="录入时间" align="center" prop="createTime" />
       <!-- <el-table-column
         label="创建时间"
@@ -158,6 +159,12 @@
             placeholder="请输入与正北夹角"
           />
         </el-form-item>
+        <el-form-item label="区域范围" prop="recordDistance">
+          <el-input
+            v-model.number="form.recordDistance"
+            placeholder="请输入区域范围"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -228,6 +235,10 @@ export default {
           { required: true, message: "与正北夹角不能为空", trigger: "blur" },
           { type: "number", message: "必须为数字值", trigger: "blur" },
         ],
+        recordDistance: [
+          { required: true, message: "区域范围不能为空", trigger: "blur" },
+          { type: "number", message: "必须为数字值", trigger: "blur" },
+        ],
       },
     };
   },
@@ -259,6 +270,7 @@ export default {
         abscissa: undefined,
         ordinate: undefined,
         northAngle: undefined,
+        recordDistance: undefined,
       };
       this.resetForm("form");
     },