湖里大屏(数字工地)：完成塔吊设备布局

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>

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>

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],