From ab5b4fddad0c3bfa1e1a200584076cee2bf16034 Mon Sep 17 00:00:00 2001
From: xuyoubin <1562013420@qq.com>
Date: Wed, 13 Dec 2023 13:51:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=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=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   | 480 +++++++++++++-----
 1 file changed, 359 insertions(+), 121 deletions(-)

diff --git a/god-ui/src/views/constructionSiteData/analysis/index.vue b/god-ui/src/views/constructionSiteData/analysis/index.vue
index 50e05630..8a1b32e7 100644
--- a/god-ui/src/views/constructionSiteData/analysis/index.vue
+++ b/god-ui/src/views/constructionSiteData/analysis/index.vue
@@ -1,150 +1,388 @@
 <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 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"
+            v-for="(item, index) in topLeftList"
+            :key="index"
+            :style="{ color: item.color }"
+          >
+            <div>{{ item.msg }}</div>
+            <div>{{ item.number }}</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
+        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"
+            v-for="(item, index) in topRightList"
+            :key="index"
+          >
+            <div>{{ item.msg }}</div>
+            <div>{{ item.number }}</div>
+          </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"
+            v-for="(item, index) in ProjectFunctionsList"
+            :key="index"
+          >
+            <span>{{ item.name }}:</span>
+            <span>{{ item.value }}</span>
+          </div>
+          <div class="project-func-item-last">
+            <span>数据可视化</span>
+          </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">
+          <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column prop="time" label="时间" width="180">
+            </el-table-column>
+            <el-table-column prop="event" label="事件">
+            </el-table-column>
+            <el-table-column prop="status" label="状态"> </el-table-column>
+          </el-table>
+        </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'
+  initChartStatic,
+  generateBaseOptions,
+  generatePieOptions,
+} from "@/utils/bigscreenTool/index.js";
 
 export default {
-    mounted() {
-        this.initChart1();
-        this.initChart2();
-        this.initChart3();
+  data() {
+    const add0 = (val) => {
+            const num = parseInt(val)
+            return num > 9 ? val : ('0' + num)
+        }
+    const formatter = (offset = 0, date = new Date()) => {
+      const d = new Date(date.getTime() - offset);
+      return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(
+        d.getDate()
+      )} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`;
+    };
+    return {
+      topLeftList: [
+        {
+          msg: "已接入",
+          number: 10,
+          color: "blue",
+        },
+        {
+          msg: "在线",
+          number: 2,
+          color: "#7ece51",
+        },
+        {
+          msg: "离线",
+          number: 8,
+          color: "#ccc",
+        },
+        {
+          msg: "维护",
+          number: 1,
+          color: "#edca5f",
+        },
+      ],
+      topRightList: [
+        {
+          msg: "累计",
+          number: 27,
+        },
+        {
+          msg: "已处理",
+          number: 26,
+        },
+        {
+          msg: "未处理",
+          number: 1,
+        },
+      ],
+      ProjectFunctionsList: [
+        {
+          name: "视频监控接入",
+          value: "10台设备",
+        },
+        {
+          name: "算法识别报警",
+          value: "27条",
+        },
+        {
+          name: "周遭监控监管",
+          value: "6项",
+        },
+      ],
+      tableData: [
+        {
+            event:'监测非法人员闯入重点区域',
+            status:'请进行处理',
+            time: formatter(15452131),
+        },
+        {
+            event:'监测人员未穿戴反光衣',
+            status:'请进行处理',
+            time: formatter(35452131),
+        },
+        {
+            event:'监测人员未戴安全帽',
+            status:'请进行处理',
+            time: formatter(45452131),
+        },
+        {
+            event:'监测周遭遭到入侵',
+            status:'请进行处理',
+            time: formatter(55452131),
+        },
+        {
+            event:'监测人员聚众',
+            status:'请进行处理',
+            time: formatter(65452131),
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart1();
+    this.initChart2();
+    this.initChart3();
+  },
+  methods: {
+    initChart1() {
+      initChartStatic(
+        "chart1",
+        generatePieOptions({
+          legend: {
+            // 图例配置
+            orient: "vertical",
+            left: "right",
+            top: "center",
+            itemWidth:10,
+            itemHeight:10,
+            textStyle: {
+              color: "#252525A4",
+            },
+          },
+          color: ["#edca5f", "#e2925d", "#e06757", "#61a4e7", "#7ece51"],
+          series: [
+            {
+              name: "数据详情",
+              type: "pie",
+              radius: "60%",
+              center: ["34%", "50%"],
+              data: [
+                {
+                  name: "重要区域工作人员检测",
+                  value: 20,
+                },
+                {
+                  name: "安全帽佩戴检测",
+                  value: 30,
+                },
+                {
+                  name: "周遭入侵检测",
+                  value: 10,
+                },
+                {
+                  name: "反光衣穿戴检测",
+                  value: 50,
+                },
+                {
+                  name: "裸土覆盖检测",
+                  value: 20,
+                },
+                {
+                  name: "人员聚众检测",
+                  value: 5,
+                },
+                {
+                  name: "高支模监测",
+                  value: 20,
+                },
+              ],
+              label: {
+                formatter: "{c|{c}} , {per|{d}%}",
+                rich: {
+                  c: {
+                    color: "#252525A4",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: "#252525A4",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
     },
-    methods: {
-        initChart1() {},
-        initChart2() {},
-        initChart3() {},
-    }
-}
+    initChart2() {
+
+    },
+    initChart3() {
+        initChartStatic(
+        "chart3",
+        generateBaseOptions({
+          xAxis: {
+            name:'地点',
+            show:true,
+            position:'bottom',
+            data: ['工地大门','18号楼施工区','15号楼施工区','健身规划区','车库','水电井'],
+          },
+          yAxis:{
+            type:'value'
+          },
+          color: ["#a27f53", "#1a3062", "#124a55"],
+          series: [
+            
+          ],
+        })
+      );
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 @font-face {
-    font-family: 'ConstrctionTitle';
-    src: url(../../../assets/biaoti.ttf);
+  font-family: "ConstrctionTitle";
+  src: url(../../../assets/biaoti.ttf);
 }
 .shadow-wrapper {
-    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
-    border-radius: 6px;
+  box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+  border-radius: 6px;
 }
 .construction-wrapper {
-    background-color: #f1f1f1;
-    padding: 16px;
-    .grid-basic-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: 0.4rem 0;
+      }
+      .grid-basic-top-container {
         display: grid;
-        grid-template-columns: repeat(7, 1fr);
+        grid-template-columns: repeat(4, 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;
-            }
+        .grid-basic-top-item {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
         }
+      }
     }
+    .grid-basic-main-wrapper {
+      grid-column: span 4;
+      padding: 12px 16px;
+      background-color: white;
+      .grid-basic-main-title {
+        font-family: "ConstrctionTitle";
+        color: #252525a2;
+        padding: 0.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;
-    }
+  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: 0.6rem 1.4rem;
+  }
+  .project-func-item-last {
+    border-radius: 6px;
+    border: 1px solid #25252525;
+    text-align: center;
+    padding: 0.6rem 1.4rem;
+  }
 }
 
-#chart1, #chart2, #chart3 {
-    min-height: 250px;
+#chart1,
+#chart2,
+#chart3 {
+  min-height: 250px;
 }
 </style>
\ No newline at end of file