From 4af02c6599c3c568449dba7d25f76c903e8c17b4 Mon Sep 17 00:00:00 2001
From: chenlinlin <huxin02@aisino.com>
Date: Fri, 21 Feb 2025 11:27:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=B8=8E=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/App.vue                      |   87 +
 client/src/views/big-screen/bigdata.vue       | 4464 +++++++++++++++++
 client/src/views/big-screen/bigdataBack.vue   | 3735 ++++++++++++++
 client/src/views/common/MultipleFile.vue      |  180 +
 client/src/views/common/MultiplePicture.vue   |  177 +
 client/src/views/common/PictureView.vue       |   39 +
 .../src/views/common/SignatureComponent.vue   |  135 +
 7 files changed, 8817 insertions(+)
 create mode 100644 client/src/views/App.vue
 create mode 100644 client/src/views/big-screen/bigdata.vue
 create mode 100644 client/src/views/big-screen/bigdataBack.vue
 create mode 100644 client/src/views/common/MultipleFile.vue
 create mode 100644 client/src/views/common/MultiplePicture.vue
 create mode 100644 client/src/views/common/PictureView.vue
 create mode 100644 client/src/views/common/SignatureComponent.vue

diff --git a/client/src/views/App.vue b/client/src/views/App.vue
new file mode 100644
index 0000000..c987999
--- /dev/null
+++ b/client/src/views/App.vue
@@ -0,0 +1,87 @@
+<template>
+  <!-- 全局进度条组件 -->
+  <ProgressBar />
+  <router-view v-if="isReady"></router-view>
+  <div v-else class="loading-container">
+    <div class="loading-spinner"></div>
+    <div class="loading-text">路由加载中...</div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted, nextTick } from 'vue'
+  import { useUserStore } from '@/stores/modules/user'
+  import { useRouteStore } from '@/stores/modules/router'
+  import { addDynamicRoutes } from '@/router'
+  import { useRouter, useRoute } from 'vue-router'
+  import ProgressBar from '@/components/ProgressBar.vue'
+
+  const isReady = ref(false)
+  const userStore = useUserStore()
+  const routerStore = useRouteStore()
+  const router = useRouter()
+
+
+  onMounted(async () => {
+    console.log('开始初始化应用...')
+
+    // 初始化用户信息
+    await userStore.init()
+
+    // 确保路由已加载
+    // if (routerStore.defaultRoutes.length === 0) {
+    //   routerStore.initDefaultRoutes()
+    //   // 强制加载动态路由
+    //   addDynamicRoutes()
+    // }
+
+    // 等待一些时间确保路由已完全加载
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    // 检查路由表是否已加载
+    console.log(
+      '当前路由表：',
+      router.getRoutes().map((r) => r.path)
+    )
+
+    // 标记应用已准备好
+    await nextTick()
+    isReady.value = true
+    console.log('应用初始化完成，准备渲染路由视图')
+
+    // 跳转
+    router.push(router)
+  })
+</script>
+
+<style lang="scss">
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #409eff;
+    animation: spin 1s ease-in-out infinite;
+  }
+
+  .loading-text {
+    margin-top: 16px;
+    font-size: 16px;
+    color: #606266;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/client/src/views/big-screen/bigdata.vue b/client/src/views/big-screen/bigdata.vue
new file mode 100644
index 0000000..6e84299
--- /dev/null
+++ b/client/src/views/big-screen/bigdata.vue
@@ -0,0 +1,4464 @@
+<template>
+  <div class="big-screen">
+    <div id="map" class="map"></div>
+
+    <div id="top" class="top"></div>
+    <div id="left" class="left"></div>
+    <div id="right" class="right"></div>
+    <div id="bottom" class="bottom"></div>
+
+    <div class="title_background"></div>
+    <div class="title"></div>
+    <div class="home" @click="goHome"></div>
+    <div class="fullScreen" @click="fullScreen"></div>
+    <div class="back" @click="goHome">返回首页</div>
+
+    <div class="switch switch1" :class="{ 'switch-active': isMapMarkActive === 1 }" @click="changeMapMark(1)">
+      <div class="icon"></div>
+      <div class="label">企业</div>
+    </div>
+    <div class="switch switch2" :class="{ 'switch-active': isMapMarkActive === 2 }" @click="changeMapMark(2)">
+      <div class="icon"></div>
+      <div class="label">执法记录仪</div>
+    </div>
+    <div class="switch switch3" :class="{ 'switch-active': isMapMarkActive === 3 }" @click="changeMapMark(3)">
+      <div class="icon"></div>
+      <div class="label">执法车辆</div>
+    </div>
+    <div class="switch switch4" :class="{ 'switch-active': isMapMarkActive === 4 }" @click="changeMapMark(4)">
+      <div class="icon"></div>
+      <div class="label">对讲机</div>
+    </div>
+
+    <div class="search" v-show="showSearchQyxx">
+      <el-select v-model="searchValue"
+                 size="default"
+                 style="width: 160px"
+                 placeholder="企业检索"
+                 clearable
+                 filterable
+                 :filter-method="filterQyxx"
+                 @change="selectQyxx">
+        <el-option v-for="(item, index) in jsqyxx"
+                   :key="index"
+                   :label="item.unitName"
+                   :value="item.enterpriseId"/>
+      </el-select>
+    </div>
+
+    <div class="select" v-show="isSelectShow">
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === '' }" @click="changeType('')">全部
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 1 }" @click="changeType(1)">省级
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 2 }" @click="changeType(2)">市级
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 3 }" @click="changeType(3)">区县级
+      </div>
+    </div>
+
+    <div class="left_content">
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法对象概览</div>
+        </div>
+        <div class="content enterprise_content">
+          <img src="../../assets/bigscreen/59.png">
+          <div class="content_top">
+            <div class="icon"></div>
+            <div class="label">执法对象总数</div>
+            <div class="num" @click="handleEnterprisePage('')">{{ zfdx.qys }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>危化企业</div>
+              <div class="num" @click="handleEnterprisePage('2,3,4')">{{ zfdx.wh }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>工业企业</div>
+              <div class="num" @click="handleEnterprisePage('6')">{{ zfdx.gy }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>商贸企业</div>
+              <div class="num" @click="handleEnterprisePage('7')">{{ zfdx.sm }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>加油站</div>
+              <div class="num" @click="handleEnterprisePage('5')">{{ zfdx.jy }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>矿山企业</div>
+              <div class="num" @click="handleEnterprisePage('1')">{{ zfdx.ks }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon qy"></span>其他</div>
+              <div class="num" @click="handleEnterprisePage('99')">{{ zfdx.qt }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法队伍概况</div>
+        </div>
+        <div class="content">
+          <img src="../../assets/bigscreen/58.png">
+          <div class="content_top">
+            <div class="icon icon2"></div>
+            <div class="label">执法人员数量</div>
+            <div class="num" @click="handleOfficerInfo">{{ zfrys }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zsfz"></span>制式服装</div>
+              <div class="num" @click="handZsfzPage">{{ zsfzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon jly"></span>执法记录仪</div>
+              <div class="num" @click="handZfzbPage('7')">{{ zfjlyzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon jrs"></span>对讲机</div>
+              <div class="num" @click="handZfzbPage('8')">{{ zfdjjzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon wxs"></span>问询室</div>
+              <div class="num" @click="">0</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法装备概览</div>
+        </div>
+        <div class="content enterprise_content">
+          <img src="../../assets/bigscreen/59.png">
+          <div class="content_top">
+            <div class="icon icon3"></div>
+            <div class="label">执法车辆数量</div>
+            <div class="num" @click="handLawEnforceVehiclePage">{{ zfcls }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon gtfh"></span>个体防护</div>
+              <div class="num" @click="handZfzbPage('1')">{{ gtfhs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zfbz"></span>执法保障</div>
+              <div class="num" @click="handZfzbPage('2')">{{ zfbzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zfgc"></span>执法过程</div>
+              <div class="num" @click="handZfzbPage('3')">{{ zfgcs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon clzc"></span>测量侦检</div>
+              <div class="num" @click="handZfzbPage('4')">{{ clzjs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon kszf"></span>矿山执法</div>
+              <div class="num" @click="handZfzbPage('5')">{{ kszfs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon whzf"></span>危化品执法</div>
+              <div class="num" @click="handZfzbPage('6')">{{ whpzfs }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right_content">
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法检查</div>
+        </div>
+        <div class="content">
+          <div ref="chart2" style="height: 100%; width: 100%;"></div>
+          <!--          <div class="sum">-->
+          <!--            <div class="sum-text">执法检查总数</div>-->
+          <!--            <div class="sum-num">{{ sumNum }}</div>-->
+          <!--          </div>-->
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">案例来源</div>
+        </div>
+        <div class="content">
+          <div ref="chart4" style="height: 100%; width: 100%;"></div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">非现场执法统计<span class="detail" @click="skipPage">(<label>详情</label>)</span></div>
+          <div class="time">
+            <span :class="{ active: isMonthActive }" @click="toggleTimeRange('1')">月</span>
+            <span :class="{ active: !isMonthActive }" @click="toggleTimeRange('2')">年</span>
+          </div>
+        </div>
+        <div class="content">
+          <div ref="chart5" style="width:100%;height: 100%;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_content">
+      <div class="bg1"></div>
+      <div class="bg2" :style="{ transform: isMoved ? 'translateY(-210px)' : 'translateY(0)' }">
+        <div class="btn-content" v-show="isMoved">
+          <div class="btn" :class="{ 'btn-active': btnActive === 1 }" @click="getJctj">检查</div>
+          <div class="btn" :class="{ 'btn-active': btnActive === 2 }" @click="getAjtj">立案</div>
+          <div class="btn" :class="{ 'btn-active': btnActive === 3 }" @click="getCfjetj">处罚金额</div>
+          <div class="btn" :class="{ 'btn-active': btnActive === 4 }" @click="getRwwjtj">任务完结</div>
+        </div>
+        <!--        <div class="detail-content" v-show="isMoved">-->
+        <!--          <div class="detail-btn" @click="getJctj">详情</div>-->
+        <!--          <div class="detail-btn" @click="getAjtj">详情</div>-->
+        <!--          <div class="detail-btn" @click="getCfjetj">详情</div>-->
+        <!--          <div class="detail-btn" @click="getRwwjtj">详情</div>-->
+        <!--        </div>-->
+      </div>
+      <div class="bg3" :style="{ transform: isMoved ? 'translateY(-210px)' : 'translateY(0)' }" @click="toggleMove"/>
+      <div class="content" v-if="isMoved">
+        <div ref="chart6" style="width:100%;height: 100%;"></div>
+      </div>
+    </div>
+
+    <transition name="modal-fade" v-if="enterprisePageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: enterprisePageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeEnterprisePage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-query">
+            <el-form :model="enterprisePageParams" label-width="80px">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="属地" prop="agencyName">
+                    <el-input v-model="enterprisePageParams.agencyName" clearable/>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="单位名称" prop="unitName">
+                    <el-input v-model="enterprisePageParams.unitName" clearable/>
+                  </el-form-item>
+                </el-col>
+<!--                <el-col :span="8">-->
+<!--                  <el-form-item label="统一信用代码" prop="unifiedSocialCode">-->
+<!--                    <el-input v-model="enterprisePageParams.unifiedSocialCode" clearable/>-->
+<!--                  </el-form-item>-->
+<!--                </el-col>-->
+              </el-row>
+              <el-row>
+                <div class="query-btn" @click="getEnterprisePage">查询</div>
+              </el-row>
+            </el-form>
+          </div>
+          <BusinessTable ref="busiTable"
+                         :config="enterprisePageTableConfig"
+                         :data-res="enterprisePageData"
+                         :query-params="enterprisePageParams"
+                         @query-params="handleEnterprisePageQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="属地" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="unitName" label="单位名称" min-width="150"/>
+<!--            <el-table-column align="center" header-align="center" prop="unifiedSocialCode" label="信用代码"-->
+<!--                             min-width="150"/>-->
+            <el-table-column align="center" header-align="center" prop="businessCategory" label="企业分类" min-width="150">
+              <template #default="{row}">
+                {{ {'1': 'A', '2': 'B', '3': 'C', '4': 'D'}[row.businessCategory] || row.businessCategory }}
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="80" align="center">
+              <template #default="{row}">
+                <el-link type="primary" title="检查明细" @click="handEnterpriseDetail(row)">详情</el-link>
+              </template>
+            </el-table-column>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="officerListShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: officerInfoIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeOfficerList"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="officerTableConfig"
+                         :data-res="officerListData"
+                         :query-params="officerListQueryParams"
+                         @query-params="handleOfficerListQueryParams">
+            <el-table-column align="center" header-align="center" prop="officerName" label="姓名" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构" min-width="200"/>
+            <el-table-column align="center" header-align="center" prop="certificateNo" label="执法证号"
+                             min-width="250"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="lawEnforceVehiclePageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: lawEnforceVehiclePageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeLawEnforceVehiclePage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="lawEnforceVehiclePageTableConfig"
+                         :data-res="lawEnforceVehiclePageData"
+                         :query-params="lawEnforceVehiclePageQueryParams"
+                         @query-params="handLawEnforceVehiclePageQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="cllx" label="车辆类型"/>
+            <el-table-column align="center" header-align="center" prop="cph" label="车牌号"/>
+            <el-table-column align="center" header-align="center" prop="clbm" label="车辆编码"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="zfzbPageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: zfzbPageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeZfzbPage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="zfzbTableConfig"
+                         :data-res="zfzbPageData"
+                         :query-params="zfzbPageQueryParams"
+                         @query-params="handZfzbQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="zbmc" label="装备名称"/>
+            <el-table-column align="center" header-align="center" prop="zblx" label="装备类型"/>
+            <el-table-column align="center" header-align="center" prop="syr" label="使用人"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="zsfzPageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: zsfzPageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeZsfzPage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="zsfzTableConfig"
+                         :data-res="zsfzPageData"
+                         :query-params="zsfzPageQueryParams"
+                         @query-params="handZsfzQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="fzlx" label="服装类型"/>
+            <el-table-column align="center" header-align="center" prop="fzbm" label="服装编码"/>
+            <el-table-column align="center" header-align="center" prop="name" label="使用人"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="checkPageShow">
+      <div class="modal check-modal" :style="{ zIndex: checkPageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeCheckPage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <el-collapse v-model="activeNames" accordion>
+            <el-collapse-item title="重点企业检查" name="1">
+              <BusinessTable ref="busiTable"
+                             style="height: 320px"
+                             :config="checkPageTableConfig"
+                             :data-res="keyCheckPageData"
+                             :query-params="keyCheckPageParams"
+                             @query-params="handleKeyCheckPageQueryParams">
+                <el-table-column align="center" header-align="center" prop="taskName" label="任务名称" min-width="150"/>
+                <el-table-column align="center" header-align="center" prop="taskDescription" label="任务描述"
+                                 min-width="250"/>
+                <el-table-column align="center" header-align="center" prop="taskDateFrom" label="开始日期" min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="taskDateTo" label="结束日期" min-width="100"/>
+              </BusinessTable>
+            </el-collapse-item>
+            <el-collapse-item title="双随机检查" name="2">
+              <BusinessTable ref="busiTable"
+                             style="height: 320px"
+                             :config="checkPageTableConfig"
+                             :data-res="randomCheckPageData"
+                             :query-params="randomCheckPageParams"
+                             @query-params="handleRandomCheckPageQueryParams">
+                <el-table-column align="center" header-align="center" prop="taskName" label="任务名称" min-width="150"/>
+                <el-table-column align="center" header-align="center" prop="taskDescription" label="任务描述"
+                                 min-width="250"/>
+                <el-table-column align="center" header-align="center" prop="taskDateFrom" label="开始日期" min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="taskDateTo" label="结束日期" min-width="100"/>
+              </BusinessTable>
+            </el-collapse-item>
+            <el-collapse-item title="专项检查" name="3">
+              <BusinessTable ref="busiTable"
+                             style="height: 320px"
+                             :config="checkPageTableConfig"
+                             :data-res="specialCheckPageData"
+                             :query-params="specialCheckPageParams"
+                             @query-params="handleSpecialCheckPageQueryParams">
+                <el-table-column align="center" header-align="center" prop="agency.agencyName" label="属地"
+                                 min-width="150"/>
+                <el-table-column align="center" header-align="center" prop="checkType" label="检查类型" min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="deliverTime" label="转交时间" min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="description" label="检查描述" min-width="250"/>
+              </BusinessTable>
+            </el-collapse-item>
+            <el-collapse-item title="举报投诉" name="4">
+              <BusinessTable ref="busiTable"
+                             style="height: 320px"
+                             :config="checkPageTableConfig"
+                             :data-res="reportCheckPageData"
+                             :query-params="reportCheckPageParams"
+                             @query-params="handleReportCheckPageQueryParams">
+                <el-table-column align="center" header-align="center" prop="agency.agencyName" label="属地"
+                                 min-width="150"/>
+                <el-table-column align="center" header-align="center" prop="reporterName" label="举报人姓名"
+                                 min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="acceptTime" label="受理时间" min-width="100"/>
+                <el-table-column align="center" header-align="center" prop="briefFact" label="简要情况" min-width="250"/>
+              </BusinessTable>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="casePageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: casePageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeCasePage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="casePageTableConfig"
+                         :data-res="casePageData"
+                         :query-params="casePageQueryParams"
+                         @query-params="handCasePageQueryParams">
+            <el-table-column align="center" header-align="center" prop="caseNum" label="案件号" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="caseName" label="案件名称" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="caseTime" label="案发时间" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="caseDesc" label="案件描述" min-width="250"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="enterpriseShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: enterpriseIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeEnterprise"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-info">
+            <div class="enterprise-info-item">
+              <div class="v-label">属地</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.agencyName">
+                  <template #reference>
+                    {{ enterprise.agencyName }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">企业名称</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.unitName">
+                  <template #reference>
+                    {{ enterprise.unitName }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+<!--            <div class="enterprise-info-item">-->
+<!--              <div class="v-label">统一信用代码</div>-->
+<!--              <div class="text">{{ enterprise.unifiedSocialCode }}</div>-->
+<!--            </div>-->
+            <div class="enterprise-info-item">
+              <div class="v-label">企业地址</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.detailedAddress">
+                  <template #reference>
+                    {{ enterprise.detailedAddress }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">成立日期</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.establishmentDate">
+                  <template #reference>
+                    {{ enterprise.establishmentDate }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">法定代表人</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.legalRepresentative">
+                  <template #reference>
+                    {{ enterprise.legalRepresentative }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">法人证件号码</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.legalPersonIdNumber">
+                  <template #reference>
+                    {{ enterprise.legalPersonIdNumber }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">法人联系电话</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.legalPhone">
+                  <template #reference>
+                    {{ enterprise.legalPhone }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">企业规模</div>
+              <div class="text">
+                <el-popover
+                    placement="top-start"
+                    :width="210"
+                    trigger="hover"
+                    :content="enterprise.unitScale">
+                  <template #reference>
+                    {{ enterprise.unitScale }}
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+          </div>
+          <el-table class="table" border :data="enterprise.enforceChecks">
+            <el-table-column header-align="center" align="center" label="执法机构" prop="agencyName"/>
+            <el-table-column header-align="center" align="center" label="执法人员" prop="officerNames"/>
+<!--            <el-table-column header-align="center" align="center" label="检查状态" prop="checkStatusMsg"/>-->
+            <el-table-column header-align="center" align="center" label="检查日期" prop="checkDate"/>
+            <el-table-column header-align="center" align="center" label="检查结果" prop="checkResultMsg"/>
+          </el-table>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="isShow">
+      <div class="modal" :style="{ zIndex: zIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeModal"></div>
+        </div>
+        <div class="modal-content">
+          <div class="video-content">
+            <video width="100%" height="100%" ref="video" controls autoplay/>
+            <audio width="100%" height="100%" ref="audio" controls autoplay style="display: none"/>
+          </div>
+          <div class="device-info">
+            <div class="device-info-item">
+              <div class="v-label">设备型号</div>
+              <div class="text">{{ deviceInfo.recorder_type_name }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备编号</div>
+              <div class="text">{{ deviceInfo.hostbody }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">执法人员</div>
+              <div class="text">{{ deviceInfo.prealname }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">所属单位</div>
+              <div class="text">{{ deviceInfo.unitname }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-btn">
+          <div @click="playAudio" class="sound-btn" v-show="isShowVoice">语音</div>
+          <div @click="playVideo" class="video-btn">视频</div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="interphoneShow">
+      <div class="modal interphone-modal" :style="{ zIndex: interphoneIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeModal2"></div>
+        </div>
+        <div class="modal-content">
+          <div class="video-content">
+            <video width="100%" height="100%" ref="interphonevideo" controls autoplay/>
+            <audio width="100%" height="100%" ref="interphoneaudio" controls autoplay style="display: none"/>
+          </div>
+          <div class="device-info">
+            <div class="device-info-item">
+              <div class="v-label">设备ID</div>
+              <div class="text">{{ interphoneInfo.basedata_id }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备号码</div>
+              <div class="text">{{ interphoneInfo.device_number }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备名称</div>
+              <div class="text">{{ interphoneInfo.device_alias }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">坐标更新速度</div>
+              <div class="text">{{ interphoneInfo.current_interval_time }}s</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-btn">
+          <div @click="getVideoCall" class="sound-btn">{{ label }}</div>
+          <div @click="hangupCall" class="video-btn">挂断</div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-if="lawEnforceVehicleShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: lawEnforceVehicleIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeLawEnforceVehicleInfo"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-info2">
+            <div class="enterprise-info-item2">
+              <div class="v-label">所属机构</div>
+              <div class="text">{{ lawEnforceVehicleInfo.sdmc }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车辆类型</div>
+              <div class="text">{{ lawEnforceVehicleInfo.cllx }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车牌号</div>
+              <div class="text">{{ lawEnforceVehicleInfo.cph }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车辆编码</div>
+              <div class="text">{{ lawEnforceVehicleInfo.clbm }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">是否喷涂制式标志</div>
+              <div class="text">{{ lawEnforceVehicleInfo.zsbzMsg }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">制式标志编号</div>
+              <div class="text">{{ lawEnforceVehicleInfo.zsbzbh }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">经度</div>
+              <div class="text">{{ lawEnforceVehicleInfo.longitude }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">纬度</div>
+              <div class="text">{{ lawEnforceVehicleInfo.latitude }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">购置时间</div>
+              <div class="text">{{ lawEnforceVehicleInfo.gzsj }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, onUnmounted, reactive, ref} from 'vue'
+import * as echarts from 'echarts'
+import CryptoJS from 'crypto-js'
+import axios from 'axios'
+import {useRouter} from 'vue-router'
+import {ElMessage} from 'element-plus'
+import api from '@/api/lawenforcement/BigScreen'
+import api2 from '@/api/lawenforcement/Enterprise.js'
+import api3 from '@/api/lawenforcement/Officer.js'
+import api4 from '@/api/lawenforcement/Zfclgl.js'
+import api5 from '@/api/lawenforcement/Zfzbgl.js'
+import api6 from '@/api/lawenforcement/Zsfzgl.js'
+import api7 from '@/api/lawenforcement/AutoEnforcementPlan.js'
+import api8 from '@/api/lawenforcement/SupervisionCheck.js'
+import api9 from '@/api/lawenforcement/ReportCheck.js'
+import api10 from '@/api/lawenforcement/Case.js'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import xzqh from '@/assets/xzqh.json'
+import BusinessTable from '@/components/BusinessTable.vue'
+
+// 路由实例
+const router = useRouter()
+
+/**
+ * 返回首页
+ */
+const goHome = () => {
+  router.push('/svi/index')
+}
+
+/**
+ * 全屏
+ */
+let isFullScreen = ref(false)
+
+const fullScreen = () => {
+  if (!isFullScreen.value) {  // 检查.value
+    document.documentElement.requestFullscreen()
+        .then(() => isFullScreen.value = true)
+        .catch(err => console.error('进入全屏失败:', err))
+  } else {
+    document.exitFullscreen()
+        .then(() => isFullScreen.value = false)
+        .catch(err => console.error('退出全屏失败:', err))
+  }
+}
+
+// 地图
+let egismap
+let markersLayer1
+let markersLayer2
+let markersLayer3
+let markersLayer4
+
+// function loadMap() {
+//   // 设置地图坐标系
+//   L.CRS.EPSG4490 = L.extend({}, L.CRS.EPSG4326, {
+//     code: 'EPSG:4490',
+//     scale: function (zoom) {
+//       return 256 * Math.pow(2, zoom - 1)
+//     },
+//   })
+//   // 初始化地图设置中心点
+//   egismap = L.map('map', {crs: L.CRS.EPSG4490}).setView([34.271013, 108.91908], 10)
+//   // 添加地图边界
+//   L.geoJSON(xzqh, {
+//     style: {
+//       color: '#3F83F0', // 边界线颜色
+//       weight: 3, // 边界线宽度
+//       opacity: 0.8, // 边界线透明度
+//       fillColor: '#3F83F0', // 填充颜色
+//       fillOpacity: 0, // 填充透明度
+//     }
+//   }).addTo(egismap)
+//   // 从 GeoJSON 中计算矩形边界
+//   let bounds = L.geoJSON(xzqh).getBounds()
+//   // 限制地图拖动范围
+//   egismap.setMaxBounds(bounds, {padding: [50, 50]})
+//   // 底图
+//   let baseLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_IMAGE/MapServer/tile/{z}/{y}/{x}", {maxZoom: 20})
+//   // 注记
+//   let labelLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_TEXT/MapServer/tile/{z}/{y}/{x}", {
+//     maxZoom: 20,
+//     pane: 'shadowPane'
+//   })
+//   // 添加底图，注记
+//   L.layerGroup([baseLayer, labelLayer]).addTo(egismap)
+//   // 添加marker图层
+//   markersLayer1 = L.layerGroup().addTo(egismap)
+//   markersLayer2 = L.layerGroup().addTo(egismap)
+//   markersLayer3 = L.layerGroup().addTo(egismap)
+//   markersLayer4 = L.layerGroup().addTo(egismap)
+//   // 获取企业基本信息
+//   getQyxx()
+// }
+
+function loadMap() {
+  // 设置地图坐标系
+  L.CRS.EPSG4490 = L.extend({}, L.CRS.EPSG4326, {
+    code: 'EPSG:4490',
+    scale: function (zoom) {
+      return 256 * Math.pow(2, zoom - 1)
+    },
+  })
+
+  // 初始化地图前创建阴影遮罩专用pane（层级在底图之上，边界之下）
+  L.Map.addInitHook(function () {
+    this.createPane('shadowMaskPane')
+    const maskPane = this.getPane('shadowMaskPane')
+    maskPane.style.zIndex = 350 // 确保在底图(200)之上，边界线(400)之下
+    maskPane.style.pointerEvents = 'none' // 不影响地图交互
+  })
+
+  // 初始化地图
+  egismap = L.map('map', {crs: L.CRS.EPSG4490}).setView([34.271013, 108.91908], 10)
+
+  // 底图和注记（先加载底图）
+  let baseLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_IMAGE/MapServer/tile/{z}/{y}/{x}", {maxZoom: 20})
+  let labelLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_TEXT/MapServer/tile/{z}/{y}/{x}", {
+    maxZoom: 20,
+    pane: 'shadowPane'
+  })
+  L.layerGroup([baseLayer, labelLayer]).addTo(egismap)
+
+  // 生成边界外的阴影遮罩（修正版）
+  // 获取地图最大边界（覆盖所有可能范围）
+  const worldBounds = L.latLngBounds(
+      [-90, -180], // 西南角
+      [90, 180]    // 东北角
+  )
+
+  // 生成外层全球范围的多边形坐标（顺时针）
+  const outerRing = [
+    [worldBounds.getWest(), worldBounds.getSouth()], // 西南
+    [worldBounds.getEast(), worldBounds.getSouth()], // 东南
+    [worldBounds.getEast(), worldBounds.getNorth()], // 东北
+    [worldBounds.getWest(), worldBounds.getNorth()], // 西北
+    [worldBounds.getWest(), worldBounds.getSouth()]  // 闭合
+  ]
+
+  // 处理内层边界（xzqh）作为“洞”（需逆时针，且适配 MultiPolygon 类型）
+  let innerRings = []
+  xzqh.features.forEach(feature => {
+    // 处理 Polygon 或 MultiPolygon 类型
+    if (feature.geometry.type === 'Polygon') {
+      // 取第一个多边形的外环，并转为逆时针（通过反转坐标实现）
+      const ring = feature.geometry.coordinates[0].slice().reverse()
+      innerRings.push(ring)
+    } else if (feature.geometry.type === 'MultiPolygon') {
+      // 处理多个多边形
+      feature.geometry.coordinates.forEach(polygon => {
+        const ring = polygon[0].slice().reverse()
+        innerRings.push(ring)
+      })
+    }
+  })
+
+  // 正确的 maskGeoJSON 格式
+  const maskGeoJSON = {
+    "type": "Feature",
+    "properties": {},
+    "geometry": {
+      "type": "Polygon",
+      "coordinates": [outerRing, ...innerRings] // 外层 + 所有内层洞
+    }
+  }
+
+  // 绘制遮罩层（这次会生效）
+  L.geoJSON(maskGeoJSON, {
+    pane: 'shadowMaskPane',
+    style: {
+      color: 'transparent',
+      fillColor: '#000000',
+      fillOpacity: 0.3,
+      weight: 0
+    }
+  }).addTo(egismap)
+
+  // 绘制原始边界线（覆盖在阴影之上）
+  L.geoJSON(xzqh, {
+    style: {
+      color: '#3F83F0',
+      weight: 3,
+      opacity: 0.8,
+      fill: false // 不填充内部，保持原始地图样式
+    }
+  }).addTo(egismap)
+
+  // 后续逻辑不变
+  let bounds = L.geoJSON(xzqh).getBounds()
+  egismap.setMaxBounds(bounds, {padding: [50, 50]})
+  markersLayer1 = L.layerGroup().addTo(egismap)
+  markersLayer2 = L.layerGroup().addTo(egismap)
+  markersLayer3 = L.layerGroup().addTo(egismap)
+  markersLayer4 = L.layerGroup().addTo(egismap)
+  getQyxx()
+}
+
+/**
+ * 执法对象概览
+ */
+// 执法对象统计
+const zfdx = reactive({qys: 0, wh: 0, gy: 0, sm: 0, jy: 0, ks: 0, qt: 0})
+
+function getZfdxtj() {
+  api.getEnterpriseStatistics().then(res => {
+    if (res.success) {
+      zfdx.qys = res.data.qys
+      zfdx.wh = res.data.wh
+      zfdx.gy = res.data.gy
+      zfdx.sm = res.data.sm
+      zfdx.jy = res.data.jy
+      zfdx.ks = res.data.ks
+      zfdx.qt = res.data.qt
+    }
+  })
+}
+
+let enterprisePageIndex = ref(999)
+let enterprisePageShow = ref(false)
+let enterprisePageParams = ref({})
+let enterprisePageData = reactive({})
+let enterprisePageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleEnterprisePage(val) {
+  enterprisePageIndex.value = zIndex.value += 1
+  enterprisePageShow.value = true
+  enterprisePageParams.value.industryType = val
+  enterprisePageParams.value.page = 1
+  enterprisePageParams.value.pageSize = 10
+  enterprisePageParams.value.pagesize = 10
+  // getEnterprisePage()
+}
+
+function getEnterprisePage() {
+  api2.query(enterprisePageParams.value).then(res => Object.assign(enterprisePageData, res))
+}
+
+function handleEnterprisePageQueryParams(val) {
+  Object.assign(enterprisePageParams.value, val)
+  getEnterprisePage()
+}
+
+function handEnterpriseDetail(row) {
+  enterpriseIndex.value = zIndex.value += 1
+  enterpriseShow.value = true
+  findQyxxZfxx(row)
+}
+
+function closeEnterprisePage() {
+  enterprisePageShow.value = false
+}
+
+/**
+ * 执法队伍概览
+ */
+// 执法人员数
+let zfrys = ref(0)
+
+function getZfrys() {
+  api3.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfrys.value = data
+    }
+  })
+}
+
+let officerInfoIndex = ref(999)
+let officerListShow = ref(false)
+let officerListQueryParams = ref({})
+let officerListData = reactive({})
+let officerTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleOfficerInfo() {
+  officerInfoIndex.value = zIndex.value += 1
+  officerListShow.value = true
+  officerListQueryParams.value.page = 1
+  officerListQueryParams.value.pageSize = 10
+  officerListQueryParams.value.pagesize = 10
+  //getOfficerList()
+}
+
+function getOfficerList() {
+  api3.query(officerListQueryParams.value).then(res => Object.assign(officerListData, res))
+}
+
+function handleOfficerListQueryParams(val) {
+  Object.assign(officerListQueryParams.value, val)
+  getOfficerList()
+}
+
+function closeOfficerList() {
+  officerListShow.value = false
+}
+
+// 制式服装
+let zsfzs = ref(0)
+
+function getZsfztj() {
+  api6.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zsfzs.value = data
+    }
+  })
+}
+
+let zsfzPageIndex = ref(999)
+let zsfzPageShow = ref(false)
+let zsfzPageQueryParams = ref({})
+let zsfzPageData = reactive({})
+let zsfzTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handZsfzPage() {
+  zsfzPageIndex.value = zIndex.value += 1
+  zsfzPageShow.value = true
+  zsfzPageQueryParams.value.page = 1
+  zsfzPageQueryParams.value.pageSize = 10
+  zsfzPageQueryParams.value.pagesize = 10
+  // getZsfzPage()
+}
+
+function getZsfzPage() {
+  api6.query(zsfzPageQueryParams.value).then(res => Object.assign(zsfzPageData, res))
+}
+
+function handZsfzQueryParams(val) {
+  Object.assign(zsfzPageQueryParams.value, val)
+  getZsfzPage()
+}
+
+function closeZsfzPage() {
+  zsfzPageShow.value = false
+}
+
+/**
+ * 执法装备概览
+ */
+// 执法车辆
+let zfcls = ref(0)
+
+function getZfcltj() {
+  api4.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfcls.value = data
+    }
+  })
+}
+
+let zfclList = []
+
+function getZfclList() {
+  api4.list().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfclList = data
+      loadMark('3', zfclList)
+    }
+  })
+}
+
+let lawEnforceVehicleIndex = ref(999)
+let lawEnforceVehicleShow = ref(false)
+let lawEnforceVehicleInfo = reactive({})
+
+function handZfclInfo(data) {
+  lawEnforceVehicleIndex.value = zIndex.value += 1
+  lawEnforceVehicleShow.value = true
+  if (data.zsbz === '0') {
+    data.zsbzMsg = '否'
+  } else if (data.zsbz === '1') {
+    data.zsbzMsg = '是'
+  }
+  Object.assign(lawEnforceVehicleInfo, data)
+}
+
+function closeLawEnforceVehicleInfo() {
+  lawEnforceVehicleShow.value = false
+}
+
+let lawEnforceVehiclePageIndex = ref(999)
+let lawEnforceVehiclePageShow = ref(false)
+let lawEnforceVehiclePageQueryParams = ref({})
+let lawEnforceVehiclePageData = reactive({})
+let lawEnforceVehiclePageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handLawEnforceVehiclePage() {
+  lawEnforceVehiclePageIndex.value = zIndex.value += 1
+  lawEnforceVehiclePageShow.value = true
+  lawEnforceVehiclePageQueryParams.value.page = 1
+  lawEnforceVehiclePageQueryParams.value.pageSize = 10
+  lawEnforceVehiclePageQueryParams.value.pagesize = 10
+  //getLawEnforceVehiclePage()
+}
+
+function getLawEnforceVehiclePage() {
+  api4.query(lawEnforceVehiclePageQueryParams.value).then(res => Object.assign(lawEnforceVehiclePageData, res))
+}
+
+function handLawEnforceVehiclePageQueryParams(val) {
+  Object.assign(lawEnforceVehiclePageQueryParams.value, val)
+  getLawEnforceVehiclePage()
+}
+
+function closeLawEnforceVehiclePage() {
+  lawEnforceVehiclePageShow.value = false
+}
+
+// 执法装备
+let zfjlyzs = ref(0)
+let zfdjjzs = ref(0)
+let gtfhs = ref(0)
+let zfbzs = ref(0)
+let zfgcs = ref(0)
+let clzjs = ref(0)
+let kszfs = ref(0)
+let whpzfs = ref(0)
+
+function getZfzbtj() {
+  api5.statistics().then(res => {
+    if (res.success) {
+      let data = res.data
+      data.forEach(item => {
+        if (item.zblxdm === '1') {
+          gtfhs.value = item.nums
+        } else if (item.zblxdm === '2') {
+          zfbzs.value = item.nums
+        } else if (item.zblxdm === '3') {
+          zfgcs.value = item.nums
+        } else if (item.zblxdm === '4') {
+          clzjs.value = item.nums
+        } else if (item.zblxdm === '5') {
+          kszfs.value = item.nums
+        } else if (item.zblxdm === '6') {
+          whpzfs.value = item.nums
+        } else if (item.zblxdm === '7') {
+          zfjlyzs.value = item.nums
+        } else if (item.zblxdm === '8') {
+          zfdjjzs.value = item.nums
+        }
+      })
+    }
+  })
+}
+
+let zfzbPageIndex = ref(999)
+let zfzbPageShow = ref(false)
+let zfzbPageQueryParams = ref({})
+let zfzbPageData = reactive({})
+let zfzbTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+let zblxdm
+function handZfzbPage(val) {
+  zfzbPageIndex.value = zIndex.value += 1
+  zfzbPageShow.value = true
+  zfzbPageQueryParams.value.page = 1
+  zfzbPageQueryParams.value.pageSize = 10
+  zfzbPageQueryParams.value.pagesize = 10
+  zfzbPageQueryParams.value.zblxdm = val
+  zblxdm = val
+  // getZfzbPage(val)
+}
+
+function getZfzbPage(val) {
+  api5.query(zfzbPageQueryParams.value).then(res => Object.assign(zfzbPageData, res))
+}
+
+function handZfzbQueryParams(val) {
+  Object.assign(zfzbPageQueryParams.value, val)
+  getZfzbPage(zblxdm)
+}
+
+function closeZfzbPage() {
+  zfzbPageShow.value = false
+}
+
+/**
+ *执法检查（执法形式）
+ */
+// 执法检查统计
+function getZfxs() {
+  api.getZfxs().then(res => {
+    if (res.success) {
+      let data = res.data
+      showEnforceChart(data)
+    }
+  })
+}
+
+const chart2 = ref(null)
+let enforceChart = null
+let sumNum = ref(0)
+
+function showEnforceChart(data) {
+  if (chart2.value) {
+    enforceChart = echarts.init(chart2.value)
+
+    let colorArr = ['rgba(246, 189, 22, 1)', 'rgba(20, 177, 202, 1)', 'rgba(91, 143, 249, 1)', 'rgba(219, 121, 233, 1)']
+
+    let color = [
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(255, 126, 0, 1)'},
+          {offset: 0.5, color: 'rgba(255, 126, 0, 0.55)'},
+          {offset: 1, color: 'rgba(255, 126, 0, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(51, 211, 255, 1)'},
+          {offset: 0.5, color: 'rgba(51, 211, 255, 0.55)'},
+          {offset: 1, color: 'rgba(51, 211, 255, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(48, 96, 255, 1)'},
+          {offset: 0.5, color: 'rgba(48, 96, 255, 0.55)'},
+          {offset: 1, color: 'rgba(48, 96, 255, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(203, 1, 255, 1)'},
+          {offset: 0.5, color: 'rgba(203, 1, 255, 0.55)'},
+          {offset: 1, color: 'rgba(203, 1, 255, 0.1)'},
+        ]
+      },
+    ]
+
+    let chartData = [
+      {
+        name: '重点企业检查',
+        value: data.filter(item => item.check_type === '1')[0].num
+      },
+      {
+        name: '双随机检查',
+        value: data.filter(item => item.check_type === '2')[0].num
+      },
+      {
+        name: '专项检查',
+        value: data.filter(item => item.check_type === '3')[0].num
+      },
+      {
+        name: '投诉举报',
+        value: data.filter(item => item.check_type === '4')[0].num
+      }
+    ]
+
+    // 数据处理
+    let arrName = []
+    let arrValue = []
+    chartData.forEach(v => {
+      arrName.push(v.name)
+      arrValue.push(v.value)
+      sumNum.value = sumNum.value + v.value
+    })
+
+    let pieSeries = [], lineYAxis = []
+
+    // 图表option整理
+    chartData.forEach((v, i) => {
+      pieSeries.push({
+        type: 'pie',
+        clockWise: false,
+        hoverAnimation: false,
+        radius: [82 - i * 10 + '%', 76 - i * 10 + '%'],
+        center: ['50%', '50%'],
+        label: {
+          show: false
+        },
+        data: [
+          {
+            value: v.value,
+            name: v.name,
+            itemStyle: {
+              borderRadius: [50, 50, 50, 50]
+            }
+          },
+          {
+            value: sumNum.value,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          }
+        ]
+      })
+      pieSeries.push({
+        type: 'pie',
+        silent: true,
+        z: 1,
+        clockWise: false,
+        hoverAnimation: false,
+        radius: [82 - i * 10 + '%', 76 - i * 10 + '%'],
+        center: ['50%', '50%'],
+        label: {
+          show: false
+        },
+        data: [
+          {
+            value: 7.5,
+            itemStyle: {
+              color: 'rgba(115,220,250,0.3)',
+              borderRadius: [50, 50, 50, 50]
+            }
+          },
+          {
+            value: 2.5,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          }
+        ]
+      })
+      lineYAxis.push({value: i})
+    })
+
+    const option = {
+      grid: {
+        top: '6%',
+        bottom: '70%',
+        left: '50%',
+        containLabel: true
+      },
+      color: color,
+      yAxis: [
+        {
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            inside: true,
+            color: function (index) {
+              return colorArr[index % colorArr.length]
+            },
+            formatter: function (index) {
+              let item = chartData[index]
+              return '{line|}{name|' + item.name + '}{value|' + item.value + '}'
+            },
+            textStyle: {
+              fontSize: size(14),
+              rich: {
+                name: {
+                  color: '#fff',
+                  fontSize: size(14),
+                  fontWeight: 'bold',
+                  padding: [0, 0, 0, 10],
+                },
+                value: {
+                  fontSize: size(14),
+                  fontWeight: 'bold',
+                  padding: [0, 0, 0, 10]
+                },
+              }
+            },
+            show: true
+          },
+          data: lineYAxis
+        }
+      ],
+      xAxis: [{
+        show: false
+      }],
+      series: pieSeries,
+      graphic: {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: '总数\n' + sumNum.value,
+          textAlign: 'center',
+          fill: '#A8E7FF',
+          fontSize: size(20),
+          fontWeight: 'bold',
+          lineHeight: size(24)
+        },
+        onclick: function () {
+          handleCheckPage()
+        }
+      }
+    }
+
+    enforceChart.setOption(option, true)
+    window.onresize = () => enforceChart.resize()
+
+  }
+}
+
+let activeNames = ref('1')
+
+let checkPageIndex = ref(999)
+let checkPageShow = ref(false)
+let checkPageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleCheckPage() {
+  checkPageIndex.value = zIndex.value += 1
+  checkPageShow.value = true
+  keyCheckPageParams.value.page = 1
+  keyCheckPageParams.value.pageSize = 10
+  keyCheckPageParams.value.pagesize = 10
+  getKeyCheckPage()
+  randomCheckPageParams.value.page = 1
+  randomCheckPageParams.value.pageSize = 10
+  randomCheckPageParams.value.pagesize = 10
+  getRandomCheckPage()
+  specialCheckPageParams.value.page = 1
+  specialCheckPageParams.value.pageSize = 10
+  specialCheckPageParams.value.pagesize = 10
+  getSpecialCheckPage()
+  reportCheckPageParams.value.page = 1
+  reportCheckPageParams.value.pageSize = 10
+  reportCheckPageParams.value.pagesize = 10
+  getReportCheckPage()
+}
+
+let keyCheckPageParams = ref({kind: '1'})
+let keyCheckPageData = reactive({})
+
+function getKeyCheckPage() {
+  api7.query(keyCheckPageParams.value).then(res => Object.assign(keyCheckPageData, res))
+}
+
+function handleKeyCheckPageQueryParams(val) {
+  Object.assign(keyCheckPageParams.value, val)
+  getKeyCheckPage()
+}
+
+let randomCheckPageParams = ref({kind: '2'})
+let randomCheckPageData = reactive({})
+
+function getRandomCheckPage() {
+  api7.query(randomCheckPageParams.value).then(res => Object.assign(randomCheckPageData, res))
+}
+
+function handleRandomCheckPageQueryParams(val) {
+  Object.assign(randomCheckPageParams.value, val)
+  getRandomCheckPage()
+}
+
+let specialCheckPageParams = ref({})
+let specialCheckPageData = reactive({})
+
+function getSpecialCheckPage() {
+  api8.query(specialCheckPageParams.value).then(res => Object.assign(specialCheckPageData, res))
+}
+
+function handleSpecialCheckPageQueryParams(val) {
+  Object.assign(specialCheckPageParams.value, val)
+  getSpecialCheckPage()
+}
+
+let reportCheckPageParams = ref({})
+let reportCheckPageData = reactive({})
+
+function getReportCheckPage() {
+  api9.query(reportCheckPageParams.value).then(res => Object.assign(reportCheckPageData, res))
+}
+
+function handleReportCheckPageQueryParams(val) {
+  Object.assign(reportCheckPageParams.value, val)
+  getReportCheckPage()
+}
+
+function closeCheckPage() {
+  checkPageShow.value = false
+}
+
+/**
+ * 案例来源
+ */
+// 案例来源统计
+function getAjly() {
+  api.getAjly().then(res => {
+    if (res.success) {
+      let data = res.data
+      showCaseFromChart(data)
+    }
+  })
+}
+
+const chart4 = ref(null)
+let caseFromChart = null
+
+function showCaseFromChart(data) {
+  if (chart4.value) {
+    caseFromChart = echarts.init(chart4.value)
+    const total = data.reduce((sum, item) => sum + (item.num || 0), 0)
+    const jcfxs = data.filter(item => item.case_source_code === '1')[0]?.num || 0
+    const hyyss = data.filter(item => item.case_source_code === '2')[0]?.num || 0
+    const jbhcs = data.filter(item => item.case_source_code === '3')[0]?.num || 0
+    const sjyjs = data.filter(item => item.case_source_code === '4')[0]?.num || 0
+    const xjbqs = data.filter(item => item.case_source_code === '5')[0]?.num || 0
+    const csyss = data.filter(item => item.case_source_code === '6')[0]?.num || 0
+    const qts = data.filter(item => item.case_source_code === '7')[0]?.num || 0
+
+    const option = {
+      legend: {
+        show: true,
+        orient: 'vertical',
+        icon: 'circle',
+        right: size(30),
+        top: 'center',
+        itemHeight: size(12),
+        itemGap: size(15),
+        textStyle: {
+          color: '#ffffff',
+          fontSize: size(14),
+          fontWeight: 'bold',
+        }
+      },
+      tooltip: {
+        trigger: 'item',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function (params) {
+          const {name, value} = params
+          const pureName = name.replace(/\(.*?\)|\（.*?\）/g, '')
+          return `${pureName}: ${value}`
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          center: ['30%', '50%'],
+          radius: ['72%', '62%'],
+          avoidLabelOverlap: false,
+          data: [
+            {
+              name: '检查发现（' + jcfxs + '）',
+              value: jcfxs,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(91, 143, 249, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(91, 143, 249, 0.6)'},
+                    {offset: 0.5, color: 'rgba(91, 143, 249, 0.8)'},
+                    {offset: 1, color: 'rgba(91, 143, 249, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '行业部分移送（' + hyyss + '）',
+              value: hyyss,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(90, 212, 216, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(90, 212, 216, 0.6)'},
+                    {offset: 0.5, color: 'rgba(90, 212, 216, 0.8)'},
+                    {offset: 1, color: 'rgba(90, 212, 216, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '举报核查（' + jbhcs + '）',
+              value: jbhcs,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(61, 70, 144, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(61, 70, 144, 0.6)'},
+                    {offset: 0.5, color: 'rgba(61, 70, 144, 0.8)'},
+                    {offset: 1, color: 'rgba(61, 70, 144, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '上级交办（' + sjyjs + '）',
+              value: sjyjs,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(209, 195, 77, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(209, 195, 77, 0.6)'},
+                    {offset: 0.5, color: 'rgba(209, 195, 77, 0.8)'},
+                    {offset: 1, color: 'rgba(209, 195, 77, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '下级报请（' + xjbqs + '）',
+              value: xjbqs,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(192, 115, 213, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0, // 渐变起始点的 x 坐标（左）
+                  y: 0, // 渐变起始点的 y 坐标（上）
+                  x2: 1, // 渐变结束点的 x 坐标（右）
+                  y2: 1, // 渐变结束点的 y 坐标（上）
+                  colorStops: [
+                    {
+                      offset: 0, // 起始点
+                      color: 'rgba(192, 115, 213, 0.3)' // 起始颜色
+                    },
+                    {
+                      offset: 0.5, // 50% 位置
+                      color: 'rgba(192, 115, 213, 0.6)' // 中间颜色
+                    },
+                    {
+                      offset: 1, // 结束点
+                      color: 'rgba(192, 115, 213, 1)' // 结束颜色
+                    }
+                  ]
+                }
+              },
+            },
+            {
+              name: '处室移送（' + csyss + '）',
+              value: csyss,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(109, 200, 236, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(109, 200, 236, 0.6)'},
+                    {offset: 0.5, color: 'rgba(109, 200, 236, 0.8)'},
+                    {offset: 1, color: 'rgba(109, 200, 236, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '其他（' + qts + '）',
+              value: qts,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(209, 132, 59, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(209, 132, 59, 0.6)'},
+                    {offset: 0.5, color: 'rgba(209, 132, 59, 0.8)'},
+                    {offset: 1, color: 'rgba(209, 132, 59, 1)'},
+                  ]
+                }
+              },
+            }
+          ]
+        },
+        {
+          type: 'pie',
+          center: ['30%', '50%'],
+          radius: ['0%', '0%'],
+          label: {
+            show: false,
+            position: 'center',
+            formatter: `{total|${total}}`,
+            rich: {
+              total: {
+                fontFamily: 'MicrosoftYaHei, MicrosoftYaHei',
+                fontSize: size(40),
+                fontWeight: 'bold',
+                color: '#A8E7FF',
+                lineHeight: size(53)
+              }
+            }
+          },
+          data: [total]
+        }
+      ],
+      graphic: {
+        type: 'text',
+        left: '25%',
+        top: '43%',
+        style: {
+          text: '总数\n' + total,
+          textAlign: 'center',
+          fill: '#A8E7FF',
+          fontSize: size(20),
+          fontWeight: 'bold',
+          lineHeight: size(24)
+        },
+        onclick: function () {
+          handCasePage()
+        }
+      }
+    }
+    caseFromChart.setOption(option, true)
+    window.onresize = () => caseFromChart.resize()
+  }
+}
+
+let casePageIndex = ref(999)
+let casePageShow = ref(false)
+let casePageQueryParams = ref({})
+let casePageData = reactive({})
+let casePageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handCasePage() {
+  casePageIndex.value = zIndex.value += 1
+  casePageShow.value = true
+  casePageQueryParams.value.page = 1
+  getCasePage()
+}
+
+function getCasePage() {
+  casePageQueryParams.value.pageSize = 10
+  casePageQueryParams.value.pagesize = 10
+  api10.query(casePageQueryParams.value).then(res => Object.assign(casePageData, res))
+}
+
+function handCasePageQueryParams(val) {
+  Object.assign(casePageQueryParams.value, val)
+  getCasePage()
+}
+
+function closeCasePage() {
+  casePageShow.value = false
+}
+
+/**
+ * 非现场执法
+ */
+// 非现场执法统计
+let isMonthActive = ref(true)
+let timeType = '1'
+
+function toggleTimeRange(type) {
+  timeType = type
+  if (type === '1') {
+    isMonthActive.value = true
+  } else if (type === '2') {
+    isMonthActive.value = false
+  }
+  getFxczf()
+}
+
+function getFxczf() {
+  api.getFxczf({type: timeType}).then(res => {
+    if (res.success) {
+      let data = res.data
+      showCheckCaseChart(data)
+    }
+  })
+}
+
+const chart5 = ref(null)
+let checkCaseChart = null
+
+function showCheckCaseChart(data) {
+  if (chart5.value) {
+    checkCaseChart = echarts.init(chart5.value)
+    let months = []
+    let zxxcs = []
+    let wfwgs = []
+    data.forEach(item => {
+      months.push(item.date)
+      zxxcs.push(item.zxxcs)
+      wfwgs.push(item.wfwgs)
+    })
+    let option = {
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        top: '5%',
+        left: '5%',
+        textStyle: {
+          color: 'rgb(255,255,255)',
+          fontSize: size(14),
+          fontWeight: 'bold',
+        },
+        icon: 'roundRect',
+        itemWidth: size(20),
+        itemHeight: size(5),
+        itemGap: size(10),
+      },
+      grid: {
+        top: '20%',
+        left: '15',
+        right: '15',
+        bottom: '4%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          show: true,
+          interval: 1,
+          overflow: 'truncate',
+          textStyle: {
+            color: 'rgb(255,255,255)',
+            fontSize: size(12)
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        boundaryGap: false,
+        data: months
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.15)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+      },
+      series: [
+        {
+          name: '在线巡查数',
+          type: 'line',
+          lineStyle: {
+            width: size(4)
+          },
+          itemStyle: {
+            color: '#14B1CA'
+          },
+          symbolSize: 6,
+          data: zxxcs
+        },
+        {
+          name: '违法违规数',
+          type: 'line',
+          lineStyle: {
+            width: size(4)
+          },
+          itemStyle: {
+            color: '#F6BD16'
+          },
+          symbolSize: 6,
+          data: wfwgs
+        }
+      ]
+    }
+    checkCaseChart.setOption(option, true)
+    window.onresize = () => checkCaseChart.resize()
+  }
+}
+
+function skipPage() {
+  router.push('/fxczfgl/fxczftj')
+}
+
+/**
+ * 切换样式
+ */
+let isMoved = ref(false)
+
+function toggleMove() {
+  isMoved.value = !isMoved.value
+  getJctj()
+}
+
+let btnActive = ref(1)
+
+function getJctj() {
+  btnActive.value = 1
+  if (taskChart !== null) taskChart.dispose()
+  api.getJctj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showBarChart(data)
+    }
+  })
+}
+
+function getAjtj() {
+  btnActive.value = 2
+  if (taskChart !== null) taskChart.dispose()
+  api.getAjtj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showBarChart(data)
+    }
+  })
+}
+
+function getCfjetj() {
+  btnActive.value = 3
+  if (taskChart !== null) taskChart.dispose()
+  api.getCfjetj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showBarChart(data)
+    }
+  })
+}
+
+function getRwwjtj() {
+  btnActive.value = 4
+  if (taskChart !== null) taskChart.dispose()
+  api.getRwwj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showBarChart(data)
+    }
+  })
+}
+
+/**
+ * 监督检查计划
+ */
+// 监督检查计划统计
+function getJdjcjhtj() {
+  api.getJdjcjhtj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showTaskChart(data)
+    }
+  })
+}
+
+const chart6 = ref(null)
+let taskChart = null
+let timer1 = null
+
+function showTaskChart(data) {
+  if (timer1) clearInterval(timer1)
+  if (chart6.value) {
+    let xData = []
+    let seriesData1 = []
+    let seriesData2 = []
+    data.forEach(item => {
+      xData.push(item.agency_name)
+      seriesData1.push(item.zs)
+      seriesData2.push(item.wjs)
+    })
+    taskChart = echarts.init(chart6.value)
+    const option = {
+      grid: {
+        top: '8%',
+        bottom: '18%',
+        left: '5%',
+        right: '0%'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          interval: 0,
+          overflow: 'truncate',
+          textStyle: {
+            color: 'rgb(255,255,255)',
+            fontSize: size(14)
+          }
+        },
+        data: xData
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisLabel: {
+          show: true,
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.15)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+      },
+      series: [
+        {
+          barGap: '-100%',
+          type: 'bar',
+          barWidth: size(40),
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 1, // 渐变起始点的 x 坐标（左）
+              y: 1, // 渐变起始点的 y 坐标（上）
+              x2: 1, // 渐变结束点的 x 坐标（右）
+              y2: 0, // 渐变结束点的 y 坐标（上）
+              colorStops: [
+                {
+                  offset: 0, // 起始点
+                  color: '#004DFF' // 起始颜色
+                },
+                {
+                  offset: 0.5, // 50% 位置
+                  color: '#009FFC' // 中间颜色
+                },
+                {
+                  offset: 1, // 结束点
+                  color: '#00EDFC' // 结束颜色
+                }
+              ]
+            },
+            barBorderRadius: [5, 5, 0, 0]
+          },
+          label: {
+            show: false,
+            position: 'top',
+            offset: [0, 30],
+            color: '#fff',
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.value ?? params.value === 0 ? params.value : ''
+            },
+          },
+          data: seriesData1
+        },
+        {
+          type: 'bar',
+          barWidth: size(40),
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 1, // 渐变起始点的 x 坐标（左）
+              y: 1, // 渐变起始点的 y 坐标（上）
+              x2: 1, // 渐变结束点的 x 坐标（右）
+              y2: 0, // 渐变结束点的 y 坐标（上）
+              colorStops: [
+                {
+                  offset: 0, // 起始点
+                  color: '#ffdd00' // 起始颜色
+                },
+                {
+                  offset: 0.5, // 50% 位置
+                  color: '#fce300' // 中间颜色
+                },
+                {
+                  offset: 1, // 结束点
+                  color: '#f8f40a' // 结束颜色
+                }
+              ]
+            },
+            // barBorderRadius: [5, 5, 0, 0]
+          },
+          label: {
+            show: false,
+            position: 'top',
+            offset: [0, 30],
+            color: '#fff',
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.value ?? params.value === 0 ? params.value : ''
+            },
+          },
+          data: seriesData2
+        }
+      ],
+      dataZoom: [{
+        orient: 'slider',
+        show: false,
+        startValue: 0,
+        endValue: 14
+      }]
+    }
+    taskChart.setOption(option, true)
+    window.onresize = () => taskChart.resize()
+    timer1 = window.setInterval(() => {
+      if (option.dataZoom[0].endValue === xData.length - 1) {
+        option.dataZoom[0].startValue = 0
+        option.dataZoom[0].endValue = 14
+      } else {
+        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+      }
+      taskChart.setOption(option, true)
+    }, 1500)
+  }
+}
+
+function showBarChart(data) {
+  if (timer1) clearInterval(timer1)
+  if (chart6.value) {
+    let xData = []
+    let seriesData1 = []
+    data.forEach(item => {
+      xData.push(item.agency_name)
+      seriesData1.push(item.num)
+    })
+    taskChart = echarts.init(chart6.value)
+    const option = {
+      grid: {
+        top: '8%',
+        bottom: '18%',
+        left: '5%',
+        right: '0%'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          interval: 0,
+          overflow: 'truncate',
+          textStyle: {
+            color: 'rgb(255,255,255)',
+            fontSize: size(14)
+          }
+        },
+        data: xData
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisLabel: {
+          show: true,
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.15)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+      },
+      series: [
+        {
+          type: 'bar',
+          barWidth: size(40),
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 1, // 渐变起始点的 x 坐标（左）
+              y: 1, // 渐变起始点的 y 坐标（上）
+              x2: 1, // 渐变结束点的 x 坐标（右）
+              y2: 0, // 渐变结束点的 y 坐标（上）
+              colorStops: [
+                {
+                  offset: 0, // 起始点
+                  color: '#004DFF' // 起始颜色
+                },
+                {
+                  offset: 0.5, // 50% 位置
+                  color: '#009FFC' // 中间颜色
+                },
+                {
+                  offset: 1, // 结束点
+                  color: '#00EDFC' // 结束颜色
+                }
+              ]
+            },
+            barBorderRadius: [5, 5, 0, 0]
+          },
+          label: {
+            show: false,
+            position: 'top',
+            offset: [0, 30],
+            color: '#fff',
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.value ?? params.value === 0 ? params.value : ''
+            },
+          },
+          data: seriesData1
+        }
+      ],
+      dataZoom: [{
+        orient: 'slider',
+        show: false,
+        startValue: 0,
+        endValue: 14
+      }]
+    }
+    taskChart.setOption(option, true)
+    window.onresize = () => taskChart.resize()
+    timer1 = window.setInterval(() => {
+      if (option.dataZoom[0].endValue === xData.length - 1) {
+        option.dataZoom[0].startValue = 0
+        option.dataZoom[0].endValue = 14
+      } else {
+        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+      }
+      taskChart.setOption(option, true)
+    }, 1500)
+  }
+}
+
+/**
+ * 地图点位切换
+ */
+
+let isMapMarkActive = ref(1)
+let isResetEnterpriseTypeActive = ref(true)
+
+function changeMapMark(val) {
+  showSearchQyxx.value = false
+  isMapMarkActive.value = val
+  closeGPSReportListener() // 关闭对讲机坐标监听
+  if (val === 1) {
+    showSearchQyxx.value = true
+    if (isResetEnterpriseTypeActive.value) enterpriseTypeActive.value = null
+    isResetEnterpriseTypeActive.value = false
+    handleSelect()
+  } else if (val === 2) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    onlineDevice(true)
+  } else if (val === 3) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    getZfclList()
+  } else if (val === 4) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    getInterphoneList(orgId)
+  }
+}
+
+// 企业筛选
+let isSelectShow = ref(false)
+
+function handleSelect() {
+  isSelectShow.value = !isSelectShow.value
+}
+
+let enterpriseTypeActive = ref(null)
+
+function changeType(val) {
+  clearMark()
+  qyfj = val
+  enterpriseTypeActive.value = val
+  isSelectShow.value = false
+  getQyxx()
+}
+
+/**
+ * 地图企业
+ */
+let qyfj = ''
+let qyxxList = []
+
+function getQyxx() {
+  api.getQyxx({businessRating: qyfj}).then(res => {
+    if (res.success) {
+      let data = res.data
+      qyxxList = data
+      loadMark('1', qyxxList)
+    }
+  })
+}
+
+// 企业详情信息
+let enterpriseIndex = ref(999)
+let enterpriseShow = ref(false)
+let enterprise = reactive({})
+
+function handEnterprise(item) {
+  enterpriseIndex.value = zIndex.value += 1
+  enterpriseShow.value = true
+  findQyxxZfxx(item)
+}
+
+function findQyxxZfxx(item) {
+  api.getQyxxZfxx({enterpriseId: item.enterpriseId}).then(res => {
+    if (res.success) {
+      const data = res.data
+      enterprise.unitName = item.unitName
+      enterprise.unifiedSocialCode = item.unifiedSocialCode
+      enterprise.detailedAddress = item.detailedAddress
+      enterprise.agencyName = item.agency.agencyName
+      enterprise.legalRepresentative = item.legalRepresentative
+      enterprise.legalPhone = item.legalPhone
+      enterprise.unitScale = item.unitScale
+      enterprise.establishmentDate = item.agency.establishmentDate
+      let enforceChecks = []
+      data.forEach(item => {
+        // 更新检查记录
+        item.enforceChecks.forEach(item2 => {
+          // 机构信息
+          item2.agencyName = item.agency?.agencyName
+          // 人员信息
+          item2.officerNames = item2.officerList.map(item => item.officerName).join(', ')
+          enforceChecks.push(item2)
+        })
+      })
+      // 按 checkDate 降序排序
+      enforceChecks.sort((a, b) => new Date(b.checkDate) - new Date(a.checkDate))
+      enterprise.enforceChecks = enforceChecks
+    } else {
+      ElMessage.error('执法信息详情查询失败')
+    }
+  })
+}
+
+function closeEnterprise() {
+  enterpriseShow.value = false
+}
+
+let jsqyxx = ref([])
+let searchValue = ref(null)
+let showSearchQyxx = ref(true)
+
+function filterQyxx(searchTerm) {
+  if (!qyxxList || !searchTerm) {
+    jsqyxx.value = []
+    return
+  }
+  let searchLower = searchTerm.toLowerCase()
+  // 使用新数组引用，避免污染原始数据
+  jsqyxx.value = [...(qyxxList || [])].filter(item => item.unitName?.toLowerCase().includes(searchLower))
+}
+
+function selectQyxx(val) {
+  let obj = jsqyxx.value.filter(item => item.enterpriseId === val)
+  let qyxx = JSON.parse(JSON.stringify(obj))[0]
+  egismap.flyTo([qyxx.latitude, qyxx.longitude], 18)
+}
+
+/**
+ * 执法记录仪
+ */
+// 登录
+const login = async () => {
+  let username = 'SLtest'
+  let password = CryptoJS.MD5('Pe26957381').toString()
+  let param = {username: username, password: password}
+  let jsonString = JSON.stringify(param)
+  let urlEncodedString = encodeURIComponent(jsonString)
+  let login_info = btoa(urlEncodedString)
+  try {
+    const response = await axios.post('/rest/index/login/login', {login_info: login_info})
+    if (response.data.code == 200) {
+      getUserInfo()
+    } else {
+      console.error('登录失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error during login:', error)
+  }
+}
+// 获取用户信息
+let userInfo
+
+function getUserInfo() {
+  axios
+      .post('/rest/user/user/get_info')
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          userInfo = data
+          console.info('用户信息：', userInfo)
+          // 获取在线设备信息
+          onlineDevice(false)
+          // 维持心跳
+          heartbeat().then(() => {
+          })
+        } else {
+          console.error('获取用户信息失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 保持心跳
+let timerId = null
+
+function heartbeat() {
+  return new Promise((resolve) => {
+    heart().then(() => {
+      if (timerId) {
+        clearInterval(timerId)
+      }
+      timerId = setInterval(heart, 20000)
+      resolve()
+    }).catch((error) => {
+      reject(error)
+    })
+  })
+}
+
+// 心跳
+function heart() {
+  return new Promise((resolve, reject) => {
+    axios({
+      url: `/rest/other/user/online`,
+      method: 'GET',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+      },
+      withCredentials: true,
+    }).then(() => resolve())
+  })
+}
+
+// 获取在线设备
+let onlineDeviceArr = []
+
+function onlineDevice(val) {
+  onlineDeviceArr = []
+  axios.post('/rest/other/unitjson/gdlist', {id: '1001', bh: 'bh', text: 'dname'})
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          data.forEach((item) => {
+            if (item.online_device) onlineDeviceArr.push(...item.online_device)
+          })
+          console.log('在线设备信息：', onlineDeviceArr)
+          if (onlineDeviceArr.length > 0) {
+            let ids = onlineDeviceArr.map(item => item.hostbody)
+            onlineDevicePoint(ids, val)
+          } else {
+            console.log('当前暂无在线设备。。。。')
+          }
+        } else {
+          console.error('获取在线设备失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 获取在线设备点位信息
+let onlineDevicePointArr = []
+
+function onlineDevicePoint(ids, val) {
+  onlineDevicePointArr = []
+  axios.post('/rest/gis/gismoni/get_point', {ids: ids})
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          data.forEach(item => onlineDevicePointArr.push(item))
+          console.info('在线设备点位信息：', onlineDevicePointArr)
+          if (onlineDevicePointArr.length > 0) {
+            zfjlyzxs.value = onlineDevicePointArr.length
+            if (val) loadMark('2', onlineDevicePointArr)
+          } else {
+            console.error('当前暂无在线设备点位。。。。')
+          }
+        } else {
+          console.error('获取在线设备点位失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 获取执法记录仪设备及视频信息
+let zIndex = ref(999)
+let isShow = ref(false)
+
+async function handVideo(item) {
+  isShowVoice.value = false
+  await Promise.all([getDevice(item), getVideo(item)])
+  if (videoInfo.webrtc_url) {
+    zIndex.value += 1
+    isShow.value = true
+  } else {
+    ElMessage.error('获取视频流信息失败，请稍后重试。')
+  }
+}
+
+// 获取执法记录仪设备信息
+let deviceInfo = reactive({})
+
+async function getDevice(data) {
+  try {
+    const response = await axios.post('/rest/device/device/devicelist', {bh: '1001', hostbody: data.id})
+    if (response.data.code == 200) {
+      Object.assign(deviceInfo, response.data.data.devicelist[0])
+      console.info('设备信息：', deviceInfo)
+    } else {
+      console.error('获取设备信息失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+// 获取执法记录仪视频信息
+let videoInfo = reactive({})
+
+async function getVideo(data) {
+  try {
+    const response = await axios.post('/rest/live/chrome/startLive', {hostbody_arr: [data.id]})
+    if (response.data.code == 200) {
+      Object.assign(videoInfo, response.data.data[0])
+      console.info('设备视频信息：', videoInfo)
+    } else {
+      console.error('获取设备视频信息失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+// 视频播放
+function playVideo() {
+  startPlayVideo(videoInfo)
+}
+
+// 开始播放
+let videoPlayer
+let video = ref(null)
+let isShowVoice = ref(false)
+
+function startPlayVideo(data) {
+  let initialData = {
+    element: video.value,
+    debug: true,
+    zlmsdpUrl: data.webrtc_url,
+    simulcast: false,
+    useCamera: false,
+    audioEnable: true,
+    videoEnable: true,
+    recvOnly: true,
+    resolution: {w: 3840, h: 2160},
+    usedatachannel: false,
+  }
+  videoPlayer = new Webrtc(initialData)
+  videoPlayer.start_play()
+      .then(() => videoPlayer.on('failed', () => console.log('网络断开')))
+      .catch(() => console.log('网络断开'))
+  isShowVoice.value = true
+}
+
+// 停止播放
+function stopVideoLive(data) {
+  axios.post('/rest/live/chrome/stopLive', {hostbody_arr: [data.hostbody]})
+      .then((response) => {
+        if (response.data.code == 200) {
+          videoPlayer.close_play(video.value)
+          videoPlayer = null
+          console.error('视频停止播放成功。。。。')
+        } else {
+          console.error('视频停止播放失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 语音呼叫
+function playAudio() {
+  voiceInVideo(videoInfo)
+}
+
+// 开始呼叫
+let audioPlayer
+let audio = ref(null)
+let isStartAudio = 0
+
+function voiceInVideo(data) {
+  return new Promise((resolve, reject) => {
+    axios({
+      url: '/rest/live/chrome/startAudioInVideo',
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+      },
+      data: {hostbody: data.hostbody},
+      withCredentials: true
+    }).then((res) => {
+      if (res.data.code === 200) {
+        let data = res.data.data
+        if (!isStartAudio) {
+          let initialData = {
+            element: audio.value,
+            debug: true,
+            zlmsdpUrl: data.platform_webrtc_push_url,
+            simulcast: false,
+            useCamera: false,
+            audioEnable: true,
+            videoEnable: false,
+            recvOnly: false,
+            resolution: {w: 3840, h: 2160},
+            usedatachannel: false,
+          }
+          audioPlayer = new Webrtc(initialData)
+          audioPlayer.start_play().then(() => isStartAudio++).catch((err) => console.log(err));
+        } else {
+          isStartAudio++
+        }
+      }
+    }).catch((err) => {
+      console.log(err)
+      reject()
+    })
+  })
+}
+
+// 停止呼叫
+function closeVoiceLive(data) {
+  axios.post('/rest/live/chrome/stopAudio', {hostbody_arr: [data.hostbody]})
+      .then((response) => {
+        if (response.data.code == 200) {
+          audioPlayer.close_play()
+          isStartAudio--
+          audioPlayer = null
+          console.error('音频停止播放成功。。。。')
+        } else {
+          console.error('音频停止播放失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 关闭记录仪窗口
+function closeModal() {
+  isShow.value = false
+  stopVideoLive(deviceInfo)
+  closeVoiceLive(deviceInfo)
+}
+
+/**
+ * 对讲机
+ */
+// 对讲机登录
+function interphoneLogin() {
+  console.info('对讲机是否登录：', window.lemon.login.isLogin())
+  if (window.lemon.login.isLogin()) {
+    console.info('对讲机执法支队账号异地登录，尝试重新登录。')
+    interphoneLoginOut(true)
+  } else {
+    login2()
+  }
+}
+
+// 对讲机登出
+function interphoneLoginOut(isLogin) {
+  window.lemon.login.logout().then(
+      (result) => {
+        if (result.result === 0) {
+          console.info('对讲机退出登录成功')
+          if (isLogin) login2()
+        }
+      },
+      (err) => {
+        console.info('登录异常：', err)
+      }
+  )
+}
+
+// 登录
+function login2() {
+  let params = {
+    username: 'zfzd',
+    password: '12345678',
+    realm: 'puc.com',
+    webpucUrl: 'https://10.22.147.13',
+  }
+  window.lemon.login.login(params).then(
+      (result) => {
+        if (result.result === 0) {
+          // 登录成功
+          console.info('对讲机登录成功。。。')
+          console.info('登录信息：', result)
+          sessionStorage.setItem('realm', result.realm)
+          sessionStorage.setItem('user_id', result.user_id)
+          sessionStorage.setItem('dispatcher_name', result.dispatcher_name)
+          sessionStorage.setItem('token', result.token)
+          sessionStorage.setItem('webpucUrl', params.webpucUrl)
+          sessionStorage.setItem('basedata_id', result.basedata_id)
+          sessionStorage.setItem('user_guid', result.user_guid)
+          getSystemOrg()
+        }
+      },
+      (err) => {
+        console.info('登录异常：', err)
+      }
+  )
+}
+
+// 获取组织列表
+let orgId
+
+function getSystemOrg() {
+  let params = {flat: true}
+  window.lemon.basedata.fetchSystemOrg(params).then(
+      (result) => {
+        console.info('获取组织列表：', result)
+        if (result.result === 0) {
+          let orgData = result.org.filter(item => item.org_alias === '应急管理综合执法支队')
+          orgId = orgData.org_identifier
+        }
+      },
+      (err) => {
+        console.info('获取组织列表异常：', err)
+      }
+  )
+}
+
+// 获取机构下设备列表
+let interphoneList = []
+
+function getInterphoneList(orgId) {
+  let params = {
+    page_size: 100,
+    page_index: 1,
+    org_id: orgId,
+  }
+  window.lemon.basedata.fetchDeviceList(params).then(
+      (result) => {
+        console.info('对讲机设备信息：', result)
+        if (result.result === 0) {
+          interphoneList = result.device_list
+          let subList = interphoneList.map(item => ({
+            basedata_id: item.basedata_id,
+            interval_time: 60
+          }))
+          if (subList.length > 0) {
+            subGPSReport(subList)
+          }
+        }
+      },
+      (err) => {
+        console.info('----error----', err)
+      }
+  )
+}
+
+// 订阅设备gps信息
+function subGPSReport(subList) {
+  let params = {subscriber_list: subList}
+  window.lemon.gis.startSubscribeGps(params).then(
+      (result) => {
+        console.info('对讲机设备GPS订阅信息：', result)
+        if (result.result === 0) {
+          addGPSReportListener()
+        }
+      },
+      (err) => {
+        console.info('----error----', err)
+      }
+  )
+}
+
+// 获取设备gps信息
+let gpsReportGuid = ''
+
+function addGPSReportListener() {
+  console.log('注册设备gps监听事件')
+  gpsReportGuid = window.lemon.gis.addGPSReportListener(gpsInfo => {
+    const gpsList = gpsInfo.gps_list
+    console.info('对讲机设备GPS信息：', gpsList)
+    loadMark('4', gpsList)
+  })
+}
+
+// 展示对讲机信息
+let interphoneIndex = ref(999)
+let interphoneShow = ref(false)
+let interphoneInfo = reactive({})
+let label = ref('呼叫')
+
+function handInterphoneInfo(data) {
+  label.value = '呼叫'
+  interphoneIndex.value = zIndex.value += 1
+  interphoneShow.value = true
+  Object.assign(interphoneInfo, data)
+}
+
+// 建立视频呼叫
+function getVideoCall() {
+  label.value = '呼叫中'
+  let params = {
+    callee_guid: interphoneInfo.basedata_id,
+    video_frame_size: 6,
+    attribute: {
+      call_type: 11,
+      call_mode: 2,
+      duplex_flag: 1,
+      // ambience_flag: 1,
+    }
+  }
+  window.lemon.call.makeCall(params).then(
+      (result) => {
+        console.info('视频呼叫：', result)
+        if (result.result === 0) {
+          interphoneInfo.call_id = result.call_id
+          handAnswerAckEvt()
+        }
+      },
+      (err) => {
+        console.info('----err----', err)
+      }
+  )
+}
+
+// 接收方确认事件
+let answerAckGuid = ''
+
+function handAnswerAckEvt() {
+  answerAckGuid = window.lemon.call.addAnswerAckEvt(answerAckInfo => {
+    console.info('接收方确认信息：', answerAckInfo)
+    addMediaStream()
+  })
+}
+
+// 媒体流映射事件
+let interphonevideo = ref()
+let interphoneaudio = ref()
+let mediaStreamGuid = ''
+
+function addMediaStream() {
+  console.info('----注册对讲机流媒体监听事件----')
+  mediaStreamGuid = window.lemon.call.addMediaStream((call_id, stream, type) => {
+    console.info('----对讲机流信息回调----', {call_id: call_id, stream: stream, type: type,})
+    label.value = '呼叫'
+    if ('video_src' === type) {
+      console.info('----本地视频流----', stream)
+    } else if ('video_dst' === type) {
+      console.info('----远端视频流----', stream)
+      interphonevideo.value.srcObject = stream
+    } else if ('audio_dst' === type) {
+      console.info('----远端声音流----', stream)
+      interphoneaudio.value.srcObject = stream
+    }
+  })
+}
+
+// 挂断视频呼叫
+function hangupCall() {
+  window.lemon.call.hangupCall({call_id: interphoneInfo.call_id}).then(
+      (result) => {
+        if (result.result === 0) console.info('成功挂断视频呼叫。。。')
+        window.calling_conference = undefined
+      },
+      (err) => {
+        console.info('----err----', err)
+      }
+  )
+}
+
+// 关闭媒体流映射事件
+function closeMediaStream() {
+  window.lemon.call.removeMediaStream(mediaStreamGuid)
+}
+
+// 关闭接收方确认事件
+function closeAnswerAckEvt() {
+  window.lemon.call.removeAnswerAckEvt(answerAckGuid)
+}
+
+// 关闭gps监听
+function closeGPSReportListener() {
+  window.lemon.gis.removeGPSReportListener(gpsReportGuid)
+}
+
+// 关闭对讲机信息
+function closeModal2() {
+  interphoneShow.value = false
+  hangupCall()
+  // closeMediaStream()
+  // closeAnswerAckEvt()
+}
+
+/**
+ * 加载地图标点
+ */
+function loadMark(type, pointArr) {
+  // clearMark()
+  // 创建点
+  if (pointArr.length > 0) {
+    if (type === '1') {
+      pointArr.forEach(item => { // 企业
+        let iconUrl
+        if(item.industryType === '1') { // 矿山
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/kss.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/ksshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/ksq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/kss.png'
+          }
+        } else if (item.industryType === '2' || item.industryType === '3' || item.industryType === '4') { // 危化
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/whs.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/whshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/whq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/whs.png'
+          }
+        } else if (item.industryType === '5') { // 加油站
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/jyzs.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/jyzshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/jyzq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/jyzs.png'
+          }
+        } else if (item.industryType === '6') { // 工业企业
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/gys.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/gyshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/gyq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/gys.png'
+          }
+        } else if (item.industryType === '7') { // 商贸企业
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/sms.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/smshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/smq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/sms.png'
+          }
+        } else if (item.industryType === '8' || item.industryType === '9' || item.industryType === '10') { // 安全生产
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/aqscs.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/aqscshi.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/aqscq.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/aqscs.png'
+          }
+        } else { // 其他
+          if (item.businessRating === '1') { // 省
+            iconUrl = '/assets/bigscreen/dtqy.png'
+          } else if (item.businessRating === '2') { // 市
+            iconUrl = '/assets/bigscreen/dtqy1.png'
+          } else if (item.businessRating === '3') { // 县
+            iconUrl = '/assets/bigscreen/dtqy2.png'
+          } else { // 默认
+            iconUrl = '/assets/bigscreen/dtqy.png'
+          }
+        }
+        let icon = L.icon({
+          iconUrl: iconUrl,
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .on('click', () => handEnterprise(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer1.addLayer(marker)
+      })
+      // 重置中心点
+      // egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 10)
+      egismap.setView([34.271013, 108.91908], 10)
+    } else if (type === '2') { // 执法记录仪
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtzfjly.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.lat, item.lng], {icon: icon})
+            .on('click', () => handVideo(item)) // 点击事件
+        //    .bindTooltip(item.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer2.addLayer(marker)
+      })
+      // 重置中心点
+      // egismap.flyTo([pointArr[0].lat, pointArr[0].lng], 10)
+      egismap.setView([34.271013, 108.91908], 10)
+    } else if (type === '3') { // 执法车辆
+      // 清空之前的标点
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtzfcl.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .addTo(egismap)
+            .on('click', () => handZfclInfo(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer4.addLayer(marker)
+      })
+      // 重置中心点
+      // egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 10)
+      egismap.setView([34.271013, 108.91908], 10)
+    } else if (type === '4') { // 对讲机
+      // 清空之前的标点
+      markersLayer3.clearLayers()
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtdjj.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .addTo(egismap)
+            .on('click', () => handInterphoneInfo(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer3.addLayer(marker)
+      })
+      // 重置中心点
+      // egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 10)
+      egismap.setView([34.271013, 108.91908], 10)
+    }
+  }
+}
+
+/**
+ * 清空地图标点
+ */
+function clearMark() {
+  markersLayer1.clearLayers()
+  markersLayer2.clearLayers()
+  markersLayer3.clearLayers()
+  markersLayer4.clearLayers()
+}
+
+/**
+ * 清理定时器
+ */
+function clearInterval(timeId) {
+  timeId && window.clearInterval(timeId)
+}
+
+/**
+ * 重置字体大小
+ */
+function size(value) {
+  let clientWidth = document.documentElement.clientWidth
+  return clientWidth * value / 1920
+}
+
+onMounted(() => {
+  loadMap()
+  login()
+  interphoneLogin()
+  addMediaStream()
+
+  getZfdxtj()
+  getZfrys()
+  getZfcltj()
+  getZfzbtj()
+  getZsfztj()
+  getZfxs()
+  getAjly()
+  getFxczf()
+  getJdjcjhtj()
+})
+
+onUnmounted(() => {
+  if (timerId) clearInterval(timerId)
+  // 关闭执法记录仪视频和语音通话
+  if (videoInfo && Object.keys(videoInfo).length > 0) {
+    if (videoPlayer) stopVideoLive(deviceInfo)
+    if (audioPlayer) closeVoiceLive(deviceInfo)
+  }
+  // 挂断视频呼叫
+  hangupCall()
+  // 关闭媒体流映射事件
+  closeMediaStream()
+  // 关闭接收方确认事件
+  closeAnswerAckEvt()
+  // 关闭对讲机坐标监听事件
+  closeGPSReportListener()
+  // 对讲机登出
+  interphoneLoginOut()
+  // 清空地图
+  if (egismap) egismap.remove()
+})
+</script>
+
+<style lang="scss" scoped>
+.big-screen {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.map {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+}
+
+.top {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh * 192 / 1080);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(180deg, #162D4B 0%, rgba(22, 45, 75, 0.73) 50%, rgba(24, 48, 76, 0) 100%);
+}
+
+.left {
+  box-sizing: border-box;
+  width: calc(100vw * 432 / 1920);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(90deg, #0F214C 0%, rgba(5, 32, 79, 0.94) 50%, rgba(15, 33, 76, 0) 100%);
+}
+
+.right {
+  box-sizing: border-box;
+  width: calc(100vw * 420 / 1920);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  background: linear-gradient(270deg, #0F214C 0%, rgba(5, 32, 79, 0.94) 50%, rgba(15, 33, 76, 0) 100%);
+}
+
+.bottom {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh * 98 / 1080);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(0deg, #162D4B 0%, rgba(22, 45, 75, 0.73) 50%, rgba(24, 48, 76, 0) 100%);
+}
+
+.title_background {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vw * 89 / 1920);
+  background-image: url("../../assets/bigscreen/1.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+
+.title {
+  box-sizing: border-box;
+  width: calc(100vw * 261 / 1920);
+  height: calc(100vw * 47 / 1920);
+  background-image: url("../../assets/bigscreen/2.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 10 / 1080);
+  left: calc(100vw * 829.5 / 1920);
+  z-index: 3;
+}
+
+.home {
+  box-sizing: border-box;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/60.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 180 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.fullScreen {
+  box-sizing: border-box;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/61.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 140 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.back {
+  box-sizing: border-box;
+  font-family: MicrosoftYaHei;
+  color: #FFFFFF;
+  font-size: calc(100vw * 16 / 1920);
+  text-align: left;
+  font-style: normal;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 60 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.back::after {
+  content: "";
+  display: block;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/6.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 111%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.switch {
+  box-sizing: border-box;
+  width: calc(100vw * 145 / 1920);
+  height: calc(100vw * 33 / 1920);
+  background-image: url("../../assets/bigscreen/29.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .label {
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    font-size: calc(100vh * 16 / 1080);
+    line-height: calc(100vh * 21 / 1080);
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+  }
+
+}
+
+.switch-active {
+  background-image: url("../../assets/bigscreen/15.png");
+}
+
+.switch1 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 670 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/10.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch2 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 815 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/16.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch3 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 960 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/21.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch4 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 1105 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/57.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.search {
+  z-index: 4;
+  position: absolute;
+  top: calc(100vh * 200 / 1080);
+  left: calc(100vw * 1260 / 1920);
+
+  :deep(.el-select__wrapper) {
+    background: rgba(8, 71, 135, 0.7);
+    border: 1px solid #00BFFF;
+    box-shadow: unset !important;
+  }
+
+  :deep(.el-select__input) {
+    color: #00BFFF !important;
+  }
+
+  :deep(.el-icon) {
+    color: #00BFFF !important;
+  }
+
+  :deep(.el-select__placeholder) {
+    color: #00BFFF !important;
+    font-size: 12px;
+  }
+
+}
+
+.select {
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100vh * 130 / 1080);
+  left: calc(100vw * 670 / 1920);
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    box-sizing: border-box;
+    width: calc(100vw * 145 / 1920);
+    height: calc(100vw * 33 / 1920);
+    background-image: url("../../assets/bigscreen/29.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    z-index: 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .label {
+      font-family: MicrosoftYaHei;
+      font-weight: bold;
+      font-size: calc(100vh * 16 / 1080);
+      line-height: calc(100vh * 21 / 1080);
+      color: #FFFFFF;
+      text-align: center;
+      font-style: normal;
+    }
+  }
+
+  .item:nth-child(1) {
+    margin-top: calc(100vh * 30 / 1080);
+  }
+
+  .item:nth-child(2) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .item:nth-child(3) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .item:nth-child(4) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .enterprise-type-active {
+    background-image: url("../../assets/bigscreen/15.png");
+  }
+}
+
+.left_content,
+.right_content {
+  box-sizing: border-box;
+  width: calc(100vw * 420 / 1920);
+  height: 100%;
+  padding: calc(100vh * 50 / 1080) 0 calc(100vh * 60 / 1080) 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    box-sizing: border-box;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .top_title {
+      box-sizing: border-box;
+      height: calc(100vh * 38 / 1080);
+      position: relative;
+
+      .bg {
+        width: calc(100vw * 412 / 1920);
+        height: calc(100vh * 23 / 1080);
+        background-image: url("../../assets/bigscreen/5.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+
+      .label {
+        // font-family: YEFONTAoYeHei;
+        // font-weight: 400;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        font-size: calc(100vh * 24 / 1080);
+        line-height: calc(100vh * 34 / 1080);
+        color: #FFFFFF;
+        text-align: left;
+        font-style: normal;
+        position: absolute;
+        left: calc(100vw * 46 / 1920);
+        bottom: 0;
+
+        .detail {
+          font-size: calc(100vh * 16 / 1080);
+          cursor: pointer;
+
+          label {
+            cursor: pointer;
+            color: #4B91E2;
+          }
+        }
+      }
+
+      .time {
+        width: calc(100vh * 80 / 1080);
+        height: calc(100vh * 32 / 1080);
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid #4B91E2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        right: 23px;
+        bottom: 0px;
+
+        span {
+          width: calc(100vh * 80 / 1080);
+          height: calc(100vh * 32 / 1080);
+          color: #FFFFFF;
+          font-family: MicrosoftYaHei;
+          font-size: calc(100vw * 14 / 1920);
+          line-height: calc(100vw * 19 / 1920);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: #4B91E2;
+          color: #fff;
+        }
+      }
+    }
+
+    .content {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      position: relative;
+    }
+  }
+}
+
+.left_content {
+  width: calc(100vw * 426 / 1920);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .item {
+    flex: unset;
+
+    .content {
+      width: 100%;
+      margin: calc(100vh * 10 / 1080) 0px 0px calc(100vh * 6 / 1080);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+      }
+
+      .content_top {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 1;
+
+        .icon {
+          margin-left: calc(100vw * 18 / 1920);
+          width: calc(100vw * 48 / 1920);
+          height: calc(100vw * 48 / 1920);
+          background-image: url("../../assets/bigscreen/10.png");
+          background-size: cover;
+          background-repeat: no-repeat;
+          z-index: 3;
+        }
+
+        .icon2 {
+          background-image: url("../../assets/bigscreen/20.png");
+        }
+
+        .icon3 {
+          background-image: url("../../assets/bigscreen/21.png");
+        }
+
+        .label {
+          margin-left: calc(100vw * 18 / 1920);
+          font-family: MicrosoftYaHei;
+          font-weight: 400;
+          // font-weight: bold;
+          font-size: calc(100vh * 24 / 1080);
+          color: #FFFFFF;
+          text-align: left;
+          font-style: normal;
+          z-index: 3;
+        }
+
+        .num {
+          margin-left: auto;
+          margin-right: calc(100vw * 18 / 1920);
+          font-family: MicrosoftYaHei;
+          font-weight: bold;
+          font-size: calc(100vh * 32 / 1080);
+          font-style: normal;
+          background: linear-gradient(to bottom, #E6F2FF 0%, #0CB2FF 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          cursor: pointer;
+          z-index: 3;
+        }
+      }
+
+      .content_bottom {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: calc(100vh * 12 / 1080);
+        padding: calc(100vh * 22 / 1080) calc(100vh * 12 / 1080) calc(100vh * 12 / 1080) calc(100vh * 12 / 1080);
+        z-index: 1;
+
+        .content_bottom_item {
+          box-sizing: border-box;
+          height: calc(100vh * 40 / 1080);
+          background: linear-gradient(270deg, rgba(39, 98, 200, 0.33) 0%, rgba(46, 147, 165, 0.24) 100%);
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 calc(100vw * 14 / 1920);
+          font-size: calc(100vh * 14 / 1080);
+          color: #FFFFFF;
+          font-weight: 700;
+          position: relative;
+
+          .num {
+            cursor: pointer;
+          }
+
+          .icon {
+            display: inline-block;
+            vertical-align: middle;
+            width: calc(100vh * 24 / 1080);
+            height: calc(100vh * 24 / 1080);
+            margin-right: calc(100vw * 6 / 1920);
+            background-size: cover;
+            background-repeat: no-repeat;
+          }
+
+          .a {
+            background-image: url("../../assets/bigscreen/65.png");
+          }
+
+          .b {
+            background-image: url("../../assets/bigscreen/66.png");
+          }
+
+          .c {
+            background-image: url("../../assets/bigscreen/67.png");
+          }
+
+          .d {
+            background-image: url("../../assets/bigscreen/68.png");
+          }
+
+          .qy {
+            background-image: url("../../assets/bigscreen/10.png");
+          }
+
+          .jly {
+            background-image: url("../../assets/bigscreen/22.png");
+          }
+
+          .zxs {
+            background-image: url("../../assets/bigscreen/23.png");
+          }
+
+          .wxs {
+            background-image: url("../../assets/bigscreen/11.png");
+          }
+
+          .jrs {
+            background-image: url("../../assets/bigscreen/12.png");
+          }
+
+          .gtfh {
+            background-image: url("../../assets/bigscreen/13.png");
+          }
+
+          .zfbz {
+            background-image: url("../../assets/bigscreen/24.png");
+          }
+
+          .zfgc {
+            background-image: url("../../assets/bigscreen/25.png");
+          }
+
+          .clzc {
+            background-image: url("../../assets/bigscreen/26.png");
+          }
+
+          .kszf {
+            background-image: url("../../assets/bigscreen/27.png");
+          }
+
+          .whzf {
+            background-image: url("../../assets/bigscreen/14.png");
+          }
+
+          .zsfz {
+            background-image: url("../../assets/bigscreen/56.png");
+          }
+        }
+      }
+    }
+
+    .enterprise_content {
+
+      .content_top {
+        flex: 1.5;
+      }
+
+      .content_bottom {
+        flex: 3;
+      }
+    }
+  }
+
+  .item:nth-child(1) {
+    height: calc(100vh * 350 / 1080);
+  }
+
+  .item:nth-child(2) {
+    height: calc(100vh * 300 / 1080);
+  }
+
+  .item:nth-child(3) {
+    height: calc(100vh * 350 / 1080);
+  }
+
+}
+
+.right_content {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  .sum {
+    position: absolute;
+    bottom: calc(100vh * 20 / 1080);
+    right: calc(100vw * 24 / 1920);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .sum-text {
+      font-family: MicrosoftYaHei;
+      color: #FFFFFF;
+      font-weight: bold;
+      font-size: calc(100vw * 18 / 1920);
+      line-height: calc(100vw * 24 / 1920);
+    }
+
+    .sum-num {
+      font-family: MicrosoftYaHei;
+      color: #A8E7FF;
+      font-weight: bold;
+      font-size: calc(100vw * 40 / 1920);
+      line-height: calc(100vw * 53 / 1920);
+    }
+  }
+}
+
+.bottom_content {
+  width: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  .bg1 {
+    width: 100%;
+    height: calc(100vw * 36 / 1920);
+    background-image: url("../../assets/bigscreen/62.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 6;
+  }
+
+  .bg2 {
+    width: calc(100vw * 1032 / 1920);
+    height: calc(100vw * 45 / 1920);
+    background-image: url("../../assets/bigscreen/63.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: calc(100vw * 452 / 1920);
+    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+    z-index: 7;
+
+    .btn-content,
+    .detail-content {
+      position: absolute;
+      top: calc(100vh * 16 / 1080);
+      right: calc(100vw * 70 / 1920);
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 10px;
+
+      .btn {
+        z-index: 8;
+        // width: 60px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        //border: 1px #4B91E2 solid;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+      }
+
+      .btn-active {
+        color: #4B91E2;
+        //background: #4B91E2;
+      }
+
+    }
+
+    .detail-content {
+      top: calc(100vh * 34 / 1080);
+
+      .detail-btn {
+        z-index: 8;
+        width: 60px;
+        height: 10px;
+        line-height: 10px;
+        text-align: center;
+        border: 1px rgba(255, 255, 255, 0) solid;
+        cursor: pointer;
+        font-size: 12px;
+        color: #4B91E2;
+      }
+    }
+
+  }
+
+  .bg3 {
+    width: calc(100vw * 287.87 / 1920);
+    height: calc(100vw * 43.16 / 1920);
+    background-image: url("../../assets/bigscreen/64.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: calc(100vh * 28 / 1080);
+    left: calc(100vw * 816 / 1920);
+    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+    z-index: 7;
+  }
+
+  .content {
+    width: calc(100vw * 800 / 1920);
+    height: calc(100vh * 200 / 1080);
+    box-sizing: border-box;
+    bottom: 0;
+    left: calc(100vw * 555 / 1920);
+    z-index: 6;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+}
+
+.modal {
+  width: 739px;
+  height: 330px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  --border-width: 10px;
+  --border-color: #37E1FF;
+  --corner-size: 55%;
+  background: linear-gradient(135deg, transparent var(--border-width), var(--border-color) 0) top left,
+  linear-gradient(-135deg, transparent var(--border-width), var(--border-color) 0) top right,
+  linear-gradient(0deg, transparent var(--border-width), var(--border-color) 0) bottom right,
+  linear-gradient(0deg, transparent var(--border-width), var(--border-color) 0) bottom left;
+  background-size: var(--corner-size) 50%;
+  background-repeat: no-repeat;
+
+  .icon-bottom-left {
+    width: 24px;
+    height: 24px;
+    background-image: url("../../assets/bigscreen/69.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    z-index: 11;
+  }
+
+  .icon-bottom-right {
+    width: 24px;
+    height: 24px;
+    background-image: url("../../assets/bigscreen/70.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    z-index: 11;
+  }
+}
+
+.modal::after {
+  position: absolute;
+  z-index: 5;
+  --inner-border-width: 1px;
+  width: calc(100% - 2 * var(--inner-border-width));
+  height: calc(100% - 2 * var(--inner-border-width));
+  content: "";
+  display: block;
+  left: var(--inner-border-width);
+  top: var(--inner-border-width);
+
+  --inner-border-color: #10345F;
+  background: linear-gradient(135deg, transparent 10px, var(--inner-border-color) 0) top left,
+  linear-gradient(-135deg, transparent 10px, var(--inner-border-color) 0) top right,
+  linear-gradient(0deg, transparent 10px, var(--inner-border-color) 0) bottom right,
+  linear-gradient(0deg, transparent 10px, var(--inner-border-color) 0) bottom left;
+  background-size: var(--corner-size) 51%;
+  background-repeat: no-repeat;
+}
+
+.enterprise-modal {
+  width: 800px;
+  height: 530px;
+}
+
+.check-modal {
+  width: 800px;
+  height: 560px;
+}
+
+.interphone-modal {
+  height: 330px;
+
+  .modal-content {
+    height: 67%;
+  }
+
+}
+
+.modal-top {
+  position: relative;
+  z-index: 7;
+
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 10px;
+    width: 28px !important;
+    height: 28px !important;
+    background-image: url("../../assets/bigscreen/18.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+}
+
+.modal-content {
+  position: relative;
+  z-index: 6;
+  height: 67%;
+  padding: 16px 60px 16px 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.enterprise-modal-content {
+  height: 490px;
+  padding: 16px 60px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .business-table {
+    z-index: 6;
+  }
+
+  .enterprise-query {
+    z-index: 6;
+    width: 100%;
+    height: 124px;
+
+    :deep(.el-form-item__label) {
+      color: #ffffff;
+    }
+
+    :deep(.el-input__wrapper) {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+      box-shadow: unset !important;
+    }
+
+    :deep(.el-input__inner) {
+      color: #FFFFFF;
+    }
+
+    .el-row {
+      justify-content: center;
+
+      .query-btn {
+        width: 94px;
+        height: 36px;
+        margin-left: 20px;
+        background: linear-gradient(180deg, #81E1FF 0%, #2970CE 100%);
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        font-family: MicrosoftYaHei;
+        font-size: 16px;
+        line-height: 21px;
+        color: #FFFFFF;
+        text-align: center;
+        font-style: normal;
+      }
+
+    }
+  }
+
+  .enterprise-info {
+    z-index: 6;
+    width: 100%;
+    height: 248px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+
+    .enterprise-info-item {
+      width: calc(50% - 10px);
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.10);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+
+      .v-label {
+        width: 32%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        background: rgba(9, 63, 113, 0.70);
+        border: 1px solid rgba(0, 106, 198, 0.3);
+        border-radius: 8px;
+      }
+
+      .text {
+        width: 68%;
+        display: flex;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        border-radius: 8px;
+        margin: 0px 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+    }
+
+  }
+
+  .enterprise-info2 {
+    z-index: 6;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .enterprise-info-item2 {
+      width: 99.6%;
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.10);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+
+      .v-label {
+        width: 28%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        background: rgba(9, 63, 113, 0.70);
+        border: 1px solid rgba(0, 106, 198, 0.3);
+        border-radius: 8px;
+      }
+
+      .text {
+        width: 72%;
+        display: flex;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        border-radius: 8px;
+        margin: 0px 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+    }
+  }
+
+  .table {
+    z-index: 6;
+    margin-top: 16px;
+    height: 100%;
+  }
+
+}
+
+.video-content {
+  width: 50%;
+  height: 240px;
+}
+
+.device-info {
+  width: 50%;
+  height: 240px;
+  margin-left: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  .device-info-item {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.10);
+    border: 1px solid rgba(0, 106, 198, 0.3);
+
+    .v-label {
+      width: 32%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: calc(100vw * 14 / 1920);
+      font-weight: 700;
+      color: #fff;
+      background: rgba(9, 63, 113, 0.70);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+      border-radius: 8px;
+    }
+
+    .text {
+      width: 68%;
+      display: flex;
+      align-items: center;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      font-weight: 700;
+      color: #fff;
+      border-radius: 8px;
+      margin: 0px 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+  }
+
+}
+
+.modal-btn {
+  position: relative;
+  z-index: 6;
+  height: 20%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .sound-btn,
+  .video-btn {
+    width: 94px;
+    height: 36px;
+    margin-left: 20px;
+    background: linear-gradient(180deg, #81E1FF 0%, #2970CE 100%);
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-family: MicrosoftYaHei;
+    font-size: 16px;
+    line-height: 21px;
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+  }
+
+  .video-btn {
+    background: #1D4B7E;
+  }
+}
+
+:deep(.total) {
+  color: #ffffff !important;
+}
+
+/* 弹窗过渡动画 */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-active .modal,
+.modal-fade-leave-active .modal {
+  transition: transform 0.3s,
+  opacity 0.3s;
+}
+
+.modal-fade-enter-from .modal,
+.modal-fade-leave-to .modal {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+:deep(.el-collapse) {
+  z-index: 999999999;
+  margin-top: 24px;
+  --el-collapse-content-bg-color: unset !important;
+  --el-collapse-border-color: unset !important;
+}
+
+:deep(.el-collapse-icon-position-right .el-collapse-item__header) {
+  padding-right: unset !important;
+}
+
+:deep(.el-collapse-item__arrow) {
+  margin-right: 10px;
+}
+
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+  color: unset !important;
+  background: rgba(9, 63, 113, 0.70) !important;
+}
+
+:deep(.el-collapse-item__content) {
+  padding-bottom: unset !important;
+}
+</style>
diff --git a/client/src/views/big-screen/bigdataBack.vue b/client/src/views/big-screen/bigdataBack.vue
new file mode 100644
index 0000000..8307c31
--- /dev/null
+++ b/client/src/views/big-screen/bigdataBack.vue
@@ -0,0 +1,3735 @@
+<template>
+  <div class="big-screen">
+    <div id="map" class="map"></div>
+
+    <div id="top" class="top"></div>
+    <div id="left" class="left"></div>
+    <div id="right" class="right"></div>
+    <div id="bottom" class="bottom"></div>
+
+    <div class="title_background"></div>
+    <div class="title"></div>
+    <div class="home" @click="goHome"></div>
+    <div class="fullScreen" @click="fullScreen"></div>
+    <div class="back" @click="goHome">返回首页</div>
+
+    <div class="switch switch1" :class="{ 'switch-active': isMapMarkActive === 1 }" @click="changeMapMark(1)">
+      <div class="icon"></div>
+      <div class="label">企业</div>
+    </div>
+    <div class="switch switch2" :class="{ 'switch-active': isMapMarkActive === 2 }" @click="changeMapMark(2)">
+      <div class="icon"></div>
+      <div class="label">执法记录仪</div>
+    </div>
+    <div class="switch switch3" :class="{ 'switch-active': isMapMarkActive === 3 }" @click="changeMapMark(3)">
+      <div class="icon"></div>
+      <div class="label">执法车辆</div>
+    </div>
+    <div class="switch switch4" :class="{ 'switch-active': isMapMarkActive === 4 }" @click="changeMapMark(4)">
+      <div class="icon"></div>
+      <div class="label">对讲机</div>
+    </div>
+
+    <div class="search" v-show="showSearchQyxx">
+      <el-select v-model="searchValue"
+                 size="default"
+                 style="width: 160px"
+                 placeholder="企业检索"
+                 clearable
+                 filterable
+                 :filter-method="filterQyxx"
+                 @change="selectQyxx">
+        <el-option v-for="(item, index) in jsqyxx"
+                   :key="index"
+                   :label="item.unitName"
+                   :value="item"/>
+      </el-select>
+    </div>
+
+    <div class="select" v-show="isSelectShow">
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === '' }" @click="changeType('')">全部
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 1 }" @click="changeType(1)">省级
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 2 }" @click="changeType(2)">市级
+      </div>
+      <div class="item" :class="{ 'enterprise-type-active': enterpriseTypeActive === 3 }" @click="changeType(3)">区县级
+      </div>
+    </div>
+
+    <div class="left_content">
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法对象概览</div>
+        </div>
+        <div class="content">
+          <img src="../../assets/bigscreen/58.png">
+          <div class="content_top">
+            <div class="icon"></div>
+            <div class="label">执法对象总数</div>
+            <div class="num" @click="handleEnterprisePage('')">{{ zfdx.qys }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon a"></span>类企业</div>
+              <div class="num" @click="handleEnterprisePage('1')">{{ zfdx.A }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon b"></span>类企业</div>
+              <div class="num" @click="handleEnterprisePage('2')">{{ zfdx.B }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon c"></span>类企业</div>
+              <div class="num" @click="handleEnterprisePage('3')">{{ zfdx.C }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon d"></span>类企业</div>
+              <div class="num" @click="handleEnterprisePage('4')">{{ zfdx.D }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法人员概览</div>
+        </div>
+        <div class="content">
+          <img src="../../assets/bigscreen/58.png">
+          <div class="content_top">
+            <div class="icon icon2"></div>
+            <div class="label">执法人员数量</div>
+            <div class="num" @click="handleOfficerInfo">{{ zfrys }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon jly"></span>执法记录仪</div>
+              <div class="num" @click="handleRecorderInfo">{{ zfjlyzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zxs"></span>在线数</div>
+              <div class="num" @click="handOnlineRecorderInfo">{{ zfjlyzxs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon wxs"></span>问询室</div>
+              <div class="num" @click="">0</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon jrs"></span>接入数</div>
+              <div class="num" @click="">0</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法装备概览</div>
+        </div>
+        <div class="content equipment_content">
+          <img src="../../assets/bigscreen/59.png">
+          <div class="content_top">
+            <div class="icon icon3"></div>
+            <div class="label">执法车辆数量</div>
+            <div class="num" @click="handLawEnforceVehiclePage">{{ zfcls }}</div>
+          </div>
+          <div class="content_bottom">
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon gtfh"></span>个体防护</div>
+              <div class="num" @click="handZfzbPage('1')">{{ gtfhs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zfbz"></span>执法保障</div>
+              <div class="num" @click="handZfzbPage('2')">{{ zfbzs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zfgc"></span>执法过程</div>
+              <div class="num" @click="handZfzbPage('3')">{{ zfgcs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon clzc"></span>测量侦检</div>
+              <div class="num" @click="handZfzbPage('4')">{{ clzjs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon kszf"></span>矿山执法</div>
+              <div class="num" @click="handZfzbPage('5')">{{ kszfs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon whzf"></span>危化品执法</div>
+              <div class="num" @click="handZfzbPage('6')">{{ whpzfs }}</div>
+            </div>
+            <div class="content_bottom_item">
+              <div class="label"><span class="icon zsfz"></span>制式服装</div>
+              <div class="num" @click="handZsfzPage">{{ zsfzs }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right_content">
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">执法检查</div>
+        </div>
+        <div class="content">
+          <div ref="chart2" style="height: 100%; width: 100%;"></div>
+          <div class="sum">
+            <div class="sum-text">执法检查总数</div>
+            <div class="sum-num">{{ sumNum }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">案例来源</div>
+        </div>
+        <div class="content">
+          <div ref="chart4" style="height: 100%; width: 100%;"></div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="top_title">
+          <div class="bg"></div>
+          <div class="label">非现场执法统计</div>
+          <div class="time">
+            <span :class="{ active: isMonthActive }" @click="toggleTimeRange('1')">月</span>
+            <span :class="{ active: !isMonthActive }" @click="toggleTimeRange('2')">年</span>
+          </div>
+        </div>
+        <div class="content">
+          <div ref="chart5" style="width:100%;height: 100%;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom_content">
+      <div class="bg1"></div>
+      <div class="bg2" :style="{ transform: isMoved ? 'translateY(-210px)' : 'translateY(0)' }"></div>
+      <div class="bg3" :style="{ transform: isMoved ? 'translateY(-210px)' : 'translateY(0)' }"
+           @click="toggleMove"></div>
+      <div class="content" v-if="isMoved">
+        <div ref="chart6" style="width:100%;height: 100%;"></div>
+      </div>
+    </div>
+
+    <transition name="modal-fade" v-show="enterprisePageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: enterprisePageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeEnterprisePage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-query">
+            <el-form :model="enterprisePageParams" label-width="80px">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="监管机构" prop="agencyName">
+                    <el-input v-model="enterprisePageParams.agencyName" clearable/>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="单位名称" prop="unitName">
+                    <el-input v-model="enterprisePageParams.unitName" clearable/>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="信用代码" prop="unifiedSocialCode">
+                    <el-input v-model="enterprisePageParams.unifiedSocialCode" clearable/>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <div class="query-btn" @click="getEnterprisePage">查询</div>
+              </el-row>
+            </el-form>
+          </div>
+          <BusinessTable ref="busiTable"
+                         :config="enterprisePageTableConfig"
+                         :data-res="enterprisePageData"
+                         :query-params="enterprisePageParams"
+                         @query-params="handleEnterprisePageQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="属地" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="unitName" label="单位名称" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="unifiedSocialCode" label="信用代码"
+                             min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="businessCategory" label="企业分类" min-width="150">
+              <template #default="{row}">
+                {{ {'1': 'A', '2': 'B', '3': 'C', '4': 'D'}[row.businessCategory] || row.businessCategory }}
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="80" align="center">
+              <template #default="{row}">
+                <el-link type="primary" title="检查明细" @click="handEnterpriseDetail(row)">详情</el-link>
+              </template>
+            </el-table-column>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="officerListShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: officerInfoIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeOfficerList"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="officerTableConfig"
+                         :data-res="officerListData"
+                         :query-params="officerListQueryParams"
+                         @query-params="handleOfficerListQueryParams">
+            <el-table-column align="center" header-align="center" prop="officerName" label="姓名" min-width="250"/>
+            <el-table-column align="center" header-align="center" prop="certificateNo" label="执法证号"
+                             min-width="250"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="recorderListShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: recorderListIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeRecorderList"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="recorderTableConfig"
+                         :data-res="recorderListData"
+                         :query-params="recorderListQueryParams"
+                         @query-params="handleRecorderListQueryParams">
+            <el-table-column align="center" header-align="center" prop="zbmc" label="设备名称" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="sbbm" label="设备编号" min-width="150"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="recorderOnlineListShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: recorderOnlineListIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeRecorderOnlineList"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="recorderTableConfig"
+                         :data-res="recorderOnlineListData">
+            <el-table-column align="center" header-align="center" prop="name" label="设备名称" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="id" label="设备编号" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="lng" label="经度" min-width="150"/>
+            <el-table-column align="center" header-align="center" prop="lat" label="纬度" min-width="150"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="lawEnforceVehiclePageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: lawEnforceVehiclePageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeLawEnforceVehiclePage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="lawEnforceVehiclePageTableConfig"
+                         :data-res="lawEnforceVehiclePageData"
+                         :query-params="lawEnforceVehiclePageQueryParams"
+                         @query-params="handLawEnforceVehiclePageQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="cllx" label="车辆类型"/>
+            <el-table-column align="center" header-align="center" prop="cph" label="车牌号"/>
+            <el-table-column align="center" header-align="center" prop="clbm" label="车辆编码"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="zfzbPageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: zfzbPageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeZfzbPage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="zfzbTableConfig"
+                         :data-res="zfzbPageData"
+                         :query-params="zfzbPageQueryParams"
+                         @query-params="handZfzbQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="zbmc" label="装备名称"/>
+            <el-table-column align="center" header-align="center" prop="zblx" label="装备类型"/>
+            <el-table-column align="center" header-align="center" prop="syr" label="使用人"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="zsfzPageShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: zsfzPageIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeZsfzPage"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <BusinessTable ref="busiTable"
+                         :config="zsfzTableConfig"
+                         :data-res="zsfzPageData"
+                         :query-params="zsfzPageQueryParams"
+                         @query-params="handZsfzQueryParams">
+            <el-table-column align="center" header-align="center" prop="agency.agencyName" label="所属机构"/>
+            <el-table-column align="center" header-align="center" prop="fzlx" label="服装类型"/>
+            <el-table-column align="center" header-align="center" prop="fzbm" label="服装编码"/>
+            <el-table-column align="center" header-align="center" prop="name" label="使用人"/>
+          </BusinessTable>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="enterpriseShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: enterpriseIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeEnterprise"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-info">
+            <div class="enterprise-info-item">
+              <div class="v-label">属地</div>
+              <div class="text">{{ enterprise.agencyName }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">企业名称</div>
+              <div class="text">{{ enterprise.unitName }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">统一信用代码</div>
+              <div class="text">{{ enterprise.unifiedSocialCode }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">企业地址</div>
+              <div class="text">{{ enterprise.detailedAddress }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">法定代表人</div>
+              <div class="text">{{ enterprise.legalRepresentative }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">法人联系电话</div>
+              <div class="text">{{ enterprise.legalPhone }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">企业规模</div>
+              <div class="text">{{ enterprise.unitScale }}</div>
+            </div>
+            <div class="enterprise-info-item">
+              <div class="v-label">成立日期</div>
+              <div class="text">{{ enterprise.establishmentDate }}</div>
+            </div>
+          </div>
+          <el-table class="table" border :data="enterprise.enforceChecks">
+            <el-table-column header-align="center" align="center" label="执法机构" prop="agencyName"/>
+            <el-table-column header-align="center" align="center" label="执法人员" prop="officerNames"/>
+            <el-table-column header-align="center" align="center" label="检查状态" prop="checkStatusMsg"/>
+            <el-table-column header-align="center" align="center" label="检查日期" prop="checkDate"/>
+            <el-table-column header-align="center" align="center" label="检查结果" prop="checkResultMsg"/>
+          </el-table>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="isShow">
+      <div class="modal" :style="{ zIndex: zIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeModal"></div>
+        </div>
+        <div class="modal-content">
+          <div class="video-content">
+            <video width="100%" height="100%" ref="video" controls autoplay/>
+            <audio width="100%" height="100%" ref="audio" controls autoplay style="display: none"/>
+          </div>
+          <div class="device-info">
+            <div class="device-info-item">
+              <div class="v-label">设备型号</div>
+              <div class="text">{{ deviceInfo.recorder_type_name }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备编号</div>
+              <div class="text">{{ deviceInfo.hostbody }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">执法人员</div>
+              <div class="text">{{ deviceInfo.prealname }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">所属单位</div>
+              <div class="text">{{ deviceInfo.unitname }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-btn">
+          <div @click="playAudio" class="sound-btn" v-show="isShowVoice">语音</div>
+          <div @click="playVideo" class="video-btn">视频</div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="interphoneShow">
+      <div class="modal interphone-modal" :style="{ zIndex: interphoneIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeModal2"></div>
+        </div>
+        <div class="modal-content">
+          <div class="video-content">
+            <video width="100%" height="100%" ref="interphonevideo" controls autoplay/>
+            <audio width="100%" height="100%" ref="interphoneaudio" controls autoplay style="display: none"/>
+          </div>
+          <div class="device-info">
+            <div class="device-info-item">
+              <div class="v-label">设备ID</div>
+              <div class="text">{{ interphoneInfo.basedata_id }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备号码</div>
+              <div class="text">{{ interphoneInfo.device_number }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">设备名称</div>
+              <div class="text">{{ interphoneInfo.device_alias }}</div>
+            </div>
+            <div class="device-info-item">
+              <div class="v-label">坐标更新速度</div>
+              <div class="text">{{ interphoneInfo.current_interval_time }}s</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-btn">
+          <div @click="getVideoCall" class="sound-btn">{{ label }}</div>
+          <div @click="hangupCall" class="video-btn">挂断</div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+
+    <transition name="modal-fade" v-show="lawEnforceVehicleShow">
+      <div class="modal enterprise-modal" :style="{ zIndex: lawEnforceVehicleIndex }">
+        <div class="modal-top">
+          <div class="modal-close" @click="closeLawEnforceVehicleInfo"></div>
+        </div>
+        <div class="enterprise-modal-content">
+          <div class="enterprise-info2">
+            <div class="enterprise-info-item2">
+              <div class="v-label">所属机构</div>
+              <div class="text">{{ lawEnforceVehicleInfo.sdmc }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车辆类型</div>
+              <div class="text">{{ lawEnforceVehicleInfo.cllx }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车牌号</div>
+              <div class="text">{{ lawEnforceVehicleInfo.cph }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">车辆编码</div>
+              <div class="text">{{ lawEnforceVehicleInfo.clbm }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">是否喷涂制式标志</div>
+              <div class="text">{{ lawEnforceVehicleInfo.zsbzMsg }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">制式标志编号</div>
+              <div class="text">{{ lawEnforceVehicleInfo.zsbzbh }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">经度</div>
+              <div class="text">{{ lawEnforceVehicleInfo.longitude }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">纬度</div>
+              <div class="text">{{ lawEnforceVehicleInfo.latitude }}</div>
+            </div>
+            <div class="enterprise-info-item2">
+              <div class="v-label">购置时间</div>
+              <div class="text">{{ lawEnforceVehicleInfo.gzsj }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="icon-bottom-left"></div>
+        <div class="icon-bottom-right"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, onUnmounted, reactive, ref} from 'vue'
+import * as echarts from 'echarts'
+import CryptoJS from 'crypto-js'
+import axios from 'axios'
+import {useRouter} from 'vue-router'
+import {ElMessage} from 'element-plus'
+import api from '@/api/lawenforcement/BigScreen'
+import api2 from '@/api/lawenforcement/Enterprise.js'
+import api3 from '@/api/lawenforcement/Officer.js'
+import api4 from '@/api/lawenforcement/Zfclgl.js'
+import api5 from '@/api/lawenforcement/Zfzbgl.js'
+import api6 from '@/api/lawenforcement/Zsfzgl.js'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import xzqh from '@/assets/xzqh.json'
+import BusinessTable from '@/components/BusinessTable.vue'
+
+// 路由实例
+const router = useRouter()
+
+/**
+ * 返回首页
+ */
+const goHome = () => {
+  router.push('/svi/index')
+}
+
+/**
+ * 全屏
+ */
+let isFullScreen = ref(false)
+
+const fullScreen = () => {
+  if (!isFullScreen.value) {  // 检查.value
+    document.documentElement.requestFullscreen()
+        .then(() => isFullScreen.value = true)
+        .catch(err => console.error('进入全屏失败:', err))
+  } else {
+    document.exitFullscreen()
+        .then(() => isFullScreen.value = false)
+        .catch(err => console.error('退出全屏失败:', err))
+  }
+}
+
+// 地图
+let egismap
+let markersLayer1
+let markersLayer2
+let markersLayer3
+let markersLayer4
+
+function loadMap() {
+  // 设置地图坐标系
+  L.CRS.EPSG4490 = L.extend({}, L.CRS.EPSG4326, {
+    code: 'EPSG:4490',
+    scale: function (zoom) {
+      return 256 * Math.pow(2, zoom - 1)
+    },
+  })
+  // 初始化地图设置中心点
+  egismap = L.map('map', {crs: L.CRS.EPSG4490}).setView([34.271013, 108.91908], 18)
+  // 添加地图边界
+  L.geoJSON(xzqh, {
+    style: {
+      color: '#3F83F0', // 边界线颜色
+      weight: 3, // 边界线宽度
+      opacity: 0.8, // 边界线透明度
+      fillColor: '#3F83F0', // 填充颜色
+      fillOpacity: 0, // 填充透明度
+    }
+  }).addTo(egismap)
+  // 从 GeoJSON 中计算矩形边界
+  let bounds = L.geoJSON(xzqh).getBounds()
+  // 限制地图拖动范围
+  egismap.setMaxBounds(bounds, {padding: [50, 50]})
+  // 底图
+  let baseLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_IMAGE/MapServer/tile/{z}/{y}/{x}", {maxZoom: 20})
+  // 注记
+  let labelLayer = L.tileLayer("https://10.22.245.226:8889/kgis/rest/services/CGCS_TEXT/MapServer/tile/{z}/{y}/{x}", {
+    maxZoom: 20,
+    pane: 'shadowPane'
+  })
+  // 添加底图，注记
+  L.layerGroup([baseLayer, labelLayer]).addTo(egismap)
+  // 添加marker图层
+  markersLayer1 = L.layerGroup().addTo(egismap)
+  markersLayer2 = L.layerGroup().addTo(egismap)
+  markersLayer3 = L.layerGroup().addTo(egismap)
+  markersLayer4 = L.layerGroup().addTo(egismap)
+  // 获取企业基本信息
+  getQyxx()
+}
+
+/**
+ * 执法对象概览
+ */
+// 执法对象统计
+const zfdx = reactive({qys: 0, A: 0, B: 0, C: 0, D: 0})
+
+function getZfdxtj() {
+  api.getEnterpriseStatistics().then(res => {
+    if (res.success) {
+      zfdx.qys = res.data.qys
+      zfdx.A = res.data.A
+      zfdx.B = res.data.B
+      zfdx.C = res.data.C
+      zfdx.D = res.data.D
+    }
+  })
+}
+
+let enterprisePageIndex = ref(9999)
+let enterprisePageShow = ref(false)
+let enterprisePageParams = ref({})
+let enterprisePageData = reactive({})
+let enterprisePageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleEnterprisePage(val) {
+  enterprisePageIndex.value = zIndex.value += 1
+  enterprisePageShow.value = true
+  enterprisePageParams.value.businessCategory = val
+  getEnterprisePage()
+}
+
+function getEnterprisePage() {
+  enterprisePageParams.value.pageSize = 10
+  enterprisePageParams.value.pagesize = 10
+  api2.query(enterprisePageParams.value).then(res => Object.assign(enterprisePageData, res))
+}
+
+function handleEnterprisePageQueryParams(val) {
+  Object.assign(enterprisePageParams.value, val)
+  getEnterprisePage()
+}
+
+function handEnterpriseDetail(row) {
+  enterpriseIndex.value = zIndex.value += 1
+  enterpriseShow.value = true
+  findQyxxZfxx(row)
+}
+
+function closeEnterprisePage() {
+  enterprisePageShow.value = false
+}
+
+/**
+ * 执法人员概览
+ */
+// 执法人员数
+let zfrys = ref(0)
+
+function getZfrys() {
+  api3.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfrys.value = data
+    }
+  })
+}
+
+let officerInfoIndex = ref(9999)
+let officerListShow = ref(false)
+let officerListQueryParams = ref({})
+let officerListData = reactive({})
+let officerTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleOfficerInfo() {
+  officerInfoIndex.value = zIndex.value += 1
+  officerListShow.value = true
+  getOfficerList()
+}
+
+function getOfficerList() {
+  officerListQueryParams.value.pageSize = 10
+  officerListQueryParams.value.pagesize = 10
+  api3.query(officerListQueryParams.value).then(res => Object.assign(officerListData, res))
+}
+
+function handleOfficerListQueryParams(val) {
+  Object.assign(officerListQueryParams.value, val)
+  getOfficerList()
+}
+
+function closeOfficerList() {
+  officerListShow.value = false
+}
+
+// 执法记录仪
+let zfjlyzs = ref(0)
+
+let recorderListIndex = ref(9999)
+let recorderListShow = ref(false)
+let recorderListQueryParams = ref({})
+let recorderListData = reactive({})
+let recorderTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handleRecorderInfo() {
+  recorderListIndex.value = zIndex.value += 1
+  recorderListShow.value = true
+  getRecorderList()
+}
+
+function getRecorderList() {
+  recorderListQueryParams.value.pageSize = 10
+  recorderListQueryParams.value.pagesize = 10
+  recorderListQueryParams.value.zblxdm = '7'
+  api5.query(recorderListQueryParams.value).then(res => Object.assign(recorderListData, res))
+}
+
+function handleRecorderListQueryParams(val) {
+  Object.assign(recorderListQueryParams.value, val)
+  getRecorderList()
+}
+
+function closeRecorderList() {
+  recorderListShow.value = false
+}
+
+// 在线执法记录仪
+let zfjlyzxs = ref(0)
+let recorderOnlineListIndex = ref(9999)
+let recorderOnlineListShow = ref(false)
+let recorderOnlineListData = reactive({})
+
+function handOnlineRecorderInfo() {
+  recorderOnlineListIndex.value = zIndex.value += 1
+  recorderOnlineListShow.value = true
+  recorderOnlineListData = {
+    code: 0,
+    success: true,
+    data: onlineDevicePointArr
+  }
+}
+
+function closeRecorderOnlineList() {
+  recorderOnlineListShow.value = false
+}
+
+/**
+ * 执法装备概览
+ */
+// 执法车辆
+let zfcls = ref(0)
+
+function getZfcltj() {
+  api4.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfcls.value = data
+    }
+  })
+}
+
+let zfclList = []
+
+function getZfclList() {
+  api4.list().then(res => {
+    if (res.success) {
+      let data = res.data
+      zfclList = data
+      loadMark('3', zfclList)
+    }
+  })
+}
+
+let lawEnforceVehicleIndex = ref(9999)
+let lawEnforceVehicleShow = ref(false)
+let lawEnforceVehicleInfo = reactive({})
+
+function handZfclInfo(data) {
+  lawEnforceVehicleIndex.value = zIndex.value += 1
+  lawEnforceVehicleShow.value = true
+  if (data.zsbz === '0') {
+    data.zsbzMsg = '否'
+  } else if (data.zsbz === '1') {
+    data.zsbzMsg = '是'
+  }
+  Object.assign(lawEnforceVehicleInfo, data)
+}
+
+function closeLawEnforceVehicleInfo() {
+  lawEnforceVehicleShow.value = false
+}
+
+let lawEnforceVehiclePageIndex = ref(9999)
+let lawEnforceVehiclePageShow = ref(false)
+let lawEnforceVehiclePageQueryParams = ref({})
+let lawEnforceVehiclePageData = reactive({})
+let lawEnforceVehiclePageTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handLawEnforceVehiclePage() {
+  lawEnforceVehiclePageIndex.value = zIndex.value += 1
+  lawEnforceVehiclePageShow.value = true
+  getLawEnforceVehiclePage()
+}
+
+function getLawEnforceVehiclePage() {
+  lawEnforceVehiclePageQueryParams.value.pageSize = 10
+  lawEnforceVehiclePageQueryParams.value.pagesize = 10
+  api4.query(lawEnforceVehiclePageQueryParams.value).then(res => Object.assign(lawEnforceVehiclePageData, res))
+}
+
+function handLawEnforceVehiclePageQueryParams(val) {
+  Object.assign(lawEnforceVehiclePageQueryParams.value, val)
+  getLawEnforceVehiclePage()
+}
+
+function closeLawEnforceVehiclePage() {
+  lawEnforceVehiclePageShow.value = false
+}
+
+// 执法装备
+let gtfhs = ref(0)
+let zfbzs = ref(0)
+let zfgcs = ref(0)
+let clzjs = ref(0)
+let kszfs = ref(0)
+let whpzfs = ref(0)
+
+function getZfzbtj() {
+  api5.statistics().then(res => {
+    if (res.success) {
+      let data = res.data
+      data.forEach(item => {
+        if (item.zblxdm === '1') {
+          gtfhs.value = item.nums
+        } else if (item.zblxdm === '2') {
+          zfbzs.value = item.nums
+        } else if (item.zblxdm === '3') {
+          zfgcs.value = item.nums
+        } else if (item.zblxdm === '4') {
+          clzjs.value = item.nums
+        } else if (item.zblxdm === '5') {
+          kszfs.value = item.nums
+        } else if (item.zblxdm === '6') {
+          whpzfs.value = item.nums
+        } else if (item.zblxdm === '7') {
+          zfjlyzs.value = item.nums
+        }
+      })
+    }
+  })
+}
+
+let zfzbPageIndex = ref(9999)
+let zfzbPageShow = ref(false)
+let zfzbPageQueryParams = ref({})
+let zfzbPageData = reactive({})
+let zfzbTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handZfzbPage(val) {
+  zfzbPageIndex.value = zIndex.value += 1
+  zfzbPageShow.value = true
+  getZfzbPage(val)
+}
+
+function getZfzbPage(val) {
+  zfzbPageQueryParams.value.pageSize = 10
+  zfzbPageQueryParams.value.pagesize = 10
+  zfzbPageQueryParams.value.zblxdm = val
+  api5.query(zfzbPageQueryParams.value).then(res => Object.assign(zfzbPageData, res))
+}
+
+function handZfzbQueryParams(val) {
+  Object.assign(zfzbPageQueryParams.value, val)
+  getZfzbPage()
+}
+
+function closeZfzbPage() {
+  zfzbPageShow.value = false
+}
+
+// 制式服装
+let zsfzs = ref(0)
+
+function getZsfztj() {
+  api6.count().then(res => {
+    if (res.success) {
+      let data = res.data
+      zsfzs.value = data
+    }
+  })
+}
+
+let zsfzPageIndex = ref(9999)
+let zsfzPageShow = ref(false)
+let zsfzPageQueryParams = ref({})
+let zsfzPageData = reactive({})
+let zsfzTableConfig = reactive({
+  hasControlColumn: false,
+  controlWidth: '80',
+  multipleSelect: false,
+  tableLoading: false,
+  pageSizes: [10, 20, 50, 100],
+  pagerLayout: '->, slot, prev, pager, next',
+})
+
+function handZsfzPage() {
+  zsfzPageIndex.value = zIndex.value += 1
+  zsfzPageShow.value = true
+  getZsfzPage()
+}
+
+function getZsfzPage() {
+  zsfzPageQueryParams.value.pageSize = 10
+  zsfzPageQueryParams.value.pagesize = 10
+  api6.query(zsfzPageQueryParams.value).then(res => Object.assign(zsfzPageData, res))
+}
+
+function handZsfzQueryParams(val) {
+  Object.assign(zsfzPageQueryParams.value, val)
+  getZsfzPage()
+}
+
+function closeZsfzPage() {
+  zsfzPageShow.value = false
+}
+
+/**
+ *执法检查（执法形式）
+ */
+// 执法检查统计
+function getZfxs() {
+  api.getZfxs().then(res => {
+    if (res.success) {
+      let data = res.data
+      showEnforceChart(data)
+    }
+  })
+}
+
+const chart2 = ref(null)
+let enforceChart = null
+let sumNum = ref(0)
+
+function showEnforceChart(data) {
+  if (chart2.value) {
+    enforceChart = echarts.init(chart2.value)
+
+    let colorArr = ['rgba(246, 189, 22, 1)', 'rgba(20, 177, 202, 1)', 'rgba(91, 143, 249, 1)', 'rgba(219, 121, 233, 1)']
+
+    let color = [
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(255, 126, 0, 1)'},
+          {offset: 0.5, color: 'rgba(255, 126, 0, 0.55)'},
+          {offset: 1, color: 'rgba(255, 126, 0, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(51, 211, 255, 1)'},
+          {offset: 0.5, color: 'rgba(51, 211, 255, 0.55)'},
+          {offset: 1, color: 'rgba(51, 211, 255, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(48, 96, 255, 1)'},
+          {offset: 0.5, color: 'rgba(48, 96, 255, 0.55)'},
+          {offset: 1, color: 'rgba(48, 96, 255, 0.1)'},
+        ]
+      },
+      {
+        type: 'conic',
+        x: 1,  // 中心点 x 坐标（0~1）
+        y: 1,  // 中心点 y 坐标（0~1）
+        colorStops: [
+          {offset: 0, color: 'rgba(203, 1, 255, 1)'},
+          {offset: 0.5, color: 'rgba(203, 1, 255, 0.55)'},
+          {offset: 1, color: 'rgba(203, 1, 255, 0.1)'},
+        ]
+      },
+    ]
+
+    let chartData = [
+      {
+        name: '日常检查',
+        value: data.filter(item => item.check_type === '1')[0].num
+      },
+      {
+        name: '专项检查',
+        value: data.filter(item => item.check_type === '2')[0].num
+      },
+      {
+        name: '举报核查',
+        value: data.filter(item => item.check_type === '3')[0].num
+      },
+      {
+        name: '随机抽查',
+        value: data.filter(item => item.check_type === '4')[0].num
+      }
+    ]
+
+    // 数据处理
+    let arrName = []
+    let arrValue = []
+    chartData.forEach(v => {
+      arrName.push(v.name)
+      arrValue.push(v.value)
+      sumNum.value = sumNum.value + v.value
+    })
+
+    let pieSeries = [], lineYAxis = []
+
+    // 图表option整理
+    chartData.forEach((v, i) => {
+      pieSeries.push({
+        type: 'pie',
+        clockWise: false,
+        hoverAnimation: false,
+        radius: [82 - i * 10 + '%', 76 - i * 10 + '%'],
+        center: ['32%', '50%'],
+        label: {
+          show: false
+        },
+        data: [
+          {
+            value: v.value,
+            name: v.name,
+            itemStyle: {
+              borderRadius: [50, 50, 50, 50]
+            }
+          },
+          {
+            value: sumNum.value,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          }
+        ]
+      })
+      pieSeries.push({
+        type: 'pie',
+        silent: true,
+        z: 1,
+        clockWise: false,
+        hoverAnimation: false,
+        radius: [82 - i * 10 + '%', 76 - i * 10 + '%'],
+        center: ['32%', '50%'],
+        label: {
+          show: false
+        },
+        data: [
+          {
+            value: 7.5,
+            itemStyle: {
+              color: 'rgba(115,220,250,0.3)',
+              borderRadius: [50, 50, 50, 50]
+            }
+          },
+          {
+            value: 2.5,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          }
+        ]
+      })
+      lineYAxis.push({value: i})
+    })
+
+    const option = {
+      grid: {
+        top: '6%',
+        bottom: '70%',
+        left: '30%',
+        containLabel: true
+      },
+      color: color,
+      yAxis: [
+        {
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            inside: true,
+            color: function (index) {
+              return colorArr[index % colorArr.length]
+            },
+            formatter: function (index) {
+              let item = chartData[index]
+              return '{line|}{name|' + item.name + '}{value|' + item.value + '}'
+            },
+            textStyle: {
+              fontSize: size(14),
+              rich: {
+                name: {
+                  color: '#fff',
+                  fontSize: size(14),
+                  fontWeight: 'bold',
+                  padding: [0, 0, 0, 10],
+                },
+                value: {
+                  fontSize: size(14),
+                  fontWeight: 'bold',
+                  padding: [0, 0, 0, 10]
+                },
+              }
+            },
+            show: true
+          },
+          data: lineYAxis
+        }
+      ],
+      xAxis: [{
+        show: false
+      }],
+      series: pieSeries
+    }
+
+    enforceChart.setOption(option, true)
+    window.onresize = () => enforceChart.resize()
+
+  }
+}
+
+/**
+ * 案例来源
+ */
+// 案例来源统计
+function getAjly() {
+  api.getAjly().then(res => {
+    if (res.success) {
+      let data = res.data
+      showCaseFromChart(data)
+    }
+  })
+}
+
+const chart4 = ref(null)
+let caseFromChart = null
+
+function showCaseFromChart(data) {
+  if (chart4.value) {
+    caseFromChart = echarts.init(chart4.value)
+    const total = data.reduce((sum, item) => sum + (item.num || 0), 0)
+    const option = {
+      legend: {
+        show: true,
+        orient: 'vertical',
+        icon: 'circle',
+        right: size(30),
+        top: 'center',
+        itemHeight: size(12),
+        itemGap: size(15),
+        textStyle: {
+          color: '#ffffff',
+          fontSize: size(14),
+          fontWeight: 'bold',
+        }
+      },
+      tooltip: {
+        trigger: 'item',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          center: ['30%', '50%'],
+          radius: ['72%', '62%'],
+          avoidLabelOverlap: false,
+          data: [
+            {
+              name: '日常检查发现',
+              value: data.filter(item => item.case_source_code === '1')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(91, 143, 249, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(91, 143, 249, 0.6)'},
+                    {offset: 0.5, color: 'rgba(91, 143, 249, 0.8)'},
+                    {offset: 1, color: 'rgba(91, 143, 249, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '机构监测报告',
+              value: data.filter(item => item.case_source_code === '2')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(90, 212, 216, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(90, 212, 216, 0.6)'},
+                    {offset: 0.5, color: 'rgba(90, 212, 216, 0.8)'},
+                    {offset: 1, color: 'rgba(90, 212, 216, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '举报投诉',
+              value: data.filter(item => item.case_source_code === '3')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(61, 70, 144, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(61, 70, 144, 0.6)'},
+                    {offset: 0.5, color: 'rgba(61, 70, 144, 0.8)'},
+                    {offset: 1, color: 'rgba(61, 70, 144, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '上级交办',
+              value: data.filter(item => item.case_source_code === '4')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(209, 195, 77, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(209, 195, 77, 0.6)'},
+                    {offset: 0.5, color: 'rgba(209, 195, 77, 0.8)'},
+                    {offset: 1, color: 'rgba(209, 195, 77, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '下级情报',
+              value: data.filter(item => item.case_source_code === '5')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(192, 115, 213, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0, // 渐变起始点的 x 坐标（左）
+                  y: 0, // 渐变起始点的 y 坐标（上）
+                  x2: 1, // 渐变结束点的 x 坐标（右）
+                  y2: 1, // 渐变结束点的 y 坐标（上）
+                  colorStops: [
+                    {
+                      offset: 0, // 起始点
+                      color: 'rgba(192, 115, 213, 0.3)' // 起始颜色
+                    },
+                    {
+                      offset: 0.5, // 50% 位置
+                      color: 'rgba(192, 115, 213, 0.6)' // 中间颜色
+                    },
+                    {
+                      offset: 1, // 结束点
+                      color: 'rgba(192, 115, 213, 1)' // 结束颜色
+                    }
+                  ]
+                }
+              },
+            },
+            {
+              name: '有关部门移送',
+              value: data.filter(item => item.case_source_code === '6')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(109, 200, 236, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(109, 200, 236, 0.6)'},
+                    {offset: 0.5, color: 'rgba(109, 200, 236, 0.8)'},
+                    {offset: 1, color: 'rgba(109, 200, 236, 1)'},
+                  ]
+                }
+              },
+            },
+            {
+              name: '其他',
+              value: data.filter(item => item.case_source_code === '7')[0]?.num || 0,
+              label: {
+                show: false,
+                position: 'outside',
+                formatter: '{c}',
+                fontSize: size(12),
+                color: 'rgba(209, 132, 59, 1)'
+              },
+              labelLine: {
+                show: true
+              },
+              itemStyle: {
+                color: {
+                  type: 'conic',
+                  x: 1,  // 中心点 x 坐标（0~1）
+                  y: 1,  // 中心点 y 坐标（0~1）
+                  colorStops: [
+                    {offset: 0, color: 'rgba(209, 132, 59, 0.6)'},
+                    {offset: 0.5, color: 'rgba(209, 132, 59, 0.8)'},
+                    {offset: 1, color: 'rgba(209, 132, 59, 1)'},
+                  ]
+                }
+              },
+            }
+          ]
+        },
+        {
+          type: 'pie',
+          center: ['30%', '50%'],
+          radius: ['0%', '0%'],
+          label: {
+            show: true,
+            position: 'center',
+            formatter: `{total|${total}}`,
+            rich: {
+              total: {
+                fontFamily: 'MicrosoftYaHei, MicrosoftYaHei',
+                fontSize: size(40),
+                fontWeight: 'bold',
+                color: '#A8E7FF',
+                lineHeight: size(53)
+              }
+            }
+          },
+          data: [total]
+        }
+      ]
+    }
+    caseFromChart.setOption(option, true)
+    window.onresize = () => caseFromChart.resize()
+  }
+}
+
+/**
+ * 非现场执法
+ */
+// 非现场执法统计
+let isMonthActive = ref(true)
+let timeType = '1'
+
+function toggleTimeRange(type) {
+  timeType = type
+  if (type === '1') {
+    isMonthActive.value = true
+  } else if (type === '2') {
+    isMonthActive.value = false
+  }
+  getFxczf()
+}
+
+function getFxczf() {
+  api.getFxczf({type: timeType}).then(res => {
+    if (res.success) {
+      let data = res.data
+      showCheckCaseChart(data)
+    }
+  })
+}
+
+const chart5 = ref(null)
+let checkCaseChart = null
+
+function showCheckCaseChart(data) {
+  if (chart5.value) {
+    checkCaseChart = echarts.init(chart5.value)
+    let months = []
+    let zxxcs = []
+    let wfwgs = []
+    data.forEach(item => {
+      months.push(item.date)
+      zxxcs.push(item.zxxcs)
+      wfwgs.push(item.wfwgs)
+    })
+    let option = {
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        top: '5%',
+        left: '5%',
+        textStyle: {
+          color: 'rgb(255,255,255)',
+          fontSize: size(14),
+          fontWeight: 'bold',
+        },
+        icon: 'roundRect',
+        itemWidth: size(20),
+        itemHeight: size(5),
+        itemGap: size(10),
+      },
+      grid: {
+        top: '20%',
+        left: '15',
+        right: '15',
+        bottom: '4%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          show: true,
+          interval: 1,
+          overflow: 'truncate',
+          textStyle: {
+            color: 'rgb(255,255,255)',
+            fontSize: size(12)
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        boundaryGap: false,
+        data: months
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.15)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+      },
+      series: [
+        {
+          name: '在线巡查数',
+          type: 'line',
+          lineStyle: {
+            width: size(4)
+          },
+          itemStyle: {
+            color: '#14B1CA'
+          },
+          symbolSize: 6,
+          data: zxxcs
+        },
+        {
+          name: '违法违规数',
+          type: 'line',
+          lineStyle: {
+            width: size(4)
+          },
+          itemStyle: {
+            color: '#F6BD16'
+          },
+          symbolSize: 6,
+          data: wfwgs
+        }
+      ]
+    }
+    checkCaseChart.setOption(option, true)
+    window.onresize = () => checkCaseChart.resize()
+  }
+}
+
+/**
+ * 切换样式
+ */
+let isMoved = ref(false)
+
+function toggleMove() {
+  isMoved.value = !isMoved.value
+  getJdjcjhtj()
+}
+
+/**
+ * 监督检查计划
+ */
+// 监督检查计划统计
+function getJdjcjhtj() {
+  api.getJdjcjhtj().then(res => {
+    if (res.success) {
+      let data = res.data
+      showTaskChart(data)
+    }
+  })
+}
+
+const chart6 = ref(null)
+let taskChart = null
+let timer1 = null
+
+function showTaskChart(data) {
+  if (timer1) clearInterval(timer1)
+  if (chart6.value) {
+    let xData = []
+    let seriesData1 = []
+    let seriesData2 = []
+    data.forEach(item => {
+      xData.push(item.agency_name)
+      seriesData1.push(item.zs)
+      seriesData2.push(item.wjs)
+    })
+    taskChart = echarts.init(chart6.value)
+    const option = {
+      grid: {
+        top: '8%',
+        bottom: '18%',
+        left: '5%',
+        right: '0%'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: true,
+          interval: 0,
+          overflow: 'truncate',
+          textStyle: {
+            color: 'rgb(255,255,255)',
+            fontSize: size(14)
+          }
+        },
+        data: xData
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff'
+          }
+        },
+        axisLabel: {
+          show: true,
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.15)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+      },
+      series: [
+        {
+          barGap: '-100%',
+          type: 'bar',
+          barWidth: size(40),
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 1, // 渐变起始点的 x 坐标（左）
+              y: 1, // 渐变起始点的 y 坐标（上）
+              x2: 1, // 渐变结束点的 x 坐标（右）
+              y2: 0, // 渐变结束点的 y 坐标（上）
+              colorStops: [
+                {
+                  offset: 0, // 起始点
+                  color: '#004DFF' // 起始颜色
+                },
+                {
+                  offset: 0.5, // 50% 位置
+                  color: '#009FFC' // 中间颜色
+                },
+                {
+                  offset: 1, // 结束点
+                  color: '#00EDFC' // 结束颜色
+                }
+              ]
+            },
+            barBorderRadius: [5, 5, 0, 0]
+          },
+          label: {
+            show: false,
+            position: 'top',
+            offset: [0, 30],
+            color: '#fff',
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.value ?? params.value === 0 ? params.value : ''
+            },
+          },
+          data: seriesData1
+        },
+        {
+          type: 'bar',
+          barWidth: size(40),
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 1, // 渐变起始点的 x 坐标（左）
+              y: 1, // 渐变起始点的 y 坐标（上）
+              x2: 1, // 渐变结束点的 x 坐标（右）
+              y2: 0, // 渐变结束点的 y 坐标（上）
+              colorStops: [
+                {
+                  offset: 0, // 起始点
+                  color: '#ffdd00' // 起始颜色
+                },
+                {
+                  offset: 0.5, // 50% 位置
+                  color: '#fce300' // 中间颜色
+                },
+                {
+                  offset: 1, // 结束点
+                  color: '#f8f40a' // 结束颜色
+                }
+              ]
+            },
+            // barBorderRadius: [5, 5, 0, 0]
+          },
+          label: {
+            show: false,
+            position: 'top',
+            offset: [0, 30],
+            color: '#fff',
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.value ?? params.value === 0 ? params.value : ''
+            },
+          },
+          data: seriesData2
+        }
+      ],
+      dataZoom: [{
+        orient: 'slider',
+        show: false,
+        startValue: 0,
+        endValue: 14
+      }]
+    }
+    taskChart.setOption(option, true)
+    window.onresize = () => taskChart.resize()
+    timer1 = window.setInterval(() => {
+      if (option.dataZoom[0].endValue === xData.length - 1) {
+        option.dataZoom[0].startValue = 0
+        option.dataZoom[0].endValue = 14
+      } else {
+        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+      }
+      taskChart.setOption(option, true)
+    }, 1500)
+  }
+}
+
+/**
+ * 地图点位切换
+ */
+
+let isMapMarkActive = ref(1)
+let isResetEnterpriseTypeActive = ref(true)
+
+function changeMapMark(val) {
+  showSearchQyxx.value = false
+  isMapMarkActive.value = val
+  closeGPSReportListener() // 关闭对讲机坐标监听
+  if (val === 1) {
+    showSearchQyxx.value = true
+    if (isResetEnterpriseTypeActive.value) enterpriseTypeActive.value = null
+    isResetEnterpriseTypeActive.value = false
+    handleSelect()
+  } else if (val === 2) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    onlineDevice(true)
+  } else if (val === 3) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    getZfclList()
+  } else if (val === 4) {
+    clearMark()
+    isSelectShow.value = false
+    isResetEnterpriseTypeActive.value = true
+    getInterphoneList(orgId)
+  }
+}
+
+// 企业筛选
+let isSelectShow = ref(false)
+
+function handleSelect() {
+  isSelectShow.value = !isSelectShow.value
+}
+
+let enterpriseTypeActive = ref(null)
+
+function changeType(val) {
+  clearMark()
+  qyfj = val
+  enterpriseTypeActive.value = val
+  isSelectShow.value = false
+  getQyxx()
+}
+
+/**
+ * 地图企业
+ */
+let qyfj = ''
+let qyxxList = []
+
+function getQyxx() {
+  api.getQyxx({businessRating: qyfj}).then(res => {
+    if (res.success) {
+      let data = res.data
+      qyxxList = data
+      loadMark('1', qyxxList)
+    }
+  })
+}
+
+// 企业详情信息
+let enterpriseIndex = ref(9999)
+let enterpriseShow = ref(false)
+let enterprise = reactive({})
+
+function handEnterprise(item) {
+  enterpriseIndex.value = zIndex.value += 1
+  enterpriseShow.value = true
+  findQyxxZfxx(item)
+}
+
+function findQyxxZfxx(item) {
+  api.getQyxxZfxx({enterpriseId: item.enterpriseId}).then(res => {
+    if (res.success) {
+      const data = res.data
+      enterprise.unitName = item.unitName
+      enterprise.unifiedSocialCode = item.unifiedSocialCode
+      enterprise.detailedAddress = item.detailedAddress
+      enterprise.agencyName = item.agency.agencyName
+      enterprise.legalRepresentative = item.legalRepresentative
+      enterprise.legalPhone = item.legalPhone
+      enterprise.unitScale = item.unitScale
+      enterprise.establishmentDate = item.agency.establishmentDate
+      let enforceChecks = []
+      data.forEach(item => {
+        // 更新检查记录
+        item.enforceChecks.forEach(item2 => {
+          // 机构信息
+          item2.agencyName = item.agency?.agencyName
+          // 人员信息
+          item2.officerNames = item2.officerList.map(item => item.officerName).join(', ')
+          enforceChecks.push(item2)
+        })
+      })
+      enterprise.enforceChecks = enforceChecks
+    } else {
+      ElMessage.error('执法信息详情查询失败')
+    }
+  })
+}
+
+function closeEnterprise() {
+  enterpriseShow.value = false
+}
+
+let jsqyxx = ref([])
+let searchValue = ref(null)
+let showSearchQyxx = ref(true)
+
+function filterQyxx(searchTerm) {
+  if (!Array.isArray(qyxxList) || !searchTerm) {
+    jsqyxx.value = []
+    return []
+  }
+  const searchLower = searchTerm.toLowerCase();
+  jsqyxx.value = qyxxList.filter(item => item?.unitName?.toLowerCase().includes(searchLower))
+}
+
+function selectQyxx(val) {
+  egismap.flyTo([val.latitude, val.longitude], 18)
+}
+
+/**
+ * 执法记录仪
+ */
+// 登录
+const login = async () => {
+  let username = 'SLtest'
+  let password = CryptoJS.MD5('Pe26957381').toString()
+  let param = {username: username, password: password}
+  let jsonString = JSON.stringify(param)
+  let urlEncodedString = encodeURIComponent(jsonString)
+  let login_info = btoa(urlEncodedString)
+  try {
+    const response = await axios.post('/rest/index/login/login', {login_info: login_info})
+    if (response.data.code == 200) {
+      getUserInfo()
+    } else {
+      console.error('登录失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error during login:', error)
+  }
+}
+// 获取用户信息
+let userInfo
+
+function getUserInfo() {
+  axios
+      .post('/rest/user/user/get_info')
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          userInfo = data
+          console.info('用户信息：', userInfo)
+          // 获取在线设备信息
+          onlineDevice(false)
+          // 维持心跳
+          heartbeat().then(() => {
+          })
+        } else {
+          console.error('获取用户信息失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 保持心跳
+let timerId = null
+
+function heartbeat() {
+  return new Promise((resolve) => {
+    heart().then(() => {
+      if (timerId) {
+        clearInterval(timerId)
+      }
+      timerId = setInterval(heart, 20000)
+      resolve()
+    }).catch((error) => {
+      reject(error)
+    })
+  })
+}
+
+// 心跳
+function heart() {
+  return new Promise((resolve, reject) => {
+    axios({
+      url: `/rest/other/user/online`,
+      method: 'GET',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+      },
+      withCredentials: true,
+    }).then(() => resolve())
+  })
+}
+
+// 获取在线设备
+let onlineDeviceArr = []
+
+function onlineDevice(val) {
+  onlineDeviceArr = []
+  axios.post('/rest/other/unitjson/gdlist', {id: '1001', bh: 'bh', text: 'dname'})
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          data.forEach((item) => {
+            if (item.online_device) onlineDeviceArr.push(...item.online_device)
+          })
+          console.log('在线设备信息：', onlineDeviceArr)
+          if (onlineDeviceArr.length > 0) {
+            let ids = onlineDeviceArr.map(item => item.hostbody)
+            onlineDevicePoint(ids, val)
+          } else {
+            console.log('当前暂无在线设备。。。。')
+          }
+        } else {
+          console.error('获取在线设备失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 获取在线设备点位信息
+let onlineDevicePointArr = []
+
+function onlineDevicePoint(ids, val) {
+  onlineDevicePointArr = []
+  axios.post('/rest/gis/gismoni/get_point', {ids: ids})
+      .then((response) => {
+        if (response.data.code == 200) {
+          let data = response.data.data
+          data.forEach(item => onlineDevicePointArr.push(item))
+          console.info('在线设备点位信息：', onlineDevicePointArr)
+          if (onlineDevicePointArr.length > 0) {
+            zfjlyzxs.value = onlineDevicePointArr.length
+            if (val) loadMark('2', onlineDevicePointArr)
+          } else {
+            console.error('当前暂无在线设备点位。。。。')
+          }
+        } else {
+          console.error('获取在线设备点位失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 获取执法记录仪设备及视频信息
+let zIndex = ref(9999)
+let isShow = ref(false)
+
+async function handVideo(item) {
+  isShowVoice.value = false
+  await Promise.all([getDevice(item), getVideo(item)])
+  if (videoInfo.webrtc_url) {
+    zIndex.value += 1
+    isShow.value = true
+  } else {
+    ElMessage.error('获取视频流信息失败，请稍后重试。')
+  }
+}
+
+// 获取执法记录仪设备信息
+let deviceInfo = reactive({})
+
+async function getDevice(data) {
+  try {
+    const response = await axios.post('/rest/device/device/devicelist', {bh: '1001', hostbody: data.id})
+    if (response.data.code == 200) {
+      Object.assign(deviceInfo, response.data.data.devicelist[0])
+      console.info('设备信息：', deviceInfo)
+    } else {
+      console.error('获取设备信息失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+// 获取执法记录仪视频信息
+let videoInfo = reactive({})
+
+async function getVideo(data) {
+  try {
+    const response = await axios.post('/rest/live/chrome/startLive', {hostbody_arr: [data.id]})
+    if (response.data.code == 200) {
+      Object.assign(videoInfo, response.data.data[0])
+      console.info('设备视频信息：', videoInfo)
+    } else {
+      console.error('获取设备视频信息失败。。。。')
+    }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+// 视频播放
+function playVideo() {
+  startPlayVideo(videoInfo)
+}
+
+// 开始播放
+let videoPlayer
+let video = ref(null)
+let isShowVoice = ref(false)
+
+function startPlayVideo(data) {
+  let initialData = {
+    element: video.value,
+    debug: true,
+    zlmsdpUrl: data.webrtc_url,
+    simulcast: false,
+    useCamera: false,
+    audioEnable: true,
+    videoEnable: true,
+    recvOnly: true,
+    resolution: {w: 3840, h: 2160},
+    usedatachannel: false,
+  }
+  videoPlayer = new Webrtc(initialData)
+  videoPlayer.start_play()
+      .then(() => videoPlayer.on('failed', () => console.log('网络断开')))
+      .catch(() => console.log('网络断开'))
+  isShowVoice.value = true
+}
+
+// 停止播放
+function stopVideoLive(data) {
+  axios.post('/rest/live/chrome/stopLive', {hostbody_arr: [data.hostbody]})
+      .then((response) => {
+        if (response.data.code == 200) {
+          videoPlayer.close_play(video.value)
+          videoPlayer = null
+          console.error('视频停止播放成功。。。。')
+        } else {
+          console.error('视频停止播放失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 语音呼叫
+function playAudio() {
+  voiceInVideo(videoInfo)
+}
+
+// 开始呼叫
+let audioPlayer
+let audio = ref(null)
+let isStartAudio = 0
+
+function voiceInVideo(data) {
+  return new Promise((resolve, reject) => {
+    axios({
+      url: '/rest/live/chrome/startAudioInVideo',
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+      },
+      data: {hostbody: data.hostbody},
+      withCredentials: true
+    }).then((res) => {
+      if (res.data.code === 200) {
+        let data = res.data.data
+        if (!isStartAudio) {
+          let initialData = {
+            element: audio.value,
+            debug: true,
+            zlmsdpUrl: data.platform_webrtc_push_url,
+            simulcast: false,
+            useCamera: false,
+            audioEnable: true,
+            videoEnable: false,
+            recvOnly: false,
+            resolution: {w: 3840, h: 2160},
+            usedatachannel: false,
+          }
+          audioPlayer = new Webrtc(initialData)
+          audioPlayer.start_play().then(() => isStartAudio++).catch((err) => console.log(err));
+        } else {
+          isStartAudio++
+        }
+      }
+    }).catch((err) => {
+      console.log(err)
+      reject()
+    })
+  })
+}
+
+// 停止呼叫
+function closeVoiceLive(data) {
+  axios.post('/rest/live/chrome/stopAudio', {hostbody_arr: [data.hostbody]})
+      .then((response) => {
+        if (response.data.code == 200) {
+          audioPlayer.close_play()
+          isStartAudio--
+          audioPlayer = null
+          console.error('音频停止播放成功。。。。')
+        } else {
+          console.error('音频停止播放失败。。。。')
+        }
+      })
+      .catch((error) => console.error('Error:', error))
+}
+
+// 关闭记录仪窗口
+function closeModal() {
+  isShow.value = false
+  stopVideoLive(deviceInfo)
+  closeVoiceLive(deviceInfo)
+}
+
+/**
+ * 对讲机
+ */
+// 对讲机登录
+function interphoneLogin() {
+  console.info('对讲机是否登录：', window.lemon.login.isLogin())
+  if (window.lemon.login.isLogin()) {
+    console.info('对讲机执法支队账号异地登录，尝试重新登录。')
+    interphoneLoginOut(true)
+  } else {
+    login2()
+  }
+}
+
+// 对讲机登出
+function interphoneLoginOut(isLogin) {
+  window.lemon.login.logout().then(
+      (result) => {
+        if (result.result === 0) {
+          console.info('对讲机退出登录成功')
+          if (isLogin) login2()
+        }
+      },
+      (err) => {
+        console.info('登录异常：', err)
+      }
+  )
+}
+
+// 登录
+function login2() {
+  let params = {
+    username: 'zfzd',
+    password: '12345678',
+    realm: 'puc.com',
+    webpucUrl: 'https://10.22.147.13',
+  }
+  window.lemon.login.login(params).then(
+      (result) => {
+        if (result.result === 0) {
+          // 登录成功
+          console.info('对讲机登录成功。。。')
+          console.info('登录信息：', result)
+          sessionStorage.setItem('realm', result.realm)
+          sessionStorage.setItem('user_id', result.user_id)
+          sessionStorage.setItem('dispatcher_name', result.dispatcher_name)
+          sessionStorage.setItem('token', result.token)
+          sessionStorage.setItem('webpucUrl', params.webpucUrl)
+          sessionStorage.setItem('basedata_id', result.basedata_id)
+          sessionStorage.setItem('user_guid', result.user_guid)
+          getSystemOrg()
+        }
+      },
+      (err) => {
+        console.info('登录异常：', err)
+      }
+  )
+}
+
+// 获取组织列表
+let orgId
+
+function getSystemOrg() {
+  let params = {flat: true}
+  window.lemon.basedata.fetchSystemOrg(params).then(
+      (result) => {
+        console.info('获取组织列表：', result)
+        if (result.result === 0) {
+          let orgData = result.org.filter(item => item.org_alias === '应急管理综合执法支队')
+          orgId = orgData.org_identifier
+        }
+      },
+      (err) => {
+        console.info('获取组织列表异常：', err)
+      }
+  )
+}
+
+// 获取机构下设备列表
+let interphoneList = []
+
+function getInterphoneList(orgId) {
+  let params = {
+    page_size: 100,
+    page_index: 1,
+    org_id: orgId,
+  }
+  window.lemon.basedata.fetchDeviceList(params).then(
+      (result) => {
+        console.info('对讲机设备信息：', result)
+        if (result.result === 0) {
+          interphoneList = result.device_list
+          let subList = interphoneList.map(item => ({
+            basedata_id: item.basedata_id,
+            interval_time: 60
+          }))
+          if (subList.length > 0) {
+            subGPSReport(subList)
+          }
+        }
+      },
+      (err) => {
+        console.info('----error----', err)
+      }
+  )
+}
+
+// 订阅设备gps信息
+function subGPSReport(subList) {
+  let params = {subscriber_list: subList}
+  window.lemon.gis.startSubscribeGps(params).then(
+      (result) => {
+        console.info('对讲机设备GPS订阅信息：', result)
+        if (result.result === 0) {
+          addGPSReportListener()
+        }
+      },
+      (err) => {
+        console.info('----error----', err)
+      }
+  )
+}
+
+// 获取设备gps信息
+let gpsReportGuid = ''
+
+function addGPSReportListener() {
+  console.log('注册设备gps监听事件')
+  gpsReportGuid = window.lemon.gis.addGPSReportListener(gpsInfo => {
+    const gpsList = gpsInfo.gps_list
+    console.info('对讲机设备GPS信息：', gpsList)
+    loadMark('4', gpsList)
+  })
+}
+
+// 展示对讲机信息
+let interphoneIndex = ref(9999)
+let interphoneShow = ref(false)
+let interphoneInfo = reactive({})
+let label = ref('呼叫')
+
+function handInterphoneInfo(data) {
+  label.value = '呼叫'
+  interphoneIndex.value = zIndex.value += 1
+  interphoneShow.value = true
+  Object.assign(interphoneInfo, data)
+}
+
+// 建立视频呼叫
+function getVideoCall() {
+  label.value = '呼叫中'
+  let params = {
+    callee_guid: interphoneInfo.basedata_id,
+    video_frame_size: 6,
+    attribute: {
+      call_type: 11,
+      call_mode: 2,
+      duplex_flag: 1,
+      // ambience_flag: 1,
+    }
+  }
+  window.lemon.call.makeCall(params).then(
+      (result) => {
+        console.info('视频呼叫：', result)
+        if (result.result === 0) {
+          interphoneInfo.call_id = result.call_id
+          handAnswerAckEvt()
+        }
+      },
+      (err) => {
+        console.info('----err----', err)
+      }
+  )
+}
+
+// 接收方确认事件
+let answerAckGuid = ''
+
+function handAnswerAckEvt() {
+  answerAckGuid = window.lemon.call.addAnswerAckEvt(answerAckInfo => {
+    console.info('接收方确认信息：', answerAckInfo)
+    addMediaStream()
+  })
+}
+
+// 媒体流映射事件
+let interphonevideo = ref()
+let interphoneaudio = ref()
+let mediaStreamGuid = ''
+
+function addMediaStream() {
+  console.info('----注册对讲机流媒体监听事件----')
+  mediaStreamGuid = window.lemon.call.addMediaStream((call_id, stream, type) => {
+    console.info('----对讲机流信息回调----', {call_id: call_id, stream: stream, type: type,})
+    label.value = '呼叫'
+    if ('video_src' === type) {
+      console.info('----本地视频流----', stream)
+    } else if ('video_dst' === type) {
+      console.info('----远端视频流----', stream)
+      interphonevideo.value.srcObject = stream
+    } else if ('audio_dst' === type) {
+      console.info('----远端声音流----', stream)
+      interphoneaudio.value.srcObject = stream
+    }
+  })
+}
+
+// 挂断视频呼叫
+function hangupCall() {
+  window.lemon.call.hangupCall({call_id: interphoneInfo.call_id}).then(
+      (result) => {
+        if (result.result === 0) console.info('成功挂断视频呼叫。。。')
+        window.calling_conference = undefined
+      },
+      (err) => {
+        console.info('----err----', err)
+      }
+  )
+}
+
+// 关闭媒体流映射事件
+function closeMediaStream() {
+  window.lemon.call.removeMediaStream(mediaStreamGuid)
+}
+
+// 关闭接收方确认事件
+function closeAnswerAckEvt() {
+  window.lemon.call.removeAnswerAckEvt(answerAckGuid)
+}
+
+// 关闭gps监听
+function closeGPSReportListener() {
+  window.lemon.gis.removeGPSReportListener(gpsReportGuid)
+}
+
+// 关闭对讲机信息
+function closeModal2() {
+  interphoneShow.value = false
+  hangupCall()
+  // closeMediaStream()
+  // closeAnswerAckEvt()
+}
+
+/**
+ * 加载地图标点
+ */
+function loadMark(type, pointArr) {
+  // clearMark()
+  // 创建点
+  if (pointArr.length > 0) {
+    if (type === '1') {
+      pointArr.forEach(item => { // 企业
+        let iconUrl = '/assets/bigscreen/dtqy.png'
+        if (item.businessRating === '1') { // 省
+          iconUrl = '/assets/bigscreen/dtqy.png'
+        } else if (item.businessRating === '2') { // 市
+          iconUrl = '/assets/bigscreen/dtqy1.png'
+        } else if (item.businessRating === '3') { // 县
+          iconUrl = '/assets/bigscreen/dtqy2.png'
+        }
+        let icon = L.icon({
+          iconUrl: iconUrl,
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .on('click', () => handEnterprise(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer1.addLayer(marker)
+      })
+      // 重置中心点
+      egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 18)
+    } else if (type === '2') { // 执法记录仪
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtzfjly.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.lat, item.lng], {icon: icon})
+            .on('click', () => handVideo(item)) // 点击事件
+        //    .bindTooltip(item.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer2.addLayer(marker)
+      })
+      // 重置中心点
+      egismap.flyTo([pointArr[0].lat, pointArr[0].lng], 18)
+    } else if (type === '3') { // 执法车辆
+      // 清空之前的标点
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtzfcl.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .addTo(egismap)
+            .on('click', () => handZfclInfo(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer4.addLayer(marker)
+      })
+      // 重置中心点
+      egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 18)
+    } else if (type === '4') { // 对讲机
+      // 清空之前的标点
+      markersLayer3.clearLayers()
+      pointArr.forEach(item => {
+        let icon = L.icon({
+          iconUrl: '/assets/bigscreen/dtdjj.png',
+          iconSize: [28, 35], // 图标大小
+          iconAnchor: [14, 17.5], // 锚点位置（图标底部中心）
+        })
+        let marker = L.marker([item.latitude, item.longitude], {icon: icon})
+            .addTo(egismap)
+            .on('click', () => handInterphoneInfo(item)) // 点击事件
+        //    .bindTooltip(data.name, { direction: 'top', offset: [0, -10] }) // 悬浮事件
+        markersLayer3.addLayer(marker)
+      })
+      // 重置中心点
+      egismap.flyTo([pointArr[0].latitude, pointArr[0].longitude], 18)
+    }
+  }
+}
+
+/**
+ * 清空地图标点
+ */
+function clearMark() {
+  markersLayer1.clearLayers()
+  markersLayer2.clearLayers()
+  markersLayer3.clearLayers()
+  markersLayer4.clearLayers()
+}
+
+/**
+ * 清理定时器
+ */
+function clearInterval(timeId) {
+  timeId && window.clearInterval(timeId)
+}
+
+/**
+ * 重置字体大小
+ */
+function size(value) {
+  let clientWidth = document.documentElement.clientWidth
+  return clientWidth * value / 1920
+}
+
+onMounted(() => {
+  loadMap()
+  login()
+  interphoneLogin()
+  addMediaStream()
+
+  getZfdxtj()
+  getZfrys()
+  getZfcltj()
+  getZfzbtj()
+  getZsfztj()
+  getZfxs()
+  getAjly()
+  getFxczf()
+  getJdjcjhtj()
+})
+
+onUnmounted(() => {
+  if (timerId) clearInterval(timerId)
+  // 关闭执法记录仪视频和语音通话
+  if (videoInfo && Object.keys(videoInfo).length > 0) {
+    if (videoPlayer) stopVideoLive(deviceInfo)
+    if (audioPlayer) closeVoiceLive(deviceInfo)
+  }
+  // 挂断视频呼叫
+  hangupCall()
+  // 关闭媒体流映射事件
+  closeMediaStream()
+  // 关闭接收方确认事件
+  closeAnswerAckEvt()
+  // 关闭对讲机坐标监听事件
+  closeGPSReportListener()
+  // 对讲机登出
+  interphoneLoginOut()
+  // 清空地图
+  if (egismap) egismap.remove()
+})
+</script>
+
+<style lang="scss" scoped>
+.big-screen {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.map {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+}
+
+.top {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh * 192 / 1080);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(180deg, #162D4B 0%, rgba(22, 45, 75, 0.73) 50%, rgba(24, 48, 76, 0) 100%);
+}
+
+.left {
+  box-sizing: border-box;
+  width: calc(100vw * 432 / 1920);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(90deg, #0F214C 0%, rgba(5, 32, 79, 0.94) 50%, rgba(15, 33, 76, 0) 100%);
+}
+
+.right {
+  box-sizing: border-box;
+  width: calc(100vw * 420 / 1920);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  background: linear-gradient(270deg, #0F214C 0%, rgba(5, 32, 79, 0.94) 50%, rgba(15, 33, 76, 0) 100%);
+}
+
+.bottom {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh * 98 / 1080);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  background: linear-gradient(0deg, #162D4B 0%, rgba(22, 45, 75, 0.73) 50%, rgba(24, 48, 76, 0) 100%);
+}
+
+.title_background {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vw * 89 / 1920);
+  background-image: url("../../assets/bigscreen/1.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+
+.title {
+  box-sizing: border-box;
+  width: calc(100vw * 261 / 1920);
+  height: calc(100vw * 47 / 1920);
+  background-image: url("../../assets/bigscreen/2.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 10 / 1080);
+  left: calc(100vw * 829.5 / 1920);
+  z-index: 3;
+}
+
+.home {
+  box-sizing: border-box;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/60.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 180 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.fullScreen {
+  box-sizing: border-box;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/61.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 140 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.back {
+  box-sizing: border-box;
+  font-family: MicrosoftYaHei, MicrosoftYaHei;
+  color: #FFFFFF;
+  font-size: calc(100vw * 16 / 1920);
+  text-align: left;
+  font-style: normal;
+  position: absolute;
+  top: calc(100vh * 29 / 1080);
+  right: calc(100vw * 60 / 1920);
+  z-index: 10;
+  cursor: pointer;
+}
+
+.back::after {
+  content: "";
+  display: block;
+  width: calc(100vw * 24 / 1920);
+  height: calc(100vw * 24 / 1920);
+  background-image: url("../../assets/bigscreen/6.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 111%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.switch {
+  box-sizing: border-box;
+  width: calc(100vw * 145 / 1920);
+  height: calc(100vw * 33 / 1920);
+  background-image: url("../../assets/bigscreen/29.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .label {
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    font-size: calc(100vh * 16 / 1080);
+    line-height: calc(100vh * 21 / 1080);
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+  }
+
+}
+
+.switch-active {
+  background-image: url("../../assets/bigscreen/15.png");
+}
+
+.switch1 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 670 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/10.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch2 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 815 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/16.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch3 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 960 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/21.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.switch4 {
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 1105 / 1920);
+
+  .icon {
+    width: calc(100vh * 24 / 1080);
+    height: calc(100vh * 24 / 1080);
+    background-image: url("../../assets/bigscreen/57.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+.search {
+  z-index: 4;
+  position: absolute;
+  top: calc(100vh * 112 / 1080);
+  left: calc(100vw * 1260 / 1920);
+
+  :deep(.el-select__wrapper) {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(0, 106, 198, 0.5);
+    box-shadow: unset !important;
+  }
+
+  :deep(.el-select__input) {
+    color: rgba(0, 106, 198, 0.8) !important;
+  }
+
+  :deep(.el-icon) {
+    color: rgba(0, 106, 198, 0.8) !important;
+  }
+
+  :deep(.el-select__placeholder) {
+    color: rgba(0, 106, 198, 0.8) !important;
+    font-size: 12px;
+  }
+
+}
+
+.select {
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100vh * 130 / 1080);
+  left: calc(100vw * 670 / 1920);
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    box-sizing: border-box;
+    width: calc(100vw * 145 / 1920);
+    height: calc(100vw * 33 / 1920);
+    background-image: url("../../assets/bigscreen/29.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    z-index: 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .label {
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      font-size: calc(100vh * 16 / 1080);
+      line-height: calc(100vh * 21 / 1080);
+      color: #FFFFFF;
+      text-align: center;
+      font-style: normal;
+    }
+  }
+
+  .item:nth-child(1) {
+    margin-top: calc(100vh * 30 / 1080);
+  }
+
+  .item:nth-child(2) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .item:nth-child(3) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .item:nth-child(4) {
+    margin-top: calc(100vh * 10 / 1080);
+  }
+
+  .enterprise-type-active {
+    background-image: url("../../assets/bigscreen/15.png");
+  }
+}
+
+.left_content,
+.right_content {
+  box-sizing: border-box;
+  width: calc(100vw * 420 / 1920);
+  height: 100%;
+  padding: calc(100vh * 50 / 1080) 0 calc(100vh * 60 / 1080) 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    box-sizing: border-box;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .top_title {
+      box-sizing: border-box;
+      height: calc(100vh * 38 / 1080);
+      position: relative;
+
+      .bg {
+        width: calc(100vw * 412 / 1920);
+        height: calc(100vh * 23 / 1080);
+        background-image: url("../../assets/bigscreen/5.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+
+      .label {
+        font-family: YEFONTAoYeHei, YEFONTAoYeHei;
+        font-weight: 400;
+        font-size: calc(100vh * 24 / 1080);
+        line-height: calc(100vh * 34 / 1080);
+        color: #FFFFFF;
+        text-align: left;
+        font-style: normal;
+        position: absolute;
+        left: calc(100vw * 46 / 1920);
+        bottom: 0;
+      }
+
+      .time {
+        width: calc(100vh * 80 / 1080);
+        height: calc(100vh * 32 / 1080);
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid #4B91E2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        right: 23px;
+        bottom: 0px;
+
+        span {
+          width: calc(100vh * 80 / 1080);
+          height: calc(100vh * 32 / 1080);
+          color: #FFFFFF;
+          font-family: MicrosoftYaHei;
+          font-size: calc(100vw * 14 / 1920);
+          line-height: calc(100vw * 19 / 1920);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        .active {
+          background: #4B91E2;
+          color: #fff;
+        }
+      }
+    }
+
+    .content {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      position: relative;
+    }
+  }
+}
+
+.left_content {
+  width: calc(100vw * 426 / 1920);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .item {
+    flex: unset;
+
+    .content {
+      width: 100%;
+      margin: calc(100vh * 10 / 1080) 0px 0px calc(100vh * 6 / 1080);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+      }
+
+      .content_top {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 1;
+
+        .icon {
+          margin-left: calc(100vw * 18 / 1920);
+          width: calc(100vw * 48 / 1920);
+          height: calc(100vw * 48 / 1920);
+          background-image: url("../../assets/bigscreen/10.png");
+          background-size: cover;
+          background-repeat: no-repeat;
+          z-index: 3;
+        }
+
+        .icon2 {
+          background-image: url("../../assets/bigscreen/20.png");
+        }
+
+        .icon3 {
+          background-image: url("../../assets/bigscreen/21.png");
+        }
+
+        .label {
+          margin-left: calc(100vw * 18 / 1920);
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          font-size: calc(100vh * 24 / 1080);
+          color: #FFFFFF;
+          text-align: left;
+          font-style: normal;
+          z-index: 3;
+        }
+
+        .num {
+          margin-left: auto;
+          margin-right: calc(100vw * 18 / 1920);
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          font-size: calc(100vh * 32 / 1080);
+          font-style: normal;
+          background: linear-gradient(to bottom, #E6F2FF 0%, #0CB2FF 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          cursor: pointer;
+          z-index: 3;
+        }
+      }
+
+      .content_bottom {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: calc(100vh * 12 / 1080);
+        padding: calc(100vh * 22 / 1080) calc(100vh * 12 / 1080) calc(100vh * 12 / 1080) calc(100vh * 12 / 1080);
+        z-index: 1;
+
+        .content_bottom_item {
+          box-sizing: border-box;
+          height: calc(100vh * 40 / 1080);
+          background: linear-gradient(270deg, rgba(39, 98, 200, 0.33) 0%, rgba(46, 147, 165, 0.24) 100%);
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 calc(100vw * 14 / 1920);
+          font-size: calc(100vh * 14 / 1080);
+          color: #FFFFFF;
+          font-weight: 700;
+          position: relative;
+
+          .num {
+            cursor: pointer;
+          }
+
+          .icon {
+            display: inline-block;
+            vertical-align: middle;
+            width: calc(100vh * 24 / 1080);
+            height: calc(100vh * 24 / 1080);
+            margin-right: calc(100vw * 6 / 1920);
+            background-size: cover;
+            background-repeat: no-repeat;
+          }
+
+          .a {
+            background-image: url("../../assets/bigscreen/65.png");
+          }
+
+          .b {
+            background-image: url("../../assets/bigscreen/66.png");
+          }
+
+          .c {
+            background-image: url("../../assets/bigscreen/67.png");
+          }
+
+          .d {
+            background-image: url("../../assets/bigscreen/68.png");
+          }
+
+          .jly {
+            background-image: url("../../assets/bigscreen/22.png");
+          }
+
+          .zxs {
+            background-image: url("../../assets/bigscreen/23.png");
+          }
+
+          .wxs {
+            background-image: url("../../assets/bigscreen/11.png");
+          }
+
+          .jrs {
+            background-image: url("../../assets/bigscreen/12.png");
+          }
+
+          .gtfh {
+            background-image: url("../../assets/bigscreen/13.png");
+          }
+
+          .zfbz {
+            background-image: url("../../assets/bigscreen/24.png");
+          }
+
+          .zfgc {
+            background-image: url("../../assets/bigscreen/25.png");
+          }
+
+          .clzc {
+            background-image: url("../../assets/bigscreen/26.png");
+          }
+
+          .kszf {
+            background-image: url("../../assets/bigscreen/27.png");
+          }
+
+          .whzf {
+            background-image: url("../../assets/bigscreen/14.png");
+          }
+
+          .zsfz {
+            background-image: url("../../assets/bigscreen/56.png");
+          }
+        }
+      }
+    }
+
+    .equipment_content {
+
+      .content_top {
+        flex: 1;
+      }
+
+      .content_bottom {
+        flex: 2;
+      }
+    }
+  }
+
+  .item:nth-child(1) {
+    height: calc(100vh * 300 / 1080);
+  }
+
+  .item:nth-child(2) {
+    height: calc(100vh * 300 / 1080);
+  }
+
+  .item:nth-child(3) {
+    height: calc(100vh * 400 / 1080);
+  }
+
+}
+
+.right_content {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  .sum {
+    position: absolute;
+    bottom: calc(100vh * 20 / 1080);
+    right: calc(100vw * 24 / 1920);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .sum-text {
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      color: #FFFFFF;
+      font-weight: bold;
+      font-size: calc(100vw * 18 / 1920);
+      line-height: calc(100vw * 24 / 1920);
+    }
+
+    .sum-num {
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      color: #A8E7FF;
+      font-weight: bold;
+      font-size: calc(100vw * 40 / 1920);
+      line-height: calc(100vw * 53 / 1920);
+    }
+  }
+}
+
+.bottom_content {
+  width: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  .bg1 {
+    width: 100%;
+    height: calc(100vw * 36 / 1920);
+    background-image: url("../../assets/bigscreen/62.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 6;
+  }
+
+  .bg2 {
+    width: calc(100vw * 1032 / 1920);
+    height: calc(100vw * 45 / 1920);
+    background-image: url("../../assets/bigscreen/63.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: calc(100vw * 452 / 1920);
+    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+    z-index: 7;
+  }
+
+  .bg3 {
+    width: calc(100vw * 287.87 / 1920);
+    height: calc(100vw * 43.16 / 1920);
+    background-image: url("../../assets/bigscreen/64.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: calc(100vh * 28 / 1080);
+    left: calc(100vw * 816 / 1920);
+    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+    z-index: 7;
+  }
+
+  .content {
+    width: calc(100vw * 800 / 1920);
+    height: calc(100vh * 200 / 1080);
+    box-sizing: border-box;
+    bottom: 0;
+    left: calc(100vw * 555 / 1920);
+    z-index: 6;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+}
+
+.modal {
+  width: 739px;
+  height: 330px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  --border-width: 10px;
+  --border-color: #37E1FF;
+  --corner-size: 55%;
+  background: linear-gradient(135deg, transparent var(--border-width), var(--border-color) 0) top left,
+  linear-gradient(-135deg, transparent var(--border-width), var(--border-color) 0) top right,
+  linear-gradient(0deg, transparent var(--border-width), var(--border-color) 0) bottom right,
+  linear-gradient(0deg, transparent var(--border-width), var(--border-color) 0) bottom left;
+  background-size: var(--corner-size) 50%;
+  background-repeat: no-repeat;
+
+  .icon-bottom-left {
+    width: 24px;
+    height: 24px;
+    background-image: url("../../assets/bigscreen/69.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    z-index: 11;
+  }
+
+  .icon-bottom-right {
+    width: 24px;
+    height: 24px;
+    background-image: url("../../assets/bigscreen/70.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    z-index: 11;
+  }
+}
+
+.modal::after {
+  position: absolute;
+  z-index: 5;
+  --inner-border-width: 1px;
+  width: calc(100% - 2 * var(--inner-border-width));
+  height: calc(100% - 2 * var(--inner-border-width));
+  content: "";
+  display: block;
+  left: var(--inner-border-width);
+  top: var(--inner-border-width);
+
+  --inner-border-color: #10345F;
+  background: linear-gradient(135deg, transparent 10px, var(--inner-border-color) 0) top left,
+  linear-gradient(-135deg, transparent 10px, var(--inner-border-color) 0) top right,
+  linear-gradient(0deg, transparent 10px, var(--inner-border-color) 0) bottom right,
+  linear-gradient(0deg, transparent 10px, var(--inner-border-color) 0) bottom left;
+  background-size: var(--corner-size) 51%;
+  background-repeat: no-repeat;
+}
+
+.enterprise-modal {
+  width: 800px;
+  height: 530px;
+}
+
+.interphone-modal {
+  height: 330px;
+
+  .modal-content {
+    height: 67%;
+  }
+
+}
+
+.modal-top {
+  position: relative;
+  z-index: 7;
+
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 10px;
+    width: 28px !important;
+    height: 28px !important;
+    background-image: url("../../assets/bigscreen/18.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+}
+
+.modal-content {
+  position: relative;
+  z-index: 6;
+  height: 67%;
+  padding: 16px 60px 16px 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.enterprise-modal-content {
+  height: 490px;
+  padding: 16px 60px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .business-table {
+    z-index: 6;
+  }
+
+  .enterprise-query {
+    z-index: 6;
+    width: 100%;
+    height: 124px;
+
+    :deep(.el-form-item__label) {
+      color: #ffffff;
+    }
+
+    :deep(.el-input__wrapper) {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+      box-shadow: unset !important;
+    }
+
+    :deep(.el-input__inner) {
+      color: #FFFFFF;
+    }
+
+    .el-row {
+      justify-content: center;
+
+      .query-btn {
+        width: 94px;
+        height: 36px;
+        margin-left: 20px;
+        background: linear-gradient(180deg, #81E1FF 0%, #2970CE 100%);
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        font-family: MicrosoftYaHei;
+        font-size: 16px;
+        line-height: 21px;
+        color: #FFFFFF;
+        text-align: center;
+        font-style: normal;
+      }
+
+    }
+  }
+
+  .enterprise-info {
+    z-index: 6;
+    width: 100%;
+    height: 248px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+
+    .enterprise-info-item {
+      width: calc(50% - 10px);
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.10);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+
+      .v-label {
+        width: 32%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        background: rgba(9, 63, 113, 0.70);
+        border: 1px solid rgba(0, 106, 198, 0.3);
+        border-radius: 8px;
+      }
+
+      .text {
+        width: 68%;
+        display: flex;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        border-radius: 8px;
+        margin: 0px 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+    }
+
+  }
+
+  .enterprise-info2 {
+    z-index: 6;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .enterprise-info-item2 {
+      width: 99.6%;
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.10);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+
+      .v-label {
+        width: 28%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        background: rgba(9, 63, 113, 0.70);
+        border: 1px solid rgba(0, 106, 198, 0.3);
+        border-radius: 8px;
+      }
+
+      .text {
+        width: 72%;
+        display: flex;
+        align-items: center;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 14px;
+        font-weight: 700;
+        color: #fff;
+        border-radius: 8px;
+        margin: 0px 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+    }
+  }
+
+  .table {
+    z-index: 6;
+    margin-top: 16px;
+    height: 100%;
+  }
+
+}
+
+.video-content {
+  width: 50%;
+  height: 240px;
+}
+
+.device-info {
+  width: 50%;
+  height: 240px;
+  margin-left: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  .device-info-item {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.10);
+    border: 1px solid rgba(0, 106, 198, 0.3);
+
+    .v-label {
+      width: 32%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: calc(100vw * 14 / 1920);
+      font-weight: 700;
+      color: #fff;
+      background: rgba(9, 63, 113, 0.70);
+      border: 1px solid rgba(0, 106, 198, 0.3);
+      border-radius: 8px;
+    }
+
+    .text {
+      width: 68%;
+      display: flex;
+      align-items: center;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      font-weight: 700;
+      color: #fff;
+      border-radius: 8px;
+      margin: 0px 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+  }
+
+}
+
+.modal-btn {
+  position: relative;
+  z-index: 6;
+  height: 20%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .sound-btn,
+  .video-btn {
+    width: 94px;
+    height: 36px;
+    margin-left: 20px;
+    background: linear-gradient(180deg, #81E1FF 0%, #2970CE 100%);
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-family: MicrosoftYaHei;
+    font-size: 16px;
+    line-height: 21px;
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+  }
+
+  .video-btn {
+    background: #1D4B7E;
+  }
+}
+
+:deep(.total) {
+  color: #ffffff !important;
+}
+
+/* 弹窗过渡动画 */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-active .modal,
+.modal-fade-leave-active .modal {
+  transition: transform 0.3s,
+  opacity 0.3s;
+}
+
+.modal-fade-enter-from .modal,
+.modal-fade-leave-to .modal {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+</style>
diff --git a/client/src/views/common/MultipleFile.vue b/client/src/views/common/MultipleFile.vue
new file mode 100644
index 0000000..0390eac
--- /dev/null
+++ b/client/src/views/common/MultipleFile.vue
@@ -0,0 +1,180 @@
+<template>
+  <el-card :class="mergeParameters.cardClass">
+    <div class="clearfix" style="display: flex; align-items: center; justify-content: space-between;">
+      <span><span style="color: red;" v-if="mergeParameters.required">*</span>{{ mergeParameters.title }}</span>
+      <el-upload
+          ref="upload"
+          :show-file-list="false"
+          :action="mergeParameters.url"
+          :multiple="mergeParameters.multiple"
+          :auto-upload="mergeParameters.autoUpload"
+          :on-error="mergeFileActions.error"
+          :on-change="mergeFileActions.change"
+          :on-success="mergeFileActions.success"
+          :headers="mergeParameters.headers">
+        <el-button v-if="mergeParameters.mode !== 'detail' && mergeParameters.isShowBtn" slot="trigger" type="primary">
+          <template #icon>
+            <font-awesome-icon icon="upload"/>
+          </template>
+          选择文件
+        </el-button>
+      </el-upload>
+    </div>
+    <div>
+      <el-table :data="tableData" border style="width: 100%; padding-top: 5px;">
+        <el-table-column fixed prop="name" :label="mergeParameters.tableTitle + '名称'"/>
+        <el-table-column v-if="mergeParameters.isShowType" fixed prop="type"
+                         :label="mergeParameters.tableTitle + '文件类型'" width="200" align="center"></el-table-column>
+        <el-table-column v-if="mergeParameters.autoUpload" fixed prop="uploadStatus"  width="100" label="上传状态"></el-table-column>
+        <el-table-column fixed="right" label="操作" width="120" align="center" class-name="control-column">
+          <template #default="scope">
+            <el-space>
+              <el-link type="primary" v-if="isDowload(scope.row)" size="small" @click="downloadFile(scope.row)">
+                {{ isPicture(scope.row.name) ? '查看' : '下载' }}
+              </el-link>
+              <el-link type="primary" size="small" v-if="mergeParameters.mode !== 'detail'"
+                       @click="deleteRow(scope.$index, tableData,scope.row)">
+                删除
+              </el-link>
+            </el-space>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <PictureView ref="pictureViewRef"/>
+  </el-card>
+</template>
+
+<script setup>
+
+import {computed, defineEmits, defineProps, reactive, ref} from "vue"
+import {merge} from "lodash"
+import {ElMessage} from "element-plus"
+import PictureView from "@pages/common/PictureView.vue";
+const pictureViewRef = ref(null)
+const props = defineProps({
+  parameters: {
+    type: Object,
+    default: () => ({})
+  },
+  fileActions: {
+    type: Object,
+  },
+  filesData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const onError = (err, file, fileList) => { // 文件上传失败时的钩子
+  ElMessage.error('上传失败!' + err)
+}
+
+const deleteRow = (index, fileList ,row) => { // 点击删除时的方法
+  const source = Object.assign([], fileList)
+  let id = fileList[index].id// 记录删除的ID
+  fileList.splice(index, 1)
+  emit('on-remove', fileList, id, {index: index, source: source},row)
+}
+
+const viewPicture = (scope) => { // 预览图片
+}
+
+const isPicture = (fileName) => { // 是否是图片
+  return /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)
+}
+
+const isDowload = (file) => { // 是否显示下载按钮
+  return mergeParameters.mode !== 'add' && file.url
+}
+
+const downloadFile = (row) => { // 下载文件
+  if (row && row.downloadUrl) {
+    if (/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(row.type) || /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(row.name)) {
+      pictureViewRef.value.viewPicture(row.downloadUrl)
+    } else {
+      window.open(row.downloadUrl)
+    }
+  }
+}
+
+const onChange = (file, fileList) => { // 文件上传时的钩子
+  emit('on-change', file)
+}
+
+const onSuccess = (response, file, fileList) => { // 文件上传成功时的钩子
+  let data = response.data
+  data.bz = mergeParameters.autoUpload ? mergeParameters.title : fileMap[file.uid] ? fileMap[file.uid] : '' // 当自动上传时，上传文件备注默认为标题
+  data.fileType = mergeParameters.fileType
+  if (response.result === 'success') {
+    data.uploadStatus = '上传成功'
+    if (mergeParameters.autoUpload) { // 自动上传
+      emit('on-success', data, file)
+    } else { // 手动上传回调
+      data.uid = file.uid
+      emit('on-manual-success', data)
+    }
+  } else {
+    ElMessage.error('上传失败!:'+response.msg)
+  }
+}
+
+const defaultParameters = {
+  headers: {},
+  url: null,
+  title: '文件上传',
+  tableTitle: '材料',
+  autoUpload: false,
+  required: true,
+  multiple: true,
+  mode: 'add',
+  isShowBtn: true,
+  isShowType: true,
+  fileType: '',
+  cardClass: 'box-card'
+}
+
+const defaultFileActions = {
+  error: onError,
+  change: onChange,
+  success: onSuccess
+}
+
+const fileMap = reactive(merge({}))
+const mergeParameters = reactive(merge({}, defaultParameters, props.parameters))
+const mergeFileActions = reactive(merge({}, defaultFileActions, props.fileActions))
+
+const emit = defineEmits(['on-remove', 'on-success', 'on-manual-success', 'update:actions'])
+
+const mergeActions = reactive(merge({}, defaultFileActions, props.actions))
+emit('update:actions', mergeActions)
+
+const tableData = computed(() => {
+  let arr = []
+  for (let data of props.filesData) {
+    arr.push(data)
+  }
+  return arr
+})
+
+</script>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+}
+
+.linkFix {
+  .el-link {
+    margin-right: 10px !important;
+  }
+}
+
+:deep(.el-table) {
+  padding-top: 0px !important;
+}
+
+:deep(.el-card__body) {
+  padding: 10px 20px;
+}
+</style>
diff --git a/client/src/views/common/MultiplePicture.vue b/client/src/views/common/MultiplePicture.vue
new file mode 100644
index 0000000..efb514e
--- /dev/null
+++ b/client/src/views/common/MultiplePicture.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="pic-div">
+    <el-upload v-if="mergeParameters.mode !== 'detail'"
+               :action="mergeParameters.url"
+               list-type="picture-card"
+               :multiple="mergeParameters.multiple"
+               :headers="mergeParameters.headers"
+               :auto-upload="mergeParameters.autoUpload"
+               :limit="mergeParameters.limit"
+               :on-preview="handlePictureCardPreview"
+               :on-remove="handleRemove"
+               :on-change="handleChange"
+               :on-success="onSuccess"
+               :on-error="onError"
+               :on-exceed="handleExceed"
+               :file-list="pictureList"
+               accept="image/gif,image/jpg,image/jpeg,image/png,image/GIF,image/JPG">
+      <el-icon>
+        <Plus/>
+      </el-icon>
+    </el-upload>
+    <el-upload v-if="mergeParameters.mode === 'detail'"
+               class="noUpOnly"
+               action="#"
+               list-type="picture-card"
+               :auto-upload="mergeParameters.autoUpload"
+               :on-preview="handlePictureCardPreview"
+               :file-list="pictureList">
+      <template #file="{ file }">
+        <img style="width: 148px; height: 148px;" class="el-upload-list__item-thumbnail" :src="file.url">
+        <div v-if="file.name">
+          <el-tooltip effect="dark" :content="file.name">
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+              <el-icon><zoom-in/></el-icon>
+            </span>
+            <span class="el-upload-list__item-delete" @click="handleDownload(file)">
+              <el-icon><Download/></el-icon>
+            </span>
+          </span>
+          </el-tooltip>
+        </div>
+        <div v-else>
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+              <el-icon><zoom-in/></el-icon>
+            </span>
+            <span class="el-upload-list__item-delete" @click="handleDownload(file)">
+              <el-icon><Download/></el-icon>
+            </span>
+          </span>
+        </div>
+      </template>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+    <PictureView ref="pictureViewRef"/>
+  </div>
+</template>
+
+<script setup>
+
+import {ElMessage} from "element-plus"
+import {defineEmits, defineProps, reactive, toRefs, ref, watch, toRaw} from "vue"
+import {merge} from "lodash"
+import PictureView from "@pages/common/PictureView.vue"
+import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'
+import {useUserStore} from "@/stores/modules/user.js"
+
+const userStore = useUserStore()
+const props = defineProps({
+  parameters: {
+    type: Object,
+    default: () => ({})
+  },
+  formData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const state = reactive({
+  dialogImageUrl: '',
+  dialogVisible: false,
+  pictureList: [],
+  disabled: false,
+  mpNum: 0,
+  modifyFileList: []
+})
+const pictureViewRef = ref(null)
+
+const {
+  dialogImageUrl,
+  dialogVisible,
+  pictureList,
+  disabled
+} = toRefs(state)
+
+const defaultParameters = {
+  mode: 'add',
+  isAddCallback: true,
+  isModifyCallback: true,
+  multiple: true,
+  autoUpload: false,
+  limit: 5,
+  limitSize: 2,
+  industryCategory: 'PUB',
+  displayMsg: false,
+  specialTreatment: false,
+  backPic: false,
+  headers: {'industry-category': 'PUB', 'Authorization': `Bearer ${userStore.token}`},
+  url: '/api/uploads'
+}
+
+const mergeParameters = reactive(merge({}, defaultParameters, props.parameters))
+const emit = defineEmits(['on-remove', 'on-success', 'del-picture-id', 'on-change', 'on-pic-view', 'on-remove'])
+
+function onSuccess(res, file, fileList) {
+  if (mergeParameters.autoUpload) {
+    emit('on-success', res.data, file, props.formData)
+  } else
+    emit('on-success', fileList)
+}
+
+function onError(res) {
+  ElMessage.error('上传失败：', res)
+}
+
+function handleChange(file, fileList) {
+  file.status = 'success'
+  emit('on-change', file, fileList, props.formData)
+  if(!mergeParameters.autoUpload)
+    pictureList.value = fileList
+}
+
+function handleRemove(file, fileList) { // 这里的file.id是已经存在服务器中的文件
+  pictureList.value = fileList
+  if (file.id) {
+    emit('del-picture', file, props.formData)
+  }
+  emit('on-remove', file, props.formData)
+}
+
+function handlePictureCardPreview(file) {
+  if (mergeParameters.backPic)
+    emit('on-pic-view', file.url, pictureList.value.map(o => o.url))
+  else
+    pictureViewRef.value.viewPicture(file.url, pictureList.value.map(o => o.url))
+}
+
+function handleDownload(file) { // 下载文件
+  if (file && file.url) {
+    window.open(file.url)
+  }
+}
+
+function handleExceed(files, fileList) {
+  ElMessage.warning(`当前限制选择 ${mergeParameters.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+}
+
+pictureList.value = props.formData?.urls || []
+
+</script>
+<style>
+
+.pic-div {
+  .el-upload-list__item-thumbnail, .el-upload-list__item-actions, .el-upload-list__item, .el-upload--picture-card {
+    object-fit: initial;
+  }
+}
+
+.noUpOnly div.el-upload--picture-card {
+  display: none;
+}
+
+</style>
diff --git a/client/src/views/common/PictureView.vue b/client/src/views/common/PictureView.vue
new file mode 100644
index 0000000..f7463c0
--- /dev/null
+++ b/client/src/views/common/PictureView.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="pic_image__preview">
+    <el-image ref="imageRef"
+              style="width: 0px; height: 0px"
+              :src="src"
+              :preview-src-list="srcList">
+    </el-image>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref, toRefs} from "vue"
+import defPic from '@/assets/image/pic.gif'
+
+const state = reactive({
+  src: defPic,
+  srcList: [defPic]
+})
+const {src, srcList} = toRefs(state)
+
+const imageRef = ref(null)
+
+function viewPicture(url, urls) {
+  if (urls && urls.length > 1) srcList.value = urls
+  else if (url) srcList.value = [url]
+  imageRef.value.$el.querySelector('img').click()
+}
+
+defineExpose({
+  viewPicture
+})
+
+</script>
+
+<style>
+.el-icon-circle-close {
+  color: red !important;
+}
+</style>
diff --git a/client/src/views/common/SignatureComponent.vue b/client/src/views/common/SignatureComponent.vue
new file mode 100644
index 0000000..6d59da5
--- /dev/null
+++ b/client/src/views/common/SignatureComponent.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-dialog :open="modelValue" title="在线签名" :show-footer="false" type="medium" @update:open="handleClose">
+  <div class="signature-container">
+      <canvas
+        ref="canvasRef"
+        class="signature-canvas"
+        width="800"
+        height="300"
+        @mousedown="startDrawing"
+        @mousemove="draw"
+        @mouseup="stopDrawing"
+        @mouseleave="stopDrawing"/>
+      <div class="signature-actions">
+        <el-button type="danger" @click="clearCanvas">清除</el-button>
+        <el-button type="primary" @click="saveSignature">保存签名</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import ElDialog from "@/components/ElDialog/index.vue"
+import { ref, onMounted, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'save', dataUrl: string): void
+}>()
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+let isDrawing = false
+let lastX = 0
+let lastY = 0
+let ctx: CanvasRenderingContext2D | null = null
+
+// 初始化画布
+const initCanvas = () => {
+  if (canvasRef.value) {
+    const canvas = canvasRef.value
+    ctx = canvas.getContext('2d')
+    if (ctx) {
+      ctx.strokeStyle = '#000'
+      ctx.lineWidth = 4
+      ctx.lineJoin = 'round'
+      ctx.lineCap = 'round'
+      clearCanvas()
+    }
+  }
+}
+
+// 开始绘制
+const startDrawing = (e: MouseEvent) => {
+  if (!ctx) return
+  isDrawing = true
+  ;[lastX, lastY] = [e.offsetX, e.offsetY]
+}
+
+// 绘制过程
+const draw = (e: MouseEvent) => {
+  if (!isDrawing || !ctx) return
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(e.offsetX, e.offsetY)
+  ctx.stroke()
+  ;[lastX, lastY] = [e.offsetX, e.offsetY]
+}
+
+// 停止绘制
+const stopDrawing = () => {
+  isDrawing = false
+}
+
+// 清除画布
+const clearCanvas = () => {
+  if (canvasRef.value && ctx) {
+    ctx.fillStyle = '#fff'
+    ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  }
+}
+
+// 保存签名
+const saveSignature = () => {
+  if (canvasRef.value) {
+    const dataUrl = canvasRef.value.toDataURL('image/png')
+    emit('save', dataUrl)
+    handleClose()
+  }
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+// 监听弹窗打开状态，初始化画布
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      setTimeout(() => {
+        initCanvas()
+      }, 100)
+    }
+  }
+)
+
+onMounted(() => {
+  initCanvas()
+})
+</script>
+
+<style scoped lang="scss">
+.signature-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.signature-canvas {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  cursor: crosshair;
+}
+
+.signature-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>
\ No newline at end of file