修改界面

ruoyi-ui/src/App.vue

@@ -25,4 +25,5 @@ export default {
 #app .theme-picker {
   display: none;
 }
+
 </style>

ruoyi-ui/src/views/board/GPS/index.vue

@@ -420,6 +420,13 @@ export default {
 </div>`
       });
       marker.on('click', async () => {
+        if(polygons.length >0 || circles.length >0){
+          map.remove(polygons)
+          map.remove(circles)
+          polygons = []
+          circles = []
+          return
+        }
         const {data} = await selectMonitorElectronic(e.deviceId)
         data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
           if (e.areaShapeFlag === '1') {

ruoyi-ui/src/views/board/equipment/index.vue

@@ -129,6 +129,7 @@
       </div>
       <el-table
         :data="historyData"
+        v-loading="loading1"
         v-if="isHistoryTable"
         style="width: 100%">
         <el-table-column
@@ -183,7 +184,7 @@
           <el-button type="primary" @click="getComparisonData">查询</el-button>
         </el-form-item>
       </el-form>
-      <div>
+      <div v-loading="loading2">
         <Chart ref="chart" class="chart"></Chart>
       </div>
     </el-dialog>
@@ -233,6 +234,8 @@ export default {
           {required: true, message: '请选择对比属性', trigger: 'change'}
         ]
       },
+      loading1:false,
+      loading2:false,
       show: false,
       monitorUnitId: '',
       data1: true,
@@ -358,11 +361,13 @@ export default {
       this.getHistoryData()
     },
     async getHistoryData() {
+      this.loading1 = true
       let query = JSON.parse(JSON.stringify(this.form))
       query.startTime = this.parseTime(this.form.time?.[0]?.getTime())
       query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
       delete query.time
       const data = await selectHistoryAndTrendAnalysis(query)
+      this.loading1 = false
       if (query.type === '1') {
 
         this.isHistoryTable = false
@@ -450,7 +455,9 @@ export default {
           }))
           delete query.time
           delete query.sensor
+          this.loading2 = true
           const data = await selectHistoryAndTrendAnalysis(query)
+          this.loading2 = false
           let chartData = {}
           data.tableDataInfo.rows.forEach(e => {
             if (chartData[e.deviceId]) {
@@ -465,7 +472,7 @@ export default {
           })
           let series = Object.keys(chartData).map(e => {
             return {
-              name: this.propArr.find(item => item.id === parseFloat(e)).name,
+              name: (this.propArr.find(item => item.id === parseFloat(e)) || {}).name,
               type: 'line',
               stack: 'Total',
               data: chartData[e]

ruoyi-ui/src/views/board/index/index.vue

@@ -179,11 +179,28 @@
     <el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="名称">
-          <el-input v-model="formInline.name" placeholder="名称"></el-input>
+          <el-select
-        </el-form-item>
+            v-model="value"
-        <el-form-item>
+            multiple
-          <el-button type="primary" @click="searchMap">查询</el-button>
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入关键词"
+            @change="setMarker2"
+            :remote-method="searchMap1"
+            :loading="loading">
+            <el-option
+              v-for="item in options"
+              :key="item.value.deviceId"
+              :label="item.label"
+              :value="item.value.deviceId">
+            </el-option>
+          </el-select>
+<!--          <el-input v-model="formInline.name" placeholder="名称"></el-input>-->
         </el-form-item>
+<!--        <el-form-item>-->
+<!--          <el-button type="primary" @click="searchMap">查询</el-button>-->
+<!--        </el-form-item>-->
       </el-form>
 
       <el-switch
@@ -295,6 +312,9 @@ export default {
   data() {
     return {
       containerPic,
+      value:[],
+      loading:false,
+      options:[],
       isRail: true,
       monitorUnitId: null,
       equipmentInfoDialog: false,
@@ -908,6 +928,54 @@ export default {
       map.add(marker);
       markers.push(marker)
     },
+    setMarker1(e) {
+      let marker = new AMap.Marker({
+        position: [e.longitude, e.latitude],
+        title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
+        offset: new AMap.Pixel(-15, -30),
+        content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
+ <path style="animation: ${(e.ifAlarm === '1') ? 'an1' : 'an2'} 2s ease-in-out infinite;" d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" p-id="4306">
+</path></svg></div>`
+      });
+      marker.on('click', async () => {
+        if (markerIds.includes(e.deviceId)) {
+          return
+        } else {
+          markerIds.push(e.deviceId)
+        }
+        const {data} = await selectMonitorElectronic(e.deviceId)
+        data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
+          if (e.areaShapeFlag === '1') {
+            this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
+          }
+          if (e.areaShapeFlag === '2') {
+            let arr = e.areaRange.split(',')
+            this.setCircle([arr[0], arr[1]], arr[2])
+          }
+        })
+      })
+      marker.on('dblclick', () => {
+        this.equipmentInfoDialog = true
+        this.equipmentInfo = e
+        this.monitorUnitId = e.monitorUnitId
+        // this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
+      });
+      map.add(marker);
+      markers.push(marker)
+    },
+    setMarker2(e) {
+      map.remove(markers)
+      map.remove(polygons)
+      map.remove(circles)
+      markers = []
+      e.forEach(v=>{
+        let arr = this.options.filter(r=>r.value.deviceId === v) || []
+        if(arr.length >0){
+          this.setMarker(arr[0].value)
+        }
+      })
+      map.setFitView(markers)
+    },
     getDeviceInfo() {
       this.$router.push({path: '/board/equipment', query: {monitorUnitId: this.monitorUnitId}})
     },
@@ -957,11 +1025,32 @@ export default {
       markers = []
       data.forEach(e => {
         if (e.latitude && e.longitude) {
-          this.setMarker(e)
+          this.setMarker1(e)
         }
       })
       map.setFitView(markers)
     },
+    async searchMap1(name) {
+      this.value = []
+      map.remove(markers)
+      map.remove(polygons)
+      map.remove(circles)
+      markers = []
+      this.loading = true;
+      const {data} = await selectDeviceByName({name:name})
+      this.loading = false;
+      let option = []
+      data.forEach(e => {
+        if (e.latitude && e.longitude) {
+          option.push({
+            label:e.deviceName,
+            value:e
+          })
+        }
+      })
+      console.log(option)
+      this.options = option
+    },
     exTable() {
       let query = {}
       query.startTime = this.parseTime(this.exTableTime?.[0]?.getTime())
@@ -1180,3 +1269,28 @@ export default {
 
 }
 </style>
+<style>
+
+@keyframes an1 {
+  0% {
+    fill:#3D93FD;
+  }
+  50% {
+    fill:#ffffff;
+  }
+  100% {
+    fill:#3D93FD;
+  }
+}
+@keyframes an2 {
+  0% {
+    fill:#ff0000;
+  }
+  50% {
+    fill:#ffffff;
+  }
+  100% {
+    fill:#ff0000;
+  }
+}
+</style>

ruoyi-ui/src/views/business/alarmRule/index.vue

@@ -185,14 +185,14 @@
 
     <!-- 添加或修改报警规则对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="660px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="130px" >
         <el-form-item label="规则名称" prop="alarmRuleName">
-          <el-input v-model="form.alarmRuleName" placeholder="请输入规则名称"/>
+          <el-input v-model="form.alarmRuleName" placeholder="请输入规则名称" style="width: 240px"/>
         </el-form-item>
 
         <el-form-item label="所属场景" prop="sceneId">
           <el-select v-model="form.sceneId" placeholder="请选择所属场景" @input="editedSceneChange"
-                     :disabled="sceneDisabled">
+                     :disabled="sceneDisabled" style="width: 240px">
             <el-option
               v-for="(scene, index) in editedScenes"
               :key="index"
@@ -206,7 +206,7 @@
 
 
         <el-form-item label="报警级别" prop="alarmLevelId">
-          <el-select v-model="form.alarmLevelId" placeholder="请选择报警级别">
+          <el-select v-model="form.alarmLevelId" placeholder="请选择报警级别" style="width: 240px">
             <el-option
               v-for="(alarmLevel, index) in editedAlarmLevels"
               :key="index"
@@ -217,7 +217,7 @@
 
         </el-form-item>
         <el-form-item label="报警类型" prop="alarmTypeId">
-          <el-select v-model="form.alarmTypeId" placeholder="请选择报警类型">
+          <el-select v-model="form.alarmTypeId" placeholder="请选择报警类型" style="width: 240px">
             <el-option
               v-for="(alarmType, index) in editedAlarmTypes"
               :key="index"
@@ -228,11 +228,11 @@
         </el-form-item>
 
         <el-form-item label="触发时间间隔" prop="triggerTimeFrame">
-          <el-input v-model="form.triggerTimeFrame" placeholder="请输入时间（分）"/>
+          <el-input v-model="form.triggerTimeFrame" placeholder="请输入时间（分）" style="width: 240px"/>
         </el-form-item>
 
         <el-form-item label="告警联系人" prop="phoneNumbers">
-          <el-select v-model="form.phoneNumbers" placeholder="请选择告警联系人">
+          <el-select v-model="form.phoneNumbers" placeholder="请选择告警联系人" style="width: 240px">
             <el-option
               v-for="(i, index) in phoneList"
               :key="index"
@@ -246,7 +246,7 @@
           <el-col :span="12">
             <el-form-item label="设备" prop="ruleDeviceId">
               <el-select v-model="form.ruleDeviceId" placeholder="请选择设备" :disabled="editedDisabled"
-                         @input="editedDeviceChange">
+                         @input="editedDeviceChange" style="width: 180px">
                 <el-option
                   v-for="(device, index) in editedDevices"
                   :key="index"
@@ -260,7 +260,7 @@
           <el-col :span="12">
             <el-form-item label="设备属性" prop="ruleModeFunctionIdentifier">
               <el-select v-model="form.ruleModeFunctionIdentifier" placeholder="请选择设备属性"
-                         :disabled="editedDisabled">
+                         :disabled="editedDisabled" style="width: 180px">
                 <el-option
                   v-for="(deviceModeFunction, index) in editedDeviceModeAttributes"
                   :key="index"
@@ -276,7 +276,7 @@
 
         <el-form-item label="触发条件" prop="triggerCondition">
           <el-select v-model="form.triggerCondition" placeholder="请选择触发条件" @input="triggerConditionChange"
-                     :disabled="editedDisabled">
+                     :disabled="editedDisabled" style="width: 240px">
             <el-option
               v-for="dict in dict.type.hw_alarm_rule_trigger_condition"
               :key="dict.value"
@@ -289,12 +289,12 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="A值" prop="triggerDataA">
-              <el-input v-model="form.triggerDataA" placeholder="请输入A值" :disabled="editedDisabled"/>
+              <el-input v-model="form.triggerDataA" placeholder="请输入A值" :disabled="editedDisabled" style="width: 240px"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="B值" prop="triggerDataB" v-if="triggerDataBVisible">
-              <el-input v-model="form.triggerDataB" placeholder="请输入B值" :disabled="editedDisabled"/>
+              <el-input v-model="form.triggerDataB" placeholder="请输入B值" :disabled="editedDisabled" style="width: 240px"/>
             </el-form-item>
           </el-col>
         </el-row>