2020-10-13

discern/config/index.js

@@ -20,12 +20,8 @@ module.exports = {
         }
       },
        '/bigservers': {
-        // target: 'http://47.104.218.216:8000',  //目标接口域名
-        // target: 'http://127.0.0.1:8000',  //目标接口域名
-        // target: 'http://192.168.1.11:8000',  //目标接口域名
         target: 'http://120.27.222.26:5555',  //目标接口域名
-        // target: 'http://39.104.94.153:9999',  //目标接口域名,
-        // target: 'http://192.168.1.8:8000',  //目标接口域名,
+        // target: 'http://192.168.1.8:8002',  //曹世祥本地
         changeOrigin: true,  //是否跨域
         pathRewrite: {
           '^/bigservers': ''   //重写接口

discern/index.html

@@ -13,6 +13,13 @@
   <script src="https://unpkg.com/vue-baidu-map"></script>
   <!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=fdc489725992ba738397be65dc657d9e"></script> -->
   <script src="./static/clipper.js"></script>
+
+  <script src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"></script>
+  <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.51/dist/mapvgl.min.js"></script>
+  <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
+  <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
+  <script src="http://api.map.baidu.com/library.InfoBox/1.2/src/InfoBox_min.js"></script>
+
   <script>
     ; /(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
       ((head = document.getElementsByTagName('head')),

discern/package-lock.json

@@ -1046,6 +1046,14 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-external-helpers": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
+      "integrity": "sha1-IoX0iwK9Xe3oUXXK+MYuhq3M76E=",
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
@@ -7174,6 +7182,19 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mapv": {
+      "version": "2.0.57",
+      "resolved": "https://registry.npmjs.org/mapv/-/mapv-2.0.57.tgz",
+      "integrity": "sha512-UMChb7cl6sR3VHG3Tx2uKzrRzYEdPua3165V1HND4HvhJw0xEgakFlGfLFMzZEbWTfTKcb9KoeNP9hiULsJ0ZA==",
+      "requires": {
+        "babel-plugin-external-helpers": "^6.22.0"
+      }
+    },
+    "mapvgl": {
+      "version": "1.0.0-beta.76",
+      "resolved": "https://registry.npmjs.org/mapvgl/-/mapvgl-1.0.0-beta.76.tgz",
+      "integrity": "sha512-GuRO17DogV1Av+rhVJSHQQjKMfL/abBwSn+cQdCZpLzeuL0QqOLXp9oQy5KvHF6p6yibjXDBlM4Nwv1HEDFf1A=="
+    },
     "markdown-it": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",

discern/package.json

@@ -17,6 +17,8 @@
     "element-ui": "^2.10.0",
     "file-saver": "^2.0.2",
     "lib-flexible": "^0.3.2",
+    "mapv": "^2.0.57",
+    "mapvgl": "^1.0.0-beta.76",
     "mescroll.js": "^1.4.1",
     "mint-ui": "^2.2.13",
     "px2rem-loader": "^0.1.9",

discern/src/App.vue

@@ -45,6 +45,7 @@ import help from "./components/help/help";
 import tourist from "./components/tourist/tourist";
 import helpTxt from "./components/helpTxt/helpTxt";
 import helpWangzhi from "./components/helpWangzhi/helpWangzhi";
+import popUp from "./components/popUp/popUp";
 
 export default {
   name: "app",
@@ -104,7 +105,8 @@ export default {
     help,
     tourist,
     helpTxt,
-    helpWangzhi
+    helpWangzhi,
+    popUp
   }
 };
 </script>

discern/src/assets/scss/addData_details.scss

@@ -1,205 +1,173 @@
-[v-cloak] {
-	display:none !important;
-}
-
-
+// 盒子
 .addData_details_box {
-  background: #fff;
+  // border: 1px solid #000;
+  background: #f7f8fc;
 }
 
 // 头部
-.addData_details_box .addData_details_head {
-  display: flex;
-  justify-content: space-between;
+.record_headrBox {
+  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
 }
 
-// 返回图标
-.addData_details_box .addData_details_head_returnA {
-  position: absolute;
-  left: .2rem;
-  top: .35rem;
-  z-index: 12;
-}
-
-.addData_details_head_returnA_img {
-  width: .78rem;
-  height: .78rem;
-  margin: .1rem 0 0 0;
-}
-
-//轮播
-.addData_details_box .el-carousel--horizontal {
-  height: 9rem;
-  margin-top: 0;
+.record_divBox {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+  margin: 0 0 0 4.5rem;
 }
 
-.addData_details_box .el-carousel__arrow--left {
-  top: 4.5rem;
+.record_headrBox-tlt {
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  padding: 8px 0 8px 0;
 }
 
-.addData_details_box .el-carousel__arrow--right {
-  top: 4.5rem;
+.record_headrBox-img { 
+  width: .5rem;
+  height: .5rem;
+  vertical-align: middle;
+  margin-top: .3rem;
 }
 
-.addData_details_box .el-carousel__arrow {
-  width: 50px;
-  height: 50px;
+// 主内容
+.addData_details_box_main {
 }
-
-.addData_details_box [class*=" el-icon-"],
-[class^=el-icon-] {
-  font-size: 20px;
+.addData_details_box_imgBox {
+  background: #fff;
 }
-
-.addData_details_box .block {
+// 图片
+.addData_details_box_imgBox {
   width: 100%;
 }
-
-.lunboImg {
+.addData_details_box_imgBox-img {
+  padding: .25rem 0 0 0;
   width: 100%;
-  height: 100%;
 }
-
-.addData_details_box .el-carousel__item h3 {
-  color: #475669;
-  font-size: 14px;
-  opacity: 0.75;
-  line-height: 150px;
-  margin: 0;
+.addData_details_box_divBox {
+  background: #fff;
+  display: flex;
+  padding: .25rem 0 .5rem 0;
+  justify-content: space-between;
 }
-
-.addData_details_box .el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
-  height: 9rem;
+.addData_details_box_divBox_div1 {
+  margin: -.5rem 0 0 32%;
 }
-
-.addData_details_box .el-carousel__item:nth-child(2n+1) {
-  background-color: #d3dce6;
-  height: 9rem;
-}
-
-
-// 主内容
-.addData_details_main {
-  position: absolute;
-  top: 8.5rem;
-  left: 0;
-  width: 100%;
-  border-radius: 25px 25px 0 0;
-  background-color: #fefefe;
-  z-index: 5;
+.addData_details_box_divBox_div1_img {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50px;
+  border: 2px solid #fff;
+  margin: -7% 0 0 26%;
 }
-
-.el-carousel__indicators--horizontal {
-  bottom: 11%;
+.addData_details_box_divBox_div1_name2_img {
+  width: .5rem;
+  height: .5rem;
 }
-
-// 标题和描述
-.addData_details_TAGBox {
-  width: 95%;
-  text-align: left;
-  padding: .5rem 0 0 .3rem;
+.addData_details_box_divBox_div1_name2Box {
+  display: flex;
   margin: 0 auto;
 }
-
-.addData_details_TAG {
-  border: 1px solid rgb(63, 130, 255);
-  text-align: center;
-  padding: 0 .25rem 0 .25rem;
-  border-radius: 2px;
-  color: rgb(63, 130, 255);
+.addData_details_box_divBox_div1_name2_txt {
+  font-size: 13px;
+  line-height: .65rem;
+  color: #aeaeae;
 }
-
-.addData_details_TAGText {
-  font-size: 17px;
+.addData_details_box_divBox_div1_name1 {
+  font-size: 16px;
+  font-weight: 550;
 }
-
-// 用户信息和时间
-.addData_details_NameBox_image {
-  width: .8rem;
-  height: .8rem;
-  border-radius: 55px;
+.addData_details_box_divBox_div1_name2 {
+  font-size: 13px;
+  line-height: .65rem;
+}
+
+// .addData_details_box_divBox_div2 {
+//   display: flex;
+//   margin: 0 .25rem 0 0;
+// }
+// .addData_details_box_divBox_div2_name1 {
+//   font-size: 13px;
+//   padding: .05rem .45rem .05rem .45rem;
+//   background: #0ed6a7;
+//   color: #fff;
+//   border-radius: 10px;
+//   margin: 0 .25rem 0 0;
+// }
+// .addData_details_box_divBox_div2_name2 {
+//   font-size: 13px;
+//   padding: .05rem .45rem .05rem .45rem;
+//   background: #0ed6a7;
+//   color: #fff;
+//   border-radius: 10px;
+// }
+// 简介
+.addData_details_box_divBox1 {
+  background: #fff;
+  margin: .25rem 0 0 0;
+  padding: .25rem 0 .25rem 0;
 }
-
-.addData_details_NameBox_text {
-  line-height: .8rem;
-  text-align: left;
-  margin: .05rem 0 0 .2rem;
-  color: rgba($color: #fcf9f9, $alpha: .8);
-  font-size: 18px;
+.addData_details_box_divBox1-box {
+  width: 95%;
+  margin: 0 auto;
 }
-
-.addData_details_NameBox {
-  width: 65%;
-  margin: .35rem 0 0 .5rem;
-  justify-content: space-between;
+.addData_details_box_divBox1-box-tlt {
+  text-align: left;
+  color: rgb(94, 90, 90);
 }
-
-.addData_details_NameBox_time {
-  line-height: .9rem;
+.addData_details_box_divBox1-box-mainTxt {
   font-size: 13px;
-  color: rgb(124, 120, 120);
+  color: #aeaeae;
   text-align: left;
+  line-height: .5rem;
+  // text-indent: 2em;
 }
 
-//地址
-.addData_details_address {
-  display: flex;
-  width: 90%;
-  margin: .35rem auto;
+// 评论
+.addData_details_commentDiv {
+  background: #fff;
 }
-
-.addData_details_address_addr {
-  color: rgb(95, 93, 93);
-  margin: 0 0 0 .35rem;
-  font-size: 15px;
+.addData_details_commentUl {
+  margin: .15rem auto;
+  width: 95%;
+  padding: .5rem 0 .5rem 0;
 }
-
-.addData_details_address_img {
-  width: .5rem;
-  height: .5rem;
+.addData_details_commentList {
+  border-bottom: 1px solid #efefef;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: .25rem 0 0 0;
+  padding: 0 0 .5rem 0;
 }
-
-//线
-.main_basisData_wire {
-  margin: .5rem 0 0 0;
-  border: 2px solid #faf8f8;
+.addData_details_commentList-div1 {
+  // border: 1px solid #0cd3aa;
+  display: flex;
 }
-
-
-//留言列表
-.main_leave {
-  padding: .5rem 0 0 0;
-  margin: 0 0 1rem 0;
+.addData_details_commentList_img1 {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50px;
 }
-
-//标题
-.main_leave_title_box {
-  display: flex;
+.addData_details_commentList_div2 {
+  // border: 1px solid #000;
+  margin: 0 0 0 .15rem;
 }
-
-//用户回答
-.main_leave_title {
-  font-size: 20px;
-  font-weight: 600;
+.addData_details_commentList_div2_name {
+  font-size: 15px;
   text-align: left;
-  padding: 0 0 0 .5rem;
-  width: 100%;
-  border-bottom: 1px solid #e0e0e0;
 }
-
-
-//留言
-.reply {
-//   border: 1px solid #e0e0e0;
-margin: .5rem 0 0 0;
+.addData_details_commentList_div2_txt {
+  font-size: 13px;
+  text-align: left;
+  color: #929292;
+  margin: .15rem 0 0 0;
+  width: 75%;
 }
-
-.addData_details_li {
-  width: 95%;
-  margin: 0 auto;
-  font-size: 15px;
+.addData_details_commentList_div2_time {
+  font-size: 10px;
   text-align: left;
-  text-indent:2em;
-  word-wrap: break-word;
+  color: #929292;
+  margin: .15rem .15rem 0 0;
+  width: 20%;
 }

discern/src/assets/scss/field_details.scss

@@ -1,403 +1,189 @@
+// 盒子
 .field_details_box {
-  background: #fff;
+  // border: 1px solid #000;
+  // background: #f7f8fc;
 }
 
 // 头部
-.field_details_box .field_details_head {
-  display: flex;
-  justify-content: space-between;
-}
-
-// 返回图标
-.field_details_box .field_details_head_returnA {
-  position: absolute;
-  left: .2rem;
-  top: .35rem;
-  z-index: 12;
-}
-
-.field_details_head_returnA_img {
-  width: .78rem;
-  height: .78rem;
-  margin: .1rem 0 0 0;
-}
-
-//轮播
-.field_details_box .el-carousel--horizontal {
-  height: 9rem;
-}
-
-.field_details_box .el-carousel__arrow--left {
-  top: 4.5rem;
-}
-
-.field_details_box .el-carousel__arrow--right {
-  top: 4.5rem;
-}
-
-.field_details_box .el-carousel__arrow {
-  width: 50px;
-  height: 50px;
-}
-
-.field_details_box [class*=" el-icon-"],
-[class^=el-icon-] {
-  font-size: 20px;
+.field_details_headrBox {
+  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
 }
 
-.field_details_box .block {
-  width: 100%;
-}
-
-.lunboImg {
-  width: 100%;
-  height: 100%;
+.field_details_divBox {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+  margin: 0 0 0 4.5rem;
 }
 
-.field_details_box .el-carousel__item h3 {
-  color: #475669;
-  font-size: 14px;
-  opacity: 0.75;
-  line-height: 150px;
-  margin: 0;
+.field_details_headrBox-tlt {
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  padding: 8px 0 8px 0;
 }
 
-.field_details_box .el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
-  height: 9rem;
+// 交流页面
+.field_details_box_main-ulA {
+  // border: 1px solid #000;
 }
 
-.field_details_box .el-carousel__item:nth-child(2n+1) {
-  background-color: #d3dce6;
-  height: 9rem;
+.field_details_box_main-listA {
+  // border: 1px solid #1ec8a1;
+  background: #fff;
+  padding-top: .25rem;
 }
 
-
-// 主内容
-.field_details_main {
-    position: absolute;
-    top: 8.5rem;
-    left: 0;
-    width: 100%;
-    border-radius: 25px 25px 0 0;
-    background-color: #fefefe;
-    z-index: 5;
-}
-.el-carousel__indicators--horizontal {
-    bottom: 11%;
-}
-// 标题和描述
-.field_details_TAGBox {
+// 用户信息
+.field_details_box_main-listA-userBox {
+  // border: 1px solid #000;
+  display: flex;
   width: 95%;
-  text-align: left;
-  padding: .5rem 0 0 .3rem;
   margin: 0 auto;
 }
 
-.field_details_TAG {
-  border: 1px solid rgb(63, 130, 255);
-  text-align: center;
-  padding: 0 .25rem 0 .25rem;
-  border-radius: 2px;
-  color: rgb(63, 130, 255);
-}
-
-.field_details_TAGText {
-  font-size: 17px;
-  word-wrap:break-word;
+.field_details_box_main-listA-userBox-img {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 25px;
 }
 
-// 用户信息和时间
-.field_details_NameBox_image {
-  width: .8rem;
-  height: .8rem;
-  border-radius: 55px;
+.field_details_box_main-listA-userBox-txt {
+  margin: 0 0 0 12px;
 }
 
-.field_details_NameBox_text {
-  line-height: .8rem;
+.field_details_box_main-listA-userBox-name {
+  font-size: 15px;
   text-align: left;
-  margin: .05rem 0 0 .2rem;
-  color: rgba($color: #696969, $alpha: .8);
-  font-size: 18px;
-}
-
-.field_details_NameBox {
-  width: 65%;
-  margin: .35rem 0 0 .5rem;
-  justify-content: space-between;
+  line-height: 30px;
 }
 
-.field_details_NameBox_boxA {
-  position: absolute;
-  left: 1.2rem;
-  top: .45rem;
-  z-index: 3;
-}
-.field_details_NameBox_box {
-    display: flex;
-}
-
-
-.field_details_NameBox_time {
-  line-height: .9rem;
-  font-size: 13px;
-  color: rgb(124, 120, 120);
+.field_details_box_main-listA-userBox-time {
+  color: #acacac;
+  font-size: 12px;
   text-align: left;
+  line-height: 10px;
 }
 
-//地址
-.field_details_address {
-  display: flex;
-  width: 90%;
-  margin: .35rem auto;
-}
-
-.field_details_address_addr {
-  color: rgb(95, 93, 93);
-  margin: .05rem 0 0 .35rem;
-}
-
-.field_details_address_img {
-  width: .5rem;
-  height: .5rem;
-}
-
-//线
-.main_basisData_wire {
-  margin: .5rem 0 0 0;
-  border: 2px solid #faf8f8;
+// 交流内容-文字
+.field_details_box_main-listA-writing {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: 10px auto;
+  text-align: left;
+  text-indent: 2em;
 }
 
-
-//留言列表
-.main_leave {
-  padding: .5rem 0 0 0;
-  margin: 0 0 1rem 0;
+// 交流图片
+.field_details_box_main-listA-image {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: 0 auto;
 }
 
-//标题
-.main_leave_title_box {
+.field_details_box_main-listA-image-ul {
   // border: 1px solid #000;
   display: flex;
+  flex-wrap: wrap;
 }
 
-//用户回答
-.main_leave_title {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0 0 0 .5rem;
-}
-
-
-//留言
-.reply {
+.field_details_box_main-listA-image-list {
   // border: 1px solid #000;
 }
 
-.field_details_li {
-  margin: 0 0 .5rem 0;
-  padding: 0 0 .5rem 0;
-  border-bottom: 1px solid #e0e0e0;
+.field_details_box_main-listA-imageList {
+  width: 2.8rem;
+  height: 3.5rem;
+  margin: .24rem .14rem 0 .15rem;
 }
 
-//第一级用户评论
-.field_details_li_criticOne {}
-
-.criticOne_profile {
-  display: flex;
-  justify-content: space-between;
+// 交流数据的查看评论点赞
+.field_details_box_main-listA-operation {
+  // border-top: 1px solid #e8e8e8;
+  margin: 0 .25rem .25rem 0;
+  width: 45%;
+  padding-bottom: .25rem;
+  float: right;
 }
 
-//头像和名称
-.profile_box {
+.field_details_box_main-listA-operation-ul {
+  margin-top: .35rem;
   display: flex;
+  justify-content: space-between;
 }
 
-.profile_img {
-  width: 1.3rem;
-  height: 1.3rem;
-  border-radius: 55px;
-  margin: .3rem 0 0 .5rem;
-}
-
-.profile_name {
-  line-height: 4;
-  font-size: 15px;
-  font-weight: 600;
-  color: #292929;
-  margin-left: .2rem;
-}
-
-//点赞
-.give_box {
-  // border: 1px solid #000;
+.field_details_box_main-listA-operation-list {
   display: flex;
-  height: .5rem;
-  margin: .5rem .3rem 0 0;
 }
 
-.give_img {
+.field_details_box_main-listA-operation-listImg {
   width: .5rem;
   height: .5rem;
 }
 
-.give_text {
+.field_details_box_main-listA-operation-listNum {
   font-size: 15px;
-  margin: .1rem 0 0 .35rem;
-  color: #194795;
-  height: .5rem;
-}
-
-//回复的文字
-.field_details_li_criticOne_text {
-  // border: 1px solid #000;
-  font-size: 16px;
-  width: 80%;
-  margin: 0 0 0 2rem;
+  line-height: .55rem;
   text-align: left;
-  color: rgb(105, 103, 103);
-  font-weight: 550;
+  margin: 0 0 0 .15rem;
+  color: #989898;
 }
 
-//时间和回复按钮
-.reply_time {
+// 评论
+.field_details_commentUl {
   // border: 1px solid #000;
+  margin: 1rem auto;
+  width: 95%;
+}
+.field_details_commentList {
+  // border: 1px solid red;
   display: flex;
   justify-content: space-between;
-  width: 80%;
-  margin: .3rem 0 0 2rem;
-}
-
-.time_text {
-  color: rgb(128, 127, 127);
-}
-
-.reply_btn {
-  color: #194795;
-  font-size: 13px;
-  margin: 0 .45rem 0 0;
-}
-
-
-
-//第二级用户评论
-.field_details_ulTwo {
-  width: 80%;
-  margin: .5rem 0 0 1.5rem;
-}
-
-.field_details_liTwo {
-  border: 1px solid #fafcfb;
-  background: #fafcfb;
-  border-radius: 5px;
+  width: 100%;
+  margin: .25rem 0 0 0;
 }
-
-//头像和名称
-.criticTwo_profile {
+.field_details_commentList-div1 {
+  // border: 1px solid #0cd3aa;
   display: flex;
 }
-
-.profileTwo_img {
-  width: .9rem;
-  height: .9rem;
-  border-radius: 55px;
-  margin: .3rem 0 0 .5rem;
-}
-
-.profileTwo_name {
-  line-height: 5;
-  font-size: 13px;
-  font-weight: 600;
-  color: #292929;
-  margin-left: .2rem;
-}
-
-//回复内容
-.field_details_li_criticTwo_text {
-  font-size: 13px;
-  margin: 0 0 0 1.5rem;
-  text-align: justify;
+.field_details_commentList_img1 {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50px;
 }
-
-//时间和回复功能
-.reply_timeTwo {
-  display: flex;
-  justify-content: space-between;
-  width: 80%;
-  margin: .3rem 0 0 1.5rem;
-  padding: 0 0 .2rem 0;
-  border-bottom: 1px solid #e0e0e0;
+.field_details_commentList_div2 {
+  // border: 1px solid #000;
+  margin: 0 0 0 .15rem;
 }
-
-.time_textTwo {
-  color: rgb(128, 127, 127);
+.field_details_commentList_div2_name {
+  font-size: 15px;
+  text-align: left;
 }
-
-.reply_btnTwo {
-  color: #194795;
+.field_details_commentList_div2_txt {
   font-size: 13px;
-  margin: 0 .45rem 0 0;
-}
-
-
-
-//底部input框
-.bomIpt_box {
-  border-bottom: 1px solid #dddddd;
-  border-top: 1px solid #dddddd;
-  height: 1rem;
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  background: #fff;
-  // z-index: 100000;
+  text-align: left;
+  color: #929292;
+  margin: .15rem 0 0 0;
+  width: 85%;
 }
-
-.Ipt {
-  outline: 0;
-  border-radius: 25px;
-  border: none;
-  border: 1px solid #dddddd;
-  height: .8rem;
-  width: 95%;
-  margin: .08rem 5rem 0 0;
-  padding: 0 0 0 .5rem;
-  background: #fbfbfb;
-  z-index: 10000;
+.field_details_commentList_div2_time {
+  font-size: 12px;
+  text-align: left;
+  color: #929292;
+  margin: .15rem 0 0 0;
 }
-
-//隐藏input
-.hidIpt_box {
-  width: 100%;
-  height: 1.8rem;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 2000000;
+.give_box {
+  display: flex;
 }
-
-.hidIpt_box_ipt {
-  width: 99%;
-  height: 100%;
-  outline: 0;
+.field_details_commentList_img {
+  width: .4rem;
+  height: .4rem;
+  margin: 1rem .25rem 0 0;
 }
-
-.hidIpt_box_btn {
-  position: absolute;
-  right: .5rem;
-  bottom: .25rem;
-  background: #507ae6;
-  border: none;
-  color: #fff;
-  border-radius: 5px;
-  padding: 5px 10px 5px 10px;
+.field_details_commentList_likeNum {
+  margin: 1rem .25rem 0 0;
 }
 
-
 //暂无数据
 .without_img {
   margin: 0 auto;

discern/src/assets/scss/help.scss

@@ -1,128 +1,221 @@
 .help_box {
-    // background: #fafafa;
-    background: #f5f5f5;
-  }
-  
-  // 头部
-  .help_box .help_head {
-    display: flex;
-    justify-content: space-between;
-    height: 1.5rem;
-    background: #fff;
-    // margin-bottom: .6rem; 
-  }
-  
-  // 返回图标
-  .help_box .help_head_returnA {
-    margin: .3rem 0 0 .5rem;
-  }
-  
-  .help_head_returnA_img {
-    width: .5rem;
-    height: .5rem;
-    margin: .1rem 0 0 0;
-  }
-  
-  // 标题
-  .help_box .head_title {
-    margin: 0 6.2rem 0 0;
-    padding: .2rem 0 0 0;
-  }
-  
-  .help_box .head_title_text {
-    font-size: 25px;
-    font-weight: 500;
-    margin: 0 auto;
-  }
-  
-  //线
-  .help_segment {
-    width: 100%;
-    border-bottom: 1px solid rgb(190, 187, 187);
-  }
-  
-// 主内容
-
-// 版本号
-.help_mainVersions {
-    // border: 1px solid #000;
-    // margin-top: .8rem;
-    background: #fff;
-    padding: .35rem 0 .5rem 0;
-}
-.help_mainVersions_img {
-    padding: .5rem 0 0 0;
-    width: 1.8rem;
-    height: 1.8rem;
-    margin: 0 auto;
-}
-.help_mainVersionsText {
-    font-size: 15px;
-    font-weight: 550;
-    line-height: 3;
-    color: #8d8d8d;
-}
-
-//公司介绍
-.company_box {
-    background: #fff;
-    font-size: 15px;
-    // border: 1px solid #000;
-    padding: 5% 5% 5% 0;
-    // width: 90%;
-    width: 95%;
-    margin: .5rem auto;
-    text-align: left;
-    text-indent:2em;
-    color: #2b2b2b;
-}
-
-//官网网址
-.official {
-    padding: 5% 0 5% 0;
-    background: #fff;
-    // border: 1px solid #000;
-    font-size: 13px;
-    color: lighten($color: #777272, $amount: 0);
-}
-
-//图片
-.btmImg_box {
-    // border: 1px solid #000;
-    display: flex;
-    background: #fff;
-    padding: 0 0 .4rem 0;
-}
-.btmImg {
-    width: 35%;
-}
-.btmImg_box_text {
-    text-align: left;
-    text-indent:2em;
-    font-size: 13px;
-    line-height: 2;
-    margin: 1.5rem 0 0 0;
-}
-
-// 技术支持
-.company_box-list {
-  margin-top: .5rem;
+  // background: #f7f8fc;
+}
+
+// 头部信息
+.help_box-head {
+  background: url(../../../static/timg3.jpg) no-repeat;
+  background-size: 100% 100%;
+  height: 28%;
+}
+
+.help_box-headBox {
+  padding: 1.5rem 0 0 0;
+}
+
+.help_box-headImg {
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 50px;
+  margin: 0 auto;
+  border: 2px solid #fff;
+}
+
+// / tab切换交流、鉴定、方案
+ .help_box-main {
+  // border: 1px solid #000;
+  // background: #f7f8fc;
+}
+
+.help_box-main .navlist ul {
+  border-bottom: 1px solid #e9e9e9;
   display: flex;
   justify-content: space-between;
 }
-.company_box-list-txt {
+
+.navlist .activeT {
+  border-bottom: 1px solid #1ec8a1;
+  color: #1ec8a1;
+}
+
+.navli .navliVal {
+  padding: 10px 35px 10px 35px;
+  font-size: 15px;
+}
+
+// 交流页面
+.help_box-main-ulA {
+  // border: 1px solid #000;
+}
+
+.help_box-main-listA {
+  // border: 1px solid #1ec8a1;
+  background: #fff;
+  padding-top: .25rem;
+}
+
+// 用户信息
+.help_box-main-listA-userBox {
+  // border: 1px solid #000;
+  display: flex;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.help_box-main-listA-userBox-img {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 25px;
+}
+
+.help_box-main-listA-userBox-txt {
+  margin: 0 0 0 12px;
+}
+
+.help_box-main-listA-userBox-name {
+  font-size: 15px;
+  text-align: left;
+  line-height: 30px;
+}
+
+.help_box-main-listA-userBox-time {
+  color: #acacac;
+  font-size: 12px;
   text-align: left;
-  color: #7a7a7a;
+  line-height: 10px;
+}
+
+// 交流内容-文字
+.help_box-main-listA-writing {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: 10px auto;
+  text-align: left;
+  text-indent: 2em;
+}
+
+// 交流图片
+.help_box-main-listA-image {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.help_box-main-listA-image-ul {
+  // border: 1px solid #000;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.help_box-main-listA-image-list {
+  // border: 1px solid #000;
+}
+
+.help_box-main-listA-imageList {
+  width: 2.8rem;
+  height: 3.5rem;
+  margin: .24rem .14rem 0 .15rem;
+}
+
+// 交流数据的查看评论点赞
+.help_box-main-listA-operation {
+  border-top: 1px solid #e8e8e8;
+  margin: .25rem auto;
+  width: 90%;
+  padding-bottom: .25rem;
 }
-.company_box-list-txt2Box {
+
+.help_box-main-listA-operation-ul {
+  margin-top: .35rem;
   display: flex;
   justify-content: space-between;
 }
-.company_box-list-txt2-txt {
-  color: #7a7a7a;
+
+.help_box-main-listA-operation-list {
+  display: flex;
 }
-.company_box-list-txt2-img {
+
+.help_box-main-listA-operation-listImg {
   width: .5rem;
   height: .5rem;
-  margin: .05rem 0 0 0;
+}
+
+.help_box-main-listA-operation-listNum {
+  font-size: 15px;
+  line-height: .55rem;
+  text-align: left;
+  margin: 0 0 0 .15rem;
+  color: #989898;
+}
+
+// 鉴定
+.help_box-main-authenticateUl {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: .25rem auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.help_box-main-authenticateList {
+  border: 1px solid #fff;
+  background: #fff;
+  width: 45%;
+  margin: .2rem 0 0 .2rem;
+  border-radius: 5px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.help_box-main-authenticateList-box1 {
+  // border: 1px solid #000;
+  width: 95%;
+  margin: .1rem auto;
+  border-radius: 5px;
+}
+
+.help_box-main-authenticateList-box1-img {
+  // width: 4.5rem;
+  width: 100%;
+  height: 3rem;
+  border-radius: 5px;
+}
+
+.help_box-main-authenticateList-box1-txt {
+  font-size: 13px;
+  color: #686565;
+  text-align: left;
+}
+
+.help_box-main-authenticateList-box2 {
+  border-top: 1px solid #e9e9e9;
+  display: flex;
+  justify-content: space-between;
+  width: 95%;
+  margin: .25rem auto;
+  padding: .25rem 0 0 0;
+}
+
+.help_box-main-authenticateList-box3 {
+  // border: 1px solid red;
+  display: flex;
+}
+
+.help_box-main-authenticateList-box3-img {
+  width: 1rem;
+  height: 1rem;
+  vertical-align: middle;
+  border-radius: 25px;
+}
+
+.help_box-main-authenticateList-box3-name {
+  font-size: 13PX;
+  line-height: 1.2rem;
+  text-align: left;
+  margin-left: .25rem;
+}
+
+.help_box-main-authenticateList-box4-img {
+  width: .8rem;
+  height: .8rem;
+  margin-top: .15rem;
 }

discern/src/assets/scss/mapShow.scss

@@ -1,6 +1,7 @@
-.mapShow_box  {
-    position: relative;
+.mapShow_box {
+  position: relative;
 }
+
 // 百度地图
 .mapShow_box .map {
   width: 100%;
@@ -10,24 +11,26 @@
 
 //地图加载动画
 .loading_boxA {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
 }
+
 .loading_boxA_div {
-    margin: 60% 0 0 0;
+  margin: 60% 0 0 0;
 }
+
 .loadingA_text {
-    color: #60d0a0;
-    font-size: 25px;
-    margin: .5rem auto;
+  color: #60d0a0;
+  font-size: 25px;
+  margin: .5rem auto;
 }
 
 // loading动画
 .loading_gif {
-    margin: 0 auto;
-    width: 100%;
-}
+  margin: 0 auto;
+  width: 100%;
+}

discern/src/assets/scss/person.scss

@@ -1,120 +1,107 @@
-//大盒子
+// box
 .person_box {
-    background: #ffff;
-}
-
-//用户名称、头像和编辑
-.person_head {
+    background: #f7f8fc;
+  }
+  .person_headrBox {
+    background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
+  }
+  .person_divBox {
     display: flex;
     justify-content: space-between;
-}
-
-// 用户名称、手机号、编辑
-.person_head_naphbj {
-    padding: .2rem 0 0 0;
-}
-//名称
-.person_head_name {
-    font-size: 20px;
-    font-weight: 550;
-    text-align: left;
-    margin: 0 0 0 .5rem;
-}
-//手机号
-.person_head_phone {
+    width: 50%;
+    margin: 0 0 0 4.5rem;
+  }
+  .person_headrBox-tlt {
+    text-align: center;
     font-size: 18px;
-    color: #6c6e6d;
-    text-align: left;
-    margin: .2rem 0 0 .5rem;
-}
-//跳转到编辑页面
-.person_head_editor {
-    font-size: 14px;
-    color: #6c6e6d;
-    text-align: left;
-    margin: .2rem 0 0 .55rem;
-}
-
-//用户头像
-.person_head_imageBox {
-    height: 100%;
-    border-radius: 55px;
-    margin: .65rem .5rem 0 0;
-}
-.person_head_imageBox_img {
+    color: #fff;
+    padding: 8px 0 8px 0;
+  }
+  
+  // 内容
+  .person_box-main {
+    background: #f7f8fc;
+  }
+  
+  // 信息列表
+  .person_box-ul {
+  }
+  // 个人信息
+  .person_box-list {
+    display: flex;
+    justify-content: space-between;
+    background: #fff;
+    margin: 0.25rem 0 0 0;
+  }
+  .person_box-list-box1 {
+    display: flex;
+    margin-left: 0.5rem;
+    margin: 0.35rem 0 0.25rem 0.5rem;
+  }
+  .person_box-list-box1-img {
     width: 1.5rem;
     height: 1.5rem;
-    border-radius: 55px;
-}
-
-//采集病虫害-手动录入新建
-.gatherInsect_box {
-    border-radius: 10px;
-    height: 1.5rem;
-    background: #45f6cc;
-    margin: .5rem auto;
-    width: 90%;
-    display: flex;
-    justify-content: space-around;
-}
-//虫图标
-.gatherInsect_box_insect {
-    width: .7rem;
-    height: .7rem;
-    margin: .35rem 0 0 0;
-}
-//标题
-.gatherInsect_box_title {
-    font-size: 20px;
+    border-radius: 25px;
+  }
+  .person_box-list-box1-div {
+    margin: 0 0 0 0.15rem;
+  }
+  .person_box-list-box1-divName {
+    font-size: 16px;
     font-weight: 550;
-    margin: .4rem 0 0 0;
+  }
+  .person_box-list-box1Num {
+    font-size: 12px;
+    color: #9f9f9f;
+    margin: 0.15rem 0 0 0;
+  }
+  .person_box-list-box2 {
+    background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
     color: #fff;
-}
-//火图标
-.gatherInsect_box_hot {
-    width: .95rem;
-    height: .95rem;
-    margin: .25rem 0 0 0;
-}
-
-
-//内容列表
-.person_box_ul {
-    border-top: 10px solid #efefef;
+    font-size: 15px;
+    text-align: center;
+    line-height: 1rem;
+    border-radius: 15px;
+    padding: 0 0.35rem 0 0.35rem;
+    margin: 0.5rem 0.5rem 0.35rem 0;
+    height: 1rem;
+  }
+  // 我的主页
+  .person_box-liHome {
     background: #fff;
-}
-.person_box_list {
-    width: 90%;
-    margin: 0 auto;
-    // border-top: 1px solid #efefef;
-    border-bottom: 1px solid #efefef;
+    margin: 0.25rem 0 0.25rem 0;
     display: flex;
     justify-content: space-between;
-}
-.person_box_list_text {
-    font-size: 18px;
-    text-align: left;
-    margin: 0 0 0 .5rem;
-    padding:  .6rem 0 .6rem 0;
-}
-.person_box_list_image {
-    width: .8rem;
-    height: .8rem;
-    margin: .5rem .5rem 0 0;
-}
-
-//版本更新提示框
-.el-message-box {
-    width: 80%;
-    margin: -80% 0 0 0;
-}
-
-//版本更新提示标识
-.person_box_list_imageA {
-    width: .45rem;
-    height: .45rem;
-    position: absolute;
-    // top: 11rem;
-    top: 9.2rem;
-    right: 1.8rem;
-}
+    padding: 0.35rem 0 0.35rem 0;
+  }
+  .person_box-liHome-box {
+    display: flex;
+    margin: 0 0 0 0.15rem;
+  }
+  .person_box-liHome-box-img {
+    width: 0.55rem;
+    height: 0.55rem;
+    vertical-align: middle;
+  }
+  .person_box-liHome-box-name {
+    color: #595959;
+    font-weight: 550;
+    font-size: 15px;
+    margin: 0 0 0 0.15rem;
+  }
+  .person_box-liHome-imgRight {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin: 0 0.15rem 0 0;
+  }
+  
+  // 积分
+  .person_box-liIntegral {
+    background: #fff;
+  }
+  .person_box-liHome-list {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.35rem 0 0.15rem 0;
+    border-bottom: 1px solid #e3e3e3;
+  }

discern/src/assets/scss/record.scss

@@ -1,164 +1,108 @@
-// 
+// 盒子
 .record_box {
-  background: #fafafa;
+  // border: 1px solid #000;
+  background: #f7f8fc;
 }
 
-// 页面头部样式开始
-.record_box .record_box_head {
-  display: flex;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-  background: #fafafa;
-}
-
-// 返回图标
-.record_box .head_div {
-  margin: .23rem -.8rem 0 .2rem;
+// 头部
+.record_headrBox {
+  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
 }
 
-.record_box .head_div_img {
-  width: .6rem;
-  height: .6rem;
-}
-
-// 标题
-.record_box .head_title {
-  margin: .15rem auto;
-}
-
-.record_box .head_title_text {
-  font-size: 25px;
-  font-weight: 500;
-  margin-left: .8rem;
+.record_divBox {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+  margin: 0 0 0 4.5rem;
 }
 
-// 收藏
-.head_collect {
-  margin: .3rem .5rem 0 0;
+.record_headrBox-tlt {
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  padding: 8px 0 8px 0;
 }
 
-.collect_img {
+.record_headrBox-img { 
   width: .5rem;
   height: .5rem;
+  vertical-align: middle;
+  margin-top: .3rem;
 }
 
-// 页面头部样式结束
-
-// 昆虫病害名
-.record_box .record_name {
-  margin: .5rem 0 0 0;
+// 主内容
+.record_box_main {
 }
-
-.record_box .record_name_text {
-  font-size: 22px;
+.record_box_imgBox {
+  background: #fff;
 }
-
-// 后端传来的图片
-.record_box .record_axios_div {
-  margin: .5rem 0 0 0;
+// 图片
+.record_box_imgBox {
   width: 100%;
-  height: 6.6rem;
 }
-
-.record_box .record_axios_img {
-  width: 100%;
-  height: 6.6rem;
+.record_box_imgBox-img {
+  width: 95%;
+  border-radius: 5px;
+  margin: 0 auto;
+  padding: .25rem 0 0 0;
 }
-
-// 没有图片
-.record_box .el-image__error {
-  font-size: 25px;
+.record_box_divBox {
+  background: #fff;
+  display: flex;
+  padding: .25rem 0 .5rem 0;
+  justify-content: space-between;
 }
-
-// 病虫害详情
-.record_box .details_box {
-  margin: .5rem 0 0 0;
+.record_box_divBox_div1 {
+  display: flex;
+  margin: 0 0 0 .25rem;
 }
-
-// 详情标题
-.record_box .details_tilte_box {
-  border: 1px solid #60d0a0;
-  margin: 0 0 .3rem 3.5rem;
-  width: 3rem;
-  height: .8rem;
-  background: #60d0a0;
-  border-radius: 15px;
+.record_box_divBox_div1_name1 {
+  font-size: 16px;
+  font-weight: 550;
 }
-
-.record_box .details_tilte {
-  border: 1px solid #fff;
-  height: .6rem;
-  width: 2.8rem;
-  margin: .07rem auto;
-  border-radius: 15px;
+.record_box_divBox_div1_name2 {
+  font-size: 13px;
+  line-height: .65rem;
+  color: #aeaeae;
 }
 
-.record_box .details_tilte_text {
-  color: #fff;
-  line-height: .6rem;
-  font-size: 15px;
-  font-weight: 800;
+.record_box_divBox_div2 {
+  display: flex;
+  margin: 0 .25rem 0 0;
 }
-
-// 详情
-.record_box .detail_text_box {
-  width: 90%;
-  // margin: 0 auto;
-  margin: 0 0 1rem .5rem;
+.record_box_divBox_div2_name1 {
+  font-size: 13px;
+  padding: .05rem .45rem .05rem .45rem;
+  background: #0ed6a7;
+  color: #fff;
+  border-radius: 10px;
+  margin: 0 .25rem 0 0;
 }
-
-.record_box .detail_text {
-  text-indent: 2em;
-  text-align: left;
-  font-size: 15px;
+.record_box_divBox_div2_name2 {
+  font-size: 13px;
+  padding: .05rem .45rem .05rem .45rem;
+  background: #0ed6a7;
+  color: #fff;
+  border-radius: 10px;
 }
-
-// 暂无数据
-.cry_box {
-  margin: 2.5rem 0 0 0;
+// 简介
+.record_box_divBox1 {
+  background: #fff;
+  margin: .25rem 0 0 0;
+  padding: .25rem 0 .25rem 0;
 }
-
-.cry_img {
-  width: 2rem;
-  height: 2rem;
+.record_box_divBox1-box {
+  width: 95%;
   margin: 0 auto;
 }
-
-.cry_text {
-  font-size: 20px;
-  margin: 10% 0 0 0;
-  color: #b9b9b9;
-}
-
-//地址
-.address {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  font-size: 15px;
-  margin-bottom: .2rem;
-  color: #b9b9b9;
-  text-align: right;
-}
-
-.address_img {
-  width: .5rem;
-  height: .5rem;
-}
-
-//时间
-.addressA {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  font-size: 15px;
-  margin-bottom: .2rem;
-  color: #b9b9b9;
-  text-align: right;
-}
-
-.address_imgA {
-  width: .5rem;
-  height: .5rem;
+.record_box_divBox1-box-tlt {
+  text-align: left;
+  color: rgb(94, 90, 90);
 }
+.record_box_divBox1-box-mainTxt {
+  font-size: 13px;
+  color: #aeaeae;
+  text-align: left;
+  line-height: .5rem;
+  // text-indent: 2em;
+}

discern/src/assets/scss/repository.scss

@@ -1,260 +1,94 @@
-  .repository_box {
-    background: #fafafa;
-  }
-  
-  // 头部
-  .repository_box .repository_head {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: .6rem; 
-  }
-  
-  // 返回图标
-  .repository_box .repository_head_returnA {
-    margin: .3rem 0 0 .5rem;
-  }
-  
-  .repository_head_returnA_img {
-    width: .5rem;
-    height: .5rem;
-    margin: .1rem 0 0 0;
-  }
-  // 标题
-  .repository_box .head_title {
-    margin: .2rem -.3rem 0 0;
-  }
-  .repository_box .head_title_text {
-    font-size: 25px;
-    font-weight: 500;
-    margin: 0 auto;
-  }
-
-  //搜索
-  .head_souSuo_img {
-      width: .65rem;
-      height: .65rem;
-      margin: .3rem .5rem 0 0;
-  }
-  
-  // 列表
-  .repository_list {
-    margin-top: .5rem;
-  }
-  
-  .repository_li {
-    border: 1px solid #fff;
-    height: 2.5rem;
-    width: 90%;
-    border-radius: 5px;
-    background: #fff;
-    -moz-box-shadow: 6px 2px 11px #c7c5c5;
-    -webkit-box-shadow: 6px 2px 11px #c7c5c5;
-    box-shadow: 6px 2px 11px #c7c5c5;
-    margin: .3rem auto;
-  }
-  
-  .repository_li_div {}
-  
-  .repository_li_img {
-    width: 3.5rem;
-    height: 2.55rem;
-    margin: -.026rem 0 0 0;
-    border-radius: 5px 0 0 5px;
-  }
-
-  .repository_li_name {
-    font-size: 22px;
-    font-weight: 600;
-    color: #000;
-    margin: -2rem 0 0 3.8rem;
-    text-align: left;
-  }
-  
-  .repository_li_btn_div {
-    margin: .5rem 0 0 7.5rem;
-  }
-  
-  .repository_li_btn_text {
-    color: #898989;
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 12px;
-  }
-  
-  .repository_li_btn_img {
-    width: .4rem;
-    height: .4rem;
-    display: inline-block;
-    vertical-align: middle;
-    margin: 1.5px 0 0 -5px;
-  }
-
-//   科目
-.repository_li_subject {
-    width: 3.5rem;
-    height: .5rem;
-    margin: -.5rem 0 0 3.8rem;
-    text-align: left;
-}
-.repository_li_subject_text {
-    font-size: 14px;
-    font-weight: 500;
-    color: #4e4e4e;
+.repository_box {
+  width: 100%;
 }
 
-// 按钮测试
-.transition-box {
-  position: fixed;
-  left: 3.8rem;
-  bottom: 6.5rem;
-  margin-bottom: 10px;
-  width: 200px;
-  height: 100px;
-  border-radius: 4px;
-  text-align: center;
-  color: #fff;
-  padding: 40px 20px;
-  box-sizing: border-box;
-  margin-right: 20px;
-}
-.repository_screen_btn {
-  position: fixed;
-  right: .9rem;
-  bottom: 1.5rem;
-  border-radius: 55px;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.repository_screen_btn_img {
-  width: .8rem;
-  height: .8rem;
-  margin: 0 0 0 -.15rem;
+// 头部
+.repository_box-head {
+  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
 }
-.repository_box .el-button {
-  background: #74d5aa;
-}
-.activeA {
-  border-radius: 15px;
-  background: rgb(181, 228, 93);
-}
-
-// 全部
-.repository_all {
-  width: 4.5rem;
+.repository_divBox {
   display: flex;
   justify-content: space-between;
-  margin: .6rem 0 0 0;
-}
-.repository_all_text_box {
-  border: 1px solid rgba(46, 45, 45, 0.8);
   width: 50%;
-  height: .8rem;
-  margin: .1rem 0 0 .5rem;
-  background: rgba(46, 45, 45, 0.8);
-  border-radius: 4px;
+  margin: 0 0 0 4.5rem;
 }
-.repository_all_text {
-  line-height: .85rem;
+
+.repository_headrBox-tlt {
   text-align: center;
+  font-size: 18px;
+  color: #fff;
+  padding: 8px 0 8px 0;
 }
 
-.repository_all_img_box {
-  border-radius: 55px;
-  width: 1rem;
-  height: 1rem;
-  background: #74d5aa;
+// 主内容
+.repository_box-main {
+  background: #f7f8fc;
 }
-.repository_all_img {
-  width: .8rem;
-  height: .8rem;
-  margin: .1rem auto;
-}
-
-// 病害
-.repository_plant {
-  width: 4.5rem;
+// 病虫害切换
+.repository_box-main .navlist ul {
+  border-bottom: 1px solid #e9e9e9;
   display: flex;
   justify-content: space-between;
-  margin: .6rem 0 0 0;
-
-}
-.repository_plant_text_box {
-  border: 1px solid rgba(46, 45, 45, 0.8);
-  width: 30%;
-  height: .8rem;
-  margin: .1rem 0 0 1.35rem;
-  background: rgba(46, 45, 45, 0.8);
-  border-radius: 4px;
+  background: #fff;
 }
-.repository_plant_text {
-  line-height: .85rem;
-  text-align: center;
+.repository_box-main .navlist ul li {
+ margin: 0 .5rem 0 .5rem;
 }
 
-.repository_plant_img_box {
-  border-radius: 55px;
-  width: 1rem;
-  height: 1rem;
-  background: #74d5aa;
-}
-.repository_plant_img {
-  width: .8rem;
-  height: .8rem;
-  margin: .1rem auto;
+.navlist .activeT {
+  border-bottom: 1px solid #1ec8a1;
+  color: #1ec8a1;
 }
 
-// 昆虫
-.repository_insect {
-  width: 4.5rem;
-  display: flex;
-  justify-content: space-between;
-  margin: .6rem 0 0 0;
-
-}
-.repository_insect_text_box {
-  border: 1px solid rgba(46, 45, 45, 0.8);
-  width: 30%;
-  height: .8rem;
-  margin: .1rem 0 0 1.3rem;
-  border-radius: 4px;
-  background: rgba(46, 45, 45, 0.8);
+.navli .navliVal {
+  padding: 10px 35px 10px 35px;
+  font-size: 15px;
 }
-.repository_insect_text {
-  line-height: .85rem;
-  text-align: center;
+
+// 交流页面
+.repository_box-main-ulA {
+  // border: 1px solid #000;
 }
 
-.repository_insect_img_box {
-  border-radius: 55px;
-  width: 1rem;
-  height: 1rem;
-  background: #74d5aa;
+.repository_box-main-listA {
+  background: #fff;
+  padding-top: .25rem;
 }
-.repository_insect_img {
-  width: .8rem;
-  height: .8rem;
-  margin: .1rem auto;
+.home_box-main-authenticateUlA {
+  width: 98%;
+  margin: .25rem auto;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-
-// 暂无处理
-.repository_judge {
-  margin: 45% 0 0 0;
+.home_box-main-authenticateListA {
+  border: 1px solid #fff;
+  background: #fff;
+  width: 47%;
+  margin: .2rem 0 0 .2rem;
+  border-radius: 5px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
-.repository_judge_img {
-  margin: 0 auto;
-}
-.repository_judge_text {
-  font-size: 25px;
-  color: #bfbfbf;
-  margin: .5rem 0 0 0;
-  text-align: center;
+
+.home_box-main-authenticateListA-box1 {
+  width: 100%;
+  border-radius: 5px;
 }
 
-//分页
-.repository_box .el-icon-arrow-right:before {
-  font-size: 25px;
+.home_box-main-authenticateListA-box1-img {
+  // width: 4.5rem;
+  width: 100%;
+  height: 3rem;
+  border-radius: 5px 5px 0 0;
 }
-.repository_box .el-pagination.is-background .el-pager li:not(.disabled).active {
-  font-size: 25px;
+
+.home_box-main-authenticateListA-box1-txt {
+  font-size: 12px;
+  color: #686565;
+  text-align: left;
+  padding: .05rem .15rem .05rem .15rem;
+}
+.home_box-main-authenticateListA-box1-num {
+  text-align: right;
+  color: #acacac;
 }

discern/src/assets/scss/share.scss

@@ -1,67 +1,87 @@
 .share_box {
-  // background: #d5d8d1;
-  background: #474747;
+  background: #f7f8fc;
 }
 
-// 头部
-.share_box .share_head {
+// 个人头部信息
+.share_box-head {
+  height: 28%;
+  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
+}
+.share_box-head-ul {
+  // border: 1px solid #000;
+  padding: .6rem 0 0 0;
+}
+.share_box-head-list1 {
+  // border: 1px solid #000;
+  margin: 0 0 .5rem 0;
+}
+.share_box-head-list1-img {
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 50px;
+  margin: 0 auto;
+  border: 2px solid #fff;
+}
+.share_box-head-list2 {
+  font-size: 17px;
+  color: #fff;
+  font-weight: 550;
+}
+.share_box-head-list3 {
   display: flex;
-  justify-content: space-between;
-  height: 1.5rem;
-  background: #fff;
-  // margin-bottom: .6rem; 
+  justify-content: center;
+  margin: .25rem auto;
 }
-
-// 返回图标
-.share_box .share_head_returnA {
-  margin: .3rem 0 0 .5rem;
+.share_box-head-list3-txt {
+  margin: 0 .25rem 0 .25rem;
+  color: #e3e3e3;
+  font-size: 15px;
 }
-
-.share_head_returnA_img {
-  width: .5rem;
-  height: .5rem;
-  margin: .1rem 0 0 0;
+.share_box-head-list3-txtNum {
+  color: #fff;
+  font-size: 17px;
+  margin: 0 0 0 .25rem;
 }
 
-// 标题
-.share_box .head_title {
-  margin: 0 6.2rem 0 0;
-  padding: .2rem 0 0 0;
+// 主内容
+.share_box-main {
+  background: #fff;
 }
-
-.share_box .head_title_text {
-  font-size: 25px;
-  font-weight: 500;
-  margin: 0 auto;
+// 列表
+.share_box-main-ul {
+  // border: 1px solid red;
 }
-
-//线
-.share_segment {
-  width: 100%;
-  border-bottom: 1px solid rgb(190, 187, 187);
+.share_box-main-list {
+  border-bottom: 1px solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  padding: .25rem 0 .25rem 0;
 }
-
-//二维码
-.code_box {
-  margin-top: 2rem;
+.share_box-main-list-div1 {
+  display: flex;
+  margin: 0 0 0 .5rem;
 }
-
-.code_box_img {
-  margin: 0 auto;
-  width: 65%;
+.share_box-main-list-div1-img {
+  width: .8rem;
+  height: .8rem;
+  margin: .1rem 0 0 0;
 }
-
-
-//文字
-.share_txt_box {
-  width: 100%;
-  height: 1.5rem;
-  margin: 2rem 0 0 0;
-  background: #474747;
-}
-.share_txt {
-  line-height: 1.5rem;
-  font: bold 25px Brush Script MT ;
-  color:#222;
-  text-shadow: 0px 2px 3px #666;
+.share_box-main-list-div1Box {
+  margin: 0 0 0 .25rem;
+}
+.share_box-main-list-div1Box-txt {
+  text-align: left;
+  font-size: 16px;
+  font-weight: 550;
+}
+.share_box-main-list-div1Box-time {
+  text-align: left;
+  color: #bcbcbc;
+  line-height: .55rem;
 }
+.share_box-main-list-div2 {
+  font-size: 20px;
+  color: #12d6a4;
+  text-align: right;
+  margin: .25rem .25rem 0 0;
+}

discern/src/components/addData_details/addData_details.vue

@@ -1,90 +1,111 @@
 <!--  -->
 <template>
-  <div class="addData_details_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
+  <div
+    class="addData_details_box"
+    :style="'height:' + fullHeight + 'px'"
+    v-loading="loading"
+  >
     <!-- 头部 -->
-    <div class="addData_details_head">
-      <div class="addData_details_head_returnA" @click="FanHui()">
-        <img src="../../assets/image/left.png" alt class="addData_details_head_returnA_img" />
+    <div class="record_headrBox">
+      <div class="record_divBox">
+        <div class="record_headrBox-tlt">详情</div>
+        <img
+          src="../../assets/image/new/14.png"
+          alt
+          class="record_headrBox-img"
+        />
       </div>
-
-      <!-- 轮播 -->
-      <div class="block">
-        <el-carousel trigger="click" height="6rem">
-          <el-carousel-item v-for="item in imageData" :key="item">
-            <img
-              preview="1"
-              @click="imgShow(item)"
-              v-lazy=" 'bigservers/' + item"
-              alt
-              class="lunboImg"
-            />
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <!-- 轮播 -->
     </div>
 
     <!-- 主内容 -->
-    <div class="addData_details_main">
-      <!-- 详情基础数据 -->
-      <div class="main_basisData">
-        <!-- 类型标识和描述 -->
-        <div class="addData_details_TAGBox" v-show="subjectShow">
-          <span class="addData_details_TAGText">科目： {{ this.redata.sort }}</span>
-          <div class="addData_details_NameBox_time">{{ this.redata.time }}</div>
-        </div>
+    <div class="addData_details_box_main">
+      <!-- 图片 -->
+      <div class="addData_details_box_imgBox">
+        <img
+          src="../../assets/image/timg3.jpg"
+          alt=""
+          class="addData_details_box_imgBox-img"
+        />
+      </div>
 
-        <!-- 地址 -->
-        <div class="addData_details_address">
-          <img src="../../assets/image/ding.png" alt class="addData_details_address_img" />
-          <span class="addData_details_address_addr">{{ this.redata.addr }}</span>
+      <div class="addData_details_box_divBox">
+        <div class="addData_details_box_divBox_div1">
+          <img
+            src="../../assets/image/user.jpg"
+            alt=""
+            class="addData_details_box_divBox_div1_img"
+          />
+          <div class="addData_details_box_divBox_div1_name2">
+            用户123456 上传于9月30日
+          </div>
+          <div class="addData_details_box_divBox_div1_name2Box">
+            <img
+              src="../../assets/image/ding.png"
+              alt=""
+              class="addData_details_box_divBox_div1_name2_img"
+            />
+            <div class="addData_details_box_divBox_div1_name2_txt">
+              河南郑州 距离我3km
+            </div>
+          </div>
         </div>
-        <!-- 地址 -->
-
-        <!-- 线 -->
-        <div class="main_basisData_wire"></div>
-        <!-- 线 -->
       </div>
 
-      <!-- 详情基础数据 -->
+      <!-- 评论 -->
+      <div class="addData_details_commentDiv">
+        <ul class="addData_details_commentUl">
+          <li class="addData_details_commentList">
+            <div class="addData_details_commentList-div1">
+              <img
+                src="../../assets/image/user.jpg"
+                alt=""
+                class="addData_details_commentList_img1"
+              />
+              <div class="addData_details_commentList_div2">
+                <div class="addData_details_commentList_div2_name">
+                  用户 4568
+                </div>
+                <div class="addData_details_commentList_div2_txt">
+                  真好看真好看真好看真好看真好看真好看真好看
+                </div>
+              </div>
+            </div>
 
-      <!-- 详情列表 -->
-      <div class="main_leave">
-        <!-- 标题 -->
-        <div class="main_leave_title_box">
-          <div class="main_leave_title">{{ this.redata.name }}</div>
-        </div>
+            <div class="addData_details_commentList_div2_time">10小时前</div>
+          </li>
 
-        <!-- 留言 -->
-        <div class="reply">
-          <div class="addData_details_li">{{ this.redata.problem }}</div>
-        </div>
+          <li class="addData_details_commentList">
+            <div class="addData_details_commentList-div1">
+              <img
+                src="../../assets/image/user.jpg"
+                alt=""
+                class="addData_details_commentList_img1"
+              />
+              <div class="addData_details_commentList_div2">
+                <div class="addData_details_commentList_div2_name">
+                  用户 4568
+                </div>
+                <div class="addData_details_commentList_div2_txt">
+                  真好看真好看真好看真好看真好看真好看真好看
+                </div>
+              </div>
+            </div>
+
+            <div class="addData_details_commentList_div2_time">10小时</div>
+          </li>
+        </ul>
       </div>
-      <!-- 详情列表 -->
     </div>
-    <!-- 主内容 -->
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-
 export default {
-  //import引入的组件需要注入到对象中才能使用
-  name: 'addData_details ',
+  name: "record",
   components: {},
   data() {
-    //这里存放数据
     return {
       fullHeight: document.documentElement.clientHeight,
-      redata: [], //页面基础数据
-      imageData: [], //轮播数据
-      //查看大图
-      amplificationShow: false, //查看大图
-      imgList: "",
-      subjectShow: false, //测试闪现代码问题
-      loading: true //加载
     };
   },
   //监听属性 类似于data概念
@@ -97,12 +118,12 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
   },
   //方法集合
   methods: {
@@ -116,74 +137,15 @@ export default {
         })();
       };
     },
-
-    //返回home页面
-    FanHui() {
-      this.$router.replace("/home");
-      localStorage.removeItem("manualEnteringID");
-    },
-
-    //详情数据
-    ajaxData() {
-      let _this = this;
-      let postData = _this.$qs.parse({
-        id: localStorage.getItem("manualEnteringID")
-      });
-      _this
-        .$axios({
-          method: "post",
-          url: "bigservers/see_disease",
-          data: postData
-        })
-        .then(res => {
-          _this.redata = res.data[0];
-          _this.imageData = res.data[0].img;
-          _this.subjectShow = true;
-          _this.loading = false;
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    },
-
-    //一级评论回复事件
-    reply(e, name, ids) {
-      // console.log(name);
-      this.iptShow = true; //显示input
-      this.$nextTick(() => {
-        this.$refs.Iptid.focus();
-      });
-      this.textIpt = "回复" + name + "：";
-      this.replyTAG = "one";
-      // console.log(ids);
-      localStorage.setItem("fieldDetails_replyId", ids);
-    },
-
-    //点击轮播图片进行放大
-    imgShow(img) {
-      this.amplificationShow = true;
-      this.imgList = img;
-      // console.log(img)
-    }
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.ajaxData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.get_boderHeight();
-  }
+    let _this = this;
+    _this.get_boderHeight();
+  },
 };
 </script>
-<style>
-[v-cloak] {
-  display: none !important;
-}
-</style>
 <style lang='scss'>
 @import "../../assets/scss/bus.scss";
 @import "../../assets/scss/addData_details.scss";
-//@import url(); 引入公共css类
-</style>
-
+</style>

discern/src/components/bottomNav/bottomNav.vue

@@ -2,38 +2,118 @@
   <div id="bottomNavigationFullScreen">
     <div class="bottomNavigation_content">
       <div class="bottomNavigation_li_content">
-        <div class="bottomNavigation_li_public_content" @click="publicClick('/home')">
-          <div :class="imagesUrl.homeIcon.indexOf('7') === -1 ? 'no_select' : 'select' ">首页</div>
+        <div
+          class="bottomNavigation_li_public_content"
+          @click="publicClick('/home')"
+        >
+          <img
+            v-if="imagesUrl.homeIcon.indexOf('5') === -1"
+            src="../../assets/image/new/4.png"
+            alt=""
+          />
+          <img v-else src="../../assets/image/new/5.png" alt="" />
+          <div
+            :class="
+              imagesUrl.homeIcon.indexOf('5') === -1 ? 'no_select' : 'select'
+            "
+          >
+            发现
+          </div>
         </div>
 
-        <div class="bottomNavigation_li_public_content" @click="publicClick('/mapShow')">
-          <div :class="imagesUrl.mapShowIcon.indexOf('8') === -1 ? 'no_select' : 'select' ">附近</div>
+        <div
+          class="bottomNavigation_li_public_content"
+          @click="publicClick('/mapShow')"
+        >
+          <img
+            v-if="imagesUrl.mapShowIcon.indexOf('7') === -1"
+            src="../../assets/image/new/6.png"
+            alt=""
+          />
+          <img v-else src="../../assets/image/new/7.png" alt="" />
+          <div
+            :class="
+              imagesUrl.mapShowIcon.indexOf('7') === -1 ? 'no_select' : 'select'
+            "
+          >
+            附近
+          </div>
         </div>
 
-        <div class="bottomNavigation_li_public_content" @click="publicClick('/repository')">
-          <div :class="imagesUrl.repositoryIcon.indexOf('ku2') === -1 ? 'no_select' : 'select' ">知识库</div>
+        <!-- 识别 -->
+        <div class="bottomNavigation_li_public_content" @click="discern()">
+          <img
+            src="../../assets/image/new/11.png"
+            alt=""
+            class="bottomNavigation_li_public_content-img"
+          />
+          <div class="no_select">识别</div>
         </div>
+        <!-- 识别 -->
 
-        <div class="bottomNavigation_li_public_content" @click="publicClick('/person')">
-          <div :class="imagesUrl.personIcon.indexOf('9') === -1 ? 'no_select' : 'select' ">我的</div>
+        <div
+          class="bottomNavigation_li_public_content"
+          @click="publicClick('/repository')"
+        >
+          <img
+            v-if="imagesUrl.repositoryIcon.indexOf('2') === -1"
+            src="../../assets/image/new/1.png"
+            alt=""
+          />
+          <img v-else src="../../assets/image/new/2.png" alt="" />
+          <div
+            :class="
+              imagesUrl.repositoryIcon.indexOf('2') === -1
+                ? 'no_select'
+                : 'select'
+            "
+          >
+            百科
+          </div>
+        </div>
+
+        <div
+          class="bottomNavigation_li_public_content"
+          @click="publicClick('/person')"
+        >
+          <img
+            v-if="imagesUrl.personIcon.indexOf('13') === -1"
+            src="../../assets/image/new/12.png"
+            alt=""
+          />
+          <img v-else src="../../assets/image/new/13.png" alt="" />
+          <div
+            :class="
+              imagesUrl.personIcon.indexOf('13') === -1 ? 'no_select' : 'select'
+            "
+          >
+            我的
+          </div>
         </div>
       </div>
     </div>
+
+    <popUp v-show="popUpShow"></popUp>
   </div>
 </template>
 
 <script>
+import popUp from "../popUp/popUp"; //识别框
 export default {
   name: "bottomNav",
+  components: {
+    popUp, //底部导航
+  },
   data() {
     return {
       imagesUrl: {
         // 排版图片使用懒加载
-        homeIcon: "./static/5.png", // 首页
-        mapShowIcon: "./static/6.png", // 识别
-        repositoryIcon: "./static/ku.png", // 知识库
-        personIcon: "./static/25.png" // 我的
-      }
+        homeIcon: "./static/new/5.png", // 发现
+        mapShowIcon: "./static/new/6.png", // 附近
+        repositoryIcon: "./static/new/1.png", // 百科
+        personIcon: "./static/new/12.png", // 我的
+      },
+      popUpShow: false,
     };
   },
   created() {
@@ -41,39 +121,69 @@ export default {
       let val = this.$route.path;
       switch (val) {
         case "/home":
-          this.imagesUrl.homeIcon = "./static/7.png"; // 首页
-          this.imagesUrl.mapShowIcon = "./static/6.png"; // 识别
-          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
-          this.imagesUrl.personIcon = "./static/25.png"; // 我的
+          this.imagesUrl.homeIcon = "./static/new/5.png"; // 发现
+          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
+          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
+          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
           break;
         case "/mapShow":
-          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
-          this.imagesUrl.mapShowIcon = "./static/8.png"; // 识别
-          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
-          this.imagesUrl.personIcon = "./static/25.png"; // 我的
+          this.imagesUrl.homeIcon = "./static/new/4.png"; // 发现
+          this.imagesUrl.mapShowIcon = "./static/new/7.png"; // 附近
+          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
+          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
           break;
         case "/repository":
-          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
-          this.imagesUrl.mapShowIcon = "./static/1.png"; // 识别
-          this.imagesUrl.repositoryIcon = "./static/ku2.png"; // 知识库
-          this.imagesUrl.personIcon = "./static/25.png"; // 我的
+          this.imagesUrl.homeIcon = "./static/new/4.png"; // 发现
+          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
+          this.imagesUrl.repositoryIcon = "./static/new/2.png"; // 百科
+          this.imagesUrl.personIcon = "./static/new/12.png"; // 我的
           break;
         case "/person":
-          this.imagesUrl.homeIcon = "./static/5.png"; // 首页
-          this.imagesUrl.mapShowIcon = "./static/6.png"; // 识别
-          this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
-          this.imagesUrl.personIcon = "./static/9.png"; // 我的
+          this.imagesUrl.homeIcon = "./static/new/4.png"; // 发现
+          this.imagesUrl.mapShowIcon = "./static/new/6.png"; // 附近
+          this.imagesUrl.repositoryIcon = "./static/new/1.png"; // 百科
+          this.imagesUrl.personIcon = "./static/new/13.png"; // 我的
           break;
       }
     } else {
       console.log("不合法参数");
     }
+
+    // if (typeof this.$route.path === "string") {
+    //   let val = this.$route.path;
+    //   switch (val) {
+    //     case "/home":
+    //       this.imagesUrl.homeIcon = "./static/7.png"; // 首页
+    //       this.imagesUrl.mapShowIcon = "./static/6.png"; // 识别
+    //       this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
+    //       this.imagesUrl.personIcon = "./static/25.png"; // 我的
+    //       break;
+    //     case "/mapShow":
+    //       this.imagesUrl.homeIcon = "./static/5.png"; // 首页
+    //       this.imagesUrl.mapShowIcon = "./static/8.png"; // 识别
+    //       this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
+    //       this.imagesUrl.personIcon = "./static/25.png"; // 我的
+    //       break;
+    //     case "/repository":
+    //       this.imagesUrl.homeIcon = "./static/5.png"; // 首页
+    //       this.imagesUrl.mapShowIcon = "./static/1.png"; // 识别
+    //       this.imagesUrl.repositoryIcon = "./static/ku2.png"; // 知识库
+    //       this.imagesUrl.personIcon = "./static/25.png"; // 我的
+    //       break;
+    //     case "/person":
+    //       this.imagesUrl.homeIcon = "./static/5.png"; // 首页
+    //       this.imagesUrl.mapShowIcon = "./static/6.png"; // 识别
+    //       this.imagesUrl.repositoryIcon = "./static/ku.png"; // 知识库
+    //       this.imagesUrl.personIcon = "./static/9.png"; // 我的
+    //       break;
+    //   }
+    // } else {
+    //   console.log("不合法参数");
+    // }
   },
   methods: {
     // 点击切换函数
     clickChang(val) {
-      // console.log('点击切换函数' + val)
-      // console.log(typeof val)
       if (typeof val === "string") {
         switch (val) {
           case "/home":
@@ -101,7 +211,6 @@ export default {
     },
     // 点击导航栏事件
     publicClick(val) {
-      // console.log('点击导航栏事件' + val)
       if (typeof val === "string") {
         switch (val) {
           case "/home":
@@ -122,8 +231,63 @@ export default {
       } else {
         console.log("不合法的传值");
       }
-    }
-  }
+    },
+
+    // 识别
+    discern() {
+      var that = this;
+      that.popUpShow = true;
+    },
+    // 点击上传按钮-昆虫
+    upload() {
+      var _this = this;
+      localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
+      localStorage.removeItem("plant"); //删除病害标识
+      //删除测试
+      localStorage.removeItem("ba64dataA");
+      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
+      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
+      localStorage.removeItem("memoryID");
+      localStorage.removeItem("memoryDistinction");
+      localStorage.removeItem("collectID");
+      localStorage.removeItem("collectDistinction");
+      localStorage.removeItem("seek_dataID");
+      localStorage.removeItem("Point");
+      this.$refs["file"].click();
+    },
+    // 点击上传按钮-病害
+    uploadA() {
+      var _this = this;
+      localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
+      localStorage.removeItem("insect"); //删除昆虫标识
+      //删除测试
+      localStorage.removeItem("ba64dataA");
+      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
+      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
+      localStorage.removeItem("memoryID");
+      localStorage.removeItem("memoryDistinction");
+      localStorage.removeItem("collectID");
+      localStorage.removeItem("collectDistinction");
+      localStorage.removeItem("seek_dataID");
+      localStorage.removeItem("Point");
+      this.$refs["file"].click();
+    },
+    // 选择上传文件
+    uploadChange(e) {
+      let file = e.target.files[0];
+      this.fileA = file; //传递给data中
+      this.filename = file["name"];
+      let URL = window.URL || window.webkitURL;
+      this.$refs["layer"].style.display = "block";
+      this.cropper.replace(URL.createObjectURL(file));
+    },
+    // 取消上传
+    cancelHandle() {
+      this.cropper.reset();
+      this.$refs["layer"].style.display = "none";
+      this.$refs["file"].value = "";
+    },
+  },
 };
 </script>
 
@@ -133,7 +297,8 @@ export default {
   bottom: 0;
   /* z-index: 9999; */
   z-index: 1999;
-  height: 1.2rem;
+  /* height: 1.2rem; */
+  height: 1.5rem;
   margin: 0 0 0 0rem;
   width: 100%;
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
@@ -153,26 +318,27 @@ export default {
 
 .bottomNavigation_li_public_content {
   flex: 1;
-  margin: 0.3rem 0 0 0;
+  margin: 0.55rem 0 0 0;
 }
 .xiangji {
   width: 1rem;
 }
 .bottomNavigation_li_public_content img {
   height: 0.6rem;
-  width: 0.7rem;
-  margin: 0 0 0 -0.15rem;
+  width: 0.6rem;
+  /* margin: 0 0 0 0.85rem; */
+  margin: 0 0 0 0.6rem;
 }
 .bottomNavigation_li_public_content div {
   position: relative;
-  bottom: 3px;
+  bottom: -1px;
 }
 
 .no_select {
-  font-size: 18px;
-  color: #222;
+  font-size: 15px;
+  color: #949494;
   text-align: center;
-  margin: 0.15rem 0 0 -0.15rem;
+  margin: 0 0 0 -0.15rem;
 }
 
 /* @keyframes select {
@@ -189,26 +355,32 @@ export default {
 
 @keyframes select {
   0% {
-    font-size: 18px;
+    font-size: 15px;
   }
   50% {
-    font-size: 18px;
+    font-size: 15px;
   }
   100% {
-    font-size: 18px;
+    font-size: 15px;
   }
 }
 .select {
   animation: select 0.6s;
-  font-size: 18px;
-  color: #fff;
-  margin: 0.15rem 0 0 0.5rem;
-  border: 1px solid #16c4af;
-  border-radius: 25px;
-  background: #16c4af;
+  font-size: 15px;
+  color: #72d7b9;
+  margin: 0 0 0 -0.15rem;
 }
 .register-img {
   width: 1rem;
   height: 1rem;
 }
+
+/* 识别图标 */
+.bottomNavigation_li_public_content-img {
+  width: 1.3rem !important;
+  height: 1.3rem !important;
+  border: 5px solid #fff;
+  border-radius: 50px;
+  margin: -0.9rem 0 0 0.15rem !important;
+}
 </style>

discern/src/components/field_details/field_details.vue

@@ -1,219 +1,192 @@
-<!--  -->
-<template>
-  <div class="field_details_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
++<template>
+  <div class="field_details_box">
     <!-- 头部 -->
-    <div class="field_details_head">
-      <div class="field_details_head_returnA" @click="FanHui()">
-        <img src="../../assets/image/left.png" alt class="field_details_head_returnA_img" />
+    <div class="field_details_headrBox">
+      <div class="field_details_divBox">
+        <div class="field_details_headrBox-tlt">发现</div>
       </div>
-
-      <!-- 用户头像和名称 -->
-      <div class="field_details_NameBox_boxA">
-        <div class="field_details_NameBox_box">
-          <img
-            :src=" 'bigservers/' + this.redata.photo + '?' + Math.random() * 10"
-            alt
-            class="field_details_NameBox_image"
-          />
-          <div
-            class="field_details_NameBox_text"
-          >{{ this.redata.user_remark === '' || this.redata.user_remark === null ? this.str : this.redata.user_remark }}</div>
-        </div>
-      </div>
-
-      <!-- 用户头像和名称 -->
-
-      <!-- 轮播 -->
-      <div class="block">
-        <el-carousel trigger="click" height="6rem">
-          <el-carousel-item v-for="item in imageData" :key="item">
-            <img
-              preview="1"
-              v-lazy=" 'bigservers/'  + item"
-              alt
-              class="lunboImg"
-            />
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <!-- 轮播 -->
     </div>
 
     <!-- 主内容 -->
     <div class="field_details_main">
-      <!-- 详情基础数据 -->
-      <div class="main_basisData">
-        <!-- 类型标识和描述 -->
-        <div class="field_details_TAGBox">
-          <span class="field_details_TAGText">{{ this.redata.problem }}</span>
-          <div class="field_details_NameBox_time">{{ this.redata.time }}</div>
-        </div>
-
-        <!-- 地址 -->
-        <div class="field_details_address">
-          <img src="../../assets/image/ding.png" alt class="field_details_address_img" />
-          <span class="field_details_address_addr">{{ this.redata.addr }}</span>
-        </div>
-        <!-- 地址 -->
+      <!-- 交流 -->
+      <div class="swiper-slide" ref="viewBox">
+        <ul class="field_details_box_main-ulA">
+          <li class="field_details_box_main-listA">
+            <!-- 用户信息 -->
+            <div class="field_details_box_main-listA-userBox">
+              <img
+                preview="1"
+                src="../../assets/image/user.jpg"
+                alt
+                class="field_details_box_main-listA-userBox-img"
+              />
 
-        <!-- 线 -->
-        <div class="main_basisData_wire"></div>
-        <!-- 线 -->
-      </div>
-      <!-- 详情基础数据 -->
+              <div class="field_details_box_main-listA-userBox-txt">
+                <div class="field_details_box_main-listA-userBox-name">
+                  {{
+                    redata.user_remark !== "" || redata.user_remark !== null
+                      ? redata.user_remark
+                      : redata.username
+                  }}
+                </div>
+                <div class="field_details_box_main-listA-userBox-time">
+                  {{ redata.time }}
+                </div>
+              </div>
+            </div>
 
-      <!-- 留言列表 -->
-      <div class="main_leave">
-        <!-- 标题 -->
-        <div class="main_leave_title_box">
-          <div class="main_leave_title">评论</div>
-        </div>
+            <!-- 交流内容-文字 -->
+            <div class="field_details_box_main-listA-writing">
+              {{ redata.problem }}
+            </div>
 
-        <!-- 留言 -->
-        <ul class="reply" v-if="replyShow">
-          <li class="field_details_li" v-for="(item, index) in this.redata.lower" :key="index">
-            <!-- 第一级用户评论 -->
-            <div class="field_details_li_criticOne">
-              <div class="criticOne_profile">
-                <!-- 头像和名称 -->
-                <div class="profile_box">
-                  <img :src=" 'bigservers/' + item.photo + '?' + Math.random() * 10" alt class="profile_img" />
-                  <div
-                    class="profile_name"
-                  >{{ item.user_remark === '' || item.user_remark === null ? item.username : item.user_remark }}</div>
-                </div>
-                <!-- 头像和名称 -->
+            <!-- 交流图片 -->
+            <div class="field_details_box_main-listA-image">
+              <ul class="field_details_box_main-listA-image-ul">
+                <li
+                  class="field_details_box_main-listA-image-list"
+                  v-for="item in this.redata.img"
+                  :key="item"
+                >
+                  <img
+                    preview="1"
+                    v-lazy="'/bigservers' + item"
+                    alt
+                    class="field_details_box_main-listA-imageList"
+                  />
+                </li>
+              </ul>
+            </div>
 
-                <!-- 点赞 -->
-                <div class="give_box">
+            <!-- 交流数据的查看评论点赞 -->
+            <div class="field_details_box_main-listA-operation">
+              <ul class="field_details_box_main-listA-operation-ul">
+                <li class="field_details_box_main-listA-operation-list">
                   <img
-                    v-if="item.exist == '0'"
-                    @click="give($event, item.id, index)"
-                    src="../../assets/image/give.png"
+                    src="../../assets/image/new/8.png"
                     alt
-                    class="give_img"
+                    class="field_details_box_main-listA-operation-listImg"
                   />
+                  <div class="field_details_box_main-listA-operation-listNum">
+                    {{ this.visit_num }}
+                  </div>
+                </li>
+                <li class="field_details_box_main-listA-operation-list">
                   <img
-                    v-else
-                    @click="giveA($event, item.id, index)"
-                    src="../../assets/image/giveA.png"
+                    src="../../assets/image/new/10.png"
                     alt
-                    class="give_img"
+                    class="field_details_box_main-listA-operation-listImg"
                   />
-                  <div class="give_text">{{ item.replys_num }}</div>
-                </div>
-              </div>
-
-              <!-- 回复的文字 -->
-              <div class="field_details_li_criticOne_text">{{ item.problem }}</div>
-
-              <!-- 时间和回复按钮 -->
-              <div class="reply_time">
-                <div class="time_text">{{ item.time }}</div>
-
-                <div
-                  class="reply_btn"
-                  @click="reply($event, item.username, item.user_remark, item.id)"
-                >回复</div>
-              </div>
-            </div>
-            <!-- 第一级用户评论 -->
-
-            <!-- 第二级评论 -->
-            <ul v-show="item.lower.length !== 0" class="field_details_ulTwo">
-              <li class="field_details_liTwo" v-for="(itemA, index) in item.lower" :key="index">
-                <!-- 头像和名称 -->
-                <div class="criticTwo_profile">
+                  <div class="field_details_box_main-listA-operation-listNum">
+                    {{ this.replys }}
+                  </div>
+                </li>
+                <li class="field_details_box_main-listA-operation-list">
+                  <!-- 未点赞 -->
                   <img
-                    :src=" 'bigservers/' + itemA.photo + '?' + Math.random() * 10"
+                    @click.stop="likeA()"
+                    v-if="this.like === '0'"
+                    src="../../assets/image/new/3.png"
                     alt
-                    class="profileTwo_img"
+                    class="field_details_box_main-listA-operation-listImg"
                   />
-                  <div
-                    class="profileTwo_name"
-                  >{{ itemA.user_remark === '' || itemA.user_remark === null ? itemA.username : itemA.user_remark }}</div>
-                </div>
-
-                <!-- 回复内容 -->
-                <div class="field_details_li_criticTwo_text">{{ itemA.problem }}</div>
-
-                <!-- 时间和回复功能 -->
-                <div class="reply_timeTwo">
-                  <div class="time_textTwo">{{ itemA.time }}</div>
-
-                  <!-- <div class="reply_btnTwo" @click="reply($event, itemA.username, item.user_remark, item.id)">回复</div> -->
-                </div>
-              </li>
-            </ul>
-            <!-- 第二级评论 -->
+                  <!-- 点赞了 -->
+                  <img
+                    v-else
+                    @click.stop="noLike()"
+                    src="../../assets/image/new/23.png"
+                    alt
+                    class="field_details_box_main-listA-operation-listImg"
+                  />
+                  <div class="field_details_box_main-listA-operation-listNum">
+                    {{ this.like_num }}
+                  </div>
+                </li>
+              </ul>
+            </div>
           </li>
         </ul>
-        <!-- 暂无 -->
-        <div class="without_box" v-else>
-          <img src="../../assets/image/without.png" alt class="without_img" />
-          <div class="without_text">还没有人评论</div>
-        </div>
-        <!-- 暂无 -->
       </div>
-      <!-- 留言列表 -->
 
-      <!-- 底部input框 -->
-      <div class="bomIpt_box">
-        <div class="Ipt_box">
-          <input type="text" disabled="disabled" @focus="ipt()" class="Ipt" placeholder="写回复" />
-        </div>
-      </div>
-      <!-- 底部input框 -->
+      <!-- 评论 -->
+      <ul class="field_details_commentUl" v-if="replyShow">
+        <li
+          class="field_details_commentList"
+          v-for="(item, index) in this.redata.lower"
+          :key="index"
+        >
+          <div class="field_details_commentList-div1">
+            <img
+              preview="1"
+              v-lazy="item.photo"
+              alt=""
+              class="field_details_commentList_img1"
+            />
+            <div class="field_details_commentList_div2">
+              <div class="field_details_commentList_div2_name">
+                {{ item.username }}
+              </div>
+              <div class="field_details_commentList_div2_txt">
+                {{ item.problem }}
+              </div>
+              <div class="field_details_commentList_div2_time">
+                {{ item.time }}
+              </div>
+            </div>
+          </div>
 
-      <!-- 隐藏的input和发表按钮 -->
-      <div id="inputId" class="hidIpt_box" v-show="iptShow">
-        <textarea
-          maxlength="100"
-          v-model="textIpt"
-          type="text"
-          @blur="IptA($event)"
-          class="hidIpt_box_ipt"
-          ref="Iptid"
-        />
-        <button class="hidIpt_box_btn" @click="btnFbiao()">发表</button>
+          <div class="give_box">
+            <!-- 未点赞 -->
+            <img
+              @click.stop="likeB(item.id, index)"
+              v-if="item.exist === '0'"
+              src="../../assets/image/new/3.png"
+              alt
+              class="field_details_commentList_img"
+            />
+            <!-- 点赞了 -->
+            <img
+              v-else
+              @click.stop="noLikeB(item.id, index)"
+              src="../../assets/image/new/23.png"
+              alt
+              class="field_details_commentList_img"
+            />
+            <div class="field_details_commentList_likeNum">
+              {{ item.replys_num }}
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <!-- 评论暂无数据 -->
+      <div class="without_box" v-else>
+        <img src="../../assets/image/without.png" alt class="without_img" />
+        <div class="without_text">还没有人评论</div>
       </div>
-      <!-- 隐藏的input和发表按钮 -->
     </div>
-    <!-- 主内容 -->
   </div>
 </template>
 
 <script>
 export default {
-  //import引入的组件需要注入到对象中才能使用
-  components: {},
+  name: "field_details",
   data() {
-    //这里存放数据
     return {
-      isClick: true, //点赞开关
-      iptShow: false, //input框
-      fullHeight: document.documentElement.clientHeight,
-      redata: [], //页面基础数据
-      imageData: [], //轮播数据
-      // problemShow: false, //二级评论是否显示
-      problemShow: "", //二级评论是否显示
+      fullHeight: document.documentElement.clientHeight, //自适应高度
+      redata: {},
       replyShow: false, //是否有留言
-      textIpt: "", // 隐藏input的双向绑定
-      nameAA: "admin", //当前操作的用户
-      giveShow: true, //点赞
-      collectShow: true, //收藏
-      replyTAG: "", //判断是什么回复的标识
-      //查看大图
-      imgList: "",
-      loading: true, //加载
-      str: "", //对号码加密
-      name: "", //回复
-      nameA: "" //回复
+      isClick: true, //点赞开关
+      // 详情点赞
+      visit_num: "", //查看
+      replys: "", //评论
+      like: "", //点赞
+      like_num: "", //点赞次数
+      id: "", //id
+      // 详情点赞
     };
   },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
   watch: {
     fullHeight(val) {
       //监控浏览器高度变化
@@ -221,18 +194,13 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
     },
-    //发表评论
-    textIpt: function() {
-      this.textIpt = this.textIpt.replace(/^\s+|\s+$/g, "");
-    }
   },
-  //方法集合
   methods: {
     //动态获取浏览器高度
     get_boderHeight() {
@@ -245,319 +213,220 @@ export default {
       };
     },
 
-    //返回home页面
-    FanHui() {
-      //判断当前页面数据是从首页进入还是消息提醒中进入
-      if (localStorage.getItem("fieldName") !== null) {
-        // console.log('消息')
-        localStorage.removeItem("fieldDetailsId"); //删除ID
-        localStorage.removeItem("field_detailsBiaoshi");
-        localStorage.removeItem("fieldName");
-        this.$router.replace("/message_list");
-      } else {
-        // console.log('首页')
-        localStorage.removeItem("fieldDetailsId"); //删除ID
-        localStorage.removeItem("field_detailsBiaoshi");
-        this.$router.replace("/home");
-      }
-    },
-
-    //获取焦点input框
-    ipt() {
-      this.iptShow = true;
-      console.log(this.iptShow);
-    },
-
-    //隐藏框失去焦点
-    IptA(e) {
-      // this.textIpt = ''
-    },
-
-    //详情数据
-    ajaxData() {
-      let _this = this;
-      let postData = _this.$qs.parse({
-        id: localStorage.getItem("fieldDetailsId")
+    //详情数据接口
+    fieldDetailsData() {
+      var that = this;
+      let postData = that.$qs.parse({
+        id: that.id,
       });
-      _this
+      that
         .$axios({
           method: "post",
           url: "bigservers/user_farm_show",
-          data: postData
+          data: postData,
         })
-        .then(res => {
-          //判断是否有评论
+        .then((res) => {
+          console.log(res.data);
+          // 判断是否有评论
           if (res.data[0].lower.length === 0) {
-            _this.replyShow = false;
+            that.replyShow = false;
           } else {
-            _this.replyShow = true;
+            that.replyShow = true;
           }
-          _this.redata = res.data[0];
-          _this.imageData = res.data[0].img;
-          _this.phonePad(res.data[0].username);
-          _this.loading = false;
+          that.redata = res.data[0];
         })
-        .catch(err => {
+        .catch((err) => {
           console.log(err);
         });
     },
-
-    //一级评论回复事件
-    reply(e, name, nameA, ids) {
-      this.iptShow = true; //显示input
-      this.$nextTick(() => {
-        this.$refs.Iptid.focus();
+    // 交流点赞
+    likeA() {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: that.id, //id
+        ret: "add", //点赞
+        req: "title", //主问题
       });
-      if (nameA !== "") {
-        this.textIpt = "回复" + nameA + "：";
-        this.nameA = nameA;
-      } else {
-        this.textIpt = "回复" + name + "：";
-        this.name = name;
-      }
-      this.replyTAG = "one";
-      // console.log(ids);
-      localStorage.setItem("fieldDetails_replyId", ids);
-    },
-
-    //发表评论
-    btnFbiao() {
-      let _this = this;
-      if (this.name !== "") {
-        var num = "回复" + this.name + "：";
-        var dat = _this.textIpt;
-        dat = dat.replace(num, "");
-      } else if (this.nameA !== "") {
-        var num = "回复" + this.nameA + "：";
-        var dat = _this.textIpt;
-        dat = dat.replace(num, "");
-      }
-      if (dat === "") {
-        this.$notify.error({
-          title: "错误",
-          message: "内容不能为空！！！",
-          duration: 1500
-        });
-      } else {
-        if (this.replyTAG === "one") {
-          var postData = _this.$qs.parse({
-            id: localStorage.getItem("fieldDetailsId"), //问题id
-            ids: localStorage.getItem("fieldDetails_replyId"), //一级评论id
-            content: _this.textIpt //评论内容
-          });
-        } else {
-          var postData = _this.$qs.parse({
-            id: localStorage.getItem("fieldDetailsId"), //问题id
-            ids: "", //一级评论id
-            content: _this.textIpt //评论内容
-          });
-        }
-        _this
+      if (isClick === true) {
+        that.isClick = false;
+        that
           .$axios({
             method: "post",
-            url: "bigservers/farm_answer",
-            data: postData
+            url: "bigservers/farm_likes",
+            data: postData,
           })
-          .then(res => {
-            //判断评论是否成功
+          .then((res) => {
             if (res.data === 0) {
               this.$message({
                 type: "success",
-                message: "评论成功!",
-                duration: 1500
+                message: "点赞成功!",
+                duration: 1500,
               });
-              _this.textIpt = "";
-              _this.ajaxData();
-              localStorage.setItem("field_detailsBiaoshi", "1");
+              that.like = "1"; //改变点赞状态
+              that.like_num = that.like_num + 1; //改变点赞数据
             } else if (res.data === 1) {
               this.$notify.error({
                 title: "错误",
-                message: "评论失败,请重试",
-                duration: 1500
+                message: "点赞出错了！！",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+        setTimeout(function () {
+          that.isClick = true;
+        }, 1500);
+      }
+    },
+    // 交流取消点赞
+    noLike() {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: that.id, //id
+        ret: "off", //点赞
+        req: "title", //主问题
+      });
+      if (isClick === true) {
+        that.isClick = false;
+        that
+          .$axios({
+            method: "post",
+            url: "bigservers/farm_likes",
+            data: postData,
+          })
+          .then((res) => {
+            if (res.data === 0) {
+              that.$message({
+                type: "success",
+                message: "取消点赞成功！",
+                duration: 1500,
+              });
+              that.like = "0"; //改变点赞状态
+              that.like_num = that.like_num - 1; //改变点赞数量
+            } else if (res.data === 1) {
+              that.$notify.error({
+                title: "错误",
+                message: "取消点赞出错了！！",
+                duration: 1500,
               });
             }
-            _this.iptShow = false; //收起input
           })
-          .catch(err => {
+          .catch((err) => {
             console.log(err);
           });
+        setTimeout(function () {
+          that.isClick = true;
+        }, 1500);
       }
     },
 
-    //一级评论点赞
-    give(e, id, index) {
-      let _this = this;
-      let postData = _this.$qs.parse({
-        id: id,
-        ret: "addr",
-        req: "two"
+    // 交流评论点赞
+    likeB(id, index) {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: id, //id
+        ret: "add", //点赞
+        req: "subtitle", //主问题
       });
-      var isClick = _this.isClick;
       if (isClick === true) {
-        _this.isClick = false;
-        _this
+        that.isClick = false;
+        that
           .$axios({
             method: "post",
             url: "bigservers/farm_likes",
-            data: postData
+            data: postData,
           })
-          .then(res => {
+          .then((res) => {
             if (res.data === 0) {
               this.$message({
                 type: "success",
                 message: "点赞成功!",
-                duration: 1500
+                duration: 1500,
               });
-              _this.redata.lower[index].exist = "1"; //改变点赞状态
-              _this.redata.lower[index].replys_num =
-                _this.redata.lower[index].replys_num + 1; //改变点赞数量
-              _this.numOne = res.data.num;
+              // that.like = "1"; //改变点赞状态
+              // that.like_num = that.like_num + 1; //改变点赞数据
+
+              that.redata.lower[index].exist = "1"; //改变点赞状态
+              that.redata.lower[index].replys_num =
+                that.redata.lower[index].replys_num + 1;
             } else if (res.data === 1) {
               this.$notify.error({
                 title: "错误",
                 message: "点赞出错了！！",
-                duration: 1500
-              });
-            } else if (res.data === 2) {
-              this.$message({
-                type: "success",
-                message: "已点赞!",
-                duration: 1500
+                duration: 1500,
               });
             }
+          })
+          .catch((err) => {
+            console.log(err);
           });
-        setTimeout(function() {
-          _this.isClick = true;
+        setTimeout(function () {
+          that.isClick = true;
         }, 1500);
       }
     },
-
-    //取消点赞
-    giveA(e, id, index) {
-      let _this = this;
-      let postData = _this.$qs.parse({
-        id: id,
-        ret: "off",
-        req: "two"
+    // 交流评论取消点赞
+    noLikeB(id, index) {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: id, //id
+        ret: "off", //点赞
+        req: "subtitle", //主问题
       });
-      var isClick = _this.isClick;
       if (isClick === true) {
-        _this.isClick = false;
-        _this
+        that.isClick = false;
+        that
           .$axios({
             method: "post",
             url: "bigservers/farm_likes",
-            data: postData
+            data: postData,
           })
-          .then(res => {
+          .then((res) => {
             if (res.data === 0) {
-              this.$message({
+              that.$message({
                 type: "success",
-                message: "取消点赞成功!",
-                duration: 1500
+                message: "取消点赞成功！",
+                duration: 1500,
               });
-              _this.redata.lower[index].exist = "0"; //改变点赞状态
-              _this.redata.lower[index].replys_num =
-                _this.redata.lower[index].replys_num - 1; //改变点赞数量
+              that.redata.lower[index].exist = "0"; //改变点赞状态
+              that.redata.lower[index].replys_num =
+                that.redata.lower[index].replys_num - 1; //改变点赞数量
             } else if (res.data === 1) {
-              this.$notify.error({
+              that.$notify.error({
                 title: "错误",
                 message: "取消点赞出错了！！",
-                duration: 1500
-              });
-            } else if (res.data === 2) {
-              this.$message({
-                type: "success",
-                message: "已点赞!",
-                duration: 1500
+                duration: 1500,
               });
             }
+          })
+          .catch((err) => {
+            console.log(err);
           });
-        setTimeout(function() {
-          _this.isClick = true;
+        setTimeout(function () {
+          that.isClick = true;
         }, 1500);
       }
     },
-
-    //第一次进入详情时进行调用-暂时不用
-    oneAjax() {
-      let _this = this;
-      let postData = _this.$qs.parse({
-        id: localStorage.getItem("fieldDetailsId"),
-        ret: "farm"
-      });
-      _this
-        .$axios({
-          method: "post",
-          url: "bigservers/reminder",
-          data: postData
-        })
-        .then(res => {
-          // //判断是否有评论
-          // if (res.data[0].lower.length === 0) {
-          //   _this.replyShow = false;
-          // } else {
-          //   _this.replyShow = true;
-          // }
-          // _this.redata = res.data[0];
-          // _this.imageData = res.data[0].img;
-          // console.log(res.data)
-        })
-        .catch(err => {
-          console.log(err);
-        });
-    },
-
-    //将手机号码加密
-    phonePad(p) {
-      // 1字符串转化成数组
-      let phoneArr = [...p];
-      // 2.将数组中的4-7位变成*
-      phoneArr.map((res, index) => {
-        if (index > 2 && index < 7) {
-          this.str += "*";
-        } else {
-          this.str += res;
-        }
-      });
-      return this.str;
-    }
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    //判断本地是否有存field_detailsBiaoshi
-    if (localStorage.getItem("field_detailsBiaoshi") === null) {
-      this.oneAjax();
-      this.ajaxData();
-    } else if (localStorage.getItem("field_detailsBiaoshi") !== null) {
-      this.ajaxData();
-    }
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
+
   mounted() {
-    this.get_boderHeight();
-    var _this = this;
-    //点击评论input和发表以外进行隐藏
-    this.$nextTick(() => {
-      document.addEventListener("click", e => {
-        if (
-          e.target.className == "hidIpt_box_ipt" ||
-          e.target.className == "hidIpt_box_btn" ||
-          e.target.className == "Ipt_box" ||
-          e.target.className == "Ipt" ||
-          e.target.className == "reply_btn"
-        ) {
-          // this.dialog = false;
-          this.iptShow = true;
-        } else {
-          this.iptShow = false;
-        }
-      });
-    });
-  }
+    var that = this;
+    that.visit_num = that.$route.query.visit_num;
+    that.replys = that.$route.query.replys;
+    that.like = that.$route.query.like;
+    that.like_num = that.$route.query.like_num;
+    that.id = that.$route.query.id;
+    that.get_boderHeight(); //动态获取浏览器高度
+    that.fieldDetailsData(); //详情数据接口
+  },
 };
 </script>
 <style lang='scss'>
-@import "../../assets/scss/bus.scss";
 @import "../../assets/scss/field_details.scss";
 </style>

discern/src/components/help/help.vue

@@ -1,167 +1,341 @@
 <!--  -->
 <template>
   <div class="help_box" :style="'height:' + fullHeight + 'px'">
-    <!-- 头部 -->
-    <div class="help_head">
-      <div class="help_head_returnA" @click="FanHui()">
+    <!-- 头部信息 -->
+    <div class="help_box-head">
+      <div class="help_box-headBox">
         <img
-          src="../../assets/image/left.png"
-          alt
-          class="help_head_returnA_img"
+          src="../../assets/image/user.jpg"
+          alt=""
+          class="help_box-headImg"
         />
       </div>
-
-      <!-- 标题 -->
-      <div class="head_title">
-        <span class="head_title_text">关于我们</span>
-      </div>
     </div>
-    <!-- 线 -->
-    <div class="help_segment"></div>
-    <!-- 线 -->
 
     <!-- 主内容 -->
-    <div class="help_main">
-      <!-- 版本号 -->
-      <div class="help_mainVersions">
-        <!-- app图标 -->
-        <img
-          src="../../assets/image/Appicon.png"
-          alt
-          class="help_mainVersions_img"
-        />
-        <!-- app图标 -->
-        <div class="help_mainVersionsText">V1.1.5</div>
+    <div class="help_box-main">
+      <!-- 标题 -->
+      <div class="navlist">
+        <ul>
+          <li
+            class="navli"
+            v-for="(item, index) in navList"
+            :class="{ activeT: nowIndex === index }"
+            @click="tabClick(index)"
+            :key="index"
+          >
+            <div class="navliVal">{{ item.name }}</div>
+          </li>
+        </ul>
       </div>
-      <!-- 版本号 -->
-
-      <!-- 公司介绍 -->
-      <ul class="company_box">
-        <li class="company_box-list" @click="jieshao()">
-          <div class="company_box-list-txt">技术支持</div>
-
-          <div class="company_box-list-txt2Box">
-            <div class="company_box-list-txt2-txt">
-              河南云飞科技发展有限公司
-            </div>
-            <img
-              src="../../assets/image/right.png"
-              alt=""
-              class="company_box-list-txt2-img"
-            />
-          </div>
-        </li>
-
-        <li
-          style="
-            width: 95%;
-            border-bottom: 1px solid #efefef;
-            margin: 0.25rem 0 0 0.45rem;
-          "
-        ></li>
-
-        <li class="company_box-list" @click="share()">
-          <div class="company_box-list-txt">关注微信</div>
-
-          <div class="company_box-list-txt2Box">
-            <div class="company_box-list-txt2-txt">
-              河南云飞科技发展有限公司
-            </div>
-            <img
-              src="../../assets/image/right.png"
-              alt=""
-              class="company_box-list-txt2-img"
-            />
-          </div>
-        </li>
-      </ul>
-      <!-- 公司介绍 -->
-
-      <!-- 公司介绍2 -->
-      <ul class="company_box">
-        <li class="company_box-list" @click="wangzhi()">
-          <div class="company_box-list-txt">公司官网</div>
-
-          <div class="company_box-list-txt2Box">
-            <div class="company_box-list-txt2-txt">
-              www.hnyfkj.cn
-            </div>
-            <img
-              src="../../assets/image/right.png"
-              alt=""
-              class="company_box-list-txt2-img"
-            />
-          </div>
-        </li>
-
-        <li
-          style="
-            width: 95%;
-            border-bottom: 1px solid #efefef;
-            margin: 0.25rem 0 0 0.45rem;
-          "
-        ></li>
-
-        <li class="company_box-list">
-          <div class="company_box-list-txt">商务合作</div>
-
-          <div class="company_box-list-txt2Box">
-            <div class="company_box-list-txt2-txt">
-              400-690-1990
-            </div>
-            <img
-              src="../../assets/image/right.png"
-              alt=""
-              class="company_box-list-txt2-img"
-            />
+
+      <!-- 相应内容 -->
+      <div
+        class="swiper-container swiper_con"
+        style="background: #f7f8fc; margin-bottom: 1rem"
+      >
+        <div class="swiper-wrapper">
+          <!-- 交流 -->
+          <div class="swiper-slide" ref="viewBox">
+            <ul class="help_box-main-ulA">
+              <li
+                class="help_box-main-listA"
+                v-for="(item, index) in this.interflowDat"
+                :key="index"
+              >
+                <!-- 用户信息 -->
+                <div class="help_box-main-listA-userBox">
+                  <img
+                    preview="1"
+                    v-lazy="'/bigservers' + item.photo"
+                    alt
+                    class="help_box-main-listA-userBox-img"
+                  />
+
+                  <div class="help_box-main-listA-userBox-txt">
+                    <div class="help_box-main-listA-userBox-name">
+                      {{ item.user_remark }}
+                    </div>
+                    <div class="help_box-main-listA-userBox-time">
+                      {{ item.time }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 交流内容-文字 -->
+                <div class="help_box-main-listA-writing">
+                  {{ item.problem }}
+                </div>
+
+                <!-- 交流图片 -->
+                <div class="help_box-main-listA-image">
+                  <ul class="help_box-main-listA-image-ul">
+                    <li
+                      class="help_box-main-listA-image-list"
+                      v-for="itemA in item.img"
+                      :key="itemA"
+                      @click="imgShow(itemA)"
+                      preview="1"
+                    >
+                      <img
+                        v-lazy="'/bigservers' + itemA"
+                        alt
+                        class="help_box-main-listA-imageList"
+                      />
+                    </li>
+                  </ul>
+                </div>
+
+                <!-- 交流数据的查看评论点赞 -->
+                <div class="help_box-main-listA-operation">
+                  <ul class="help_box-main-listA-operation-ul">
+                    <li class="help_box-main-listA-operation-list">
+                      <img
+                        src="../../assets/image/new/8.png"
+                        alt
+                        class="help_box-main-listA-operation-listImg"
+                      />
+                      <div class="help_box-main-listA-operation-listNum">
+                        {{ item.visit_num }}
+                      </div>
+                    </li>
+                    <li class="help_box-main-listA-operation-list">
+                      <img
+                        src="../../assets/image/new/10.png"
+                        alt
+                        class="help_box-main-listA-operation-listImg"
+                      />
+                      <div class="help_box-main-listA-operation-listNum">
+                        {{ item.replys }}
+                      </div>
+                    </li>
+                    <li class="help_box-main-listA-operation-list">
+                      <!-- 未点赞 -->
+                      <img
+                        @click.stop="like(item.id, index)"
+                        v-if="item.like === '0'"
+                        src="../../assets/image/new/3.png"
+                        alt
+                        class="help_box-main-listA-operation-listImg"
+                      />
+                      <!-- 点赞了 -->
+                      <img
+                        v-else
+                        @click.stop="noLike(item.id, index)"
+                        src="../../assets/image/new/23.png"
+                        alt
+                        class="help_box-main-listA-operation-listImg"
+                      />
+                      <div class="help_box-main-listA-operation-listNum">
+                        {{ item.like_num }}
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
           </div>
-        </li>
-        <li
-          style="
-            width: 95%;
-            border-bottom: 1px solid #efefef;
-            margin: 0.25rem 0 0 0.45rem;
-          "
-        ></li>
-        <li class="company_box-list">
-          <div class="company_box-list-txt">公司邮箱</div>
-
-          <div class="company_box-list-txt2Box">
-            <div class="company_box-list-txt2-txt">
-              hnyf826@163.com
-            </div>
-            <img
-              src="../../assets/image/right.png"
-              alt=""
-              class="company_box-list-txt2-img"
-            />
+
+          <!-- 鉴定 -->
+          <div class="swiper-slide">
+            <ul class="help_box-main-authenticateUl">
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+
+              <li class="help_box-main-authenticateList">
+                <div class="help_box-main-authenticateList-box1">
+                  <img
+                    src="../../assets/image/timg4.jpg"
+                    alt
+                    class="help_box-main-authenticateList-box1-img"
+                  />
+                  <div class="help_box-main-authenticateList-box1-txt">
+                    这是什么虫子？以前好像见过
+                  </div>
+                </div>
+
+                <div class="help_box-main-authenticateList-box2">
+                  <div class="help_box-main-authenticateList-box3">
+                    <img
+                      src="../../assets/image/user.jpg"
+                      alt
+                      class="help_box-main-authenticateList-box3-img"
+                    />
+                    <div class="help_box-main-authenticateList-box3-name">
+                      用户123456
+                    </div>
+                  </div>
+                  <img
+                    src="../../assets/image/new/10.png"
+                    alt
+                    class="help_box-main-authenticateList-box4-img"
+                  />
+                </div>
+              </li>
+            </ul>
           </div>
-        </li>
-      </ul>
-      <!-- 公司介绍2 -->
-
-      <!-- 底部信息 -->
-      <div style="color: #858585">© 河南云飞科技发展有限公司</div>
-      <!-- 底部信息 -->
-
-      <!-- 官网网址 -->
-      <!-- <div class="official">河南云飞科技发展有限公司官方网址：http://www.hnyfkj.cn</div> -->
-      <!-- 官网网址 -->
-
-      <!-- 测试 -->
-      <!-- <div class="btmImg_box">
-        <img src="../../assets/image/code.png" alt class="btmImg" />
-        <div class="btmImg_box_text">扫描左侧二维码，可显示云飞科技相关联系方式。更多联系方式，请点击网站联系我们</div>
-      </div> -->
-      <!-- 测试 -->
+        </div>
+      </div>
     </div>
-    <!-- 主内容 -->
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
+import "swiper/js/swiper.min.js";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -170,6 +344,14 @@ export default {
     //这里存放数据
     return {
       fullHeight: document.documentElement.clientHeight,
+      navList: [{ name: "交流" }, { name: "鉴定" }],
+      nowIndex: 0,
+      mySwiper: "",
+      // 交流
+      interflowDat: [], //交流列表数据
+      isClick: true, //点赞开关
+      amplificationShow: false, //查看大图
+      imgList: "",
     };
   },
   //监听属性 类似于data概念
@@ -202,37 +384,164 @@ export default {
       };
     },
 
-    // 返回home页面
-    FanHui() {
-      let _this = this;
-      // _this.$router.push("/person");
-      _this.$router.replace("/person");
-      //   location.reload();
+    // tab切换交流、鉴定、方案
+    initSwiper() {
+      var that = this;
+      that.mySwiper = new Swiper(".swiper-container", {
+        initialSlide: 0,
+        autoplay: false,
+        keyboardControl: true,
+        autoHeight: true,
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true,
+        autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
+        preventLinksPropagation: false, // 阻止点击事件冒泡
+        onSlideChangeStart: function (swiper) {
+          //这个是当swiper被改变是的回调函数，可以拿到当前索引
+          console.log(swiper.activeIndex);
+          // alert(swiper.activeIndex);
+          that.nowIndex = swiper.activeIndex;
+        },
+        onSlideChangeTransitionStart: function (swiper, event) {},
+      });
     },
-
-    //点击跳转到公众号
-    share() {
-      this.$router.push("/share");
+    tabClick(index) {
+      this.nowIndex = index;
+      if (!this.mySwiper.slideTo) {
+        this.initSwiper();
+      }
+      this.mySwiper.slideTo(index, 300, false);
     },
 
-     //点击跳转到公司介绍
-    jieshao() {
-      this.$router.push("/helpTxt");
+    // 交流列表数据接口
+    interflowData() {
+      var that = this;
+      that
+        .$axios({
+          method: "get",
+          url: "bigservers/user_farm_show",
+          params: {
+            page: 1,
+          },
+        })
+        .then((res) => {
+          if (res.data.num !== 0) {
+            var data = res.data.dat;
+            that.interflowDat = data;
+          } else if (res.data.num === 0) {
+            this.gerenShow = false;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
-
-     //点击跳转到扫码下载页面
-    wangzhi() {
-      this.$router.push("/helpWangzhi");
+    // 交流点赞
+    like(id, index) {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: id, //id
+        ret: "add", //点赞
+        req: "title", //主问题
+      });
+      if (isClick === true) {
+        that.isClick = false;
+        that
+          .$axios({
+            method: "post",
+            url: "bigservers/farm_likes",
+            data: postData,
+          })
+          .then((res) => {
+            if (res.data === 0) {
+              this.$message({
+                type: "success",
+                message: "点赞成功!",
+                duration: 1500,
+              });
+              that.interflowDat[index].like = "1"; //改变点赞状态
+              that.interflowDat[index].like_num =
+                that.interflowDat[index].like_num + 1; //改变点赞数据
+            } else if (res.data === 1) {
+              this.$notify.error({
+                title: "错误",
+                message: "点赞出错了！！",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+        setTimeout(function () {
+          that.isClick = true;
+        }, 1500);
+      }
+    },
+    // 交流取消点赞
+    noLike(id, index) {
+      var that = this;
+      var isClick = that.isClick;
+      var postData = that.$qs.parse({
+        id: id, //id
+        ret: "off", //点赞
+        req: "title", //主问题
+      });
+      if (isClick === true) {
+        that.isClick = false;
+        that
+          .$axios({
+            method: "post",
+            url: "bigservers/farm_likes",
+            data: postData,
+          })
+          .then((res) => {
+            if (res.data === 0) {
+              that.$message({
+                type: "success",
+                message: "取消点赞成功！",
+                duration: 1500,
+              });
+              that.interflowDat[index].like = "0"; //改变点赞状态
+              that.interflowDat[index].like_num =
+                that.interflowDat[index].like_num - 1; //改变点赞数量
+            } else if (res.data === 1) {
+              that.$notify.error({
+                title: "错误",
+                message: "取消点赞出错了！！",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+        setTimeout(function () {
+          that.isClick = true;
+        }, 1500);
+      }
+    },
+    //点击轮播图片进行放大
+    imgShow(img) {
+      this.amplificationShow = true;
+      this.imgList = img;
+      console.log(img);
+      console.log(111);
+      console.log(this.imgList);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.get_boderHeight();
+    this.initSwiper(); //tab切换交流、鉴定、方案
+    this.interflowData(); //交流列表接口
+  },
 };
 </script>
 <style lang='scss'>
-@import "../../assets/scss/bus.scss";
 @import "../../assets/scss/help.scss";
 //@import url(); 引入公共css类
 </style>

discern/src/components/lianxi/lianxi.vue

@@ -1,39 +1,55 @@
+<!--  -->
 <template>
-  <div class>
-    <el-checkbox
-      :indeterminate="isIndeterminate"
-      v-model="checkAll"
-      @change="handleCheckAllChange"
-    >全选</el-checkbox>
-    <div style="margin: 15px 0;"></div>
-    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
-    </el-checkbox-group>
+  <div class="" style="height: 10rem">
+    <section class="p-10">
+      <h1>{{ screenWidth }} × {{ screenHeight }}</h1>
+    </section>
   </div>
 </template>
+
 <script>
-const cityOptions = ["上海", "北京", "广州", "深圳"];
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
 export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
   data() {
+    //这里存放数据
     return {
-      checkAll: false,
-      checkedCities: ["上海", "北京"],
-      cities: cityOptions,
-      isIndeterminate: true,
+      screenWidth: "",
+      screenHeight: "",
     };
   },
-  methods: {
-    handleCheckAllChange(val) {
-      console.log(val)
-      this.checkedCities = val ? cityOptions : [];
-      this.isIndeterminate = false;
-    },
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.cities.length;
-    },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.screenWidth = document.body.clientWidth;
+    this.screenHeight = document.body.clientHeight;
+    window.onresize = () => {
+      return (() => {
+        this.screenWidth = document.body.clientWidth;
+        this.screenHeight = document.body.clientHeight;
+        console.log(111)
+      })();
+    };
   },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-</script>
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+</style>

discern/src/components/lianxi/lianxiA.vue

@@ -1,176 +1,568 @@
-<template lang="html">
-    <div id="load">
-        <!--存放百度地图容器-->
-        <div id="container"></div>
+<!--  -->
+<template>
+  <div class="mapShow_box" :style="'height:' + fullHeight + 'px'">
+    <!-- 地图加载动画 -->
+    <div
+      v-if="loadinAShow"
+      class="loading_boxA"
+      :style="'height:' + fullHeight + 'px'"
+    >
+      <div class="loading_boxA_div">
+        <img src="../../../static/dongh.gif" alt class="loading_gif" />
+        <div class="loadingA_text">地图加载中，请稍后...</div>
+      </div>
     </div>
+
+    <!-- 百度地图 -->
+    <div class="mapbox">
+      <baidu-map
+        :style="'height:' + fullHeight + 'px'"
+        locationIcon
+        class="map"
+        :double-click-zoom="true"
+        @ready="handler"
+        :center="center"
+        :zoom="150"
+        :map-click="false"
+        :mapStyle="mapStyle"
+        @touchmove="move()"
+        @touchend="end()"
+      >
+        <bm-geolocation
+          :locationIcon="{
+            url: require('../../../static/dingwei.png'),
+            size: { width: 25, height: 40 },
+          }"
+          @locationSuccess="getLoctionSuccess"
+          @locationError="getLoctionError"
+          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+          :showAddressBar="false"
+          :autoLocation="true"
+        ></bm-geolocation>
+        <bml-marker-clusterer :averageCenter="true">
+          <div v-for="(marker, i) of markers" :key="i">
+            <!-- <bm-marker
+              class="dian"
+              :icon="{url: marker.url, size: { width: 30, height: 40 }}"
+              :dragging="false"
+              animation="BMAP_ANIMATION_BOUNCE"
+              :position="{lng: marker.lng, lat: marker.lat}"
+              @click="infoWindowOpen(marker, i)"
+            > -->
+            <bm-marker
+              class="dian"
+              :icon="{ url: marker.url, size: { width: 300, height: 400 } }"
+              :dragging="false"
+              animation="BMAP_ANIMATION_BOUNCE"
+              :position="{ lng: marker.lng, lat: marker.lat }"
+              @click="infoWindowOpen(marker, i)"
+            >
+              <!-- <bm-label
+                @click="details(marker.id, marker.ret)"
+                v-if="nameShow"
+                :content="marker.name"
+                :labelStyle="{
+                  color: 'DarkSeaGreen',
+                  fontSize: '22px',
+                  border: 0,
+                }"
+                :offset="{ width: -35, height: 30 }"
+              /> -->
+
+              <bm-label
+                @close="infoWindowClose(marker)"
+                @open="infoWindowOpen(marker)"
+                v-if="nameShow"
+                :content="1"
+                :labelStyle="{
+                  color: 'DarkSeaGreen',
+                  fontSize: '22px',
+                  border: 0,
+                }"
+                :offset="{ width: -35, height: 30 }"
+              />
+
+              <!-- <bm-label
+                @click="details(marker.id, marker.ret)"
+                :content="marker.name"
+                :labelStyle="{color: 'DarkSeaGreen', fontSize : '22px', border: 0}"
+                :offset="{width: -35, height: 30}"
+                :show="marker.showFlag"
+              /> -->
+            </bm-marker>
+          </div>
+        </bml-marker-clusterer>
+        <!--地图类型-->
+        <bm-map-type
+          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
+          anchor="BMAP_ANCHOR_TOP_LEFT"
+        ></bm-map-type>
+        <!--地图缩放-->
+        <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
+      </baidu-map>
+    </div>
+
+    <!-- 底部导航 -->
+    <bottomNav v-show="botNav"></bottomNav>
+    <!-- 底部导航 -->
+  </div>
 </template>
 
 <script>
+// 按需引入点聚合
+import { BmlMarkerClusterer } from "vue-baidu-map";
+// 引入marker
+import BmMarker from "vue-baidu-map/components/overlays/Marker";
+// import { BmGeolocation, BmNavigation, BmMapType } from "vue-baidu-map";
+import { BmGeolocation, BmNavigation } from "vue-baidu-map";
+import bottomNav from "../bottomNav/bottomNav"; //底部导航栏
+
+const markers = [];
+const carList = [{}];
 export default {
+  // name: "mapShow",
+  name: "Bmaptrace",
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    BmlMarkerClusterer,
+    BmMarker,
+    // 手动定位控件
+    BmGeolocation,
+    // 地图放大缩小控件
+    BmNavigation,
+    // marker控件
+    BmMarker,
+    bottomNav,
+    BmNavigation,
+    // BmMapType,
+  },
   data() {
+    //这里存放数据
+    const self = this;
     return {
-      // 热力图的点数据，lng：点的经度 点的lat纬度 count：点的热力程度
-      points: [
-        { lng: 123.418261, lat: 41.921984, count: 50 },
-        { lng: 123.423332, lat: 41.916532, count: 51 },
-        { lng: 123.419787, lat: 41.930658, count: 15 },
-        { lng: 123.418455, lat: 41.920921, count: 40 },
-        { lng: 123.418843, lat: 41.915516, count: 100 },
-        { lng: 123.42546, lat: 41.918503, count: 6 },
-        { lng: 123.423289, lat: 41.919989, count: 18 },
-        { lng: 123.418162, lat: 41.915051, count: 80 },
-        { lng: 123.422039, lat: 41.91782, count: 11 },
-        { lng: 123.41387, lat: 41.917253, count: 7 },
-        { lng: 123.41773, lat: 41.919426, count: 42 },
-        { lng: 123.421107, lat: 41.916445, count: 4 },
-        { lng: 123.417521, lat: 41.917943, count: 27 },
-        { lng: 123.419812, lat: 41.920836, count: 23 },
-        { lng: 123.420682, lat: 41.91463, count: 60 },
-        { lng: 123.415424, lat: 41.924675, count: 8 },
-        { lng: 123.419242, lat: 41.914509, count: 15 },
-        { lng: 123.422766, lat: 41.921408, count: 25 },
-        { lng: 123.421674, lat: 41.924396, count: 21 },
-        { lng: 123.427268, lat: 41.92267, count: 1 },
-        { lng: 123.417721, lat: 41.920034, count: 51 },
-        { lng: 123.412456, lat: 41.92667, count: 7 },
-        { lng: 123.420432, lat: 41.919114, count: 11 },
-        { lng: 123.425013, lat: 41.921611, count: 35 },
-        { lng: 123.418733, lat: 41.931037, count: 22 },
-        { lng: 123.419336, lat: 41.931134, count: 4 },
-        { lng: 123.413557, lat: 41.923254, count: 5 },
-        { lng: 123.418367, lat: 41.92943, count: 3 },
-        { lng: 123.424312, lat: 41.919621, count: 100 },
-        { lng: 123.423874, lat: 41.919447, count: 87 },
-        { lng: 123.424225, lat: 41.923091, count: 32 },
-        { lng: 123.417801, lat: 41.921854, count: 44 },
-        { lng: 123.417129, lat: 41.928227, count: 21 },
-        { lng: 123.426426, lat: 41.922286, count: 80 },
-        { lng: 123.421597, lat: 41.91948, count: 32 },
-        { lng: 123.423895, lat: 41.920787, count: 26 },
-        { lng: 123.423563, lat: 41.921197, count: 17 },
-        { lng: 123.417982, lat: 41.922547, count: 17 },
-        { lng: 123.426126, lat: 41.921938, count: 25 },
-        { lng: 123.42326, lat: 41.915782, count: 100 },
-        { lng: 123.419239, lat: 41.916759, count: 41 },
-        { lng: 123.417185, lat: 41.929123, count: 11 },
-        { lng: 123.417237, lat: 41.927518, count: 9 },
-        { lng: 123.417784, lat: 41.915754, count: 47 },
-        { lng: 123.420193, lat: 41.917061, count: 52 },
-        { lng: 123.422735, lat: 41.915619, count: 100 },
-        { lng: 123.418495, lat: 41.915958, count: 46 },
-        { lng: 123.416292, lat: 41.931166, count: 9 },
-        { lng: 123.419916, lat: 41.924055, count: 8 },
-        { lng: 123.42189, lat: 41.921308, count: 11 },
-        { lng: 123.413765, lat: 41.929376, count: 3 },
-        { lng: 123.418232, lat: 41.920348, count: 50 },
-        { lng: 123.417554, lat: 41.930511, count: 15 },
-        { lng: 123.418568, lat: 41.918161, count: 23 },
-        { lng: 123.413461, lat: 41.926306, count: 3 },
-        { lng: 123.42232, lat: 41.92161, count: 13 },
-        { lng: 123.4174, lat: 41.928616, count: 6 },
-        { lng: 123.424679, lat: 41.915499, count: 21 },
-        { lng: 123.42171, lat: 41.915738, count: 29 },
-        { lng: 123.417836, lat: 41.916998, count: 99 },
-        { lng: 123.420755, lat: 41.928001, count: 10 },
-        { lng: 123.414077, lat: 41.930655, count: 14 },
-        { lng: 123.426092, lat: 41.922995, count: 16 },
-        { lng: 123.41535, lat: 41.931054, count: 15 },
-        { lng: 123.413022, lat: 41.921895, count: 13 },
-        { lng: 123.415551, lat: 41.913373, count: 17 },
-        { lng: 123.421191, lat: 41.926572, count: 1 },
-        { lng: 123.419612, lat: 41.917119, count: 9 },
-        { lng: 123.418237, lat: 41.921337, count: 54 },
-        { lng: 123.423776, lat: 41.921919, count: 26 },
-        { lng: 123.417694, lat: 41.92536, count: 17 },
-        { lng: 123.415377, lat: 41.914137, count: 19 },
-        { lng: 123.417434, lat: 41.914394, count: 43 },
-        { lng: 123.42588, lat: 41.922622, count: 27 },
-        { lng: 123.418345, lat: 41.919467, count: 8 },
-        { lng: 123.426883, lat: 41.917171, count: 3 },
-        { lng: 123.423877, lat: 41.916659, count: 34 },
-        { lng: 123.415712, lat: 41.915613, count: 14 },
-        { lng: 123.419869, lat: 41.931416, count: 12 },
-        { lng: 123.416956, lat: 41.925377, count: 11 },
-        { lng: 123.42066, lat: 41.925017, count: 38 },
-        { lng: 123.416244, lat: 41.920215, count: 91 },
-        { lng: 123.41929, lat: 41.915908, count: 54 },
-        { lng: 123.422116, lat: 41.919658, count: 21 },
-        { lng: 123.4183, lat: 41.925015, count: 15 },
-        { lng: 123.421969, lat: 41.913527, count: 3 },
-        { lng: 123.422936, lat: 41.921854, count: 24 },
-        { lng: 123.41905, lat: 41.929217, count: 12 },
-        { lng: 123.424579, lat: 41.914987, count: 57 },
-        { lng: 123.42076, lat: 41.915251, count: 70 },
-        { lng: 123.425867, lat: 41.918989, count: 8 },
-      ],
-      map: "", // 保存地图实例
-      centerLng: "123.418261", // 经度
-      centerLat: "41.921984", // 纬度
-      heatmapOverlay: {}, // 热力图覆盖物
+      show: false,
+      botNav: true, //底部导航
+      isShow: true, // 判断账号详情是否有数据或是账号类型是否为游客登录
+      loadinAShow: true, //地图加载动画
+      fullHeight: document.documentElement.clientHeight,
+      drawer: false, //抽屉弹出显示
+      direction: "ltr", //抽屉弹框方向
+      dialogVisible: false, //选择昆虫还是病害识别
+      result: "", //用户点击选中的图片
+      loadingShow: false, //请求等待动画
+      sHow: false, //预览对象
+      redata: [], //用户详情数据
+      dengLV: true, //判断账号类型是游客还是用户；如果是游客那就将更多和搜索框隐藏
+      numData: "", //游客账号的识别体验次数
+      aaa: "1111",
+      //百度地图
+      // 初始化地图中心点
+      center: null,
+      BMap: "",
+      map: "",
+      markers,
+      carList,
+      show: false,
+      redata: [], //后端传来的数据
+      active: false,
+      latA: "",
+      lngA: "",
+      nameShow: false,
+      // mapStyle: {
+      //   styleJson: [
+      //     {
+      //       featureType: "all",
+      //       elementType: "geometry",
+      //       stylers: {
+      //         // hue: "#007fff",
+      //         // hue: "#eb8f16",
+      //         hue: "#68f8bc",
+      //         saturation: 89,
+      //       },
+      //     },
+      //     {
+      //       featureType: "water",
+      //       elementType: "all",
+      //       stylers: {
+      //         color: "#ffffff",
+      //       },
+      //     },
+      //   ],
+      // },
+
+      // 黑色
+      mapStyle: {
+        styleJson: [
+          {
+            featureType: "land",
+            elementType: "geometry",
+            stylers: {
+              color: "#212121",
+            },
+          },
+          {
+            featureType: "building",
+            elementType: "geometry",
+            stylers: {
+              color: "#2b2b2b",
+            },
+          },
+          {
+            featureType: "highway",
+            elementType: "all",
+            stylers: {
+              lightness: -42,
+              saturation: -91,
+            },
+          },
+          {
+            featureType: "arterial",
+            elementType: "geometry",
+            stylers: {
+              lightness: -77,
+              saturation: -94,
+            },
+          },
+          {
+            featureType: "green",
+            elementType: "geometry",
+            stylers: {
+              color: "#1b1b1b",
+            },
+          },
+          {
+            featureType: "water",
+            elementType: "geometry",
+            stylers: {
+              color: "#181818",
+            },
+          },
+          {
+            featureType: "subway",
+            elementType: "geometry.stroke",
+            stylers: {
+              color: "#181818",
+            },
+          },
+          {
+            featureType: "railway",
+            elementType: "geometry",
+            stylers: {
+              lightness: -52,
+            },
+          },
+          {
+            featureType: "all",
+            elementType: "labels.text.stroke",
+            stylers: {
+              color: "#313131",
+            },
+          },
+          {
+            featureType: "all",
+            elementType: "labels.text.fill",
+            stylers: {
+              color: "#8b8787",
+            },
+          },
+          {
+            featureType: "manmade",
+            elementType: "geometry",
+            stylers: {
+              color: "#1b1b1b",
+            },
+          },
+          {
+            featureType: "local",
+            elementType: "geometry",
+            stylers: {
+              lightness: -75,
+              saturation: -91,
+            },
+          },
+          {
+            featureType: "subway",
+            elementType: "geometry",
+            stylers: {
+              lightness: -65,
+            },
+          },
+          {
+            featureType: "railway",
+            elementType: "all",
+            stylers: {
+              lightness: -40,
+            },
+          },
+          {
+            featureType: "boundary",
+            elementType: "geometry",
+            stylers: {
+              color: "#8b8787",
+              weight: "1",
+              lightness: -29,
+            },
+          },
+        ],
+      },
+
+      //设置地图详细信息
+      address: "", //位置详细信息
+      jgNameDialog: false,
+      show: false,
+      postionMap: {
+        //地图坐标
+        lng: 120.211486,
+        lat: 30.256576,
+      },
+      location: "",
+      keyword: "", //搜索框关键词
+      // zoom: 12.8, //放大比例
+      address: "", //位置详细信息
+      add: {
+        siteName: "",
+        site: "",
+        jd: "",
+        wd: "",
+        desce: "",
+        type: "",
+        jgName: "",
+        jgNum: "",
+      },
+      organizationData: [],
+      jgName: "",
+      jgNum: "",
     };
   },
-  methods: {
-    // 创建和初始化地图函数
-    initMap() {
-      this.createMap(); // 创建地图
-      this.initHeatMap(); // 添加热力图覆盖物
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function () {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
     },
-    // 方法 - 创建地图
-    createMap() {
-      // 在百度地图容器中创建地图实例
-      let map = new BMap.Map("container");
-      // 将map变量存储在全局
-      this.map = map;
-      // 设定地图的中心点和坐标
-      let point = new BMap.Point(this.centerLng, this.centerLat);
-      // 设置中心点坐标和地图级别
-      this.map.centerAndZoom(point, 15);
-      // 允许滚轮缩放
-      this.map.enableScrollWheelZoom(point, 15);
-      // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置)
-      var opts = { offset: new BMap.Size(10, 10) };
-      this.map.addControl(new BMap.NavigationControl(opts));
-      // 设置地图默认缩放比例
-      this.map.setZoom(15);
+  },
+  //方法集合
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
     },
-    // 方法 - 添加热力图覆盖物
-    initHeatMap() {
-      this.heatmapOverlay = new BMapLib.HeatmapOverlay({
-        // 热力图的每个点的半径大小
-        radius: BMAP_POINT_SIZE_SMALL * 4,
-        // 热力的透明度0~1
-        opacity: 0.8,
-        // 其中 key 表示插值的位置0~1，value 为颜色值
-        gradient: {
-          0: "rgb(102, 255, 0)",
-          0.5: "rgb(255, 170, 0)",
-          1: "rgb(255, 0, 0)",
+
+    //百度地图事件
+    //地图初始化
+    handler({ BMap, map }) {
+      const _this = this;
+      // 获取自动定位方法
+      var geolocation = new BMap.Geolocation();
+      // 获取逆解析方法实例
+      this.myGeo = new BMap.Geocoder();
+      // 获取自动定位获取的坐标信息
+      geolocation.getCurrentPosition(
+        function (r) {
+          _this.center = {
+            lng: r.point.lng,
+            lat: r.point.lat,
+          };
+          _this.point = {
+            lng: r.point.lng,
+            lat: r.point.lat,
+          };
+          localStorage.setItem("jingdu", _this.point.lng); //存经纬度
+          localStorage.setItem("weidu", _this.point.lat);
+          _this.ceshi(r);
         },
+
+        { enableHighAccuracy: true }
+      );
+      map.enableScrollWheelZoom(true);
+      _this.BMap = BMap;
+      _this.map = map;
+    },
+
+    //点聚合
+    addr() {
+      let bb = this.redata;
+      for (let i = 0; i < bb.length; i++) {
+        const position = {
+          lng: this.redata[i].lng,
+          lat: this.redata[i].lat,
+          url: "./static/insect.png",
+          // url: "./static/55.jpg",
+          name: this.redata[i].name,
+          id: this.redata[i].id,
+          ret: this.redata[i].ret,
+          showFlag: false,
+        };
+        const position1 = {
+          lng: this.redata[i].lng,
+          lat: this.redata[i].lat,
+          url: "./static/insect.png",
+          // url: "./static/55.jpg",
+          name: this.redata[i].name,
+          id: this.redata[i].id,
+          ret: this.redata[i].ret,
+          showFlag: false,
+        };
+        if (i % 2 === 0) {
+          markers.push(position);
+        } else {
+          markers.push(position1);
+        }
+        // console.log(markers)
+      }
+      const carList = [{}];
+    },
+
+    //手动定位成功回调
+    getLoctionSuccess(e) {
+      this.lngA = e.point.lng;
+      this.latA = e.point.lat;
+      localStorage.setItem("jingdu", this.lngA); //存经纬度
+      localStorage.setItem("weidu", this.latA);
+
+      this.show = true;
+      this.postionMap.lng = e.point.lng; //通过  e.point.lng获取经度
+      this.postionMap.lat = e.point.lat; //通过  e.point.lat获取纬度
+      this.add.jd = e.point.lng;
+      this.add.wd = e.point.lat;
+
+      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
+      geocoder.getLocation(e.point, (rs) => {
+        this.add.site = rs.address;
+        //地址描述(string)=
+        // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
+        // console.log(rs.addressComponents);//结构化的地址描述(object)
+        // console.log(rs.addressComponents.province); //省
+        // console.log(rs.addressComponents.city); //城市
+        // console.log(rs.addressComponents.district); //区县
+        // console.log(rs.addressComponents.street); //街道
+        // console.log(rs.addressComponents.streetNumber); //门牌号
+        // console.log(rs.surroundingPois); //附近的POI点(array)
+        // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
+
+        let a = rs.addressComponents.province;
+        let b = rs.addressComponents.city;
+        let c = rs.addressComponents.district;
+        let d = rs.addressComponents.street;
+        let e = rs.addressComponents.streetNumber;
+        localStorage.setItem("dizhi", a + b + c + d + e); //存地址
       });
-      // 清除图层(每次重新调用需要清除上一个覆盖物图层)
-      this.map.clearOverlays();
-      // 添加热力覆盖物
-      this.map.addOverlay(this.heatmapOverlay);
-      this.heatmapOverlay.setDataSet({ data: this.points, max: 100 });
-      // 显示热力图，隐藏为this.heatmapOverlay.hide();
-      this.heatmapOverlay.show();
+      this.loadinAShow = false; //关闭地图加载动画
+    },
+    //手动定位失败回调
+    getLoctionError() {
+      alert("定位失败");
+    },
+
+    // 关闭信息窗口 @close 自带的方法
+    infoWindowClose(marker) {
+      marker.showFlag = false;
+      // this.nameShow = false;
+      console.log("关闭");
+      console.log(marker);
+    },
+
+    infoWindowOpen(marker, i) {
+      // this.nameShow = true;
+      marker.showFlag = true;
+      console.log("开启");
+      console.log(marker);
+      console.log(i);
+    },
+
+    details(id, r) {
+      localStorage.setItem("memoryID", id); //存id
+      localStorage.setItem("memoryDistinction", r); //存ret
+      localStorage.setItem("Point", "2"); //存标识，是从mapShow页面的点聚合效果中进入的详情
+      this.$router.push("/record");
+    },
+
+    //自动定位
+    ceshi(r) {
+      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
+      geocoder.getLocation(r.point, (rs) => {
+        this.add.site = rs.address;
+        let a = rs.addressComponents.province;
+        let b = rs.addressComponents.city;
+        let c = rs.addressComponents.district;
+        let d = rs.addressComponents.street;
+        let e = rs.addressComponents.streetNumber;
+        localStorage.setItem("dizhi", a + b + c + d + e); //存地址
+      });
+      this.loadinAShow = false; //关闭地图加载动画
+    },
+
+    //触摸移动时触发的事件
+    move() {
+      this.nameShow = false;
+      this.botNav = false;
+    },
+
+    end() {
+      this.botNav = true;
     },
   },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.$axios({
+      method: "get",
+      url: "bigservers/insect_map?page=1",
+    })
+      .then((res) => {
+        this.redata = res.data;
+        this.addr();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    // 创建和初始化地图函数
-    this.initMap();
+    this.get_boderHeight();
+    let _this = this;
+    //判断登录账号类型是用户还是游客
+    if (localStorage.getItem("ret") === "tourist") {
+      _this.dengLV = false;
+      _this.isShow = false;
+    } else if (localStorage.getItem("ret") === "user") {
+      _this.dengLV = true;
+      _this.ret = true;
+    }
+    _this
+      .$axios({
+        method: "get",
+        url: "bigservers/see_user",
+      })
+      .then((res) => {
+        _this.redata = res.data[0];
+      })
+      .catch((error) => {
+        this.$message({
+          message: "获取用户信息失败",
+          type: "error",
+          duration: 1000,
+        });
+      });
   },
 };
 </script>
-
-<style lang="less">
-#load {
-  width: 100%;
-  height: 100%;
-}
-#container {
-  width: 100%;
-  height: 100%;
-  border: #ccc solid 1px;
-}
-</style>
+<style lang="scss">
+@import "../../assets/scss/bus.scss";
+@import "../../assets/scss/mapShow.scss";
+</style>

discern/src/components/mapShow/MarkerClusterer_min.js

@@ -0,0 +1,632 @@
+/**
+ * @fileoverview MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。
+ * 主入口类是<a href="symbols/BMapLib.MarkerClusterer.html">MarkerClusterer</a>，
+ * 基于Baidu Map API 1.2。
+ *
+ * @author Baidu Map Api Group 
+ * @version 1.2
+ */
+ 
+
+/** 
+ * @namespace BMap的所有library类均放在BMapLib命名空间下
+ */
+var BMapLib = window.BMapLib = BMapLib || {};
+(function(){
+    
+    /**
+     * 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
+     * @param {Map} map BMap.Map的实例化对象
+     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
+     * @param {Number} gridSize 要扩大的像素值
+     *
+     * @return {BMap.Bounds} 返回扩大后的视图范围。
+     */
+    var getExtendedBounds = function(map, bounds, gridSize){
+        bounds = cutBoundsInRange(bounds);
+        var pixelNE = map.pointToPixel(bounds.getNorthEast());
+        var pixelSW = map.pointToPixel(bounds.getSouthWest()); 
+        pixelNE.x += gridSize;
+        pixelNE.y -= gridSize;
+        pixelSW.x -= gridSize;
+        pixelSW.y += gridSize;
+        var newNE = map.pixelToPoint(pixelNE);
+        var newSW = map.pixelToPoint(pixelSW);
+        return new BMap.Bounds(newSW, newNE);
+    };
+
+    /**
+     * 按照百度地图支持的世界范围对bounds进行边界处理
+     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
+     *
+     * @return {BMap.Bounds} 返回不越界的视图范围
+     */
+    var cutBoundsInRange = function (bounds) {
+        var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
+        var minX = getRange(bounds.getSouthWest().lng, -180, 180);
+        var maxY = getRange(bounds.getNorthEast().lat, -74, 74);
+        var minY = getRange(bounds.getSouthWest().lat, -74, 74);
+        return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY));
+    }; 
+
+    /**
+     * 对单个值进行边界处理。
+     * @param {Number} i 要处理的数值
+     * @param {Number} min 下边界值
+     * @param {Number} max 上边界值
+     * 
+     * @return {Number} 返回不越界的数值
+     */
+    var getRange = function (i, mix, max) {
+        mix && (i = Math.max(i, mix));
+        max && (i = Math.min(i, max));
+        return i;
+    };
+
+    /**
+     * 判断给定的对象是否为数组
+     * @param {Object} source 要测试的对象
+     *
+     * @return {Boolean} 如果是数组返回true，否则返回false
+     */
+    var isArray = function (source) {
+        return '[object Array]' === Object.prototype.toString.call(source);
+    };
+
+    /**
+     * 返回item在source中的索引位置
+     * @param {Object} item 要测试的对象
+     * @param {Array} source 数组
+     *
+     * @return {Number} 如果在数组内，返回索引，否则返回-1
+     */
+    var indexOf = function(item, source){
+        var index = -1;
+        if(isArray(source)){
+            if (source.indexOf) {
+                index = source.indexOf(item);
+            } else {
+                for (var i = 0, m; m = source[i]; i++) {
+                    if (m === item) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+        }        
+        return index;
+    };
+
+    /**
+     *@exports MarkerClusterer as BMapLib.MarkerClusterer
+     */
+    var MarkerClusterer =  
+        /**
+         * MarkerClusterer
+         * @class 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能
+         * @constructor
+         * @param {Map} map 地图的一个实例。
+         * @param {Json Object} options 可选参数，可选项包括：<br />
+         *    markers {Array<Marker>} 要聚合的标记数组<br />
+         *    girdSize {Number} 聚合计算时网格的像素大小，默认60<br />
+         *    maxZoom {Number} 最大的聚合级别，大于该级别就不进行相应的聚合<br />
+         *    minClusterSize {Number} 最小的聚合数量，小于该数量的不能成为一个聚合，默认为2<br />
+         *    isAverangeCenter {Boolean} 聚合点的落脚位置是否是所有聚合在内点的平均值，默认为否，落脚在聚合内的第一个点<br />
+         *    styles {Array<IconStyle>} 自定义聚合后的图标风格，请参考TextIconOverlay类<br />
+         */
+        BMapLib.MarkerClusterer = function(map, options){
+            if (!map){
+                return;
+            }
+            this._map = map;
+            this._markers = [];
+            this._clusters = [];
+            
+            var opts = options || {};
+            this._gridSize = opts["gridSize"] || 60;
+            this._maxZoom = opts["maxZoom"] || 18;
+            this._minClusterSize = opts["minClusterSize"] || 2;           
+            this._isAverageCenter = false;
+            if (opts['isAverageCenter'] != undefined) {
+                this._isAverageCenter = opts['isAverageCenter'];
+            }    
+            this._styles = opts["styles"] || [];
+        
+            var that = this;
+            this._map.addEventListener("zoomend",function(){
+                that._redraw();     
+            });
+    
+            this._map.addEventListener("moveend",function(){
+                 that._redraw();     
+            });
+   
+            var mkrs = opts["markers"];
+            isArray(mkrs) && this.addMarkers(mkrs);
+        };
+
+    /**
+     * 添加要聚合的标记数组。
+     * @param {Array<Marker>} markers 要聚合的标记数组
+     *
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype.addMarkers = function(markers){
+        for(var i = 0, len = markers.length; i <len ; i++){
+            this._pushMarkerTo(markers[i]);
+        }
+        this._createClusters();   
+    };
+
+    /**
+     * 把一个标记添加到要聚合的标记数组中
+     * @param {BMap.Marker} marker 要添加的标记
+     *
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype._pushMarkerTo = function(marker){
+        var index = indexOf(marker, this._markers);
+        if(index === -1){
+            marker.isInCluster = false;
+            this._markers.push(marker);//Marker拖放后enableDragging不做变化，忽略
+        }
+    };
+
+    /**
+     * 添加一个聚合的标记。
+     * @param {BMap.Marker} marker 要聚合的单个标记。
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype.addMarker = function(marker) {
+        this._pushMarkerTo(marker);
+        this._createClusters();
+    };
+
+    /**
+     * 根据所给定的标记，创建聚合点，并遍历所有聚合点
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype._createClusters = function(){
+        var mapBounds = this._map.getBounds();
+        var extendedBounds = getExtendedBounds(this._map, mapBounds, this._gridSize);
+        for(var i = 0, marker; marker = this._markers[i]; i++){
+            if(!marker.isInCluster && extendedBounds.containsPoint(marker.getPosition()) ){ 
+                this._addToClosestCluster(marker);
+            }
+        }   
+        
+        var len = this._markers.length;
+        for (var i = 0; i < len; i++) {
+            if(this._clusters[i]){
+                this._clusters[i].render();
+            }
+        }
+    };
+
+    /**
+     * 根据标记的位置，把它添加到最近的聚合中
+     * @param {BMap.Marker} marker 要进行聚合的单个标记
+     *
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype._addToClosestCluster = function (marker){
+        var distance = 4000000;
+        var clusterToAddTo = null;
+        var position = marker.getPosition();
+        for(var i = 0, cluster; cluster = this._clusters[i]; i++){
+            var center = cluster.getCenter();
+            if(center){
+                var d = this._map.getDistance(center, marker.getPosition());
+                if(d < distance){
+                    distance = d;
+                    clusterToAddTo = cluster;
+                }
+            }
+        }
+    
+        if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)){
+            clusterToAddTo.addMarker(marker);
+        } else {
+            var cluster = new Cluster(this);
+            cluster.addMarker(marker);            
+            this._clusters.push(cluster);
+        }    
+    };
+
+    /**
+     * 清除上一次的聚合的结果
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype._clearLastClusters = function(){
+        for(var i = 0, cluster; cluster = this._clusters[i]; i++){            
+            cluster.remove();
+        }
+        this._clusters = [];//置空Cluster数组
+        this._removeMarkersFromCluster();//把Marker的cluster标记设为false
+    };
+
+    /**
+     * 清除某个聚合中的所有标记
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype._removeMarkersFromCluster = function(){
+        for(var i = 0, marker; marker = this._markers[i]; i++){
+            marker.isInCluster = false;
+        }
+    };
+   
+    /**
+     * 把所有的标记从地图上清除
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype._removeMarkersFromMap = function(){
+        for(var i = 0, marker; marker = this._markers[i]; i++){
+            marker.isInCluster = false;
+            this._map.removeOverlay(marker);       
+        }
+    };
+
+    /**
+     * 删除单个标记
+     * @param {BMap.Marker} marker 需要被删除的marker
+     *
+     * @return {Boolean} 删除成功返回true，否则返回false
+     */
+    MarkerClusterer.prototype._removeMarker = function(marker) {
+        var index = indexOf(marker, this._markers);
+        if (index === -1) {
+            return false;
+        }
+        this._map.removeOverlay(marker);
+        this._markers.splice(index, 1);
+        return true;
+    };
+
+    /**
+     * 删除单个标记
+     * @param {BMap.Marker} marker 需要被删除的marker
+     *
+     * @return {Boolean} 删除成功返回true，否则返回false
+     */
+    MarkerClusterer.prototype.removeMarker = function(marker) {
+        var success = this._removeMarker(marker);
+        if (success) {
+            this._clearLastClusters();
+            this._createClusters();
+        }
+        return success;
+    };
+    
+    /**
+     * 删除一组标记
+     * @param {Array<BMap.Marker>} markers 需要被删除的marker数组
+     *
+     * @return {Boolean} 删除成功返回true，否则返回false
+     */
+    MarkerClusterer.prototype.removeMarkers = function(markers) {
+        var success = false;
+        for (var i = 0; i < markers.length; i++) {
+            var r = this._removeMarker(markers[i]);
+            success = success || r; 
+        }
+
+        if (success) {
+            this._clearLastClusters();
+            this._createClusters();
+        }
+        return success;
+    };
+
+    /**
+     * 从地图上彻底清除所有的标记
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype.clearMarkers = function() {
+        this._clearLastClusters();
+        this._removeMarkersFromMap();
+        this._markers = [];
+    };
+
+    /**
+     * 重新生成，比如改变了属性等
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype._redraw = function () {
+        this._clearLastClusters();
+        this._createClusters();
+    };
+
+    /**
+     * 获取网格大小
+     * @return {Number} 网格大小
+     */
+    MarkerClusterer.prototype.getGridSize = function() {
+        return this._gridSize;
+    };
+
+    /**
+     * 设置网格大小
+     * @param {Number} size 网格大小
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype.setGridSize = function(size) {
+        this._gridSize = size;
+        this._redraw();
+    };
+
+    /**
+     * 获取聚合的最大缩放级别。
+     * @return {Number} 聚合的最大缩放级别。
+     */
+    MarkerClusterer.prototype.getMaxZoom = function() {
+        return this._maxZoom;       
+    };
+
+    /**
+     * 设置聚合的最大缩放级别
+     * @param {Number} maxZoom 聚合的最大缩放级别
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
+        this._maxZoom = maxZoom;
+        this._redraw();
+    };
+
+    /**
+     * 获取聚合的样式风格集合
+     * @return {Array<IconStyle>} 聚合的样式风格集合
+     */
+    MarkerClusterer.prototype.getStyles = function() {
+        return this._styles;
+    };
+
+    /**
+     * 设置聚合的样式风格集合
+     * @param {Array<IconStyle>} styles 样式风格数组
+     * @return 无返回值
+     */
+    MarkerClusterer.prototype.setStyles = function(styles) {
+        this._styles = styles;
+        this._redraw();
+    };
+
+    /**
+     * 获取单个聚合的最小数量。
+     * @return {Number} 单个聚合的最小数量。
+     */
+    MarkerClusterer.prototype.getMinClusterSize = function() {
+        return this._minClusterSize;
+    };
+
+    /**
+     * 设置单个聚合的最小数量。
+     * @param {Number} size 单个聚合的最小数量。
+     * @return 无返回值。
+     */
+    MarkerClusterer.prototype.setMinClusterSize = function(size) {
+        this._minClusterSize = size;
+        this._redraw();
+    };
+
+    /**
+     * 获取单个聚合的落脚点是否是聚合内所有标记的平均中心。
+     * @return {Boolean} true或false。
+     */
+    MarkerClusterer.prototype.isAverageCenter = function() {
+        return this._isAverageCenter;
+    };
+
+    /**
+     * 获取聚合的Map实例。
+     * @return {Map} Map的示例。
+     */
+    MarkerClusterer.prototype.getMap = function() {
+      return this._map;
+    };
+
+    /**
+     * 获取所有的标记数组。
+     * @return {Array<Marker>} 标记数组。
+     */
+    MarkerClusterer.prototype.getMarkers = function() {
+        return this._markers;
+    };
+
+    /**
+     * 获取聚合的总数量。
+     * @return {Number} 聚合的总数量。
+     */
+    MarkerClusterer.prototype.getClustersCount = function() {
+        var count = 0;
+        for(var i = 0, cluster; cluster = this._clusters[i]; i++){
+            cluster.isReal() && count++;     
+        }
+        return count;
+    };
+
+    /**
+     * @ignore
+     * Cluster
+     * @class 表示一个聚合对象，该聚合，包含有N个标记，这N个标记组成的范围，并有予以显示在Map上的TextIconOverlay等。
+     * @constructor
+     * @param {MarkerClusterer} markerClusterer 一个标记聚合器示例。
+     */
+    function Cluster(markerClusterer){
+        this._markerClusterer = markerClusterer;
+        this._map = markerClusterer.getMap();
+        this._minClusterSize = markerClusterer.getMinClusterSize();
+        this._isAverageCenter = markerClusterer.isAverageCenter();
+        this._center = null;//落脚位置
+        this._markers = [];//这个Cluster中所包含的markers
+        this._gridBounds = null;//以中心点为准，向四边扩大gridSize个像素的范围，也即网格范围
+        this._isReal = false; //真的是个聚合
+    
+        this._clusterMarker = new BMapLib.TextIconOverlay(this._center, this._markers.length, {"styles":this._markerClusterer.getStyles()});
+        //this._map.addOverlay(this._clusterMarker);
+    }
+   
+    /**
+     * 向该聚合添加一个标记。
+     * @param {Marker} marker 要添加的标记。
+     * @return 无返回值。
+     */
+    Cluster.prototype.addMarker = function(marker){
+        if(this.isMarkerInCluster(marker)){
+            return false;
+        }//也可用marker.isInCluster判断,外面判断OK，这里基本不会命中
+    
+        if (!this._center){
+            this._center = marker.getPosition();
+            this.updateGridBounds();//
+        } else {
+            if(this._isAverageCenter){
+                var l = this._markers.length + 1;
+                var lat = (this._center.lat * (l - 1) + marker.getPosition().lat) / l;
+                var lng = (this._center.lng * (l - 1) + marker.getPosition().lng) / l;
+                this._center = new BMap.Point(lng, lat);
+                this.updateGridBounds();
+            }//计算新的Center
+        }
+    
+        marker.isInCluster = true;
+        this._markers.push(marker);
+    
+//        var len = this._markers.length;
+//        if(len < this._minClusterSize ){     
+//            this._map.addOverlay(marker);
+//            //this.updateClusterMarker();
+//            return true;
+//        } else if (len === this._minClusterSize) {
+//            for (var i = 0; i < len; i++) {
+//                this._markers[i].getMap() && this._map.removeOverlay(this._markers[i]);
+//            }
+//            
+//        } 
+//        this._map.addOverlay(this._clusterMarker);
+//        this._isReal = true;
+//        this.updateClusterMarker();
+//        return true;
+    };
+    
+    /**
+     * 进行dom操作
+     * @return 无返回值
+     */
+     Cluster.prototype.render = function(){
+         var len = this._markers.length;
+          
+         if (len < this._minClusterSize) {
+              for (var i = 0; i < len; i++) {
+                 this._map.addOverlay(this._markers[i]);
+             }
+         } else {
+             this._map.addOverlay(this._clusterMarker);
+             this._isReal = true;
+             this.updateClusterMarker();
+         }
+     }
+    
+    /**
+     * 判断一个标记是否在该聚合中。
+     * @param {Marker} marker 要判断的标记。
+     * @return {Boolean} true或false。
+     */
+    Cluster.prototype.isMarkerInCluster= function(marker){
+        if (this._markers.indexOf) {
+            return this._markers.indexOf(marker) != -1;
+        } else {
+            for (var i = 0, m; m = this._markers[i]; i++) {
+                if (m === marker) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+
+    /**
+     * 判断一个标记是否在该聚合网格范围中。
+     * @param {Marker} marker 要判断的标记。
+     * @return {Boolean} true或false。
+     */
+    Cluster.prototype.isMarkerInClusterBounds = function(marker) {
+        return this._gridBounds.containsPoint(marker.getPosition());
+    };
+    
+    Cluster.prototype.isReal = function(marker) {
+        return this._isReal;
+    };
+
+    /**
+     * 更新该聚合的网格范围。
+     * @return 无返回值。
+     */
+    Cluster.prototype.updateGridBounds = function() {
+        var bounds = new BMap.Bounds(this._center, this._center);
+        this._gridBounds = getExtendedBounds(this._map, bounds, this._markerClusterer.getGridSize());
+    };
+
+    /**
+     * 更新该聚合的显示样式，也即TextIconOverlay。
+     * @return 无返回值。
+     */
+    Cluster.prototype.updateClusterMarker = function () {
+        if (this._map.getZoom() > this._markerClusterer.getMaxZoom()) {
+            this._clusterMarker && this._map.removeOverlay(this._clusterMarker);
+            for (var i = 0, marker; marker = this._markers[i]; i++) {
+                this._map.addOverlay(marker);
+            }
+            return;
+        }
+
+        if (this._markers.length < this._minClusterSize) {
+            this._clusterMarker.hide();
+            return;
+        }
+
+        this._clusterMarker.setPosition(this._center);
+        
+        this._clusterMarker.setText(this._markers.length);
+
+        var thatMap = this._map;
+        var thatBounds = this.getBounds();
+        this._clusterMarker.addEventListener("click", function(event){
+            thatMap.setViewport(thatBounds);
+        });
+
+    };
+
+    /**
+     * 删除该聚合。
+     * @return 无返回值。
+     */
+    Cluster.prototype.remove = function(){
+        for (var i = 0, m; m = this._markers[i]; i++) {
+                this._markers[i].getMap() && this._map.removeOverlay(this._markers[i]);
+        }//清除散的标记点
+        this._map.removeOverlay(this._clusterMarker);
+        this._markers.length = 0;
+        delete this._markers;
+    }
+
+    /**
+     * 获取该聚合所包含的所有标记的最小外接矩形的范围。
+     * @return {BMap.Bounds} 计算出的范围。
+     */
+    Cluster.prototype.getBounds = function() {
+        var bounds = new BMap.Bounds(this._center,this._center);
+        for (var i = 0, marker; marker = this._markers[i]; i++) {
+            bounds.extend(marker.getPosition());
+        }
+        return bounds;
+    };
+
+    /**
+     * 获取该聚合的落脚点。
+     * @return {BMap.Point} 该聚合的落脚点。
+     */
+    Cluster.prototype.getCenter = function() {
+        return this._center;
+    };
+
+})();

discern/src/components/mapShow/mapShow.vue

@@ -2,7 +2,11 @@
 <template>
   <div class="mapShow_box" :style="'height:' + fullHeight + 'px'">
     <!-- 地图加载动画 -->
-    <div v-if="loadinAShow" class="loading_boxA" :style="'height:' + fullHeight + 'px'">
+    <div
+      v-if="loadinAShow"
+      class="loading_boxA"
+      :style="'height:' + fullHeight + 'px'"
+    >
       <div class="loading_boxA_div">
         <img src="../../../static/dongh.gif" alt class="loading_gif" />
         <div class="loadingA_text">地图加载中，请稍后...</div>
@@ -25,7 +29,10 @@
         @touchend="end()"
       >
         <bm-geolocation
-          :locationIcon="{url: require('../../../static/dingwei.png'), size: {width: 25, height: 40}}"
+          :locationIcon="{
+            url: require('../../../static/dingwei.png'),
+            size: { width: 25, height: 40 },
+          }"
           @locationSuccess="getLoctionSuccess"
           @locationError="getLoctionError"
           anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
@@ -36,18 +43,22 @@
           <div v-for="(marker, i) of markers" :key="i">
             <bm-marker
               class="dian"
-              :icon="{url: marker.url, size: { width: 30, height: 40 }}"
+              :icon="{ url: marker.url, size: { width: 30, height: 40 } }"
               :dragging="false"
               animation="BMAP_ANIMATION_BOUNCE"
-              :position="{lng: marker.lng, lat: marker.lat}"
+              :position="{ lng: marker.lng, lat: marker.lat }"
               @click="infoWindowOpen(marker, i)"
             >
               <bm-label
                 @click="details(marker.id, marker.ret)"
                 v-if="nameShow"
                 :content="marker.name"
-                :labelStyle="{color: 'DarkSeaGreen', fontSize : '22px', border: 0}"
-                :offset="{width: -35, height: 30}"
+                :labelStyle="{
+                  color: 'DarkSeaGreen',
+                  fontSize: '22px',
+                  border: 0,
+                }"
+                :offset="{ width: -35, height: 30 }"
               />
               <!-- <bm-label
                 @click="details(marker.id, marker.ret)"
@@ -144,17 +155,17 @@ export default {
               // hue: "#007fff",
               // hue: "#eb8f16",
               hue: "#68f8bc",
-              saturation: 89
-            }
+              saturation: 89,
+            },
           },
           {
             featureType: "water",
             elementType: "all",
             stylers: {
-              color: "#ffffff"
-            }
-          }
-        ]
+              color: "#ffffff",
+            },
+          },
+        ],
       },
       //设置地图详细信息
       address: "", //位置详细信息
@@ -163,7 +174,7 @@ export default {
       postionMap: {
         //地图坐标
         lng: 120.211486,
-        lat: 30.256576
+        lat: 30.256576,
       },
       location: "",
       keyword: "", //搜索框关键词
@@ -177,11 +188,11 @@ export default {
         desce: "",
         type: "",
         jgName: "",
-        jgNum: ""
+        jgNum: "",
       },
       organizationData: [],
       jgName: "",
-      jgNum: ""
+      jgNum: "",
     };
   },
   //监听属性 类似于data概念
@@ -194,12 +205,12 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
   },
   //方法集合
   methods: {
@@ -224,14 +235,14 @@ export default {
       this.myGeo = new BMap.Geocoder();
       // 获取自动定位获取的坐标信息
       geolocation.getCurrentPosition(
-        function(r) {
+        function (r) {
           _this.center = {
             lng: r.point.lng,
-            lat: r.point.lat
+            lat: r.point.lat,
           };
           _this.point = {
             lng: r.point.lng,
-            lat: r.point.lat
+            lat: r.point.lat,
           };
           localStorage.setItem("jingdu", _this.point.lng); //存经纬度
           localStorage.setItem("weidu", _this.point.lat);
@@ -256,7 +267,7 @@ export default {
           name: this.redata[i].name,
           id: this.redata[i].id,
           ret: this.redata[i].ret,
-          showFlag: false
+          showFlag: false,
         };
         const position1 = {
           lng: this.redata[i].lng,
@@ -265,7 +276,7 @@ export default {
           name: this.redata[i].name,
           id: this.redata[i].id,
           ret: this.redata[i].ret,
-          showFlag: false
+          showFlag: false,
         };
         if (i % 2 === 0) {
           markers.push(position);
@@ -290,7 +301,7 @@ export default {
       this.add.wd = e.point.lat;
 
       let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
-      geocoder.getLocation(e.point, rs => {
+      geocoder.getLocation(e.point, (rs) => {
         this.add.site = rs.address;
         //地址描述(string)=
         // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
@@ -338,7 +349,7 @@ export default {
     //自动定位
     ceshi(r) {
       let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
-      geocoder.getLocation(r.point, rs => {
+      geocoder.getLocation(r.point, (rs) => {
         this.add.site = rs.address;
         let a = rs.addressComponents.province;
         let b = rs.addressComponents.city;
@@ -358,19 +369,19 @@ export default {
 
     end() {
       this.botNav = true;
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.$axios({
       method: "get",
-      url: "bigservers/insect_map?page=1"
+      url: "bigservers/insect_map?page=1",
     })
-      .then(res => {
+      .then((res) => {
         this.redata = res.data;
         this.addr();
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
       });
   },
@@ -389,19 +400,19 @@ export default {
     _this
       .$axios({
         method: "get",
-        url: "bigservers/see_user"
+        url: "bigservers/see_user",
       })
-      .then(res => {
+      .then((res) => {
         _this.redata = res.data[0];
       })
-      .catch(error => {
+      .catch((error) => {
         this.$message({
           message: "获取用户信息失败",
           type: "error",
-          duration: 1000
+          duration: 1000,
         });
       });
-  }
+  },
 };
 </script>
 <style lang="scss">

discern/src/components/person/person.vue

@@ -1,126 +1,189 @@
 <!--  -->
 <template>
-  <div
-    class="person_box"
-    :style="'height:' + fullHeight + 'px'"
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    :modal-append-to-body="false"
-  >
-    <!-- 用户名称、头像和编辑 -->
-    <div class="person_head">
-      <!-- 用户名称、手机号、编辑 -->
-      <div class="person_head_naphbj">
-        <!-- 名称 -->
-        <div class="person_head_name">
-          {{
-            this.redata.user_remark !== null || this.redata.user_remark !== ""
-              ? this.redata.user_remark
-              : this.redata.username
-          }}
-        </div>
-
-        <!-- 手机号 -->
-        <div class="person_head_phone">{{ this.str }}</div>
-
-        <!-- 跳转到编辑页面 -->
-        <div @click="mine()" class="person_head_editor">编辑个人信息>></div>
-      </div>
-      <!-- 用户名称、手机号、编辑 -->
-
-      <!-- 用户头像 -->
-      <div class="person_head_imageBox">
-        <img
-          preview="1"
-          :src="
-            'bigservers/' + this.redata.user_photo + '?' + Math.random() * 10
-          "
-          alt
-          class="person_head_imageBox_img"
-        />
+  <div class="person_box" :style="'height:' + fullHeight + 'px'">
+    <!-- 头部 -->
+    <div class="person_headrBox">
+      <div class="person_divBox">
+        <div class="person_headrBox-tlt">我的</div>
       </div>
-      <!-- 用户头像 -->
     </div>
-    <!-- 用户名称、头像和编辑 -->
 
-    <!-- 采集病虫害-手动录入新建 -->
-    <div class="gatherInsect_box" @click="addData()">
-      <!-- 虫图标 -->
-      <img
-        src="../../assets/image/insectaaa.png"
-        alt
-        class="gatherInsect_box_insect"
-      />
+    <!-- main -->
+    <div class="person_box-main">
+      <!-- 信息列表 -->
+      <ul class="person_box-ul">
+        <!-- 个人 -->
+        <li class="person_box-list">
+          <div class="person_box-list-box1">
+            <img
+              src="../../assets/image/user.jpg"
+              alt=""
+              class="person_box-list-box1-img"
+            />
+            <div class="person_box-list-box1-div">
+              <div class="person_box-list-box1-divName">云飞科技</div>
+              <div class="person_box-list-box1Num">
+                个人积分<span style="color: #000; margin: 0 0 0 0.15rem"
+                  >30</span
+                >
+              </div>
+            </div>
+          </div>
 
-      <!-- 标题 -->
-      <div class="gatherInsect_box_title">手动录入病虫害</div>
+          <div class="person_box-list-box2">
+            <i class="el-icon-date"></i>
+            签到
+          </div>
+        </li>
 
-      <!-- 火图标 -->
-      <img src="../../assets/image/HOT.png" alt class="gatherInsect_box_hot" />
-    </div>
-    <!-- 采集病虫害-手动录入新建 -->
+        <!-- 我的主页 -->
+        <li class="person_box-liHome" @click="myHomepage()">
+          <div class="person_box-liHome-box">
+            <img
+              src="../../assets/image/new/22.png"
+              alt=""
+              class="person_box-liHome-box-img"
+            />
+            <div class="person_box-liHome-box-name">我的主页</div>
+          </div>
+          <img
+            src="../../assets/image/right.png"
+            alt=""
+            class="person_box-liHome-imgRight"
+          />
+        </li>
 
-    <!-- 内容列表 -->
-    <ul class="person_box_ul">
-      <!-- 分享 -->
-      <!-- <li class="person_box_list" @click="share()">
-        <div class="person_box_list_text">扫码下载</div>
-        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
-      </li> -->
+        <!-- 积分 -->
+        <li class="person_box-liIntegral">
+          <ul class="person_box-liHome-ul">
+            <li class="person_box-liHome-list" @click="myIntegral()">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/17.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">我的积分</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
 
-      <!-- 帮助说明 -->
-      <li class="person_box_list" @click="help()">
-        <div class="person_box_list_text">关于我们</div>
-        <img
-          src="../../assets/image/right.png"
-          alt
-          class="person_box_list_image"
-        />
-      </li>
+            <li class="person_box-liHome-list" style="border: 0">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/18.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">积分讲解</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
+          </ul>
+        </li>
 
-      <!-- 意见反馈 -->
-      <!-- <li class="person_box_list" @click="message()">
-        <div class="person_box_list_text">意见反馈</div>
-        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
-      </li> -->
+        <!-- 收藏、跟帖、识别记录 -->
+        <li class="person_box-liIntegral" style="margin: 0.25rem 0 0 0">
+          <ul class="person_box-liHome-ul">
+            <li class="person_box-liHome-list">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/21.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">我的收藏</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
 
-      <!-- 版本更新 -->
-      <li class="person_box_list" @click="versions_update()">
-        <div class="person_box_list_text">版本更新</div>
-        <img
-          src="../../assets/image/right.png"
-          alt
-          class="person_box_list_image"
-        />
-      </li>
+            <li class="person_box-liHome-list">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/15.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">我的跟帖</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
 
-      <!-- 版本更新记录 -->
-      <li class="person_box_list" @click="versions_updateHistory()">
-        <div class="person_box_list_text">版本更新记录</div>
-        <img
-          src="../../assets/image/right.png"
-          alt
-          class="person_box_list_image"
-        />
-      </li>
+            <li class="person_box-liHome-list" style="border: 0">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/19.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">识别记录</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
+          </ul>
+        </li>
 
-      <!-- 退出登录 -->
-      <li class="person_box_list" @click="log_out()">
-        <div class="person_box_list_text">退出登录</div>
-        <img
-          src="../../assets/image/right.png"
-          alt
-          class="person_box_list_image"
-        />
-      </li>
-    </ul>
-    <!-- 内容列表 -->
+        <!-- 系统设置 -->
+        <li class="person_box-liIntegral" style="margin: 0.25rem 0 0 0">
+          <ul class="person_box-liHome-ul">
+            <li class="person_box-liHome-list">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/16.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">关于我们</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
+
+            <li class="person_box-liHome-list" style="border: 0">
+              <div class="person_box-liHome-box">
+                <img
+                  src="../../assets/image/new/20.png"
+                  alt=""
+                  class="person_box-liHome-box-img"
+                />
+                <div class="person_box-liHome-box-name">设置</div>
+              </div>
+              <img
+                src="../../assets/image/right.png"
+                alt=""
+                class="person_box-liHome-imgRight"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
 
     <!-- 底部导航 -->
-    <bottomNav></bottomNav>
-    <!-- 底部导航 -->
+    <bottomNav v-show="botNav"></bottomNav>
   </div>
 </template>
 
@@ -128,18 +191,15 @@
 import bottomNav from "../bottomNav/bottomNav"; //底部导航栏
 
 export default {
+  //import引入的组件需要注入到对象中才能使用
   components: {
-    bottomNav,
+    bottomNav, //底部导航
   },
   data() {
     //这里存放数据
     return {
-      isClick: true, //开关
       fullHeight: document.documentElement.clientHeight,
-      redata: [], //数据
-      str: "", //加密手机号
-      loading: true, //加载动画
-      new: localStorage.getItem("new"), //判断当前是否为最新版本
+      botNav: true, //底部导航
     };
   },
   //监听属性 类似于data概念
@@ -172,266 +232,33 @@ export default {
       };
     },
 
-    //用户信息数据
-    userAjax() {
-      let _this = this;
-      _this
-        .$axios({
-          method: "get",
-          url: "bigservers/see_user ",
-        })
-        .then((res) => {
-          _this.loading = false;
-          _this.redata = res.data[0];
-          _this.phonePad(res.data[0].user_phone);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+    // 进入我的积分界面
+    myIntegral() {
+      var that = this
+      that.$router.push("/share")
     },
-
-    //将手机号码加密
-    phonePad(p) {
-      // 1字符串转化成数组
-      let phoneArr = [...p];
-      // 2.将数组中的4-7位变成*
-      phoneArr.map((res, index) => {
-        if (index > 2 && index < 7) {
-          this.str += "*";
-          // return '*';
-        } else {
-          this.str += res;
-        }
-      });
-      return this.str;
-    },
-
-    //点击跳转到用户基础资料修改页面
-    mine() {
-      this.$router.push("/mine");
-    },
-
-    //点击跳转到手动录入病虫害页面
-    addData() {
-      localStorage.removeItem("add");
-      this.$router.push("/addData");
-    },
-
-    //点击跳转到扫码下载页面
-    share() {
-      this.$router.push("/share");
-    },
-
-    //点击跳转到关于我们页面
-    help() {
-      this.$router.push("/help");
-    },
-
-    //点击跳转到意见反馈页面
-    message() {
-      this.$router.push("/message");
-    },
-
-    //点击版本查看是否有新版
-    versions_update() {
-      let _this = this;
-      var isClick = _this.isClick;
-      if (isClick === true) {
-        _this.isClick = false;
-        _this
-          .$axios({
-            method: "get",
-            url: "bigservers/edition",
-          })
-          .then((res) => {
-            let num = "115";
-            var data = res.data.edition_num;
-            var a = data.replace(/\./g, "");
-            if (num === a) {
-              this.$message({
-                showClose: true,
-                message: "当前已经是最新版本",
-                duration: 1500,
-              });
-            } else if (num < a) {
-              this.$notify({
-                title: "成功",
-                message: "检测到有新版本，需要更新",
-                type: "success",
-                duration: 1500,
-              });
-              const timerA = setInterval(() => {
-                var wait = plus.nativeUI.showWaiting("下载更新中，请勿关闭");
-                //创建一个下载任务
-                var dtask = plus.downloader.createDownload(
-                  "bigservers/down_app/deity.apk",
-                  {
-                    method: "GET",
-                  },
-                  function (d, status) {
-                    if (status == 200) {
-                      console.log("Download success: " + d.filename);
-                      plus.runtime.install(d.filename); // 安装下载的apk文件
-                    } else {
-                      this.$message({
-                        type: "info",
-                        message: "更新失败",
-                      });
-                      //						plus.runtime.install('../H5B2852C7_0925104810.apk'); // 安装下载的apk文件
-                    }
-                    wait.close();
-                  }
-                );
-                //开始下载
-                dtask.start();
-                clearInterval(timerA);
-              }, 1500);
-            }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-        setTimeout(function () {
-          _this.isClick = true;
-        }, 2000);
-      }
-    },
-
-    //点击版本查看是否有新版
-    // versions_updateA() {
-    //   let _this = this;
-    //   _this
-    //     .$axios({
-    //       method: "get",
-    //       url: "bigservers/edition"
-    //     })
-    //     .then(res => {
-    //       let num = "115";
-    //       var data = res.data.edition_num;
-    //       var a = data.replace(/\./g, "");
-    //       if (num == a) {
-    //         this.$message({
-    //           showClose: true,
-    //           message: "当前已经是最新版本",
-    //           duration: 1500
-    //         });
-    //       } else if (num < a) {
-    //         this.$notify({
-    //           title: "成功",
-    //           message: "检测到有新版本，需要更新",
-    //           type: "success",
-    //           duration: 1500
-    //         });
-    //         const timerA = setInterval(() => {
-    //           var wait = plus.nativeUI.showWaiting("下载更新中，请勿关闭");
-    //           //创建一个下载任务
-    //           var dtask = plus.downloader.createDownload(
-    //             "bigservers/down_app/deity.apk",
-    //             {
-    //               method: "GET"
-    //             },
-    //             function(d, status) {
-    //               if (status == 200) {
-    //                 console.log("Download success: " + d.filename);
-    //                 plus.runtime.install(d.filename); // 安装下载的apk文件
-    //               } else {
-    //                 this.$message({
-    //                   type: "info",
-    //                   message: "更新失败"
-    //                 });
-    //                 //						plus.runtime.install('../H5B2852C7_0925104810.apk'); // 安装下载的apk文件
-    //               }
-    //               wait.close();
-    //             }
-    //           );
-    //           //开始下载
-    //           dtask.start();
-    //           clearInterval(timerA);
-    //         }, 1500);
-
-    //         // this.$confirm("检测到有最新版本, 是否更新?", "提示", {
-    //         //   confirmButtonText: "确定",
-    //         //   cancelButtonText: "取消",
-    //         //   type: "warning"
-    //         // })
-    //         //   .then(() => {
-    //         //     window.location.href = "bigservers/down_app/deity.apk";
-    //         //   })
-    //         //   .catch(() => {
-    //         //     this.$message({
-    //         //       type: "info",
-    //         //       message: "取消更新"
-    //         //     });
-    //         //   });
-    //       }
-    //       // console.log(res.data);
-    //     })
-    //     .catch(err => {
-    //       console.log(err);
-    //     });
-    // },
-
-    //点击版本更新历史进行跳转
-    versions_updateHistory() {
-      this.$router.push("/versions_updateHistory");
-    },
-
-    //退出登录
-    log_out() {
-      this.$confirm("即将退出登录, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.$axios({
-            method: "get",
-            url: "bigservers/out_land",
-          })
-            .then((res) => {
-              if (res.data === 0) {
-                this.$message({
-                  type: "success",
-                  message: "退出成功!",
-                });
-                sessionStorage.removeItem("login");
-                localStorage.removeItem("homeIndex");
-                this.$router.replace("/");
-              } else if (res.data === 1) {
-                this.$message({
-                  type: "info",
-                  message: "退出失败，请重试",
-                  duration: 1500,
-                });
-              }
-            })
-            .catch((err) => {
-              this.$message({
-                type: "info",
-                message: "退出失败，请重试",
-                duration: 1500,
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "取消退出",
-            duration: 1500,
-          });
-        });
+  
+    //进入我的主页界面
+    myHomepage() {
+      var that = this
+      that.$router.push("/help")
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.userAjax(); //用户信息数据
-    // this.versions_updateA(); //查看当前是否为最新版本
+    this.get_boderHeight();
   },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='scss'>
-@import "../../assets/scss/bus.scss";
 @import "../../assets/scss/person.scss";
 </style>

discern/src/components/popUp/popUp.vue

@@ -0,0 +1,493 @@
+<!--  -->
+<template>
+  <div class="popUp_box" style="height: 1.5rem; width: 100%">
+    <!-- 点击相机图标弹出选择昆虫或病害窗口 -->
+    <el-dialog
+      :modal-append-to-body="false"
+      title=""
+      :visible.sync="dialogVisible"
+      width="62%"
+      class="home_box-discern-imageTxtBox"
+    >
+      <img
+        src="../../assets/image/558.png"
+        class="home_box-discern-image"
+        alt=""
+      />
+      <div class="home_box-discern-imageTxt">
+        由<span style="color: #59aa21">中科感知</span>提供大数据服务及技术支持
+      </div>
+      <span slot="footer" class="dialog-footer" style="text-align: center; margin: 0 .5rem 0 0;">
+        <!-- 选择昆虫 -->
+        <div class="home_box_div">
+          <!-- 测试 -->
+          <el-button
+            @click="(dialogVisible = false), upload()"
+            class="kunchongBtn"
+            >虫 害</el-button
+          >
+          <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
+          <input
+            class="hiddenInputA"
+            ref="file"
+            type="file"
+            accept="image/*"
+            @change="uploadChange"
+          />
+        </div>
+
+        <!-- 选择病害 -->
+        <div class="home_box_div">
+          <!-- 测试 -->
+          <el-button
+            @click="(dialogVisible = false), uploadA()"
+            class="binghaiBtn"
+            >病 害</el-button
+          >
+          <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
+          <input
+            class="hiddenInputA"
+            ref="file"
+            type="file"
+            accept="image/*"
+            @change="uploadChange"
+          />
+        </div>
+      </span>
+    </el-dialog>
+    <!-- loading -->
+    <div
+      v-if="loadingShow"
+      class="loading_box"
+      :style="'height:' + fullHeight + 'px'"
+    >
+      <div class="loading_box_del" @click="loadingDel()">X</div>
+
+      <div class="loading_box_div">
+        <img src="../../../static/dongh.gif" alt class="loading_gif" />
+        <div class="loading_text">识别中，请稍等...</div>
+      </div>
+    </div>
+
+    <!-- 上传图片 -->
+    <div class="v-simple-cropper">
+      <slot></slot>
+      <div class="v-cropper-layer" ref="layer">
+        <div class="layer-header">
+          <button class="cancel" @click="cancelHandle">取消</button>
+          <button class="confirm" @click="confirmHandle">裁剪</button>
+        </div>
+        <img ref="cropperImg" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.min.css";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      //上传
+      cropper: null,
+      filename: "",
+      dialogVisible: true, //选择昆虫还是病害识别
+      sHow: false, //预览对象
+      fileA: "", //上传图片
+      loadingShow: false, //请求等待动画
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 初始化裁剪插件
+    init() {
+      let cropperImg = this.$refs["cropperImg"];
+      this.cropper = new Cropper(cropperImg, {
+        viewMode: 1,
+        dragMode: "none",
+        initialAspectRatio: 0,
+        aspectRatio: 0,
+        preview: ".before",
+        background: false,
+        autoCropArea: 0.6,
+        zoomOnWheel: false,
+      });
+    },
+    // 点击上传按钮-昆虫
+    upload() {
+      var _this = this;
+      localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
+      localStorage.removeItem("plant"); //删除病害标识
+      //删除测试
+      localStorage.removeItem("ba64dataA");
+      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
+      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
+      localStorage.removeItem("memoryID");
+      localStorage.removeItem("memoryDistinction");
+      localStorage.removeItem("collectID");
+      localStorage.removeItem("collectDistinction");
+      localStorage.removeItem("seek_dataID");
+      localStorage.removeItem("Point");
+      this.$refs["file"].click();
+    },
+
+    // 点击上传按钮-病害
+    uploadA() {
+      var _this = this;
+      localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
+      localStorage.removeItem("insect"); //删除昆虫标识
+      //删除测试
+      localStorage.removeItem("ba64dataA");
+      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
+      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
+      localStorage.removeItem("memoryID");
+      localStorage.removeItem("memoryDistinction");
+      localStorage.removeItem("collectID");
+      localStorage.removeItem("collectDistinction");
+      localStorage.removeItem("seek_dataID");
+      localStorage.removeItem("Point");
+      this.$refs["file"].click();
+    },
+    // 选择上传文件
+    uploadChange(e) {
+      let file = e.target.files[0];
+      this.fileA = file; //传递给data中
+      this.filename = file["name"];
+      let URL = window.URL || window.webkitURL;
+      this.$refs["layer"].style.display = "block";
+      this.cropper.replace(URL.createObjectURL(file));
+    },
+    // 取消上传
+    cancelHandle() {
+      this.cropper.reset();
+      this.$refs["layer"].style.display = "none";
+      this.$refs["file"].value = "";
+    },
+    //上传
+    confirmHandle() {
+      let _this = this;
+      this.$refs["layer"].style.display = "none";
+      this.loadingShow = true;
+      var fileA = this.cropper
+        .getCroppedCanvas({
+          imageSmoothingQuality: "high",
+        })
+        .toDataURL("image/jpeg");
+      localStorage.setItem("ba64dataA", fileA);
+      let blob = _this.dataURLtoFile(fileA, "image/jpeg"); //将base64转换为blob
+      let data = _this.submitPic(blob); //再将blob转换为file
+      var img = data.get("file");
+
+      // 判断用户选择的病害还是昆虫;
+      if (localStorage.getItem("insect") !== null) {
+        //虫害
+        let form = new FormData();
+        form.append("imageFile", img);
+        console.log(form.get("imageFile"));
+
+        form.append("imageType", "1");
+        form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
+        form.append("username", "yunfei");
+        form.append("gis", "118.279643#31.221456");
+        this.$axios({
+          method: "post",
+          url: "academysciences/recognizationSys/api/recognization",
+          anync: true,
+          data: form,
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+          .then((res) => {
+            self.botNav = true; //隐藏底部导航
+            if (
+              res.data.msg === "识别失败_！" ||
+              res.data.msg === "" ||
+              res.data.data === null
+            ) {
+              this.$message({
+                type: "error",
+                message: "识别失败!",
+              });
+
+              this.$router.push({
+                name: "show",
+                params: { data: form.get("imageFile") },
+              });
+              localStorage.setItem("recordID", "1");
+              this.loadingShow = false;
+            } else {
+              this.$notify({
+                title: "成功",
+                message: "识别成功",
+                type: "success",
+              });
+              localStorage.setItem(
+                "axiosData",
+                JSON.stringify(res.data.data[0])
+              );
+              this.$router.push({
+                name: "show",
+                params: { data: form.get("imageFile") },
+              });
+              localStorage.setItem("recordID", "1");
+              // console.log(form.get("imageFile"));
+            }
+            this.$router.push({
+              name: "show",
+              params: { data: form.get("imageFile") },
+            });
+            localStorage.setItem("recordID", "1");
+            this.loadingShow = false;
+            this.$refs["file"].value = "";
+          })
+          .catch((error) => {
+            // window.clearInterval(timer);  //销毁计时器
+            this.$message({
+              type: "error",
+              message: "识别失败!",
+            });
+            this.$router.push({
+              name: "show",
+              params: { data: form.get("imageFile") },
+            });
+            localStorage.setItem("recordID", "1");
+            this.loadingShow = false;
+            this.$refs["file"].value = "";
+          });
+      } else if (localStorage.getItem("plant") !== null) {
+        //病害
+        let form = new FormData();
+        form.append("imageFile", img);
+        form.append("imageType", "2");
+        form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
+        form.append("username", "yunfei");
+        form.append("gis", "118.279643#31.221456");
+        this.$axios({
+          method: "post",
+          url: "academysciences/recognizationSys/api/recognization",
+          anync: true,
+          data: form,
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+          .then((res) => {
+            _this.botNav = true; //隐藏底部导航
+            if (
+              res.data.msg === "识别失败_! " ||
+              res.data.msg === "" ||
+              res.data.data === null
+            ) {
+              this.$message({
+                type: "error",
+                message: "识别失败!",
+              });
+              _this.botNav = true; //隐藏底部导航
+
+              this.$router.push({
+                name: "show",
+                params: { data: form.get("imageFile") },
+              });
+              localStorage.setItem("recordID", "1");
+            } else {
+              this.$notify({
+                title: "成功",
+                message: "识别成功",
+                type: "success",
+              });
+              localStorage.setItem(
+                "axiosData",
+                JSON.stringify(res.data.data[0])
+              );
+            }
+            this.$router.push({
+              name: "show",
+              params: { data: form.get("imageFile") },
+            });
+            localStorage.setItem("recordID", "1");
+            this.loadingShow = false;
+            this.$refs["file"].value = "";
+          })
+          .catch((error) => {
+            this.$message({
+              type: "error",
+              message: "识别失败aaaaaaa!",
+            });
+            this.$router.push({
+              name: "show",
+              params: { data: form.get("imageFile") },
+            });
+            localStorage.setItem("recordID", "1");
+            this.loadingShow = false;
+            this.$refs["file"].value = "";
+          });
+      }
+    },
+
+    //base64转为file类型
+    //将base64转换为blob
+    dataURLtoFile(dataURI, type) {
+      let binary = atob(dataURI.split(",")[1]);
+      let array = [];
+      for (let i = 0; i < binary.length; i++) {
+        array.push(binary.charCodeAt(i));
+      }
+      return new Blob([new Uint8Array(array)], { type: type });
+    },
+    // 图片提交事件。把bold格式转为formData格式进行提交。
+    submitPic(fileData) {
+      console.log(fileData);
+      let form = new FormData();
+      // console.log(form)
+      let fileOfBlob = new File([fileData], this.fileA.name); // 重命名了
+      console.log(this.fileA.name);
+      form.append("file", fileOfBlob);
+      return form;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.init(); //图片剪切
+  },
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+// 识别弹框样式
+.home_box-discern-imageTxtBox {
+  margin: 2.5rem 0 0 0;
+}
+.home_box-discern-imageTxtBox .el-dialog .el-dialog__body {
+  margin: 2rem 0 -1rem 0;
+}
+.home_box-discern-image {
+  width: 100%;
+  position: absolute;
+  //   top: -2.8rem;
+  top: -4rem;
+  left: 0;
+}
+.home_box-discern-imageTxt {
+  margin: 0.5rem 0 0 0;
+}
+.home_box_div {
+  display: inline-block;
+}
+//昆虫按钮
+.kunchongBtn span {
+  margin: 0;
+}
+
+//病害按钮
+.binghaiBtn span {
+  margin: 0;
+}
+
+// 上传文件input
+.home_box .hiddenInput,
+.home_box .hiddenInputA {
+  width: 8rem;
+  position: absolute;
+  left: 0;
+  bottom: 1rem;
+  display: none;
+}
+.home_box_div .hiddenInputA {
+  width: 8rem;
+  position: absolute;
+  left: 0;
+  bottom: 1rem;
+  display: none;
+}
+
+// loading
+.loading_box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 25;
+}
+.loading_box_del {
+  font-size: 30px;
+  color: #fff;
+  float: left;
+  margin: 0.5rem 0 0 0.5rem;
+}
+
+.loading_box_div {
+  margin: 60% 0 0 0;
+}
+
+.loading_text {
+  color: #f3f3f3;
+  font-size: 25px;
+}
+// .el-dialog__footer {
+//   text-align: center !important;
+// }
+// loading动画
+.loading_gif {
+  margin: 0 auto;
+  width: 100%;
+}
+
+// 裁剪框
+.v-simple-cropper {
+  .file {
+    display: none;
+  }
+  .v-cropper-layer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 99999;
+    display: none;
+    .layer-header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 99999;
+      background: #fff;
+      width: 100%;
+      height: 0.8rem;
+      padding: 0 0.2rem;
+      box-sizing: border-box;
+    }
+    .cancel,
+    .confirm {
+      line-height: 0.8rem;
+      font-size: 0.28rem;
+      background: inherit;
+      border: 0;
+      outline: 0;
+      float: left;
+    }
+    .confirm {
+      float: right;
+    }
+    img {
+      position: inherit !important;
+      border-radius: inherit !important;
+      float: inherit !important;
+    }
+  }
+}
+</style>

discern/src/components/record/record.vue

@@ -1,83 +1,84 @@
 <!--  -->
 <template>
-  <div class="record_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
+  <div
+    class="record_box"
+    :style="'height:' + fullHeight + 'px'"
+    v-loading="loading"
+  >
     <!-- 头部 -->
-    <div class="record_box_head">
-      <!-- 返回图标 -->
-      <div class="head_div" @click="goBack()">
-        <img src="../../assets/image/return.png" alt class="head_div_img" />
+    <div class="record_headrBox">
+      <div class="record_divBox">
+        <div class="record_headrBox-tlt">详情</div>
+        <img
+          src="../../assets/image/new/14.png"
+          alt
+          class="record_headrBox-img"
+        />
       </div>
+    </div>
 
-      <!-- 标题 -->
-      <div class="head_title">
-        <span class="head_title_text">昆虫档案</span>
+    <!-- 主内容 -->
+    <div class="record_box_main">
+      <!-- 图片 -->
+      <div class="record_box_imgBox">
+        <img
+          src="../../assets/image/timg3.jpg"
+          alt=""
+          class="record_box_imgBox-img"
+        />
       </div>
 
-      <!-- 收藏 -->
-      <div class v-show="yincengShow">
-        <div class="head_collect" v-show="touristShow">
-          <img
-            v-if="collectShow"
-            @click="collect()"
-            src="../../../static/pointed.png"
-            alt
-            class="collect_img"
-          />
-          <img
-            v-else
-            @click="collectFalse()"
-            src="../../../static/collect.png"
-            alt
-            class="collect_img"
-          />
+      <div class="record_box_divBox">
+        <div class="record_box_divBox_div1">
+          <div class="record_box_divBox_div1_name1">棉铃虫</div>
+          <div class="record_box_divBox_div1_name2">(棉铃虫夜蛾)</div>
+        </div>
+        <div class="record_box_divBox_div2">
+          <div class="record_box_divBox_div2_name1">鳞翅目</div>
+          <div class="record_box_divBox_div2_name2">夜蛾科</div>
         </div>
       </div>
-    </div>
-
-    <!-- 昆虫病害名 -->
-    <div class="record_name">
-      <div class="record_name_text">{{this.redata.name}}</div>
-    </div>
 
-    <!-- 后端传来的图片 -->
-    <div class="record_axios_div">
-      <img v-if="imgShow"  preview="1" :src="this.redata.img_urls" alt class="record_axios_img" />
-      <!-- <el-image v-else class="record_axios_img">222</el-image> -->
-      <img v-else src="../../assets/image/noimage.png" alt class="record_axios_img" />
-    </div>
-
-    <!-- 病虫害详情 -->
-    <div class="details_box" v-if="detailShow">
-      <!-- 详情标题 -->
-      <div class="details_tilte_box">
-        <div class="details_tilte">
-          <div class="details_tilte_text">小百科</div>
+      <!-- 简介 -->
+      <div class="record_box_divBox1">
+        <div class="record_box_divBox1-box">
+          <h5 class="record_box_divBox1-box-tlt">简介</h5>
+          <div class="record_box_divBox1-box-mainTxt">
+            棉铃虫在我国各棉区的年发生代数和主要为害世代各不相同。在辽河流域棉区和新疆大部分棉区年发生3代，以第2代为害为主；在黄河流域棉区和部分长江流域棉区年发生4代，以第2代最重，3代次之；在长江流域大部分棉区每年发生5代，以第3、4代最重；在北纬25°以南地区每年可发生6~7代，以第3、4、5代为害严重。各地一般均以蛹在土中越冬。
+          </div>
         </div>
       </div>
 
-      <div class="address_box">
-        <!-- 时间 -->
-        <div class="addressA" v-show="dase_listShow">
-          <img src="../../assets/image/time.png" alt class="address_imgA" />
-          {{ this.redata.time }}
+      <!-- 分布范围 -->
+      <div class="record_box_divBox1">
+        <div class="record_box_divBox1-box">
+          <h5 class="record_box_divBox1-box-tlt">分布范围</h5>
+          <div class="record_box_divBox1-box-mainTxt">
+            棉铃虫在我国各棉区的年发生代数和主要为害世代各不相同。在辽河流域棉区和新疆大部分棉区年发生3代，以第2代为害为主；在黄河流域棉区和部分长江流域棉区年发生4代，以第2代最重，3代次之；在长江流域大部分棉区每年发生5代，以第3、4代最重；在北纬25°以南地区每年可发生6~7代，以第3、4、5代为害严重。各地一般均以蛹在土中越冬。
+          </div>
         </div>
+      </div>
 
-        <!-- 地址 -->
-        <div class="address" v-show="dase_listShow">
-          <img src="../../assets/image/ding.png" alt class="address_img" />
-          {{ this.redata.addr }}
+      <!-- 形态特征 -->
+      <div class="record_box_divBox1">
+        <div class="record_box_divBox1-box">
+          <h5 class="record_box_divBox1-box-tlt">形态特征</h5>
+          <div class="record_box_divBox1-box-mainTxt">
+            棉铃虫在我国各棉区的年发生代数和主要为害世代各不相同。在辽河流域棉区和新疆大部分棉区年发生3代，以第2代为害为主；在黄河流域棉区和部分长江流域棉区年发生4代，以第2代最重，3代次之；在长江流域大部分棉区每年发生5代，以第3、4代最重；在北纬25°以南地区每年可发生6~7代，以第3、4、5代为害严重。各地一般均以蛹在土中越冬。
+          </div>
         </div>
       </div>
 
-      <!-- 详情 -->
-      <div class="detail_text_box">
-        <div class="detail_text" v-for="item in this.msg" :key="item">{{ item }}</div>
+      <!-- 生活习性 -->
+      <div class="record_box_divBox1">
+        <div class="record_box_divBox1-box">
+          <h5 class="record_box_divBox1-box-tlt">生活习性</h5>
+          <div class="record_box_divBox1-box-mainTxt">
+            棉铃虫在我国各棉区的年发生代数和主要为害世代各不相同。在辽河流域棉区和新疆大部分棉区年发生3代，以第2代为害为主；在黄河流域棉区和部分长江流域棉区年发生4代，以第2代最重，3代次之；在长江流域大部分棉区每年发生5代，以第3、4代最重；在北纬25°以南地区每年可发生6~7代，以第3、4、5代为害严重。各地一般均以蛹在土中越冬。
+          </div>
+        </div>
       </div>
-    </div>
 
-    <div class="cry_box" v-else>
-      <img src="../../assets/image/cry.png" alt class="cry_img" />
-      <div class="cry_text">暂无此类病虫害的资料;努力更新中...</div>
     </div>
   </div>
 </template>
@@ -88,24 +89,9 @@ export default {
   components: {},
   data() {
     return {
-      navBarFixed: false, //吸顶效果
-      isClick: true, //收藏
       fullHeight: document.documentElement.clientHeight,
-      redata: "", //本地的axios数据
-      msg: "",
-      imgShow: true, //判断后端传来的图片是否为空
-      detailShow: true, //判断后端传来的详情文字是否为空
-      collectShow: true, // 判断是否点击了收藏
-      touristShow: true, //判断当前账号是否是游客账号
-      dase_listShow: true, //判断当前页面是否从搜索列表中进入的
-      yincengShow: true, //当前数据是否从搜索页面进入
-      loading: true //加载
     };
   },
-  beforeRouteLeave(to, from, next) {
-    to.meta.keepAlive = true;
-    next();
-  },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
@@ -116,58 +102,15 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
   },
   //方法集合
   methods: {
-    //返回上一页
-    goBack() {
-      let _this = this;
-      if (
-        localStorage.getItem("memoryID") !== null &&
-        localStorage.getItem("Point") === null
-      ) {
-        // _this.$router.push("/memory");
-        _this.$router.replace("/memory");
-        localStorage.removeItem("memoryID");
-        localStorage.removeItem("memoryDistinction");
-      } else if (localStorage.getItem("collectID") !== null) {
-        // _this.$router.push("/collect");
-        _this.$router.replace("/collect");
-        localStorage.removeItem("collectID");
-        localStorage.removeItem("collectDistinction");
-      } else if (localStorage.getItem("seek_dataID") !== null) {
-        localStorage.removeItem("seek_dataID");
-        // _this.$router.push("/seek_data");
-        _this.$router.replace("/seek_data");
-      } else if (
-        localStorage.getItem("memoryID") === null &&
-        localStorage.getItem("collectID") === null &&
-        localStorage.getItem("showID") === "1"
-      ) {
-        localStorage.removeItem("showID");
-        // _this.$router.push("/show");
-        _this.$router.replace("/show");
-      } else if (
-        localStorage.getItem("memoryID") !== null &&
-        localStorage.getItem("Point") === "2"
-      ) {
-        _this.$router.replace("/mapShow");
-        localStorage.removeItem("memoryID");
-        localStorage.removeItem("Point");
-        localStorage.removeItem("memoryDistinction");
-        location.reload();
-      } else {
-        localStorage.removeItem("axiosData");
-        _this.$router.replace("/home");
-      }
-    },
-
     //动态获取浏览器高度
     get_boderHeight() {
       const that = this;
@@ -178,343 +121,12 @@ export default {
         })();
       };
     },
-
-    // 切割详情字符串数据并渲染
-    apply() {
-      let _this = this;
-      let Adata = _this.redata.prevention;
-      var a = Adata.replace(/]/g, "：");
-      let Bdata = new Array();
-      Bdata = a.split("[");
-      _this.msg = Bdata;
-    },
-
-    //点击收藏事件
-    collect() {
-      let _this = this;
-      var distinction = this.redata.ret;
-      // 判断是否从识别记录中进去的
-      if (localStorage.getItem("memoryID") !== null) {
-        var postData = _this.$qs.parse({
-          // name: _this.redata.name,
-          id: localStorage.getItem("memoryID"),
-          ret: _this.redata.ret,
-          off: "1"
-        });
-        // 判断是否从我的收藏中进去的
-      } else if (localStorage.getItem("collectID") !== null) {
-        var postData = _this.$qs.parse({
-          id: localStorage.getItem("collectID"),
-          ret: distinction,
-          off: "1"
-        });
-      }
-      var isClick = _this.isClick;
-      if (isClick === true) {
-        _this.isClick = false;
-        _this
-          .$axios({
-            method: "post",
-            url: "bigservers/collect",
-            data: postData,
-            headers: {
-              "Content-Type": "multipart/form-data"
-            }
-          })
-          .then(res => {
-            if (res.data === 0) {
-              this.$message({
-                message: "收藏成功！",
-                type: "success",
-                duration: 1000
-              });
-              _this.collectShow = false;
-            } else if (res.data === 1) {
-              this.$message({
-                message: "已收藏过,不可重复！！",
-                type: "warning",
-                duration: 1000
-              });
-            }
-          })
-          .catch(error => {
-            this.$message({
-              message: "收藏失败！",
-              type: "error",
-              duration: 1000
-            });
-          });
-        setTimeout(function() {
-          _this.isClick = true;
-        });
-      }
-    },
-    //取消收藏事件
-    collectFalse() {
-      let _this = this;
-      var distinction = this.redata.ret;
-
-      // 判断是否从识别记录中进去的
-      if (localStorage.getItem("memoryID") !== null) {
-        var postData = _this.$qs.parse({
-          // name: _this.redata.name,
-          id: localStorage.getItem("memoryID"),
-          ret: _this.redata.ret,
-          off: "2"
-        });
-      } else if (localStorage.getItem("collectID") !== null) {
-        var postData = _this.$qs.parse({
-          id: localStorage.getItem("collectID"),
-          ret: distinction,
-          off: "2"
-        });
-      }
-      var isClick = _this.isClick;
-      if (isClick === true) {
-        _this.isClick = false;
-        _this
-          .$axios({
-            method: "post",
-            url: "bigservers/collect",
-            data: postData,
-            headers: {
-              "Content-Type": "multipart/form-data"
-            }
-          })
-          .then(res => {
-            if (res.data === 2) {
-              this.$message({
-                message: "取消收藏成功！",
-                type: "success",
-                duration: 1000
-              });
-              _this.collectShow = true;
-            }
-          })
-          .catch(error => {
-            this.$message({
-              message: "取消收藏失败！",
-              type: "error",
-              duration: 1000
-            });
-          });
-        setTimeout(function() {
-          _this.isClick = true;
-        });
-      }
-    }
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    let _this = this;
-
-    //判断数据是否从home的点聚合效果中进入
-    if (localStorage.getItem("Point") === "2") {
-      _this.touristShow = false;
-    } else if (localStorage.getItem("Point") === null) {
-      _this.touristShow = true;
-    }
-
-    if (localStorage.getItem("memoryID") === null) {
-      if (localStorage.getItem("collectID") !== null) {
-        let postData = _this.$qs.parse({
-          ret: localStorage.getItem("collectDistinction"),
-          id: localStorage.getItem("collectID")
-        });
-        _this
-          .$axios({
-            method: "post",
-            url: "bigservers/see_details",
-            data: postData,
-            headers: {
-              "Content-Type": "multipart/form-data"
-            }
-          })
-          .then(res => {
-            _this.redata = res.data[0];
-            //判断后端数据中的详情是否为空-收藏
-            if (
-              localStorage.getItem("collectID") !== null &&
-              (res.data[0].prevention === "[防治方法] null" ||
-                res.data[0].prevention === "" ||
-                res.data[0].prevention === null)
-            ) {
-              _this.detailShow = false;
-            } else {
-              _this.detailShow = true;
-            }
-            //判断后端数据中的img是否为空-收藏
-            if (res.data[0].img_urls === "") {
-              _this.imgShow = false;
-            } else {
-              _this.imgShow = true;
-            }
-            //判断后端数据是否收藏-收藏
-            if (res.data[0].store === "1") {
-              _this.collectShow = false;
-            } else if (res.data[0].store === "0") {
-              _this.collectShow = true;
-            }
-            _this.loading = false;
-            _this.apply();
-          })
-          .catch(err => {
-            alert("失败");
-          });
-      } else if (
-        localStorage.getItem("collectID") === null &&
-        localStorage.getItem("axiosData") !== null
-      ) {
-        _this.redata = JSON.parse(localStorage.getItem("axiosData"));
-        _this.dase_listShow = false;
-        _this.yincengShow = false;
-        _this.apply();
-      } else if (localStorage.getItem("seek_dataID") !== null) {
-        let postData = _this.$qs.parse({
-          id: localStorage.getItem("seek_dataID")
-        });
-        _this
-          .$axios({
-            method: "post",
-            url: "bigservers/dase_list",
-            data: postData,
-            headers: {
-              "Content-Type": "multipart/form-data"
-            }
-          })
-          .then(res => {
-            _this.redata = res.data[0];
-            //判断后端数据中的详情是否为空-识别记录
-            if (
-              localStorage.getItem("seek_dataID") !== null &&
-              (res.data[0].prevention === "[防治方法] null" ||
-                res.data[0].prevention === "" ||
-                res.data[0].prevention === null)
-            ) {
-              _this.detailShow = false;
-            } else {
-              _this.detailShow = true;
-            }
-
-            //判断后端数据中的img是否为空-识别记录
-            if (res.data[0].img_urls === "") {
-              _this.imgShow = false;
-            } else {
-              _this.imgShow = true;
-            }
-            _this.loading = false;
-            _this.apply();
-          })
-          .catch(error => {
-            alert("失败");
-          });
-      }
-    } else if (localStorage.getItem("memoryID") !== null) {
-      let postData = _this.$qs.parse({
-        ret: localStorage.getItem("memoryDistinction"),
-        id: localStorage.getItem("memoryID")
-      });
-      _this
-        .$axios({
-          method: "post",
-          url: "bigservers/see_details",
-          data: postData,
-          headers: {
-            "Content-Type": "multipart/form-data"
-          }
-        })
-        .then(res => {
-          _this.redata = res.data[0];
-          //判断后端数据中的详情是否为空-识别记录
-          if (
-            localStorage.getItem("memoryID") !== null &&
-            (res.data[0].prevention === "[防治方法] null" ||
-              res.data[0].prevention === "" ||
-              res.data[0].prevention === null)
-          ) {
-            _this.detailShow = false;
-          } else {
-            _this.detailShow = true;
-          }
-
-          //判断后端数据中的img是否为空-识别记录
-          if (res.data[0].img_urls === "") {
-            _this.imgShow = false;
-          } else {
-            _this.imgShow = true;
-          }
-
-          //判断后端数据是否收藏-收藏
-          if (res.data[0].store === "1") {
-            _this.collectShow = false;
-          } else if (res.data[0].store === "0") {
-            _this.collectShow = true;
-          }
-          _this.loading = false;
-          _this.apply();
-        })
-        .catch(err => {
-          alert("失败");
-        });
-    }
-
-    // 判断后端数据中的img是否为空
-    if (_this.redata.img_urls === "") {
-      _this.imgShow = false;
-    } else {
-      _this.imgShow = true;
-    }
-
-    // 判断后端数据中的详情是否为空
-    if (_this.redata.prevention === "[防治方法] null") {
-      _this.detailShow = false;
-    } else {
-      _this.detailShow = true;
-    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
     _this.get_boderHeight();
-
-    //判断当前数据是否从识别成功中过来
-
-    //判断账号是否是游客
-    if (localStorage.getItem("ret") === "tourist") {
-      _this.dase_listShow = false;
-      _this.yincengShow = false;
-      _this.loading = false;
-    } else if (localStorage.getItem("ret") === "user") {
-      _this.dase_listShow = true;
-      _this.yincengShow = true;
-      _this.loading = false;
-    }
-
-    //判断当前数据是否从识别成功中过来
-    if (localStorage.getItem("axiosData") !== null) {
-      _this.dase_listShow = false;
-      _this.yincengShow = false;
-      _this.loading = false;
-    } else if (localStorage.getItem("axiosData") === null) {
-      _this.dase_listShow = true;
-      _this.yincengShow = true;
-      _this.loading = false;
-    }
-
-    //判断数据是否从搜索列表中进入
-    if (localStorage.getItem("seek_dataID") !== null) {
-      this.dase_listShow = false;
-      this.yincengShow = false;
-      _this.loading = false;
-    } else if (
-      localStorage.getItem("seek_dataID") === null &&
-      localStorage.getItem("axiosData") === null
-    ) {
-      this.dase_listShow = true;
-      this.yincengShow = true;
-      _this.loading = false;
-    }
-  }
+  },
 };
 </script>
 <style lang='scss'>

discern/src/components/repository/repository.vue

@@ -1,224 +1,185 @@
 <!--  -->
 <template>
-  <div
-    class="repository_box"
-    :style="'height:' + fullHeight + 'px'"
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    :modal-append-to-body="false"
-  >
+  <div class="repository_box" :style="'height:' + fullHeight + 'px'">
     <!-- 头部 -->
-    <div class="repository_head">
-      <div class="repository_head_returnA" @click="FanHui()">
-        <img src="../../assets/image/left.png" alt class="repository_head_returnA_img" />
-      </div>
-
-      <!-- 标题 -->
-      <div class="head_title">
-        <span class="head_title_text">知识库</span>
-      </div>
-
-      <!-- 搜索框 -->
-      <div class="head_souSuo_box" @click="seek()">
-        <img src="../../assets/image/seek.png" alt class="head_souSuo_img" />
+    <div class="repository_box-head">
+      <div class="repository_divBox">
+        <div class="repository_headrBox-tlt">百科</div>
       </div>
     </div>
 
-    <!-- 测试 -->
-    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
-      <!-- 列表 -->
-      <div class="repository_list">
-        <ul class="repository_ul" v-if="axiosShow">
-          <li
-            class="repository_li"
-            @click="xiangqi($event, index)"
-            v-for="(item, index) in this.reData"
-            :key="index"
-          >
-            <!-- 图片 -->
-            <div class="repository_li_div">
-              <img
-                v-lazy="item.img_urls === null || item.img_urls === '' ? './static/picture.png' :  item.img_urls"
-                alt
-                class="repository_li_img"
-              />
-            </div>
-            <!-- 昆虫或病害名称 -->
-            <div class="repository_li_name">{{ item.name | ellipsis }}</div>
+    <!-- 主内容 -->
+    <div class="repository_box-main">
+      <!-- 搜索框 -->
+      <el-input
+        style="width: 90%; margin: 0.25rem auto"
+        prefix-icon="el-icon-search"
+        placeholder="搜索虫害或病害名称"
+        v-model="input"
+        clearable
+      >
+      </el-input>
+
+      <!-- 虫害或病害切换 -->
+      <div class="repository_box-main">
+        <!-- 标题 -->
+        <div class="navlist">
+          <ul>
+            <li
+              class="navli"
+              v-for="(item, index) in navList"
+              :class="{ activeT: nowIndex === index }"
+              @click="tabClick(index)"
+              :key="index"
+            >
+              <div class="navliVal">{{ item.name }}</div>
+            </li>
+          </ul>
+        </div>
 
-            <!-- 详情按钮 -->
-            <div class="repository_li_btn_div">
-              <span class="repository_li_btn_text">详情</span>
-              <img src="../../assets/image/right.png" alt class="repository_li_btn_img" />
+        <!-- 相应内容 -->
+        <div class="swiper-container swiper_con" style="background: #f7f8fc">
+          <div class="swiper-wrapper">
+            <!-- 虫害 -->
+            <div class="swiper-slide">
+              <ul class="home_box-main-authenticateUlA">
+                <li
+                  class="home_box-main-authenticateListA"
+                  v-for="(item, index) in insectPlantDat"
+                  :key="index"
+                >
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      preview="1"
+                      v-lazy="item.img_urls"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      {{ item.name }}
+                      <!-- <span class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      > -->
+                    </div>
+                  </div>
+                </li>
+
+                <!-- <li class="home_box-main-authenticateListA">
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      src="../../assets/image/timg4.jpg"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      这是什么虫子？以前好像见过<span
+                        class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      >
+                    </div>
+                  </div>
+                </li>
+
+                <li class="home_box-main-authenticateListA">
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      src="../../assets/image/timg4.jpg"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      这是什么虫子？以前好像见过<span
+                        class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      >
+                    </div>
+                  </div>
+                </li> -->
+              </ul>
             </div>
 
-            <!-- 科目 -->
-            <div class="repository_li_subject">
-              <span class="repository_li_subject_text">{{ item.course | ellipsis }}</span>
+            <!-- 病害 -->
+            <div class="swiper-slide">
+              <ul class="home_box-main-authenticateUlA">
+                <li class="home_box-main-authenticateListA">
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      src="../../assets/image/timg4.jpg"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      这是什么虫子？11以前好像见过<span
+                        class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      >
+                    </div>
+                  </div>
+                </li>
+
+                <li class="home_box-main-authenticateListA">
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      src="../../assets/image/timg4.jpg"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      这是什么虫子？以前好像见过<span
+                        class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      >
+                    </div>
+                  </div>
+                </li>
+
+                <li class="home_box-main-authenticateListA">
+                  <div class="home_box-main-authenticateListA-box1">
+                    <img
+                      src="../../assets/image/timg4.jpg"
+                      alt
+                      class="home_box-main-authenticateListA-box1-img"
+                    />
+                    <div class="home_box-main-authenticateListA-box1-txt">
+                      这是什么虫子？以前好像见过<span
+                        class="home_box-main-authenticateListA-box1-num"
+                        >1天前</span
+                      >
+                    </div>
+                  </div>
+                </li>
+              </ul>
             </div>
-          </li>
-        </ul>
-
-        <!-- 暂空判断 -->
-        <div class="repository_judge" v-else>
-          <img src="../../assets/image/wu.png" alt class="repository_judge_img" />
-          <div class="repository_judge_text">抱歉，暂无数据</div>
-        </div>
-
-        <!-- 病虫害筛选按钮 -->
-        <div class="repository_screen">
-          <el-button class="repository_screen_btn" @click="show2 = !show2">
-            <img src="../../assets/image/jia.png" alt class="repository_screen_btn_img" />
-          </el-button>
-
-          <transition name="el-zoom-in-bottom">
-            <ul v-show="show2" class="transition-box">
-              <!-- 全部 -->
-              <li class="repository_all" :class="{activeA:shows == 1}" @click="all(),allA()">
-                <div class="repository_all_text_box">
-                  <span class="repository_all_text">全部病虫害</span>
-                </div>
-
-                <div class="repository_all_img_box">
-                  <img src="../../assets/image/all.png" alt class="repository_all_img" />
-                </div>
-              </li>
-
-              <!-- 病害 -->
-              <li class="repository_plant" :class="{activeA:shows == 2}" @click="plant(),plantA()">
-                <div class="repository_plant_text_box">
-                  <span class="repository_plant_text">病害</span>
-                </div>
-
-                <div class="repository_plant_img_box">
-                  <img src="../../assets/image/leaf.png" alt class="repository_plant_img" />
-                </div>
-              </li>
-
-              <!-- 虫害 -->
-              <li
-                class="repository_insect"
-                :class="{activeA:shows == 3}"
-                @click="insect(),insectA()"
-              >
-                <div class="repository_insect_text_box">
-                  <span class="repository_insect_text">虫害</span>
-                </div>
-
-                <div class="repository_insect_img_box">
-                  <img src="../../assets/image/insect.png" alt class="repository_insect_img" />
-                </div>
-              </li>
-            </ul>
-          </transition>
+          </div>
         </div>
       </div>
-    </mescroll-vue>
+    </div>
 
     <!-- 底部导航 -->
     <bottomNav v-show="botNav"></bottomNav>
     <!-- 底部导航 -->
   </div>
-</template>
+</template>                          
 
 <script>
 import bottomNav from "../bottomNav/bottomNav"; //底部导航栏
 
-// 引入mescroll的vue组件
-import MescrollVue from "mescroll.js/mescroll.vue";
 export default {
-  name: "repository",
-  //限时数据文本的字数限时
-  filters: {
-    ellipsis(value) {
-      if (!value) return "";
-      if (value.length > 5) {
-        return value.slice(0, 5) + "...";
-      }
-      return value;
-    }
-  },
-
+  //import引入的组件需要注入到对象中才能使用
   components: {
-    MescrollVue, // 注册mescroll组件
-    bottomNav
+    bottomNav, //底部导航
   },
   data() {
-    //这里存放数据
-    const self = this;
     return {
-      loading: true, //加载
+      fullHeight: document.documentElement.clientHeight, //自定义高度
       botNav: true, //底部导航
-      fullHeight: document.documentElement.clientHeight,
-      repositoryA: localStorage.getItem("seek_name"),
-      show2: false, //筛选按钮
-      reData: [], //后端传来的列表数据
-      image: "", //后端传来的图片
-      axiosShow: true, //暂空判断
-      shows: localStorage.getItem("shows"), //active
-      //测试
-      mescroll: null, // mescroll实例对象
-      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
-      mescrollUp: {
-        // 上拉加载的配置.
-        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
-        //以下是一些常用的配置,当然不写也可以的.
-        page: {
-          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
-          size: 6 //每页数据条数,默认10
-        },
-        isBounce: true, //根据记录的滚动条高度回弹
-        htmlNodata: '<p class="upwarp-nodata">-- 已经到底了! --</p>',
-        noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
-        // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
-        // 这就是为什么无更多数据有时候不显示的原因
-        toTop: {
-          //回到顶部按钮
-          src:
-            "http://pic.51yuansu.com/pic3/cover/00/65/23/5896fa4bc81fc_610.jpg", //图片路径,默认null,支持网络图
-          offset: 800 //列表滚动1000px才显示回到顶部按钮
-        },
-        empty: {
-          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
-          warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
-          icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
-          tip: "暂无相关数据~" //提示
-        },
-        onScroll: function(mescroll, y, isUp) {
-          //监听滚动条
-          // console.log(y)
-          //y为列表当前滚动条的位置
-
-          //隐藏底部导航
-          if (y > 50) {
-            self.botNav = false;
-          } else {
-            self.botNav = true;
-          }
-        },
-        lazyLoad: {
-          use: true // 是否开启懒加载,默认false
-        }
-      },
-      aggregate: "" //后端传来数据的总条数
+      input: "", //搜索
+      navList: [{ name: "虫害" }, { name: "病害" }],
+      nowIndex: 0,
+      mySwiper: "",
+      insectPlantDat: [], //病虫害数据列表
     };
   },
-  beforeRouteEnter(to, from, next) {
-    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
-    next(vm => {
-      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
-      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
-    });
-  },
-  beforeRouteLeave(to, from, next) {
-    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
-    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
-    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
-
-    next();
-  },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
@@ -229,99 +190,15 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
   },
   //方法集合
   methods: {
-    // mescroll组件初始化的回调,可获取到mescroll对象
-    mescrollInit(mescroll) {
-      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
-    },
-    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
-    upCallback(page, mescroll) {
-      let _this = this;
-      if (localStorage.getItem("memoryBiaoshi") === null) {
-        var ret = localStorage.setItem("memoryBiaoshi", "edit"); //添加一个标识，好判断当前要请求什么数据
-      } else {
-        var ret = localStorage.getItem("memoryBiaoshi");
-      }
-      let postData = this.$qs.parse({
-        page: this.mescrollUp.page.num,
-        ret: ret
-      });
-      console.log(postData);
-      this.$axios({
-        method: "post",
-        url: "bigservers/see_dase",
-        data: postData
-      })
-        .then(res => {
-          //判断data中的变量是否为空 ，为空的话存后端发来的总条数
-          if (this.aggregate === "") {
-            //存变量
-            this.aggregate = res.data.num;
-            var b = "6";
-            this.aggregate = this.aggregate / b;
-            this.aggregate = Math.ceil(this.aggregate); //将小数点转换为整数
-          }
-
-          //删除了默认的每页条数后判断数是否大于页码
-          if (this.mescrollUp.page.num <= this.aggregate) {
-            let postData = this.$qs.parse({
-              page: this.mescrollUp.page.num,
-              ret: localStorage.getItem("memoryBiaoshi")
-            });
-            this.$axios({
-              method: "post",
-              url: "bigservers/see_dase",
-              data: postData
-            })
-              .then(res => {
-                let arr = res.data.dat;
-                // 如果是第一页需手动置空列表
-                if (page.num === 1) this.reData = [];
-                // 把请求到的数据添加到列表
-                this.reData = this.reData.concat(arr);
-                // 数据渲染成功后,隐藏下拉刷新的状态
-                this.$nextTick(() => {
-                  mescroll.endSuccess(arr.length);
-                });
-                if (res.data.dat.length === 0) {
-                  _this.axiosShow = false;
-                  _this.FenShow = false;
-                } else if (res.data.dat.length !== 0) {
-                  _this.axiosShow = true;
-                  _this.FenShow = true;
-                }
-                _this.loading = false;
-              })
-              .catch(error => {
-                mescroll.endErr();
-              });
-          } else if (this.mescrollUp.page.num > this.aggregate) {
-            _this.loading = false;
-            // 数据渲染成功后,隐藏下拉刷新的状态
-            this.$nextTick(() => {
-              mescroll.endSuccess(this.aggregate);
-            });
-          }
-
-          if (this.aggregate === 0) {
-            this.axiosShow = false;
-            this.FenShow = false;
-            _this.loading = false;
-          }
-        })
-        .catch(error => {
-          mescroll.endErr();
-        });
-    },
-
     //动态获取浏览器高度
     get_boderHeight() {
       const that = this;
@@ -333,217 +210,79 @@ export default {
       };
     },
 
-    // 返回home页面
-    FanHui() {
-      let _this = this;
-      localStorage.removeItem("memoryBiaoshi");
-      localStorage.removeItem("repositoryPage");
-      localStorage.removeItem("shows");
-      localStorage.removeItem("quebie");
-      // _this.$router.push("/home");
-      _this.$router.replace("/home");
-    },
-
-    //点击进入详情页面,并获取到当前列表的id
-    xiangqi(e, index) {
-      let _this = this;
-      if (
-        e.target.className === "repository_li_btn_text" ||
-        e.target.className === "repository_li_name" ||
-        e.target.className === "repository_li_subject" ||
-        e.target.className === "repository_li_img" ||
-        e.target.className === "repository_li_div"
-      ) {
-        _this.current = index;
-        //获取点击对象
-        let el = e.currentTarget;
-        let listId = _this.reData[index].id;
-        let listrank = _this.reData[index].ret;
-        localStorage.setItem("repositoryID", listId); //保存获取的ID
-        localStorage.setItem("repositoryRank", listrank); //保存获取的类型区别
-        _this.$router.push("/details");
-      }
-    },
-
-    // 点击全部筛选
-    all() {
-      location.reload();
-      localStorage.removeItem("repositoryPage");
-      localStorage.setItem("memoryBiaoshi", "edit"); //添加一个标识，好判断当前要请求什么数据
-      let _this = this;
-      let postData = _this.$qs.parse({
-        ret: localStorage.getItem("memoryBiaoshi"),
-        page: "1"
+    // tab切换交流、鉴定、方案
+    initSwiper() {
+      var that = this;
+      that.mySwiper = new Swiper(".swiper-container", {
+        initialSlide: 0,
+        autoplay: false,
+        keyboardControl: true,
+        autoHeight: true,
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true,
+        autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
+        preventLinksPropagation: false, // 阻止点击事件冒泡
+        onSlideChangeStart: function (swiper) {
+          //这个是当swiper被改变是的回调函数，可以拿到当前索引
+          console.log(swiper.activeIndex);
+          // alert(swiper.activeIndex);
+          that.nowIndex = swiper.activeIndex;
+        },
+        onSlideChangeTransitionStart: function (swiper, event) {},
       });
-      _this
-        .$axios({
-          method: "post",
-          url: "bigservers/see_dase",
-          data: postData,
-          headers: {
-            "Content-Type": "multipart/form-data"
-          }
-        })
-        .then(res => {
-          if (res.data.dat.length === 0) {
-            _this.axiosShow = false;
-            _this.FenShow = false;
-          } else if (res.data.dat.length !== 0) {
-            _this.axiosShow = true;
-            _this.FenShow = true;
-            _this.reData = res.data.dat; //全部数据
-            let a = res.data.page;
-            let b = "4";
-            let d = a / b;
-            if (d % 1 === 0) {
-              _this.page = d * 10;
-            } else {
-              let g = Math.ceil(d) * 10;
-              _this.page = g;
-            }
-          }
-        })
-        .catch(error => {
-          alert("失败");
-        });
     },
-
-    // 点击病害筛选
-    plant() {
-      location.reload();
-      localStorage.removeItem("repositoryPage");
-      localStorage.setItem("memoryBiaoshi", "plant"); //添加一个标识，好判断当前要请求什么数据
-      let _this = this;
-      let postData = _this.$qs.parse({
-        ret: localStorage.getItem("memoryBiaoshi"),
-        page: "1"
-      });
-      _this
-        .$axios({
-          method: "post",
-          url: "bigservers/see_dase",
-          data: postData,
-          headers: {
-            "Content-Type": "multipart/form-data"
-          }
-        })
-        .then(res => {
-          if (res.data.dat.length === 0) {
-            _this.axiosShow = false;
-            _this.FenShow = false;
-          } else if (res.data.dat.length !== 0) {
-            _this.axiosShow = true;
-            _this.FenShow = true;
-            _this.reData = res.data.dat; //全部数据
-            let a = res.data.page;
-            let b = "4";
-            let d = a / b;
-            if (d % 1 === 0) {
-              _this.page = d * 10;
-            } else {
-              let g = Math.ceil(d) * 10;
-              _this.page = g;
-            }
-          }
-        })
-        .catch(error => {
-          alert("失败");
-        });
+    tabClick(index) {
+      this.nowIndex = index;
+      if (!this.mySwiper.slideTo) {
+        this.initSwiper();
+      }
+      this.mySwiper.slideTo(index, 300, false);
     },
 
-    // 点击虫害筛选
-    insect() {
-      location.reload();
-      localStorage.removeItem("repositoryPage");
-      localStorage.setItem("memoryBiaoshi", "insect"); //添加一个标识，好判断当前要请求什么数据
-      let _this = this;
-      let postData = _this.$qs.parse({
-        ret: localStorage.getItem("memoryBiaoshi"),
-        page: "1"
+    //虫害病害数据列表请求
+    insectPlantData() {
+      var that = this;
+      if (that.nowIndex == 0) {
+        var ret = "insect";
+      } else if (that.nowIndex == 1) {
+        var ret = "plant";
+      }
+      let postData = that.$qs.parse({
+        ret: ret,
+        page: "1",
       });
-      _this
+      that
         .$axios({
           method: "post",
           url: "bigservers/see_dase",
           data: postData,
           headers: {
-            "Content-Type": "multipart/form-data"
-          }
+            "Content-Type": "multipart/form-data",
+          },
         })
-        .then(res => {
-          if (res.data.dat.length === 0) {
-            _this.axiosShow = false;
-            _this.FenShow = false;
-          } else if (res.data.dat.length !== 0) {
-            _this.axiosShow = true;
-            _this.FenShow = true;
-            _this.reData = res.data.dat; //全部数据
-            let a = res.data.page;
-            let b = "4";
-            let d = a / b;
-            if (d % 1 === 0) {
-              _this.page = d * 10;
-            } else {
-              let g = Math.ceil(d) * 10;
-              _this.page = g;
-            }
-            _this.location = false;
+        .then((res) => {
+          if (res.data.num !== 0) {
+            that.insectPlantDat = res.data.dat;
+          } else {
+            console.log("暂无数据");
           }
+          console.log(res.data);
         })
-        .catch(error => {
-          alert("失败");
+        .catch((err) => {
+          console.log(err);
         });
     },
-
-    //点击图标进行搜索
-    seek() {
-      let _this = this;
-      localStorage.setItem("seekBiaishi", "1");
-      _this.$router.push("/seek");
-      localStorage.removeItem("memoryID");
-      localStorage.removeItem("memoryDistinction");
-      localStorage.removeItem("collectID");
-      localStorage.removeItem("collectDistinction");
-      localStorage.removeItem("showID");
-      localStorage.removeItem("Point");
-      localStorage.removeItem("axiosData");
-      localStorage.removeItem("homeSeek");
-    },
-
-    //测试
-    allA() {
-      localStorage.setItem("shows", 1);
-    },
-
-    plantA() {
-      localStorage.setItem("shows", 2);
-    },
-
-    insectA() {
-      localStorage.setItem("shows", 3);
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.get_boderHeight();
-
-    //判断当前collectBiaoshi是否为空
-    if (localStorage.getItem("memoryBiaoshi") === null) {
-      localStorage.setItem("memoryBiaoshi", "edit"); //添加一个标识，好判断当前要请求什么数据
-    }
-  }
+    this.insectPlantData(); //虫害病害数据列表请求
+  },
 };
 </script>
 <style lang='scss'>
-@import "../../assets/scss/bus.scss";
+//@import url(); 引入公共css类
 @import "../../assets/scss/repository.scss";
-/*通过fixed固定mescroll的高度*/
-.repository_box .mescroll {
-  position: fixed;
-  top: 44px;
-  bottom: 0;
-  height: auto;
-}
 </style>

discern/src/components/share/share.vue

@@ -1,40 +1,99 @@
 <!--  -->
 <template>
   <div class="share_box" :style="'height:' + fullHeight + 'px'">
-    <!-- 头部 -->
-    <div class="share_head">
-      <div class="share_head_returnA" @click="FanHui()">
-        <img src="../../assets/image/left.png" alt class="share_head_returnA_img" />
-      </div>
 
-      <!-- 标题 -->
-      <div class="head_title">
-        <span class="head_title_text">关于我们</span>
-      </div>
-    </div>
-    <!-- 线 -->
-    <div class="share_segment"></div>
-    <!-- 线 -->
+    <!-- 头部个人信息 -->
+    <div class="share_box-head">
+      <ul class="share_box-head-ul">
+        <li class="share_box-head-list1">
+          <img src="../../assets/image/user.jpg" alt="" class="share_box-head-list1-img">
+        </li>
+
+        <li class="share_box-head-list2">云飞科技</li>
 
-    <!-- 文字 -->
-    <div class="share_txt_box">
-      <!-- <span class="share_txt">欢迎扫码下载使用云飞病虫调查统计器app</span> -->
-      <span class="share_txt">关注公众号了解更多信息</span>
+        <li class="share_box-head-list3">
+          <div class="share_box-head-list3-txt" style="border-right: 1px solid #fff; padding: 0 .25rem 0 0;">积分<span class="share_box-head-list3-txtNum">30</span></div>
+          <div class="share_box-head-list3-txt">排名<span class="share_box-head-list3-txtNum">50</span></div>
+        </li>
+      </ul>
     </div>
-    <!-- 文字 -->
 
-    <!-- 二维码 -->
-    <div class="code_box">
-        <img src="../../assets/image/code.jpg" alt="" class="code_box_img">
+    <!-- 主内容 -->
+    <div class="share_box-main">
+      <ul class="share_box-main-ul">
+        <!-- 列表 -->
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+
+        <li class="share_box-main-list">
+          <div class="share_box-main-list-div1">
+            <img src="../../assets/image/new/27.png" alt="" class="share_box-main-list-div1-img">
+            <div class="share_box-main-list-div1Box">
+              <div class="share_box-main-list-div1Box-txt">签到</div>
+              <div class="share_box-main-list-div1Box-time">2020-12-12 12:00:00</div>
+            </div>
+          </div>
+          <div class="share_box-main-list-div2">+1</div>
+        </li>
+      </ul>
     </div>
-    <!-- 二维码 -->
 
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -42,7 +101,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      fullHeight: document.documentElement.clientHeight
+      fullHeight: document.documentElement.clientHeight,
     };
   },
   //监听属性 类似于data概念
@@ -55,12 +114,12 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
   },
   //方法集合
   methods: {
@@ -74,23 +133,23 @@ export default {
         })();
       };
     },
-
-     // 返回home页面
-    FanHui() {
-      let _this = this;
-      // _this.$router.push("/person");
-      _this.$router.replace("/help");
-    //   location.reload();
-    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {}
+  mounted() {
+    this.get_boderHeight();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss'>
-@import "../../assets/scss/bus.scss";
-@import "../../assets/scss/share.scss";
+<style lang='scss' scoped>
 //@import url(); 引入公共css类
+@import "../../assets/scss/share.scss";
 </style>

discern/src/router/index.js

@@ -36,6 +36,7 @@ import help from '@/components/help/help'
 import tourist from '@/components/tourist/tourist'
 import helpTxt from '@/components/helpTxt/helpTxt'
 import helpWangzhi from '@/components/helpWangzhi/helpWangzhi'
+import popUp from '@/components/popUp/popUp'
 
 Vue.use(Router)
 
@@ -344,5 +345,14 @@ export default new Router({
       },
       component: helpWangzhi
     },
+    {
+      path: '/popUp',
+      name: 'popUp',
+      meta: {
+        title: '病虫害弹框',
+        type: 'login',
+      },
+      component: popUp
+    },
   ],
 })