From ad0e0800e9312dd4e4043ffb4619f8a29e9828c0 Mon Sep 17 00:00:00 2001
From: Tony <weijialin@inspur.com>
Date: Wed, 13 Dec 2023 10:15:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AE=A1=E4=BB=B2=E8=BF=9C=E7=A8=8B?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7=E7=AE=A1=E7=90=86=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=20=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../constructionSiteData/analysis/index.vue   | 150 ++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 god-ui/src/views/constructionSiteData/analysis/index.vue

diff --git a/god-ui/src/views/constructionSiteData/analysis/index.vue b/god-ui/src/views/constructionSiteData/analysis/index.vue
new file mode 100644
index 00000000..50e05630
--- /dev/null
+++ b/god-ui/src/views/constructionSiteData/analysis/index.vue
@@ -0,0 +1,150 @@
+<template>
+    <div class="construction-wrapper app-container">
+        <div class="grid-basic-wrapper">
+            <div class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 4;">
+                <div class="grid-basic-top-title">视频设备统计</div>
+                <div class="grid-basic-top-container">
+                    <div class="grid-basic-top-item"></div>
+                    <div class="grid-basic-top-item"></div>
+                    <div class="grid-basic-top-item"></div>
+                    <div class="grid-basic-top-item"></div>
+                </div>
+            </div>
+            <div class="grid-basic-top-wrapper shadow-wrapper" style="grid-column: span 3;">
+                <div class="grid-basic-top-title">警报统计</div>
+                <div
+                    class="grid-basic-top-container"
+                    style="grid-template-columns: 1fr 1fr 1fr;"
+                >
+                    <div class="grid-basic-top-item"></div>
+                    <div class="grid-basic-top-item"></div>
+                    <div class="grid-basic-top-item"></div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-basic-wrapper" style="margin-top: 16px;grid-template-columns: 1fr;">
+            <div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;">
+                <div class="grid-basic-main-title">项目功能分布</div>
+                <div class="grid-basic-main-container project-func-wrapper">
+                    <div class="project-func-item">
+                        <span>视频监控接入:</span>
+                        <span>10台设备</span>
+                    </div>
+                    <div class="project-func-item"></div>
+                    <div class="project-func-item"></div>
+                    <div class="project-func-item"></div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-basic-wrapper" style="margin-top: 16px;">
+            <div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 3;">
+                <div class="grid-basic-main-title">警报比例分析</div>
+                <div class="grid-basic-main-container" id="chart1"></div>
+            </div>
+            <div class="grid-basic-main-wrapper shadow-wrapper">
+                <div class="grid-basic-main-title">警报详情</div>
+                <div class="grid-basic-main-container"></div>
+            </div>
+        </div>
+        <div class="grid-basic-wrapper" style="margin-top: 16px;grid-template-columns: 1fr 1fr;">
+            <div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;">
+                <div class="grid-basic-main-title">警报趋势分析</div>
+                <div class="grid-basic-main-container" id="chart2"></div>
+            </div>
+            <div class="grid-basic-main-wrapper shadow-wrapper" style="grid-column: span 1;">
+                <div class="grid-basic-main-title">区域警报统计</div>
+                <div class="grid-basic-main-container" id="chart3"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {
+    initChartStatic,
+    generateBaseOptions,
+    generatePieOptions
+} from '@/utils/bigscreenTool/index.js'
+
+export default {
+    mounted() {
+        this.initChart1();
+        this.initChart2();
+        this.initChart3();
+    },
+    methods: {
+        initChart1() {},
+        initChart2() {},
+        initChart3() {},
+    }
+}
+</script>
+<style scoped lang="scss">
+@font-face {
+    font-family: 'ConstrctionTitle';
+    src: url(../../../assets/biaoti.ttf);
+}
+.shadow-wrapper {
+    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+    border-radius: 6px;
+}
+.construction-wrapper {
+    background-color: #f1f1f1;
+    padding: 16px;
+    .grid-basic-wrapper {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 14px;
+        .grid-basic-top-wrapper {
+            grid-column: span 4;
+            padding: 12px 16px;
+            background-color: white;
+            .grid-basic-top-title {
+                font-family: 'ConstrctionTitle';
+                color: #252525a2;
+                padding: .4rem 0;
+            }
+            .grid-basic-top-container {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 14px;
+                .grid-basic-top-item {
+                    border: 1px solid red;
+
+                }
+            }
+        }
+        .grid-basic-main-wrapper {
+            grid-column: span 4;
+            padding: 12px 16px;
+            background-color: white;
+            .grid-basic-main-title {
+                font-family: 'ConstrctionTitle';
+                color: #252525a2;
+                padding: .4rem 0;
+            }
+            .grid-basic-main-container {
+                border: 1px solid red;
+            }
+        }
+    }
+}
+
+/**项目功能分布 */
+.project-func-wrapper {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    .project-func-item {
+        border-radius: 6px;
+        border: 1px solid #25252525;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: .6rem 1.4rem;
+    }
+}
+
+#chart1, #chart2, #chart3 {
+    min-height: 250px;
+}
+</style>
\ No newline at end of file