历史轨迹

src/router/modules/index.js

@@ -137,6 +137,14 @@ export default [
           meta: {
             title: "用户健康报告"
           }
+        },
+        {
+          path: "/warnHistory",
+          name: "warnHistory",
+          component: () => import("@/views/PlatFormCenter/EarlyWarningControl/WarnHistory.vue"),
+          meta: {
+            title: "历史布控"
+          }
         }
       ]
   }

src/views/PlatFormCenter/EarlyWarningControl/EarlyWarningControl.vue

@@ -88,7 +88,7 @@
                 {{ scope.row.timeBegin + "至" + scope.row.timeEnd }}
               </div>
             </el-table-column>
-            <el-table-column prop="djsj" label="发送时间" align="center">
+            <el-table-column prop="djsj" label="发送时间" align="center" width="100">
             </el-table-column>
             <el-table-column prop="warn" label="预警结果" align="center">
               <div slot-scope="scope">
@@ -106,7 +106,7 @@
                 />
               </div>
             </el-table-column>
-            <el-table-column label="操作" width="50">
+            <el-table-column label="操作" width="130" align="center">
               <template slot-scope="scope">
                 <el-button
                   type="text"
@@ -114,6 +114,12 @@
                   @click="changeMessage(scope.row)"
                   >编辑</el-button
                 >
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="viewHistory(scope.row)"
+                  >历史布控</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -337,6 +343,19 @@ export default {
       this.GettableData();
     },
     /**
+     * @description: 进入历史布控
+     * @param {*} data
+     * @return {*}
+     */    
+    viewHistory(data){
+      this.$router.push({
+        path: '/warnHistory',
+        query: {
+          imei: data.sbImei
+        }
+      })
+    },
+    /**
      * @description: 重置查询条件
      * @param {*}
      * @return {*}

src/views/PlatFormCenter/EarlyWarningControl/WarnHistory.vue

+<!-- 用户健康报告 -->
+<template>
+  <div class="person-health-report">
+    <div class="main-table">
+      <div class="tableBox">
+        <el-table
+          :data="styleForm.tableData"
+          style="width: 100%"
+          ref="table"
+          :height="600"
+        >
+          <el-table-column
+            align="center"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            v-for="(item, index) in styleForm.tableLabel"
+            :key="index"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="table-pagination">
+        <el-pagination
+          layout="prev, pager, next"
+          :total="totalMessage"
+          :page-size="pageSize"
+          :current-page="currentPageNumber"
+          @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { get, post, postForm } from "@/utils/http.js";
+import defaultSettings from "@/settings.js";
+import PersonHealthReportCharts from "@c/echarts/PersonHealthReportCharts";
+export default {
+  components: {
+    PersonHealthReportCharts,
+  },
+  data() {
+    return {
+      //控制表格数据
+      styleForm: {
+        //配置表格列标题及对应变量
+        tableLabel: [
+          {
+            label: "信息主键编号",
+            prop: "id",
+          },
+          {
+            label: "设备imei",
+            prop: "imei",
+          },
+          {
+            label: "开始时间",
+            prop: "timeBegin",
+          },
+          {
+            label: "时间段",
+            prop: "time",
+          },
+          {
+            label: "任务名称",
+            prop: "rwmc",
+          },
+          {
+            label: "任务类型",
+            prop: "rwlx",
+          },
+          {
+            label: "最新位置",
+            prop: "location",
+          },
+        ],
+        //表格数据
+        tableData: [],
+      },
+      //总数条数
+      totalMessage: 0,
+      //一页几条数据
+      pageSize: 10,
+      //第几页
+      currentPageNumber: 1,
+      //设备sbimei
+      imei: "",
+    };
+  },
+  //方法集合
+  methods: {
+    /**
+     * @description: 当页数发生变化时
+     * @param {*} val 变化后的页数
+     * @return {*}
+     */
+    handleCurrentChange(val) {
+      this.currentPageNumber = val;
+      this.getTableData();
+    },
+    /**
+     * @description: 表格数据接口调用
+     * @return {*}
+     */
+    getTableData() {
+      let form = new FormData();
+      form.append("imei", this.imei);
+      postForm(
+        `${defaultSettings.BaseURL2 + "/zdryapi/getWarnByImei"}/${
+          this.currentPageNumber
+        }/${this.pageSize}`,
+        form
+      ).then((res) => {
+        this.$set(this.styleForm, "tableData", res.data);
+        this.totalMessage = res.count;
+      });
+    },
+    cutType(val) {
+      this.activeClickName = val;
+    },
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  created() {
+    this.imei = this.$route.query.imei;
+    this.getTableData();
+  },
+};
+</script>
+<style lang='scss' scoped>
+@mixin coverTable {
+  .el-table,
+  .el-table__expanded-cell {
+    background-color: transparent;
+  }
+  .el-tabs.el-tabs--top {
+    background-color: rgba(3, 69, 108, 0.3);
+  }
+
+  /* 表格内背景颜色 */
+  .el-table th,
+  .el-table tr,
+  .el-table td {
+    padding: 1px;
+    background-color: transparent;
+    border-bottom: 1px solid #0e567b;
+    height: 40px;
+  }
+  .el-table__body-wrapper {
+    @include scrollBarStyle();
+    color: #ccc;
+  }
+  .has-gutter > tr {
+    color: #109fcf;
+  }
+  .el-table--border::after,
+  .el-table--group::after,
+  .el-table::before {
+    display: none;
+  }
+}
+@mixin coverPagina() {
+  // 将分页背景透明化
+  .el-pager,
+  .el-pager li {
+    color: #01afc8;
+  }
+  .el-pagination button:disabled {
+    background-color: #03456c;
+    color: #01afc8;
+  }
+  .el-pagination .btn-prev {
+    background-color: #03456c;
+    color: #01afc8;
+  }
+  .el-pagination .btn-next {
+    background-color: #03456c;
+    color: #01afc8;
+  }
+
+  .el-pager li {
+    background-color: #03456c;
+    margin: 0 2px 0 2px;
+  }
+
+  .el-pager li.active {
+    background-color: #02c7dd;
+    color: #06365a;
+  }
+}
+@mixin scrollBarStyle() {
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px #fff;
+    background: rgba(3, 69, 108, 0.5);
+  }
+}
+.table-pagination /deep/ {
+  height: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  @include coverPagina;
+}
+.person-health-report {
+  width: 100%;
+  height: 100%;
+  .main-table /deep/ {
+    width: 80%;
+    height: 100%;
+    position: relative;
+    margin: auto;
+
+    // 覆盖导航栏中的样式
+    .el-tabs__item.is-active {
+      color: #409eff;
+    }
+    .el-tabs__item {
+      color: #fff;
+    }
+
+    @include coverTable;
+  }
+}
+.tableBox {
+  @include scrollBarStyle();
+}
+.clickTabs {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  > span {
+    color: #fff;
+    text-align: center;
+    display: inline-block;
+    width: 50%;
+    height: 30px;
+    line-height: 24px;
+    box-sizing: border-box;
+    border: 3px solid #083453;
+    font-weight: 600;
+    color: #02c7dd;
+  }
+  .activeClick {
+    background-color: #02c7dd;
+    color: #000;
+  }
+}
+</style>
\ No newline at end of file

src/views/PlatFormCenter/RealTimeTrack/RealTimeTrack.vue

@@ -1010,12 +1010,13 @@ export default {
             var userList = this.multipleUserSelection;
             var arr = this.multipleUserSelection.map((i) => i.sbImei);
           }
-          $(".realTimePosition").parent().remove();
+
           post(
             defaultSettings.BaseURL2 + `/zdryapi/newLocationdataList`,
             JSON.stringify(arr)
           ).then((data) => {
-            console.log(data,userList,2222222222)
+            console.log(data, userList, 2222222222);
+            $(".realTimePosition").parent().remove();
             userList.forEach((singleUser, i) => {
               singleUser.lastLocationX = self.gcj02towgs84(
                 parseFloat(data.data[i]["经度"]),
@@ -1045,7 +1046,10 @@ export default {
                 html: htmlc,
               };
               self.$setPopupSmall(parm);
-              this.focusCenter([singleUser.lastLocationX, singleUser.lastLocationY])
+              this.focusCenter([
+                singleUser.lastLocationX,
+                singleUser.lastLocationY,
+              ]);
             });
           });
           // });