更新页面

src/components/aboutTable/MyTable.vue

@@ -7,8 +7,9 @@
       :load="load" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
       :highlight-current-row="getConfiger.showSelectType === 'radio'"
       :row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
-      <el-table-column style="width: 55px" type="selection" width="55"
+
-        v-if="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
+      <el-table-column style="width: 55px" type="selection" width="55" v-if="getConfiger.showSelectType" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
+
       <el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
 
       <el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"

src/layout/components/SideBar/SideBarItem.vue

@@ -6,7 +6,6 @@
     <!---循环渲染--->
     <SideBarItem v-for="item in route.children" :key="item.path" :route="item"></SideBarItem>
   </el-sub-menu>
-
   <el-menu-item v-else :index="route.path">
     <MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
   </el-menu-item>

src/layout/components/SideBar/SideBarMenu.vue

@@ -59,7 +59,7 @@ const activeMenu = computed(() => {
   background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
   margin: 0 14px;
   border-radius: 4px;
-  padding-left: 26px !important;
+  // padding-left: 46px !important;
 }
 ::v-deep .el-sub-menu .el-menu-item {
   height: 48px;

src/layout/components/SideBar/index.vue

@@ -3,7 +3,6 @@
     <div class="meunAside noScollLine">
       <div style="height:100px"></div>
       <div style="height: calc(100% - 100px);"><SideBarMenu></SideBarMenu></div>
-      
     </div>
   </el-scrollbar>
 </template>

src/router/index.js

@@ -36,8 +36,7 @@ export const publicRoutes = [
       {
         path: "/user/department-ist",
         name: "departmentList",
-        component: () =>
+        component: () => import("@/views/backOfficeSystem/systemConfig/department-list/index"),
-          import("@/views/backOfficeSystem/systemConfig/department-list/index"),
         meta: {
           title: "部门管理",
           icon: "article-ranking"
@@ -172,14 +171,59 @@ export const publicRoutes = [
   },
   {
     path: "/editPassword", // 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
-    component: layout,
     redirect: "/IdentityManage",
+    component: layout,
     children: [
        {
         path: "/FourColorWarning",
         name: "FourColorWarning",
         meta: { title: "四色预警管理", icon: "article" },
         children: [
+          {
+            path: "/warningControl",
+            name: "warningControl",
+            meta: { title: "预警中心", icon: "article" },
+            redirect: "/warningControl/centerHome",
+            children: [
+              {
+                path: "/centerHome",
+                name: "centerHome",
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/index"),
+                meta: { title: "预警中心大屏", icon: "article" },
+              },
+              {
+                path: "/warningBk",
+                name: "warningBk",
+                meta: { title: "布控预警", icon: "article" },
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/warningBk/index"),
+              },
+              {
+                path: "/behaviorWarning",
+                name: "behaviorWarning",
+                meta: { title: "行为预警", icon: "article" },
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/index"),
+              },
+              {
+                path: "/identityWarning",
+                name: "identityWarning",
+                meta: { title: "身份预警", icon: "article" },
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/identityWarning/index"),
+              },
+              {
+                path: "/combinedWarning",
+                name: "combinedWarning",
+                meta: { title: "组合预警", icon: "article" },
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/combinedWarning/index"),
+              },
+              {
+                path: "/modelWarning",
+                name: "modelWarning",
+                meta: { title: "模型预警", icon: "article" },
+                component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/modelWarning/index"),
+              },
+            ]
+
+          },
           {
             path: "/IdentityManage",
             name: "IdentityManage",
@@ -217,45 +261,25 @@ export const publicRoutes = [
             }
           },
           {
-            path: "/warningControl",
-            name: "warningControl",
-            component: () => import("@/views/backOfficeSystem/IntelligentControl/warningControl/index"),
-            meta: {
-              title: "预警中心",
-              icon: "article"
-            }
-          }, {
             path: "/warningList",
             name: "warningList",
             component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/index"),
             meta: {
-              title: "预警列表",
+              title: "布控预警列表",
-              icon: "article"
-            }
-          },
-          {
-            path: "/WarningModel",
-            name: "WarningModel",
-            component: () =>
-              import(
-                "@/views/backOfficeSystem/ExcavationResearch/WarningModel/index"
-              ),
-            meta: {
-              title: "重点人员预警模型",
-              icon: "article"
-            }
-          }, {
-            path: "/policeReport",
-            name: "policeReport",
-            component: () =>
-              import(
-                "@/views/backOfficeSystem/policeReport/index.vue"
-              ),
-            meta: {
-              title: "警情管理",
               icon: "article"
             }
           },
+          // 暂时取消
+          // {
+          //   path: "/WarningModel",
+          //   name: "WarningModel",
+          //   component: () =>import("@/views/backOfficeSystem/ExcavationResearch/WarningModel/index"),
+          //   meta: {
+          //     title: "重点人员预警模型",
+          //     icon: "article"
+          //   }
+          // },
+          
         ]
       },
       {
@@ -316,15 +340,24 @@ export const publicRoutes = [
             }
           },
           {
-            path: "/MoralAnalysis",
+            path: "/ssemanticAnalysis",
-            name: "MoralAnalysis",
+            name: "semanticAnalysis",
-            component: () => import("@/views/backOfficeSystem/ResearchJudgment/MoralAnalysis/index"),
+            component: () => import( "@/views/backOfficeSystem/SemanticAnalysis/index.vue"),
             meta: {
-              title: "情报语义分析",
+              title: "语义分析",
               icon: "article"
             }
           },
-
+          // 暂时不要
+          // {
+          //   path: "/MoralAnalysis",
+          //   name: "MoralAnalysis",
+          //   component: () => import("@/views/backOfficeSystem/ResearchJudgment/MoralAnalysis/index"),
+          //   meta: {
+          //     title: "情报语义分析",
+          //     icon: "article"
+          //   }
+          // },
           {
             path: "/IntelligenceManagement",
             name: "IntelligenceManagement",
@@ -448,8 +481,17 @@ export const publicRoutes = [
       {
         path: "/ExcavationResearch",
         name: "ExcavationResearch",
-        meta: { title: "重点人发掘研判", icon: "article" },
+        meta: { title: "重点人发掘系统", icon: "article" },
         children: [
+          {
+            path: "/tsypHome",
+            name: "tsypHome",
+            component: () => import("@/views/backOfficeSystem/JudgmentHome/tsypHome/index"),
+            meta: {
+              title: "重点人员模型管理",
+              icon: "article"
+            }
+          },
           {
             path: "/PreliminaryExcavations",
             name: "PreliminaryExcavations",
@@ -502,25 +544,17 @@ export const publicRoutes = [
             name: "ResearchHome",
             component: () => import("@/views/backOfficeSystem/JudgmentHome/ResearchHome/index"),
             meta: {
-              title: "专题研判",
+              title: "战术研判",
-              icon: "article"
-            }
-          },
-          {
-            path: "/tsypHome",
-            name: "tsypHome",
-            component: () => import("@/views/backOfficeSystem/JudgmentHome/tsypHome/index"),
-            meta: {
-              title: "模型管理",
               icon: "article"
             }
           },
+          
           {
             path: "/situationHome",
             name: "situationHome",
             component: () => import("@/views/backOfficeSystem/JudgmentHome/situationHome/index"),
             meta: {
-              title: "研判态势",
+              title: "战略研判",
               icon: "article"
             }
           },
@@ -634,22 +668,19 @@ export const publicRoutes = [
             path: "/experienceShare",
             name: "experienceShare",
             component: () =>
-              import(
+              import("@/views/backOfficeSystem/BasicManagement/experienceShare/index"),
-                "@/views/backOfficeSystem/BasicManagement/experienceShare/index"
-              ),
             meta: {
               title: "经验分享",
               icon: "article"
             }
-          }, {
+          }, 
-            path: "/ssemanticAnalysis",
+          
-            name: "semanticAnalysis",
+          {
-            component: () =>
+            path: "/policeReport",
-              import(
+            name: "policeReport",
-                "@/views/backOfficeSystem/SemanticAnalysis/index.vue"
+            component: () =>import("@/views/backOfficeSystem/policeReport/index.vue"),
-              ),
             meta: {
-              title: "语义分析",
+              title: "警情管理",
               icon: "article"
             }
           },

src/views/backOfficeSystem/JudgmentHome/tsypHome/components/regulation.vue

@@ -23,7 +23,7 @@
 <script setup>
 import { reactive, ref } from 'vue'
 import FormMessage from "@/components/aboutTable/FormMessage.vue";
-import { VueDraggable } from 'vue-draggable-plus'
+// import { VueDraggable } from 'vue-draggable-plus'
 const dialogForm = ref(false)
 const title = ref("新增")
 const init = (type, row) => {

src/views/backOfficeSystem/JudgmentHome/tsypHome/components/ypHome.vue

@@ -11,11 +11,9 @@
     <div ref="searchBox">
       <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
     </div>
-    <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }"
+    <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }" v-loading="loading">
-      v-loading="loading">
       <li class="cntItem" v-for="(it, idx) in 10" :key="idx">
-        <div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;"
+        <div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
-            src="@/assets/images/mxbg.jpg" alt=""></div>
         <div class="foot">
           <span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
               <Document />
@@ -79,7 +77,7 @@ const onSearch = (val) => {
 const load = () => {
   if (total.value == list.value.length) return;
   PaginationConfig.pageCurrent++;
-  getLits();
+  // getLits();
 }
 const getLits = () => {
   let params = {

src/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/components/detail.vue

@@ -0,0 +1,48 @@
+<template>
+    <el-dialog title="行为详情次数详情（1）" v-model="dialogVisible" width="60%">
+        <MyTable
+            :tableData="pageData.tableData"
+            :tableColumn="pageData.tableColumn"
+            :tableHeight="pageData.tableHeight"
+            :key="pageData.keyCount"
+            :tableConfiger="pageData.tableConfiger"
+        >
+      </MyTable>
+    </el-dialog>
+</template>
+
+<script setup>
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { ref , reactive  , defineExpose} from 'vue'
+const dialogVisible = ref(false)
+const pageData = reactive({
+  tableData: [{jqbh:'JQBH-43',bjr:'张三',bjrdh:'15665255545',bjrsfzh:'510156565656525565',yjnr:'xxxxxxxxx',jsj:'2023-08-24 15:00:00'}], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    loading: false,
+    haveControls: false,
+  },
+  tableHeight:600,
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  tableColumn: [
+    { label: "警情编号", prop: "jqbh"},
+    { label: "报警人", prop: "bjr" },
+    { label: "报警人电话", prop: "bjrdh" },
+    { label: "报警人身份证", prop: "bjrsfzh"},
+    { label: "预警内容", prop: "yjnr",  showOverflowTooltip: true },
+    { label: "报警时间", prop: "jsj",  showOverflowTooltip: true },
+  ]
+});
+const init = (row) => {
+  dialogVisible.value = true
+}
+
+defineExpose({
+  init
+})
+</script>

src/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="行为预警">
+        <el-button type="primary">
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+      >
+      <template #xwcs="{ row }">
+        <span style="color: #0072ff;" @click="handleClick(row)">{{ row.xwcs }}</span>
+      </template>
+
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </div>
+  <!-- 详情 -->
+   <Detail ref="detailRef"></Detail>
+</template>
+
+<script setup>
+import Detail from './components/detail.vue'
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted } from "vue";
+const searchBox = ref(); //搜索框
+const searchConfiger = ref(
+  [
+  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
+  { label: "电话号码", prop: 'dh', placeholder: "请输入电话号码", showType: "input"},
+]);
+const detailRef = ref()
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [
+    { xwcs:12 ,xm:'张三' ,sfzh:'510156565656525565',dh:'15665255545',xwfz:'20',xwms:'xxxxxxxxx',xwdl:'xxxxxxx',xwzl:'xxxxxxx'}
+  ], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  tableColumn: [
+    { label: "姓名", prop: "xm"},
+    { label: "身份证号", prop: "sfzh" },
+    { label: "电话", prop: "dh" },
+    { label: "行为大类", prop: "xwdl"},
+    { label: "行为子类", prop: "xwzl",  showOverflowTooltip: true },
+    { label: "行为描述", prop: "xwms",  showOverflowTooltip: true },
+    { label: "行为次数", prop: "xwcs",showSolt: true  },
+    { label: "行为分值", prop: "xwfz",},
+  ]
+});
+onMounted(() => {
+  tabHeightFn();
+  getList()
+});
+// 搜索
+const onSearch = (val) =>{
+  queryFrom.value = {...val}
+  pageData.pageConfiger.pageCurrent = 1;
+  getList()
+}
+const changeNo = (val) =>{
+  pageData.pageConfiger.pageCurrent = val;
+  getList()
+}
+const changeSize = (val) =>{
+  pageData.pageConfiger.pageSize = val;
+  getList()
+}
+const getList = () =>{
+//   pageData.tableConfiger.loading = true;
+//   qcckGet(queryFrom.value,'/mosty-gsxt/behaviorWarning/selectPage').then((res)=>{
+//     pageData.total = res.total || 0;
+//     pageData.tableConfiger.loading = false;
+//   }).catch(()=>{
+//     pageData.tableConfiger.loading = false;
+//   })
+}
+
+const handleClick = (row) => {
+  detailRef.value.init(row)
+}
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () { tabHeightFn();  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/fourColorManage/warningControl/centerHome/index.vue

@@ -218,7 +218,7 @@ const init = () => {
 }
 
 const seeMoreFn = () => {
-  router.push('/ControlApproval')
+  router.push('/warningList')
 }
 const showDialog = ref(false)
 const itemData = ref()

src/views/backOfficeSystem/fourColorManage/warningControl/combinedWarning/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="组合预警">
+        <el-button>
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+      >
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance();
+const searchBox = ref();
+
+// 搜索配置
+const searchConfiger = ref([
+  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
+  { label: "预警等级", prop: 'yjdj', placeholder: "请选择预警等级", showType: "select", options: [
+    { label: "一级预警", value: "1" },
+    { label: "二级预警", value: "2" },
+    { label: "三级预警", value: "3" },
+    { label: "四级预警", value: "4" }
+  ]},
+]);
+
+const queryFrom = ref({});
+
+// 页面数据
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  },
+  controlsWidth: 160,
+  tableColumn: [
+    { label: "姓名", prop: "xm" },
+    { label: "身份证号", prop: "sfzh"  },
+    { label: "电话", prop: "dh" },
+    { label: "组合类型", prop: "zhlx" },
+    { label: "预警等级", prop: "yjdj" },
+    { label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
+    { label: "预警时间", prop: "yjsj"  },
+    { label: "处理状态", prop: "clzt" },
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  getList();
+});
+
+const onSearch = (val) => {
+  queryFrom.value = {...val};
+  pageData.pageConfiger.pageCurrent = 1;
+  getList();
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+
+const getList = () => {
+  // pageData.tableConfiger.loading = true;
+  // TODO: 替换为实际的组合预警API接口
+  // qcckGet(queryFrom.value, '/mosty-gsxt/combinedWarning/selectPage').then((res) => {
+  //   pageData.tableData = res.records || [];
+  //   pageData.total = res.total || 0;
+  //   pageData.tableConfiger.loading = false;
+  // }).catch(() => {
+  //   pageData.tableConfiger.loading = false;
+  // });
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/fourColorManage/warningControl/identityWarning/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="身份预警">
+        <el-button>
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+      >
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance();
+const searchBox = ref();
+
+// 搜索配置
+const searchConfiger = ref([
+  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
+  { label: "身份类型", prop: 'sflx', placeholder: "请选择身份类型", showType: "select", options: [
+    { label: "重点人员", value: "1" },
+    { label: "在逃人员", value: "2" },
+    { label: "涉毒人员", value: "3" },
+    { label: "涉恐人员", value: "4" }
+  ]},
+]);
+
+const queryFrom = ref({});
+
+// 页面数据
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  },
+  controlsWidth: 160,
+  tableColumn: [
+    { label: "姓名", prop: "xm",},
+    { label: "身份证号", prop: "sfzh", },
+    { label: "电话", prop: "dh", },
+    { label: "身份类型", prop: "sflx",},
+    { label: "身份等级", prop: "sfdj",},
+    { label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
+    { label: "预警时间", prop: "yjsj",},
+    { label: "处理状态", prop: "clzt",},
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  getList();
+});
+
+const onSearch = (val) => {
+  queryFrom.value = {...val};
+  pageData.pageConfiger.pageCurrent = 1;
+  getList();
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+
+const getList = () => {
+  // pageData.tableConfiger.loading = true;
+  // TODO: 替换为实际的身份预警API接口
+  // qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
+  //   pageData.tableData = res.records || [];
+  //   pageData.total = res.total || 0;
+  //   pageData.tableConfiger.loading = false;
+  // }).catch(() => {
+  //   pageData.tableConfiger.loading = false;
+  // });
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/fourColorManage/warningControl/modelWarning/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="模型预警">
+        <el-button>
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+      >
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance();
+const searchBox = ref();
+
+// 搜索配置
+const searchConfiger = ref([
+  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
+  { label: "模型类型", prop: 'mxlx', placeholder: "请选择模型类型", showType: "select", options: [
+    { label: "行为模型", value: "1" },
+    { label: "身份模型", value: "2" },
+    { label: "关系模型", value: "3" },
+    { label: "轨迹模型", value: "4" }
+  ]},
+]);
+
+const queryFrom = ref({});
+
+// 页面数据
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  },
+  controlsWidth: 160,
+  tableColumn: [
+    { label: "序号", prop: "xh" },
+    { label: "姓名", prop: "xm" },
+    { label: "身份证号", prop: "sfzh" },
+    { label: "电话", prop: "dh", },
+    { label: "模型类型", prop: "mxlx" },
+    { label: "模型名称", prop: "mxmc",  },
+    { label: "预警原因", prop: "yjyy",  showOverflowTooltip: true },
+    { label: "预警时间", prop: "yjsj" },
+    { label: "处理状态", prop: "clzt" },
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  getList();
+});
+
+const onSearch = (val) => {
+  queryFrom.value = {...val};
+  pageData.pageConfiger.pageCurrent = 1;
+  getList();
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+
+const getList = () => {
+  // pageData.tableConfiger.loading = true;
+  // TODO: 替换为实际的模型预警API接口
+  // qcckGet(queryFrom.value, '/mosty-gsxt/modelWarning/selectPage').then((res) => {
+  //   pageData.tableData = res.records || [];
+  //   pageData.total = res.total || 0;
+  //   pageData.tableConfiger.loading = false;
+  // }).catch(() => {
+  //   pageData.tableConfiger.loading = false;
+  // });
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/fourColorManage/warningControl/warningBk/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="预警布控">
+        <el-button>
+          <span style="vertical-align: middle">导出</span>
+        </el-button>
+      </PageTitle>
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+      >
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance();
+const searchBox = ref();
+
+// 搜索配置
+const searchConfiger = ref([
+  { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
+  { label: "身份类型", prop: 'sflx', placeholder: "请选择身份类型", showType: "select", options: [
+    { label: "重点人员", value: "1" },
+    { label: "在逃人员", value: "2" },
+    { label: "涉毒人员", value: "3" },
+    { label: "涉恐人员", value: "4" }
+  ]},
+]);
+
+const queryFrom = ref({});
+
+// 页面数据
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  },
+  controlsWidth: 160,
+  tableColumn: [
+    { label: "姓名", prop: "xm",},
+    { label: "身份证号", prop: "sfzh", },
+    { label: "电话", prop: "dh", },
+    { label: "身份类型", prop: "sflx",},
+    { label: "身份等级", prop: "sfdj",},
+    { label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
+    { label: "预警时间", prop: "yjsj",},
+    { label: "处理状态", prop: "clzt",},
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  getList();
+});
+
+const onSearch = (val) => {
+  queryFrom.value = {...val};
+  pageData.pageConfiger.pageCurrent = 1;
+  getList();
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+
+const getList = () => {
+//   pageData.tableConfiger.loading = true;
+  // TODO: 替换为实际的身份预警API接口
+//   qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
+//     pageData.tableData = res.records || [];
+//     pageData.total = res.total || 0;
+//     pageData.tableConfiger.loading = false;
+//   }).catch(() => {
+//     pageData.tableConfiger.loading = false;
+//   });
+};
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/backOfficeSystem/systemConfig/useQk/pie.vue

@@ -104,7 +104,6 @@ function lineChartFn() {
   window.onresize = function () {
     myChart.resize();
   };
-  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
 }
 onMounted(() => {
   lineChartFn();

src/views/home/dialog/components/popupWarning.vue

@@ -10,7 +10,7 @@
 
 </template>
 <script setup>
-import YjItem from "@/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue";
+import YjItem from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/yjItem.vue";
 import { ref, defineProps, onMounted, watch } from "vue";
 import emitter from "@/utils/eventBus.js";
 //参数传递

src/views/home/echarts/barHatEcharts copy.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { nextTick , onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'barHatId'
+  },
+  data:{
+    type:Object,
+    default:{
+      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+      list:[
+        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+      ],
+    }
+  }
+});
+
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate() })
+},{immediate:true,deep:true})
+
+// 处理数据
+function handleDate() {
+  let xDate = props.data.xDate;
+  let legend = props.data.list.map(v=>{return {name:v.name}})
+  let series = props.data.list.map((item,i)=>{
+    let obj = {
+      name: item.name,
+      type: "bar",
+      data: item.value,
+      barWidth: "10px",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
+            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+        }
+      },
+      markPoint: {
+        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+        symbolSize: [11, 4], // 设置扁圆的宽和高
+        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
+        data: item.value.map((obj, index) => ({
+          xAxis: index, // 对应柱子的横坐标
+          yAxis: obj + 0 // 柱子的值加上一些偏移量
+        }))
+      },
+    }
+    return obj
+  })
+  lineChartFn(xDate,legend,series)
+}
+
+function lineChartFn(xDate,legend,series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "8%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: xDate,
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: series
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () { myChart.resize(); };
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>

src/views/home/echarts/barHatEcharts.vue

@@ -4,33 +4,180 @@
 
 <script setup>
 import * as echarts from "echarts";
-import { nextTick , onMounted, watch, defineProps } from "vue";
+import { nextTick, onMounted, onUnmounted, watch, defineProps, ref } from "vue";
+
 const props = defineProps({
-  echartsId:{
+  echartsId: {
-    type:String,
+    type: String,
-    default:'barHatId'
+    default: 'barHatId'
   },
-  data:{
+  data: {
-    type:Object,
+    type: Object,
-    default:{
+    default: {
       xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
-      list:[
+      list: [
-        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+        { name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
-        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+        { name: "已处置", value: [10,20,30,40,50,60,70], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
       ],
     }
+  },
+  // 新增：是否启用自动循环展示提示框
+  autoTooltip: {
+    type: Boolean,
+    default: true
+  },
+  // 新增：提示框循环间隔时间（毫秒）
+  tooltipInterval: {
+    type: Number,
+    default: 2000
+  },
+  // 新增：鼠标悬停时是否暂停循环
+  pauseOnHover: {
+    type: Boolean,
+    default: true
   }
 });
 
-watch(()=>props.data,val=>{
+// 响应式变量
-  nextTick(()=>{ handleDate() })
+const myChart = ref(null);
-},{immediate:true,deep:true})
+const tooltipTimer = ref(null);
+const currentTooltipIndex = ref(0);
+const isPaused = ref(false);
+
+watch(() => props.data, val => {
+  nextTick(() => { handleDate() })
+}, { immediate: true, deep: true })
+
+// 启动自动循环展示提示框
+function startAutoTooltip() {
+  // 详细的条件检查和日志
+  if (!props.autoTooltip) {
+    console.log('自动提示框未启动 - autoTooltip为false');
+    return;
+  }
+  
+  if (!props.data) {
+    console.warn('自动提示框未启动 - 缺少数据');
+    return;
+  }
+  
+  if (!props.data.xDate || props.data.xDate.length === 0) {
+    console.warn('自动提示框未启动 - xDate数据为空');
+    return;
+  }
+  
+  if (!props.data.list || props.data.list.length === 0) {
+    console.warn('自动提示框未启动 - list数据为空');
+    return;
+  }
+  
+  if (!myChart.value) {
+    console.warn('自动提示框未启动 - 图表实例不存在');
+    return;
+  }
+  
+  // 清除之前的定时器
+  stopAutoTooltip();
+  
+  const dataLength = props.data.xDate.length;
+  currentTooltipIndex.value = 0;
+  
+  console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`);
+  console.log('数据预览:', {
+    xDate: props.data.xDate.slice(0, 3),
+    listCount: props.data.list.length,
+    firstSeriesName: props.data.list[0]?.name,
+    firstSeriesValueCount: props.data.list[0]?.value?.length
+  });
+  
+  tooltipTimer.value = setInterval(() => {
+    try {
+      // 检查图表实例是否仍然存在
+      if (!myChart.value) {
+        console.error('图表实例丢失，停止自动提示框');
+        stopAutoTooltip();
+        return;
+      }
+      
+      // 检查是否暂停
+      if (isPaused.value) {
+        console.log('提示框循环已暂停');
+        return;
+      }
+      
+      // 先隐藏当前提示框
+      myChart.value.dispatchAction({
+        type: 'hideTip'
+      });
+      
+      // 延迟一点时间再显示新的提示框，确保动画效果
+      setTimeout(() => {
+        if (myChart.value && !isPaused.value) {
+          try {
+            // 获取当前数据点信息
+            const currentData = props.data.xDate[currentTooltipIndex.value];
+            const currentValues = props.data.list.map(series => series.value[currentTooltipIndex.value]);
+            
+            // 验证数据有效性
+            if (currentData === undefined) {
+              console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`);
+              stopAutoTooltip();
+              return;
+            }
+            
+            // 显示当前索引的提示框 - 使用第一个系列
+            myChart.value.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: currentTooltipIndex.value
+            });
+            
+            console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues);
+          } catch (error) {
+            console.error('显示提示框时出错:', error);
+            // 如果出错，尝试停止循环避免持续错误
+            stopAutoTooltip();
+          }
+        }
+      }, 100);
+      
+      // 更新索引，循环展示
+      currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
+    } catch (error) {
+      console.error('自动提示框循环出错:', error);
+      stopAutoTooltip();
+    }
+  }, props.tooltipInterval);
+  
+  console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
+}
+
+// 停止自动循环展示提示框
+function stopAutoTooltip() {
+  if (tooltipTimer.value) {
+    clearInterval(tooltipTimer.value);
+    tooltipTimer.value = null;
+    console.log('自动提示框已停止');
+  }
+}
+
+// 暂停自动循环
+function pauseAutoTooltip() {
+  isPaused.value = true;
+  console.log('自动提示框已暂停');
+}
+
+// 恢复自动循环
+function resumeAutoTooltip() {
+  isPaused.value = false;
+  console.log('自动提示框已恢复');
+}
 
 // 处理数据
 function handleDate() {
   let xDate = props.data.xDate;
-  let legend = props.data.list.map(v=>{return {name:v.name}})
+  let legend = props.data.list.map(v => { return { name: v.name } })
-  let series = props.data.list.map((item,i)=>{
+  let series = props.data.list.map((item, i) => {
     let obj = {
       name: item.name,
       type: "bar",
@@ -38,9 +185,9 @@ function handleDate() {
       barWidth: "10px",
       itemStyle: {
         normal: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
-            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+            { offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }], false),
         }
       },
       markPoint: {
@@ -55,11 +202,11 @@ function handleDate() {
     }
     return obj
   })
-  lineChartFn(xDate,legend,series)
+  lineChartFn(xDate, legend, series)
 }
 
-function lineChartFn(xDate,legend,series) {
+function lineChartFn(xDate, legend, series) {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+  myChart.value = echarts.init(document.getElementById(props.echartsId));
   var option = {
     legend: {
       type: "plain",
@@ -69,9 +216,59 @@ function lineChartFn(xDate,legend,series) {
       data: legend
     },
     tooltip: {
-      trigger: "axis",
+      trigger: "item",
-      axisPointer: {
+      backgroundColor: 'rgba(0, 0, 0, 0.9)',
-        type: "shadow"
+      borderColor: '#00d4ff',
+      borderWidth: 2,
+      borderRadius: 8,
+      textStyle: {
+        color: '#fff',
+        fontSize: 13,
+        fontWeight: 'normal'
+      },
+      formatter: function(params) {
+        // 获取当前数据点的所有系列信息
+        const dataIndex = params.dataIndex;
+        const categoryName = params.name;
+        
+        let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
+        
+        // 遍历所有系列，显示该数据点的所有信息
+        if (props.data && props.data.list) {
+          props.data.list.forEach((seriesData, index) => {
+            const value = seriesData.value[dataIndex];
+            const color = seriesData.color ? seriesData.color[0] : '#00d4ff';
+            result += `<div style="margin: 4px 0; display: flex; align-items: center;">
+              <span style="display: inline-block; width: 12px; height: 12px; background: ${color}; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
+              <span style="color: #fff; margin-right: 8px; min-width: 60px;">${seriesData.name}:</span>
+              <span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
+            </div>`;
+          });
+        }
+        
+        return result;
+      },
+      // 确保提示框能够正确显示
+      confine: true,
+      // 添加动画效果
+      transitionDuration: 0.2,
+      // 设置提示框位置
+      position: function (point, params, dom, rect, size) {
+        // 计算提示框位置，避免超出边界
+        let x = point[0] + 15;
+        let y = point[1] - 10;
+        
+        // 如果右侧空间不够，显示在左侧
+        if (x + size.contentSize[0] > size.viewSize[0]) {
+          x = point[0] - size.contentSize[0] - 15;
+        }
+        
+        // 如果上方空间不够，显示在下方
+        if (y < 0) {
+          y = point[1] + 20;
+        }
+        
+        return [x, y];
       }
     },
     grid: {
@@ -120,13 +317,46 @@ function lineChartFn(xDate,legend,series) {
     ],
     series: series
   };
-  option && myChart.setOption(option);
+  
-  window.onresize = function () { myChart.resize(); };
+  option && myChart.value.setOption(option);
-  document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
+  
+  // 添加鼠标事件监听
+  if (props.pauseOnHover) {
+    myChart.value.on('mouseover', () => {
+      pauseAutoTooltip();
+    });
+    
+    myChart.value.on('mouseout', () => {
+      resumeAutoTooltip();
+    });
+  }
+  
+  // 启动自动循环展示
+  if (props.autoTooltip) {
+    setTimeout(() => {
+      startAutoTooltip();
+    }, 1000); // 延迟1秒启动，确保图表完全渲染
+  }
+  
+  window.onresize = function () { 
+    if (myChart.value) {
+      myChart.value.resize(); 
+    }
+  };
 }
+
 onMounted(() => {
   lineChartFn();
 });
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  stopAutoTooltip();
+  if (myChart.value) {
+    myChart.value.dispose();
+    myChart.value = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/views/home/echarts/tooltipDemo.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="tooltip-demo">
+    <div class="demo-header">
+      <h2>ECharts 提示框循环展示演示</h2>
+      <div class="controls">
+        <el-button @click="toggleAutoTooltip" :type="autoTooltip ? 'success' : 'info'">
+          {{ autoTooltip ? '停止循环' : '开始循环' }}
+        </el-button>
+        <el-button @click="changeInterval">
+          切换间隔 (当前: {{ tooltipInterval }}ms)
+        </el-button>
+        <el-button @click="changeData">
+          切换数据
+        </el-button>
+      </div>
+    </div>
+    
+    <div class="chart-container">
+      <BarHatEcharts 
+        :data="currentData"
+        :autoTooltip="autoTooltip"
+        :tooltipInterval="tooltipInterval"
+        :pauseOnHover="true"
+        echartsId="tooltipDemoChart"
+      />
+    </div>
+    
+    <div class="feature-description">
+      <h3>功能说明：</h3>
+      <ul>
+        <li>✅ <strong>自动循环展示</strong>：提示框会按设定间隔自动循环显示每个数据点的信息</li>
+        <li>✅ <strong>智能暂停</strong>：鼠标悬停在图表上时自动暂停循环，离开时恢复</li>
+        <li>✅ <strong>可配置间隔</strong>：支持自定义循环间隔时间（1秒、2秒、3秒）</li>
+        <li>✅ <strong>美观样式</strong>：深色主题提示框，蓝色边框，清晰的数据展示</li>
+        <li>✅ <strong>错误处理</strong>：完善的错误处理机制，确保稳定运行</li>
+        <li>✅ <strong>生命周期管理</strong>：组件卸载时自动清理定时器，防止内存泄漏</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import BarHatEcharts from './barHatEcharts.vue';
+
+const autoTooltip = ref(true);
+const tooltipInterval = ref(2000);
+
+const dataSet1 = {
+  xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+  list: [
+    { name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
+    { name: "已处置", value: [8,15,25,35,45,55,65], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
+  ]
+};
+
+const dataSet2 = {
+  xDate: ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区'],
+  list: [
+    { name: "报警数量", value: [25,35,45,30,20,40], color:['rgba(255,99,132,1)','rgba(255,99,132,0.3)'], hatColor:'#ff6384'},
+    { name: "处理完成", value: [20,30,40,25,18,35], color:['rgba(54,162,235,1)','rgba(54,162,235,0.3)'], hatColor:'#36a2eb'},
+    { name: "待处理", value: [5,5,5,5,2,5], color:['rgba(255,206,86,1)','rgba(255,206,86,0.3)'], hatColor:'#ffce56'},
+  ]
+};
+
+const currentData = ref(dataSet1);
+
+function toggleAutoTooltip() {
+  autoTooltip.value = !autoTooltip.value;
+}
+
+function changeInterval() {
+  const intervals = [1000, 2000, 3000];
+  const currentIndex = intervals.indexOf(tooltipInterval.value);
+  const nextIndex = (currentIndex + 1) % intervals.length;
+  tooltipInterval.value = intervals[nextIndex];
+}
+
+function changeData() {
+  currentData.value = currentData.value === dataSet1 ? dataSet2 : dataSet1;
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip-demo {
+  padding: 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  min-height: 100vh;
+  color: #fff;
+}
+
+.demo-header {
+  margin-bottom: 30px;
+  text-align: center;
+  
+  h2 {
+    margin-bottom: 20px;
+    color: #00d4ff;
+    font-size: 28px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+}
+
+.chart-container {
+  height: 400px;
+  background: rgba(0,29,75,0.6);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.feature-description {
+  background: rgba(0,0,0,0.3);
+  padding: 20px;
+  border-radius: 8px;
+  border-left: 4px solid #00d4ff;
+  
+  h3 {
+    color: #00d4ff;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  ul {
+    list-style: none;
+    padding: 0;
+    
+    li {
+      margin-bottom: 10px;
+      padding-left: 10px;
+      line-height: 1.6;
+      
+      strong {
+        color: #00d4ff;
+      }
+    }
+  }
+}
+
+:deep(.el-button) {
+  background: rgba(0,212,255,0.2);
+  border-color: #00d4ff;
+  color: #00d4ff;
+  
+  &:hover {
+    background: rgba(0,212,255,0.3);
+    border-color: #00d4ff;
+    color: #fff;
+  }
+  
+  &.el-button--success {
+    background: rgba(103,194,58,0.2);
+    border-color: #67c23a;
+    color: #67c23a;
+    
+    &:hover {
+      background: rgba(103,194,58,0.3);
+      border-color: #67c23a;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/home/model/qblyType.vue

@@ -3,7 +3,7 @@
     <span class="title">情报来源类型</span>
   </div> 
   <div class="comom-cnt">
-    <BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
+    <BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts>
   </div>
 </template>