菜单栏更新

minggao/index.html

@@ -9,4 +9,5 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <script src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/js/ezuikit.js"></script>
 </html>

minggao/src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App",
+};
 </script>
 
 
@@ -43,7 +43,7 @@ body {
 }
 
 // 所有卡片
-.custom-ffffff .el-card.is-always-shadow  {
+.custom-ffffff .el-card.is-always-shadow {
   border-radius: 10px;
 }
 // 所有弹框

minggao/src/page/forecasting/cbd/Cbd.vue

@@ -28,7 +28,7 @@
           </template>
         </template>
       </search-bar>
-      <el-button
+      <!-- <el-button
         class="devicePlant"
         type="primary"
         size="mini"
@@ -43,7 +43,7 @@
         v-btnRight:pestAnalysis="$route.path"
         @click="pestAll"
         >害虫分析</el-button
-      >
+      > -->
     </div>
 
     <template v-if="displayType == 1">
@@ -948,7 +948,6 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_device_control",
         data: this.qs.stringify({
-          device_type_id: 3,
           d_id: this.d_id,
           config: JSON.stringify(newForm),
         }),

minggao/src/page/forecasting/cbd/DataDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="cursor: default">
+  <div style="cursor: default;width:99%;">
     <el-button type="success" size="small" @click="goBackPage()"
       ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
     >

minggao/src/page/forecasting/cbd/PestsStats.vue

@@ -1,12 +1,5 @@
 <template>
-  <div style="cursor: default">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
-      <el-breadcrumb-item :to="{ path: '/index/cbd' }"
-        >虫情测报</el-breadcrumb-item
-      >
-      <el-breadcrumb-item>害虫统计</el-breadcrumb-item>
-    </el-breadcrumb>
+  <div style="cursor: default;width:99%;">
     <el-button type="success" size="small" @click="goBackPage()"
       ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
     >

minggao/src/page/forecasting/cbd/cbdDataPhotos.vue

@@ -387,13 +387,13 @@
     <el-dialog :title="this.tltName" :visible.sync="handAddVisible" width="30%">
       <div class="handAddBtn" v-show="handAddState == 1">
         <i
-          class="iconfont el-icon-circle-plus-outline"
+          class="el-icon-circle-plus-outline"
           @click="handAddState = 2"
         ></i>
         <i
-          class="iconfont el-icon-remove-outline"
+          class="el-icon-remove-outline"
           @click="handAddState = 3"
-        ></i>
+        ></i>xie
       </div>
       <div class="handAddForm" v-show="handAddState == 1">
         <el-form ref="ruleForm" :model="form" label-width="80px">
@@ -2210,7 +2210,7 @@ export default {
         that
           .$axios({
             method: "post",
-            url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
+            url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_photo_species",
             data: postData,
           })
           .then((res) => {
@@ -2246,7 +2246,7 @@ export default {
       that
         .$axios({
           method: "post",
-          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
+          url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_photo_species",
           data: postData,
         })
         .then((res) => {
@@ -2268,7 +2268,7 @@ export default {
       that
         .$axios({
           method: "post",
-          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
+          url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_photo_species",
           data: postData,
         })
         .then((res) => {
@@ -2309,7 +2309,7 @@ export default {
       that
         .$axios({
           method: "post",
-          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
+          url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_photo_species",
           data: postData,
         })
         .then((res) => {

minggao/src/page/forecasting/cbd/cbdindex.vue

@@ -3,7 +3,7 @@
   <div class="cbdbox">
     <div class="cbdboxs_search">
       <el-input v-model="idinput" placeholder="请输入设备ID"></el-input>
-      <el-select v-model="inoffvalue" placeholder="请选择在线状态">
+      <el-select v-model="inoffvalue" placeholder="请选择所在监测点">
         <el-option
           v-for="item in inoffoptions"
           :key="item.value"
@@ -12,7 +12,7 @@
         >
         </el-option>
       </el-select>
-      <el-select v-model="versionsvalue" placeholder="请选择设备版本">
+      <el-select v-model="versionsvalue" placeholder="请选择组织">
         <el-option
           v-for="item in versionsoptions"
           :key="item.value"
@@ -21,75 +21,59 @@
         >
         </el-option>
       </el-select>
-      <el-button type="primary" @click="search">搜索</el-button>
+      <el-select v-model="versionsvalue" placeholder="请选择诱捕器">
+        <el-option
+          v-for="item in versionsoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-button type="info" @click="search">搜索</el-button>
       <el-button>重置</el-button>
+      <el-button type="info">添加诱捕器</el-button>
+      <el-button type="info">批量导入诱捕器</el-button>
+      <el-button type="info">导出数据</el-button>
     </div>
     <div class="cbdboxs_table" v-loading="loading">
       <el-table :data="tableData" style="width: 100%" :stripe="true">
         <el-table-column prop="index" label="序号"> </el-table-column>
-        <el-table-column prop="device_name" label="设备名称">
-          <template slot-scope="scope">
-            <p>
-              {{ scope.row.device_name == "" ? "--" : scope.row.device_name }}
-            </p>
-          </template>
-        </el-table-column>
-        <el-table-column prop="imei" label="设备ID"></el-table-column>
-        <el-table-column prop="is_online" label="在线状态">
-          <template slot-scope="scope">
-            <p>{{ scope.row.is_online == 1 ? "在线" : "离线" }}</p>
-          </template>
-        </el-table-column>
-        <el-table-column prop="dver_num" label="设备版本">
-          <template slot-scope="scope">
-            <p>{{ scope.row.dver_num == "" ? "--" : scope.row.dver_num }}</p>
-          </template>
-        </el-table-column>
-        <el-table-column prop="uptime" label="最新上报时间">
-          <template slot-scope="scope">{{
-            (scope.row.uptime * 1000) | formatTime
-          }}</template>
+        <el-table-column prop="trap_number" label="编号"></el-table-column>
+        <el-table-column prop="lng" label="经度"> </el-table-column>
+        <el-table-column prop="lat" label="纬度"> </el-table-column>
+        <el-table-column prop="org_name" label="组织"> </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="create_time" label="添加时间" width="200">
         </el-table-column>
-        <el-table-column prop="address" label="地址">
+        <el-table-column prop="is_online" label="状态">
           <template slot-scope="scope">
-            <p>{{ scope.row.address == "" ? "--" : scope.row.address }}</p>
+            <p>·{{ scope.row.trap_status == "1" ? "正常" : "停用" }}</p>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="300">
           <template slot-scope="scope">
             <span
               style="color: #409eff; margin-right: 5px"
-              @click="
-                viewPhotoDialog(
-                  scope.row.imei,
-                  scope.row.d_id,
-                  scope.row.device_name,
-                  scope.row.address
-                )
-              "
-              >查看图片</span
+              @click="viewPhotoDialog(scope.row)"
+              >编辑</span
             >
             <span
               style="color: #409eff; margin-right: 5px"
-              @click="
-                showTimeControlDialog(
-                  scope.row.d_id,
-                  scope.row.imei,
-                  scope.row.disable
-                )
-              "
-              >害虫统计</span
-            >
-            <span
-              style="color: #409eff; margin-right: 5px"
-              @click="dataDetails(scope.row.imei, scope.row.d_id, scope.row)"
-              >数据详情</span
+              @click="showTimeControlDialog(scope.row)"
+              >删除</span
             >
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange">
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :total="total"
+      @current-change="pageChange"
+    >
     </el-pagination>
   </div>
 </template>
@@ -127,8 +111,8 @@ export default {
       },
       tableData: [],
       device_id: "",
-      total:10,
-      loading:false
+      total: 10,
+      loading: false,
     };
   },
   //监听属性 类似于data概念
@@ -137,70 +121,40 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    getcbdlist() {
-      this.loading = true
+    getcbdlist() {//获取设备列表
+      this.loading = true;
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_list",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_list",
         data: this.qs.stringify({
-          device_type_id: 3,
           page_size: 10,
           page: this.queryInfo.page,
-          device_status: this.queryInfo.is_online,
-          // device_name: this.queryInfo.ename,
-          device_id: this.queryInfo.f_id,
-          dver_num: this.queryInfo.dver,
+          trap_number: this.queryInfo.f_id,
         }),
       }).then((res) => {
-        this.loading = false
+        this.loading = false;
         console.log(res.data.data);
-        this.total = res.data.data.counts
-        this.tableData = res.data.data.data;
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.trap_data;
         for (var i = 0; i < this.tableData.length; i++) {
           this.tableData[i]["index"] = i + 1;
         }
       });
     },
-    viewPhotoDialog(id, d_id, name, addr) {
-      this.device_id = id;
-      this.$router.push({
-        path: `/index/cbdDataPhotos/${id}`,
-        query: { d_id: d_id, name: name, addr: addr },
+    getmon(){//获取监测点列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_list",
+      }).then((res) => {
+        console.log(res.data.data);
       });
     },
-    showTimeControlDialog(d_id, id, disable) {
-      this.device_id = id;
-      if (sessionStorage.getItem("myuser_type") == 1) {
-        // 管理员
-        this.$router.push({
-          path: `/index/pestsStats/${d_id}/${id}`,
-          query: { disable: disable },
-        });
-      } else {
-        // 非管理员
-        if (disable == 2) {
-          // 计数
-          this.$router.push({
-            path: `/index/PestsStatsNumber/${d_id}/${id}`,
-            query: { disable: disable },
-          });
-        } else if (disable == 1 || disable == 0) {
-          // 识别开启或关闭
-          this.$router.push({
-            path: `/index/pestsStats/${d_id}/${id}`,
-            query: { disable: disable },
-          });
-        }
-      }
-    },
-    dataDetails(e_id, d_id, data) {
-      this.device_id = e_id;
-      this.$router.push({
-        path: `/index/cbdDataDetails/${e_id}/${d_id}`,
-        query: {
-          addr: data.address,
-          name: data.device_name,
-        },
+    getorgin(){//获取组织列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+      }).then((res) => {
+        console.log(res.data.data);
       });
     },
     search() {
@@ -210,11 +164,11 @@ export default {
       // console.log(this.inoffvalue,this.versionsvalue)
       this.getcbdlist();
     },
-    pageChange(e){
+    pageChange(e) {
       // console.log(e)
-      this.queryInfo.page = e
+      this.queryInfo.page = e;
       this.getcbdlist();
-    }
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -222,6 +176,8 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.getmon()
+    this.getorgin()
     this.getcbdlist();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -237,11 +193,11 @@ export default {
   justify-content: flex-start;
   height: 40px;
   .el-select {
-    width: 300px;
+    width: 250px;
     margin-right: 15px;
   }
   .el-input {
-    width: 300px;
+    width: 250px;
     margin-right: 15px;
   }
 }
@@ -253,4 +209,8 @@ export default {
     }
   }
 }
+/deep/.el-button--info{
+  background-color: #409EFF;
+    border-color: #409EFF;
+}
 </style>

minggao/src/page/forecasting/trap/trap.vue

@@ -0,0 +1,216 @@
+<!--  -->
+<template>
+  <div class="cbdbox">
+    <div class="cbdboxs_search">
+      <el-input v-model="idinput" placeholder="请输入设备ID"></el-input>
+      <el-select v-model="inoffvalue" placeholder="请选择所在监测点">
+        <el-option
+          v-for="item in inoffoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="versionsvalue" placeholder="请选择组织">
+        <el-option
+          v-for="item in versionsoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="versionsvalue" placeholder="请选择诱捕器">
+        <el-option
+          v-for="item in versionsoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-button type="info" @click="search">搜索</el-button>
+      <el-button>重置</el-button>
+      <el-button type="info">添加诱捕器</el-button>
+      <el-button type="info">批量导入诱捕器</el-button>
+      <el-button type="info">导出数据</el-button>
+    </div>
+    <div class="cbdboxs_table" v-loading="loading">
+      <el-table :data="tableData" style="width: 100%" :stripe="true">
+        <el-table-column prop="index" label="序号"> </el-table-column>
+        <el-table-column prop="trap_number" label="编号"></el-table-column>
+        <el-table-column prop="lng" label="经度"> </el-table-column>
+        <el-table-column prop="lat" label="纬度"> </el-table-column>
+        <el-table-column prop="org_name" label="组织"> </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="create_time" label="添加时间" width="200">
+        </el-table-column>
+        <el-table-column prop="is_online" label="状态">
+          <template slot-scope="scope">
+            <p>·{{ scope.row.trap_status == "1" ? "正常" : "停用" }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300">
+          <template slot-scope="scope">
+            <span
+              style="color: #409eff; margin-right: 5px"
+              @click="viewPhotoDialog(scope.row)"
+              >编辑</span
+            >
+            <span
+              style="color: #409eff; margin-right: 5px"
+              @click="showTimeControlDialog(scope.row)"
+              >删除</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :total="total"
+      @current-change="pageChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      idinput: "",
+      inoffvalue: "",
+      inoffoptions: [
+        { label: "在线", value: "0" },
+        { label: "离线", value: "1" },
+      ],
+      versionsvalue: "",
+      versionsoptions: [
+        { label: "全部", value: "" },
+        { label: "版本1", value: "1" },
+        { label: "版本2", value: "2" },
+        { label: "版本3", value: "3" },
+        { label: "版本4", value: "4" },
+        { label: "版本5", value: "5" },
+      ],
+      queryInfo: {
+        page: 1,
+        is_online: "",
+        ename: "",
+        f_id: "",
+        dver: "",
+      },
+      tableData: [],
+      device_id: "",
+      total: 10,
+      loading: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getcbdlist() {//获取设备列表
+      this.loading = true;
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_list",
+        data: this.qs.stringify({
+          page_size: 10,
+          page: this.queryInfo.page,
+          trap_number: this.queryInfo.f_id,
+        }),
+      }).then((res) => {
+        this.loading = false;
+        console.log(res.data.data);
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.trap_data;
+        for (var i = 0; i < this.tableData.length; i++) {
+          this.tableData[i]["index"] = i + 1;
+        }
+      });
+    },
+    getmon(){//获取监测点列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_list",
+      }).then((res) => {
+        console.log(res.data.data);
+      });
+    },
+    getorgin(){//获取组织列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+      }).then((res) => {
+        console.log(res.data.data);
+      });
+    },
+    search() {
+      this.queryInfo.f_id = this.idinput;
+      this.queryInfo.is_online = this.inoffvalue;
+      this.queryInfo.dver = this.versionsvalue;
+      // console.log(this.inoffvalue,this.versionsvalue)
+      this.getcbdlist();
+    },
+    pageChange(e) {
+      // console.log(e)
+      this.queryInfo.page = e;
+      this.getcbdlist();
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getmon()
+    this.getorgin()
+    this.getcbdlist();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.cbdboxs_search {
+  display: flex;
+  justify-content: flex-start;
+  height: 40px;
+  .el-select {
+    width: 250px;
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 250px;
+    margin-right: 15px;
+  }
+}
+.cbdboxs_table {
+  margin-top: 15px;
+  /deep/.el-table__header-wrapper {
+    th {
+      background-color: #fafafa;
+    }
+  }
+}
+/deep/.el-button--info{
+  background-color: #409EFF;
+    border-color: #409EFF;
+}
+</style>

minggao/src/page/home/index.vue

@@ -37,15 +37,24 @@
               <i class="el-icon-collection-tag"></i>
               <span>{{ item.purview_name }}</span>
             </template>
-            <el-menu-item-group>
-              <el-menu-item
-                :index="'/index/' + items.menu"
-                v-for="items in item.children"
-                :key="items.pur_id"
-                @click="skip('/index/' + items.menu)"
-                >{{ items.purview_name }}</el-menu-item
-              >
-            </el-menu-item-group>
+            <el-submenu
+              :index="'/index/' + items.pur_id"
+              v-for="items in item.children"
+              :key="items.pur_id"
+              @click="skip('/index/' + items.menu)"
+            >
+              <span slot="title"><i class="el-icon-collection-tag"></i>{{ items.purview_name }}</span>
+              <el-menu-item-group>
+                <el-menu-item
+                  v-for="item2 in items.children"
+                  :index="'/index/' + item2.pur_id"
+                  :key="item2.pur_id"
+                  @click="skip('/index/' + item2.menu)"
+                >
+                  <span slot="title"><i class="el-icon-collection-tag"></i>{{ item2.purview_name }}</span>
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
           </el-submenu>
         </el-menu>
       </div>
@@ -85,12 +94,17 @@ export default {
     return {
       infodata: [],
       username: "",
+      routerdata: [],
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    "$route.path": function (newVal) {
+      console.log(newVal);
+    },
+  },
   //方法集合
   methods: {
     handleOpen() {},
@@ -101,7 +115,9 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
       }).then((res) => {
+        this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
         this.infodata = res.data.data.children;
+        console.log(this.routerdata);
         this.infodata.shift();
         this.username = res.data.data.username;
         localStorage.setItem("usernme", this.username);
@@ -150,7 +166,7 @@ p {
   background-color: #0d3756;
   margin: 0;
   height: 62px;
-  width: 239px;
+  width: 240px;
   display: flex;
   .menubox_logo_img {
     width: 40px;
@@ -175,17 +191,19 @@ p {
   height: 100vh;
   .menubox_item {
     height: calc(100vh - 62px);
+    background-color: #0d3756;
     overflow-y: auto;
+    /deep/.el-menu-vertical-demo {
+      width: 240px;
+    }
     /deep/.el-submenu__title {
       text-align: left;
     }
     /deep/.el-submenu__title:hover {
       background-color: #490eff !important;
     }
-    /deep/.is-opened {
-      .el-submenu__title {
-        background-color: #490eff !important;
-      }
+    /deep/.is-opened > .el-submenu__title {
+      background-color: #490eff !important;
     }
     /deep/.el-menu-item {
       text-align: left;

minggao/src/page/monitor/PhotoView.vue

@@ -0,0 +1,250 @@
+<template>
+  <div style="cursor: default">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/index/monitor' }"
+        >监控</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>查看图片</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="opt-box">
+      <div>
+        <el-button type="primary" size="mini" @click="getImageList()"
+          >刷新</el-button
+        >
+        <template v-if="userType == 1">
+          <!-- <el-button type="primary" size="mini" @click="delPhoto()"
+            >批量删除</el-button
+          > -->
+        </template>
+      </div>
+      <el-date-picker
+        size="small"
+        align="right"
+        v-model="timeRange"
+        type="daterange"
+        @change="timeRangChange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+    </div>
+    <el-row :gutter="20">
+      <viewer :images="images" class="images clearfix">
+        <template slot-scope="scope">
+          <el-col :span="6" v-for="(src, index) in scope.images" :key="index">
+            <el-card style="height: 272px">
+              <!-- <img :src="src.addr" class="image" /> -->
+              <img v-lazy="src.addr" id="viewerDom" v-viewer class="image" />
+              <span class="time">{{ (src.addtime * 1000) | formatTime }}</span>
+              <span
+                class="del iconfont icon-shanchu"
+                @click="delPhoto(src)"
+              ></span>
+              <div class="bottom">
+                <img src="@/assets/images/forecasting/monitor/icon.png" />
+                病情识别
+              </div>
+            </el-card>
+          </el-col>
+        </template>
+      </viewer>
+
+      <!-- 暂无数据 -->
+      <div class="expertDiagnosis_referral_units_not" v-if="images.length <= 0">
+        <img
+          :src="$imghost + zanwu"
+          alt
+          class="expertDiagnosis_referral_units_notImg"
+        />
+      </div>
+    </el-row>
+
+    <!-- 分页 -->
+    <el-pagination
+      v-if="images.length > 0"
+      background
+      layout="prev, pager, next, jumper"
+      :total="total"
+      :current-page="page"
+      :page-size="12"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeRange: "",
+      imei: this.$route.params.id,
+      page: 1,
+      images: [],
+      zanwu: "/images/expertDiagnosis/zanwu.png",
+      begin: "",
+      end: "",
+
+      // 分页
+      total: null,
+    };
+  },
+  computed: {
+    userType: function () {
+      //获取用户类型
+      return window.sessionStorage.getItem("myuser_type");
+    },
+  },
+  mounted() {
+    this.getImageList();
+  },
+  methods: {
+    // 请求图片列表数据
+    getImageList() {
+      // this.$axios({
+      //     method:'POST',
+      //     url:'jk_image',
+      //     data:this.qs.stringify({
+      //         imei:this.imei,
+      //         page:this.page
+      //     })
+      // }).then((res)=>{
+
+      // })
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.camera_manage.camera_photo",
+        data: this.qs.stringify({
+          device_id: this.imei,
+          page: this.page,
+          page_size: 12
+        }),
+      })
+        .then((res) => {
+          if (res.data.data !== null) {
+            this.total = res.data.data.counts;
+            this.images = res.data.data.data;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    // 时间筛选
+    timeRangChange() {
+      this.page = 1;
+      if (this.timeRange) {
+        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
+        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
+      } else {
+        this.begin = "";
+        this.end = "";
+      }
+      //   this.getImageList();
+    },
+
+    // 删除图片
+    delPhoto(data) {
+      var arr = [];
+      arr.push(data.photo_id);
+      this.$confirm("此操作将删除该图片, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          var ad = JSON.stringify(arr);
+          ad = ad.replace("[", "");
+          ad = ad.replace("]", "");
+          let postData = this.qs.stringify({
+            photo_id_list: ad,
+          });
+          this.$axios({
+            method: "POST",
+            url:
+              "/api/api_gateway?method=monitor_manage.camera_manage.del_camera_photo",
+            data: postData,
+          })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.images = [];
+              this.getImageList();
+            })
+            .catch((err) => {
+              console.log(err);
+              this.$message({
+                type: "info",
+                message: "已取消删除",
+              });
+            });
+        })
+        .catch(() => {});
+    },
+
+    //改变page
+    changePage(val) {
+      this.page = val;
+      this.getImageList()
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.opt-box {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+/* 时间段选择框的宽度 */
+.el-date-editor--daterange.el-input__inner {
+  width: 220px;
+}
+.image {
+  width: 100%;
+  // height: auto;
+  height: 205px;
+  cursor: pointer;
+  margin: 5px;
+  display: inline-block;
+}
+.time {
+  position: absolute;
+  bottom: 52px;
+  color: #fff;
+  font-size: 14px;
+  left: 30px;
+}
+.del {
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  color: rgb(199, 0, 0);
+  font-size: 20px;
+  font-weight: bold;
+  display: none;
+}
+.el-card {
+  position: relative;
+  .bottom {
+    font-size: 14px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      margin-right: 5px;
+      width: 16px;
+    }
+  }
+}
+.el-card:hover {
+  .del {
+    display: block;
+  }
+}
+</style>

minggao/src/router/index.js

@@ -16,6 +16,12 @@ import PestsStats from '@/page/forecasting/cbd/pestsStats'//害虫统计
 import tongji from '@/page/forecasting/cbd/tongji'//害虫分析
 import deviceTongji from '@/page/forecasting/cbd/deviceTongji'//害虫排行
 
+// ********************监控**************************
+import monitor from '@/page/monitor/Monitor'
+import photoView from '@/page/monitor/PhotoView'
+//*********************诱捕器系统********************
+import trap from '@/page/forecasting/trap/trap'//害虫排行
+
 Vue.use(Router)
 
 export default new Router({
@@ -60,6 +66,18 @@ export default new Router({
           path: 'deviceTongji',
           component: deviceTongji
         },
+        {
+          path: 'monitor',
+          component: monitor
+        },
+        {
+          path: 'photoView',
+          component: photoView
+        },
+        {
+          path: 'trap',
+          component: trap
+        },
       ]
     },
   ]