湖里大屏(安全管理)：完成隐患趋势图表开发

src/views/projectAdmin/dataBoard/projectHuScreen/components/Card.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="h-card">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.h-card {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #0081c3;
+  .title {
+    padding-left: 6px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+    color: #6ee4f0;
+  }
+  .content {
+    height: calc(100% - 30px);
+  }
+}
+</style>

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/line/JLineChart.vue

@@ -16,7 +16,7 @@ export default {
     },
     color: {
       type: Array,
-      default: () => ['#FAC915', '#61D2B9', '#F67F51', '#7851F6']
+      default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
     },
     xData: {
       required: true,

src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/rightBottom.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- 问题占比 -->
   <div class="problemTrend">
     <div class="title">{{ title }}</div>
     <div class="content">

src/views/projectAdmin/dataBoard/projectHuScreen/safeManage/rightBottom.vue

@@ -1,42 +1,55 @@
 <template>
-<!-- 隐患趋势 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    <JLineChart :xData="xData" :series="series" />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import JLineChart from '../jChart/line/JLineChart.vue'
 export default {
-
+  components: { Card, JLineChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
     return {
-
-    };
-  },
-
-
+      xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      series: [
+        {
+          data: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33],
+          areaColor: ['rgba(250, 201, 21, .3)', 'rgba(250, 201, 21, .1)'],
+          emphasis: {
+            color: '#FAC915',
+            borderColor: '#FAC915',
+            borderWidth: 10
+          }
+        },
+        {
+          data: [22, 432, 44, 55, 123, 433, 369, 269, 436, 203],
+          areaColor: ['rgba(255, 108, 127, .3)', 'rgba(255, 108, 127, .1)'],
+          emphasis: {
+            color: '#ff6c7f',
+            borderColor: '#ff6c7f',
+            borderWidth: 10
+          }
+        },
+        {
+          data: [655, 111, 224, 152, 65, 541, 334, 556, 326, 203],
+          areaColor: ['rgba(102, 212, 224, .3)', 'rgba(102, 212, 224, .1)'],
+          emphasis: {
+            color: '#6ee4f0',
+            borderColor: '#6ee4f0',
+            borderWidth: 10
+          }
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-
+<style lang="less" scoped></style>