From c313ec4854227c5a1f57344ee2f455b6178e39d8 Mon Sep 17 00:00:00 2001
From: unknown <wangrongrong@ccsens.com>
Date: Wed, 12 May 2021 18:56:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=8B=E6=81=92=E9=80=9A=E5=9B=AD=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/firewall-bg.png      | Bin 0 -> 13385 bytes
 src/components/dashboardOne.vue | 148 ++++++++++++++++++++++++++++++++
 src/components/dashboardTow.vue | 148 ++++++++++++++++++++++++++++++++
 src/components/memorabilia.vue  |  62 +++++++++++++
 src/components/saturate.vue     |  48 +++++++++++
 src/components/throughput.vue   |  89 +++++++++++++++++++
 src/views/jht.vue               |  23 ++---
 src/views/style.css             |  28 ++++++
 8 files changed, 536 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/firewall-bg.png
 create mode 100644 src/components/dashboardOne.vue
 create mode 100644 src/components/dashboardTow.vue
 create mode 100644 src/components/memorabilia.vue
 create mode 100644 src/components/saturate.vue
 create mode 100644 src/components/throughput.vue

diff --git a/src/assets/firewall-bg.png b/src/assets/firewall-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..f78be596a4641071297c2794b15e242d9e561c3a
GIT binary patch
literal 13385
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
QUJ(MoJ}AAfk~9kVA6X-)O#lD@

literal 0
HcmV?d00001

diff --git a/src/components/dashboardOne.vue b/src/components/dashboardOne.vue
new file mode 100644
index 0000000..84bf4c8
--- /dev/null
+++ 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>
diff --git a/src/components/dashboardTow.vue b/src/components/dashboardTow.vue
new file mode 100644
index 0000000..b21f66a
--- /dev/null
+++ 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>
diff --git a/src/components/memorabilia.vue b/src/components/memorabilia.vue
new file mode 100644
index 0000000..8bed27e
--- /dev/null
+++ 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>
diff --git a/src/components/saturate.vue b/src/components/saturate.vue
new file mode 100644
index 0000000..126648b
--- /dev/null
+++ 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>
diff --git a/src/components/throughput.vue b/src/components/throughput.vue
new file mode 100644
index 0000000..e4b4bf5
--- /dev/null
+++ 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>
diff --git a/src/views/jht.vue b/src/views/jht.vue
index a398114..409b6e3 100644
--- 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() {
diff --git a/src/views/style.css b/src/views/style.css
index d07e981..b85cfaf 100644
--- 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;
+}
\ No newline at end of file