完善界面

src/api/index.ts

@@ -21,6 +21,10 @@ export interface GET_FIRE_OR_FLOOD_PARAM {
   warehouseId: number; // 仓库id
 }
 
+export interface GET_HEAT_IMAGING_PARAM {
+  id: number; // 热成像设备id
+}
+
 // 查询仓库列表及仓库下的摄像头
 export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param });
 
@@ -32,3 +36,6 @@ export const getMbpsByTime = (param: GET_MBPS_BY_TIME_PARAM) => http.post('/mbps
 
 // 查询火灾水灾警报
 export const getFireOrFlood = (param: GET_FIRE_OR_FLOOD_PARAM) => http.post('/mbps/selFireOrFlood', { param });
+
+// 查询热成像信息
+export const getHeatImaging = (param: GET_HEAT_IMAGING_PARAM) => http.post('/mbps/selHeatImaging', { param });

src/components/amount.vue

@@ -57,7 +57,28 @@ export default defineComponent({
     },
   },
 
+  watch: {
+    carOfInLists: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+
+    carOfOutLists: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+  },
+
   created() {
+    this.getMbpsByTime();
     setInterval(() => {
       // 获取数据
       this.getMbpsByTime();
@@ -87,7 +108,7 @@ export default defineComponent({
         this.carOfInLists = data.carOfInsByTime;
         this.carOfOutLists = data.carOfOutsByTime;
         // 绘制图表
-        this.getOptions();
+        // this.getOptions();
       } catch (error) {
         console.log("error: ", error);
       }
@@ -109,7 +130,7 @@ export default defineComponent({
           },
         },
         grid: {
-          left: "0",
+          left: "7%",
           right: "6%",
           top: "15%",
           bottom: "0",
@@ -117,12 +138,25 @@ export default defineComponent({
         },
         xAxis: {
           type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           boundaryGap: false,
           data: timeArray,
         },
         yAxis: {
           type: "value",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           name: "数量",
+          nameTextStyle: {
+            color: "#fff",
+          },
           min: 0,
           splitLine: {
             show: true,

src/components/curve.vue

@@ -69,7 +69,28 @@ export default defineComponent({
     },
   },
 
+  watch: {
+    weightOfInLists: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+
+    weightOfOutLists: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+  },
+
   created() {
+    this.getMbpsByTime(this.currentIndex);
     setInterval(() => {
       // 获取数据
       this.getMbpsByTime(this.currentIndex);
@@ -105,7 +126,7 @@ export default defineComponent({
         this.weightOfInLists = data.weightOfInsByTime;
         this.weightOfOutLists = data.weightOfOutsByTime;
         // 绘制图表
-        this.getOptions();
+        // this.getOptions();
       } catch (error) {
         console.log("error: ", error);
       }
@@ -135,12 +156,25 @@ export default defineComponent({
         },
         xAxis: {
           type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           boundaryGap: false,
           data: timeArray,
         },
         yAxis: {
           type: "value",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           name: "重量（吨）",
+          nameTextStyle: {
+            color: "#fff",
+          },
           min: 0,
           splitLine: {
             show: true,

src/components/finance.vue

@@ -44,11 +44,24 @@ export default defineComponent({
         },
         xAxis: {
           type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           data: ["2016", "2017", "2018", "2019", "2020"],
         },
         yAxis: {
           type: "value",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           name: "万",
+          nameTextStyle: {
+            color: "#fff",
+          },
           splitLine: {
             show: true,
             lineStyle: {
@@ -60,6 +73,7 @@ export default defineComponent({
           {
             data: [300, 250, 280, 220, 290],
             type: "bar",
+            barCategoryGap: "50%",
             itemStyle: {
               barBorderRadius: [10, 10, 0, 0], //柱形图圆角，初始化效果
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

src/components/footer-bar.vue

@@ -65,7 +65,6 @@ export default defineComponent({
         }
       });
       this.$router.push({ path: item.path, query: item.param });
-      this.$emit("showMonitor");
     },
   },
 });

src/components/heat.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="box-bg">
+    <img :src="src" :style="{ width: '426rem', height: '200rem',margin: '10rem 35rem' }" v-if="src" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { getHeatImaging } from "api/index";
+
+export default defineComponent({
+  name: "heatDiagram",
+  data() {
+    return {
+      myCharts: {},
+      src: "",
+    };
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getHeatImaging();
+    }, 5000);
+  },
+
+  mounted() {
+    // 获取数据
+    this.getHeatImaging();
+  },
+
+  methods: {
+    /** 查询温度与湿度
+     * @param {number} id 热成像设备id
+     */
+    async getHeatImaging() {
+      try {
+        const param = {};
+        const data = await getHeatImaging(param);
+        this.src = data.imageData;
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.heatDiagram {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/humidity.vue

@@ -104,10 +104,24 @@ export default defineComponent({
         },
         xAxis: {
           type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           data: timeArray,
         },
         yAxis: {
           type: "value",
+          name: "%RH",
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           splitLine: {
             show: true,
             lineStyle: {

src/components/memorabilia.vue

@@ -1,69 +1,76 @@
 <template>
   <div class="roll">
-    <ul :class="{marquee_top:animate}">
-      <li :key="index" class="flex flex-col justify-items-center" v-for="(item, index) in msg">
-        <div class="flex flex-nowrap justify-between mb-12 box-title">
-          <span class="title">{{item.title}}</span>
-          <span class="time">{{ item.time }}</span>
+    <div class="box-bg">
+      <div style="overflow:hidden">
+        <div class="matter" id="memorabilia">
+          <div :key="index" class="content" v-for="(detail,index) in details">
+            <div class="firewall">
+              <div class="firewall1">{{detail.title}}</div>
+              <div class="firewall2">{{detail.time}}</div>
+            </div>
+            <div class="firewall3">
+              <p>{{detail.describe}}</p>
+            </div>
+          </div>
+          <div :key="index" class="content" v-for="(detail,index) in details">
+            <div class="firewall">
+              <div class="firewall1">{{detail.title}}</div>
+              <div class="firewall2">{{detail.time}}</div>
+            </div>
+            <div class="firewall3">
+              <p>{{detail.describe}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-        <div class="txt">{{ item.desc }}</div>
-      </li>
-    </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'memorabilia',
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "memorabilia",
   data() {
     return {
-      msg: [
+      details: [
+        {
+          title: "防火墙",
+          time: "2021-04-08",
+          describe:
+            "有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息,这使得用户可以更好的控制",
+        },
         {
-          title: '防火墙',
-          time: '2021-03-08',
-          desc: '及时发现并处理计算机网络运行时可能存在的安全风险、数据传输等问题，其中处理措施包括隔离与保护，同时可对计算机网络安全当中的各项操作实施记录与检测，以确保计算机网络运行的安全性，保障用户资料与信息的完整性，为用户提供更好、更安全的计算机网络使用体验。',
+          title: "代理服务器",
+          time: "2021-04-08",
+          describe:
+            "代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种",
         },
         {
-          title: '应用层',
-          time: '2021-04-08',
-          desc: '七层OSI模型的第七层。应用层直接和应用程序接口并提供常见的网络应用服务。应用层也向表示层发出请求。应用层是开放系统的最高层,是直接为应用进程提供服务的。其作用是在实现多个系统应用进程相互通信的同时,完成一系列业务处理所需的服务.其服务元素分为两类:公共应用服务元素CASE和特定应用服务元素SASE.',
+          title: "包过滤",
+          time: "2021-04-08",
+          describe:
+            "包过滤是处理网络上基于packet-by-packet流量的设备,包过滤设备允许或阻止包,典型的实施方法是通过标准的路由器,包过滤是几种不同防火墙的类型之一.",
         },
         {
-          title: '网络层',
-          time: '2021-05-08',
-          desc: '网络层是OSI参考模型中的第三层，介于传输层和数据链路层之间，它在数据链路层提供的两个相邻端点之间的数据帧的传送功能上，进一步管理网络中的数据通信，将数据设法从源端经过若干个中间节点传送到目的端，从而向运输层提供最基本的端到端的数据传送服务。主要内容有：虚电路分组交换和数据报分组交换、路由选择算法、阻塞控制方法、X.25协议、综合业务数据网（ISDN）、异步传输模式（ATM）及网际互连原理与实现。',
+          title: "电路级网关",
+          time: "2021-04-08",
+          describe:
+            "电路级网关用来监控受信任的客户或服务器与不受信任的主机间的TCP握手信息,这样来决定这个会话是否悠哉游哉,电路级网关是在OSI模型中会话层上来过滤数据包",
         },
         {
-          title: '运输层',
-          time: '2021-06-08',
-          desc: '增加复用和分用的功能、 消除网络层的不可靠性、 提供从源端主机到目的端主机的可靠的、与实际使用的网络无关的信息传输。运输层是ISO/OSI的第四层，处于通信子网和资源子网之间，是整个协议层次中最核心的一层。',
+          title: "代理服务器",
+          time: "2021-04-08",
+          describe:
+            "代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种.",
         },
       ],
-      animate: false,
-      setInTime: '', // 定时器
     };
   },
 
-  mounted() {
-    this.setInTime = setInterval(this.showMarquee, 3000);
-  },
-
-  destroyed() {
-    clearInterval(this.setInTime); // 页面销毁时清除定时器
-  },
-
-  methods: {
-    // 滚动栏滚动
-    showMarquee() {
-      this.animate = true;
-      setTimeout(() => {
-        this.msg.push(this.msg[0]);
-        this.msg.shift();
-        this.animate = false;
-      }, 500);
-    },
-  },
-};
+  methods: {},
+});
 </script>
 
 <style scoped>
@@ -73,7 +80,7 @@ export default {
   position: relative;
 }
 
-.roll ul {
+.roll .box-bg {
   width: 80%;
   height: 88%;
   position: absolute;
@@ -82,7 +89,28 @@ export default {
   overflow: hidden;
 }
 
-.roll ul li {
+.memorabilia {
+  width: 1440rem;
+  height: 1110rem;
+}
+
+.matter {
+  animation: myMove 20s linear infinite;
+  animation-fill-mode: forwards;
+  overflow: hidden;
+}
+/*文字无缝滚动*/
+@keyframes myMove {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-392rem);
+  }
+}
+
+.content {
+  color: #fff;
   width: 100%;
   height: 79rem;
   background: url("../assets/img/memorabilia-bg.png") no-repeat;
@@ -91,31 +119,28 @@ export default {
   padding: 6rem 20rem 0;
 }
 
-.box-title {
-  color: #fff;
+.firewall {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-
-.box-title .title {
+.firewall1 {
   font-size: 16rem;
 }
-
-.box-title .time {
-  font-size: 10rem;
-}
-
-.txt {
+.firewall2 {
   font-size: 12rem;
+}
+.firewall3 {
   color: #19a2cc;
-  line-height: 20rem;
-  text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+  -webkit-line-clamp: 2;
   overflow: hidden;
 }
-
-.marquee_top {
-  transition: all 2s ease-in;
-  /* margin-top: -26px; */
+.dashboardFather {
+  display: flex;
+}
+.matter {
+  overflow: auto;
 }
 </style>

src/components/side-item.vue

@@ -29,6 +29,6 @@ export default defineComponent({
 }
 
 .box-bg {
-  background: rgba(0, 0, 0, 0.3);
+  /* background: rgba(0, 0, 0, 0.3); */
 }
 </style>

src/components/statistics.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="statistics"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "statistics",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const statistics = document.getElementById("statistics");
+      this.myCharts = echarts.init(statistics);
+      this.myCharts.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "20%",
+          bottom: "0",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          data: ["2016", "2017", "2018", "2019", "2020"],
+        },
+        yAxis: {
+          type: "value",
+          show: false,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            data: [300, 150, 180, 120, 200],
+            type: "bar",
+            barCategoryGap: "50%",
+            showBackground: true,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.statistics {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/temperature.vue

@@ -104,10 +104,24 @@ export default defineComponent({
         },
         xAxis: {
           type: "category",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           data: timeArray,
         },
         yAxis: {
           type: "value",
+          name: "℃",
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
           splitLine: {
             show: true,
             lineStyle: {

src/components/totalCargo.vue

@@ -33,69 +33,116 @@ export default defineComponent({
         series: [
           {
             type: "gauge",
-            startAngle: 90,
-            endAngle: -270,
+            center: ["50%", "60%"],
+            startAngle: 200,
+            endAngle: -20,
+            min: 0,
             max: 10000,
-            pointer: {
-              show: false,
+            splitNumber: 5,
+            itemStyle: {
+              color: "#FFAB91",
             },
             progress: {
               show: true,
-              overlap: false,
-              roundCap: true,
-              clip: false,
-              itemStyle: {
-                borderWidth: 1,
-                borderColor: "#ccc",
-                color: "#FAC858",
+              width: -20,
             },
+
+            pointer: {
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                width: 50,
+                width: -20,
               },
             },
             axisTick: {
-              show: true,
+              distance: 30,
+              splitNumber: 5,
+              lineStyle: {
+                width: 2,
+                color: "#999",
+              },
             },
             splitLine: {
-              length: 15,
+              distance: 30,
+              length: 14,
               lineStyle: {
-                width: 2,
+                width: 3,
                 color: "#999",
               },
             },
             axisLabel: {
-              distance: 60,
+              show: false,
+              distance: 0,
               color: "#999",
               fontSize: 20,
             },
+            anchor: {
+              show: false,
+            },
+            title: {
+              fontSize: 14,
+              color: "#fff",
+              lineHeight: 34,
+              padding: [0, 6],
+              borderColor: "#fff",
+              borderWidth: 1,
+              borderRadius: 15,
+            },
+            detail: {
+              valueAnimation: true,
+              width: "60%",
+              lineHeight: 40,
+              height: "15%",
+              borderRadius: 8,
+              offsetCenter: [0, "-15%"],
+              fontSize: 18,
+              fontWeight: "bolder",
+              color: "auto",
+            },
             data: [
               {
                 value: 4530.88,
-                name: "Perfect",
+                name: "总货物",
                 title: {
-                  offsetCenter: ["0%", "-30%"],
+                  offsetCenter: ["0%", "-10%"],
                 },
                 detail: {
-                  offsetCenter: ["0%", "-20%"],
+                  offsetCenter: ["0%", "70%"],
+                },
+              },
+            ],
           },
+
+          {
+            type: "gauge",
+            center: ["50%", "60%"],
+            startAngle: 200,
+            endAngle: -20,
+            min: 0,
+            max: 60,
             itemStyle: {
-                  color: "#FAC858",
+              color: "#FD7347",
             },
+            progress: {
+              show: true,
+              width: 8,
             },
-            ],
-            title: {
-              fontSize: 18,
+
+            pointer: {
+              show: false,
             },
-            detail: {
-              width: 50,
-              height: 14,
-              fontSize: 14,
-              color: "auto",
-              borderColor: "auto",
-              borderRadius: 20,
-              borderWidth: 1,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
             },
           },
         ],

src/views/jht.vue

@@ -39,6 +39,13 @@
   <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
 
   <!-- 监控 -->
+  <img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style />
+  <img
+    @click="show = true"
+    class="monitor—btn monitor—btn1"
+    src="../assets/img/monitor-left.png"
+    style
+  />
   <div class="vedio" v-show="show">
     <div class="head">
       <div class="camera">摄像头监控视频</div>
@@ -97,16 +104,24 @@ export default defineComponent({
       showIndex: 0,
     };
   },
-  methods: {
-    showMonitor() {
-      console.log("显示");
-      this.show = true;
-    },
-  },
+  methods: {},
 });
 </script>
 
 <style scoped>
+.monitor—btn {
+  position: absolute;
+  right: 0;
+  top: 28%;
+  z-index: 99;
+  width: 48rem;
+  height: 50rem;
+}
+
+.monitor—btn1 {
+  top: 20%;
+}
+
 .frame {
   position: fixed;
   left: 0;

src/views/repo-5.vue

@@ -26,19 +26,20 @@
       <side-item title="货物吞吐量曲线">
         <curve />
       </side-item>
-      <side-item title="进出车次统计">
-        <amount />
+      <side-item title="园区人员统计表">
+        <statistics />
       </side-item>
-      <side-item title="园区财务统计表">
-        <finance />
+      <side-item title="仓库热力图">
+        <heat />
       </side-item>
     </template>
   </container>
 
   <!-- 底部区域 -->
-  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+  <footer-bar :showIndex="showIndex"></footer-bar>
 
   <!-- 监控 -->
+  <img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style />
   <div class="vedio" v-show="show">
     <div class="head">
       <div class="camera">摄像头监控视频</div>
@@ -70,8 +71,8 @@ import Container from "comp/content.vue";
 import SideItem from "comp/side-item.vue";
 import FooterBar from "comp/footer-bar.vue";
 import Curve from "comp/curve.vue";
-import Amount from "@/components/amount.vue";
-import Finance from "@/components/finance.vue";
+import Heat from "@/components/heat.vue";
+import Statistics from "@/components/statistics.vue";
 import Humidity from "@/components/humidity.vue";
 import Temperature from "@/components/temperature.vue";
 import UsableArea from "@/components/usableArea.vue";
@@ -84,8 +85,8 @@ export default defineComponent({
     SideItem,
     FooterBar,
     Curve,
-    Amount,
-    Finance,
+    Heat,
+    Statistics,
     Humidity,
     Temperature,
     UsableArea,
@@ -97,12 +98,7 @@ export default defineComponent({
       showIndex: 3,
     };
   },
-  methods: {
-    showMonitor() {
-      console.log("显示");
-      this.show = true;
-    },
-  },
+  methods: {},
 });
 </script>
 
@@ -149,6 +145,15 @@ export default defineComponent({
   height: 20rem;
 }
 
+.monitor—btn {
+  position: absolute;
+  right: 0;
+  top: 20%;
+  z-index: 99;
+  width: 48rem;
+  height: 50rem;
+}
+
 .monitor {
   width: 446rem;
   height: 287rem;

src/views/repo-yj.vue

@@ -10,32 +10,36 @@
       <side-item title="湿度曲线">
         <humidity />
       </side-item>
-      <side-item title="仓库吞吐量对比图">
-        <warehouse />
+      <side-item title="使用面积、货物占比">
+        <div class="flex justify-between" style="width:100%;height:100%">
+          <usable-area />
+          <total-cargo />
+        </div>
       </side-item>
     </template>
 
     <template v-slot:center>
-      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/3"></iframe>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/4"></iframe>
     </template>
 
     <template v-slot:right>
       <side-item title="货物吞吐量曲线">
         <curve />
       </side-item>
-      <side-item title="进出车次统计">
-        <amount />
+      <side-item title="园区人员统计表">
+        <statistics />
       </side-item>
-      <side-item title="园区财务统计表">
-        <finance />
+      <side-item title="仓库热力图">
+        <heat />
       </side-item>
     </template>
   </container>
 
   <!-- 底部区域 -->
-  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+  <footer-bar :showIndex="showIndex"></footer-bar>
 
   <!-- 监控 -->
+  <img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style />
   <div class="vedio" v-show="show">
     <div class="head">
       <div class="camera">摄像头监控视频</div>
@@ -67,11 +71,12 @@ import Container from "comp/content.vue";
 import SideItem from "comp/side-item.vue";
 import FooterBar from "comp/footer-bar.vue";
 import Curve from "comp/curve.vue";
-import Amount from "@/components/amount.vue";
-import Finance from "@/components/finance.vue";
-import Warehouse from "@/components/warehouse.vue";
+import Heat from "@/components/heat.vue";
+import Statistics from "@/components/statistics.vue";
 import Humidity from "@/components/humidity.vue";
 import Temperature from "@/components/temperature.vue";
+import UsableArea from "@/components/usableArea.vue";
+import TotalCargo from "@/components/totalCargo.vue";
 
 export default defineComponent({
   components: {
@@ -80,24 +85,20 @@ export default defineComponent({
     SideItem,
     FooterBar,
     Curve,
-    Amount,
-    Finance,
-    Warehouse,
+    Heat,
+    Statistics,
     Humidity,
     Temperature,
+    UsableArea,
+    TotalCargo,
   },
   data() {
     return {
       show: false,
-      showIndex: 2,
+      showIndex: 3,
     };
   },
-  methods: {
-    showMonitor() {
-      console.log("显示");
-      this.show = true;
-    },
-  },
+  methods: {},
 });
 </script>
 
@@ -144,6 +145,15 @@ export default defineComponent({
   height: 20rem;
 }
 
+.monitor—btn {
+  position: absolute;
+  right: 0;
+  top: 20%;
+  z-index: 99;
+  width: 48rem;
+  height: 50rem;
+}
+
 .monitor {
   width: 446rem;
   height: 287rem;

src/views/xh.vue

@@ -9,8 +9,8 @@
       </side-item>
       <side-item title="饱和量仪表盘">
         <div class="flex justify-between" style="width:100%;height:100%">
-          <usable-area />
           <parking-space />
+          <usable-area />
         </div>
       </side-item>
       <side-item title="仓库吞吐量对比图">
@@ -19,7 +19,7 @@
     </template>
 
     <template v-slot:center>
-      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/2"></iframe>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/1"></iframe>
     </template>
 
     <template v-slot:right>
@@ -39,6 +39,13 @@
   <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
 
   <!-- 监控 -->
+  <img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style />
+  <img
+    @click="show = true"
+    class="monitor—btn monitor—btn1"
+    src="../assets/img/monitor-left.png"
+    style
+  />
   <div class="vedio" v-show="show">
     <div class="head">
       <div class="camera">摄像头监控视频</div>
@@ -94,19 +101,27 @@ export default defineComponent({
   data() {
     return {
       show: false,
-      showIndex: 1,
+      showIndex: 0,
     };
   },
-  methods: {
-    showMonitor() {
-      console.log("显示");
-      this.show = true;
-    },
-  },
+  methods: {},
 });
 </script>
 
 <style scoped>
+.monitor—btn {
+  position: absolute;
+  right: 0;
+  top: 28%;
+  z-index: 99;
+  width: 48rem;
+  height: 50rem;
+}
+
+.monitor—btn1 {
+  top: 20%;
+}
+
 .frame {
   position: fixed;
   left: 0;