调接口

4 years ago · e04f3df673
17 changed files with 656 additions and 1504 deletions
--- a/index.html
+++ b/index.html
@ -22,7 +22,7 @@
  </head>
  <body class="w-screen h-screen min-h-0">
     <!-- style="overflow: hidden;" -->
-    <div id="app" class="flex w-screen h-screen min-h-0"></div>
+    <div id="app" class="flex w-screen h-screen min-h-0" style="overflow: hidden;"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/api/api.ts
+++ b/src/api/api.ts
@ -5,5 +5,14 @@ export interface GET_WAREHOUSES_PARAM {
  warehouseId?: number;
 }

+export interface GET_TEAM_AND_HUMIDITY_PARAM {
+  endTime: number;
+  startTime: number;
+  warehouseId?: number;
+}
+
 // 查询仓库列表及仓库下的摄像头
 export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param });
+
+// 查询温度与湿度
+export const getTeamAndHumidity = (param: GET_TEAM_AND_HUMIDITY_PARAM) => http.post('/mbps/selTeamAndHumidity', { param });
--- a/src/assets/btn-active-bg.png
+++ b/src/assets/btn-active-bg.png
--- a/src/assets/btn-bg.png
+++ b/src/assets/btn-bg.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -29,6 +29,7 @@
    <!-- 悬浮监控 -->
    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />
    <img @click="show = false" class="vedio" src="../assets/vedio.png" v-show="show" />
+    <!-- 仓库 -->
  </div>
 </template>

@ -99,7 +100,7 @@ export default defineComponent({

 .vedio {
  position: absolute;
-  top: 50%;
+  top: 37%;
  left: 16%;
  z-index: 99;
  width: 720rem;
--- a/src/components/amount.vue
+++ b/src/components/amount.vue
@ -38,20 +38,20 @@ export default defineComponent({
            },
          },
        },
-        legend: {
-          data: ['进入车辆', '出去车辆'],
-          right: 0,
-          top: 0,
-          textStyle: {
-            color: '#556677', // 文字的颜色。
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          },
-        },
+        // legend: {
+        //   data: ['进入车辆', '出去车辆'],
+        //   right: 0,
+        //   top: 0,
+        //   textStyle: {
+        //     color: '#556677', // 文字的颜色。
+        //   },
+        //   grid: {
+        //     left: '3%',
+        //     right: '4%',
+        //     bottom: '3%',
+        //     containLabel: true,
+        //   },
+        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
--- a/src/components/curve.vue
+++ b/src/components/curve.vue
@ -1,13 +1,11 @@
 <template>
  <div class="box2-bg">
-    <div
-      :style="{ width: '92%', height: '90%',padding: '', margin: '8% 3% auto 5%' }"
-      class="duibi"
-      ref="comparisonChart"
-    ></div>
+    <div :style="{ width: '92%', height: '90%',padding: '' }" class="duibi" ref="comparisonChart"></div>
  </div>
+  <!-- , margin: '8% 3% auto 5%' -->
 </template>

+
 <script lang="ts">
 import { ref } from 'vue'
 import * as echarts from 'echarts'
--- a/src/components/heat.vue
+++ b/src/components/heat.vue
@ -42,11 +42,11 @@ export default defineComponent({
          {
            // name: '面积模式',
            type: 'pie',
-            radius: [20, 100],
+            radius: [10, 50],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
-              borderRadius: 8,
+              borderRadius: 5,
            },
            data: [
              { value: 40, name: 'rose 1' },
--- a/src/components/temperature.vue
+++ b/src/components/temperature.vue
@ -1,24 +1,82 @@
 <template>
  <div class="box-bg">
-    <div :style="{ width: '92%', height: '92%',margin: '8% 3% auto 5%' }" ref="temperature"></div>
+    <div :style="{ width: '92%', height: '92%',margin: '8% 3% auto 5%' }" id="temperature"></div>
  </div>
 </template>

 <script lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, defineComponent } from 'vue'
 import * as echarts from 'echarts'
+import { getTeamAndHumidity } from 'api/api'

-export default {
+export default defineComponent({
  name: 'Home',
-  setup() {
-    const temperature = ref<HTMLElement>() //也可以用const temperature = ref<any>();
+  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
+    },

-    console.log(temperature)
-    const myCharts = ref<any>()
-    setTimeout(() => {
+    // 时间
+    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
+    },
+  },
+
+  mounted() {
+    // 获取数据
+    this.getTeamAndHumidity()
+    // 绘制图表
+    this.getOptions()
+  },
+
+  methods: {
+    /** 查询温度与湿度
+     * @param {number} endTime 结束时间
+     * @param {number} startTime 开始时间
+     * @param {number} warehouseId 仓库id
+     */
+    async getTeamAndHumidity() {
+      try {
+        const params = { param: { warehouseId: this.$route.path.substr(1) } }
+        const data = await getTeamAndHumidity(params)
+        this.temps = data.temps
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+
+    getOptions() {
      // 绘制图表
-      myCharts.value = echarts.init(temperature.value!)
-      myCharts.value.setOption({
+      const { tempArray, timeArray } = this
+      const temperature = document.getElementById('temperature')
+      this.myCharts = echarts.init(temperature)
+      this.myCharts.setOption({
        // echarts 换内容
        title: {
          text: '温度曲线图',
@ -30,26 +88,22 @@ export default {
        },
        xAxis: {
          type: 'category',
-          data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
+          data: timeArray,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
-            data: [45, 55, 56, 73, 76, 95, 98],
+            data: tempArray,
            type: 'line',
            smooth: true,
          },
        ],
      })
-    }, 10)
-
-    return {
-      temperature,
-    }
+    },
  },
-}
+})
 </script>

 <style scoped>
--- a/src/components/toolbar.vue
+++ b/src/components/toolbar.vue
@ -7,7 +7,7 @@
        <div>27℃</div>
      </div>
    </div>
-    <div class="flex-1 title-name">现海园区电子看板</div>
+    <div class="flex-1 title-name">{{ title }}号仓库电子看板</div>
    <div class="flex flex-row justify-end left-text">
      <div class="time">{{ time }}</div>
      <img class="wheater" src="../assets/huo.png" />
@ -20,21 +20,52 @@
 import { defineComponent, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'

 export default defineComponent({
-  setup() {
-    const { ctx } = getCurrentInstance()
-    console.log(ctx.$dayjs)
-    const dateFormat = 'MM月DD日 HH:mm:ss'
-    const data = reactive({
-      time: ctx.$dayjs().format(dateFormat),
-    })
-
-    const interval = () => {
-      setInterval(() => {
-        data.time = ctx.$dayjs().format(dateFormat)
-      }, 1000)
+  data() {
+    return {
+      title: '',
+      time: '',
    }
-    onMounted(interval)
-    return { ...toRefs(data) }
+  },
+
+  mounted() {
+    // 获取当前时间
+    setInterval(() => {
+      this.getNowFormatDate()
+    }, 1000)
+    this.title = this.$route.path.substr(1)
+  },
+
+  methods: {
+    // 获取当前时间
+    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
+      }
+      this.time =
+        year +
+        seperator1 +
+        month +
+        seperator1 +
+        strDate +
+        '  ' +
+        hour +
+        ':' +
+        minutes +
+        ':' +
+        seconds
+    },
  },
 })
 </script>
@ -69,8 +100,9 @@ export default defineComponent({
  height: 22rem;
  margin-left: 20rem;
 }
+
 .time {
  font-size: 20rem;
-  color: #fff;
+  color: #52d0ff;
 }
 </style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -8,13 +8,15 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 const router = createRouter({
  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
  routes: [
-    { path: '/', redirect: '/jht' },
-    { path: '/jht', component: () => import('views/repo-five.vue') },
+    { path: '/', redirect: '/5' },
+    { path: '/5', component: () => import('views/repo-five.vue') },
+    { path: '/jht', component: () => import('views/jht.vue') },
+    { path: '/xh', component: () => import('views/xh.vue') },
+    { path: '/yj', component: () => import('views/yj.vue') },
  ],
  strict: true
 });

-
 // config router
 export function setupRouter(app: App<Element>) {
  app.use(router);
--- a/src/views/jht.vue
+++ b/src/views/jht.vue
@ -0,0 +1,115 @@
+<!-- 5号仓库 -->
+<template>
+  <div class="flex flex-col">
+    <!-- 标题 -->
+    <Toolbar />
+
+    <div class="flex flex-col flex-1 con">
+      <div class="flex justify-between floor1">
+        <!-- 温度 -->
+        <Temperature />
+        <!-- 湿度 -->
+        <Humidity />
+      </div>
+
+      <div class="flex-1 iframe-wrap">
+        <!-- <iframe src="https://www.tall.wiki/wl/0"></iframe> -->
+      </div>
+
+      <div class="flex justify-between floor3">
+        <!-- 吞土量实时统计 -->
+        <Amount />
+        <!-- 仓库热力图 -->
+        <Heat />
+      </div>
+      <!-- 曲线对比图 -->
+      <div class="floor4">
+        <Curve />
+      </div>
+    </div>
+    <!-- 右侧按钮 -->
+    <div class="yq-btns">
+      <div
+        :class="item.active ? 'active' : ''"
+        :key="index"
+        @click="$router.push(item.path)"
+        class="btn"
+        v-for="(item,index) in urls"
+      >{{ item.name }}</div>
+    </div>
+    <!-- 悬浮监控 -->
+    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />
+
+    <!-- FIXME: 不是显示一个图片 背景 + iframe显示摄像头内容 + 关闭 + 全屏 + 退出全屏 -->
+    <img @click="show = false" class="vedio" src="../assets/vedio.png" v-show="show" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Toolbar from 'comp/toolbar.vue'
+import Temperature from 'comp/temperature.vue'
+import Humidity from 'comp/humidity.vue'
+import Amount from 'comp/amount.vue'
+import Heat from 'comp/heat.vue'
+import Curve from 'comp/curve.vue'
+import { getWarehouses } from 'api/api'
+
+export default defineComponent({
+  components: {
+    Toolbar,
+    Temperature,
+    Humidity,
+    Amount,
+    Heat,
+    Curve,
+  },
+
+  data() {
+    return {
+      show: false,
+      urls: [
+        {
+          path: '/jht',
+          name: '晋恒通园区',
+          active: true,
+        },
+        {
+          path: '/xh',
+          name: '现海园区',
+          active: false,
+        },
+        {
+          path: '/yj',
+          name: '应急仓库',
+          active: false,
+        },
+        {
+          path: '/5',
+          name: '5号仓库',
+          active: false,
+        },
+      ],
+    }
+  },
+
+  created() {
+    this.getWarehouses()
+  },
+  methods: {
+    // 获取仓库信息
+    async getWarehouses() {
+      try {
+        const data = await getWarehouses({ parkId: 0 })
+        console.log('data: ', data)
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+  },
+})
+</script>
+
+<style>
+@import './style.css';
+</style>
--- a/src/views/repo-five.vue
+++ b/src/views/repo-five.vue
@ -27,6 +27,16 @@
        <Curve />
      </div>
    </div>
+    <!-- 右侧按钮 -->
+    <div class="yq-btns">
+      <div
+        :class="item.active ? 'active' : ''"
+        :key="index"
+        @click="$router.push(item.path)"
+        class="btn"
+        v-for="(item,index) in urls"
+      >{{ item.name }}</div>
+    </div>
    <!-- 悬浮监控 -->
    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />

@ -56,18 +66,42 @@ export default defineComponent({
  },

  data() {
-    return { show: false }
+    return {
+      show: false,
+      urls: [
+        {
+          path: '/jht',
+          name: '晋恒通园区',
+          active: false,
+        },
+        {
+          path: '/xh',
+          name: '现海园区',
+          active: false,
+        },
+        {
+          path: '/yj',
+          name: '应急仓库',
+          active: false,
+        },
+        {
+          path: '/5',
+          name: '5号仓库',
+          active: true,
+        },
+      ],
+    }
  },

  created() {
    this.getWarehouses()
  },
+
  methods: {
    // 获取仓库信息
    async getWarehouses() {
      try {
        const data = await getWarehouses({ parkId: 0 })
-        console.log('data: ', data)
      } catch (error) {
        console.log('error: ', error)
      }
@ -76,71 +110,6 @@ export default defineComponent({
 })
 </script>

-<style scoped>
-.con {
-  margin-left: 20rem;
-  margin-right: 20rem;
-}
-
-.floor1 {
-  width: 100%;
-  height: 390rem;
-  margin-top: 22rem;
-}
-
-.floor3 {
-  width: 100%;
-  height: 390rem;
-  margin-bottom: 22rem;
-}
-
-.floor4 {
-  width: 100%;
-  height: 390rem;
-  margin-bottom: 22rem;
-}
-
-.monitor {
-  position: absolute;
-  right: 0;
-  top: 10%;
-  z-index: 99;
-  width: 48rem;
-  height: 50rem;
-}
-
-.vedio {
-  position: absolute;
-  top: 50%;
-  left: 16%;
-  z-index: 99;
-  width: 720rem;
-  height: 495rem;
-}
-</style>
-
 <style>
-.box-bg {
-  width: 497rem;
-  height: 392rem;
-  background: url('../assets/box1.png') center no-repeat;
-  background-size: 100% 100%;
-}
-
-.box2-bg {
-  width: 100%;
-  height: 392rem;
-  background: url('../assets/box2.png') center no-repeat;
-  background-size: 100% 100%;
-}
-.iframe-wrap {
-  padding-top: 20rem;
-  padding-bottom: 20rem;
-}
-iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: none !important;
-}
+@import './style.css';
 </style>
--- a/src/views/style.css
+++ b/src/views/style.css
@ -0,0 +1,88 @@
+.con {
+  margin-left: 20rem;
+  margin-right: 20rem;
+}
+
+.floor1 {
+  width: 100%;
+  height: 390rem;
+  margin-top: 22rem;
+}
+
+.floor3 {
+  width: 100%;
+  height: 390rem;
+  margin-bottom: 22rem;
+}
+
+.floor4 {
+  width: 100%;
+  height: 390rem;
+  margin-bottom: 22rem;
+}
+
+.monitor {
+  position: absolute;
+  right: 0;
+  top: 10%;
+  z-index: 99;
+  width: 48rem;
+  height: 50rem;
+}
+
+.vedio {
+  position: absolute;
+  top: 50%;
+  left: 16%;
+  z-index: 99;
+  width: 720rem;
+  height: 495rem;
+}
+
+.yq-btns {
+  position: absolute;
+  top: 30%;
+  right: 0;
+  z-index: 99;
+  width: 140rem;
+}
+
+.btn {
+  width: 100%;
+  margin-bottom: 25rem;
+  background: url(../assets/btn-bg.png) center no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  padding: 10rem 0;
+  font-size: 12rem;
+  color: #03dafd;
+}
+
+.btn.active {
+  background: url(../assets/btn-active-bg.png) center no-repeat;
+  background-size: 100% 100%;
+}
+
+.box-bg {
+  width: 497rem;
+  height: 392rem;
+  background: url('../assets/box1.png') center no-repeat;
+  background-size: 100% 100%;
+}
+
+.box2-bg {
+  width: 100%;
+  height: 392rem;
+  background: url('../assets/box2.png') center no-repeat;
+  background-size: 100% 100%;
+}
+.iframe-wrap {
+  padding-top: 20rem;
+  padding-bottom: 20rem;
+}
+iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none !important;
+}
--- a/src/views/xh.vue
+++ b/src/views/xh.vue
@ -0,0 +1,115 @@
+<!-- 5号仓库 -->
+<template>
+  <div class="flex flex-col">
+    <!-- 标题 -->
+    <Toolbar />
+
+    <div class="flex flex-col flex-1 con">
+      <div class="flex justify-between floor1">
+        <!-- 温度 -->
+        <Temperature />
+        <!-- 湿度 -->
+        <Humidity />
+      </div>
+
+      <div class="flex-1 iframe-wrap">
+        <!-- <iframe src="https://www.tall.wiki/wl/0"></iframe> -->
+      </div>
+
+      <div class="flex justify-between floor3">
+        <!-- 吞土量实时统计 -->
+        <Amount />
+        <!-- 仓库热力图 -->
+        <Heat />
+      </div>
+      <!-- 曲线对比图 -->
+      <div class="floor4">
+        <Curve />
+      </div>
+    </div>
+    <!-- 右侧按钮 -->
+    <div class="yq-btns">
+      <div
+        :class="item.active ? 'active' : ''"
+        :key="index"
+        @click="$router.push(item.path)"
+        class="btn"
+        v-for="(item,index) in urls"
+      >{{ item.name }}</div>
+    </div>
+    <!-- 悬浮监控 -->
+    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />
+
+    <!-- FIXME: 不是显示一个图片 背景 + iframe显示摄像头内容 + 关闭 + 全屏 + 退出全屏 -->
+    <img @click="show = false" class="vedio" src="../assets/vedio.png" v-show="show" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Toolbar from 'comp/toolbar.vue'
+import Temperature from 'comp/temperature.vue'
+import Humidity from 'comp/humidity.vue'
+import Amount from 'comp/amount.vue'
+import Heat from 'comp/heat.vue'
+import Curve from 'comp/curve.vue'
+import { getWarehouses } from 'api/api'
+
+export default defineComponent({
+  components: {
+    Toolbar,
+    Temperature,
+    Humidity,
+    Amount,
+    Heat,
+    Curve,
+  },
+
+  data() {
+    return {
+      show: false,
+      urls: [
+        {
+          path: '/jht',
+          name: '晋恒通园区',
+          active: false,
+        },
+        {
+          path: '/xh',
+          name: '现海园区',
+          active: true,
+        },
+        {
+          path: '/yj',
+          name: '应急仓库',
+          active: false,
+        },
+        {
+          path: '/5',
+          name: '5号仓库',
+          active: false,
+        },
+      ],
+    }
+  },
+
+  created() {
+    this.getWarehouses()
+  },
+  methods: {
+    // 获取仓库信息
+    async getWarehouses() {
+      try {
+        const data = await getWarehouses({ parkId: 0 })
+        console.log('data: ', data)
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+  },
+})
+</script>
+
+<style>
+@import './style.css';
+</style>
--- a/src/views/yj.vue
+++ b/src/views/yj.vue
@ -0,0 +1,115 @@
+<!-- 5号仓库 -->
+<template>
+  <div class="flex flex-col">
+    <!-- 标题 -->
+    <Toolbar />
+
+    <div class="flex flex-col flex-1 con">
+      <div class="flex justify-between floor1">
+        <!-- 温度 -->
+        <Temperature />
+        <!-- 湿度 -->
+        <Humidity />
+      </div>
+
+      <div class="flex-1 iframe-wrap">
+        <!-- <iframe src="https://www.tall.wiki/wl/0"></iframe> -->
+      </div>
+
+      <div class="flex justify-between floor3">
+        <!-- 吞土量实时统计 -->
+        <Amount />
+        <!-- 仓库热力图 -->
+        <Heat />
+      </div>
+      <!-- 曲线对比图 -->
+      <div class="floor4">
+        <Curve />
+      </div>
+    </div>
+    <!-- 右侧按钮 -->
+    <div class="yq-btns">
+      <div
+        :class="item.active ? 'active' : ''"
+        :key="index"
+        @click="$router.push(item.path)"
+        class="btn"
+        v-for="(item,index) in urls"
+      >{{ item.name }}</div>
+    </div>
+    <!-- 悬浮监控 -->
+    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />
+
+    <!-- FIXME: 不是显示一个图片 背景 + iframe显示摄像头内容 + 关闭 + 全屏 + 退出全屏 -->
+    <img @click="show = false" class="vedio" src="../assets/vedio.png" v-show="show" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Toolbar from 'comp/toolbar.vue'
+import Temperature from 'comp/temperature.vue'
+import Humidity from 'comp/humidity.vue'
+import Amount from 'comp/amount.vue'
+import Heat from 'comp/heat.vue'
+import Curve from 'comp/curve.vue'
+import { getWarehouses } from 'api/api'
+
+export default defineComponent({
+  components: {
+    Toolbar,
+    Temperature,
+    Humidity,
+    Amount,
+    Heat,
+    Curve,
+  },
+
+  data() {
+    return {
+      show: false,
+      urls: [
+        {
+          path: '/jht',
+          name: '晋恒通园区',
+          active: false,
+        },
+        {
+          path: '/xh',
+          name: '现海园区',
+          active: false,
+        },
+        {
+          path: '/yj',
+          name: '应急仓库',
+          active: true,
+        },
+        {
+          path: '/5',
+          name: '5号仓库',
+          active: false,
+        },
+      ],
+    }
+  },
+
+  created() {
+    this.getWarehouses()
+  },
+  methods: {
+    // 获取仓库信息
+    async getWarehouses() {
+      try {
+        const data = await getWarehouses({ parkId: 0 })
+        console.log('data: ', data)
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+  },
+})
+</script>
+
+<style>
+@import './style.css';
+</style>