更新页面
This commit is contained in:
@ -7,8 +7,9 @@
|
|||||||
:load="load" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
|
:load="load" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
|
||||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
|
: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 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"
|
<el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"
|
||||||
|
|||||||
@ -6,7 +6,6 @@
|
|||||||
<!---循环渲染--->
|
<!---循环渲染--->
|
||||||
<SideBarItem v-for="item in route.children" :key="item.path" :route="item"></SideBarItem>
|
<SideBarItem v-for="item in route.children" :key="item.path" :route="item"></SideBarItem>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
|
|
||||||
<el-menu-item v-else :index="route.path">
|
<el-menu-item v-else :index="route.path">
|
||||||
<MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
|
<MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
|||||||
@ -59,7 +59,7 @@ const activeMenu = computed(() => {
|
|||||||
background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
|
background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
|
||||||
margin: 0 14px;
|
margin: 0 14px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding-left: 26px !important;
|
// padding-left: 46px !important;
|
||||||
}
|
}
|
||||||
::v-deep .el-sub-menu .el-menu-item {
|
::v-deep .el-sub-menu .el-menu-item {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|||||||
@ -3,7 +3,6 @@
|
|||||||
<div class="meunAside noScollLine">
|
<div class="meunAside noScollLine">
|
||||||
<div style="height:100px"></div>
|
<div style="height:100px"></div>
|
||||||
<div style="height: calc(100% - 100px);"><SideBarMenu></SideBarMenu></div>
|
<div style="height: calc(100% - 100px);"><SideBarMenu></SideBarMenu></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -36,8 +36,7 @@ export const publicRoutes = [
|
|||||||
{
|
{
|
||||||
path: "/user/department-ist",
|
path: "/user/department-ist",
|
||||||
name: "departmentList",
|
name: "departmentList",
|
||||||
component: () =>
|
component: () => import("@/views/backOfficeSystem/systemConfig/department-list/index"),
|
||||||
import("@/views/backOfficeSystem/systemConfig/department-list/index"),
|
|
||||||
meta: {
|
meta: {
|
||||||
title: "部门管理",
|
title: "部门管理",
|
||||||
icon: "article-ranking"
|
icon: "article-ranking"
|
||||||
@ -172,14 +171,59 @@ export const publicRoutes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/editPassword", // 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
|
path: "/editPassword", // 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
|
||||||
component: layout,
|
|
||||||
redirect: "/IdentityManage",
|
redirect: "/IdentityManage",
|
||||||
|
component: layout,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/FourColorWarning",
|
path: "/FourColorWarning",
|
||||||
name: "FourColorWarning",
|
name: "FourColorWarning",
|
||||||
meta: { title: "四色预警管理", icon: "article" },
|
meta: { title: "四色预警管理", icon: "article" },
|
||||||
children: [
|
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",
|
path: "/IdentityManage",
|
||||||
name: "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",
|
path: "/warningList",
|
||||||
name: "warningList",
|
name: "warningList",
|
||||||
component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/index"),
|
component: () => import("@/views/backOfficeSystem/fourColorManage/warningList/index"),
|
||||||
meta: {
|
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"
|
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: {
|
meta: {
|
||||||
title: "情报语义分析",
|
title: "语义分析",
|
||||||
icon: "article"
|
icon: "article"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 暂时不要
|
||||||
|
// {
|
||||||
|
// path: "/MoralAnalysis",
|
||||||
|
// name: "MoralAnalysis",
|
||||||
|
// component: () => import("@/views/backOfficeSystem/ResearchJudgment/MoralAnalysis/index"),
|
||||||
|
// meta: {
|
||||||
|
// title: "情报语义分析",
|
||||||
|
// icon: "article"
|
||||||
|
// }
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: "/IntelligenceManagement",
|
path: "/IntelligenceManagement",
|
||||||
name: "IntelligenceManagement",
|
name: "IntelligenceManagement",
|
||||||
@ -448,8 +481,17 @@ export const publicRoutes = [
|
|||||||
{
|
{
|
||||||
path: "/ExcavationResearch",
|
path: "/ExcavationResearch",
|
||||||
name: "ExcavationResearch",
|
name: "ExcavationResearch",
|
||||||
meta: { title: "重点人发掘研判", icon: "article" },
|
meta: { title: "重点人发掘系统", icon: "article" },
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
path: "/tsypHome",
|
||||||
|
name: "tsypHome",
|
||||||
|
component: () => import("@/views/backOfficeSystem/JudgmentHome/tsypHome/index"),
|
||||||
|
meta: {
|
||||||
|
title: "重点人员模型管理",
|
||||||
|
icon: "article"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/PreliminaryExcavations",
|
path: "/PreliminaryExcavations",
|
||||||
name: "PreliminaryExcavations",
|
name: "PreliminaryExcavations",
|
||||||
@ -502,25 +544,17 @@ export const publicRoutes = [
|
|||||||
name: "ResearchHome",
|
name: "ResearchHome",
|
||||||
component: () => import("@/views/backOfficeSystem/JudgmentHome/ResearchHome/index"),
|
component: () => import("@/views/backOfficeSystem/JudgmentHome/ResearchHome/index"),
|
||||||
meta: {
|
meta: {
|
||||||
title: "专题研判",
|
title: "战术研判",
|
||||||
icon: "article"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/tsypHome",
|
|
||||||
name: "tsypHome",
|
|
||||||
component: () => import("@/views/backOfficeSystem/JudgmentHome/tsypHome/index"),
|
|
||||||
meta: {
|
|
||||||
title: "模型管理",
|
|
||||||
icon: "article"
|
icon: "article"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/situationHome",
|
path: "/situationHome",
|
||||||
name: "situationHome",
|
name: "situationHome",
|
||||||
component: () => import("@/views/backOfficeSystem/JudgmentHome/situationHome/index"),
|
component: () => import("@/views/backOfficeSystem/JudgmentHome/situationHome/index"),
|
||||||
meta: {
|
meta: {
|
||||||
title: "研判态势",
|
title: "战略研判",
|
||||||
icon: "article"
|
icon: "article"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -634,22 +668,19 @@ export const publicRoutes = [
|
|||||||
path: "/experienceShare",
|
path: "/experienceShare",
|
||||||
name: "experienceShare",
|
name: "experienceShare",
|
||||||
component: () =>
|
component: () =>
|
||||||
import(
|
import("@/views/backOfficeSystem/BasicManagement/experienceShare/index"),
|
||||||
"@/views/backOfficeSystem/BasicManagement/experienceShare/index"
|
|
||||||
),
|
|
||||||
meta: {
|
meta: {
|
||||||
title: "经验分享",
|
title: "经验分享",
|
||||||
icon: "article"
|
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: {
|
meta: {
|
||||||
title: "语义分析",
|
title: "警情管理",
|
||||||
icon: "article"
|
icon: "article"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
import FormMessage from "@/components/aboutTable/FormMessage.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 dialogForm = ref(false)
|
||||||
const title = ref("新增")
|
const title = ref("新增")
|
||||||
const init = (type, row) => {
|
const init = (type, row) => {
|
||||||
|
|||||||
@ -11,11 +11,9 @@
|
|||||||
<div ref="searchBox">
|
<div ref="searchBox">
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
|
<Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
|
||||||
</div>
|
</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">
|
<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">
|
<div class="foot">
|
||||||
<span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
|
<span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
|
||||||
<Document />
|
<Document />
|
||||||
@ -79,7 +77,7 @@ const onSearch = (val) => {
|
|||||||
const load = () => {
|
const load = () => {
|
||||||
if (total.value == list.value.length) return;
|
if (total.value == list.value.length) return;
|
||||||
PaginationConfig.pageCurrent++;
|
PaginationConfig.pageCurrent++;
|
||||||
getLits();
|
// getLits();
|
||||||
}
|
}
|
||||||
const getLits = () => {
|
const getLits = () => {
|
||||||
let params = {
|
let params = {
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -218,7 +218,7 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const seeMoreFn = () => {
|
const seeMoreFn = () => {
|
||||||
router.push('/ControlApproval')
|
router.push('/warningList')
|
||||||
}
|
}
|
||||||
const showDialog = ref(false)
|
const showDialog = ref(false)
|
||||||
const itemData = ref()
|
const itemData = ref()
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -104,7 +104,6 @@ function lineChartFn() {
|
|||||||
window.onresize = function () {
|
window.onresize = function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
};
|
};
|
||||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
lineChartFn();
|
lineChartFn();
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<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 { ref, defineProps, onMounted, watch } from "vue";
|
||||||
import emitter from "@/utils/eventBus.js";
|
import emitter from "@/utils/eventBus.js";
|
||||||
//参数传递
|
//参数传递
|
||||||
|
|||||||
137
src/views/home/echarts/barHatEcharts copy.vue
Normal file
137
src/views/home/echarts/barHatEcharts copy.vue
Normal file
@ -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>
|
||||||
@ -4,33 +4,180 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { nextTick , onMounted, watch, defineProps } from "vue";
|
import { nextTick, onMounted, onUnmounted, watch, defineProps, ref } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
echartsId:{
|
echartsId: {
|
||||||
type:String,
|
type: String,
|
||||||
default:'barHatId'
|
default: 'barHatId'
|
||||||
},
|
},
|
||||||
data:{
|
data: {
|
||||||
type:Object,
|
type: Object,
|
||||||
default:{
|
default: {
|
||||||
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
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() {
|
function handleDate() {
|
||||||
let xDate = props.data.xDate;
|
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 = {
|
let obj = {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
type: "bar",
|
type: "bar",
|
||||||
@ -38,15 +185,15 @@ function handleDate() {
|
|||||||
barWidth: "10px",
|
barWidth: "10px",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
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: 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: {
|
markPoint: {
|
||||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
||||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
symbolSize: [11, 4], // 设置扁圆的宽和高
|
||||||
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
||||||
data: item.value.map((obj, index) => ({
|
data: item.value.map((obj, index) => ({
|
||||||
xAxis: index, // 对应柱子的横坐标
|
xAxis: index, // 对应柱子的横坐标
|
||||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
||||||
@ -55,11 +202,11 @@ function handleDate() {
|
|||||||
}
|
}
|
||||||
return obj
|
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 = {
|
var option = {
|
||||||
legend: {
|
legend: {
|
||||||
type: "plain",
|
type: "plain",
|
||||||
@ -69,9 +216,59 @@ function lineChartFn(xDate,legend,series) {
|
|||||||
data: legend
|
data: legend
|
||||||
},
|
},
|
||||||
tooltip: {
|
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: {
|
grid: {
|
||||||
@ -120,13 +317,46 @@ function lineChartFn(xDate,legend,series) {
|
|||||||
],
|
],
|
||||||
series: 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(() => {
|
onMounted(() => {
|
||||||
lineChartFn();
|
lineChartFn();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 组件卸载时清理定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
stopAutoTooltip();
|
||||||
|
if (myChart.value) {
|
||||||
|
myChart.value.dispose();
|
||||||
|
myChart.value = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
171
src/views/home/echarts/tooltipDemo.vue
Normal file
171
src/views/home/echarts/tooltipDemo.vue
Normal file
@ -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>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<span class="title">情报来源类型</span>
|
<span class="title">情报来源类型</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="comom-cnt">
|
<div class="comom-cnt">
|
||||||
<BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
|
<BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user