仓库图表

src/api/index.ts

@@ -16,6 +16,11 @@ export interface GET_MBPS_BY_TIME_PARAM {
   warehouseId: number; // 仓库id
 }
 
+export interface GET_FIRE_OR_FLOOD_PARAM {
+  parkId: number; // 园区id
+  warehouseId: number; // 仓库id
+}
+
 // 查询仓库列表及仓库下的摄像头
 export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param });
 
@@ -24,3 +29,6 @@ export const getTeamAndHumidity = (param: GET_TEAM_AND_HUMIDITY_PARAM) => http.p
 
 // 查看吞吐量折线图
 export const getMbpsByTime = (param: GET_MBPS_BY_TIME_PARAM) => http.post('/mbps/selMbpsByTime', { param });
+
+// 查询火灾水灾警报
+export const getFireOrFlood = (param: GET_FIRE_OR_FLOOD_PARAM) => http.post('/mbps/selFireOrFlood', { param });

src/components/finance.vue

@@ -35,6 +35,13 @@ export default defineComponent({
             type: "shadow",
           },
         },
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "20%",
+          bottom: "0",
+          containLabel: true,
+        },
         xAxis: {
           type: "category",
           data: ["2016", "2017", "2018", "2019", "2020"],

src/components/footer-bar.vue

@@ -1,14 +1,76 @@
 <template>
   <div class="wrap">
     <div class="btn-wrap">
-      <div class="btn active">晋恒通园区</div>
-      <div class="btn">现海园区</div>
-      <div class="btn">应急仓库</div>
-      <div class="mr-0 btn">5号仓库</div>
+      <div
+        :class="item.active ? 'active' : ''"
+        :key="index"
+        @click="changePage(item,index)"
+        class="btn"
+        v-for="(item, index) in urls"
+      >{{ item.name }}</div>
     </div>
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    showIndex: { type: Number, default: 0 },
+  },
+
+  data() {
+    return {
+      urls: [
+        {
+          path: "/jht",
+          param: { parkId: "1", warehouseId: null },
+          name: "晋恒通园区",
+          active: false,
+        },
+        {
+          path: "/xh",
+          param: { parkId: "2", warehouseId: null },
+          name: "现海园区",
+          active: false,
+        },
+        {
+          path: "/yj",
+          param: { parkId: "1", warehouseId: "6" },
+          name: "应急仓库",
+          active: false,
+        },
+        {
+          path: "/5",
+          param: { parkId: "2", warehouseId: "7" },
+          name: "5号仓库",
+          active: false,
+        },
+      ],
+    };
+  },
+
+  mounted() {
+    this.urls[this.showIndex].active = true;
+  },
+
+  methods: {
+    changePage(item, index) {
+      this.urls.forEach((url, i) => {
+        if (i === index) {
+          url.active = true;
+        } else {
+          url.active = false;
+        }
+      });
+      this.$router.push({ path: item.path, query: item.param });
+      this.$emit("showMonitor");
+    },
+  },
+});
+</script>
+
 <style scoped>
 .wrap {
   z-index: 4;
@@ -17,8 +79,8 @@
   bottom: 0;
   transform: translate3d(-50%, 0, 0);
   width: 1200rem;
-  height: 530rem;
-  background: url("../assets/img/footer-bg.png") no-repeat center bottom;
+  height: 130rem;
+  background: url("../assets/img/footer.png") no-repeat center bottom;
   background-size: contain;
   display: flex;
   justify-content: center;
@@ -40,6 +102,9 @@
   margin-right: 10rem;
   font-weight: 600;
 }
+.btn:last-child {
+  margin-right: 0;
+}
 .btn.active {
   padding: 6rem 16rem;
   background: #040a35;

src/components/humidity.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '92%',margin: 'auto 3% auto 5%' }" id="humidity"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+import { getTeamAndHumidity } from "api/index";
+
+export default defineComponent({
+  name: "humidity",
+  data() {
+    return {
+      myCharts: {},
+      humiditys: [],
+    };
+  },
+
+  computed: {
+    // 湿度
+    humidityArray() {
+      const { humiditys } = this;
+      let arr = [];
+      if (humiditys && humiditys.length) {
+        humiditys.forEach((item) => {
+          arr.push(item.humidity);
+        });
+      } else {
+        arr = [15, 55, 75, 97, 76, 95, 75];
+      }
+      return arr;
+    },
+
+    // 时间
+    timeArray() {
+      const { humiditys } = this;
+      let arr = [];
+      if (humiditys && humiditys.length) {
+        humiditys.forEach((item) => {
+          arr.push(item.time);
+        });
+      } else {
+        arr = ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"];
+      }
+      return arr;
+    },
+  },
+
+  watch: {
+    humiditys: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getTeamAndHumidity();
+    }, 4500);
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    /** 查询温度与湿度
+     * @param {number} endTime 结束时间
+     * @param {number} startTime 开始时间
+     * @param {number} warehouseId 仓库id
+     */
+    async getTeamAndHumidity() {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = { parkId: parkId || 2, warehouseId: warehouseId || 7 };
+        const data = await getTeamAndHumidity(param);
+        this.humiditys = data.humiditys;
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    // 绘制图表
+    getOptions() {
+      const { humidityArray, timeArray } = this;
+      const humidity = document.getElementById("humidity");
+      this.myCharts = echarts.init(humidity);
+      this.myCharts.setOption({
+        tooltip: {},
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "25%",
+          bottom: "0",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: timeArray,
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "湿度",
+            type: "line",
+            lineStyle: {
+              color: "#82B869",
+            },
+            itemStyle: {
+              normal: {
+                color: "#82B869",
+              },
+            },
+            smooth: true,
+            data: humidityArray,
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" },
+              ],
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.humidity {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/temperature.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '92%',margin: 'auto 3% auto 5%' }" id="temperature"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+import { getTeamAndHumidity } from "api/index";
+
+export default defineComponent({
+  name: "temperature",
+  data() {
+    return {
+      myCharts: {},
+      temps: [],
+    };
+  },
+
+  computed: {
+    // 温度
+    tempArray() {
+      const { temps } = this;
+      let arr = [];
+      if (temps && temps.length) {
+        temps.forEach((item) => {
+          arr.push(item.temp);
+        });
+      } else {
+        arr = [45, 55, 56, 73, 76, 95, 98];
+      }
+      return arr;
+    },
+
+    // 时间
+    timeArray() {
+      const { temps } = this;
+      let arr = [];
+      if (temps && temps.length) {
+        temps.forEach((item) => {
+          arr.push(item.time);
+        });
+      } else {
+        arr = ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"];
+      }
+      return arr;
+    },
+  },
+
+  watch: {
+    temps: {
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.getOptions();
+        }
+      },
+    },
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getTeamAndHumidity();
+    }, 3500);
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    /** 查询温度与湿度
+     * @param {number} endTime 结束时间
+     * @param {number} startTime 开始时间
+     * @param {number} warehouseId 仓库id
+     */
+    async getTeamAndHumidity() {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = { parkId: parkId || 2, warehouseId: warehouseId || 7 };
+        const data = await getTeamAndHumidity(param);
+        this.temps = data.temps;
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    getOptions() {
+      // 绘制图表
+      const { tempArray, timeArray } = this;
+      const temperature = document.getElementById("temperature");
+      this.myCharts = echarts.init(temperature);
+      this.myCharts.setOption({
+        tooltip: {},
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "25%",
+          bottom: "0",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: timeArray,
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "温度",
+            type: "line",
+            // lineStyle: {
+            //   color: '#FC8452',
+            // },
+            // itemStyle: {
+            //   normal: {
+            //     color: '#FC8452',
+            //   },
+            // },
+            smooth: true,
+            data: tempArray,
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" },
+              ],
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.temperature {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/top-bar.vue

@@ -3,41 +3,150 @@
     <div class="left-wrap">
       <!-- 这个空div有样式作用 -->
       <div>
-        <div>40%</div>
-        <div>70℃</div>
+        <div v-if="humidity">{{ humidity }}%RH</div>
+        <div v-if="temp">{{ temp }}℃</div>
       </div>
     </div>
-    <h3 class="title">现海园区5号仓库</h3>
+    <h3 class="title">{{ title }}电子看板</h3>
     <div class="right-wrap">
       <div class="time">{{ time }}</div>
-      <div class="fire"></div>
-      <div class="water"></div>
+      <div class="fire" v-if="isFire"></div>
+      <div class="water" v-if="isFlood"></div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  getCurrentInstance,
-  onMounted,
-  reactive,
-  toRefs,
-} from "vue";
+import { defineComponent } from "vue";
+import { getTeamAndHumidity, getFireOrFlood } from "api/index";
 
 export default defineComponent({
-  setup() {
-    const { ctx } = getCurrentInstance();
-    const now = ctx.$dayjs().format("MM月DD日 HH:mm:ss");
-    const data = reactive({
-      time: now,
-    });
-    onMounted(() => {
-      setInterval(() => {
-        data.time = ctx.$dayjs().format("MM月DD日 HH:mm:ss");
-      }, 1000);
-    });
-    return { ...toRefs(data) };
+  data() {
+    return {
+      time: "",
+      isFire: false, // 火灾
+      isFlood: false, // 水灾
+      humidity: "", // 湿度
+      temp: "", // 温度
+    };
+  },
+
+  computed: {
+    title() {
+      const { parkId, warehouseId } = this.$route.query;
+      if (!parkId && !warehouseId) {
+        return "现海园区5号仓库";
+      }
+      if (!warehouseId) {
+        if (parkId === "1") {
+          return "晋恒通园区";
+        }
+        if (parkId === "2") {
+          return "现海园区";
+        }
+      } else {
+        if (warehouseId === "6") {
+          return "晋恒通园区应急仓库";
+        }
+        if (warehouseId === "7") {
+          return "现海园区5号仓库";
+        }
+        if (warehouseId !== "6" && warehouseId !== "7") {
+          return warehouseId + "号仓库";
+        }
+      }
+    },
+  },
+
+  mounted() {
+    // 获取当前时间
+    setInterval(() => {
+      this.getNowFormatDate();
+    }, 1000);
+
+    setInterval(() => {
+      // 获取数据
+      this.getTeamAndHumidity();
+      this.getFireOrFlood();
+    }, 3000);
+  },
+
+  methods: {
+    // 查询温度与湿度
+    async getTeamAndHumidity() {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = {
+          parkId: parkId ? parkId : 1,
+          warehouseId: warehouseId ? warehouseId : 7,
+        };
+        const data = await getTeamAndHumidity(param);
+        if (data.humiditys && data.humiditys.length) {
+          this.humidity = data.humiditys[data.humiditys.length - 1].humidity;
+        }
+        if (data.temps && data.temps.length) {
+          this.temp = data.temps[data.temps.length - 1].temp;
+        }
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    // 查询火灾水灾警报
+    async getFireOrFlood() {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = {
+          parkId: parkId ? parkId : 1,
+          warehouseId: warehouseId ? warehouseId : 7,
+        };
+        const data = await getFireOrFlood(param);
+        this.isFire = data.isFire;
+        this.isFlood = data.isFlood;
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    // 获取当前时间
+    getNowFormatDate() {
+      var date = new Date();
+      var seperator1 = ".";
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var hour = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+      var strDate = date.getDate();
+
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      if (hour >= 1 && hour <= 9) {
+        hour = "0" + hour;
+      }
+      if (minutes >= 1 && minutes <= 9) {
+        minutes = "0" + minutes;
+      }
+      if (seconds >= 1 && seconds <= 9) {
+        seconds = "0" + seconds;
+      }
+      this.time =
+        year +
+        seperator1 +
+        month +
+        seperator1 +
+        strDate +
+        "  " +
+        hour +
+        ":" +
+        minutes +
+        ":" +
+        seconds;
+    },
   },
 });
 </script>
@@ -54,6 +163,7 @@ export default defineComponent({
   z-index: 4;
   color: #fff;
 }
+
 .top-wrap:after {
   content: "";
   display: block;
@@ -66,6 +176,7 @@ export default defineComponent({
   background: url("../assets/img/border-top.png") no-repeat left top;
   background-size: contain;
 }
+
 .top-wrap .title {
   flex: 1;
   font-family: FZCHSJW, FZCHSJW--GB1-0;
@@ -75,6 +186,7 @@ export default defineComponent({
   letter-spacing: 4rem;
   text-align: center;
 }
+
 .top-wrap .left-wrap {
   position: absolute;
   left: 30rem;
@@ -84,6 +196,7 @@ export default defineComponent({
   align-items: center;
   font-size: 17rem;
 }
+
 .top-wrap .left-wrap:before {
   content: "";
   display: block;
@@ -93,6 +206,7 @@ export default defineComponent({
   background-size: contain;
   margin-right: 20rem;
 }
+
 .top-wrap .right-wrap {
   position: absolute;
   right: 30rem;
@@ -102,10 +216,12 @@ export default defineComponent({
   align-items: center;
   font-size: 17rem;
 }
+
 .top-wrap .right-wrap .time {
   font-size: 26rem;
   font-weight: bold;
 }
+
 .top-wrap .right-wrap .fire,
 .top-wrap .right-wrap .water {
   width: 42rem;
@@ -115,6 +231,7 @@ export default defineComponent({
   background-size: contain;
   margin-left: 40rem;
 }
+
 .top-wrap .right-wrap .fire {
   background-image: url("../assets/img/fire.png");
 }

src/components/totalCargo.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="box-bg">
+    <!-- 停车位 -->
+    <div :style="{ width: '100%', height: '100%' }" id="totalCargo"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "totalCargo",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const totalCargo = document.getElementById("totalCargo");
+      this.myCharts = echarts.init(totalCargo);
+      this.myCharts.setOption({
+        series: [
+          {
+            type: "gauge",
+            startAngle: 90,
+            endAngle: -270,
+            max: 10000,
+            pointer: {
+              show: false,
+            },
+            progress: {
+              show: true,
+              overlap: false,
+              roundCap: true,
+              clip: false,
+              itemStyle: {
+                borderWidth: 1,
+                borderColor: "#ccc",
+                color: "#FAC858",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                width: 50,
+              },
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              length: 15,
+              lineStyle: {
+                width: 2,
+                color: "#999",
+              },
+            },
+            axisLabel: {
+              distance: 60,
+              color: "#999",
+              fontSize: 20,
+            },
+            data: [
+              {
+                value: 4530.88,
+                name: "Perfect",
+                title: {
+                  offsetCenter: ["0%", "-30%"],
+                },
+                detail: {
+                  offsetCenter: ["0%", "-20%"],
+                },
+                itemStyle: {
+                  color: "#FAC858",
+                },
+              },
+            ],
+            title: {
+              fontSize: 18,
+            },
+            detail: {
+              width: 50,
+              height: 14,
+              fontSize: 14,
+              color: "auto",
+              borderColor: "auto",
+              borderRadius: 20,
+              borderWidth: 1,
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.totalCargo {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/router/index.ts

@@ -13,6 +13,7 @@ const router = createRouter({
     { path: '/jht', component: () => import('views/jht.vue') },
     { path: '/xh', component: () => import('views/xh.vue') },
     { path: '/yj', component: () => import('views/repo-yj.vue') },
+    { path: '/vs', component: () => import('views/videoScreen.vue') },
   ],
   strict: true
 });

src/views/jht.vue

@@ -0,0 +1,181 @@
+<template>
+  <!-- 顶栏 -->
+  <top-bar />
+
+  <container>
+    <template v-slot:left>
+      <side-item title="大事记">
+        <memorabilia />
+      </side-item>
+      <side-item title="饱和量仪表盘">
+        <div class="flex justify-between" style="width:100%;height:100%">
+          <parking-space />
+          <usable-area />
+        </div>
+      </side-item>
+      <side-item title="仓库吞吐量对比图">
+        <warehouse />
+      </side-item>
+    </template>
+
+    <template v-slot:center>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/1"></iframe>
+    </template>
+
+    <template v-slot:right>
+      <side-item title="货物吞吐量曲线">
+        <curve />
+      </side-item>
+      <side-item title="进出车次统计">
+        <amount />
+      </side-item>
+      <side-item title="园区财务统计表">
+        <finance />
+      </side-item>
+    </template>
+  </container>
+
+  <!-- 底部区域 -->
+  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+
+  <!-- 监控 -->
+  <div class="vedio" v-show="show">
+    <div class="head">
+      <div class="camera">摄像头监控视频</div>
+      <img @click="show = false" class="close" src="../assets/img/close.png" />
+    </div>
+    <div class="monitor">
+      <div class="monitor1">
+        <iframe
+          frameborder="0"
+          height="100%"
+          scrolling="no"
+          src="https://www.tall.wiki/kangfu-v1/?key=230659446"
+          width="100%"
+        ></iframe>
+        <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
+        <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
+        <div class="screen">
+          <img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import TopBar from "comp/top-bar.vue";
+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 ParkingSpace from "@/components/parkingSpace.vue";
+import UsableArea from "@/components/usableArea.vue";
+import Memorabilia from "@/components/memorabilia.vue";
+
+export default defineComponent({
+  components: {
+    TopBar,
+    Container,
+    SideItem,
+    FooterBar,
+    Curve,
+    Amount,
+    Finance,
+    Warehouse,
+    ParkingSpace,
+    UsableArea,
+    Memorabilia,
+  },
+  data() {
+    return {
+      show: false,
+      showIndex: 0,
+    };
+  },
+  methods: {
+    showMonitor() {
+      console.log("显示");
+      this.show = true;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.frame {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.vedio {
+  position: absolute;
+  bottom: 15%;
+  left: 37%;
+  z-index: 99;
+  width: 524rem;
+  height: 369rem;
+  background: url(/src/assets/img/vedio.png) center no-repeat;
+  background-size: 100% 100%;
+}
+
+.head {
+  text-align: center;
+  font-size: 20rem;
+  padding-top: 30rem;
+  padding-bottom: 10rem;
+}
+
+.camera {
+  color: #fff;
+  font-size: 12rem;
+}
+
+.close {
+  position: absolute;
+  top: 7%;
+  right: 8%;
+  width: 20rem;
+  height: 20rem;
+}
+
+.monitor {
+  width: 446rem;
+  height: 287rem;
+  margin: 0 auto;
+}
+
+.monitor1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.screen {
+  width: 100%;
+  height: 40rem;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.monitor2 {
+  width: 30rem;
+  height: 30rem;
+  position: absolute;
+  right: 15rem;
+  bottom: 5rem;
+}
+</style>

src/views/repo-5.vue

@@ -4,22 +4,22 @@
 
   <container>
     <template v-slot:left>
-      <side-item title="大事记">
-        <memorabilia />
+      <side-item title="温度曲线">
+        <temperature />
       </side-item>
-      <side-item title="仪表盘">
+      <side-item title="湿度曲线">
+        <humidity />
+      </side-item>
+      <side-item title="使用面积、货物占比">
         <div class="flex justify-between" style="width:100%;height:100%">
-          <parking-space />
           <usable-area />
+          <total-cargo />
         </div>
       </side-item>
-      <side-item title="仓库吞吐量对比图">
-        <warehouse />
-      </side-item>
     </template>
 
     <template v-slot:center>
-      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/0"></iframe>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/4"></iframe>
     </template>
 
     <template v-slot:right>
@@ -36,7 +36,31 @@
   </container>
 
   <!-- 底部区域 -->
-  <footer-bar></footer-bar>
+  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+
+  <!-- 监控 -->
+  <div class="vedio" v-show="show">
+    <div class="head">
+      <div class="camera">摄像头监控视频</div>
+      <img @click="show = false" class="close" src="../assets/img/close.png" />
+    </div>
+    <div class="monitor">
+      <div class="monitor1">
+        <iframe
+          frameborder="0"
+          height="100%"
+          scrolling="no"
+          src="https://www.tall.wiki/kangfu-v1/?key=230659446"
+          width="100%"
+        ></iframe>
+        <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
+        <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
+        <div class="screen">
+          <img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -48,10 +72,10 @@ 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 ParkingSpace from "@/components/parkingSpace.vue";
+import Humidity from "@/components/humidity.vue";
+import Temperature from "@/components/temperature.vue";
 import UsableArea from "@/components/usableArea.vue";
-import Memorabilia from "@/components/memorabilia.vue";
+import TotalCargo from "@/components/totalCargo.vue";
 
 export default defineComponent({
   components: {
@@ -62,12 +86,23 @@ export default defineComponent({
     Curve,
     Amount,
     Finance,
-    Warehouse,
-    ParkingSpace,
+    Humidity,
+    Temperature,
     UsableArea,
-    Memorabilia,
+    TotalCargo,
+  },
+  data() {
+    return {
+      show: false,
+      showIndex: 3,
+    };
+  },
+  methods: {
+    showMonitor() {
+      console.log("显示");
+      this.show = true;
+    },
   },
-  setup() {},
 });
 </script>
 
@@ -82,4 +117,65 @@ export default defineComponent({
   height: 100%;
   z-index: 0;
 }
+
+.vedio {
+  position: absolute;
+  bottom: 15%;
+  left: 37%;
+  z-index: 99;
+  width: 524rem;
+  height: 369rem;
+  background: url(/src/assets/img/vedio.png) center no-repeat;
+  background-size: 100% 100%;
+}
+
+.head {
+  text-align: center;
+  font-size: 20rem;
+  padding-top: 30rem;
+  padding-bottom: 10rem;
+}
+
+.camera {
+  color: #fff;
+  font-size: 12rem;
+}
+
+.close {
+  position: absolute;
+  top: 7%;
+  right: 8%;
+  width: 20rem;
+  height: 20rem;
+}
+
+.monitor {
+  width: 446rem;
+  height: 287rem;
+  margin: 0 auto;
+}
+
+.monitor1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.screen {
+  width: 100%;
+  height: 40rem;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.monitor2 {
+  width: 30rem;
+  height: 30rem;
+  position: absolute;
+  right: 15rem;
+  bottom: 5rem;
+}
 </style>

src/views/repo-yj.vue

@@ -0,0 +1,176 @@
+<template>
+  <!-- 顶栏 -->
+  <top-bar />
+
+  <container>
+    <template v-slot:left>
+      <side-item title="温度曲线">
+        <temperature />
+      </side-item>
+      <side-item title="湿度曲线">
+        <humidity />
+      </side-item>
+      <side-item title="仓库吞吐量对比图">
+        <warehouse />
+      </side-item>
+    </template>
+
+    <template v-slot:center>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/3"></iframe>
+    </template>
+
+    <template v-slot:right>
+      <side-item title="货物吞吐量曲线">
+        <curve />
+      </side-item>
+      <side-item title="进出车次统计">
+        <amount />
+      </side-item>
+      <side-item title="园区财务统计表">
+        <finance />
+      </side-item>
+    </template>
+  </container>
+
+  <!-- 底部区域 -->
+  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+
+  <!-- 监控 -->
+  <div class="vedio" v-show="show">
+    <div class="head">
+      <div class="camera">摄像头监控视频</div>
+      <img @click="show = false" class="close" src="../assets/img/close.png" />
+    </div>
+    <div class="monitor">
+      <div class="monitor1">
+        <iframe
+          frameborder="0"
+          height="100%"
+          scrolling="no"
+          src="https://www.tall.wiki/kangfu-v1/?key=230659446"
+          width="100%"
+        ></iframe>
+        <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
+        <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
+        <div class="screen">
+          <img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import TopBar from "comp/top-bar.vue";
+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 Humidity from "@/components/humidity.vue";
+import Temperature from "@/components/temperature.vue";
+
+export default defineComponent({
+  components: {
+    TopBar,
+    Container,
+    SideItem,
+    FooterBar,
+    Curve,
+    Amount,
+    Finance,
+    Warehouse,
+    Humidity,
+    Temperature,
+  },
+  data() {
+    return {
+      show: false,
+      showIndex: 2,
+    };
+  },
+  methods: {
+    showMonitor() {
+      console.log("显示");
+      this.show = true;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.frame {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.vedio {
+  position: absolute;
+  bottom: 15%;
+  left: 37%;
+  z-index: 99;
+  width: 524rem;
+  height: 369rem;
+  background: url(/src/assets/img/vedio.png) center no-repeat;
+  background-size: 100% 100%;
+}
+
+.head {
+  text-align: center;
+  font-size: 20rem;
+  padding-top: 30rem;
+  padding-bottom: 10rem;
+}
+
+.camera {
+  color: #fff;
+  font-size: 12rem;
+}
+
+.close {
+  position: absolute;
+  top: 7%;
+  right: 8%;
+  width: 20rem;
+  height: 20rem;
+}
+
+.monitor {
+  width: 446rem;
+  height: 287rem;
+  margin: 0 auto;
+}
+
+.monitor1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.screen {
+  width: 100%;
+  height: 40rem;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.monitor2 {
+  width: 30rem;
+  height: 30rem;
+  position: absolute;
+  right: 15rem;
+  bottom: 5rem;
+}
+</style>

src/views/videoScreen.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex w-screen h-screen min-h-0 bg-black">
+    <div class="frame1">
+      <iframe
+        frameborder="0"
+        height="100%"
+        scrolling="no"
+        src="https://www.tall.wiki/kangfu-v1/?key=230659446"
+        width="100%"
+      ></iframe>
+      <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
+      <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
+      <div class="screen">
+        <img @click="$router.go(-1)" class="frame2" src="../assets/img/closeScreen.png" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+.frame1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.screen {
+  width: 100%;
+  height: 50rem;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.frame2 {
+  width: 30rem;
+  height: 30rem;
+  position: absolute;
+  right: 15rem;
+  bottom: 10rem;
+}
+</style>

src/views/xh.vue

@@ -0,0 +1,181 @@
+<template>
+  <!-- 顶栏 -->
+  <top-bar />
+
+  <container>
+    <template v-slot:left>
+      <side-item title="大事记">
+        <memorabilia />
+      </side-item>
+      <side-item title="饱和量仪表盘">
+        <div class="flex justify-between" style="width:100%;height:100%">
+          <usable-area />
+          <parking-space />
+        </div>
+      </side-item>
+      <side-item title="仓库吞吐量对比图">
+        <warehouse />
+      </side-item>
+    </template>
+
+    <template v-slot:center>
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/2"></iframe>
+    </template>
+
+    <template v-slot:right>
+      <side-item title="货物吞吐量曲线">
+        <curve />
+      </side-item>
+      <side-item title="进出车次统计">
+        <amount />
+      </side-item>
+      <side-item title="园区财务统计表">
+        <finance />
+      </side-item>
+    </template>
+  </container>
+
+  <!-- 底部区域 -->
+  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
+
+  <!-- 监控 -->
+  <div class="vedio" v-show="show">
+    <div class="head">
+      <div class="camera">摄像头监控视频</div>
+      <img @click="show = false" class="close" src="../assets/img/close.png" />
+    </div>
+    <div class="monitor">
+      <div class="monitor1">
+        <iframe
+          frameborder="0"
+          height="100%"
+          scrolling="no"
+          src="https://www.tall.wiki/kangfu-v1/?key=230659446"
+          width="100%"
+        ></iframe>
+        <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
+        <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
+        <div class="screen">
+          <img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import TopBar from "comp/top-bar.vue";
+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 ParkingSpace from "@/components/parkingSpace.vue";
+import UsableArea from "@/components/usableArea.vue";
+import Memorabilia from "@/components/memorabilia.vue";
+
+export default defineComponent({
+  components: {
+    TopBar,
+    Container,
+    SideItem,
+    FooterBar,
+    Curve,
+    Amount,
+    Finance,
+    Warehouse,
+    ParkingSpace,
+    UsableArea,
+    Memorabilia,
+  },
+  data() {
+    return {
+      show: false,
+      showIndex: 1,
+    };
+  },
+  methods: {
+    showMonitor() {
+      console.log("显示");
+      this.show = true;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.frame {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.vedio {
+  position: absolute;
+  bottom: 15%;
+  left: 37%;
+  z-index: 99;
+  width: 524rem;
+  height: 369rem;
+  background: url(/src/assets/img/vedio.png) center no-repeat;
+  background-size: 100% 100%;
+}
+
+.head {
+  text-align: center;
+  font-size: 20rem;
+  padding-top: 30rem;
+  padding-bottom: 10rem;
+}
+
+.camera {
+  color: #fff;
+  font-size: 12rem;
+}
+
+.close {
+  position: absolute;
+  top: 7%;
+  right: 8%;
+  width: 20rem;
+  height: 20rem;
+}
+
+.monitor {
+  width: 446rem;
+  height: 287rem;
+  margin: 0 auto;
+}
+
+.monitor1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.screen {
+  width: 100%;
+  height: 40rem;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.monitor2 {
+  width: 30rem;
+  height: 30rem;
+  position: absolute;
+  right: 15rem;
+  bottom: 5rem;
+}
+</style>