修改界面

ruoyi-ui/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

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

@@ -48,7 +48,6 @@
               type="primary"
               @click="switchChange(i.deviceModeFunction.functionIdentifier,i.deviceId,i.deviceCode,i.deviceModeFunction.modeFunctionId)">
               执行
-
             </el-button>
             <!--            <el-switch-->
             <!--              v-model="i.deviceType==='1'"-->
@@ -96,10 +95,9 @@
           </div>
           <div class="btn">
             <div class="btnC" style="top: 50%">
-              <el-button type="primary" @click="toHistory(i.deviceId,i.deviceModeId)">历史记录</el-button>
+              <el-button type="primary" @click="toHistory(i.deviceId,i.deviceModeId)" size="mini">历史记录</el-button>
             </div>
           </div>
-
         </div>
       </div>
     </div>
@@ -250,8 +248,8 @@ export default {
         time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
       },
       historyData: [],
-      historyTh:{},
+      historyTh: {},
-      isHistoryTable:true,
+      isHistoryTable: true,
       total: 100,
       comparisonDialog: false,
       sensorOptions: [],
@@ -365,17 +363,17 @@ export default {
       query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
       delete query.time
       const data = await selectHistoryAndTrendAnalysis(query)
-      if(query.type === '1'){
+      if (query.type === '1') {
 
         this.isHistoryTable = false
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           let series = Object.keys(data.mapName).map(e => {
-            if(data.mapName[e]){
+            if (data.mapName[e]) {
               return {
                 name: data.mapName[e],
                 type: 'line',
                 stack: 'Total',
-                data: data.tableDataInfo.rows.map(v=>[new Date(v.ts),v[e]])
+                data: data.tableDataInfo.rows.map(v => [new Date(v.ts), v[e]])
               }
             }
           })
@@ -401,9 +399,9 @@ export default {
           })
         })
       }
-      if(query.type === '2'){
+      if (query.type === '2') {
         this.isHistoryTable = true
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           this.historyData = data.tableDataInfo.rows
           this.historyTh = data.mapName
           this.total = data.tableDataInfo.total
@@ -807,7 +805,8 @@ export default {
   width: 100%;
   height: 50vh;
 }
-.historyChart{
+
+.historyChart {
   width: 100%;
   height: 50vh;
 }

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

@@ -147,12 +147,33 @@
     </div>
     <div v-if="isMap">
       <Chart ref="mapChart" class="mapChart"></Chart>
-      <el-button type="primary" style="position:absolute;bottom: 4%;left: 49%;transform: translateX(-100%)"
+      <div type="primary" class="backButton" @click="goBack">
-                 @click="goBack">返回
+        <svg t="1719391363434" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-      </el-button>
+             p-id="2674" width="200" height="200">
-      <el-button type="primary" style="position:absolute;bottom: 4%;left: 51%;transform: translateX(0%)"
+          <path
-                 @click="toRealMap">打开地图
+            d="M927.2 610.5c0 143-116.3 259.4-259.3 259.4H196.1c-12.9 0-23.4-10.4-23.4-23.4 0-12.9 10.4-23.4 23.4-23.4h471.7c117.2 0 212.6-95.4 212.6-212.6S785 397.8 667.8 397.8h-458l199.6 199.6c9.1 9.1 9.1 23.9 0 33-4.6 4.6-10.5 6.8-16.5 6.8s-11.9-2.3-16.5-6.8L137 391.1c-9.1-9.1-9.1-23.9 0-33l239.6-239.5c9.1-9.1 23.9-9.1 33 0s9.1 23.9 0 33L210 351.2h457.9c143 0 259.3 116.3 259.3 259.3z"
-      </el-button>
+            p-id="2675" fill="#ffffff"></path>
+        </svg>
+        <span>返回</span>
+      </div>
+      <div type="primary" class="realMapButton" @click="toRealMap">
+        <svg t="1719391119148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+             p-id="1489" width="200" height="200">
+          <path
+            d="M512 800.182857a18.651429 18.651429 0 0 1-12.8-5.485714c-10.971429-10.971429-261.485714-265.508571-261.485714-428.982857A271.725714 271.725714 0 0 1 512 91.428571a271.725714 271.725714 0 0 1 274.285714 274.285715c0 163.474286-250.514286 418.011429-261.485714 428.982857a18.651429 18.651429 0 0 1-12.8 5.485714zM512 128A235.154286 235.154286 0 0 0 274.285714 365.714286c0 128.731429 186.148571 334.994286 237.714286 389.485714 51.565714-54.491429 237.714286-260.754286 237.714286-389.485714A235.154286 235.154286 0 0 0 512 128z"
+            fill="#ffffff" p-id="1490"></path>
+          <path
+            d="M512 457.142857a91.428571 91.428571 0 1 1 91.428571-91.428571 91.428571 91.428571 0 0 1-91.428571 91.428571z m0-146.285714a54.857143 54.857143 0 1 0 54.857143 54.857143A54.857143 54.857143 0 0 0 512 310.857143zM512 932.571429c-208.822857 0-420.571429-43.885714-420.571429-128 0-65.097143 123.977143-96.914286 197.851429-109.714286a18.651429 18.651429 0 0 1 21.211429 14.994286 18.285714 18.285714 0 0 1-14.628572 21.211428c-123.245714 21.942857-167.862857 55.954286-167.862857 73.142857 0 36.571429 149.577143 91.428571 384 91.428572S896 841.142857 896 804.571429c0-17.92-44.617143-51.931429-167.862857-73.142858a18.285714 18.285714 0 0 1-14.628572-21.211428 18.651429 18.651429 0 0 1 21.211429-14.994286c73.142857 13.165714 197.851429 44.982857 197.851429 109.714286 0 83.748571-211.748571 127.634286-420.571429 127.634286z"
+            fill="#ffffff" p-id="1491"></path>
+        </svg>
+        <span>打开地图</span>
+      </div>
+      <!--      <el-button type="primary" style="position:absolute;bottom: 4%;left: 49%;transform: translateX(-100%)"-->
+      <!--                 @click="goBack">返回-->
+      <!--      </el-button>-->
+      <!--      <el-button type="primary" style="position:absolute;bottom: 4%;left: 51%;transform: translateX(0%)"-->
+      <!--                 @click="toRealMap">打开地图-->
+      <!--      </el-button>-->
     </div>
 
     <el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null">
@@ -811,7 +832,7 @@ export default {
         this.chartDblClick(this.code)
       });
     },
-    goBack(){
+    goBack() {
       this.chartDblClick(this.code)
     },
     async chartDblClick(val) {
@@ -961,7 +982,7 @@ export default {
 }
 ;
 </script>
-<style scoped>
+<style scoped lang="less">
 .title {
   position: absolute;
   top: 12%;
@@ -1106,4 +1127,56 @@ export default {
   width: 21%;
   /*transform: translateX(-50%);*/
 }
+
+.backButton {
+  position: absolute;
+  bottom: 2%;
+  left: 32%;
+  /*transform: translateX(-100%);*/
+  background-image: url("~@/assets/board/index/leftButtonBg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 18vw;
+  height: 4.865vw;
+  line-height: 4.865vw;
+  text-align: center;
+}
+
+.realMapButton {
+  position: absolute;
+  bottom: 2%;
+  left: 52%;
+  /*transform: translateX(-100%);*/
+  background-image: url("~@/assets/board/index/rightButtonBg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 18vw;
+  height: 4.865vw;
+  line-height: 4.865vw;
+  text-align: center;
+}
+
+.backButton, .realMapButton {
+
+  span {
+    position: absolute;
+    top: 60%;
+    left: 45%;
+    transform: translateY(-50%);
+    color: #fff;
+    font-size: 1.1vw;
+    font-weight: 600;
+  }
+
+  svg {
+    position: absolute;
+    top: 60%;
+    left: 30%;
+    transform: translateY(-50%);
+    color: #fff;
+    width: 1.5vw;
+    height: 1.5vw;
+  }
+
+}
 </style>