Merge remote-tracking branch 'origin/master'

device-manager-ui/admin/src/assets/less/base.less

@@ -14,8 +14,8 @@ html * {
 html,
 body {
   width: 100%;
-  // height: 100%;
-  min-height: 100%;
+  height: 100%;
+  // min-height: 100%;
   font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
     sans-serif;
 }
@@ -226,7 +226,9 @@ a {
   pointer-events: none;
 }
 
-#app,
+#app{
+  height: 100%;
+}
 .pages {
   .flex;
   .flex-v;

device-manager-ui/admin/src/assets/less/common.less

@@ -328,7 +328,7 @@
   text-align: right;
 }
 
-.addclass {
+.el-button--primary {
   background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
   color: #fff !important;
 }

device-manager-ui/admin/src/components/MapDetail.vue

@@ -7,7 +7,7 @@
       vid="amapDetail"
       :amap-manager="amapManager"
       :center="center"
-      expandZoomRange
+      :expandZoomRange="true"
       :zoom="20"
       :pitch="65"
       :rotation="45"
@@ -32,6 +32,89 @@
         :extData="marker"
       >
       </el-amap-marker>
+      <!--信息窗体-->
+      <el-amap-info-window
+        :closeWhenClickMap="true"
+        :position="window.position"
+        :visible="window.visible"
+        :offset="[0, -30]"
+        :events="{
+          init(m) {
+            m.on('open', () => (window.visible = true));
+            m.on('close', () => (window.visible = false));
+          },
+        }"
+      >
+        <div class="info-window">
+          <!-- 头部 -->
+          <div class="header flex aic jcb mb20">
+            <div class="title">
+              {{ curDev.productName + "-" + curDev.deviceName }}
+            </div>
+            <div class="hint">
+              <div class="green" v-if="curDev.deviceStatus === 2">
+                <i class="el-icon-link"></i>
+                在线
+              </div>
+              <div class="wraning" v-else-if="curDev.enabled === 0">
+                <i class="el-icon-switch-button"></i>
+                停用
+              </div>
+              <div class="ordinary" v-else-if="curDev.deviceStatus === 0">
+                <i class="el-icon-sunset"></i>
+                未激活
+              </div>
+              <div class="delete" v-else-if="curDev.deviceStatus === 1">
+                <i class="el-icon-light-rain"></i>
+                离线
+              </div>
+            </div>
+          </div>
+          <!-- 主体 -->
+          <div class="info-box">
+            <el-descriptions :column="1" size="small">
+              <el-descriptions-item label="设备编码">{{
+                curDev.deviceCode ? curDev.deviceCode : "--"
+              }}</el-descriptions-item>
+              <el-descriptions-item label="MAC地址">{{
+                curDev.deviceMac ? curDev.deviceMac : "--"
+              }}</el-descriptions-item>
+              <el-descriptions-item label="设备位置"
+                >{{
+                  curDev.deviceInBuilding ? curDev.deviceInBuilding : "--"
+                }}栋{{
+                  curDev.deviceInFloor ? curDev.deviceInFloor : "--"
+                }}层</el-descriptions-item
+              >
+              <el-descriptions-item
+                :labelStyle="{ 'text-align': 'right', width: '50px' }"
+                label="负责人"
+              >
+                {{ curDev.leadingOfficial || "--" }}
+              </el-descriptions-item>
+              <el-descriptions-item label="联系电话">{{
+                curDev.leadingOfficialTelephone || "--"
+              }}</el-descriptions-item>
+              <el-descriptions-item label="创建时间">{{
+                formatterDate(curDev.createTime)
+              }}</el-descriptions-item>
+            </el-descriptions>
+          </div>
+          <!-- 底部按钮 -->
+          <!-- <div class="footer mt20 flex aic">
+            <el-button
+              size="small"
+              v-if="curDev.deviceStatus === 0"
+              type="primary"
+              @click="handleActive"
+              >一键激活</el-button
+            >
+            <el-button size="small" type="primary" @click="checkInfo(curDev.id)"
+              >查看设备详情</el-button
+            >
+          </div> -->
+        </div>
+      </el-amap-info-window>
     </el-amap>
   </div>
 </template>
@@ -110,6 +193,10 @@ export default {
 
         events: {
           click: (e) => {
+            let ExtData = e.target.getExtData();
+            this.window.visible = true;
+            this.window.position = ExtData.position;
+            this.curDev = ExtData.extData;
             console.log("getExtData", e.target.getExtData());
           },
         },
@@ -136,7 +223,11 @@ export default {
       zoom: 20,
       center: [104.007767, 30.568308],
       marker: {},
-
+      window: {
+        position: [0, 0],
+        visible: false,
+      },
+      curDev: {},
       // 一些工具插件
     };
   },
@@ -146,7 +237,7 @@ export default {
 <style lang="less">
 .tuli {
   width: 400px;
-  top: 20px;
+  top: 40px;
   left: 34px;
   position: absolute;
   float: left;
@@ -161,13 +252,14 @@ export default {
   background-color: rgba(255, 255, 255, 0.7);
 }
 .rightTop {
-  width: 200px;
+  width: 250px;
+  height: 100%;
   top: 0px;
   right: 0px;
-
   position: absolute;
   float: right;
   background-color: rgba(255, 255, 255, 1);
+  overflow-y: auto;
 }
 .amap-info-content {
   position: relative;
@@ -175,6 +267,30 @@ export default {
   line-height: 1.4;
   overflow: auto;
 }
+.info-window {
+  width: 400px;
+  padding: 10px;
+  font-size: 12px;
+  color: #606266;
+  .header {
+    .title {
+      font-size: 20px;
+      font-weight: 500;
+    }
+  }
+  .info-text-title {
+    width: 90px;
+    text-align: right;
+  }
+  .info-box {
+    padding: 10px 0px;
+    border-top: 1px solid #ececec;
+    border-bottom: 1px solid #ececec;
+  }
+  .footer {
+    justify-content: flex-end;
+  }
+}
 .my-map {
   width: 100%;
   height: 93vh;

device-manager-ui/admin/src/views/login/login.vue

@@ -19,7 +19,8 @@
         </el-form-item>
         <el-form-item size="large">
           <el-button
-            type="primary" class="addclass"
+            type="primary"
+            class="addclass"
             native-type="submit"
             :loading="loading"
             @click="onSubmit"
@@ -40,9 +41,7 @@ import { createSocket } from "@/assets/utils/websocket";
 
 export default {
   name: "login",
-  created() {
-
-  },
+  created() {},
   methods: {
     login() {
       this.loading = true;

device-manager-ui/admin/src/views/sitestat/mapDetail.vue

@@ -2,13 +2,21 @@
   <div>
     <MapDetail ref="map" :markersData="originData" @choose="getDetailData">
       <el-card body-style="padding:0px;" slot="leftTop1">
-        <el-button type="text" size="mini" style="margin-left: 10px" icon="el-icon-back"
-          @click="switchStat">返回至站点分布</el-button>
+        <el-button
+          type="text"
+          size="mini"
+          style="margin-left: 10px"
+          icon="el-icon-back"
+          @click="switchStat"
+          >返回至站点分布</el-button
+        >
       </el-card>
 
       <el-card slot="leftTop">
         <el-row type="flex" justify="space-between">
-          <span style="font-size: 18px"><b>{{ info.siteName }}</b></span>
+          <span style="font-size: 18px"
+            ><b>{{ info.siteName }}</b></span
+          >
         </el-row>
 
         <el-divider></el-divider>
@@ -19,8 +27,11 @@
           <el-descriptions-item label="站点地址">{{
             info.address
           }}</el-descriptions-item>
-          <el-descriptions-item label="联系人" :labelStyle="{ 'text-align': 'right', width: '50px' }">{{ info.leadingOfficial
-          }}</el-descriptions-item>
+          <el-descriptions-item
+            label="联系人"
+            :labelStyle="{ 'text-align': 'right', width: '50px' }"
+            >{{ info.leadingOfficial }}</el-descriptions-item
+          >
           <el-descriptions-item label="联系电话">
             {{ info.leadingOfficialTelephone }}
           </el-descriptions-item>
@@ -32,23 +43,33 @@
         <el-divider></el-divider>
         <el-row type="flex" justify="space-around">
           <el-col :span="4">
-            <span style="font-size: 13px"><b>{{ info.deviceTotal }}</b></span><br />
+            <span style="font-size: 13px"
+              ><b>{{ info.deviceTotal }}</b></span
+            ><br />
             <span style="font-size: 12px">设备总数</span>
           </el-col>
           <el-col :span="4">
-            <span style="font-size: 13px"><b style="color: green">{{ info.onlineCount }}</b></span><br />
+            <span style="font-size: 13px"
+              ><b style="color: green">{{ info.onlineCount }}</b></span
+            ><br />
             <span style="font-size: 12px">在线</span>
           </el-col>
           <el-col :span="4">
-            <span style="font-size: 13px"><b style="color: red">{{ info.offlineCount }}</b></span><br />
+            <span style="font-size: 13px"
+              ><b style="color: red">{{ info.offlineCount }}</b></span
+            ><br />
             <span style="font-size: 12px">离线</span>
           </el-col>
           <el-col :span="4">
-            <span style="font-size: 13px"><b style="color: orange">{{ info.stopCount }}</b></span><br />
+            <span style="font-size: 13px"
+              ><b style="color: orange">{{ info.stopCount }}</b></span
+            ><br />
             <span style="font-size: 12px">停用</span>
           </el-col>
           <el-col :span="4">
-            <span style="font-size: 13px"><b style="color: grey">{{ info.unActiveCount }}</b></span><br />
+            <span style="font-size: 13px"
+              ><b style="color: grey">{{ info.unActiveCount }}</b></span
+            ><br />
             <span style="font-size: 12px">待激活</span>
           </el-col>
         </el-row>
@@ -56,39 +77,86 @@
         <el-divider></el-divider>
 
         <el-row type="flex" justify="space-around" style="margin-top: 10px">
-          <el-button type="primary" class="addclass" @click="switchList" size="mini">列表模式</el-button>
-
-          <el-button type="primary" class="addclass" size="mini" icon="el-icon-edit-outline">编辑站点</el-button>
-
-          <el-button type="primary" class="addclass" size="mini" @click="addDevice" icon="el-icon-plus">添加设备</el-button>
+          <el-button
+            type="primary"
+            class="addclass"
+            @click="switchList"
+            size="mini"
+            >列表模式</el-button
+          >
+
+          <el-button
+            type="primary"
+            class="addclass"
+            size="mini"
+            icon="el-icon-edit-outline"
+            >编辑站点</el-button
+          >
+
+          <el-button
+            type="primary"
+            class="addclass"
+            size="mini"
+            @click="addDevice"
+            icon="el-icon-plus"
+            >添加设备</el-button
+          >
         </el-row>
       </el-card>
 
-      <el-col slot="rightTop" style="box-shadow: 12px 2px 12px 12px rgba(0, 0, 0, 0.1)">
+      <el-col
+        slot="rightTop"
+        style="box-shadow: 12px 2px 12px 12px rgba(0, 0, 0, 0.1)"
+      >
         <el-row type="flex" justify="space-around">
-          <el-select style="padding: 5px" size="mini" @change="deviceStatuschange" v-model="deviceStatus"
-            placeholder="请选择设备状态">
-            <el-option v-for="($label, $value) in tableData.dict.deviceStatus" :key="$value" :label="$label"
-              :value="$value"></el-option>
+          <el-select
+            style="padding: 5px"
+            size="mini"
+            @change="deviceStatuschange"
+            v-model="deviceStatus"
+            placeholder="请选择设备状态"
+          >
+            <el-option
+              v-for="($label, $value) in tableData.dict.deviceStatus"
+              :key="$value"
+              :label="$label"
+              :value="$value"
+            ></el-option>
           </el-select>
           <span> </span>
         </el-row>
 
         <el-row>
-          <el-input size="mini" v-model="deviceName" @change="deviceNameChange" style="padding: 5px"
-            placeholder="请输入设备编码"></el-input>
+          <el-input
+            size="mini"
+            v-model="deviceName"
+            @change="deviceNameChange"
+            style="padding: 5px"
+            placeholder="请输入设备编码"
+          ></el-input>
         </el-row>
 
         <el-divider></el-divider>
 
-        <el-row v-for="(label, value, index) in tableData.dict.productId" :key="index" type="flex"
-          style="border-bottom: 1px solid #e8eaec; padding: 10px" justify="space-between">
+        <el-row
+          v-for="(label, value, index) in tableData.dict.productId"
+          :key="index"
+          type="flex"
+          style="border-bottom: 1px solid #e8eaec; padding: 10px"
+          justify="space-between"
+        >
           <!-- <img src="../../assets/images/排队机.png" alt="" /> -->
           <img :src="require(`../../assets/images/${label}.png`)" />
           <!-- <i style="font-size: 20px" class="el-icon-location-information"></i> -->
           <span style="font-size: 12px">{{ label }}</span>
-          <el-switch v-model="items[index]" :active-value="value" :inactive-value="0" @change="switchChange"
-            active-color="#2882ED" inactive-color="#8C8B8E">
+          <el-switch
+            v-model="items[index]"
+            :active-value="value"
+            :inactive-value="0"
+            @change="switchChange"
+            active-color="#2882ED"
+            inactive-color="#8C8B8E"
+          >
           </el-switch>
         </el-row>
       </el-col>