tab标签缓存

config/index.js

@@ -12,7 +12,9 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'http://182.92.193.64:8002/',
-        target: 'http://192.168.1.77:8000/',
+        // target: 'http://192.168.1.77:8005/',
+        target: 'http://8.136.98.49:8005/',
+        // target: "http://182.92.193.64:8002", //测试环境
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/api' //重写接口
@@ -21,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.102', // can be overwritten by process.env.HOST
+    host: '192.168.1.103', // can be overwritten by process.env.HOST
     port: 8000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/components/index.vue

@@ -132,8 +132,12 @@
         <div class="content">
             <!-- <div>{{menuTabsValue}}</div> -->
             <!-- <keep-alive> -->
-              <router-view></router-view>
+              <!-- <router-view></router-view> -->
             <!-- </keep-alive> -->
+            <keep-alive>
+              <router-view v-if="$route.meta.keepAlive"></router-view>
+            </keep-alive>
+            <router-view v-if="!$route.meta.keepAlive"></router-view>
         </div>
       </el-main>
     </el-container>
@@ -237,6 +241,8 @@ export default {
   //监控data中的数据变化
   watch: {
     '$route' (to, from) {
+         console.log('--------------');
+         console.log(to.meta.keepAlive);
       let flag = false
       for (let item of this.menuTabs) {
         if (item.name === to.meta.navname) {
@@ -298,9 +304,22 @@ export default {
   //方法集合
   methods: {
     topMenuClick(item, index) {
-      console.log(item);
+      // console.log(item);
+      // console.log(this.$router.options.routes);
       
       if(item.children){
+        this.$router.options.routes.forEach(route => { 
+          if(route.children && route.children.length){
+            route.children.forEach(child => { 
+              if(child.meta){
+                if(child.meta.navname == item.children[0].name){
+                  child.meta.keepAlive = false;
+                }
+              }
+            })
+          }
+        }) 
+
         this.currTopMenuId = item.name;
         this.leftMenuList = item.children;
         this.currLeftMenuId = item.children[0].name;
@@ -323,6 +342,19 @@ export default {
       
     },
     leftMenuClick(item, index) {
+      console.log(item);
+      
+      this.$router.options.routes.forEach(route => { 
+        if(route.children && route.children.length){
+          route.children.forEach(child => { 
+            if(child.meta){
+              if(child.meta.navname == item.name){
+                child.meta.keepAlive = false;
+              }
+            }
+          })
+        }
+      }) 
       this.currLeftMenuId = item.name;
       sessionStorage.setItem("currLeftMenuId", item.name);
       console.log(item)
@@ -337,7 +369,6 @@ export default {
     //添加tab标签
     add_tabs (data) {
       this.menuTabs.push(data)
-      console.log(data);
     },
     //移除tab标签
     removeTab(targetName) {
@@ -371,6 +402,17 @@ export default {
     clickTab(tab) {
       console.log('tab')
       console.log(tab)
+      this.$router.options.routes.forEach(route => { 
+        if(route.children && route.children.length){
+          route.children.forEach(child => { 
+            if(child.meta){
+              if(child.meta.navname == this.menuTabs[tab.index].name){
+                child.meta.keepAlive = true;
+              }
+            }
+          })
+        }
+      })
       this.$router.push({path: this.menuTabs[tab.index].path})
       this.menuList.forEach((item)=>{
         if(item.name == this.menuTabs[tab.index].par){

src/pages/plantGuard/disasterWarn/warnPhoto.vue

@@ -420,7 +420,8 @@ export default {
       let id_list = JSON.stringify(arr);
       this.$axios({
         method: "post",
-        url: "/api/api_gateway?method=forecast.worm_lamp.get_task_id",
+        url: "/api/download",
+        responseType:'blob',
         data: this.qs.stringify({
           id_list,
           device_id: this.id,
@@ -429,44 +430,7 @@ export default {
         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",
-                        withCredentials: true,
-                        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);
+          that.downloadFile(res.data);
         }
       });
     },

src/pages/plantGuard/plantProtection/bzyPhoto.vue

@@ -336,66 +336,38 @@ export default {
     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); // 释放内存
-    },
+    downloadFile(data) {
+      // console.log(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 = this.$store.state.user_id;
+      // let id_list = JSON.stringify(arr);
       let id_list = JSON.stringify(arr);
+      let postData = this.qs.stringify({
+        id_list,
+          device_id: this.id
+      })
       this.$axios({
         method: "post",
-        url: "/api/api_gateway?method=forecast.worm_lamp.get_task_id",
-        data: this.qs.stringify({
-          id_list,
-          device_id: this.id,
-        }),
+        url: "/api/download",
+        data: postData,
+        responseType:'blob',
+        // this.qs.stringify({
+        //   id_list,
+        //   device_id: this.id,
+        // }),
       }).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);
+          that.downloadFile(res.data);
         }
       });
     },

src/pages/plantGuard/plantProtection/cbdPestStats.vue

@@ -74,9 +74,8 @@
           </el-row>
         </div>
         <div class="dataTableSearch">
-          <el-button type="blueInfo" size="mini" @click="deriveData()"
-            >导出</el-button
-          >
+          <div> </div>
+          <!-- <el-button type="blueInfo" size="mini" @click="deriveData()">导出</el-button> -->
           <el-button
             type="blueInfo"
             size="mini"

src/pages/plantGuard/plantProtection/cbdPhoto.vue

@@ -819,6 +819,7 @@ export default {
       this.$axios({
         method: "post",
         url: "/api/download",
+        responseType:'blob',
         data: this.qs.stringify({
           id_list,
           device_id: this.id,
@@ -827,44 +828,7 @@ export default {
         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",
-                        withCredentials: true,
-                        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);
+          that.downloadFile(res.data);
         }
       });
     },

src/router/index.js

@@ -81,157 +81,157 @@ export default new Router({
           path: 'baseAll',
           name: 'baseAll',
           component: BaseAll,
-          meta: { title: '农林植保',order:0,navname: '植保监测', }
+          meta: { title: '农林植保',order:0,navname: '植保监测', keepAlive: false }
         },
         {
           path: 'base',
           name:'base',
           component: Base,
-          meta: { title: '农林植保',order:0, navname:'植保示范点',}
+          meta: { title: '农林植保',order:0, navname:'植保示范点', keepAlive: false}
         },
         {
           path:'irrigateProject',
           name: 'irrigateProject',
           component: IrrigateProject,
-          meta: { title: '智能灌溉',order:3 ,navname:'灌溉监测',}
+          meta: { title: '智能灌溉',order:3 ,navname:'灌溉监测', keepAlive: false}
         },
         {
           path: 'irrigate',
           name: 'irrigate',
           component: Irrigate,
-          meta: { title: '智能灌溉',order:3 ,navname:'灌溉示范点',}
+          meta: { title: '智能灌溉',order:3 ,navname:'灌溉示范点', keepAlive: false}
         },
         {
           path: 'operatData',
           name: 'operatData',
           component: OperatData,
-          meta: { title: '智能灌溉',order:3 ,navname:'操作记录',}
+          meta: { title: '智能灌溉',order:3 ,navname:'操作记录', keepAlive: false}
         },
         {
           path: 'wranData',
           name: 'wranData',
           component: WranData,
-          meta: { title: '智能灌溉',order:3 ,navname:'预警信息',}
+          meta: { title: '智能灌溉',order:3 ,navname:'预警信息', keepAlive: false}
         },
         {
           path:'eleHistory',
           name: 'eleHistory',
           component: EleHistory,
-          meta: { title: '智能灌溉',order:3 ,navname:'水肥数据',}
+          meta: { title: '智能灌溉',order:3 ,navname:'水肥数据', keepAlive: false}
         },
         {
           path: 'userManage',
           name: 'userManage',
           component: UserManage,
-          meta: { title: '系统管理',order:7, navname: '用户管理',}
+          meta: { title: '系统管理',order:7, navname: '用户管理', keepAlive: false}
         },
         {
           path: 'allotEquip',
           name: 'allotEquip',
           component: AllotEquip,
-          meta: { title: '系统管理',order:7,navname: '设备分配', }
+          meta: { title: '系统管理',order:7,navname: '设备分配', keepAlive: false }
         },
         {
           path: 'roleManage',
           name: 'roleManage',
           component: RoleManage,
-          meta: { title: '系统管理',order:7,navname: '角色管理', }
+          meta: { title: '系统管理',order:7,navname: '角色管理', keepAlive: false }
         },
         {
           path: 'topicManage',
           name: 'topicManage',
           component: TopicManage,
-          meta: { title: '系统管理',order:7,navname: '主题定制', }
+          meta: { title: '系统管理',order:7,navname: '主题定制', keepAlive: false }
         },
         {
           path: 'equipManage',
           name: 'equipManage',
           component: EquipManage,
-          meta: { title: '系统管理',order:7,navname: '设备管理', }
+          meta: { title: '系统管理',order:7,navname: '设备管理', keepAlive: false }
         },
         {
           path: 'bzyPhoto',
           name: 'bzyPhoto',
           component: BzyPhoto,
-          meta: { title: '农林植保',order:0,navname: '孢子仪图片', }
+          meta: { title: '农林植保',order:0,navname: '孢子仪图片', keepAlive: false}
         },
         {
           path: 'cbdPhoto',
           name: 'cbdPhoto',
           component: CbdPhoto,
-          meta: { title: '农林植保',order:0,navname: '测报灯图片', }
+          meta: { title: '农林植保',order:0,navname: '测报灯图片', keepAlive: false }
         },
         {
           path: 'cbdPestStats',
           name: 'CbdPestStats',
           component: CbdPestStats,
-          meta: { title: '农林植保',order:0,navname: '害虫统计', }
+          meta: { title: '农林植保',order:0,navname: '害虫统计', keepAlive: false}
         },
         {
           path: 'monitor',
           name: 'Monitor',
           component: Monitor,
-          meta: { title: '可视农业',order:1,navname: '可视化', }
+          meta: { title: '可视农业',order:1,navname: '可视化', keepAlive: false }
         },
         {
           path: 'photoView',
           name: 'PhotoView',
           component: PhotoView,
-          meta: { title: '可视农业',order:0,navname: '可视化详情', }
+          meta: { title: '可视农业',order:0,navname: '可视化详情', keepAlive: false }
         },
         {
           path: 'page9',
           name: 'page9',
           component: Page9,
-          meta: { title: '水价管理',order:4,navname: '水价示范点', }
+          meta: { title: '水价管理',order:4,navname: '水价示范点', keepAlive: false}
         },
         {
           path: 'page10',
           name: 'page10',
           component: Page10,
-          meta: { title: '水价管理',order:4,navname: '消费记录', }
+          meta: { title: '水价管理',order:4,navname: '消费记录', keepAlive: false }
         },
         {
           path: 'page11',
           name: 'page11',
           component: Page11,
-          meta: { title: '水价管理',order:4,navname: '充值记录', }
+          meta: { title: '水价管理',order:4,navname: '充值记录', keepAlive: false }
         },
         {
           path: 'personMsg',
           name:'PersonMsg',
           component: PersonMsg,
-          meta: { title: '',order:0,navname: '个人中心', }
+          meta: { title: '',order:0,navname: '个人中心', keepAlive: false}
         },
         {
           path: 'disasterWarnBase',
           name: 'disasterWarnBase',
           component: DisasterWarnBase,
-          meta: { title: '灾害预警',order:2,navname: '预警监测', }
+          meta: { title: '灾害预警',order:2,navname: '预警监测', keepAlive: false }
         },
         {
           path: 'disasterWarn',
           name: 'disasterWarn',
           component: DisasterWarn,
-          meta: { title: '灾害预警',order:2,navname: '预警示范点', }
+          meta: { title: '灾害预警',order:2,navname: '预警示范点', keepAlive: false }
         },
         {
           path: 'warnPhoto',
           name: 'warnPhoto',
           component: WarnPhoto,
-          meta: { title: '灾害预警',order:2,navname: '预警图片', }
+          meta: { title: '灾害预警',order:2,navname: '预警图片', keepAlive: false }
         },
         {
           path:'disasterWarnList',
           name: 'disasterWarnList',
           component: DisasterWarnList,
-          meta: { title: '灾害预警',order:2,navname: '预警记录', }
+          meta: { title: '灾害预警',order:2,navname: '预警记录', keepAlive: false }
         },
         {
           path:'disasterWarnSet',
           name: 'disasterWarnSet',
           component: DisasterWarnSet,
-          meta: { title: '灾害预警',order:2,navname: '预警设置', }
+          meta: { title: '灾害预警',order:2,navname: '预警设置', keepAlive: false}
         }
       ]
     },

src/util/server.js

@@ -1,6 +1,6 @@
 //1.定义所有环境服务器地址
 const server = {
-  pro: "http://8.136.98.49:8002", //生产环境
+  pro: "http://8.136.98.49:8005", //生产环境
   dev: "http://182.92.193.64:8002", //测试环境
   util: "http://192.168.1.14:8002/" //其他环境，可以为空，为空则适配到测试环境
 }