灌溉最新代码

src/pages/plantGuard/irrigate/irrigate.vue

@@ -6,26 +6,28 @@
     <div class="equipListBox">
       <div class="searchTop">
         <div>设备列表</div>
-        <div>
+        <!-- <div>
           <el-input
             size="small"
             placeholder="请选择设备"
             suffix-icon="el-icon-search"
             v-model="searchVal"
           ></el-input>
-        </div>
+        </div> -->
       </div>
       <div class="inner">
         <div class="scroll">
           <el-scrollbar>
             <div class="equipList">
                 <div class="item"
-                v-for="(item,index) in equipRelayList" :key="index" @click="lookEquip(index)">
+                v-for="(item,index) in equipRelayList" :key="index" @click="lookEquip(item)">
                     <div class="">
                         <img src="../../../../static/images/irrigate/sbIcon.png" alt="">
                         <span>{{item.name}}</span>
                     </div>
-                    <span @click.stop="setEquipInfo(item,index)">自定义</span>
+                    <span @click.stop="setEquipInfo(item,index)">
+                      <i class="el-icon-setting"></i>
+                    </span>
                 </div>
                 <div class="item" v-if="!equipRelayList.length">
                    暂无数据 
@@ -51,7 +53,7 @@
           <div>状态</div>
         </div>
         <div class="itemMenu itemMenu3" @click="subMenuState(3)">
-          <div>气象</div>
+          <div>要素</div>
         </div>
       </div>
     </div>
@@ -120,7 +122,7 @@
             <span class="uptime">(2021-04-21 12:00:00)</span>
           </div>
           <div>
-            <span class="historyBtn">历史数据</span>
+            <span class="historyBtn" @click="lookHistory()">历史数据</span>
             <i class="el-icon-caret-right" @click="subMenuState(3)"></i>
           </div>
         </div>
@@ -257,7 +259,7 @@ export default {
       eleNum: [],
       eleVal: [],
       equipEleList: [],
-      qxzScrollHeight: "204",
+      qxzScrollHeight: "",
       searchVal: "",
       equipData: [],
       marker: null,
@@ -360,6 +362,7 @@ export default {
       intnum: undefined,
       // 编辑的继电器
       currRelay:{
+        relayNum:'',
         index:'',
         lnglat:[],
       },
@@ -467,12 +470,13 @@ export default {
         this.relayName = data.conf.relayName.split("/");
         this.relayNum = data.conf.relayNum.split("/");
         this.relayVal = eval("(" + data.dat.device_status + ")");
-        if(data.dat.device_addr){
+        if(data.dat.device_addr){     
           this.relaydevice_addr = data.dat.device_addr.split("/");
           this.renderRelay();
         }else{
           for(var i = 0;i<32;i++){
-              this.relaydevice_addr.push('0,0');
+              var defaultlnglat = data.conf.lng+','+data.conf.lat
+              this.relaydevice_addr.push(defaultlnglat);
             if(i==31){
               this.renderRelay();
             }
@@ -517,15 +521,16 @@ export default {
       this.relayNum.forEach((item, index) => {
         if (item != 0) {
           var name = this.relayName[index] || this.relayList[item].name;
-          var val = this.eleVal["j" + (index + 1)];
-          
+          var val = this.eleVal["j" + (index + 1)];    
           var lnglat = this.relaydevice_addr[index]
+          
           this.equipRelayList.push(
               {
                   switchNum:index,
                   val:val,
                   name:name,
-                  lnglat:lnglat
+                  lnglat:lnglat,
+                  type:item
               }
           )
         }
@@ -541,25 +546,41 @@ export default {
           this.ctrlScrollHeight = 132;
         }
       });
-      this.map.clearMap();
+      this.map.remove(this.markerList);
+      this.markerList = [];
       this.equipRelayList.forEach(item => {
         if (item.type == 1) {
-          var icon = "../../../../static/images/irrigate/sbPhoto.png";
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon11.gif";
           // var icon = '../../../../static/images/1111.gif'
         } else if (item.type == 2) {
-          var icon = "../../../../static/images/irrigate/sfjPhoto.png";
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon2.gif";
           // var icon = '../../../../static/images/icon5.svg'
         } else if (item.type == 3) {
-          var icon = "../../../../static/images/irrigate/dcfPhoto.png";
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon3.gif";
         } else if (item.type == 4) {
-          var icon = "../../../../static/images/irrigate/sqPhoto.png";
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon4.gif";
+        } else if (item.type == 5) {
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon5.gif";
+        } else if (item.type == 6) {
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon6.gif";
+        } else if (item.type == 7) {
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon7.gif";
+        } else if (item.type == 8) {
+          var icon = "../../../../static/images/irrigate/relayIcon/relayIcon8.gif";
         }
+        var itemlnglat = item["lnglat"].split(',');
         this.marker = new AMap.Marker({
-          position: new AMap.LngLat(item["lnglat"][0], item["lnglat"][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          icon: icon,
+          position: new AMap.LngLat(itemlnglat[0], itemlnglat[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          icon: new AMap.Icon({            
+              image: icon,
+              size: new AMap.Size(33, 40),  //图标大小
+              imageSize: new AMap.Size(33, 40)
+          }),
           offset: new AMap.Pixel(-13, -30),
           title: item["name"]
         });
+        // 设置点标记的动画效果，此处为弹跳效果
+        // this.marker.setAnimation('AMAP_ANIMATION_BOUNCE');
         this.markerList.push(this.marker);
         //信息窗体
         this.marker.content = item["name"];
@@ -647,6 +668,10 @@ export default {
         this.qxzElShow = !this.qxzElShow;
       }
     },
+    lookHistory(){
+      this.$store.commit('setEleHistoryId',15112501)
+      this.$router.push('eleHistory');
+    },
     ScrollUp() {
       this.intnum = setInterval(_ => {
         this.$refs.scrollContent.style.transition = "top 0.5s";
@@ -688,19 +713,21 @@ export default {
         });
       })
     },
-    lookEquip(index){
-      var addr =this.relaydevice_addr[index].split(',');
+    lookEquip(item){
+      var addr =this.relaydevice_addr[item.switchNum].split(',');
       this.map.setCenter(addr)
       this.map.setZoom(17)
     },
     setEquipInfo(item,index){
+      this.currRelay.relayNum=item.switchNum;
       this.currRelay.index=index;
-      this.currRelay.lnglat=this.relaydevice_addr[index].split(',');
+      this.currRelay.lnglat=this.relaydevice_addr[item.switchNum].split(',');
       this.setlnglatVisible = true
+      
     },
     addrSave(data){
       var addr = [].concat(this.relaydevice_addr)
-      addr[this.currRelay.index]=data.lng+','+data.lat
+      addr[this.currRelay.relayNum]=data.lng+','+data.lat
       this.$axios({
         method: "post",
         url: "/api/api_gateway?method=weather.weather.sf_control_addr",
@@ -710,9 +737,9 @@ export default {
         })
       }).then(res => {
         if(res.data.data==true){
-          this.relaydevice_addr[this.currRelay.index]=data.lng+','+data.lat
-          this.setlnglatVisible = false
-          
+          this.setlnglatVisible = false;
+          this.relaydevice_addr[this.currRelay.relayNum]=data.lng+','+data.lat      
+          this.renderRelay()
         }
       })
     }
@@ -758,6 +785,7 @@ export default {
   background: rgba(12, 20, 44, 0.8);
   border-radius: 8px;
   overflow: hidden;
+  z-index: 200;
   .searchTop {
     display: flex;
     justify-content: space-between;
@@ -803,8 +831,8 @@ export default {
             white-space: nowrap;
             text-overflow: ellipsis;
           }
-          >span{
-              
+          >span:nth-child(2){
+              font-size: 14px;
           }
           img {
             vertical-align: middle;
@@ -867,6 +895,7 @@ export default {
   position: absolute;
   right: 0;
   top: 160px;
+  z-index: 200;
 }
 // 设备预警
 .equipWarnBox {
@@ -939,7 +968,7 @@ export default {
     flex-wrap: wrap;
     .equipState {
       color: #fff;
-    //   width: 33.333%;
+      width: 50%;
       margin-top: 13px;
       text-align: center;
       .name {
@@ -949,7 +978,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
-        text-align: right;
+        // text-align: right;
       }
       /deep/.el-switch__core {
         width: 30px !important;

src/pages/plantGuard/page1.vue

@@ -1276,7 +1276,7 @@ export default {
 .equipListBox{
     position: absolute;
     left: 0;
-    right: 0;
+    right: .4375rem;
     top: 70px;
     bottom: 0;
     overflow: hidden;

src/router/index.js

@@ -149,6 +149,7 @@ const MapView = () => import( /* webpackChunkName: "shouye" */ '@/components/hom
 const Irrigate = () => import('@/Pages/plantGuard/irrigate/irrigate') //智能灌溉-灌溉展示
 const OperatData = () => import('@/Pages/plantGuard/irrigate/operatData') //智能灌溉-操作记录
 const WranData = () => import('@/Pages/plantGuard/irrigate/wranData') //智能灌溉-设备预警
+const EleHistory = () => import('@/Pages/plantGuard/irrigate/eleHistory') //智能灌溉-要素历史数据
 
 Vue.use(Router)
 
@@ -214,6 +215,12 @@ export default new Router({
           meta: { title: '智能灌溉系统',order:2 ,navname:'设备预警',}
         },
         {
+          path:'eleHistory',
+          name: 'eleHistory',
+          component: EleHistory,
+          meta: { title: '智能灌溉系统',order:2 ,navname:'传感器数据',}
+        },
+        {
           path: 'page4',
           name: 'page4',
           component: Page4,

src/store/store.js

@@ -16,6 +16,7 @@ const store = new Vuex.Store({
         cbd_pest_did:'',//测报灯害虫统计设备did
         bzy_photo_id:'',//测报灯查看图片设备id
         bzy_photo_did:'',//测报灯查看图片设备did
+        ele_history_id:'',//水肥设备id
         
     },
     mutations: {
@@ -46,6 +47,9 @@ const store = new Vuex.Store({
       setBzyPhotoDid (state,val) {
         state.bzy_photo_did = val;
       },
+      setEleHistoryId (state,val) {
+        state.ele_history_id = val;
+      },
     },
     plugins: [createPersistedState({ storage: window.sessionStorage })]
 })