设备打点交互及详情

minggao/src/components/AMap/index.vue

@@ -1,10 +1,3 @@
-<!--
- * @Description:
- * @Autor: lin
- * @Date: 2023-06-06 16:23:26
- * @LastEditors: lin
- * @LastEditTime: 2024-04-10 10:53:48
--->
 <template>
   <div id="amap-container"></div>
 </template>

minggao/src/page/home/newHome/components/Title.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Description:统计图title
+ * @Autor: lin
+ * @Date: 2024-04-12 13:48:21
+ * @LastEditors: lin
+ * @LastEditTime: 2024-04-12 14:43:07
+-->
+<template>
+    <div class="box">
+      <span class="dot"></span>
+      <span class="text">{{ text }}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+      text:String
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    watch: {
+
+    },
+    methods: {
+
+    },
+    components: {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+.box{
+  display: flex;
+  align-items: center;
+  height: 2.6vh;
+  .dot{
+    display: inline-block;
+    width: 0.6rem;
+    height: 1.8rem;
+    border-radius: 1.7rem;
+    background: #3ACD9C;
+  }
+  .text{
+    color: #ffffffe6;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 2.8rem;
+    letter-spacing: 1px;
+    margin-left: 0.5rem;
+  }
+}
+</style>

minggao/src/page/home/newHome/index.vue

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:29:42
  * @LastEditors: lin
- * @LastEditTime: 2024-04-11 17:26:18
+ * @LastEditTime: 2024-04-12 13:56:38
 -->
 <template>
   <div class="bigBox">
@@ -68,7 +68,6 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 1;
     width: 100vw;
     height: 100vh;
   }

minggao/src/page/home/newHome/newHome.vue

@@ -3,23 +3,111 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:07
  * @LastEditors: lin
- * @LastEditTime: 2024-04-11 17:15:20
+ * @LastEditTime: 2024-04-12 17:06:28
 -->
 <template>
-  <div class="box" v-loading="loading">
+  <div class="box">
     <div class="mapBox" id="newHome"></div>
+    <transition leave-active-class='animate__animated animate__bounceOutLeft'
+      enter-active-class="animate__animated animate__bounceInLeft">
+      <div class="smallChar deviceInfo" v-if="defaultInfo">
+        <div class="charBox">
+          <div class="charTitle">
+            <Title text="设备信息"></Title>
+          </div>
+          <div class="charContent">
+            <div class="charList" v-for="item in deviceInfo" :key="item.device_type_id">
+              <div class="leftInfo">
+                <img :src="`${item.icon}`" alt="">
+                <div>{{ item.type_name }}</div>
+              </div>
+              <div class="leftInfo">
+                <span>{{ item.device_count }}台</span>
+                <img class="markerIcon" :src="`${markerObj[item.device_type_id].length == 0 ? eyeClose : eyeOpen}`" alt=""
+                  @click="setMarker(item.devices_info, item.device_type_id)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
     <!-- 点击地图圆圈的详情 -->
-    <div v-if="groupDialog" class="dialog animate__animated animate__bounceInDown">
-      <div class="dialog_content">
-        <div class="dialog_close" @click="groupDialog=false"></div>
+    <transition leave-active-class='animate__animated animate__bounceOutUp'
+      enter-active-class="animate__animated animate__bounceInDown">
+      <div v-if="groupDialog" class="dialog">
+        <div class="dialog_content">
+          <!-- 关闭按钮 -->
+          <div class="dialog_close" @click="groupDialog = false"></div>
+          <!-- 内容 -->
+          <!-- 组织详情 -->
+          <div class="contentInfo" v-if="checkType == 'circle'">
+            <div class="title">{{ groupInfo.org_name }}</div>
+            <div class="address">{{ groupInfo.org_address }}</div>
+            <div class="infoDesc">
+              <div>
+                <span class="num">{{ groupInfo.devices_count }}</span>
+                <span class="name">设备总数</span>
+              </div>
+              <div>
+                <span class="num">{{ groupInfo.pest_count }}</span>
+                <span class="name">害虫总数</span>
+              </div>
+              <div>
+                <span class="num">{{ groupInfo.pest_category_count }}</span>
+                <span class="name">害虫种类</span>
+              </div>
+              <div>
+                <span class="warningText" :style="`color:${warningObject[groupInfo.alarm_level].color}`">
+                  <span v-if="groupInfo.alarm_level == 0">{{ warningObject[groupInfo.alarm_level].text }}</span>
+                  <el-tooltip v-else :content="groupInfo.alarm_latest"
+                    :popper-class="warningObject[groupInfo.alarm_level].class" placement="top">
+                    <span>{{ warningObject[groupInfo.alarm_level].text }}</span>
+                  </el-tooltip>
+                </span>
+                <span class="name">报警状态</span>
+              </div>
+            </div>
+          </div>
+          <div class="contentInfo" v-else-if="checkType == 'device'">
+            <div class="deviceInfo">
+              <div class="leftInfo">
+                <img src="../../../assets/images/newHome/id.png" />
+                <div>设备ID</div>
+              </div>
+              <div class="rightInfo">{{ deviceDialogInfo.device_id }}</div>
+            </div>
+            <div class="deviceInfo">
+              <div class="leftInfo">
+                <img src="../../../assets/images/newHome/name.png" />
+                <div>设备名称</div>
+              </div>
+              <div class="rightInfo">{{ deviceDialogInfo.device_name }}</div>
+            </div>
+            <div class="deviceInfo">
+              <div class="leftInfo">
+                <img src="../../../assets/images/newHome/point.png" />
+                <div>设备定位</div>
+              </div>
+              <div class="rightInfo">{{ deviceDialogInfo.degrees }}</div>
+            </div>
+            <div class="deviceInfo">
+              <div class="leftInfo">
+                <img src="../../../assets/images/newHome/time.png" />
+                <div>最新上报时间</div>
+              </div>
+              <div class="rightInfo">{{ deviceDialogInfo.uptime_format }}</div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script>
+import Title from './components/Title.vue';
 export default {
-  name:'newHome',
+  name: 'newHome',
   props: {
 
   },
@@ -29,6 +117,18 @@ export default {
       getFunTimmer: [], // 函数的定时器
       overlayList: [],
       loading: true,
+      icon1: require('../../../assets/images/newHome/icon1.png'), // 设备信息图标
+      icon2: require('../../../assets/images/newHome/icon2.png'),
+      icon3: require('../../../assets/images/newHome/icon3.png'),
+      eyeClose: require('../../../assets/images/newHome/eyeclose.png'),
+      eyeOpen: require('../../../assets/images/newHome/eyeopen.png'),
+      marker2: require('../../../assets/images/newHome/2.png'),
+      marker3: require('../../../assets/images/newHome/3.png'),
+      marker4: require('../../../assets/images/newHome/4.png'),
+      marker8: require('../../../assets/images/newHome/8.png'),
+      marker9: require('../../../assets/images/newHome/9.png'),
+      marker10: require('../../../assets/images/newHome/10.png'),
+      defaultInfo: false,
       colorObject: {
         0: '#3ACD9C',
         1: '#FF5951',
@@ -39,31 +139,47 @@ export default {
       warningObject: [{
         level: 0,
         color: '#3ACD9C',
-        text: '无'
+        text: '无',
+        class: 'green'
       },
       {
         level: 1,
         color: '#FF5951',
-        text: 'Ⅰ'
+        text: 'Ⅰ',
+        class: 'red'
       },
       {
         level: 2,
         color: '#F4A72F',
-        text: 'Ⅱ'
+        text: 'Ⅱ',
+        class: 'origin'
       },
       {
         level: 3,
         color: '#1890FF',
-        text: 'Ⅲ'
+        text: 'Ⅲ',
+        class: 'blue'
       },
       {
         level: 4,
         color: '#FAFF0A',
-        text: 'Ⅳ'
+        text: 'Ⅳ',
+        class: 'yellow'
       }],
       map: null,
-      deviceInfo: [],
-      groupDialog: false
+      deviceInfo: [], // 设备信息
+      markerObj: {
+        2: [],
+        3:[],
+        4:[],
+        8:[],
+        9:[],
+        10:[],
+      }, //设备点位记录
+      groupDialog: false, // 圈圈 设备点位 告警 共用弹框
+      checkType: 'circle',
+      deviceDialogInfo:{}, //设备弹框内容
+      groupInfo: {}  // 圈圈弹框内容
     };
   },
   computed: {
@@ -78,6 +194,7 @@ export default {
   },
   mounted() {
     this.initMap();
+    this.getDeviceInfo();
   },
   watch: {
 
@@ -102,6 +219,64 @@ export default {
         })
       }
     },
+    // 获取设备信息
+    getDeviceInfo() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.screen.device_deatil',
+        data: this.qs.stringify({})
+      }).then(res => {
+        if (!res.data.data) {
+          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
+          return
+        }
+        this.defaultInfo = true;
+        this.deviceInfo = res.data.data;
+        this.deviceInfo.forEach(item => {
+          if (item.device_type_id == '2') {
+            item.icon = this.icon2
+          } else if (item.device_type_id == '3') {
+            item.icon = this.icon1
+          } else {
+            item.icon = this.icon3
+          }
+        })
+        console.log(this.markerObj);
+      })
+    },
+    // 点击某类设备，打点/取消打点
+    setMarker(list, type) {
+      let icon = this[`marker${type}`];
+      // 当前是打点
+      if (this.markerObj[type].length == 0) {
+        // 创建一个自定义图标对象
+        list.forEach(item => {
+          var customIcon = new AMap.Icon({
+            size: new AMap.Size(40, 53), // 设置图标的大小，单位：像素
+            image: icon, // 设置图标的URL
+          });
+          var marker = new AMap.Marker({
+            position: item.lng_lat, // 设置标记点的位置
+            icon:  customIcon// 设置自定义图标的URL
+          });
+          // 将标记点添加到地图上
+          marker.setMap(this.map);
+          marker.on('click', (e) => {
+            this.groupDialog = true;
+            this.checkType = 'device';
+            this.deviceDialogInfo = item;
+          })
+          this.markerObj[type].push(marker)
+        })
+      } else {
+        // 当前是取消
+        this.markerObj[type].forEach(marker => {
+          marker.setMap(null);
+        })
+        this.markerObj[type] = [];
+      }
+      console.log(this.markerObj)
+    },
     // 获取组织水波纹信息
     getGroupDeviceFun() {
       this.$axios({
@@ -129,17 +304,20 @@ export default {
       });
     },
     // 根据组织ID 获取组织设备告警信息
-    getInfoByGroupId(group_id) {
+    getInfoByGroupId(group) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.screen.group_pest_detail',
-        data: this.qs.stringify({ group_id })
+        data: this.qs.stringify({ group_id: group.org_id })
       }).then(res => {
-        console.log(res.data.data);
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return
         }
+        this.groupInfo = Object.assign(group, res.data.data);
+        this.groupDialog = true;
+        this.checkType = 'circle';
+        console.log(this.groupInfo);
       })
     },
     // 画水波纹
@@ -163,8 +341,7 @@ export default {
       // 水波纹点击查看组织详情
       circle.on('click', (e) => {
         let data = e.target._opts.extData;
-        this.getInfoByGroupId(data.org_id);
-        this.groupDialog = true;
+        this.getInfoByGroupId(data);
         console.log(data, '当前点击的圆圈是');
       })
       this.overlayList.push(circle);
@@ -198,7 +375,7 @@ export default {
       rippleCircle.on('click', (e) => {
         let data = e.target._opts.extData;
         console.log(data, '当前点击的水波纹是');
-        this.getInfoByGroupId(data.org_id);
+        this.getInfoByGroupId(data);
       })
       this.map.add(rippleCircle);
 
@@ -286,11 +463,36 @@ export default {
     },
   },
   components: {
-
+    Title
   },
 };
 </script>
+<style lang="less">
+.green {
+  width: 250px;
+  background: #3ACD9C !important;
+}
+
+.red {
+  width: 250px;
+  background: #FF5951 !important;
+}
 
+.origin {
+  width: 250px;
+  background: #F4A72F !important;
+}
+
+.blue {
+  width: 250px;
+  background: #1890FF !important;
+}
+
+.yellow {
+  width: 250px;
+  background: #FAFF0A !important;
+}
+</style>
 <style scoped lang="less">
 .box {
   position: relative;
@@ -305,31 +507,174 @@ export default {
     width: 100%;
     height: 100vh;
   }
-  .dialog{
+
+  .smallChar {
     position: absolute;
-    top: 12.72vh; /* 初始位置在视图上方外面 */
+    width: 21.8vw;
+    height: 31.3vh;
+    z-index: 20;
+    left: 6.2vw;
+    top: 13.2vh;
+    padding: 1%;
+    box-sizing: border-box;
+    background: url('../../../assets/images/newHome/smallChar.png') center center no-repeat;
+    background-size: 100% 100%;
+
+    .charBox {
+      position: relative;
+      overflow: hidden;
+
+      .charTitle {
+        position: relative;
+      }
+
+      .charContent {
+        margin-top: 1rem;
+
+        .charList {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #ffffffcc;
+          font-size: 1.4rem;
+          height: 3.3vh;
+          border-bottom: 1px solid #ffffff4d;
+          font-weight: 400;
+
+          .leftInfo {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img {
+              width: 2rem;
+              height: 2rem;
+              margin-right: .8rem;
+            }
+
+            span {
+              cursor: pointer;
+              color: #3ACD9C;
+              margin-right: .8rem;
+            }
+
+            .markerIcon {
+              cursor: pointer;
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .dialog {
+    position: absolute;
+    top: 12.72vh;
+    /* 初始位置在视图上方外面 */
     left: 31.1vw;
     z-index: 200;
     width: 37.8vw;
     height: 21.2vh;
     background: url('../../../assets/images/newHome/centerTopBg.png') center center no-repeat;
     background-size: 100% 100%;
-    &_content{
+
+    &_content {
       position: relative;
       width: 100%;
       height: 100%;
+      box-sizing: border-box;
+
+      .contentInfo {
+        width: 90%;
+        height: 100%;
+        margin: 4% auto 0 auto;
+
+        .title {
+          font-weight: 600;
+          color: #ffffff;
+          font-size: 1.8rem;
+        }
+
+        .address {
+          color: #ffffff80;
+          font-size: 1.2rem;
+          margin-top: 0.8%;
+        }
+
+        .infoDesc {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 1%;
+
+          div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            width: 24%;
+            height: 9.5vh;
+            background: linear-gradient(180deg, #163e8c1f 0%, #9daaccba 100%);
+
+            .num {
+              color: #ffffffe6;
+              font-size: 2rem;
+              font-weight: 600;
+            }
+
+            .warningText {
+              display: inline-block;
+              width: 100%;
+              font-size: 2rem;
+              font-weight: 600;
+              text-align: center;
+            }
+
+            .name {
+              color: #ffffff99;
+              font-size: 1.4rem;
+              font-weight: 400;
+              margin-top: 1%;
+            }
+          }
+        }
+        .deviceInfo{
+          display: flex;
+          align-items: center;
+          height: 3.7vh;
+          width: 21vw;
+          color: #ffffffcc;
+          font-size: 1.4rem;
+          border-bottom: 1px solid #ffffff4d;
+          .leftInfo{
+            display: flex;
+            width: 50%;
+            height: 100%;
+            align-items: center;
+            img{
+              width: 2rem;
+              height: 2rem;
+              margin-right: 1rem;
+            }
+          }
+        }
+      }
     }
-    &_close{
+
+    &_close {
       position: absolute;
       right: 2rem;
-      top: 2rem;
+      top: 0;
       z-index: 201;
       width: 4.8rem;
       height: 4.8rem;
       cursor: pointer;
       background: url('../../../assets/images/newHome/close.png') center center no-repeat;
       background-size: 100% 100%;
-      &:hover{
+
+      &:hover {
         background: url('../../../assets/images/newHome/closeHover.png') center center no-repeat;
         background-size: 100% 100%;
       }

minggao/src/page/warning/warninglist.vue

@@ -16,7 +16,7 @@
           </el-date-picker>
           <el-tag type="danger" size="small">预警次数：{{ total }}</el-tag>
           <el-button type="primary" @click="search" size="mini">查询</el-button>
-          <el-button type="primary" @click="addDialog = true;pestInfoList = []" size="mini">发布告警</el-button>
+          <el-button type="primary" @click="addDialog = true; pestInfoList = JSON.parse(JSON.stringify(initPestInfo))" size="mini">发布告警</el-button>
         </el-col>
       </el-row>
     </div>
@@ -60,39 +60,42 @@
           </el-select>
         </el-form-item>
         <el-form-item label="组织(可多选)" prop="group">
-          <el-select v-model="baseForm.group" filterable multiple  placeholder="请选择">
+          <el-select v-model="baseForm.group" filterable multiple placeholder="请选择">
             <el-option v-for="item in organizationList" :label="item.org_name" :value="item.org_name"
               :key="`group${item.id}`"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="预警等级" prop="alarm_level">
-          <el-select v-model="baseForm.alarm_level" filterable  placeholder="请选择">
+          <el-select v-model="baseForm.alarm_level" filterable placeholder="请选择">
             <el-option v-for="item in lavalList" :label="item.label" :value="item.value"
               :key="`laval${item.value}`"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="预警内容" prop="content_alias">
-          <el-row type="flex" justify="space-between" v-for="(item, index) in pestInfoList" :key="`pestList${index}`" class="pestRow">
+          <el-row type="flex" justify="space-between" v-for="(item, index) in pestInfoList" :key="`pestList${index}`"
+            class="pestRow">
             <el-col :span="8">
               <el-select v-model="item.name" filterable placeholder="请选择" @change="changePestName(item, 'name')">
                 <el-option v-for="pest in pestLibrary" :label="pest.pest_name" :value="pest.pest_name"
-              :key="pest.id"></el-option>
+                  :key="pest.id"></el-option>
               </el-select>
             </el-col>
             <el-col :span="6">
-              <el-input type="number" v-model="item.num" placeholder="请输入数量" @input="changePestName(item, 'num')"></el-input>
+              <el-input type="number" v-model="item.num" placeholder="请输入数量"
+                @input="changePestName(item, 'num')"></el-input>
             </el-col>
             <el-col :span="7">
               <el-checkbox v-model="item.is_new" @change="changePestName(item, 'is_new')">是否新记录物种</el-checkbox>
             </el-col>
             <el-col :span="2">
-              <el-button type="primary" v-if="index == pestInfoList.length - 1" @click="addPestFun" circle icon="el-icon-plus"></el-button>
+              <el-button type="primary" v-if="index == pestInfoList.length - 1" @click="addPestFun" circle
+                icon="el-icon-plus"></el-button>
               <el-button type="danger" v-else @click="delPestFun(index)" circle icon="el-icon-delete"></el-button>
             </el-col>
           </el-row>
         </el-form-item>
         <el-form-item prop="content_alias">
-          <el-input type="textarea" placeholder="请输入"  v-model="baseForm.content_alias"></el-input>
+          <el-input type="textarea" placeholder="请输入" v-model="baseForm.content_alias"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -148,15 +151,20 @@ export default {
         group: '', //
         alarm_level: '', //
       },
-      pestLibrary:[], //害虫列表
+      pestLibrary: [], //害虫列表
       organizationList: [], // 组织列表
       addDialog: false,
       baseForm: {
         category: '', // 类别
         group: '', // 组织,
         alarm_level: '', // 预警等级
-        content_alias:'', // 预警内容
+        content_alias: '', // 预警内容
       },
+      initPestInfo: [{
+        name: '',
+        num: '',
+        is_new: false
+      }],
       pestInfoList: [{
         name: '',
         num: '',
@@ -240,13 +248,15 @@ export default {
       console.log(this.pestInfoList)
       let pestStr = ''; //害虫详情字段
       let is_newNum = 0;
+      let newNumStr = '';
       this.pestInfoList.forEach(pest => {
-        if(pest.is_new) {
-          is_newNum ++
+        if (pest.is_new) {
+          is_newNum++;
+          newNumStr = `${newNumStr}【${pest.name}】${pest.num}头;`
         }
         pestStr = `${pestStr}【${pest.name}】${pest.num}头;`
       });
-      this.baseForm.content_alias = `${is_newNum == 0 ? '' : `发现新物种【${is_newNum}】种;`}${pestStr}`;
+      this.baseForm.content_alias = `发现有害生物【${this.pestInfoList.length}】种有：${pestStr}${is_newNum > 0 ? `其中新物种有：${newNumStr}` : ''}请注意防范.`;
     },
     search() {
       this.queryInfo.page = 1;
@@ -289,27 +299,31 @@ export default {
       this.$refs[formName].validate(valid => {
         if (valid) {
           this.dialogSubmitLoading = true;
-            // 添加
+          // 添加
           const payload = omit(this.baseForm, []);
           payload.group = payload.group.join(',');
-            this.$axios({
-              method: 'POST',
-              url: '/api/api_gateway?method=data_report.alerm.add_alerm',
-              data: this.qs.stringify(payload)
-            })
-              .then(res => {
-                this.$message({
-                  type: 'success',
-                  message: '新增成功!',
-                  duration: 1500
-                });
-                this.resetForm(formName);
-                this.pestInfoList = [];
-                this.search();
-              })
-              .finally(() => {
-                this.dialogSubmitLoading = false;
+          this.$axios({
+            method: 'POST',
+            url: '/api/api_gateway?method=data_report.alerm.add_alerm',
+            data: this.qs.stringify(payload)
+          })
+            .then(res => {
+              this.$message({
+                type: 'success',
+                message: '新增成功!',
+                duration: 1500
               });
+              this.resetForm(formName);
+              this.pestInfoList = [{
+                name: '',
+                num: '',
+                is_new: false
+              }];
+              this.search();
+            })
+            .finally(() => {
+              this.dialogSubmitLoading = false;
+            });
         } else {
           console.log('error submit!!');
           return false;
@@ -322,9 +336,9 @@ export default {
         category: '', // 类别
         group: '', // 组织,
         alarm_level: '', // 预警等级
-        content_alias:'', // 预警内容
+        content_alias: '', // 预警内容
       },
-      this.addDialog = false;
+        this.addDialog = false;
     },
 
     getOrganizationList() {
@@ -351,15 +365,17 @@ export default {
 <style scoped lang="less">
 .updateForm {
 
-/deep/ .el-select,
-/deep/ .el-date-editor {
-  width: 100%;
-}
+  /deep/ .el-select,
+  /deep/ .el-date-editor {
+    width: 100%;
+  }
 }
+
 .form-page {
-  .pestRow{
+  .pestRow {
     margin-bottom: 10px;
   }
+
   &__search {
     overflow: hidden;