修改界面

5 months ago · 72be646f66
parent e1e17b10ac
commit 72be646f66
3 changed files with 77 additions and 29 deletions
--- a/ruoyi-ui/src/views/board/GPS/index.vue
+++ b/ruoyi-ui/src/views/board/GPS/index.vue
@ -42,7 +42,7 @@
            </div>
            <div class="scrollTable" style="width: 40%">
              <el-button size="mini" type="primary" @click=" mapOrientation(item)">地图定点</el-button>
-              <el-button size="mini" type="primary" @click="equipmentInfo(item)">设备信息</el-button>
+              <el-button size="mini" type="primary" @click="toEquipmentInfo(item)">设备信息</el-button>
            </div>
          </div>
        </div>
@ -115,7 +115,40 @@
      </el-switch>
    </div>
    <el-dialog title="历史记录" :visible.sync="historyDialog">
-      <el-form :inline="true" :model="form" class="demo-form-inline">
+
+      <el-descriptions class="margin-top" :column="3" border>
+        <el-descriptions-item>
+          <template slot="label">
+            经度
+          </template>
+          {{ equipmentInfo.longitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            纬度
+          </template>
+          {{ equipmentInfo.latitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            设备名称
+          </template>
+          {{ equipmentInfo.deviceName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            城市名称
+          </template>
+          {{ equipmentInfo.deviceLocation }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            备注
+          </template>
+          {{ equipmentInfo.remark }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-top: 12px">
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="form.time"
@ -130,6 +163,7 @@
        </el-form-item>
      </el-form>
      <el-table
+        v-loading="loading"
        :data="historyData"
        style="width: 100%">
        <el-table-column
@ -196,6 +230,8 @@ export default {
  },
  data() {
    return {
+      loading:false,
+      equipmentInfo:{},
      num1: 0,
      num2: 0,
      num3: 0,
@ -443,7 +479,9 @@ export default {
    mapOrientation(e) {
      map.setZoomAndCenter(16, [e.longitude, e.latitude])
    },
-    equipmentInfo(e) {
+    toEquipmentInfo(e) {
+      this.equipmentInfo = e
+      console.log(e)

      this.historyDialog = true
      this.form = {
@ -456,11 +494,13 @@ export default {
      // this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`)
    },
    async getHistoryData() {
+      this.loading = true
      let query = this.form
      query.startTime = this.form.time?.[0]?.getTime()
      query.endTime = this.form.time?.[1]?.getTime()
      delete query.time
      const data = await selectBeaconDevicesHistory(query)
+      this.loading = false
      this.historyData = data.rows
      this.total = data.total
    }
--- a/ruoyi-ui/src/views/board/equipment/index.vue
+++ b/ruoyi-ui/src/views/board/equipment/index.vue
@ -60,7 +60,7 @@
      </div>
    </div>
    <div class="right">
-      <div v-for="i in acquisitionList" class="item">
+      <div v-for="(i,k) in acquisitionList" class="item">
        <div class="iconBg"></div>
        <div
          class="icon">
@ -82,6 +82,7 @@
          </el-image>
        </div>
        <div class="rightBg">
+          <div class="index">{{ k + 1 }}</div>
          <div class="title">{{ i.deviceName }}</div>
          <div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;">
            <div
@ -234,8 +235,8 @@ export default {
          {required: true, message: '请选择对比属性', trigger: 'change'}
        ]
      },
-      loading1:false,
-      loading2:false,
+      loading1: false,
+      loading2: false,
      show: false,
      monitorUnitId: '',
      data1: true,
@ -706,6 +707,7 @@ export default {
  width: 50%;
  height: 80%;
  overflow: auto;
+  padding-top: 0.5vw;

  .item {
    position: relative;
@ -747,6 +749,21 @@ export default {
      width: calc(90% - 8vh);
      height: 8vh;

+      .index {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-size: 0.6vw;
+        width: 1.5vw;
+        height: 1.5vw;
+        border-radius: 50%;
+        background-color: #1ca0e5;
+        line-height: 1.5vw;
+        text-align: center;
+      }
+
      .title {
        position: absolute;
        top: 50%;
--- a/ruoyi-ui/src/views/board/index/index.vue
+++ b/ruoyi-ui/src/views/board/index/index.vue
@ -178,7 +178,7 @@

    <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-form-item label="搜索">
          <el-select
            v-model="value"
            multiple
@ -312,7 +312,7 @@ export default {
  data() {
    return {
      containerPic,
-      isTown:false,
+      isTown: false,
      value: [],
      loading: false,
      options: [],
@ -856,10 +856,10 @@ export default {
      });
    },
    goBack() {
-      if(this.isTown){
+      if (this.isTown) {
        this.getMap({features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())})
        this.isTown = false
-      }else{
+      } else {
        this.chartDblClick(this.code)
      }
    },
@ -906,9 +906,11 @@ export default {
        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 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" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4306">
-</path></svg></div>`
+        content: `<div> <svg t="1719914685595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" style="width: 30px;height: 30px;" >
+<path d="M511.9 546c-93.9 0-170.2-76.4-170.2-170.2 0-93.9 76.4-170.2 170.2-170.2 93.9 0 170.2 76.4 170.2 170.2 0.1 93.9-76.3 170.2-170.2 170.2z m0-272.3c-56.4 0-102.1 45.7-102.1 102.1 0 56.4 45.7 102.1 102.1 102.1 56.4 0 102.1-45.7 102.1-102.1 0-56.4-45.7-102.1-102.1-102.1z m442.7 749H69.3c-13.1 0-25-7.5-30.7-19.3a33.9 33.9 0 0 1 4.1-36l136.2-170.2c6.5-8.1 16.2-12.8 26.6-12.8h68.1c18.8 0 34.1 15.2 34.1 34s-15.2 34.1-34.1 34.1h-51.7l-81.7 102.1h743.6L802 852.5h-51.7c-18.8 0-34.1-15.2-34.1-34.1 0-18.8 15.2-34 34.1-34h68.1c10.3 0 20.1 4.7 26.6 12.8l136.2 170.2a33.9 33.9 0 0 1 4.1 36c-5.7 11.8-17.6 19.3-30.7 19.3z m0 0" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4333"></path>
+<path d="M752.7 650.6c-13.8 0-26.2-8.3-31.5-21-5.3-12.7-2.4-27.4 7.4-37.1 119.7-119.7 119.7-313.7 0-433.4-119.6-119.6-313.7-119.6-433.3 0-119.7 119.7-119.7 313.7 0 433.4 8.7 8.6 12.1 21.2 9 33-3.1 11.8-12.4 21-24.2 24.2-11.8 3.1-24.4-0.3-33-9-107.3-107.1-139.4-268.3-81.4-408.4C223.7 92.2 360.4 0.8 511.9 0.8c151.6 0 288.3 91.3 346.2 231.4 58 140.1 25.8 301.3-81.4 408.4-6.3 6.4-15 10-24 10z m0 0" p-id="4334"></path><path d="M511.9 891.4c-9 0-17.7-3.6-24.1-10L247.1 640.6c-13.3-13.3-13.3-34.9 0-48.2 13.3-13.3 34.9-13.3 48.2 0L512 809.1l216.7-216.7c13.3-13.3 34.9-13.3 48.2 0 13.3 13.3 13.3 34.9 0 48.2L536 881.4c-6.4 6.4-15 10-24.1 10z m0 0" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4335"></path>
+</svg>
+</div>`
      });
      marker.on('click', async () => {
        if (markerIds.includes(e.deviceId)) {
@ -942,7 +944,7 @@ export default {
        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 style="animation:an1 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 () => {
@ -979,7 +981,7 @@ export default {
      e.forEach(v => {
        let arr = this.options.filter(r => r.value.deviceId === v) || []
        if (arr.length > 0) {
-          this.setMarker(arr[0].value)
+          this.setMarker1(arr[0].value)
        }
      })
      map.setFitView(markers)
@ -1279,25 +1281,14 @@ export default {

@keyframes an1 {
  0% {
-    fill: #3D93FD;
+    opacity: 1;
  }
  50% {
-    fill: #ffffff;
+    opacity: 0;
  }
  100% {
-    fill: #3D93FD;
+    opacity: 1;
  }
 }

-@keyframes an2 {
-  0% {
-    fill: #ff0000;
-  }
-  50% {
-    fill: #ffffff;
-  }
-  100% {
-    fill: #ff0000;
-  }
-}
 </style>