From 93ccdace0fd8c485ae92d4d5ca31b1a262013ed3 Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Mon, 8 Jun 2026 13:59:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                             |   4 +-
 src/pathInfo.json                            |   5 +-
 src/view/equipment/alarmRecord/index.vue     | 114 ------
 src/view/equipment/index.vue                 |  20 +
 src/view/equipment/particulars/index.vue     | 156 --------
 src/view/securityControl/alarmList/index.vue | 370 +++++++++++++++++++
 src/view/securityControl/index.vue           |  20 +
 7 files changed, 415 insertions(+), 274 deletions(-)
 delete mode 100644 src/view/equipment/alarmRecord/index.vue
 create mode 100644 src/view/equipment/index.vue
 delete mode 100644 src/view/equipment/particulars/index.vue
 create mode 100644 src/view/securityControl/alarmList/index.vue
 create mode 100644 src/view/securityControl/index.vue

diff --git a/.env.development b/.env.development
index a76eccb..1397c6e 100644
--- a/.env.development
+++ b/.env.development
@@ -3,9 +3,9 @@ VITE_CLI_PORT = 8080
 VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
 VITE_FILE_API = /api
-# VITE_BASE_PATH = http://192.168.1.9:8888
+VITE_BASE_PATH = http://192.168.1.9:8888
 # VITE_BASE_PATH = http://192.168.110.98:8888
-VITE_BASE_PATH = https://www.xingoil.com/api
+# VITE_BASE_PATH = https://www.xingoil.com/api
 VITE_POSITION = open
 VITE_EDITOR = code
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
diff --git a/src/pathInfo.json b/src/pathInfo.json
index fedaff3..9c80cf7 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -11,15 +11,14 @@
   "/src/view/dashboard/components/table.vue": "Table",
   "/src/view/dashboard/components/wiki.vue": "Wiki",
   "/src/view/dashboard/index.vue": "Dashboard",
-  "/src/view/equipment/alarmRecord/index.vue": "Index",
   "/src/view/equipment/gateway/index.vue": "Index",
+  "/src/view/equipment/index.vue": "Equipment",
   "/src/view/equipment/list/components/detail/components/alarm/index.vue": "Index",
   "/src/view/equipment/list/components/detail/components/info/index.vue": "Index",
   "/src/view/equipment/list/components/detail/components/trend/index.vue": "Index",
   "/src/view/equipment/list/components/detail/index.vue": "Index",
   "/src/view/equipment/list/components/list/index.vue": "Index",
   "/src/view/equipment/list/index.vue": "Index",
-  "/src/view/equipment/particulars/index.vue": "Index",
   "/src/view/error/index.vue": "Error",
   "/src/view/error/reload.vue": "Reload",
   "/src/view/example/breakpoint/breakpoint.vue": "BreakPoint",
@@ -56,6 +55,8 @@
   "/src/view/login/index.vue": "Login",
   "/src/view/person/person.vue": "Person",
   "/src/view/routerHolder.vue": "RouterHolder",
+  "/src/view/securityControl/alarmList/index.vue": "Index",
+  "/src/view/securityControl/index.vue": "SecurityControl",
   "/src/view/superAdmin/api/api.vue": "Api",
   "/src/view/superAdmin/authority/authority.vue": "Authority",
   "/src/view/superAdmin/authority/components/apis.vue": "Apis",
diff --git a/src/view/equipment/alarmRecord/index.vue b/src/view/equipment/alarmRecord/index.vue
deleted file mode 100644
index 2bcfc97..0000000
--- a/src/view/equipment/alarmRecord/index.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
-    <div class="gva-search-box">
-      <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="设备ID">
-          <el-input v-model="searchInfo.deviceId" placeholder="设备ID" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
-          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="gva-table-box">
-      <div class="gva-btn-list">
-        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
-      </div>
-      <el-table :data="tableData">
-        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
-        <el-table-column align="left" label="设备号" prop="imei" width="200" />
-        <el-table-column align="left" label="网关mac" prop="gatewayMac" width="200" />
-        <el-table-column align="left" label="网关地址" prop="gatewayAddress" />
-        <el-table-column align="left" label="经纬度" width="250">
-          <template #default="scope">
-            <span>{{ scope.row.gatewayLong }}</span>
-            <el-divider direction="vertical" />
-            <span>{{ scope.row.gatewayLat }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import * as serve from '@/api/equipment/alarmRecord'
-
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
-
-  const searchInfo = ref({
-    username: '',
-    nickname: '',
-    phone: '',
-    email: ''
-  })
-
-  const page = ref(1)
-  const total = ref(0)
-  const pageSize = ref(10)
-  const tableData = ref([])
-
-  onMounted(() => {
-    getTableData()
-  })
-
-  // 分页
-  const handleSizeChange = (val) => {
-    pageSize.value = val
-    getTableData()
-  }
-  const handleCurrentChange = (val) => {
-    page.value = val
-    getTableData()
-  }
-  // 查询
-  const getTableData = async () => {
-    const table = await serve.getAlarmRecordListByPage({
-      page: page.value,
-      pageSize: pageSize.value,
-      ...searchInfo.value
-    })
-    if (table.code === 0) {
-      tableData.value = table.data.list
-      total.value = table.data.total
-      page.value = table.data.page
-      pageSize.value = table.data.pageSize
-    }
-  }
-
-  const onSubmit = () => {
-    page.value = 1
-    getTableData()
-  }
-
-  const onReset = () => {
-    searchInfo.value = {
-      deviceId: ''
-    }
-    getTableData()
-  }
-</script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>
diff --git a/src/view/equipment/index.vue b/src/view/equipment/index.vue
new file mode 100644
index 0000000..8d528c9
--- /dev/null
+++ b/src/view/equipment/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive :include="routerStore.keepAliveRouters">
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+  import { useRouterStore } from '@/pinia/modules/router'
+  const routerStore = useRouterStore()
+
+  defineOptions({
+    name: 'Equipment'
+  })
+</script>
diff --git a/src/view/equipment/particulars/index.vue b/src/view/equipment/particulars/index.vue
deleted file mode 100644
index 1a84ed0..0000000
--- a/src/view/equipment/particulars/index.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
-    <div class="gva-search-box">
-      <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="设备状态">
-          <!-- <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
-            <el-option label="合闸" :value="1" />
-            <el-option label="分闸" :value="0" />
-          </el-select> -->
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
-          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="gva-table-box">
-      <div class="gva-btn-list">
-        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
-      </div>
-      <el-table :data="tableData" row-key="ID">
-        <el-table-column align="left" label="设备ID" prop="deviceId"> </el-table-column>
-        <el-table-column align="left" label="运行时长" prop="runtime">
-          <template #default="{ row }">
-            <span>{{ row.runtime || '' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="信号质量" prop="signalQuality">
-          <template #default="{ row }">
-            {{ row.signalQuality || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="电压（V）" prop="leakageCurrent">
-          <template #default="{ row }">
-            {{ row.leakageCurrent || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="漏电流值（mA）" prop="leakageCurrent">
-          <template #default="{ row }">
-            {{ row.leakageCurrent || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="累计用电量" prop="cumulativeElectricity">
-          <template #default="{ row }">
-            {{ row.cumulativeElectricity || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="电流值（A）" prop="current">
-          <template #default="{ row }">
-            {{ row.current || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="内部温度（℃）" prop="internalTemperature">
-          <template #default="{ row }">
-            {{ row.internalTemperature || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="N相下端温度（℃）" prop="nLowerTemperature">
-          <template #default="{ row }">
-            {{ row.nLowerTemperature || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="left" label="功率因数（%）" prop="powerFactor">
-          <template #default="{ row }">
-            {{ row.powerFactor || '' }}
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" fixed="right">
-          <template #default="{ row }">
-            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
-            <!-- <el-button type="primary" link icon="Tickets" @click="openDetails(row)">查看</el-button> -->
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-  import * as serve from '@/api/equipment/particulars'
-
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
-
-  const searchInfo = ref({
-    deviceStatus: ''
-  })
-
-  const page = ref(1)
-  const total = ref(0)
-  const pageSize = ref(10)
-  const tableData = ref([])
-
-  onMounted(() => {
-    getTableData()
-  })
-
-  // 分页
-  const handleSizeChange = (val) => {
-    pageSize.value = val
-    getTableData()
-  }
-  const handleCurrentChange = (val) => {
-    page.value = val
-    getTableData()
-  }
-  // 查询
-  const getTableData = async () => {
-    const table = await serve.getDeviceDetailsListByPage({
-      page: page.value,
-      pageSize: pageSize.value,
-      ...searchInfo.value
-    })
-    if (table.code === 0) {
-      tableData.value = table.data.list
-      total.value = table.data.total
-      page.value = table.data.page
-      pageSize.value = table.data.pageSize
-    }
-  }
-
-  const onSubmit = () => {
-    page.value = 1
-    getTableData()
-  }
-
-  const onReset = () => {
-    searchInfo.value = {
-      deviceStatus: ''
-    }
-    getTableData()
-  }
-</script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>
diff --git a/src/view/securityControl/alarmList/index.vue b/src/view/securityControl/alarmList/index.vue
new file mode 100644
index 0000000..c28b954
--- /dev/null
+++ b/src/view/securityControl/alarmList/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+    <div class="p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2">
+      <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="报警事件" name="first"></el-tab-pane>
+        <el-tab-pane label="预警事件" name="second"></el-tab-pane>
+        <el-tab-pane label="二级报警事件" name="third"></el-tab-pane>
+      </el-tabs> -->
+      <el-radio-group v-model="radio" size="large" fill="#409eff">
+        <el-radio-button label="报警事件" value="New York" />
+        <el-radio-button label="预警事件" value="Washington" />
+        <el-radio-button label="二级报警事件" value="Los Angeles" />
+      </el-radio-group>
+    </div>
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="searchInfo">
+        <el-form-item label="设备ID">
+          <el-input v-model="searchInfo.deviceId" placeholder="设备ID" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
+          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
+      </div>
+      <div class="echarts-box">
+        <div class="item pie">
+          <p class="title">报警类型</p>
+          <v-chart :option="alarmTypeOption" autoresize class="alarm-type-chart" />
+        </div>
+        <div class="item broken-line">
+          <p class="title">报警数量</p>
+          <v-chart :option="alarmCountOption" autoresize class="alarm-count-chart" />
+        </div>
+      </div>
+      <el-table :data="tableData">
+        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { PieChart, LineChart } from 'echarts/charts'
+  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+  import * as serve from '@/api/equipment/alarmRecord'
+
+  import { ref, watch, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  // import { id } from 'element-plus/es/locale'
+  import { useAppStore } from '@/pinia'
+
+  // 按需注册 ECharts 模块
+  use([CanvasRenderer, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
+
+  const appStore = useAppStore()
+
+  const searchInfo = ref({
+    username: '',
+    nickname: '',
+    phone: '',
+    email: ''
+  })
+  const radio = ref('New York')
+
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  const tableData = ref([])
+
+  // 报警类型映射（与 alarm/index.vue 中的 typeMap 保持一致）
+  const alarmTypeMap = {
+    45: { label: '设备事件', color: '#409EFF' },
+    '4f': { label: '操作事件', color: '#67C23A' }
+  }
+
+  // 报警类型环形图配置（响应式 option 交给 v-chart 渲染）
+  const alarmTypeOption = ref(buildAlarmTypeOption([]))
+
+  // 报警数量折线图配置
+  const alarmCountOption = ref(buildAlarmCountOption([]))
+
+  // 构建报警类型环形图 option
+  function buildAlarmTypeOption(list) {
+    // 按 warnType 分组统计
+    const countMap = {}
+    list.forEach((item) => {
+      const key = String(item.warnType ?? 'unknown')
+      countMap[key] = (countMap[key] || 0) + 1
+    })
+    // 转成 ECharts 数据
+    const chartData = Object.keys(countMap).map((key) => {
+      // key 已经是 String，alarmTypeMap 的键也是字符串
+      const meta = alarmTypeMap[key] || { label: key || '未知', color: '#909399' }
+      return {
+        name: meta.label,
+        value: countMap[key],
+        itemStyle: { color: meta.color }
+      }
+    })
+    const totalCount = chartData.reduce((sum, d) => sum + d.value, 0)
+
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params) => `${params.name}<br/>数量：${params.value}（${params.percent}%）`
+      },
+      // 图例放右侧
+      legend: {
+        orient: 'vertical',
+        right: 8,
+        top: 'middle',
+        textStyle: { color: '#606266', fontSize: 12 },
+        itemWidth: 10,
+        itemHeight: 10
+      },
+      series: [
+        {
+          name: '报警类型',
+          type: 'pie',
+          radius: ['52%', '78%'],
+          center: ['38%', '52%'],
+          avoidLabelOverlap: false,
+          label: { show: false },
+          labelLine: { show: false },
+          itemStyle: {
+            borderRadius: 6,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          // 中心文字
+          graphic: [
+            {
+              type: 'text',
+              left: '38%',
+              top: '46%',
+              style: {
+                text: totalCount,
+                textAlign: 'center',
+                fill: '#303133',
+                fontSize: 22,
+                fontWeight: 'bold'
+              }
+            },
+            {
+              type: 'text',
+              left: '38%',
+              top: '58%',
+              style: {
+                text: '总数',
+                textAlign: 'center',
+                fill: '#909399',
+                fontSize: 12
+              }
+            }
+          ],
+          data: chartData
+        }
+      ]
+    }
+  }
+
+  // 拉取全部报警数据用于统计（不分页拿全量），同时刷新两个图表
+  const loadChartData = async () => {
+    const res = await serve.getAlarmRecordListByPage({
+      page: 1,
+      pageSize: 9999
+    })
+    if (res.code === 0) {
+      const list = res.data.list || []
+      alarmTypeOption.value = buildAlarmTypeOption(list)
+      alarmCountOption.value = buildAlarmCountOption(list)
+    }
+  }
+
+  // 构建报警数量折线图 option（按日期统计最近 30 天）
+  function buildAlarmCountOption(list) {
+    // 按日期分组（YYYY-MM-DD）
+    const countMap = {}
+    list.forEach((item) => {
+      const date = formatDate(item.CreatedAt || item.createdAt || item.time)
+      if (!date) return
+      countMap[date] = (countMap[date] || 0) + 1
+    })
+
+    // 生成最近 30 天的 X 轴（缺失日期补 0）
+    const xAxisData = []
+    const seriesData = []
+    const today = new Date()
+    for (let i = 29; i >= 0; i--) {
+      const d = new Date(today)
+      d.setDate(today.getDate() - i)
+      const key = formatDateKey(d)
+      xAxisData.push(formatDateLabel(d))
+      seriesData.push(countMap[key] || 0)
+    }
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(15, 23, 42, 0.9)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' }
+      },
+      grid: {
+        left: 36,
+        right: 16,
+        top: 16,
+        bottom: 28
+      },
+      xAxis: {
+        type: 'category',
+        data: xAxisData,
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#e4e7ed' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#f0f2f5' } },
+        axisLabel: { color: '#909399', fontSize: 11 }
+      },
+      series: [
+        {
+          name: '报警数量',
+          type: 'line',
+          data: seriesData,
+          symbol: 'none', // 不画数据点，全一条线
+          smooth: true,
+          lineStyle: {
+            color: '#409EFF',
+            width: 2
+          },
+          // 折线下面积渐变
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(64, 158, 255, 0.35)' },
+                { offset: 1, color: 'rgba(64, 158, 255, 0.02)' }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  }
+
+  // 把后端时间字段格式化成 YYYY-MM-DD
+  function formatDate(value) {
+    if (!value) return ''
+    const d = new Date(value)
+    if (isNaN(d.getTime())) return ''
+    return formatDateKey(d)
+  }
+  function formatDateKey(d) {
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+  }
+  // X 轴显示用 MM-DD
+  function formatDateLabel(d) {
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${m}-${day}`
+  }
+
+  onMounted(() => {
+    getTableData()
+    loadChartData()
+  })
+
+  // 分页
+  const handleSizeChange = (val) => {
+    pageSize.value = val
+    getTableData()
+  }
+  const handleCurrentChange = (val) => {
+    page.value = val
+    getTableData()
+  }
+  // 查询
+  const getTableData = async () => {
+    const table = await serve.getAlarmRecordListByPage({
+      page: page.value,
+      pageSize: pageSize.value,
+      ...searchInfo.value
+    })
+    if (table.code === 0) {
+      tableData.value = table.data.list
+      total.value = table.data.total
+      page.value = table.data.page
+      pageSize.value = table.data.pageSize
+    }
+  }
+
+  const onSubmit = () => {
+    page.value = 1
+    getTableData()
+  }
+
+  const onReset = () => {
+    searchInfo.value = {
+      deviceId: ''
+    }
+    getTableData()
+  }
+</script>
+
+<style lang="scss">
+  .header-img-box {
+    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
+  }
+
+  .gva-table-box {
+    padding-top: 0 !important;
+  }
+  .echarts-box {
+    display: flex;
+    > .item {
+      height: 251px;
+
+      &.pie {
+        width: 370px;
+      }
+      &.broken-line {
+        flex: 1;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+  }
+  .alarm-type-chart {
+    width: 100%;
+    height: calc(100% - 30px);
+  }
+  .alarm-count-chart {
+    width: 100%;
+    height: calc(100% - 30px);
+  }
+</style>
diff --git a/src/view/securityControl/index.vue b/src/view/securityControl/index.vue
new file mode 100644
index 0000000..b7a4e5f
--- /dev/null
+++ b/src/view/securityControl/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive :include="routerStore.keepAliveRouters">
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+  import { useRouterStore } from '@/pinia/modules/router'
+  const routerStore = useRouterStore()
+
+  defineOptions({
+    name: 'SecurityControl'
+  })
+</script>