地图更改完成

pages/demo/lid/components/sideEast.vue

@@ -7,7 +7,7 @@
       </div>
     </Card>
     <div class="mt30 treeDiv">
-      <Tree :data="data1"></Tree>
+      <Tree :data="data1" @on-select-change="gopage()"></Tree>
     </div>
   </div>
 </template>
@@ -71,7 +71,17 @@ export default {
       ],
     };
   },
-  methods: {},
+  methods: {
+    gopage(){
+      this.$router.push({
+        path:"/demo/lid/3",
+        params:{
+          count:1,
+          num:0
+        }
+      })
+    }
+  },
   mounted() {},
 };
 </script>

pages/demo/lid/components/sideWest.vue

  <template>
-  <div>
-    <div class="gradient" >
+  <div class="ads">
+    <div class="gradient" @click="gopage(1)">
       <p>井盖总数</p>
-    <p><span class="f20 fwBold">1234</span>个</p>
+      <p>
+        <span class="f20 fwBold">1234</span>个
+      </p>
     </div>
-    <div class="mt30 gradient1" >
+    <div class="mt30 gradient1" @click="gopage(2)">
       <p>正常数量</p>
-    <p><span class="f20 fwBold">1204</span>个</p>
+      <p>
+        <span class="f20 fwBold">1204</span>个
+      </p>
     </div>
-    <div class="mt30 gradient2" >
+    <div class="mt30 gradient2" @click="gopage(3)">
       <p>报警数量</p>
-    <p><span class="f20 fwBold">30</span>个</p>
+      <p>
+        <span class="f20 fwBold">30</span>个
+      </p>
     </div>
     <div class="mt30 demoDiv">
       <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
@@ -25,8 +31,8 @@
         <div class="mt20 divInfo">
           <p>地址：山西省西安市未央区</p>
           <p>设备名称：凤城五路11号井盖</p>
-            <p>报警时间：2020-06-06  08:08:08</p>
-            <p class="red">报警数值：甲烷浓度-55%</p>
+          <p>报警时间：2020-06-06 08:18:28</p>
+          <p class="red">报警数值：井盖移位</p>
         </div>
       </Card>
     </div>
@@ -38,12 +44,26 @@ export default {
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    gopage(n) {
+      this.$router.push({
+        path: "/demo/lid/3",
+        params: {
+          count: 10,
+          num: n,
+        },
+      });
+    },
+  },
   mounted() {},
 };
 </script>
-<style scoped>
-.gradient {
+<style lang="less">
+.ads {
+  >div{
+    cursor: pointer;
+  }
+  .gradient {
     background: url(/imgshow/bg1.png) right top no-repeat,
       -moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
     background: -webkit-gradient(
@@ -64,63 +84,64 @@ export default {
     height: 100px;
     width: 300px;
     text-align: left;
-  padding:20px ;
-}
-.gradient1 {
+    padding: 20px;
+  }
+  .gradient1 {
     background: url(/imgshow/bg3.png) right top no-repeat,
-    -moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
+      -moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
     background: -webkit-gradient(
       linear,
       left top,
       left bottom,
-    color-stop(0%, #05E99C),
-    color-stop(100%, #7CF538)
+      color-stop(0%, #05e99c),
+      color-stop(100%, #7cf538)
     );
-  background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
-  background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
-  background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
+    background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
+    background: -o-linear-gradient(top, #05e99c 0%, #7cf538 100%);
+    background: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
     background: url(/imgshow/bg3.png) right top no-repeat,
-    linear-gradient(to right, #05E99C 0%, #7CF538 100%);
+      linear-gradient(to right, #05e99c 0%, #7cf538 100%);
     border-radius: 5px;
     box-shadow: 0 0 10px #000;
     color: white;
     height: 100px;
     width: 300px;
     text-align: left;
-  padding:20px ;
-}
-.gradient2 {
+    padding: 20px;
+  }
+  .gradient2 {
     background: url(/imgshow/bg5.png) right top no-repeat,
-    -moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
+      -moz-linear-gradient(left, #f95577 0%, #fca534 100%);
     background: -webkit-gradient(
       linear,
       left top,
       left bottom,
-    color-stop(0%, #F95577),
-    color-stop(100%, #FCA534)
+      color-stop(0%, #f95577),
+      color-stop(100%, #fca534)
     );
-  background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
-  background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
-  background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
+    background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
+    background: -o-linear-gradient(top, #f95577 0%, #fca534 100%);
+    background: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
     background: url(/imgshow/bg5.png) right top no-repeat,
-    linear-gradient(to right, #F95577 0%, #FCA534 100%);
+      linear-gradient(to right, #f95577 0%, #fca534 100%);
     border-radius: 5px;
     box-shadow: 0 0 10px #000;
     color: white;
     height: 100px;
     width: 300px;
     text-align: left;
-  padding:20px ;
-}
-.divInfo {
+    padding: 20px;
+  }
+  .divInfo {
     background: #fff;
     padding: 0 20px;
-}
-.divInfo p {
+  }
+  .divInfo p {
     text-align: left;
     line-height: 26px;
-}
-.demoDiv .ivu-card-head {
+  }
+  .demoDiv .ivu-card-head {
     background: #dedde4;
+  }
 }
 </style>
\ No newline at end of file

pages/demo/lid/formRow.vue

@@ -76,6 +76,6 @@ export default {
   },
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 
 </style>