Merge branch 'master' of https://dd.tall.wiki/gitea/song/park

5 years ago · 9a8242da63
8 changed files with 536 additions and 10 deletions
--- a/src/assets/firewall-bg.png
+++ b/src/assets/firewall-bg.png
--- a/src/components/dashboardOne.vue
+++ b/src/components/dashboardOne.vue
@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div :style="{ width: '96%', height: '96%',margin: '50% auto'}" id="saturate1"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import * as echarts from 'echarts'
+import { getTeamAndHumidity } from 'api/api'
+
+export default defineComponent({
+  name: 'saturate1',
+  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 saturate1 = document.getElementById('saturate1')
+      this.myCharts = echarts.init(saturate1)
+      this.myCharts.setOption({
+        series: [
+          {
+            name: '停车位',
+            type: 'gauge',
+            progress: {
+            show: true,
+        },
+        axisLine: {
+            lineStyle: {
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            distance: 2,
+            length: 3,
+            lineStyle: {
+                width: 1,
+                color: '#999'
+            }
+        },
+        axisLabel: {
+            distance: 15,
+            color: '#3AC7D7',
+            fontSize: 7
+        },
+        detail: {
+            fontSize: 10,
+            color: '#7C7C1C',
+            offsetCenter: [0, '70%']
+        },
+        data: [{
+            value: 70
+        }]
+            
+          },
+          
+        ],
+      })
+    },
+  },
+})
+</script>
+
+<style scoped>
+@import '../views/style.css';
+.saturate1 {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>
--- a/src/components/dashboardTow.vue
+++ b/src/components/dashboardTow.vue
@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div :style="{ width: '96%', height: '96%',margin: '50% auto'}" id="saturate2"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import * as echarts from 'echarts'
+import { getTeamAndHumidity } from 'api/api'
+
+export default defineComponent({
+  name: 'saturate2',
+  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 saturate2 = document.getElementById('saturate2')
+      this.myCharts = echarts.init(saturate2)
+      this.myCharts.setOption({
+        series: [
+          {
+            name: '饱和度',
+            type: 'gauge',
+            progress: {
+            show: true,
+        },
+        axisLine: {
+            lineStyle: {
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            distance: 2,
+            length: 3,
+            lineStyle: {
+                width: 1,
+                color: '#999'
+            }
+        },
+        axisLabel: {
+            distance: 15,
+            color: '#3AC7D7',
+            fontSize: 7
+        },
+        detail: {
+            fontSize: 10,
+            color: '#7C7C1C',
+            offsetCenter: [0, '70%']
+        },
+        data: [{
+            value: 70
+        }]
+            
+          },
+          
+        ],
+      })
+    },
+  },
+})
+</script>
+
+<style scoped>
+@import '../views/style.css';
+.saturate2 {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>
--- a/src/components/memorabilia.vue
+++ b/src/components/memorabilia.vue
@ -0,0 +1,62 @@
+<template>
+  <div class="box-bg">
+    <div class="title-value">
+      <div class="word">大事记</div>
+    </div>
+    <div :style="{ width: '92%', height: '92%',margin: '8% 5% auto 3%' }" id="memorabilia">
+        <div class="content">
+            <div class="firewall">
+                <div class="firewall1">防火墙</div>
+                <div class="firewall2">2021-04-08</div>
+            </div>
+            <div class="firewall3">
+                <p>有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...</p>
+            </div>
+        </div>
+        <div class="content">
+            <div class="firewall">
+                <div class="firewall1">防火墙</div>
+                <div class="firewall2">2021-04-08</div>
+            </div>
+            <div class="firewall3">
+                <p>有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...</p>
+            </div>
+        </div>
+        <div class="content">
+            <div class="firewall">
+                <div class="firewall1">防火墙</div>
+                <div class="firewall2">2021-04-08</div>
+            </div>
+            <div class="firewall3">
+                <p>有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息...</p>
+            </div>
+        </div>
+    </div>
+    <!-- <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/api'
+
+export default defineComponent({
+  name: 'memorabilia',
+  data() {
+    return {
+      myCharts: {},
+      temps: [],
+    }
+  },
+
+})
+</script>
+
+<style scoped>
+@import '../views/style.css';
+.memorabilia {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>
--- a/src/components/saturate.vue
+++ b/src/components/saturate.vue
@ -0,0 +1,48 @@
+<template>
+  <div class="box-bg">
+    <div class="title-value">
+      <div class="word">饱和量仪表盘</div>
+    </div>
+    <div  class="dashboardFather" :style="{ width: '96%', height: '96%',margin: 'auto 3% auto 5%' }" id="saturate">
+    <div :style="{ width: '46%', height: '96%'}">
+        <!-- 停车位 -->
+            <dashboard-one /> 
+    </div>
+    <div :style="{ width: '46%', height: '96%'}">
+        <!-- 使用面积 -->
+            <dashboard-tow /> 
+    </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import DashboardOne from 'comp/dashboardOne.vue'
+import DashboardTow from 'comp/dashboardTow.vue'
+export default defineComponent({
+  name: 'saturate',
+  components:{
+      DashboardOne,
+      DashboardTow
+  },
+  data() {
+    return {
+      myCharts: {},
+      temps: [],
+    }
+  },
+
+  
+
+  
+})
+</script>
+
+<style scoped>
+@import '../views/style.css';
+.saturate {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>
--- a/src/components/throughput.vue
+++ b/src/components/throughput.vue
@ -0,0 +1,89 @@
+<template>
+  <div class="box-bg">
+    <div class="title-value">
+      <div class="word">仓库吞吐量对比图</div>
+    </div>
+    <div :style="{ width: '92%', height: '92%', margin: 'auto 3% auto 5%' }" id="comaprethroughput"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import * as echarts from 'echarts'
+import { getTeamAndHumidity } from 'api/api'
+
+export default defineComponent({
+  name: 'comaprethroughput',
+  data() {
+    return {
+      myCharts: {},
+      temps: [],
+    }
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getTeamAndHumidity()
+    }, 3500)
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions()
+  },
+
+  methods: {
+    
+    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 comaprethroughput = document.getElementById('comaprethroughput')
+      this.myCharts = echarts.init(comaprethroughput)
+      this.myCharts.setOption({
+        tooltip: {},
+
+        series: [
+          {
+            name: '仓库吞吐量对比图',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: '1号仓库' },
+              { value: 735, name: '2号仓库' },
+              { value: 580, name: '3号仓库' },
+              { value: 484, name: '4号仓库' },
+              { value: 300, name: '5号仓库' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      })
+    },
+  },
+})
+</script>
+
+<style scoped>
+@import '../views/style.css';
+.comaprethroughput {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>
--- a/src/views/jht.vue
+++ b/src/views/jht.vue
@ -6,10 +6,10 @@

    <div class="flex flex-col flex-1 con">
      <div class="flex justify-between floor1">
-        <!-- 温度 -->
-        <Temperature />
-        <!-- 湿度 -->
-        <Humidity />
+        <!-- 大事记 -->
+        <Memorabilia /> 
+        <!-- 饱和量 -->
+        <Saturate />
      </div>

      <div class="flex-1 iframe-wrap">
@ -19,8 +19,8 @@
      <div class="flex justify-between floor3">
        <!-- 吞土量实时统计 -->
        <Amount />
-        <!-- 仓库热力图 -->
-        <Heat />
+        <!-- 仓库吞吐量对比图 -->
+        <Throughput />
      </div>
      <!-- 曲线对比图 -->
      <div class="floor4">
@ -68,9 +68,10 @@

 <script lang="ts">
 import { defineComponent } from 'vue'
+import Memorabilia from 'comp/memorabilia.vue'
 import Toolbar from 'comp/toolbar.vue'
-import Temperature from 'comp/temperature.vue'
-import Humidity from 'comp/humidity.vue'
+import Saturate from 'comp/saturate.vue'
+import Throughput from 'comp/throughput.vue'
 import Amount from 'comp/amount.vue'
 import Heat from 'comp/heat.vue'
 import Curve from 'comp/curve.vue'
@ -79,11 +80,12 @@ import { getWarehouses } from 'api/api'
 export default defineComponent({
  components: {
    Toolbar,
-    Temperature,
-    Humidity,
+    Saturate,
    Amount,
    Heat,
    Curve,
+    Memorabilia,
+    Throughput
  },

  data() {
@ -121,6 +123,7 @@ export default defineComponent({
  created() {
    this.getWarehouses()
  },
+
  methods: {
    // 获取仓库信息
    async getWarehouses() {
--- a/src/views/style.css
+++ b/src/views/style.css
@ -159,3 +159,31 @@ iframe {
 .word {
  padding-left: 20rem;
 }
+
+.content{
+  color: #fff;
+  /* font-size:18rem; */
+  height:23%;
+  margin: 5% 10% 5% 10%;
+  padding: 1% 5%;
+  background: #041D45;
+  /* background: url('../assets/firewall-bg.png') center no-repeat; */
+}
+
+.firewall{
+  display: flex;
+  align-items: center;
+  justify-content:space-between;
+}
+.firewall1{
+  font-size:18rem;
+}
+.firewall2{
+  font-size:12rem;
+}
+.firewall3{
+  color: #19A2CC;
+}
+.dashboardFather{
+  display: flex;
+}