设备离线状态+孢子仪图片

src/components/Login.vue

@@ -90,6 +90,11 @@ export default {
 				})
 			}).then((res) => {
 				if (res.data.message == '') {
+					if(res.data.data.user_type == 1){
+						localStorage.setItem('setHomepage', '/baseAll')
+					}else{
+						localStorage.setItem('setHomepage', '/page1')
+					}
 					if (this.cState == true) {
 						//是否记住密码
 						localStorage.setItem('username', this.username)

src/components/index.vue

@@ -390,7 +390,7 @@ export default {
                      "id": "2"
                      },
                      {
-                     "name": "项目列表",
+                     "name": "项目基地",
                      "path": "/baseAll",
                      "id": "19"
                      },
@@ -487,7 +487,7 @@ export default {
                   "id": "17",
                   "children": [
                      {
-                     "name": "设备列表",
+                     "name": "设备管理",
                      "path": "/page8",
                      "id": "18"
                      }
@@ -511,14 +511,16 @@ export default {
                   "id": "2"
                 }
               ]
+              this.menuTabs = [{ "path": "/plantGuard/page1", "name": "设备列表", "par": "数据监测", "order": 0 }]
             }else{
               menuLists[0].children= [
                 {
-                  "name": "项目列表",
+                  "name": "项目基地",
                   "path": "/baseAll",
                   "id": "19"
                 },
               ]
+              this.menuTabs = [{ "path": "/plantGuard/baseAll", "name": "项目基地", "par": "数据监测", "order": 0 }]
             }
           }
           this.menuList = menuLists;
@@ -535,6 +537,7 @@ export default {
           window.localStorage.removeItem("session");
           window.sessionStorage.removeItem("menuTabs");
           window.sessionStorage.removeItem("menuTabsValue");
+          window.sessionStorage.removeItem("setHomepage");
           this.$router.push("/login");
         }
       });

src/pages/plantGuard/bzyPhoto/bzyPhoto.vue

@@ -0,0 +1,472 @@
+<template>
+ <div class="innerMargin">
+    <el-card class="box-card">
+      <div class="check-btns">
+        <div class="type-check">
+          <el-button type="blueInfo" size="mini" @click="equipStatusCheck('0')"
+            >拍照</el-button
+          >
+          <el-button type="blueInfo" size="mini" @click="equipStatusCheck('1')"
+            >刷新</el-button
+          >
+          <template v-if="userType == 1">
+            <el-button
+              v-if="delBtnState"
+              type="blueInfo"
+              size="mini"
+              @click="equipStatusCheck('2')"
+              >批量删除</el-button
+            >
+            <el-button
+              v-if="!delBtnState"
+              type="blueInfo"
+              size="mini"
+              @click="equipStatusCheck('3')"
+              >删除</el-button
+            >
+            <el-button
+              v-if="!delBtnState"
+              size="mini"
+              @click="equipStatusCheck('4')"
+              >取消</el-button
+            >
+            <el-button type="blueInfo" size="mini" @click="equipStatusCheck('5')"
+              >一键删除</el-button
+            >
+            <el-button
+              type="blueInfo"
+              v-if="downBtnState"
+              size="mini"
+              @click="equipStatusCheck('7')"
+              >图片下载</el-button
+            >
+            <el-button
+              v-if="!downBtnState"
+              type="blueInfo"
+              size="mini"
+              @click="equipStatusCheck('8')"
+              >下载</el-button
+            >
+            <el-button
+              v-if="!downBtnState"
+              size="mini"
+              @click="equipStatusCheck('9')"
+              >取消</el-button
+            >
+          </template>
+        </div>
+        <div class="search-box">
+          <el-date-picker
+            style="cursor: pointer"
+            size="mini"
+            v-model="timeRange"
+            type="daterange"
+            range-separator="至"
+            clearable
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="DateChange"
+          ></el-date-picker>
+        </div>
+      </div>
+      <el-row :gutter="30" v-viewer v-if="photoList.length > 0">
+        <el-col
+          :xs="24"
+          :sm="24"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          v-for="item in photoList"
+          :key="item.addr"
+        >
+          <div class="photoItem">
+            <div class="photoInfo">
+              <template v-if="userType == 1">
+                <i
+                  class="iconfont icon-shanchu"
+                  v-show="delBtnState && downBtnState"
+                  @click="delectImg(item.id)"
+                ></i>
+                <el-checkbox
+                  v-show="!delBtnState || !downBtnState"
+                  v-model="item.checked"
+                ></el-checkbox>
+              </template>
+            </div>
+            <div class="photoImg">
+              <!-- 有的图片放到阿里云，有的放到了服务器 -->
+              <template v-if="item.addr.indexOf('http') != -1">
+                <!-- <img :src="item.addr" /> -->
+                <img v-lazy="item.addr" alt="">
+              </template>
+              <template v-else>
+                <!-- <img :src="$host + item.addr" /> -->
+                <img v-lazy="$host + item.addr" />
+              </template>
+            </div>
+            <div class="date" style="background: #fff">
+              {{ (item.addtime * 1000) | formatTime }}
+            </div>
+            <!-- <div class="photoCtrl">
+              <div @click="viewDes()">
+                <i class="iconfont icon-wendang"></i>
+                查看描述
+              </div>
+            </div> -->
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 暂无数据 -->
+      <div style="text-align: center" v-else>
+        <img :src="$imghost + zanwu" alt />
+      </div>
+      <el-pagination
+        v-if="photoList.length > 0"
+        background
+        layout="prev, pager, next"
+        :total="totalNum"
+        @current-change="changePage"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      id:this.$store.state.bzy_photo_id,
+      d_id:this.$store.state.bzy_photo_did,
+      zanwu: "/images/expertDiagnosis/zanwu.png",
+      totalNum: 0,
+      timeRange: [],
+      delBtnState: true,
+      downBtnState: true,
+      photoList: [],
+      queryInfo: {
+        begin: "",
+        end: "",
+        page: 1,
+      },
+      idList: [], //删除图片的地址数组
+      photoDescDialogVisible: false,
+      times: 50, //下载图片定时器次数,超过50停止下载
+    };
+  },
+  mounted() {
+    this.getPhoteList();
+  },
+  computed: {
+    userType: function () {
+      //获取用户类型
+      return window.sessionStorage.getItem("myuser_type");
+    },
+  },
+  methods: {
+    equipStatusCheck(flag) {
+      this.active = flag;
+      if (flag == 0) {
+        //拍照
+        this.equipBtnControl("takephoto");
+      }
+      if (flag == 1) {
+        //刷新
+        this.getPhoteList();
+      }
+      if (flag == 2) {
+        this.delBtnState = false;
+      }
+      if (flag == 3) {
+        this.idList = this.photoList
+          .filter((item) => {
+            return item.checked == true;
+          })
+          .map((item) => {
+            return item.id;
+          });
+        if (this.idList.length == 0) {
+          this.$message.warning("请选择要删除的图片！");
+        } else {
+          this.delImgFun(this.idList);
+        }
+      }
+      if (flag == 4) {
+        this.photoList.map((item) => {
+          item.checked = false;
+        });
+        this.delBtnState = true;
+      }
+      if (flag == 5) {
+        this.delImgFun("");
+      }
+
+      if (flag == 7) {
+        this.downBtnState = !this.downBtnState;
+      }
+      if (flag == 8) {
+        //批量下载图片
+        this.idList = this.photoList
+          .filter((item) => {
+            return item.checked == true;
+          })
+          .map((item) => {
+            return item.id;
+          });
+        if (this.idList.length == 0) {
+          this.$message.warning("请选择要下载的图片！");
+        } else {
+          this.downPhoto(this.idList);
+        }
+      }
+      if (flag == 9) {
+        this.photoList.map((item) => {
+          item.checked = false;
+        });
+        this.downBtnState = !this.downBtnState;
+      }
+    },
+    equipBtnControl(cmd) {
+      this.$axios({
+        method: "POST",
+        url:
+          "/api/api_gateway?method=forecast.send_control.admin_device_control",
+        data: this.qs.stringify({
+          cmd,
+          device_type_id: 7,
+          d_id: this.d_id,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.$message.success("指令下发成功!");
+        }
+      });
+    },
+    getPhoteList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
+        data: this.qs.stringify({
+          device_id: this.id,
+          ret: "list",
+          page: this.queryInfo.page,
+          page_number: 8,
+          time_begin: this.queryInfo.begin,
+          time_end: this.queryInfo.end,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          let data = res.data.data.data;
+          this.photoList = data.map((item) => {
+            item.checked = false;
+            return item;
+          });
+          this.totalNum = res.data.data.num;
+          this.$message.success("请求最新图片成功！");
+        }
+      });
+    },
+    //改变page
+    changePage(val) {
+      this.queryInfo.page = val;
+      this.getPhoteList();
+    },
+    DateChange() {
+      this.queryInfo.page = 1;
+      if (this.timeRange) {
+        this.queryInfo.begin = parseInt(
+          new Date(this.timeRange[0]).getTime() / 1000
+        );
+        this.queryInfo.end = parseInt(
+          new Date(this.timeRange[1]).getTime() / 1000
+        );
+      } else {
+        this.queryInfo.begin = "";
+        this.queryInfo.end = "";
+      }
+      this.getPhoteList();
+    },
+    viewDes() {
+      this.$prompt("图片描述", "添加详情", {
+        confirmButtonText: "保存",
+        cancelButtonText: "取消",
+      })
+        .then(({ value }) => {})
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    delImgFun(idList) {
+      this.$confirm("此操作将永久删除该设备图片, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url:
+              "/api/api_gateway?method=forecast.forecast_system.equip_photo_del",
+            data: this.qs.stringify({
+              device_id: this.id,
+              addrlist: JSON.stringify(idList),
+            }),
+          }).then((res) => {
+            if (res.data.message == "") {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getPhoteList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    delectImg(id) {
+      this.delImgFun([id]);
+    },
+    //返回上一页
+    goBackPage() {
+      this.$router.go(-1);
+    },
+    downloadFile(data) {
+      let blob = new Blob([data], { type: "application/zip" });
+      let url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a"); // 创建a标签
+      link.href = url;
+      link.download = "下载图片"; // 重命名文件
+      link.click();
+      URL.revokeObjectURL(url); // 释放内存
+    },
+    downPhoto(arr) {
+      let uid = sessionStorage.getItem("myuid");
+      let image_id = arr.join(",");
+      this.$axios({
+        method: "post",
+        url: "/api/api_gateway?method=forecast.worm_lamp.get_task_id",
+        data: this.qs.stringify({
+          image_id,
+          myuid: uid,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.$message.success('图片下载中！')
+          let that = this;
+          this.cy_id = res.data.data;
+          function downPhotoState() {
+            if (that.times >= 0) {
+              that.times--;
+              that
+                .$axios({
+                  method: "POST",
+                  url: "/api/api_gateway?method=forecast.worm_lamp.check_down",
+                  data: that.qs.stringify({
+                    get_id: that.cy_id,
+                  }),
+                })
+                .then((res) => {
+                  if (res.data.data) {
+                    // 判断后台从阿里云下载图片是否完成
+                    clearInterval(interval);
+                    that
+                      .$axios({
+                        method: "POST",
+                        url: "/api/image_down",
+                        responseType: "blob",
+                        data: that.qs.stringify({
+                          get_id: that.cy_id,
+                        }),
+                      })
+                      .then((res) => {
+                        that.downloadFile(res.data);
+                      });
+                  }
+                })
+                .catch((error) => this.$message.error(error));
+            } else {
+              clearInterval(interval);
+              that.$message.warning("图片下载失败！");
+            }
+          }
+          var interval = setInterval(downPhotoState, 1000);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.check-btns {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  align-items: center;
+  .el-select {
+    width: 90px;
+  }
+}
+
+.photoItem {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  .photoInfo {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    display: flex;
+    justify-content: space-between;
+    span {
+      color: #fff;
+    }
+    i {
+      cursor: pointer;
+      color: red;
+      display: none;
+    }
+  }
+  .photoImg {
+    height: 250px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .date {
+    text-align: center;
+    font-size: 14px;
+    padding: 10px 0;
+  }
+  .photoCtrl {
+    background-color: #fff;
+    text-align: center;
+    line-height: 30px;
+    font-size: 14px;
+    color: #666;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    .el-checkbox {
+      position: absolute;
+      right: 10px;
+    }
+  }
+}
+.photoItem:hover {
+  .photoInfo i {
+    display: block;
+  }
+}
+</style>

src/pages/plantGuard/bzyPhoto/bzyTabPhoto.vue

@@ -0,0 +1,122 @@
+<!-- 测报灯图片 -->
+<template>
+  <div class>
+      <div class="ctrlsBtn">
+          <div>
+            <el-button type="blueInfo" size="small" @click="equipStatusCheck('0')" >拍照</el-button>
+            <el-button type="blueInfo" size="small" @click="equipStatusCheck('1')" >刷新</el-button>
+          </div>
+          <div>
+            <el-button type="orangeInfo" size="small" @click="lookmore()" >查看全部图片</el-button>
+          </div>
+      </div>
+      <div class="photos" v-viewer>
+          <div v-for="i in photoList" :key="i.addtime">
+              <img :src="i.addr" alt="">
+              <div>{{i.addtime*1000|formatTime}}</div>
+          </div>
+      </div>
+      <div v-if="!photoList.length">暂无数据</div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["equipId", "equipType","d_id"],
+  data() {
+    //这里存放数据
+    return {
+      photoList:[]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //在线状态选择
+    equipStatusCheck(flag) {
+      this.active = flag;
+      // this.getEquipList();
+      if (flag == 0) {
+        //拍照
+        this.equipBtnControl("takephoto");
+      }
+      if (flag == 1) {
+        this.getPhoteList(); //图片列表数据请求
+      }
+      if (flag == 2) {
+        //批量删除
+        this.delBtnState = false;
+      }
+    },
+    lookmore(){
+      this.$store.commit('setBzyPhotoId',this.equipId)
+      this.$store.commit('setBzyPhotoDid',this.d_id)
+
+      this.$router.push('bzyPhoto')
+    },
+     //图片列表数据请求
+     getPhoteList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
+        data: this.qs.stringify({
+          device_id: this.equipId,
+          ret: "list",
+          page: 1,
+          page_number: 6,
+          time_begin: '',
+          time_end: '',
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          let data = res.data.data.data;
+          this.photoList = data
+        }
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getPhoteList();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.ctrlsBtn{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+.photos{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    >div{
+        flex: 1;
+        width: 33.3333%;
+        max-width: 33.3333%;
+        min-width: 33.3333%;
+        text-align: center;
+        img{
+            width: 90%;
+        }
+    }
+}
+</style>

src/pages/plantGuard/equipInfo.vue

@@ -19,10 +19,10 @@
       <div>设备名称：{{info.device_name || '--'}}</div>
       <div>在线状态：<span :class="[info.device_status?'online':'offline']">{{info.device_status?'在线':'离线'}}</span></div>
       <template v-if="equipType==2">
-        <div>设备版本：{{info.dver_num || '--'}}</div>
+        <div>设备版本：{{info.dtype || '--'}}</div>
       </template>
       <template v-if="equipType==3">
-        <div>设备版本：{{info.dver_num || '--'}}</div>
+        <div>设备版本：{{info.dtype || '--'}}</div>
       </template>
       <template v-if="equipType==4">
         <div>添加诱芯：
@@ -36,7 +36,8 @@
         </div>
       </template>
       <template v-if="equipType==5">
-        <div>电压：{{info.device_status || '--'}}V　信号强度：{{info.device_status || '--'}}</div>
+        <div>电压：{{info.device_status || '--'}}</div>
+        <div>信号强度：{{info.device_status || '--'}}</div>
       </template>
       <template v-if="equipType==7">
         <div>载玻片、培养液更换：
@@ -50,9 +51,9 @@
         </div>
       </template>
       <div>最新上报时间：{{info.addtime*1000|formatTime}} 
-        <!-- <span><i class="el-icon-refresh controlIcon" v-if="info.d_id"></i></span> -->
+        <span><i class="el-icon-refresh controlIcon" @click="refreshDate()" v-if="info.d_id"></i></span>
       </div>
-      <div>设备定位：{{info.address || '--'}}</div>
+      <div v-if="equipType!=5">设备定位：{{info.address || '--'}}</div>
     </div>
     <div class="equipState">
       <slot name="equipStateInner"></slot>
@@ -66,7 +67,7 @@
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["equipId", "equipType"],
+  props: ["equipId", "equipType","d_id"],
   data() {
     //这里存放数据
     return {
@@ -99,10 +100,14 @@ export default {
           if (res.data.message == "") {
             if(res.data.data.counts == 0){
               this.equipDataState=false;
-              this.equipData = {}
+              this.info = {}
             }else{
               this.equipDataState = true;
-              this.equipData = res.data.data.ids[0]
+              var dat = res.data.data.ids[0]
+              dat.device_name = dat.equip_name;
+              dat.addtime = dat.uptime;
+              dat.imei = dat.equip_id;
+              this.info = dat
             }
           }
         });
@@ -200,6 +205,27 @@ export default {
         }
       });
     },
+    refreshDate(){
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.send_control.get_device_config",
+        data: this.qs.stringify({
+          device_type_id: this.equipType,
+          d_id: this.d_id,
+          control_type: "data",
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          setTimeout(()=>{
+            this.getEquipInfo(this.equipId,this.equipType);
+            var val = new Date().getTime();
+            this.$emit('getNowState');
+          },3000)
+        } else {
+          this.$message.err("刷新失败");
+        }
+      });
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

src/pages/plantGuard/equipState.vue

@@ -20,11 +20,26 @@
           <template v-if="item=='addtime'">
             <div class="elementValue" >{{equipData[item]*1000|formatTime}}</div>
           </template>
+          <template v-else-if="item=='at'">
+            <template v-if="equipData.new_tem">
+              <div class="elementValue" >{{equipData.new_tem}}{{equipState_dict[item].unit}}</div>
+            </template>
+            <template v-else>
+              <div class="elementValue" >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
+            </template>
+          </template>
+          <template v-else-if="item=='ah'">
+            <template v-if="equipData.new_hum">
+              <div class="elementValue" >{{equipData.new_hum}}{{equipState_dict[item].unit}}</div>
+            </template>
+            <template v-else>
+              <div class="elementValue" >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
+            </template>
+          </template>
           <template v-else>
             <div class="elementValue" v-if="equipState_dict[item].value">{{equipState_dict[item].value[equipData[item]]}}</div>
             <div class="elementValue" v-else >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
           </template>
-          
         </template>
           
       </div>
@@ -51,16 +66,18 @@ export default {
             "2": ["ds","ws","rps","tps","dps","tt","ct","at","ah","cv","bv","csq","dver","addtime"],
             "3": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","csq","dver","addtime"],
             "4": ["proj","ds","ws","at","ah","cv","bv","cs","bs","infr_ct","csq","dver","addtime"],
-            "7": ["ds","at","ah","set_temp","pre_temp","bs","rps","usb_sta","vbat","csq","dver","addtime"],
+            "7": ["at","ah","set_temp","pre_temp","bs","usb_sta","vbat","csq","dver","addtime"],
         },
         equipData:{},
-        equipDataState:false
+        equipDataState:false,
+        infos:''
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+  },
   //方法集合
   methods: {
     // 设备状态弹框

src/pages/plantGuard/page1.vue

@@ -16,7 +16,22 @@
     <div class="equipTypebox">
       <div class="equipTypeBody">
         <div class="equipTypeList">
-          <div v-for="(item,index) in equipType" @click="changeEquip(index,item)" @mouseover='mouseOve(index,item)' @mouseleave='mouseOut(index,item)' :key="item.type"  :class="[currSelectType==item.type?'active':'']" >{{item.name}}</div>
+          <div v-for="(item,index) in equipType" 
+            @click="changeEquip(index,item)" 
+            @mouseover='mouseOve(index,item)' 
+            @mouseleave='mouseOut(index,item)' 
+            :key="item.type"  
+            :class="[currSelectType==item.type?'active':'']" 
+          >
+          <img v-if="!item.type" :src="tabIcon[0]" alt="" width="25px" class="tabIcon">
+          <img v-else :src="tabIcon[item.type]" alt="" height="25px" width="25px" class="tabIcon">
+
+          <img v-if="!item.type" :src="tabHoverIcon[0]" alt="" width="25px" class="hoverIcon">
+          <img v-else :src="tabHoverIcon[item.type]" alt="" height="25px" width="25px" class="hoverIcon">
+          
+          {{item.name}}
+          <!-- {{item.name+`${item.type}`}} -->
+          </div>
         </div>
         <div :style="'left:'+equipStyleLeft+'px'" class="equipHighLight"></div>
       </div>
@@ -71,7 +86,7 @@
             </button>
           </template>
           <template v-slot:inner>
-            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
+            <equip-info v-if="hackReset" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow'>
               <template v-solt:equipStateInner></template>
             </equip-info>
             <div class="equipData">
@@ -107,7 +122,7 @@
             </button>
           </template>
           <template v-slot:inner>
-            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
+            <equip-info v-if="hackReset" @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow'>
               <template v-solt:equipStateInner></template>
             </equip-info>
             <div class="equipData">
@@ -143,7 +158,7 @@
             </button>
           </template>
           <template v-slot:inner>
-            <equip-info v-if="hackReset" :equipId="queryInfo.equip_id" :equipType='detailsShow'>
+            <equip-info v-if="hackReset"  @getNowState='getNowState' :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow'>
               <template v-solt:equipStateInner></template>
             </equip-info>
             <div class="equipData">
@@ -179,7 +194,7 @@
             </button>
           </template>
           <template v-slot:inner>
-            <equip-info v-if="hackReset" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
+            <equip-info v-if="hackReset" @getNowState='getNowState' :equipId='queryInfo.equip_id' :d_id="queryInfo.d_id" :equipType='detailsShow'>
               <template v-solt:equipStateInner></template>
             </equip-info>
             <div class="equipData">
@@ -258,7 +273,7 @@
             </button>
           </template>
           <template v-slot:inner>
-            <equip-info v-if="hackReset" @child-event="setTimeDialogShow" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
+            <equip-info v-if="hackReset" @child-event="setTimeDialogShow" @getNowState='getNowState' :d_id="queryInfo.d_id" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
               <template v-solt:equipStateInner></template>
             </equip-info>
             <div class="equipData">
@@ -272,7 +287,7 @@
                     :name="pages.name"
                   > 
                     <!-- <keep-alive> -->
-                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage && hackReset"></components>
+                      <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' ref="child7" v-if="pages.name == nowPage && hackReset"></components>
                     <!-- </keep-alive> -->
                   </el-tab-pane>
                 </el-tabs>
@@ -328,6 +343,7 @@ import qxzEquipHistoryDate from './equipHistoryDateQxz' //气象站设备历史
 import twentyFourHistoryDate from './twentyFourHistoryDate' //气象站24小时数据
 import cbdTabPhoto from './cbdPhoto/cbdTabPhoto' //测报灯图片
 import cbdTabPestStat from './cbdTabPestStat' //测报灯害虫统计
+import bzyTabPhoto from './bzyPhoto/bzyTabPhoto' //测报灯图片
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -343,6 +359,7 @@ export default {
       twentyFourHistoryDate,
       cbdTabPhoto,
       cbdTabPestStat,
+      bzyTabPhoto,
   },
   data() {
     //这里存放数据
@@ -385,6 +402,27 @@ export default {
         //   name:"杀虫灯"
         // },
       ],
+      tabIcon:[
+        require('@/assets/images/home/mapIcon/icon0.png'),
+        require('@/assets/images/home/mapIcon/icon0.png'),
+        require('@/assets/images/home/mapIcon/icon2.png'),
+        require('@/assets/images/home/mapIcon/icon3.png'),
+        require('@/assets/images/home/mapIcon/icon4.png'),
+        require('@/assets/images/home/mapIcon/icon5.png'),
+        require('@/assets/images/home/mapIcon/icon6.png'),
+        require('@/assets/images/home/mapIcon/icon7.png'),
+        require('@/assets/images/home/mapIcon/icon9.png'),
+      ],
+      tabHoverIcon:[
+        require('@/assets/images/home/mapIcon/hover0.png'),
+        require('@/assets/images/home/mapIcon/hover0.png'),
+        require('@/assets/images/home/mapIcon/hover2.png'),
+        require('@/assets/images/home/mapIcon/hover3.png'),
+        require('@/assets/images/home/mapIcon/hover4.png'),
+        require('@/assets/images/home/mapIcon/hover5.png'),
+        require('@/assets/images/home/mapIcon/hover6.png'),
+        require('@/assets/images/home/mapIcon/hover7.png'),
+      ],
       currSelectType:0,
       currSelectSite:0,
       equipStyleLeft:0,
@@ -394,53 +432,93 @@ export default {
       geocoder:null,
       equipStyleObject:[
         {
-          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型0
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型1
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon2.png"), // 设别类型2
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon3.png"), // 设别类型3
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon4.png"), // 设别类型4
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon5.png"), // 设别类型5
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon6.png"), // 设别类型6
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon7.png"), // 设别类型7
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon7.png"), // 设别类型8
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon9.png"), // 设别类型9
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
         {
-          url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
-          size: new AMap.Size(25, 15), // 图标大小
+          url: require("@/assets/images/home/mapIcon/icon2Off.png"), // 设别类型2 index-10
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon3Off.png"), // 设别类型3 index-11
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon4Off.png"), // 设别类型4 index-12
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon5Off.png"), // 设别类型5 index-13
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon6Off.png"), // 设别类型6 index-14
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon7Off.png"), // 设别类型7 index-15
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon7Off.png"), // 设别类型8 index-16
+          size: new AMap.Size(35, 35), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
+        },
+        {
+          url: require("@/assets/images/home/mapIcon/icon9Off.png"), // 设别类型9 index-17
+          size: new AMap.Size(35, 35), // 图标大小
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         },
       ],
@@ -509,6 +587,9 @@ export default {
           name:"equipState",
           label:"实时状态",
         },{
+          name:"bzyTabPhoto",
+          label:"查看图片",
+        },{
           name:"equipHistoryDate",
           label:"历史数据",
         }],
@@ -584,7 +665,7 @@ export default {
         zIndex: 101,
       });
       this.map.add(this.tileLayer1);
-      this.map.add(this.tileLayer2);
+      // this.map.add(this.tileLayer2);
     },
     getUserEquipType(){
       this.$axios({
@@ -674,39 +755,40 @@ export default {
       this.getEquipList(item.type)
     },
     mouseOve(index,item){
-      this.equipStyleLeft = 80*index
+      this.equipStyleLeft = 100*index
     },
     mouseOut(index,item){
       if(item.type!=this.currSelectType){
-        this.equipStyleLeft = 80*this.currSelectSite
+        this.equipStyleLeft = 100*this.currSelectSite
       }
     },
     iconFormat(equip_ip, item) {
       switch (equip_ip + "") {
         case "2":
-          item.icon = require("@/assets/images/home/mapView/scd.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon2.png");
           break;
         case "3":
-          item.icon = require("@/assets/images/home/mapView/cbd.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon3.png");
           break;
         case "4":
-          item.icon = require("@/assets/images/home/mapView/xyq.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon4.png");
           break;
         case "5":
-          item.icon = require("@/assets/images/home/mapView/qxz.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon5.png");
           break;
         case "6":
-          item.icon = require("@/assets/images/home/mapView/jk.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon6.png");
           break;
         case "7":
-          item.icon = require("@/assets/images/home/mapView/bzy.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon7.png");
           break;
         case "9":
-          item.icon = require("@/assets/images/home/mapView/tccb.png");
+          item.icon = require("@/assets/images/home/mapIcon/icon9.png");
           break;
       }
     },
     getEquipList(type) {
+      this.equipListloading = true;
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=home.homes.equip_map_location",
@@ -716,11 +798,18 @@ export default {
           user_id:this.user_id
         }),
       }).then((res) => {
+        this.equipListloading = false;
         if (res.data.message == "") {
           let data = res.data.data;
+          var index = 0;
           this.equipListCurr = data.map((item) => {
             this.iconFormat(item.device_type_id, item);
-            item.style = item.device_type_id; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
+            if(item.device_status == 1){
+              item.style = item.device_type_id; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
+            }else{
+              item.style = parseInt(item.device_type_id)+8; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
+            }
+            item.index = index++;
             if (item.gps_type == 1) {
               //GPS
               item.lnglat = wgs84togcj02(item.lng, item.lat);
@@ -734,11 +823,12 @@ export default {
           }
           this.massMarks = new AMap.MassMarks(this.equipListCurr, {
             zIndex: 199, // 海量点图层叠加的顺序
-            zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
+            // zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
             style: this.equipStyleObject, // 设置样式对象
           });
           this.massMarks.setMap(this.map);
           this.massMarks.on("click", (e) => {
+            document.getElementById("equipListBox").scrollTop = 87*e.data.index;
             this.equipMarkerClick(e.data);
             // this.openInfo(e.data);
           });
@@ -752,6 +842,8 @@ export default {
       this.$nextTick(() => {
         this.hackReset = true
       })
+      console.log(item);
+      
       this.equipShow = true; //图标上设备信息框
       this.equipsVisible = true; //右侧设备弹框
       this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
@@ -945,6 +1037,15 @@ export default {
     sidebarClear(val){
       this.sidebarComponents = ''
     },
+    // 设备刷新请求实时状态
+    getNowState(){
+      if(this.nowPage == 'equipState' || this.nowPage == 'qxzEquipState' ){
+        // console.log(`child${this.detailsShow}`);
+        // console.log(this.$refs[`child${this.detailsShow}`][0]);
+        
+        this.$refs[`child${this.detailsShow}`][0].equipStateSet(this.queryInfo.equip_id, this.queryInfo.type);
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -1008,24 +1109,40 @@ export default {
       justify-content: space-around;
       align-items: center;
       >div{
-        width: 80px;
+        width: 100px;
         text-align: center;
         border-radius: 20px;
         cursor: pointer;
+        >img{
+          vertical-align: middle;
+        }
+        .hoverIcon{
+          display: none;
+        }
       }
       >div.active{
-        // background: #0195ff;
-        // color:#eee;
+        .tabIcon{
+          display: none;
+        }
+        .hoverIcon{
+          display: inline-block;
+        }
       }
       >div:hover{
         // color: #eee;
+        .tabIcon{
+          display: none;
+        }
+        .hoverIcon{
+          display: inline-block;
+        }
       }
     }
     .equipHighLight{
       position: absolute;
       top: 0;
       height: 32px;
-      width: 80px;
+      width: 100px;
       border-radius: 20px;
       background: #0195ff;
       z-index: 0;

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import store from '../store/store';
 
 
 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
@@ -139,6 +140,7 @@ const CbdPestStats = () => import('@/Pages/plantGuard/cbdPestStats') //测报灯
 const Monitor = () => import('@/Pages/monitor/monitorSystem/Monitor')
 const BaseAll = () => import('@/Pages/plantGuard/baseAll') //管理员查看项目基地
 const PhotoView = () => import( /* webpackChunkName: "monitor" */ '@/Pages/monitor/monitorSystem/PhotoView')
+const BzyPhoto = () => import('@/Pages/plantGuard/bzyphoto/bzyphoto') //孢子仪图片
 
 const Page9 = () => import('@/Pages/plantGuard/page9') //水价管理-地图展示
 const Page10 = () => import('@/Pages/plantGuard/page10') //水价管理-地图展示
@@ -163,16 +165,20 @@ export default new Router({
       component: PlantGuard,
       children:[
         {
-          path: 'mapView',
-          name: 'MapView',
-          component: MapView,
-          meta: { title: '数据监测',order:1,navname: '项目基地', }
+          path: '',
+          redirect: window.sessionStorage.getItem('setHomepage') || '/plantGuard/baseAll'
         },
+        // {
+        //   path: 'mapView',
+        //   name: 'MapView',
+        //   component: MapView,
+        //   meta: { title: '数据监测',order:1,navname: '项目基地', }
+        // },
         {
           path: 'baseAll',
           name: 'BaseAll',
           component: BaseAll,
-          meta: { title: '数据监测',order:1,navname: '项目基地', }
+          meta: { title: '数据监测',order:0,navname: '项目基地', }
         },
         {
           path: 'page1',
@@ -223,6 +229,12 @@ export default new Router({
           meta: { title: '设备管理',order:7,navname: '设备管理', }
         },
         {
+          path: 'bzyPhoto',
+          name: 'bzyPhoto',
+          component: BzyPhoto,
+          meta: { title: '',order:0,navname: '孢子仪图片', }
+        },
+        {
           path: 'cbdPhoto',
           name: 'cbdPhoto',
           component: CbdPhoto,

src/store/store.js

@@ -14,6 +14,8 @@ const store = new Vuex.Store({
         cbd_photo_did:'',//测报灯查看图片设备did
         cbd_pest_id:'',//测报灯害虫统计设备id
         cbd_pest_did:'',//测报灯害虫统计设备did
+        bzy_photo_id:'',//测报灯查看图片设备id
+        bzy_photo_did:'',//测报灯查看图片设备did
         
     },
     mutations: {
@@ -38,6 +40,12 @@ const store = new Vuex.Store({
       setCbdPestDid (state,val) {
         state.cbd_pest_did = val;
       },
+      setBzyPhotoId (state,val) {
+        state.bzy_photo_id = val;
+      },
+      setBzyPhotoDid (state,val) {
+        state.bzy_photo_did = val;
+      },
     },
     plugins: [createPersistedState({ storage: window.sessionStorage })]
 })