feat: 管仲远程视频监控管理项目 首页

god-ui/src/views/constructionSiteData/analysis/index.vue

@@ -11,10 +11,12 @@
             class="grid-basic-top-item"
             v-for="(item, index) in topLeftList"
             :key="index"
-            :style="{ color: item.color }"
           >
-            <div>{{ item.msg }}</div>
-            <div>{{ item.number }}</div>
+            <div :class="['top-icon-wrapper', item.icon]"></div>
+            <div class="top-text-wrapper">
+                <div class="top-text-msg">{{ item.msg }}</div>
+                <div class="top-text-number">{{ item.number }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -32,8 +34,11 @@
             v-for="(item, index) in topRightList"
             :key="index"
           >
-            <div>{{ item.msg }}</div>
-            <div>{{ item.number }}</div>
+            <div :class="['top-icon-wrapper', item.icon]"></div>
+            <div class="top-text-wrapper">
+                <div class="top-text-msg">{{ item.msg }}</div>
+                <div class="top-text-number">{{ item.number }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -129,35 +134,42 @@ export default {
           msg: "已接入",
           number: 10,
           color: "blue",
+          icon: 'icon-1'
         },
         {
           msg: "在线",
           number: 2,
           color: "#7ece51",
+          icon: 'icon-2'
         },
         {
           msg: "离线",
           number: 8,
           color: "#ccc",
+          icon: 'icon-3'
         },
         {
           msg: "维护",
           number: 1,
           color: "#edca5f",
+          icon: 'icon-4'
         },
       ],
       topRightList: [
         {
           msg: "累计",
           number: 27,
+          icon: 'icon-5'
         },
         {
           msg: "已处理",
           number: 26,
+          icon: 'icon-6'
         },
         {
           msg: "未处理",
           number: 1,
+          icon: 'icon-7'
         },
       ],
       ProjectFunctionsList: [
@@ -209,6 +221,15 @@ export default {
     this.initChart3();
   },
   methods: {
+    getxAxisData(length = 7) {
+        const baseDate = new Date(), series = [];
+        for (let i = 0; i < length; i++) {
+            const middleDate = new Date();
+            middleDate.setTime(baseDate.getTime() - i * 1000 * 60 * 60 * 24)
+            series.unshift(`${middleDate.getMonth() + 1}-${middleDate.getDate()}`)
+        }
+        return series
+    },
     initChart1() {
       initChartStatic(
         "chart1",
@@ -282,7 +303,106 @@ export default {
       );
     },
     initChart2() {
-
+        initChartStatic('chart2', generateBaseOptions({
+            color: [
+            '#37A2DA',
+                    '#9FE6B8',
+                    '#FFDB5C',
+                    '#ff9f7f',
+                    '#fb7293',
+                    '#E062AE',
+                    '#32C5E9',
+                    '#67E0E3',
+                    '#E690D1',
+                    '#e7bcf3',
+                    '#9d96f5',
+                    '#8378EA',
+                    '#96BFFF'
+            ],
+                xAxis: {
+                    data: this.getxAxisData(15),
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#25252545'
+                        }
+                    },
+                },
+                legend: {
+                    textStyle: {
+                        color: '#252525A0',
+                        fontSize: 12
+                    }
+                },
+                yAxis: {
+                    name: '',
+                    max: 30,
+                    splitLine: {
+                        // 坐标轴在grid区域中的分割线
+                        show: true,
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#25252545'
+                        }
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#25252545'
+                        }
+                    },
+                },
+                series: [
+                    {
+                        name: '重要区域工作人员检测',
+                        data: [2, 8, 11, 9, 7, 1, 3, 6, 14, 10, 9, 7, 11, 10, 5],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '安全帽佩戴检测',
+                        data: [15, 20, 18, 17, 11, 10, 8, 10, 9, 21, 19, 8, 11, 24, 20],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '周遭入侵检测',
+                        data: [16, 17, 2, 29, 11, 10, 8, 15, 18, 7, 6, 10, 11, 10, 9],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '反光衣穿戴检测',
+                        data: [1, 15, 11, 8, 10, 11, 15, 21, 9, 19, 15, 2, 8, 19, 16],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '裸土覆盖检测',
+                        data: [11, 20, 18, 9, 11, 16, 9, 24, 15, 7, 23, 16, 8, 11, 10],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '人员聚集检测',
+                        data: [18, 16, 21, 7, 11, 16, 8, 9, 1, 17, 11, 9, 22, 23, 9],
+                        type: 'line',
+                        smooth: true
+                    },
+                    {
+                        name: '高支模检测',
+                        data: [1, 2, 1, 4, 3, 6, 2, 3, 4, 6, 8, 9, 1, 4, 2],
+                        type: 'line',
+                        smooth: true
+                    },
+                ],
+                grid: {
+                    left: '4%',
+                    top: '14%',
+                    right: '2%',
+                    bottom: '11%'
+                }
+            }))
     },
     initChart3() {
         initChartStatic(
@@ -339,6 +459,12 @@ export default {
               colorBy: "data",
             },
           ],
+          grid: {
+                left: '4%',
+                top: '14%',
+                right: '2%',
+                bottom: '11%'
+            }
         })
       );
     },
@@ -351,7 +477,7 @@ export default {
   src: url(../../../assets/biaoti.ttf);
 }
 .shadow-wrapper {
-  box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+  box-shadow: 2px 2px 4px #25252525, -2px -2px 3px #14141414;
   border-radius: 6px;
 }
 .construction-wrapper {
@@ -367,8 +493,10 @@ export default {
       background-color: white;
       .grid-basic-top-title {
         font-family: "ConstrctionTitle";
-        color: #252525a2;
+        color: #252525c2;
         padding: 0.4rem 0;
+        padding-top: 0;
+        font-size: 1.3rem;
       }
       .grid-basic-top-container {
         display: grid;
@@ -378,6 +506,26 @@ export default {
           display: flex;
           justify-content: space-around;
           align-items: center;
+          box-shadow: 2px 2px 2px #14141414, -2px -2px 2px #08080808;
+          padding: 1rem;
+          .top-icon-wrapper {
+            width: 3rem;
+            height: 3rem;
+            background-size: 100% 100%;
+          }
+          .top-text-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: calc(100% - 7rem);
+            .top-text-msg {
+                font-size: .9rem;
+            }
+            .top-text-number {
+                font-size: 1.5rem;
+                font-family: "ConstrctionTitle";
+            }
+          }
         }
       }
     }
@@ -387,11 +535,12 @@ export default {
       background-color: white;
       .grid-basic-main-title {
         font-family: "ConstrctionTitle";
-        color: #252525a2;
+        color: #252525b7;
         padding: 0.4rem 0;
+        padding-top: 0;
+        font-size: 1.3rem;
       }
       .grid-basic-main-container {
-        border: 1px solid red;
       }
     }
   }
@@ -401,14 +550,18 @@ export default {
 .project-func-wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
+  gap: 2rem;
   .project-func-item {
     border-radius: 6px;
     border: 1px solid #25252525;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.6rem 1.4rem;
+    padding: 0.6rem 2rem;
+    box-shadow: 2px 2px 2px #14141414, -2px -2px 2px #08080808;
+    span:nth-child(2) {
+        font-family: "ConstrctionTitle";
+    }
   }
   .project-func-item-last {
     border-radius: 6px;
@@ -423,4 +576,10 @@ export default {
 #chart3 {
   min-height: 250px;
 }
+
+@for $i from 1 through 7 {
+    .icon-#{$i} {
+        background-image: url(./assets/top#{$i}.png);
+    }
+}
 </style>