更新页面
This commit is contained in:
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -36,8 +36,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/user/department-ist",
|
||||
name: "departmentList",
|
||||
component: () =>
|
||||
import("@/views/backOfficeSystem/systemConfig/department-list/index"),
|
||||
component: () => 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: "预警列表",
|
||||
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: "警情管理",
|
||||
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",
|
||||
name: "MoralAnalysis",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/MoralAnalysis/index"),
|
||||
path: "/ssemanticAnalysis",
|
||||
name: "semanticAnalysis",
|
||||
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: "专题研判",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/tsypHome",
|
||||
name: "tsypHome",
|
||||
component: () => import("@/views/backOfficeSystem/JudgmentHome/tsypHome/index"),
|
||||
meta: {
|
||||
title: "模型管理",
|
||||
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(
|
||||
"@/views/backOfficeSystem/BasicManagement/experienceShare/index"
|
||||
),
|
||||
import("@/views/backOfficeSystem/BasicManagement/experienceShare/index"),
|
||||
meta: {
|
||||
title: "经验分享",
|
||||
icon: "article"
|
||||
}
|
||||
}, {
|
||||
path: "/ssemanticAnalysis",
|
||||
name: "semanticAnalysis",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/SemanticAnalysis/index.vue"
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/policeReport",
|
||||
name: "policeReport",
|
||||
component: () =>import("@/views/backOfficeSystem/policeReport/index.vue"),
|
||||
meta: {
|
||||
title: "语义分析",
|
||||
title: "警情管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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' }"
|
||||
v-loading="loading">
|
||||
<ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }" 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;"
|
||||
src="@/assets/images/mxbg.jpg" alt=""></div>
|
||||
<div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;" 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 = {
|
||||
|
||||
@ -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 = () => {
|
||||
router.push('/ControlApproval')
|
||||
router.push('/warningList')
|
||||
}
|
||||
const showDialog = ref(false)
|
||||
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 () {
|
||||
myChart.resize();
|
||||
};
|
||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
||||
}
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
|
||||
@ -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";
|
||||
//参数传递
|
||||
|
||||
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>
|
||||
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:{
|
||||
type:String,
|
||||
default:'barHatId'
|
||||
echartsId: {
|
||||
type: String,
|
||||
default: 'barHatId'
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:{
|
||||
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' },
|
||||
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'},
|
||||
],
|
||||
}
|
||||
},
|
||||
// 新增：是否启用自动循环展示提示框
|
||||
autoTooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 新增：提示框循环间隔时间（毫秒）
|
||||
tooltipInterval: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
// 新增：鼠标悬停时是否暂停循环
|
||||
pauseOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
watch(()=>props.data,val=>{
|
||||
nextTick(()=>{ handleDate() })
|
||||
},{immediate:true,deep:true})
|
||||
// 响应式变量
|
||||
const myChart = ref(null);
|
||||
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 series = props.data.list.map((item,i)=>{
|
||||
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",
|
||||
@ -38,15 +185,15 @@ 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: {
|
||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
||||
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
||||
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
||||
data: item.value.map((obj, index) => ({
|
||||
xAxis: index, // 对应柱子的横坐标
|
||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
||||
@ -55,11 +202,11 @@ function handleDate() {
|
||||
}
|
||||
return obj
|
||||
})
|
||||
lineChartFn(xDate,legend,series)
|
||||
lineChartFn(xDate, legend, series)
|
||||
}
|
||||
|
||||
function lineChartFn(xDate,legend,series) {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
function lineChartFn(xDate, legend, series) {
|
||||
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",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
trigger: "item",
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
||||
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(); };
|
||||
document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
|
||||
|
||||
option && myChart.value.setOption(option);
|
||||
|
||||
// 添加鼠标事件监听
|
||||
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>
|
||||
|
||||
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>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
|
||||
<BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user