学校-查看设备地理位置

package.json

     "md5": "^2.3.0",
     "qrcode": "^1.5.1",
     "qrcodejs2": "^0.0.2",
+    "vue-baidu-map": "^0.21.22",
     "vue-simple-uploader": "^0.7.6"
   },
   "devDependencies": {

src/views/schoolSection/deviceManage/breakRuleDevice.vue

             this.userInfo.adminid,
             snList
           );
-          controlWSMsg.msgContent(this.controlMessageInfo.content);
+          controlWSMsg.msgContent(
+            JSON.stringify({
+              title: this.controlMessageInfo.title,
+              content: this.controlMessageInfo.content
+            })
+          );
           controlWSMsg.send();
           let form = {
             pushType: 1,
             pushObj: 1,
+            pushObjname: this.controlMessageInfo.title,
             content: this.controlMessageInfo.content
           };
           form.userids = useridList;

src/views/schoolSection/deviceManage/deviceManage.vue

       </div>
     </Modal>
     <Modal
-      class="modal2"
+      class="modal5"
       :mask-closable="false"
       v-model="deviceDetailInfo.show"
       :title="`查看【${deviceDetailInfo.username}】`"
       <div class="section_title">基本信息</div>
       <div class="section_item">
         <div class="device_base">
-          <div class="device_base_left"></div>
+          <div class="device_base_left">
+            <div class="phone_dot"></div>
+            <Icon
+              class="ivu-icon iconfont icon-anzhuoandroid"
+              color="#52C41A"
+              size="45"
+            ></Icon>
+          </div>
           <div class="device_base_right">
             <Form :label-width="90">
               <FormItem label="使用人">{{
         <div class="detail_left">
           <table class="my_table">
             <tr>
-              <th style="width: 110px">设备号</th>
-              <td></td>
-            </tr>
-            <tr>
-              <th>SN/IMEI</th>
-              <td></td>
+              <th style="width: 110px">SN/IMEI</th>
+              <td>{{ deviceDetailInfo.detail.sn }}</td>
             </tr>
             <tr>
               <th>WiFi/MAC</th>
-              <td></td>
+              <td>{{ deviceDetailInfo.detail.wifyMac }}</td>
             </tr>
             <tr>
               <th>蓝牙MAC</th>
-              <td></td>
+              <td>{{ deviceDetailInfo.detail.blueMac }}</td>
             </tr>
           </table>
         </div>
           <table class="my_table">
             <tr>
               <th style="width: 110px">系统内核</th>
-              <td></td>
+              <td>{{ deviceDetailInfo.detail.sysKernel }}</td>
             </tr>
             <tr>
               <th>Rom版本</th>
-              <td></td>
+              <td>{{ deviceDetailInfo.detail.romVersion }}</td>
             </tr>
             <tr>
               <th>SIM序列号</th>
-              <td></td>
+              <td>{{ deviceDetailInfo.detail.sim }}</td>
             </tr>
           </table>
         </div>
-        <div class="detail_right"></div>
+        <div class="detail_right">
+          <div id="memory_detail"></div>
+        </div>
         <div></div>
       </div>
       <div class="section_title">已安装应用</div>
         ></Table>
       </div>
       <div class="section_title">地理位置</div>
-      <div class="section_title">应用使用统计</div>
+      <div class="geo_location">
+        <div class="geo_location_header">
+          <div>只显示最近十条位置信息</div>
+        </div>
+        <div class="geo_location_main" v-if="deviceDetailInfo.show">
+          <baidu-map
+            class="baidu_map"
+            ak="2xUGaxSQ2TXTsPoiAtT9jZ88tsAl8qw2"
+            :center="baiduMapInfo.center"
+            :zoom="14"
+            :scroll-wheel-zoom="true"
+            @ready="baiduMapReady"
+          >
+            <!--缩放-->
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
+            <!--定位-->
+            <bm-geolocation
+              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+              :showAddressBar="true"
+              :autoLocation="true"
+            ></bm-geolocation>
+            <!--点-->
+            <bm-marker
+              v-for="(item, index) in baiduMapInfo.positions"
+              :key="index"
+              :position="{ lng: item.lng, lat: item.lat }"
+              :dragging="true"
+              animation="BMAP_ANIMATION_DROP"
+              @click="bmMarkerClick(item, $event)"
+            >
+              <!-- 信息弹窗 -->
+              <bm-info-window
+                title="坐标信息"
+                :position="{
+                  lng: baiduMapInfo.markerInfo.lng,
+                  lat: baiduMapInfo.markerInfo.lat
+                }"
+                :show="baiduMapInfo.markerInfo.show"
+                @close="closeBmInfoWindow()"
+              >
+                <div>地址： {{ baiduMapInfo.markerInfo.address }}</div>
+                <div>经度：{{ baiduMapInfo.markerInfo.lng }}</div>
+                <div>维度：{{ baiduMapInfo.markerInfo.lat }}</div>
+              </bm-info-window>
+            </bm-marker>
+          </baidu-map>
+        </div>
+      </div>
+      <div class="section_title">
+        应用使用统计<span>应用使用统计（最近七天）</span>
+      </div>
       <div class="section_table_wrap">
         <Table :columns="usesColumns" :data="deviceDetailInfo.detail.uses">
           <template slot-scope="{ row }" slot="durationSlot">
 </template>
 
 <script>
+import BaiduMap from "vue-baidu-map/components/map/Map.vue";
+import BmNavigation from "vue-baidu-map/components/controls/Navigation";
+import BmGeolocation from "vue-baidu-map/components/controls/Geolocation";
+import BmMarker from "vue-baidu-map/components/overlays/Marker";
+import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
+import * as echarts from "echarts";
 import controlWs from "@/utils/ControlWs";
 import ControlWSMsg from "@/utils/ControlWSMsg";
 import { exportToExcel } from "@/utils/exportToExcel";
   formatSeconds
 } from "@/utils";
 export default {
+  components: {
+    BaiduMap,
+    BmNavigation,
+    BmGeolocation,
+    BmMarker,
+    BmInfoWindow
+  },
   data() {
     return {
+      baiduMapInfo: {
+        center: "郑州市",
+        // {lng, lat}
+        positions: [],
+        // {show, title, lng, lat}
+        markerInfo: {},
+        BMap: null,
+        map: null
+      },
       weekDay,
       padDeviceIcon,
       padViolatesInfo,
           align: "center"
         },
         {
-          title: "在线状态",
+          title: "状态",
           slot: "onlineSlot",
+          width: 70,
           align: "center"
         },
         {
     controlWs.closeWs();
   },
   methods: {
+    initMemoryDetailEcharts() {
+      let _totalMemory = this.deviceDetailInfo.detail.totalMemory;
+      let _usedMemory = this.deviceDetailInfo.detail.usedMemory;
+      let _residueMemory = _totalMemory - _usedMemory;
+      const options = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {d}%"
+        },
+        legend: {
+          bottom: "10",
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          //图例距离饼图的距离
+          itemGap: 10,
+          orient: "horizontal",
+          data: ["内部存储"],
+          textStyle: {
+            color: "#253A70"
+          }
+        },
+        color: ["#FFC300", "#FF8D1A"],
+        series: [
+          {
+            type: "pie",
+            name: "内部存储",
+            radius: ["30%", "45%"],
+            center: ["50%", "45%"],
+            label: {
+              formatter: (params) => {
+                let memoryInfo = {
+                  value: params.value,
+                  unit: "B"
+                };
+                if (memoryInfo.value / 1024 < 1024) {
+                  memoryInfo.value =
+                    Math.floor((memoryInfo.value / 1024) * 100) / 100;
+                  memoryInfo.unit = "KB";
+                } else if (memoryInfo.value / 1024 / 1024 < 1024) {
+                  memoryInfo.value =
+                    Math.floor((memoryInfo.value / 1024 / 1024) * 100) / 100;
+                  memoryInfo.unit = "MB";
+                } else {
+                  memoryInfo.value =
+                    Math.floor((memoryInfo.value / 1024 / 1024 / 1024) * 100) /
+                    100;
+                  memoryInfo.unit = "GB";
+                }
+                return `${params.name}\n${memoryInfo.value}${memoryInfo.unit}`;
+              },
+              borderWidth: 1,
+              borderRadius: 4,
+              color: "#7C8DB5",
+              fontSize: 12,
+              lineHeight: 18
+            },
+            data: [
+              { value: _residueMemory, name: "剩余" },
+              { value: _usedMemory, name: "已使用" }
+            ]
+          }
+        ]
+      };
+      const memoryEcharts = echarts.init(
+        document.getElementById("memory_detail")
+      );
+      memoryEcharts.clear();
+      memoryEcharts.setOption(options);
+    },
     initMonitorWS() {
       controlWs.setWs();
       this.getWSEventInfo();
           this.deviceDetailInfo.show = true;
           this.deviceDetailInfo.username = row.username;
           this.deviceDetailInfo.detail = data.obj;
+          if (this.deviceDetailInfo.detail.positions.length > 0) {
+            let _positions = this.deviceDetailInfo.detail.positions;
+            this.baiduMapInfo.positions = _positions.map((item) => {
+              return { address: "", lng: item.lon, lat: item.lat };
+            });
+            this.baiduMapInfo.center = {
+              lng: this.baiduMapInfo.positions[0].lng,
+              lat: this.baiduMapInfo.positions[0].lat
+            };
+            this.baiduMapInfo.markerInfo = {
+              show: false,
+              address: "",
+              lng: this.baiduMapInfo.center.lng,
+              lat: this.baiduMapInfo.center.lat
+            };
+          } else {
+            this.baiduMapInfo.center = "郑州市";
+          }
+          this.initMemoryDetailEcharts();
         } else {
           this.$Message.error(data.msg);
         }
       });
     },
+    baiduMapReady({ BMap, map }) {
+      this.baiduMapInfo.BMap = BMap;
+      this.baiduMapInfo.map = map;
+    },
+    bmMarkerClick(item, { point }) {
+      if (item.address) {
+        this.baiduMapInfo.markerInfo = {
+          show: true,
+          address: item.address,
+          lng: item.lng,
+          lat: item.lat
+        };
+      } else {
+        const geocoder = new this.baiduMapInfo.BMap.Geocoder();
+        geocoder.getLocation(point, (data) => {
+          if (data) {
+            item.address = data.address;
+            this.baiduMapInfo.markerInfo = {
+              show: true,
+              address: data.address,
+              lng: item.lng,
+              lat: item.lat
+            };
+          }
+        });
+      }
+    },
+    closeBmInfoWindow() {
+      this.baiduMapInfo.markerInfo.show = false;
+    },
     // 策略
     toStrategy(row) {
       stPad_detail_web({ objectid: row.userid }).then((res) => {
       password_detail_userpwd({
         rtype: this.powerParams.rtype,
         objectid: this.powerParams.objectid,
-        sn: row.sn
+        userid: row.userid
       }).then((data) => {
         if (data.code === 0) {
           this.devicePswInfo = {
             this.userInfo.adminid,
             snList
           );
-          controlWSMsg.msgContent(this.controlMessageInfo.content);
+          controlWSMsg.msgContent(
+            JSON.stringify({
+              title: this.controlMessageInfo.title,
+              content: this.controlMessageInfo.content
+            })
+          );
           controlWSMsg.send();
           let form = {
             pushType: 1,
             pushObj: this.controlMessageInfo.classid ? 2 : 1,
+            pushObjname: this.controlMessageInfo.title,
             content: this.controlMessageInfo.content
           };
           if (this.controlMessageInfo.classid) {
   }
 }
 .section_title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding-left: 10px;
   font-size: 18px;
   line-height: 20px;
   font-weight: bold;
   border-left: 4px solid #339dff;
+  > span {
+    font-weight: normal;
+    font-size: 16px;
+  }
 }
 .section_table_wrap {
   margin: 16px 0;
     margin: 16px 0;
     width: 50%;
     .device_base_left {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin-left: 10px;
       width: 120px;
       height: 240px;
       border-radius: 15px;
-      border: 3px solid #000;
+      border: 4px solid #000;
+      .phone_dot {
+        position: absolute;
+        top: 10px;
+        margin: 0 auto;
+        width: 30px;
+        height: 8px;
+        border-radius: 4px;
+        background-color: #000;
+      }
     }
     .device_base_right {
       width: calc(100% - 140px);
     td {
       position: relative;
       padding: 0;
-      line-height: 46px;
+      line-height: 22px;
       color: #798cb5;
       text-align: center;
       vertical-align: middle;
-      white-space: nowrap;
+      // white-space: nowrap;
+      word-break: break-all;
+      white-space: normal;
       border: 1px solid #ced9f2;
     }
   }
   .detail_left {
-    width: calc(33.33% - 30px);
+    margin-right: 15px;
+    width: calc(50% - 280px);
   }
   .detail_center {
-    width: calc(33.33% - 20px);
+    margin-right: 15px;
+    width: calc(50% - 150px);
   }
   .detail_right {
-    width: 33.33%;
+    width: 400px;
+    height: 200px;
+    #memory_detail {
+      width: 400px;
+      height: 200px;
+    }
+  }
+}
+.geo_location {
+  margin: 16px 0;
+  border: 1px solid #ced9f2;
+  .geo_location_header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 16px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #339dff;
+    border-bottom: 1px solid #ced9f2;
+    background: #edf3ff;
+  }
+  .geo_location_main {
+    height: 400px;
+    .baidu_map {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>