From 78c34ed20d42534b3b624f14a226d4f8b1f9fc07 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Thu, 4 Aug 2022 17:28:16 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E8=A7=86=E9=A2=91=E8=AE=BE=E5=A4=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/leftBottom.vue                | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
index fd1c4db8..e1cb143b 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
@@ -1,7 +1,13 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
-      hello
+      <div class="list">
+        <div class="list-head">设备名称</div>
+        <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
+          <div class="label">1号塔吊</div>
+          <div class="status">在线</div>
+        </div>
+      </div>
     </DeviceCard>
   </Card>
 </template>
@@ -23,4 +29,45 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.list {
+  padding: 0 10px;
+  .list-head {
+    margin-bottom: 6px;
+    padding-left: 16px;
+    font-size: 12px;
+  }
+  .list-item {
+    margin-bottom: 6px;
+    padding: 0 16px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    &.online {
+      background-image: linear-gradient(90deg, rgba(24, 52, 73, 1), rgba(24, 52, 73, 0.2));
+      .status {
+        background-color: #3cabfd;
+      }
+    }
+    &.offline {
+      background-image: linear-gradient(90deg, rgba(44, 35, 56, 1), rgba(44, 35, 56, 0.2));
+      .status {
+        background-color: #ff6c7f;
+      }
+    }
+    .status {
+      margin-right: 6px;
+      width: 36px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      font-size: 12px;
+      border-radius: 9px;
+    }
+    .label {
+      margin-right: auto;
+      font-size: 14px;
+    }
+  }
+}
+</style>

From 9dd38f2ed46a2ad74f58e0783ff93c7e51326cb4 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Thu, 4 Aug 2022 17:53:25 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E4=BA=BA=E8=84=B8=E9=97=B8=E6=9C=BA=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/leftBottom.vue                |  5 +-
 .../digitalSite/rightBottom.vue               | 77 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
index e1cb143b..71529eab 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftBottom.vue
@@ -32,6 +32,7 @@ export default {
 <style lang="less" scoped>
 .list {
   padding: 0 10px;
+  color: #fff;
   .list-head {
     margin-bottom: 6px;
     padding-left: 16px;
@@ -44,13 +45,13 @@ export default {
     display: flex;
     align-items: center;
     &.online {
-      background-image: linear-gradient(90deg, rgba(24, 52, 73, 1), rgba(24, 52, 73, 0.2));
+      background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
       .status {
         background-color: #3cabfd;
       }
     }
     &.offline {
-      background-image: linear-gradient(90deg, rgba(44, 35, 56, 1), rgba(44, 35, 56, 0.2));
+      background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
       .status {
         background-color: #ff6c7f;
       }
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightBottom.vue
index fd1c4db8..f2ffb8b1 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightBottom.vue
@@ -1,7 +1,19 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
-      hello
+      <div class="list">
+        <div class="list-head">
+          <div class="device">设备名称</div>
+          <div class="enter">进场人数</div>
+          <div class="outer">出场人数</div>
+        </div>
+        <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
+          <div class="status">在线</div>
+          <div class="label">1号塔吊</div>
+          <div class="enter">66</div>
+          <div class="outer">99</div>
+        </div>
+      </div>
     </DeviceCard>
   </Card>
 </template>
@@ -23,4 +35,65 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.list {
+  padding: 0 10px;
+  color: #fff;
+  .list-head {
+    margin-bottom: 6px;
+    padding: 0 16px;
+    font-size: 12px;
+    display: flex;
+    .device {
+      margin-left: 56px;
+      margin-right: auto;
+    }
+    .enter {
+      width: 70px;
+    }
+    .outer {
+      width: 70px;
+      text-align: right;
+    }
+  }
+  .list-item {
+    margin-bottom: 6px;
+    padding: 0 16px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    &.online {
+      background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
+      .status {
+        background-color: #3cabfd;
+      }
+    }
+    &.offline {
+      background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
+      .status {
+        background-color: #ff6c7f;
+      }
+    }
+    .status {
+      margin-right: 20px;
+      width: 36px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      font-size: 12px;
+      border-radius: 9px;
+    }
+    .label {
+      margin-right: auto;
+      font-size: 14px;
+    }
+    .enter {
+      width: 70px;
+    }
+    .outer {
+      width: 70px;
+      text-align: right;
+    }
+  }
+}
+</style>

From 11f35805b4c64d2ff790ab9ebaf775d017e4ed06 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 09:34:04 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=A1=94=E5=90=8A=E8=AE=BE=E5=A4=87=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/components/DeviceCard.vue     |  7 +++++-
 .../projectHuScreen/digitalSite/leftTop.vue   | 25 ++++++++++++++++---
 .../projectHuScreen/jChart/bar/JBarChart.vue  |  7 +++++-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
index 3b8ca33a..50b838f2 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
@@ -16,7 +16,9 @@
         </div>
       </div>
     </div>
-    <slot></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -75,5 +77,8 @@ export default {
       }
     }
   }
+  .content {
+    height: calc(100% - 84px);
+  }
 }
 </style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
index 2d66f149..62d30fd1 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
@@ -1,7 +1,7 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
-      hello
+      <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
 </template>
@@ -9,8 +9,9 @@
 <script>
 import Card from '../components/Card.vue'
 import DeviceCard from './components/DeviceCard.vue'
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-  components: { Card, DeviceCard },
+  components: { Card, DeviceCard, JBarChart },
   props: {
     title: {
       type: String,
@@ -18,7 +19,25 @@ export default {
     }
   },
   data() {
-    return {}
+    const yData = [23, 44, 63, 12, 45, 78, 34, 67].map((value, i) => {
+      if (i > 4 && i < 7) {
+        return {
+          name: '离线',
+          value,
+          itemStyle: { color: '#FF6C7F' }
+        }
+      } else {
+        return {
+          name: '报警数',
+          value,
+          itemStyle: { color: '#3CABFD' }
+        }
+      }
+    })
+    return {
+      xData: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
+      yData
+    }
   }
 }
 </script>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
index 1c88d2fa..ed48d0b3 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
@@ -12,6 +12,10 @@ export default {
         text: ''
       })
     },
+    tooltip: {
+      type: Object,
+      default: () => ({ show: false })
+    },
     grid: {
       type: Array,
       default: () => ['15%', '2%', '2%', '2%']
@@ -43,7 +47,7 @@ export default {
   },
   methods: {
     createChart() {
-      const { title, grid, color, xData, yData, series } = this
+      const { title, tooltip, grid, color, xData, yData, series } = this
       const configSeries = (series => {
         if (series.length) {
           return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
@@ -62,6 +66,7 @@ export default {
             fontWeight: 'normal'
           }
         },
+        tooltip,
         grid: {
           top: grid[0],
           right: grid[1],

From a2231f4a659e3b164e5465dd531ec171eb9bb81f Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 09:38:50 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=8D=87=E9=99=8D=E6=9C=BA=E8=AE=BE=E5=A4=87=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/digitalSite/rightTop.vue  | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
index e88e486e..62d30fd1 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
@@ -1,7 +1,7 @@
 <template>
   <Card :title="title">
-    <DeviceCard :leftCount="{ value: 22, label: '升降机设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
-      hello
+    <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
+      <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
 </template>
@@ -9,8 +9,9 @@
 <script>
 import Card from '../components/Card.vue'
 import DeviceCard from './components/DeviceCard.vue'
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-  components: { Card, DeviceCard },
+  components: { Card, DeviceCard, JBarChart },
   props: {
     title: {
       type: String,
@@ -18,7 +19,25 @@ export default {
     }
   },
   data() {
-    return {}
+    const yData = [23, 44, 63, 12, 45, 78, 34, 67].map((value, i) => {
+      if (i > 4 && i < 7) {
+        return {
+          name: '离线',
+          value,
+          itemStyle: { color: '#FF6C7F' }
+        }
+      } else {
+        return {
+          name: '报警数',
+          value,
+          itemStyle: { color: '#3CABFD' }
+        }
+      }
+    })
+    return {
+      xData: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
+      yData
+    }
   }
 }
 </script>