修改图片

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

@@ -33,7 +33,9 @@
         <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeName }}</span>
       </p>
     </div>
-    <div v-if="show" class="img"></div>
+    <div v-if="show"
+         :style="'background-image: url('+(MonitorInfo.monitorPic ? MonitorInfo.monitorPic :defaultImg)+');'"
+         class="img"></div>
     <div class="terminal">
       <!--el-form :model="form" class="demo-form-inline">
         <el-form-item label="传感器名称：">
@@ -42,19 +44,22 @@
       </el-form-->
       <div class="terminalList">
         <div v-for="(i,k) in controlList" class="item">
-          <div class="icon"></div>
+          <div :style="'background-image: url('+(i.devicePic ? i.devicePic :defaultImg1)+');'" class="icon"></div>
           <div class="title">{{ i.deviceName + ' - ' + i.deviceModeFunction.functionName }}</div>
           <div class="switch">
             <el-button
-              @click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)" type="primary" size="mini">执行
+              size="mini"
+              type="primary"
+              @click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">
+              执行
 
             </el-button>
-<!--            <el-switch-->
-<!--              v-model="i.deviceType==='1'"-->
-<!--              active-color="#1165a1"-->
-<!--              inactive-color="#1facf4"-->
-<!--              @change="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">-->
-<!--            </el-switch>-->
+            <!--            <el-switch-->
+            <!--              v-model="i.deviceType==='1'"-->
+            <!--              active-color="#1165a1"-->
+            <!--              inactive-color="#1facf4"-->
+            <!--              @change="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">-->
+            <!--            </el-switch>-->
           </div>
         </div>
       </div>
@@ -63,14 +68,14 @@
       <div v-for="i in acquisitionList" class="item">
         <div class="iconBg"></div>
         <div
-          :style="'background-image: url('+i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]+')'"
+          :style="'background-image: url('+i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))] ? i.deviceDataMap[Object.keys(i.deviceDataMap).find(e=> i.deviceDataMap[e].toString().includes('http'))]:''+')'"
           class="icon"></div>
         <div class="rightBg">
           <div class="title">{{ i.deviceName }}</div>
           <div style="position: absolute;left: 24%;top: 0px;width: 55%;height: 100%;">
             <div
               v-for="val in Object.keys(i.deviceDataMap).slice(0,6).filter(e=> !(i.deviceDataMap[e].toString().includes('http')))"
-              class="infoItem" :style="'height:'+(Object.keys(i.deviceDataMap).length<4 ? '100%':'50%')">
+              :style="'height:'+(Object.keys(i.deviceDataMap).length<4 ? '100%':'50%')" class="infoItem">
               <div class="span">{{ val }}:</div>
               <div class="spanBg"></div>
               <div class="num">{{ i.deviceDataMap[val] }}</div>
@@ -95,6 +100,8 @@ import {
   getMonitorById,
   publishControlCommand
 } from '@/api/board/equipment'
+import defaultImg from '@/assets/board/equipment/icon.png'
+import defaultImg1 from '@/assets/board/equipment/icon2.png'
 
 
 let getDeviceInterval = null
@@ -102,6 +109,8 @@ export default {
   components: {},
   data() {
     return {
+      defaultImg,
+      defaultImg1,
       show: false,
       monitorUnitId: '',
       data1: true,
@@ -128,7 +137,7 @@ export default {
     async getData() {
       await this.getTree()
     },
-    switchChange(functionIdentifier, deviceId, deviceCode,modeFunctionId) {
+    switchChange(functionIdentifier, deviceId, deviceCode, modeFunctionId) {
       console.log(this.controlList)
       console.log(this.controlList)
       this.$confirm('确定执行么？', '提示', {
@@ -137,10 +146,10 @@ export default {
         type: 'warning'
       }).then(() => {
         publishControlCommand({
-          deviceId:deviceId,
-          modeFunctionId:modeFunctionId,
-          deviceCode:deviceCode,
-          type:functionIdentifier,
+          deviceId: deviceId,
+          modeFunctionId: modeFunctionId,
+          deviceCode: deviceCode,
+          type: functionIdentifier,
         }).then(e => {
           if (e.code === 200) {
             this.$message({
@@ -148,7 +157,7 @@ export default {
               message: '成功!'
             });
             this.controlList.find(e => e.deviceId === deviceId).deviceType === '1' ? this.controlList.find(e => e.deviceId === deviceId).deviceType = '0' : this.controlList.find(e => e.deviceId === deviceId).deviceType = '1'
-          }else{
+          } else {
             this.$message({
               type: 'info',
               message: '网络错误'
@@ -163,7 +172,7 @@ export default {
       });
     },
     async getTree() {
-      if(this.$store.getters.sceneId){
+      if (this.$store.getters.sceneId) {
         const {data} = await treeList(this.$store.getters.sceneId)
         this.treeData = data
       }
@@ -192,9 +201,9 @@ export default {
       const {data} = await getMonitorById(e.id)
       this.MonitorInfo = data
     },
-    toHistory(e,i) {
+    toHistory(e, i) {
       console.log(i)
-      this.$router.push({path: "/board/senso",query:{id:e,deviceModeId:i}});
+      this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}});
     }
   },
   beforeDestroy() {
@@ -276,7 +285,6 @@ export default {
 }
 
 .img {
-  background-image: url("~@/assets/board/equipment/icon.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: absolute;
@@ -334,10 +342,11 @@ export default {
         background-repeat: no-repeat;
         background-size: 100% 100%;
         position: absolute;
-        top: 13%;
-        left: 3.3%;
-        width: 19.5%;
-        height: 73%;
+
+        top: 21%;
+        left: 5.8%;
+        width: 14.5%;
+        height: 57%;
       }
 
       .title {

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

@@ -4,7 +4,7 @@
     <div class="title">监控单元统计</div>
     <Chart ref="chart1" class="chart1"></Chart>
     <div class="chart1Right">
-      <p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'color:'+ chart1Color[k]">{{ i.name }}</p>
+      <p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'margin:0.6vw;color:'+ chart1Color[k]">{{ i.name }}</p>
     </div>
     <div class="chart1Table">
       <div style="background-color: #094170">
@@ -178,7 +178,7 @@ export default {
           },
         },
         polar: {
-          center: ["40%", "50%"],
+          center: ["30%", "50%"],
           radius: "100%", //图形大小
         },
       },
@@ -526,7 +526,7 @@ export default {
   padding: 0 12px;
   position: absolute;
   top: 17%;
-  left: 18%;
+  left: 15%;
 }
 
 .chart1Table {

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

@@ -11,17 +11,19 @@
                 <div class="icon1"></div>
                 <div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div>
                 <div class="title"> {{ topData.monitorUnitName }}</div>
-                <div class="info">
-                  <div class="info1">设备编号:</div>
-                  <div class="info2"> {{ topData.deviceCode }}</div>
-                </div>
-                <div class="info" style="left: 70vh;">
-                  <div class="info1">设备名称:</div>
-                  <div class="info2">{{ topData.deviceName }}</div>
-                </div>
-                <div class="info" style="left: 80vh;">
-                  <div class="info1">设备位置:</div>
-                  <div class="info2">{{ topData.deviceLocation }}</div>
+                <div class="infoDiv">
+                  <div class="info">
+                    <div class="info1">设备编号:</div>
+                    <div class="info2"> {{ topData.deviceCode }}</div>
+                  </div>
+                  <div class="info" >
+                    <div class="info1">设备名称:</div>
+                    <div class="info2">{{ topData.deviceName }}</div>
+                  </div>
+                  <div class="info" >
+                    <div class="info1">设备位置:</div>
+                    <div class="info2">{{ topData.deviceLocation }}</div>
+                  </div>
                 </div>
               </div>
             </template>
@@ -58,7 +60,7 @@
                   <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
                   </el-table-column>
                 </el-table>
-                <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="5" :total="total" background
+                <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
                                layout="prev, pager, next" @current-change="currentChange">
                 </el-pagination>
               </div>
@@ -161,6 +163,7 @@ export default {
       map.setFitView()
     },
     async currentChange(e) {
+      console.log(e)
       this.currentPage = e
       await this.setHistoryData()
     },
@@ -215,7 +218,7 @@ export default {
       } else {
         this.tableData = data.historyData?.dataList
         this.total = data.historyData?.count
-        this.currentPage = 1
+        // this.currentPage = 1
         this.deviceDataColumns = data.deviceDataColumns
         this.$nextTick(() => {
           this.show = true
@@ -344,22 +347,28 @@ export default {
   }
 
   .info {
-    position: absolute;
-    left: 60vh;
+    position: relative;
     color: #1fabf3;
     font-size: 1.5vh;
     height: 100%;
     white-space: nowrap;
+    display: inline-block;
+    height: 100%;
+    margin-right: 12px;
+    vertical-align: top;
 
     .info1 {
-      position: absolute;
-      bottom: 55%;
-      color: #fffc
+      position: relative;
+      line-height: 8.5vh;
+      color: #fffc;
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: 2px;
     }
 
     .info2 {
-      position: absolute;
-      top: 55%;
+      position: relative;
+      line-height: 8.5vh;
       color: #fff
     }
   }
@@ -369,4 +378,9 @@ export default {
   width: 100%;
   height: 50vh;
 }
+.infoDiv{
+  position: absolute;
+  left: 60vh;
+  height: 100%;
+}
 </style>

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

@@ -69,7 +69,7 @@
               <span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span>
 <!--              <el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>-->
             </div>
-            <div class="img"></div>
+            <div class="img" :style="'background-image: url('+(i.monitorPic ? i.monitorPic :defaultImg)+');'"></div>
           </div>
         </el-col>
       </el-row>
@@ -81,9 +81,9 @@
     </div>
   </div>
 </template>
-
 <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
+import defaultImg from '@/assets/board/smartScene/device.png'
 import {
   sceneAllNums,
   getLimitSubMonitorUnit,
@@ -97,6 +97,7 @@ export default {
   },
   data() {
     return {
+      defaultImg,
       num1: 0,
       num2: 0,
       alarmCountGroupAlarmType: [],
@@ -440,7 +441,6 @@ export default {
     }
 
     .img {
-      background-image: url("~@/assets/board/smartScene/device.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       position: absolute;