自适应更新

src/components/index.vue

@@ -26,12 +26,12 @@
             <div class="navContent">
               <div class="a1">
                 <div class="blueMenu">
-                  <img src="../../static/images/indexTab.png" alt="">
+                  <img src="../../static/images/indexTab.png" alt="" >
                 </div>
               </div>
               <div class="a2">
                 <div class="blueMenu indexTabActive">
-                  <img src="../../static/images/indexTabActive.png" alt="">
+                  <img src="../../static/images/indexTabActive.png" alt="" >
                 </div>
               </div>
               
@@ -51,17 +51,17 @@
           </li> -->
         </ul>
         <div class="userInfo">
-          欢迎您！{{username}}　
-          <!-- <el-dropdown >
+          欢迎您！
+          <el-dropdown  @command="dropdownHandle" >
             <span class="el-dropdown-link">
               {{username}}
               <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>个人中心</el-dropdown-item>
-              <el-dropdown-item>修改密码</el-dropdown-item>
+                <el-dropdown-item command="personMsg">个人中心</el-dropdown-item>
+                <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
             </el-dropdown-menu>
-          </el-dropdown> -->
+          </el-dropdown>
           <div class="exit" @click="outSys()">
             <i class="iconfont icon-exit"></i>
           </div>
@@ -72,6 +72,38 @@
         </div>
       </div>
     </el-header>
+    <!-- 修改密码对话框 -->
+    <el-dialog
+      title="修改密码"
+      :visible.sync="resetPassDialogVisible"
+      width="500px"
+      top="180px"
+      @close="resetPassDialogClosed"
+    >
+      <el-form
+        ref="resetPassFormRef"
+        :model="resetPassForm"
+        label-width="104px"
+        :rules="resetPassFormRules"
+      >
+        <el-form-item label="原始密码 : " prop="oldPass">
+          <el-input type="password" v-model="resetPassForm.oldPass"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码 : " prop="newPass">
+          <el-input type="password" v-model="resetPassForm.newPass"></el-input>
+        </el-form-item>
+        <el-form-item label="确认新密码 : " prop="checkNewPass">
+          <el-input
+            type="password"
+            v-model="resetPassForm.checkNewPass"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetPassDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="resetPassSubm">确认</el-button>
+      </span>
+    </el-dialog>
     <el-container style="overflow: auto">
       <el-aside width="85px">
         <ul class="leftMenu">
@@ -116,6 +148,25 @@ export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   data() {
+    var validateNewPass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入新密码"));
+      } else {
+        if (this.resetPassForm.checkPass !== "") {
+          this.$refs.resetPassFormRef.validateField("checkNewPass");
+        }
+        callback();
+      }
+    };
+    var validateCheckPass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.resetPassForm.newPass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     //这里存放数据
     return {
       that: this,
@@ -251,6 +302,25 @@ export default {
       username:"",
       // 用户信息
       loginInfo:{},
+      resetPassDialogVisible:false,
+      resetPassForm: {
+        oldPass: "",
+        newPass: "",
+        checkNewPass: "",
+      },
+      resetPassFormRules: {
+        oldPass: [
+          { required: true, message: "请输入原始密码", trigger: "blur" },
+        ],
+        newPass: [
+          { required: true, message: "请输入新密码" },
+          { validator: validateNewPass, trigger: "blur" },
+        ],
+        checkNewPass: [
+          { required: true, message: "请确认密码" },
+          { validator: validateCheckPass, trigger: "blur" },
+        ],
+      },
     };
   },
   //监听属性 类似于data概念
@@ -527,6 +597,15 @@ export default {
         }
       });
     },
+    dropdownHandle(command) {
+      if (command == "editPwd") {
+        this.changePass();
+      } else if (command == "outSys") {
+        this.outSys();
+      } else {
+        this.$router.push({ path: "/plantGuard/personMsg" });
+      }
+    },
     outSys() {
       this.$axios({
         method: "POST",
@@ -542,6 +621,32 @@ export default {
         }
       });
     },
+    changePass() {
+      this.resetPassDialogVisible = true;
+    },
+    resetPassSubm() {
+      this.$refs.resetPassFormRef.validate((valid) => {
+        if (!valid) return;
+        this.$axios({
+          method: "POST",
+          url: "/api/api_gateway?method=user.login.changepwd",
+          data: this.qs.stringify({
+            old_password: this.resetPassForm.oldPass,
+            new_password: this.resetPassForm.newPass,
+            confirm_password: this.resetPassForm.checkNewPass,
+          }),
+        }).then((res) => {
+          if (res.data.message == "") {
+            this.$message({
+              message: "密码修改成功！",
+              type: "success",
+            });
+            this.resetPassDialogVisible = false;
+          }
+        });
+      });
+    },
+    resetPassDialogClosed() {},
 
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -572,8 +677,8 @@ export default {
     }
 
     to {
-        -webkit-transform: translate3d(-3330px, 0, 0);
-        transform: translate3d(-3330px, 0, 0)
+        -webkit-transform: translate3d(-41.625rem, 0, 0);
+        transform: translate3d(-41.625rem, 0, 0)
     }
 }
 .el-header {
@@ -587,18 +692,16 @@ export default {
     align-items: center;
     .logoinfo {
       >div{
-        // min-width: 200px;
-        // overflow: hidden;
-        // white-space: nowrap;
-        // text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
       }
       img {
         vertical-align: top;
       }
       span {
-        font-size: 24px;
-        letter-spacing: 3px;
-        margin-left: 10px;
+        font-size: .3rem;
+        letter-spacing: .0375rem;
+        margin-left: .125rem;
       }
     }
     .topMenu {
@@ -610,24 +713,26 @@ export default {
         cursor: pointer;
         // padding: 10px 0;
         // width: 100px;
-        width: 111px;
+        width: 1.3875rem;
         // text-align: center;
-        margin: 0 10px;
+        margin: 0 .125rem;
         // line-height: 20px;
 
         height: 100%;
-        // background: red;
+        display: flex;
+        align-items: center;
         .navContent{
+          width: 100%;
           position: relative;
-          margin-top: 20px;
         }
         .blueMenu{
           position: absolute;
           width: 100%;
-          height: 39px;
+          height: .4875rem;
           overflow: hidden;
           // background: url(../../../static/images/indexTab.png);
           img{
+            width: 41.625rem;
             animation: step 5s steps(30) infinite;
           }
         }
@@ -639,9 +744,9 @@ export default {
           visibility:hidden
         }
         .navTxt{
-          line-height: 39px;
-          padding-left: 30px;
-          font-size: 14px;
+          line-height: .4875rem;
+          padding-left: .375rem;
+          font-size: .175rem;
         }
       }
       .active {
@@ -668,20 +773,20 @@ export default {
       }
     }
     .userInfo {
-      font-size: 14px;
+      font-size: .175rem;
       .el-dropdown {
         color: #fff;
         cursor: pointer;
-        margin-right: 10px;
+        margin-right: .125rem;
       }
       .exit {
         display: inline-block;
-        font-size: 24px;
+        font-size: .3rem;
         border-left: 1px solid #727272;
-        padding-left: 15px;
+        padding-left: .1875rem;
         cursor: pointer;
         i{
-          font-size: 20px;
+          font-size: .25rem;
         }
         i:hover{
           color: #0195ff;
@@ -697,11 +802,11 @@ export default {
   .leftMenu {
     text-align: center;
     li {
-      padding: 10px 0;
+      padding: .125rem 0;
       cursor: pointer;
-      line-height: 22px;
+      line-height: .275rem;
       i{
-        font-size: 26px;
+        font-size: .325rem;
       }
     }
     li:hover {
@@ -749,4 +854,11 @@ export default {
   /deep/.el-radio__input.is-checked + .el-radio__label {
     color: #0195ff;
   }
+  .el-dropdown-menu{
+    z-index:99999 !important
+  }
+.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
+    background-color: #dff1ff;
+    color: #0295ff;
+}
 </style>

src/pages/personage/personMsg.vue

@@ -1,9 +1,6 @@
 <template>
-	<div>
-		<el-breadcrumb separator-class="el-icon-arrow-right">
-			<el-breadcrumb-item>个人中心</el-breadcrumb-item>
-		</el-breadcrumb>
-		<el-card class="card">
+	<div class="innerMargin">
+		<el-card class="card box-card">
 			<el-form
 				class="form"
 				ref="userMsgRef"

src/pages/plantGuard/baseAll.vue

@@ -86,7 +86,7 @@ export default {
         // 图标类型，现阶段只支持 image 类型
         type: 'image',
         // 图片 url
-        image: require("../../../static/images/projectIcon.png"),
+        image: require("../../../static/images/icon5.svg"),
         // 图片尺寸
         size: [74, 66],
         // 图片相对 position 的锚点，默认为 bottom-center

src/pages/plantGuard/page1.vue

@@ -22,6 +22,7 @@
             @mouseleave='mouseOut(index,item)' 
             :key="item.type"  
             :class="[currSelectType==item.type?'active':'']" 
+            :ref="'tabsRef'+index"
           >
           <img v-if="!item.type" :src="tabIcon[0]" alt="" width="25px" class="tabIcon">
           <img v-else :src="tabIcon[item.type]" alt="" height="25px" width="25px" class="tabIcon">
@@ -695,10 +696,10 @@ export default {
     equipsTypeSwitch(i){
       switch (i) {
         case '2':
-          return '杀虫灯';
+          return '防治测报';
           break;
         case '3':
-          return '虫情测报灯';
+          return '虫情测报';
           break;
         case '4':
           return '性诱测报';
@@ -707,7 +708,7 @@ export default {
           return '环境监测';
           break;
         case '6':
-          return '监控';
+          return '可视化';
           break;
         case '7':
           return '孢子仪';
@@ -716,10 +717,10 @@ export default {
           return '糖醋测报';
           break;
         case 2:
-          return '杀虫灯';
+          return '防治测报';
           break;
         case 3:
-          return '虫情测报灯';
+          return '虫情测报';
           break;
         case 4:
           return '性诱测报';
@@ -728,7 +729,7 @@ export default {
           return '环境监测';
           break;
         case 6:
-          return '监控';
+          return '可视化';
           break;
         case 7:
           return '孢子仪';
@@ -755,11 +756,14 @@ export default {
       this.getEquipList(item.type)
     },
     mouseOve(index,item){
-      this.equipStyleLeft = 100*index
+      this.equipStyleLeft = this.$refs.tabsRef0[0].clientWidth*index
     },
     mouseOut(index,item){
+      // console.log(this.$refs.tabsRef0[0].clientWidth);
+      // console.log(this.$refs.tabsRef0[0].style.width);
+      
       if(item.type!=this.currSelectType){
-        this.equipStyleLeft = 100*this.currSelectSite
+        this.equipStyleLeft = this.$refs.tabsRef0[0].clientWidth*this.currSelectSite
       }
     },
     iconFormat(equip_ip, item) {
@@ -1109,9 +1113,10 @@ export default {
       justify-content: space-around;
       align-items: center;
       >div{
-        width: 100px;
+        width: 1.5rem;
         text-align: center;
-        border-radius: 20px;
+        border-radius: .25rem;
+        font-size: .175rem;
         cursor: pointer;
         >img{
           vertical-align: middle;
@@ -1142,8 +1147,8 @@ export default {
       position: absolute;
       top: 0;
       height: 32px;
-      width: 100px;
-      border-radius: 20px;
+      width: 1.5rem;
+      border-radius: .25rem;
       background: #0195ff;
       z-index: 0;
       transition: all 1s;
@@ -1225,7 +1230,7 @@ export default {
         }
       }
       .equipCity{
-        text-indent: 16px;
+        text-indent: .2rem;
       }
       .equipType{
         line-height: 34px;

src/pages/plantGuard/page8.vue

@@ -1,254 +1,230 @@
-<!-- 设备管理 -->
 <template>
   <div class="innerMargin">
       <el-card class="box-card">
-        <div style="cursor: default">
-          <div class="search-box">
-            <div class="filter-box">
-              <el-select
-                size="small"
-                v-model="queryInfo.device_type_id"
-                clearable
-                placeholder="请选择设备类型"
-                @change="searchChange()"
-              >
-                <el-option label="杀虫灯" value="2"></el-option>
-                <el-option label="测报灯" value="3"></el-option>
-                <el-option label="智能性诱" value="4"></el-option>
-                <el-option label="环境监测" value="5"></el-option>
-                <el-option label="监控设备" value="6"></el-option>
-                <el-option label="孢子仪" value="7"></el-option>
-                <el-option label="性诱设备" value="8"></el-option>
-                <el-option label="糖醋测报" value="9"></el-option>
-              </el-select>
-              <el-input
-                style="cursor: pointer"
-                size="small"
-                clearable
-                @change="searchChange()"
-                placeholder="请输入设备ID"
-                v-model="queryInfo.f_id"
-              >
-                <i slot="suffix" class="el-input__icon el-icon-search"></i>
-              </el-input>
-            </div>
-            <el-date-picker
+      <div style="cursor: default">
+        <div class="search-box">
+          <div class="filter-box">
+            <el-select
+              size="small"
+              v-model="queryInfo.device_type_id"
+              clearable
+              placeholder="请选择设备类型"
+              @change="searchChange()"
+            >
+              <el-option label="杀虫灯" value="2"></el-option>
+              <el-option label="测报灯" value="3"></el-option>
+              <el-option label="智能性诱" value="4"></el-option>
+              <el-option label="环境监测" value="5"></el-option>
+              <el-option label="监控设备" value="6"></el-option>
+              <el-option label="孢子仪" value="7"></el-option>
+              <el-option label="性诱设备" value="8"></el-option>
+              <el-option label="糖醋测报" value="9"></el-option>
+            </el-select>
+            <el-input
               style="cursor: pointer"
               size="small"
-              @change="DateChange()"
-              v-model="timeRange"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </div>
-          <el-row :gutter="10">
-            <el-col
-              :xs="24"
-              :sm="24"
-              :md="12"
-              :lg="6"
-              :xl="4"
-              v-for="item in dataList"
-              :key="item.id"
+              clearable
+              @change="searchChange()"
+              placeholder="请输入设备ID"
+              v-model="queryInfo.f_id"
             >
-              <el-card class="box-card pad0">
-                <i class="del-icon el-icon-delete" @click="delEquip(item.d_id)"></i>
-                <div class="img-box">
-                  <template v-if="item.device_type_id == '2'">
-                    <img src="@/assets/images/equipdistribute/scdIconOn.png" />
-                    <p>杀虫灯</p>
-                  </template>
-                  <template v-if="item.device_type_id == '3'">
-                    <img src="@/assets/images/equipdistribute/cbdIconOn.png" />
-                    <p>测报灯</p>
-                  </template>
-                  <template v-if="item.device_type_id == '4'">
-                    <img src="@/assets/images/equipdistribute/znxyOn.png" />
-                    <p>智能性诱</p>
-                  </template>
-                  <template v-if="item.device_type_id == '5'">
-                    <img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
-                    <p>环境监测</p>
-                  </template>
-                  <template v-if="item.device_type_id == '6'">
-                    <img src="@/assets/images/equipdistribute/jkIconOn.png" />
-                    <p>监控设备</p>
-                  </template>
-                  <template v-if="item.device_type_id == '7'">
-                    <img src="@/assets/images/equipdistribute/bzyIconOn.png" />
-                    <p>孢子仪</p>
-                  </template>
-                  <template v-if="item.device_type_id == '8'">
-                    <img src="@/assets/images/equipdistribute/xyOn.png" />
-                    <p>性诱设备</p>
-                  </template>
-                  <template v-if="item.device_type_id == 9">
-                    <img src="@/assets/images/equipdistribute/tccbOn.png" />
-                    <p>糖醋测报</p>
-                  </template>
-                </div>
-                <div class="detail">
-                  <p>
-                    设备ID
-                    <span>{{ item.device_id }}</span>
-                  </p>
-                  <p>
-                    适配用户
-                    <span>{{ item.device_user || "无" }}</span>
-                  </p>
-                  <p>
-                    设备名称
-                    <span>{{ item.device_name || "无" }}</span>
-                  </p>
-                  <p>
-                    位置
-                    <span>{{ item.device_location || "无" }}</span>
-                  </p>
-                  <p>
-                    设备添加时间
-                    <span>{{ (item.creat_time * 1000) | formatTime }}</span>
-                  </p>
-                </div>
-                <div class="bottom">
-                  <span @click="modifyName(item.device_id, item.device_name)">
-                    <i class="el-icon-edit-outline"></i> 修改名称
-                  </span>
-                  <span @click="addPosition(item.device_id, item.lng, item.lat)">
-                    <i class="el-icon-location-outline"></i> 添加位置
-                  </span>
-                  <span @click="addFault(item.device_id, item.device_type_id)">
-                    <i class="el-icon-edit-outline"></i> 故障上报
-                  </span>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-          <!-- 暂无数据 -->
-          <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
-            <img
-              :src="$imghost + zanwu"
-              alt
-              class="expertDiagnosis_referral_units_notImg"
-            />
+              <i slot="suffix" class="el-input__icon el-icon-search"></i>
+            </el-input>
           </div>
-          <el-pagination
-            v-if="dataList.length > 0"
-            background
-            layout="prev, pager, next"
-            :page-size="12"
-            :total="totalNum"
-            @current-change="changePage"
-          ></el-pagination>
-          <!-- 添加定位弹框 -->
-          <el-dialog
-            class="map_dialog"
-            title="添加定位"
-            v-if="addLocationDialogVisible"
-            :visible.sync="addLocationDialogVisible"
-            width="800px"
-            top="180px"
-            @closed="addLocationDialogClosed"
-          >
-            <el-form
-              :inline="true"
-              :model="locationForm"
-              class="demo-form-inline"
-              size="mini"
-            >
-              <el-form-item label="经度">
-                <el-input clearable v-model="locationForm.lng"></el-input>
-              </el-form-item>
-              <el-form-item label="维度">
-                <el-input clearable v-model="locationForm.lat"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" size="mini" @click="locationSearch"
-                  >定位</el-button
-                >
-              </el-form-item>
-              <el-form-item label="">
-                <el-input
-                  placeholder="请输入地区检索"
-                  v-model="addr"
-                  clearable
-                  @change="addrChange()"
-                ></el-input>
-              </el-form-item>
-            </el-form>
-            <el-amap
-              class="bm-view"
-              vid="amapDemo"
-              :center="center"
-              :amap-manager="amapManager"
-              :zoom="mapZoom"
-              :plugin="plugin"
-              :events='mapEvents'
-            >
-              <el-amap-marker vid="component-marker" v-if="point.length" :position="point"  ></el-amap-marker>
-            </el-amap>
-            <!-- <baidu-map
-              class="Bmap"
-              :center="center"
-              :zoom="mapZoom"
-              :scroll-wheel-zoom="true"
-              @ready="handlerBMap"
-              @click="locationPoint"
-            >
-              <bm-marker :position="point" :dragging="true"></bm-marker>
-            </baidu-map> -->
-            <span slot="footer" class="dialog-footer">
-              <el-button @click="addLocationDialogVisible = false">取 消</el-button>
-              <el-button type="primary" @click="addLocationSubm">确 定</el-button>
-            </span>
-          </el-dialog>
-          <!-- 故障上报  -->
-          <el-dialog
-            class="map_dialog"
-            title="故障上报"
-            v-if="addFaultDialogVisible"
-            :visible.sync="addFaultDialogVisible"
-            width="500px"
-            top="180px"
-            @closed="addLocationDialogClosed"
+          <el-date-picker
+            style="cursor: pointer"
+            size="small"
+            @change="DateChange()"
+            v-model="timeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </div>
+        <el-row :gutter="10">
+          <el-col
+            :xs="24"
+            :sm="24"
+            :md="12"
+            :lg="6"
+            :xl="4"
+            v-for="item in dataList"
+            :key="item.id"
           >
-            <el-form
-              ref="editFaultform"
-              :rules="editFaultrules"
-              :model="editFault"
-              label-width="80px"
-            >
-              <el-form-item label="设备ID">
-                <el-input v-model="editFault.imei" disabled></el-input>
-              </el-form-item>
-              <el-form-item label="联系人" prop="user">
-                <el-input v-model="editFault.user"></el-input>
-              </el-form-item>
-              <el-form-item label="联系电话" prop="tel">
-                <el-input
-                  type="text"
-                  maxlength="11"
-                  v-model="editFault.tel"
-                ></el-input>
-              </el-form-item>
-              <el-form-item label="故障原因" prop="detail">
-                <el-input type="textarea" v-model="editFault.detail"></el-input>
-              </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-              <el-button @click="addFaultDialogVisible = false">取 消</el-button>
-              <el-button type="primary" @click="addFaultSubm">确 定</el-button>
-            </span>
-          </el-dialog>
+            <el-card class="box-card pad0">
+              <i class="del-icon el-icon-delete" @click="delEquip(item.d_id)"></i>
+              <div class="img-box">
+                <template v-if="item.device_type_id == '2'">
+                  <img src="@/assets/images/equipdistribute/scdIconOn.png" />
+                  <p>杀虫灯</p>
+                </template>
+                <template v-if="item.device_type_id == '3'">
+                  <img src="@/assets/images/equipdistribute/cbdIconOn.png" />
+                  <p>测报灯</p>
+                </template>
+                <template v-if="item.device_type_id == '4'">
+                  <img src="@/assets/images/equipdistribute/znxyOn.png" />
+                  <p>智能性诱</p>
+                </template>
+                <template v-if="item.device_type_id == '5'">
+                  <img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
+                  <p>环境监测</p>
+                </template>
+                <template v-if="item.device_type_id == '6'">
+                  <img src="@/assets/images/equipdistribute/jkIconOn.png" />
+                  <p>监控设备</p>
+                </template>
+                <template v-if="item.device_type_id == '7'">
+                  <img src="@/assets/images/equipdistribute/bzyIconOn.png" />
+                  <p>孢子仪</p>
+                </template>
+                <template v-if="item.device_type_id == '8'">
+                  <img src="@/assets/images/equipdistribute/xyOn.png" />
+                  <p>性诱设备</p>
+                </template>
+                <template v-if="item.device_type_id == 9">
+                  <img src="@/assets/images/equipdistribute/tccbOn.png" />
+                  <p>糖醋测报</p>
+                </template>
+              </div>
+              <div class="detail">
+                <p>
+                  设备ID
+                  <span>{{ item.device_id }}</span>
+                </p>
+                <p>
+                  适配用户
+                  <span>{{ item.device_user || "无" }}</span>
+                </p>
+                <p>
+                  设备名称
+                  <span>{{ item.device_name || "无" }}</span>
+                </p>
+                <p>
+                  位置
+                  <span>{{ item.device_location || "无" }}</span>
+                </p>
+                <p>
+                  设备添加时间
+                  <span>{{ (item.creat_time * 1000) | formatTime }}</span>
+                </p>
+              </div>
+              <div class="bottom">
+                <span @click="modifyName(item.device_id, item.device_name)">
+                  <i class="el-icon-edit-outline"></i> 修改名称
+                </span>
+                <span @click="addPosition(item.device_id, item.lng, item.lat)">
+                  <i class="el-icon-location-outline"></i> 添加位置
+                </span>
+                <span @click="addFault(item.device_id, item.device_type_id)">
+                  <i class="el-icon-edit-outline"></i> 故障上报
+                </span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <!-- 暂无数据 -->
+        <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
+          <img
+            :src="$imghost + zanwu"
+            alt
+            class="expertDiagnosis_referral_units_notImg"
+          />
         </div>
-      </el-card>
+        <el-pagination
+          v-if="dataList.length > 0"
+          background
+          layout="prev, pager, next, jumper"
+          :page-size="12"
+          :total="totalNum"
+          @current-change="changePage"
+        ></el-pagination>
+        <!-- 添加定位弹框 -->
+        <el-dialog
+          class="map_dialog"
+          title="添加定位"
+          :visible.sync="addLocationDialogVisible"
+          width="800px"
+          top="180px"
+          @closed="addLocationDialogClosed"
+        >
+          <el-form
+            :inline="true"
+            :model="locationForm"
+            class="demo-form-inline"
+            size="mini"
+          >
+            <el-form-item label="经度">
+              <el-input clearable v-model="locationForm.lng"></el-input>
+            </el-form-item>
+            <el-form-item label="维度">
+              <el-input clearable v-model="locationForm.lat"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="locationSearch"
+                >定位</el-button
+              >
+            </el-form-item>
+            <el-form-item label="">
+              <el-input
+                placeholder="请输入地区检索"
+                v-model="addr"
+                clearable
+                @change="addrChange()"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+          <div class="amap-demo" id="mapContainer2"></div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="addLocationDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="addLocationSubm">确 定</el-button>
+          </span>
+        </el-dialog>
+        <!-- 故障上报  -->
+        <el-dialog
+          class="map_dialog"
+          title="故障上报"
+          v-if="addFaultDialogVisible"
+          :visible.sync="addFaultDialogVisible"
+          width="500px"
+          @closed="addLocationDialogClosed"
+        >
+          <el-form
+            ref="editFaultform"
+            :rules="editFaultrules"
+            :model="editFault"
+            label-width="80px"
+          >
+            <el-form-item label="设备ID">
+              <el-input v-model="editFault.imei" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="联系人" prop="user">
+              <el-input v-model="editFault.user"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" prop="tel">
+              <el-input
+                type="text"
+                maxlength="11"
+                v-model="editFault.tel"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="故障原因" prop="detail">
+              <el-input type="textarea" v-model="editFault.detail"></el-input>
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="addFaultDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="addFaultSubm">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-import VueAMap from "vue-amap";
-let amapManager = new VueAMap.AMapManager();
+import AMap from "AMap";
 export default {
   data() {
     var checkphone = (rule, value, callback) => {
@@ -263,7 +239,6 @@ export default {
       }
     };
     return {
-      amapManager,
       zanwu: "/images/expertDiagnosis/zanwu.png",
       timeRange: "",
       queryInfo: {
@@ -288,56 +263,7 @@ export default {
         type: "",
       },
       device_id: "",
-      mapZoom: 6,
-      mapEvents: { 
-        init: (o) => {
-          // console.log(o.getCenter())
-          // console.log(this.$refs.map.$$getInstance())
-          // o.getCity(result => {
-          //   console.log(result)
-          // })
-        },
-        'moveend': () => {
-        },
-        'zoomchange': () => {
-        },
-        'click': (e) => {
-          console.log(this)
-          console.log(e.lnglat)
-          this.point = [e.lnglat.lng,e.lnglat.lat]
-          this.locationForm.lng = e.lnglat.lng;
-          this.locationForm.lat = e.lnglat.lat;
-        }
-      },
-      plugin: [
-        {
-          pName: "ToolBar",
-          events: {
-            init(instance) {
-              console.log(instance);
-            }
-          }
-        },
-        {
-          pName: "Scale",
-          events: {
-            init(instance) {
-              console.log(instance);
-            }
-          }
-        },
-        // {
-        //     pName: 'MapType',
-        //     defaultType: 0,
-        //     events: {
-        //       init(instance) {
-        //         console.log(instance);
-        //       }
-        //     }
-        //   }
-      ],
-      point: { lng: "", lat: "" },
-      center: [104.776123,33.118667],
+      center: [], //默认地图中心
       addLocationDialogVisible: false,
       addFaultDialogVisible: false,
       editFaultrules: {
@@ -345,22 +271,66 @@ export default {
         tel: { required: true, validator: checkphone, trigger: "blur" },
         detail: { required: true, message: "请输入故障原因", trigger: "blur" },
       },
-      prompt:'',
+      address: "", //地图信息框显示的地址
     };
   },
   mounted() {
     this.getList();
-    // window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   beforeMount() {},
   methods: {
-     beforeunloadHandler (e) {
-       alert(1)
-      e = e || window.event
-      if (e) {
-        e.returnValue = '关闭提示'
-      }
-      return '关闭提示'
+    init() {
+      var map = new AMap.Map("mapContainer2", {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      setTimeout(() => {
+        var marker = new AMap.Marker({
+          position: this.center,
+        });
+        console.log(this.center)
+        marker.setMap(map);
+      },1000);
+      this.map = map;
+      this.testevent();
+    },
+    // 地图点击事件
+    testevent() {
+      this.map.on("click", (ev) => {
+        var lnglat = [ev.lnglat.lng, ev.lnglat.lat];
+        this.locationForm = { lng: lnglat[0], lat: lnglat[1] };
+        this.map.clearMap();
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+        this.getAddress(lnglat);
+        setTimeout(() => {
+          new AMap.InfoWindow({
+            content: "<h5>" + "当前选中地址" + "</h5>" + this.address,
+            offset: new AMap.Pixel(0, -32),
+          }).open(this.map, lnglat);
+        }, 100);
+      });
+    },
+    // 经纬度转化为详细地址
+    getAddress(lnglat) {
+      AMap.plugin("AMap.Geocoder", () => {
+        this.geocoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.info === "OK") {
+            this.address = result.regeocode.formattedAddress;
+          }
+        });
+      });
     },
     //获取设备列表
     getList() {
@@ -402,49 +372,31 @@ export default {
         this.getList();
       }
     },
-    //在地图中点击定位
-    locationPoint(e) {
-      let { point } = e;
-      this.point = point;
-      this.locationForm = point;
-      this.map.clearOverlays();
-      this.map.addOverlay(new BMap.Marker(this.point));
-    },
+
     addrChange() {
-      this.geocoder = new AMap.Geocoder({
-          city: "全国", //城市设为北京，默认：“全国”
-      });
-      var _this = this;
-      if(!this.addr){
-        this.point = []
-        return false;
-      }
-      this.geocoder.getLocation(this.addr, function(status, result) {
-          if (status === 'complete'&&result.geocodes.length) {
-              var lnglat = result.geocodes[0].location
-              _this.point = [lnglat.lng,lnglat.lat];
-              _this.center = [lnglat.lng,lnglat.lat];
-          }else{
-              log.error('根据地址查询位置失败');
-          }
+      var marker = new AMap.Marker();
+      this.geocoder.getLocation(this.addr, (status, result) => {
+        if (status === "complete" && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          marker.setPosition(lnglat);
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          this.locationForm = {
+            lat: lnglat.lat,
+            lng: lnglat.lng,
+          };
+        } else {
+          this.$message.error("根据地址查询位置失败");
+        }
       });
     },
     // 修改设备名称
     modifyName(id, device_name) {
       let value = device_name;
-      this.prompt = this.$prompt("", "修改名字", {
-        customClass: 'picc-message-box', // 必填
-        cancelButtonClass:'cancelPromptButton',
+      this.$prompt("", "修改名字", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        inputPlaceholder: '请输入设备名称',
-        inputErrorMessage: '输入不能为空',
-        inputValidator: (value)=>{
-          if(value.trim().length < 1){
-                return '输入不能为空'
-            }
-        },
-        inputValue: device_name,
+        inputPlaceholder: device_name,
       })
         .then(({ value }) => {
           if (value) {
@@ -468,39 +420,40 @@ export default {
             this.$message({
               type: "info",
               message: "内容不能为空",
-              duration:0
             });
-            return false;
           }
         })
         .catch(() => {
-          // this.$message({
-          //   type: "info",
-          //   message: "取消输入",
-          // });
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
         });
     },
     //通过经纬度搜索定位
     locationSearch() {
       if (this.locationForm.lat && this.locationForm.lng) {
-        this.point = [this.locationForm.lng,this.locationForm.lat];
-        this.center = [this.locationForm.lng,this.locationForm.lat];
+        let lnglat = [this.locationForm.lng, this.locationForm.lat];
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+      } else {
+        this.$message.warning("请输入经纬度！");
+        return fasle;
       }
     },
-    handlerBMap({ BMap, map }) {
-      this.BMap = BMap;
-      this.map = map;
-      let point = new BMap.Point(this.point.lng, this.point.lat);
-      map.centerAndZoom(point, 15);
-    },
     //点击“添加定位”按钮
     addPosition(device_id, lng, lat) {
       this.device_id = device_id;
-      this.locationForm.lng = lng || 0
-      this.locationForm.lat = lat || 0
-      this.point = [this.locationForm.lng, this.locationForm.lat ];
-      this.center = [this.locationForm.lng, this.locationForm.lat ];
+      this.point = [lng, lat];
+      this.center = [lng, lat];
+      this.locationForm.lng = lng;
+      this.locationForm.lat = lat;
       this.addLocationDialogVisible = true;
+      setTimeout(() => {
+        this.init();
+      }, 0);
     },
     // 故障上报
     addFault(device_id, type) {
@@ -517,12 +470,8 @@ export default {
     //关闭定位弹框时调用
     addLocationDialogClosed() {
       this.locationForm = { lat: "", lng: "" };
-      this.point = [0,0];
-      this.center = [113.271429, 23.135336];
-
-      //   this.map.clearOverlays();
+      this.center = [];
       this.map = null;
-      this.BMap = null;
     },
     //选择定位点后，提交
     addLocationSubm() {
@@ -608,8 +557,8 @@ export default {
               this.$message({
                 type: "success",
                 message: "删除成功!",
-			  });
-			  this.getList()
+              });
+              this.getList();
             } else {
               this.$message({
                 type: "error",
@@ -626,16 +575,6 @@ export default {
         });
     },
   },
-  destroyed() {
-    this.timer = setTimeout(function() {
-      let closeBtn = document.body.getElementsByClassName("cancelPromptButton")[0]
-      if(closeBtn){
-        closeBtn.click()
-      }
-    })
-    // window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
-
-  }
 };
 </script>
 
@@ -718,7 +657,7 @@ export default {
     }
   }
 }
-.bm-view {
+.amap-demo {
   width: 100%;
   height: 400px;
 }

src/router/index.js

@@ -276,7 +276,12 @@ export default new Router({
           component: Page11,
           meta: { title: '水价管理',order:3,navname: '充值记录', }
         },
-        
+        {
+          path: 'personMsg',
+          name:'PersonMsg',
+          component: PersonMsg,
+          meta: { title: '',order:0,navname: '个人中心', }
+        },
       ]
     },
     // -----------------大数据平台------------------------