监测轨迹数据功能

minggao/src/page/monitoring/monitoringPest.vue

@@ -0,0 +1,416 @@
+<!--  -->
+<template>
+  <div class="cbdbox">
+    <div class="cbdboxs_search">
+      <el-input
+        v-model="idinput"
+        placeholder="请输入诱捕器ID"
+        size="mini"
+      ></el-input>
+      <el-input
+        v-model="nameinput"
+        placeholder="请输入填报人"
+        size="mini"
+      ></el-input>
+      <el-select
+        v-model="inoffvalue"
+        placeholder="请选择所在监测点"
+        size="mini"
+        clearable
+        @change="search"
+        filterable
+      >
+        <el-option
+          v-for="item in inoffoptions"
+          :key="item.point_name"
+          :label="item.point_name"
+          :value="item.point_name"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="versionsvalue2"
+        placeholder="请选择隶属组织"
+        size="mini"
+        clearable
+        @change="search"
+        filterable
+      >
+        <el-option
+          v-for="item in versionsoptions2"
+          :key="item.org_name"
+          :label="item.org_name"
+          :value="item.org_name"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-model="timevalue"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="oickchange"
+        size="mini"
+        :editable="false"
+      >
+      </el-date-picker>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+      <el-button @click="reset" size="mini">重置</el-button>
+    </div>
+    <el-card class="box-card" style="margin-top: 15px">
+      <div class="cbdboxs_table" v-loading="loading">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :stripe="true"
+          :height="48 * 13"
+          ref="gridTable"
+        >
+          <el-table-column prop="index" label="序号" width="60px">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + scope.row.index }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="trap_number" label="编号"></el-table-column>
+          <el-table-column prop="org_name" label="隶属组织">
+            <template slot-scope="scope">
+              <span v-if="scope.row.org_name.split(',').length == 1">{{
+                scope.row.org_name
+              }}</span>
+              <el-popover
+                ref="popover"
+                placement="right"
+                title=""
+                width="150"
+                trigger="hover"
+                v-else
+              >
+                <div class="popover-content" v-html="content"></div>
+                <span @mouseover="orglisthover(scope.row)" slot="reference"
+                  >{{ scope.row.org_name.split(',')[0] }}...</span
+                >
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column prop="point_name" label="监测点"> </el-table-column>
+          <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
+          <el-table-column prop="pest_name" label="有害生物"> </el-table-column>
+          <el-table-column prop="pest_number" label="有害生物数量">
+          </el-table-column>
+          <el-table-column prop="user_name" label="填报人"> </el-table-column>
+          <el-table-column prop="report_status" label="填报渠道">
+          </el-table-column>
+          <el-table-column prop="create_time" label="填报时间" width="200">
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next,jumper"
+        :total="total"
+        :page-size="20"
+        @current-change="pageChange"
+        :current-page="queryInfo.page"
+      >
+      </el-pagination>
+    </el-card>
+    <el-dialog
+      title="提示"
+      :visible.sync="deriveVisible"
+      width="400px"
+      :close-on-click-modal="false"
+    >
+      <div class="derivebox">
+        <p><span>*</span>文件名称：</p>
+        <el-input
+          v-model="derivefilename"
+          placeholder="请输入文件名称"
+          size="mini"
+        ></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="deriveVisible = false" size="mini">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="deriveclick"
+          size="mini"
+          :disabled="deriveTF"
+          >{{ deriveTF ? '导出中...' : '确 定' }}</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      idinput: '',
+      nameinput: '',
+      inoffvalue: '',
+      inoffoptions: [],
+      versionsvalue: '',
+      versionsoptions: [],
+      versionsvalue2: '',
+      versionsoptions2: [],
+      queryInfo: {
+        page: 1,
+        trap_number: '', //   设备编号 搜索项
+        point_name: '', //       设备所属监测点 搜索项
+        org_name: '', //         设备所属组织   搜索项
+        user_name: '', //        填报人名字 搜索项
+        start_time: '', //       开始时间 搜索项
+        end_time: '' //         结束时间 搜索项
+      },
+      tableData: [],
+      device_id: '',
+      total: 10,
+      loading: false,
+      timevalue: '', //时间段
+      deriveVisible: false, //导出弹框
+      derivefilename: '', //导出文件名称
+      defaultParams: {
+        label: 'org_name',
+        value: 'id',
+        children: 'childrens'
+      },
+      content: '',
+      deriveTF: false
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getcbdlist() {
+      //获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url:
+          '/api/api_gateway?method=monitor_manage.trap_manage.trap_pest_record',
+        data: this.qs.stringify({
+          page_size: 20,
+          page: this.queryInfo.page,
+          trap_number: this.queryInfo.trap_number, //              非必传(string)               设备编号 搜索项
+          point_name: this.queryInfo.point_name, //                  非必传(string)               设备所属监测点 搜索项
+          org_name: this.queryInfo.org_name, //                    非必传(string)               设备所属组织   搜索项
+          user_name: this.queryInfo.user_name, //                   非必传(string)               填报人名字 搜索项
+          start_time: this.queryInfo.start_time, //                  非必传(string)               开始时间 搜索项
+          end_time: this.queryInfo.end_time //                    非必传(string)               结束时间 搜索项
+        })
+      }).then(res => {
+        this.loading = false;
+        console.log(res.data.data);
+        this.total = res.data.data.pest_num;
+        this.tableData = res.data.data.trap_data;
+        for (var i = 0; i < this.tableData.length; i++) {
+          this.tableData[i]['index'] = i + 1;
+        }
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    // getmon() {
+    //   //获取监测点列表 组织列表
+    //   this.$axios({
+    //     method: "POST",
+    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+    //   }).then((res) => {
+    //     console.log(res.data.data);
+    //     this.versionsoptions = res.data.data.page_list; //组织
+    //     this.inoffoptions = res.data.data.point_data;
+    //   });
+    // },
+    getmon2() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org'
+      }).then(res => {
+        console.log(res.data.data);
+        this.versionsoptions2 = res.data.data.org_list;
+        // this.versionsoptions = res.data.data.page_list; //组织
+        this.inoffoptions = res.data.data.point_data;
+      });
+    },
+    search() {
+      this.queryInfo.trap_number = this.idinput;
+      this.queryInfo.user_name = this.nameinput;
+      console.log(this.inoffoptions);
+      this.queryInfo.point_name = this.inoffvalue;
+      this.queryInfo.org_name = this.versionsvalue2;
+      this.queryInfo.page = 1;
+      // console.log(this.versionsvalue2)
+      this.getcbdlist();
+    },
+    oickchange(e) {
+      //搜索时间段
+      console.log(e);
+      if (e) {
+        this.queryInfo.start_time = this.tabtime(e[0]);
+        this.queryInfo.end_time = this.tabtime(e[1]);
+      } else {
+        this.queryInfo.start_time = '';
+        this.queryInfo.end_time = '';
+      }
+      this.search();
+    },
+    tabtime(times) {
+      //时间转换
+      var years = times.getFullYear();
+      var month = times.getMonth() + 1;
+      var date = times.getDate();
+      return years + '-' + month + '-' + date;
+    },
+    pageChange(e) {
+      // console.log(e)
+      this.queryInfo.page = e;
+      this.getcbdlist();
+    },
+    reset() {
+      //重置
+      this.idinput = '';
+      this.nameinput = '';
+      this.inoffvalue = '';
+      this.versionsvalue = '';
+      this.timevalue = '';
+      this.queryInfo.start_time = '';
+      this.queryInfo.end_time = '';
+      for (var key in this.queryInfo) {
+        this.queryInfo[key] = '';
+      }
+      this.queryInfo.page = 1;
+      this.versionsvalue2 = '';
+      this.getcbdlist();
+    },
+    downloadFile(res, name) {
+      let link = document.createElement('a');
+      link.href = window.URL.createObjectURL(new Blob([res.data]));
+      link.target = '_blank';
+      //文件名和格式
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      this.deriveTF = false;
+    },
+    deriveclick() {
+      // this.deriveVisible = false;
+      if (this.derivefilename == '') {
+        if (document.getElementsByClassName('el-message').length == 0) {
+          this.$message({
+            showClose: true,
+            message: '请填写文件名称',
+            type: 'warning'
+          });
+        }
+      } else {
+        this.deriveTF = true;
+        this.$axios({
+          method: 'POST',
+          url: '/api/pest_export',
+          data: this.qs.stringify({
+            trap_number: this.queryInfo.trap_number,
+            point_name: this.queryInfo.point_name,
+            org_name: this.queryInfo.org_name,
+            trap_status: this.queryInfo.trap_status,
+            file_name: this.derivefilename,
+            start_time: this.queryInfo.start_time,
+            end_time: this.queryInfo.end_time,
+            user_name: this.queryInfo.user_name,
+            user: localStorage.getItem('username')
+          }),
+          responseType: 'blob'
+        }).then(res => {
+          console.log(res);
+          this.downloadFile(res, this.derivefilename + '.xls');
+        });
+      }
+    },
+    orglisthover(e) {
+      console.log(e.org_name);
+      var data = e.org_name.split(',');
+      var str = ``;
+      for (var i = 0; i < data.length; i++) {
+        str += `<p>` + data[i] + `</p>`;
+      }
+      this.content = str;
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // this.getmon();
+    this.getmon2();
+    this.getcbdlist();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.cbdboxs_search {
+  display: flex;
+  justify-content: flex-start;
+  // height: 40px;
+  /deep/.el-select {
+    width: 220px;
+    margin-right: 15px;
+  }
+  /deep/.el-input {
+    width: 220px;
+    margin-right: 15px;
+  }
+  /deep/.el-date-editor {
+    width: 250px !important;
+    margin-right: 15px;
+  }
+}
+.cbdboxs_table {
+  margin-top: 15px;
+  /deep/.el-table__header-wrapper {
+    th {
+      background-color: #fafafa;
+    }
+  }
+}
+.derivebox {
+  display: flex;
+  p {
+    width: 100px;
+    line-height: 28px;
+    span {
+      color: red;
+    }
+  }
+  .el-input {
+    width: 250px;
+  }
+}
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+</style>

minggao/src/page/monitoring/monitoringTrack.vue

@@ -0,0 +1,490 @@
+<!--  -->
+<template>
+  <div class="userManger_box">
+    <!-- 搜索 -->
+    <el-row>
+      <el-col>
+        <!-- 组织搜索 -->
+        <div class="search_box">
+          <el-input
+            size="mini"
+            placeholder="请输入用户姓名"
+            v-model.trim="nameVal"
+            @change="searchData"
+            clearable
+          >
+          </el-input>
+          <el-input
+            size="mini"
+            placeholder="请输入手机号"
+            v-model.trim="phoneVal"
+            @change="searchData"
+            clearable
+          >
+          </el-input>
+          <el-date-picker
+            v-model="create_time"
+            type="date"
+            placeholder=""
+            @change="searchData"
+            size="mini"
+            :editable="false"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+          <div class="btn_box">
+            <el-button type="info" size="mini" @click="searchData"
+              >搜索</el-button
+            >
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-card style="margin-top: 15px">
+      <div class="card_box">
+        <!-- 组织 -->
+        <div
+          class="userManger_left"
+          :style="'height:' + 26 * 25 + 'px;' + 'overflow-y: auto'"
+        >
+          <el-tree
+            :data="data"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+            v-loading="loading"
+          ></el-tree>
+        </div>
+
+        <!-- 搜索和表格 -->
+        <div class="userManger_right">
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            v-loading="loading2"
+            stripe
+            :height="48 * 13"
+            style="width: 100%; overflow-y: auto"
+            ref="gridTable"
+          >
+            <el-table-column prop="ind" label="序号" width="90">
+              <template slot-scope="scope">
+                <span>{{ (page - 1) * 20 + scope.row.ind }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="real_name" label="姓名" width="190">
+            </el-table-column>
+            <el-table-column prop="username" label="账号名称" width="200">
+            </el-table-column>
+            <el-table-column prop="mobile" label="手机号" width="120">
+              <template slot-scope="scope">
+                <span>{{ scope.row.mobile || '无' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :show-overflow-tooltip="true"
+              prop="org_list"
+              label="隶属组织"
+              width="280"
+            >
+              <template slot-scope="scope">
+                <span v-if="scope.row.org_list.length == 1">{{
+                  scope.row.org_list[0].org_name
+                }}</span>
+                <el-popover
+                  ref="popover"
+                  placement="right"
+                  title=""
+                  width="150"
+                  trigger="hover"
+                  v-else
+                >
+                  <div class="popover-content" v-html="content"></div>
+                  <span @mouseover="orglisthover(scope.row)" slot="reference"
+                    >{{
+                      scope.row.org_list.length == 0
+                        ? '暂无组织'
+                        : scope.row.org_list[0].org_name
+                    }}...</span
+                  >
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column prop="clock_in_count" label="打卡次数" width="280">
+            </el-table-column>
+            <el-table-column label="操作" width="280">
+              <template slot-scope="scope">
+                <el-button
+                  :disabled="exportLoading"
+                  type="info"
+                  size="mini"
+                  @click="exportData(scope.row)"
+                >
+                  <i v-if="exportLoading" class="el-icon-loading"></i>
+                  导出数据</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            v-if="tableData.length !== 0"
+            @current-change="changeList"
+            :page-size="20"
+            background
+            layout="prev, pager, next, jumper"
+            :current-page="page"
+            :total="pageSum"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { downFile } from '@/util/downloadFile.js';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      loading: true, //加载 - 组织列表
+      loading2: true, // 加载 - 表格列表
+
+      // 树形图
+      data: [],
+      defaultProps: {
+        children: 'childrens',
+        label: 'org_name'
+      },
+
+      // 搜索
+      nameVal: '',
+      phoneVal: '',
+      create_time: '',
+
+      // 表格
+      tableData: [],
+
+      // 分页
+      page: 1, //当前页码
+      pageSum: 0, // 总数量
+
+      // 弹框
+      tltData: '添加用户',
+      userVisible: false,
+      refreshItem: 0, //清除角色、组织值
+      tissueList: [], // 组织下拉框
+      editorObj: {}, //点击编辑选中当前的行数据
+      org_id: '', //组织id
+
+      isClick: true, // 防止重复弹框
+      submitBtn: false, // 防止弹框确定按钮重复请求
+      content: '',
+      content2: '',
+      exportLoading: false
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function() {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
+    }
+  },
+  //方法集合
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+
+    // 验证手机号是否正确
+    isCellPhone(val) {
+      if (!/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(val)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+
+    // 树形图
+    handleNodeClick(data) {
+      this.org_id = data.id;
+      this.loading2 = true;
+      this.userListData();
+    },
+    // 删除
+    deleteFunc(data) {
+      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.$axios({
+            method: 'POST',
+            url: '/api/api_gateway?method=sysmenage.usermanager.user_delete',
+            data: this.qs.stringify({
+              user_id: data.user_id
+            })
+          }).then(res => {
+            if (res.data.data == true) {
+              if (document.getElementsByClassName('el-message').length == 0) {
+                this.$message({
+                  message: '成功!',
+                  type: 'success',
+                  duration: 1500
+                });
+              }
+            } else {
+              if (document.getElementsByClassName('el-message').length == 0) {
+                this.$message({
+                  message: '失败!',
+                  type: 'error',
+                  duration: 1500
+                });
+              }
+            }
+            this.loading2 = true;
+            this.userListData();
+          });
+        })
+        .catch(() => {
+          if (document.getElementsByClassName('el-message').length == 0) {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            });
+          }
+        });
+    },
+
+    // 分页
+    changeList(page) {
+      this.loading2 = true;
+      this.page = page;
+      this.userListData();
+    },
+
+    // 搜索
+    searchData() {
+      this.page = 1;
+      this.loading2 = true;
+      this.userListData();
+    },
+
+    // 获取用户列表
+    userListData() {
+      this.$axios({
+        method: 'POST',
+        url:
+          '/api/api_gateway?method=data_report.report.get_export_clock_in_list',
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: '20',
+          usernmae: this.nameVal, // 用户名称
+          mobile: this.phoneVal, //电话
+          org_id: this.org_id,
+          create_time: this.create_time
+        })
+      })
+        .then(res => {
+          if (res.data.data.page_item !== 0) {
+            var data = res.data.data.page_list;
+            var list = [];
+            data.forEach((item, index) => {
+              item.ind = index + 1;
+              list.push(item);
+            });
+            this.tableData = list;
+            this.pageSum = res.data.data.total_item;
+          }
+          this.$nextTick(() => {
+            this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+          });
+          this.loading2 = false;
+        })
+        .catch(err => {
+          this.loading2 = false;
+        });
+    },
+
+    // 获取左侧组织列表
+    organizationData() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.report.org_list',
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: '100000000',
+          org_name: ''
+        })
+      })
+        .then(res => {
+          if (res.data.data.page_list.length !== 0) {
+            var obj = {
+              org_name: '全部',
+              id: ''
+            };
+            var list = res.data.data.page_list;
+            this.tissueList = list; // 弹框组织列表
+            var data = res.data.data.page_list;
+            this.data = [obj, ...data]; // 左侧组织列表
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+        });
+    },
+
+    orglisthover(e) {
+      console.log(e);
+      var str = ``;
+      for (var i = 0; i < e.org_list.length; i++) {
+        str += `<p>` + e.org_list[i].org_name + `</p>`;
+      }
+      this.content = str;
+    },
+    orglisthover2(e) {
+      console.log(e);
+      var str = ``;
+      for (var i = 0; i < e.role_list.length; i++) {
+        str += `<p>` + e.role_list[i].role_list + `</p>`;
+      }
+      this.content2 = str;
+    },
+    // 导出
+    exportData(row) {
+      if (!row.uid || this.exportLoading) {
+        return;
+      }
+
+      this.exportLoading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.report.export_clock_in_info',
+        responseType: 'blob',
+        data: this.qs.stringify({
+          uid: row.uid,
+          create_time: this.create_time // 查询时间
+        })
+      })
+        .then(res => {
+          downFile(res, '监测轨迹数据.xls');
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        })
+        .catch(err => {
+          setTimeout(() => {
+            this.exportLoading = false;
+          }, 1500);
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true; // 加载 - 组织列表
+    this.loading2 = true; // 加载 - 表格列表
+    this.userListData(); //表格数据
+    this.organizationData(); //左侧组织数据
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.userManger_box {
+  // 搜索
+  .search_box {
+    display: flex;
+    /deep/.el-input {
+      width: 20%;
+      margin: 0 15px 0 0;
+    }
+    .btn_box {
+    }
+  }
+
+  .card_box {
+    display: flex;
+    width: 100%;
+    // 树形图
+    .userManger_left {
+      width: 19%;
+      margin: 0 15px 0 0;
+      padding: 5px;
+      border: 1px solid #eeeeee;
+      border-radius: 5px;
+      overflow: hidden;
+      overflow-y: auto;
+    }
+
+    // 搜索和表格
+    .userManger_right {
+      width: 80%;
+      //   border: 1px solid red;
+
+      a {
+        text-decoration: none;
+      }
+      .reset {
+        color: #1890ff;
+      }
+      .delete {
+        color: #f56c6c;
+      }
+      .line {
+        display: inline-block;
+        width: 1px;
+        background: rgba(0, 0, 0, 0.09);
+        margin: 0 11px;
+        height: 14px;
+      }
+    }
+  }
+
+  /deep/.el-select {
+    width: 80%;
+  }
+
+  /deep/.el-cascader {
+    width: 80%;
+  }
+}
+
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

minggao/src/router/index.js

@@ -1,75 +1,81 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Vue from 'vue';
+import Router from 'vue-router';
+import HelloWorld from '@/components/HelloWorld';
 
-const originalPush = Router.prototype.push
+const originalPush = Router.prototype.push;
 
 Router.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch(err => err)
-}
+  return originalPush.call(this, location).catch(err => err);
+};
 // *****************登录页**********************
-import Login from '@/page/login/login'
+import Login from '@/page/login/login';
 
 // *****************首页**********************
-import Index from '@/page/home/index'
-import facilitydistribute from '@/page/homepage/facilitydistribute' //设备分布
+import Index from '@/page/home/index';
+import facilitydistribute from '@/page/homepage/facilitydistribute'; //设备分布
 // import facilitydistribute from '@/page/homepage/home'//设备分布
 
-import pestdistribute from '@/page/homepage/pestdistribute' //有害生物分布
+import pestdistribute from '@/page/homepage/pestdistribute'; //有害生物分布
 //---------------------------------------系统管理----------------------------------------------------
-const customsManger = () => import('@/Page/systemmanger/customsManger') //隶属海关
-const role = () => import('@/Page/systemmanger/role') // 角色管理
-const motif = () => import('@/Page/systemmanger/motif') // 主题定制
-const harmfulBiology = () => import('@/Page/systemmanger/harmfulBiology') // 有害生物维护
-const userManger = () => import('@/Page/systemmanger/userManger') // 用户管理
-const dayRecord = () => import('@/Page/systemmanger/dayRecord') // 用户管理
-const equipmentOPS = () => import('@/Page/systemmanger/equipmentOPS') // 用户管理
-const coefficientset = () => import('@/Page/systemmanger/coefficientset') // 用户管理
+const customsManger = () => import('@/Page/systemmanger/customsManger'); //隶属海关
+const role = () => import('@/Page/systemmanger/role'); // 角色管理
+const motif = () => import('@/Page/systemmanger/motif'); // 主题定制
+const harmfulBiology = () => import('@/Page/systemmanger/harmfulBiology'); // 有害生物维护
+const userManger = () => import('@/Page/systemmanger/userManger'); // 用户管理
+const dayRecord = () => import('@/Page/systemmanger/dayRecord'); // 用户管理
+const equipmentOPS = () => import('@/Page/systemmanger/equipmentOPS'); // 用户管理
+const coefficientset = () => import('@/Page/systemmanger/coefficientset'); // 用户管理
 
 //---------------------------------------指挥中心----------------------------------------------------
-const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
-const laboratory = () => import('@/Page/commandCenter/laboratory') //实验室识别
-const taskRegulator = () => import('@/Page/commandCenter/taskRegulator') //任务管理
-const taskRegulatorDetails = () => import('@/Page/commandCenter/taskRegulatorDetails') //任务管理 - 详情
-const superviseAdmin = () => import('@/Page/commandCenter/superviseAdmin') //监督管理
-const superviseAdminDetails = () => import('@/Page/commandCenter/superviseAdminDetails') //监督管理 - 详情
-const superviserec = () => import('@/Page/commandCenter/supervise') //监督记录
-const superviseDetails = () => import('@/Page/commandCenter/superviseDetails') //监督记录 - 详情
-const superviseLog = () => import('@/Page/commandCenter/superviseLog') //监测日志
-const superviseLogDetails = () => import('@/Page/commandCenter/superviseLogDetails') //监测日志 - 详情
+const realTime = () => import('@/Page/commandCenter/realTime'); //实时通信
+const laboratory = () => import('@/Page/commandCenter/laboratory'); //实验室识别
+const taskRegulator = () => import('@/Page/commandCenter/taskRegulator'); //任务管理
+const taskRegulatorDetails = () =>
+  import('@/Page/commandCenter/taskRegulatorDetails'); //任务管理 - 详情
+const superviseAdmin = () => import('@/Page/commandCenter/superviseAdmin'); //监督管理
+const superviseAdminDetails = () =>
+  import('@/Page/commandCenter/superviseAdminDetails'); //监督管理 - 详情
+const superviserec = () => import('@/Page/commandCenter/supervise'); //监督记录
+const superviseDetails = () => import('@/Page/commandCenter/superviseDetails'); //监督记录 - 详情
+const superviseLog = () => import('@/Page/commandCenter/superviseLog'); //监测日志
+const superviseLogDetails = () =>
+  import('@/Page/commandCenter/superviseLogDetails'); //监测日志 - 详情
 
 //---------------------------------------监督记录----------------------------------------------------
-const superviseModule = () => import('@/Page/superviseModule/superviseModule') //监督记录 
+const superviseModule = () => import('@/Page/superviseModule/superviseModule'); //监督记录
 
 //---------------------------------------预警管理----------------------------------------------------
-const warningrecord = () => import('@/Page/warning/warningrecord') //预警记录 
-const warningset = () => import('@/Page/warning/warningset') //预警记录
+const warningrecord = () => import('@/Page/warning/warningrecord'); //预警记录
+const warningset = () => import('@/Page/warning/warningset'); //预警记录
 
 // *****************测报系统**********************
-import cbd from '@/page/forecasting/cbd/Cbd' //首页
-import DataDetails from '@/page/forecasting/cbd/DataDetails' //数据详情
-import DataPhotos from '@/page/forecasting/cbd/cbdDataPhotos' //图片详情
-import PestsStats from '@/page/forecasting/cbd/pestsStats' //害虫统计
-import tongji from '@/page/forecasting/cbd/tongji' //害虫分析
-import deviceTongji from '@/page/forecasting/cbd/deviceTongji' //害虫排行
-import MessageWarn from '@/page/forecasting/cbd/MessageWarn' //短信预警
+import cbd from '@/page/forecasting/cbd/Cbd'; //首页
+import DataDetails from '@/page/forecasting/cbd/DataDetails'; //数据详情
+import DataPhotos from '@/page/forecasting/cbd/cbdDataPhotos'; //图片详情
+import PestsStats from '@/page/forecasting/cbd/pestsStats'; //害虫统计
+import tongji from '@/page/forecasting/cbd/tongji'; //害虫分析
+import deviceTongji from '@/page/forecasting/cbd/deviceTongji'; //害虫排行
+import MessageWarn from '@/page/forecasting/cbd/MessageWarn'; //短信预警
 
 // ********************监控**************************
-import surveillancevideo from '@/page/monitor/Monitor'
-import photoView from '@/page/monitor/PhotoView'
+import surveillancevideo from '@/page/monitor/Monitor';
+import photoView from '@/page/monitor/PhotoView';
 //*********************诱捕器系统********************
-import maintain from '@/page/forecasting/maintain/maintain' //监测点维护
-import trap from '@/page/forecasting/trap/trap' //诱捕器
-import fillinrecord from '@/page/forecasting/trap/fillinrecord' //填报记录
-import bait from '@/page/forecasting/trap/bait' //诱剂维护
+import maintain from '@/page/forecasting/maintain/maintain'; //监测点维护
+import trap from '@/page/forecasting/trap/trap'; //诱捕器
+import fillinrecord from '@/page/forecasting/trap/fillinrecord'; //填报记录
+import bait from '@/page/forecasting/trap/bait'; //诱剂维护
 //*********************任务报表********************
-import monitoringtask from '@/page/monitoring/monitoringtask'//监测任务统计
-import supervisiontask from '@/page/monitoring/supervisiontask'//监督任务统计
+import monitoringtask from '@/page/monitoring/monitoringtask'; //监测任务统计
+import supervisiontask from '@/page/monitoring/supervisiontask'; //监督任务统计
+import monitoringTrack from '@/page/monitoring/monitoringTrack'; //监测轨迹数据
+import monitoringPest from '@/page/monitoring/monitoringPest'; //有害生物数据
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
-  routes: [{
+  routes: [
+    {
       path: '/',
       name: 'Login',
       component: Login
@@ -98,7 +104,8 @@ export default new Router({
           meta: {
             title: '设备分布'
           }
-        }, {
+        },
+        {
           path: 'pestdistribute',
           component: pestdistribute,
           meta: {
@@ -316,14 +323,22 @@ export default new Router({
         },
         //-------------------任务报表--------------------
         {
-          path:"monitoringtask",
-          component:monitoringtask
+          path: 'monitoringtask',
+          component: monitoringtask
         },
         {
-          path:"supervisiontask",
-          component:supervisiontask
+          path: 'supervisiontask',
+          component: supervisiontask
         },
+        {
+          path: 'monitoringTrack',
+          component: monitoringTrack
+        },
+        {
+          path: 'monitoringPest',
+          component: monitoringPest
+        }
       ]
-    },
+    }
   ]
-})
+});

minggao/src/util/constants.js

@@ -0,0 +1,39 @@
+export const ENMU_BLOB_TYPE = {
+  DOC: 'doc',
+  DOCX: 'docx',
+  GIF: 'gif',
+  PNG: 'png',
+  SVG: 'svg',
+  HTM: 'htm',
+  HTML: 'html',
+  JSON: 'json',
+  PDF: 'pdf',
+  PPT: 'ppt',
+  PPTX: 'pptx',
+  RAR: 'rar',
+  TXT: 'txt',
+  XLS: 'xls',
+  XLSX: 'xlsx',
+  ZIP: 'zip'
+};
+
+export const BLOB_TYPE = {
+  doc: 'application/msword',
+  docx:
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  gif: 'image/gif',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  htm: 'text/html',
+  html: 'text/html',
+  json: 'application/json',
+  pdf: 'application/pdf',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx:
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  rar: 'application/x-rar-compressed',
+  txt: 'text/plain',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/zip'
+};

minggao/src/util/downloadFile.js

@@ -0,0 +1,38 @@
+import { BLOB_TYPE, ENMU_BLOB_TYPE } from '@/util/constants';
+
+export const downFile = ({ data, type = ENMU_BLOB_TYPE.XLS, fileName }) => {
+  //
+  const blob = new Blob([data], {
+    type: BLOB_TYPE[type]
+  });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `${fileName}`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+  a.remove();
+};
+
+export const downFileWithDownloadUrl = ({ url, fileName }) => {
+  //
+  const a = document.createElement('a');
+  a.href =
+    window.location.host.indexOf('192.168.1') > -1 ||
+    window.location.host.indexOf('localhost') > -1
+      ? 'http://114.115.147.140/' + url
+      : url;
+  a.download = fileName;
+  a.click();
+  a.remove();
+};
+
+// base64转image
+export function base64src(base64data, cb) {
+  return new Promise((resolve, reject) => {
+    const [, format, bodyData] =
+      /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
+    if (!format) {
+      reject(new Error('ERROR_BASE64SRC_PARSE'));
+    }
+  });
+}