更新
This commit is contained in:
parent
16b8bc2467
commit
1ccecb7258
20008
package-lock.json
generated
20008
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -20,6 +20,7 @@
|
|||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"el-table-infinite-scroll": "^3.0.6",
|
||||
"element-plus": "2.0.2",
|
||||
"gifler": "^0.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
|
|
|
|||
|
|
@ -160,7 +160,6 @@ header {
|
|||
&::v-deep .el-textarea__inner {
|
||||
height: 7.5em;
|
||||
border: 1px solid #F1F4F8;
|
||||
// background-color: #02163b;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,41 +113,85 @@ export const publicRoutes = [
|
|||
},
|
||||
]
|
||||
},
|
||||
// ）））））））））））））））））））））
|
||||
{
|
||||
path: "/Pawnbroking",
|
||||
name: "Pawnbroking",
|
||||
meta: { title: "典当业", icon: "article" },
|
||||
path: "/ResearchJudgment",
|
||||
name: "ResearchJudgment",
|
||||
meta: { title: "线索研判盯办系统", icon: "article" },
|
||||
children: [
|
||||
{
|
||||
path: "/PopManagement",
|
||||
name: "PopManagement",
|
||||
component: () => import("@/views/backOfficeSystem/Pawnbroking/PopManagement/index"),
|
||||
path: "/DatAcquisition",
|
||||
name: "DatAcquisition",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/DatAcquisition/index"),
|
||||
meta: {
|
||||
title: "典当业场所管理",
|
||||
title: "情报数据采集",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/ItemInformation",
|
||||
name: "ItemInformation",
|
||||
component: () => import("@/views/backOfficeSystem/Pawnbroking/ItemInformation/index"),
|
||||
path: "/MoralAnalysis",
|
||||
name: "MoralAnalysis",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/MoralAnalysis/index"),
|
||||
meta: {
|
||||
title: "典当物品信息管理",
|
||||
title: "情报语义分析",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/BusinessInformation",
|
||||
name: "BusinessInformation",
|
||||
component: () => import("@/views/backOfficeSystem/Pawnbroking/BusinessInformation/index"),
|
||||
path: "/IntelligenceManagement",
|
||||
name: "IntelligenceManagement",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/IntelligenceManagement/index"),
|
||||
meta: {
|
||||
title: "典当业务信息管理",
|
||||
title: "情报管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/InformationFlows",
|
||||
name: "InformationFlows",
|
||||
meta: { title: "情报流转", icon: "article" },
|
||||
redirect: "/InformationFlow",
|
||||
children: [
|
||||
{
|
||||
path: "/InformationFlow",
|
||||
name: "InformationFlow",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/InformationFlows/InformationFlow/index"),
|
||||
meta: {
|
||||
title: "情报信息流转",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/InstructionInformation",
|
||||
name: "InstructionInformation",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/InformationFlows/InstructionInformation/index"),
|
||||
meta: {
|
||||
title: "指令信息",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/StatisticalAnalysis",
|
||||
name: "StatisticalAnalysis",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/InformationFlows/StatisticalAnalysis/index"),
|
||||
meta: {
|
||||
title: "情报统计分析",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/RecordsOperations",
|
||||
name: "RecordsOperations",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/RecordsOperations/index"),
|
||||
meta: {
|
||||
title: "操作记录",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
// ）））））））））））））））））））））
|
||||
{
|
||||
path: "/ScrapMetal",
|
||||
name: "ScrapMetal",
|
||||
|
|
|
|||
|
|
@ -1,112 +0,0 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">典当业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="老于典当行"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人姓名">
|
||||
<el-input v-model="listQuery.ddrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当人证件号码">
|
||||
<el-input v-model="listQuery.ddrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人联系电话">
|
||||
<el-input v-model="listQuery.ddrlxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当日期">
|
||||
<el-input v-model="listQuery.ddrq" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="预赎日期">
|
||||
<el-input v-model="listQuery.ysrq" placeholder="2025/2/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="逾期时间数量">
|
||||
<el-input v-model="listQuery.yqsjsl" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当业务信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'placeName', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "典当人姓名", prop: 'pawner', placeholder: "请输入典当人姓名", showType: "input" },
|
||||
{ label: "典当人身份证号", prop: 'pawnerIdCard', placeholder: "请输入典当人身份证号", showType: "input" },
|
||||
{ label: "典当人联系电话", prop: 'pawnerPhone', placeholder: "请输入典当人联系电话", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'area', showType: "cascader", options: [], props: { multiple: false } },
|
||||
{ label: "典当日期", prop: 'pawnDate', showType: "daterange" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 2, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 3, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 4, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 5, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "所属辖区", prop: "area" },
|
||||
{ label: "典当人姓名", prop: "pawner" },
|
||||
{ label: "典当人身份证号", prop: "pawnerIdCard" },
|
||||
{ label: "典当人联系电话", prop: "pawnerPhone" },
|
||||
{ label: "典当日期", prop: "pawnDate" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, 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>
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">情报数据采集{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索名称">
|
||||
<el-input v-model="listQuery.xsmc" placeholder="请输入线索名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索编号">
|
||||
<el-input v-model="listQuery.xsbh" placeholder="请输入线索编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属专题">
|
||||
<el-input v-model="listQuery.xszt" placeholder="请输入所属专题" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="线索类型">
|
||||
<el-select v-model="listQuery.xslx" placeholder="请选择线索类型">
|
||||
<el-option label="类型1" value="1"/>
|
||||
<el-option label="类型2" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索等级">
|
||||
<el-select v-model="listQuery.xsdj" placeholder="请选择线索等级">
|
||||
<el-option label="一级" value="1"/>
|
||||
<el-option label="二级" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">线索描述</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索内容" class="full-width">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.xsnr"
|
||||
:rows="4"
|
||||
placeholder="请输入线索内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索标签大类">
|
||||
<el-select
|
||||
v-model="listQuery.bqdl"
|
||||
placeholder="请选择线索标签大类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索标签细类">
|
||||
<el-select
|
||||
v-model="listQuery.bqxl"
|
||||
placeholder="请选择线索标签细类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索标签二级系类">
|
||||
<el-select
|
||||
v-model="listQuery.bqxl"
|
||||
placeholder="请选择线索标签二级系类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-select v-model="listQuery.xsly" placeholder="请选择线线索来源">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索风险等级">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索备注">
|
||||
<el-input v-model="listQuery.xsbz" placeholder="请输入线索备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="市内外">
|
||||
<el-input v-model="listQuery.snw" placeholder="请输入市内外" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否涉及外地">
|
||||
<el-select
|
||||
v-model="listQuery.fxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指向地点">
|
||||
<el-select v-model="listQuery.zxdd" placeholder="请选择指向地点">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">相关人员</el-divider>
|
||||
<div class="mt10 mb10">
|
||||
<el-button type="primary" size="small">添加人员</el-button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<MyTable
|
||||
:tableData="pageForm.tableData"
|
||||
:tableColumn="pageForm.tableColumn"
|
||||
:tableHeight="pageForm.tableHeight"
|
||||
:key="pageForm.keyCount"
|
||||
:tableConfiger="pageForm.tableConfiger"
|
||||
:controlsWidth="pageForm.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="addEdit('detail', row)"
|
||||
>详情</el-link
|
||||
>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">申请人</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="申请单位">
|
||||
<el-input v-model="listQuery.sqdw" placeholder="请输入申请单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input v-model="listQuery.sqr" placeholder="请输入申请人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核单位">
|
||||
<el-input v-model="listQuery.shdw" placeholder="请输入审核单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核人">
|
||||
<el-input v-model="listQuery.shr" placeholder="请输入审核人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批单位">
|
||||
<el-input v-model="listQuery.spdw" placeholder="请输入审批单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人">
|
||||
<el-input v-model="listQuery.spr" placeholder="请输入审批人" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
});
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
margin-right: 20px;
|
||||
|
||||
&.full-width {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当业场所管理"/>
|
||||
<PageTitle title="情报数据采集">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
|
|
@ -33,11 +42,14 @@
|
|||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 附件 -->
|
||||
<template #attachment="{ row }">
|
||||
<el-button type="primary" link @click="viewAttachment(row)">查看</el-button>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转辖区</el-button>
|
||||
<el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link type="primary" link @click="deleteClue(row)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
|
|
@ -60,7 +72,7 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
|||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import DetailForm from "./components/addEditForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
|
@ -68,29 +80,33 @@ const detailDiloag = ref();
|
|||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'placeName', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "单位电话", prop: 'unitPhone', placeholder: "请输入单位电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'legalPerson', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'legalIdCard', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'legalPhone', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'operationStatus', placeholder: "请选择经营状况", showType: "select", options: [{label: '在业', value: '在业'}] },
|
||||
{ label: "所属辖区", prop: 'area', placeholder: "请选择所属辖区", showType: "cascader" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
{ label: "线索名称", prop: 'clueName', placeholder: "请输入线索名称", showType: "input" },
|
||||
{ label: "语义关键字", prop: 'semanticKeyword', placeholder: "请输入语义关键字", showType: "input" },
|
||||
{ label: "线索类型", prop: 'clueType', placeholder: "请选择线索类型", showType: "select", options: [] },
|
||||
{ label: "线索来源", prop: 'clueSource', placeholder: "请选择线索来源", showType: "select", options: [] },
|
||||
{ label: "开始时间", prop: 'startTime', placeholder: "请选择开始时间", showType: "datetime" },
|
||||
{ label: "结束时间", prop: 'endTime', placeholder: "请选择结束时间", showType: "datetime" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 2, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 3, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 4, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 5, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{
|
||||
clueNo:'1001',
|
||||
clueName:'疑似人员聚集',
|
||||
clueType:'人员聚集',
|
||||
clueSource:'群众举报',
|
||||
startTime:'2024-01-01 08:00:00',
|
||||
endTime:'2024-01-01 18:00:00',
|
||||
targetLocation:'某街道',
|
||||
clueContent:'发现多名可疑人员在该区域频繁出入，疑似从事非法活动。',
|
||||
attachment:'report.pdf'
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
showSelectType: "checkbox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
|
|
@ -98,13 +114,17 @@ const pageData = reactive({
|
|||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 280,
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "经营状态", prop: "operationStatus" },
|
||||
{ label: "所属辖区", prop: "area" },
|
||||
{ label: "法人姓名", prop: "legalPerson" },
|
||||
{ label: "法人证件号码", prop: "legalIdCard" },
|
||||
{ label: "线索编号", prop: "clueNo" },
|
||||
{ label: "线索名称", prop: "clueName" },
|
||||
{ label: "线索类型", prop: "clueType" },
|
||||
{ label: "线索来源", prop: "clueSource" },
|
||||
{ label: "开始时间", prop: "startTime" ,showOverflowTooltip: true},
|
||||
{ label: "结束时间", prop: "endTime" ,showOverflowTooltip: true},
|
||||
{ label: "指向地点", prop: "targetLocation" ,showOverflowTooltip: true},
|
||||
{ label: "线索内容", prop: "clueContent",showOverflowTooltip: true },
|
||||
{ label: "附件", prop: "attachment", slot: true },
|
||||
]
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">情报信息流转{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="130" label-position="right">
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索名称">
|
||||
<el-input v-model="listQuery.xsmc" placeholder="请输入线索名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索编号">
|
||||
<el-input v-model="listQuery.xsbh" placeholder="请输入线索编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属专题">
|
||||
<el-input v-model="listQuery.xszt" placeholder="请输入所属专题" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="线索类型">
|
||||
<el-select v-model="listQuery.xslx" placeholder="请选择线索类型">
|
||||
<el-option label="类型1" value="1"/>
|
||||
<el-option label="类型2" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索等级">
|
||||
<el-select v-model="listQuery.xsdj" placeholder="请选择线索等级">
|
||||
<el-option label="一级" value="1"/>
|
||||
<el-option label="二级" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">线索描述</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索内容" class="full-width">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.xsnr"
|
||||
:rows="4"
|
||||
placeholder="请输入线索内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索标签大类">
|
||||
<el-select
|
||||
v-model="listQuery.bqdl"
|
||||
placeholder="请选择线索标签大类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索标签细类">
|
||||
<el-select
|
||||
v-model="listQuery.bqxl"
|
||||
placeholder="请选择线索标签细类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索标签二级系类">
|
||||
<el-select
|
||||
v-model="listQuery.bqxl"
|
||||
placeholder="请选择线索标签二级系类"
|
||||
>
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-select v-model="listQuery.xsly" placeholder="请选择线线索来源">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线索风险等级">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索备注">
|
||||
<el-input v-model="listQuery.xsbz" placeholder="请输入线索备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="市内外">
|
||||
<el-input v-model="listQuery.snw" placeholder="请输入市内外" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否涉及外地">
|
||||
<el-select
|
||||
v-model="listQuery.fxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指向地点">
|
||||
<el-select v-model="listQuery.zxdd" placeholder="请选择指向地点">
|
||||
<el-option label="一级" value="1" />
|
||||
<el-option label="二级" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">相关人员</el-divider>
|
||||
<div class="mt10 mb10">
|
||||
<el-button type="primary" size="small">添加人员</el-button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<MyTable
|
||||
:tableData="pageForm.tableData"
|
||||
:tableColumn="pageForm.tableColumn"
|
||||
:tableHeight="pageForm.tableHeight"
|
||||
:key="pageForm.keyCount"
|
||||
:tableConfiger="pageForm.tableConfiger"
|
||||
:controlsWidth="pageForm.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="addEdit('detail', row)"
|
||||
>详情</el-link
|
||||
>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">申请人</el-divider>
|
||||
<div class="form-row">
|
||||
<el-form-item label="申请单位">
|
||||
<el-input v-model="listQuery.sqdw" placeholder="请输入申请单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input v-model="listQuery.sqr" placeholder="请输入申请人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核单位">
|
||||
<el-input v-model="listQuery.shdw" placeholder="请输入审核单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核人">
|
||||
<el-input v-model="listQuery.shr" placeholder="请输入审核人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批单位">
|
||||
<el-input v-model="listQuery.spdw" placeholder="请输入审批单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人">
|
||||
<el-input v-model="listQuery.spr" placeholder="请输入审批人" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref,reactive } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const title = ref("");
|
||||
const listQuery = ref({
|
||||
xgry: []
|
||||
});
|
||||
const pageForm = reactive({
|
||||
tableData: [
|
||||
{
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "51018319969699999",
|
||||
hjd: "",
|
||||
hjdpcs: "",
|
||||
bq: "重点人员"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "户籍地", prop: "hjd" },
|
||||
{ label: "户籍地派出所", prop: "hjdpcs" },
|
||||
{ label: "标签", prop: "bq" }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type === "add" ? "新增" : "编辑";
|
||||
if (type === "edit" && row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {
|
||||
xgry: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
listQuery.value.xgry.push({
|
||||
xm: "",
|
||||
zjhm: "",
|
||||
lxdh: ""
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
listQuery.value.xgry.splice(index, 1);
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
margin-right: 20px;
|
||||
|
||||
&.full-width {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="情报信息流转">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
<el-link size="small" type="warning" @click="transferClue(row)">续报</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/addForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "线索名称", prop: 'clueTitle', placeholder: "请输入线索名称", showType: "input" },
|
||||
{ label: "语义关键字", prop: 'semanticKeywords', placeholder: "请输入语义关键字", showType: "input" },
|
||||
{ label: "线索类型", prop: 'clueType', placeholder: "请选择线索类型", showType: "select" },
|
||||
{ label: "线索来源", prop: 'clueSource', placeholder: "请选择线索来源", showType: "select" },
|
||||
{ label: "线索状态", prop: 'xszt', placeholder: "请选择线索状态", showType: "select" },
|
||||
{ label: "处置状态", prop: 'czzt', placeholder: "请选择处置状态", showType: "select" },
|
||||
{ label: "开始时间", prop: 'startTime', placeholder: "请选择开始时间", showType: "date" },
|
||||
{ label: "结束时间", prop: 'endTime', placeholder: "请选择结束时间", showType: "date" },
|
||||
{ label: "指向地点", prop: 'targetLocation', placeholder: "请输入指向地点", showType: "input" },
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
clueNo: "XS20240101001",
|
||||
clueTitle: "可疑人员活动线索",
|
||||
clueType: "人员线索",
|
||||
clueSource: "群众举报",
|
||||
startTime: "2024-01-01 08:00:00",
|
||||
endTime: "2024-01-01 18:00:00",
|
||||
targetLocation: "某市某区某街道",
|
||||
clueContent: "发现多名可疑人员在该区域频繁出入，疑似从事非法活动。",
|
||||
attachment: "report.pdf"
|
||||
},
|
||||
{
|
||||
clueNo: "XS20240101002",
|
||||
clueTitle: "涉毒交易线索",
|
||||
clueType: "违法犯罪线索",
|
||||
clueSource: "技术侦查",
|
||||
startTime: "2024-01-02 10:00:00",
|
||||
endTime: "2024-01-02 16:00:00",
|
||||
targetLocation: "某市某区某小区",
|
||||
clueContent: "监控发现多次可疑交易活动，疑似涉及违禁物品。",
|
||||
attachment: "evidence.docx"
|
||||
},
|
||||
{
|
||||
clueNo: "XS20240101003",
|
||||
clueTitle: "非法聚集线索",
|
||||
clueType: "群体性事件",
|
||||
clueSource: "网络监控",
|
||||
startTime: "2024-01-03 14:00:00",
|
||||
endTime: "2024-01-03 22:00:00",
|
||||
targetLocation: "某市某广场",
|
||||
clueContent: "网络平台发现有组织策划非法聚集活动的信息。",
|
||||
attachment: "online_evidence.zip"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "线索编号", prop: "clueNo" },
|
||||
{ label: "线索名称", prop: "clueTitle" },
|
||||
{ label: "线索类型", prop: "clueType" },
|
||||
{ label: "线索来源", prop: "clueSource" },
|
||||
{ label: "开始时间", prop: "startTime" },
|
||||
{ label: "结束时间", prop: "endTime" },
|
||||
{ label: "指向地点", prop: "targetLocation" },
|
||||
{ label: "线索内容", prop: "clueContent", width: 200 },
|
||||
{ label: "附件", prop: "attachment", slot: true },
|
||||
]
|
||||
});
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, 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>
|
||||
|
||||
// 下载附件
|
||||
const downloadAttachment = (row) => {
|
||||
// TODO: 实现附件下载逻辑
|
||||
};
|
||||
|
||||
// 预览附件
|
||||
const previewAttachment = (row) => {
|
||||
// TODO: 实现附件预览逻辑
|
||||
};
|
||||
|
||||
// 删除行
|
||||
const deleteRow = (row) => {
|
||||
// TODO: 实现删除逻辑
|
||||
};
|
||||
|
||||
// 流转线索
|
||||
const transferClue = (row) => {
|
||||
// TODO: 实现线索流转逻辑
|
||||
};
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">新增指令</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="120" label-position="right">
|
||||
<div class="form-row">
|
||||
<el-form-item label="指令标题">
|
||||
<MOSTY.Other width="100%" v-model="listQuery.title" placeholder="请输入指令标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否生成指令号">
|
||||
<MOSTY.Select width="100%" v-model="listQuery.generateNumber" :dictEnum="[{lable:'是',value:1}]" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指令类型">
|
||||
<MOSTY.Select width="100%" v-model="listQuery.type" :dictEnum="[{lable:'类型1',value:1}]" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指令等级">
|
||||
<MOSTY.Select width="100%" v-model="listQuery.type" :dictEnum="[{lable:'等级1',value:1}]" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="指令发起人">
|
||||
<el-input v-model="listQuery.initiator" placeholder="请输入发起人"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发起部门">
|
||||
<el-input v-model="listQuery.department" placeholder="请输入发起部门"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="listQuery.contact" placeholder="请输入联系人"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="listQuery.phone" placeholder="请输入联系电话"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="关联线索" class="full-width">
|
||||
<div class="flex" style="width:100%;">
|
||||
<el-input v-model="listQuery.relatedClues" placeholder="请输入关联线索"/>
|
||||
<span type="primary" size="small" class="add-btn">+</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="主送单位" class="full-width">
|
||||
<div class="flex" style="width:100%;">
|
||||
<el-input v-model="listQuery.mainUnit" placeholder="请输入主送单位"/>
|
||||
<span type="primary" size="small" class="add-btn">+</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="抄送单位" class="full-width">
|
||||
<div class="flex" style="width:100%;">
|
||||
<el-input v-model="listQuery.ccUnit" placeholder="请输入抄送单位"/>
|
||||
<span type="primary" size="small" class="add-btn">+</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="指令内容" class="full-width">
|
||||
<el-input type="textarea" v-model="listQuery.content" :rows="6" placeholder="请输入指令内容"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="附件" class="full-width">
|
||||
<!-- Upload选择 -->
|
||||
<MOSTY.Upload width="100%" v-model="listQuery.tpdz" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
title: '',
|
||||
generateNumber: true,
|
||||
type: '',
|
||||
level: '',
|
||||
initiator: '',
|
||||
department: '',
|
||||
contact: '',
|
||||
phone: '',
|
||||
relatedClues: '',
|
||||
mainUnit: '',
|
||||
ccUnit: '',
|
||||
content: '',
|
||||
attachments: []
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.full-width {
|
||||
width: 100%;
|
||||
margin-right: 0 !important;
|
||||
|
||||
.el-input {
|
||||
width: calc(100% - 40px);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: inline-block;
|
||||
background: #0072ff;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="指令信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
<el-button >
|
||||
<el-icon style="vertical-align: middle"><Setting /></el-icon>
|
||||
<span style="vertical-align: middle">批量处置</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">查看</el-link>
|
||||
<el-link size="small" type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "指令标题", prop: 'instructionTitle', placeholder: "请输入指令标题", showType: "input" },
|
||||
{ label: "督办对象", prop: 'supervisoryObject', placeholder: "请输入督办对象", showType: "input" },
|
||||
{ label: "指令类型", prop: 'instructionType', placeholder: "请选择指令类型", showType: "input" },
|
||||
{ label: "指令等级", prop: 'instructionLevel', placeholder: "请选择指令等级", showType: "input" },
|
||||
{ label: "指令来源", prop: 'instructionSource', placeholder: "请输入指令来源", showType: "input" },
|
||||
{ label: "处置状态", prop: 'processingStatus', placeholder: "请选择处置状态", showType: "input" },
|
||||
{ label: "数据来源", prop: 'dataSource', placeholder: "请输入数据来源", showType: "input" },
|
||||
{ label: "反馈截止时间", prop: 'feedbackDeadline', placeholder: "请选择反馈截止时间", showType: "input" },
|
||||
{ label: "指令流向", prop: 'instructionFlow', placeholder: "请输入指令流向", showType: "input" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, instructionFlow: '本级发起', instructionTitle: '关于XX的指令', urgencyLevel: '紧急', informationSource: '信息来源', workingStatus: '工作中', supervisoryObject: '督办对象', instructionLevel: '一级', feedbackPosition: '反馈位置', feedbackDeadline: '2024-01-20', receivedNumber: 5, unreceivedNumber: 2, processingStatus: '已处理', status: '已完成'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 180,
|
||||
tableColumn: [
|
||||
{ label: '指令流向', prop: 'instructionFlow' },
|
||||
{ label: '指令标题', prop: 'instructionTitle' },
|
||||
{ label: '紧急程度', prop: 'urgencyLevel', width: 100 },
|
||||
{ label: '信息来源', prop: 'informationSource' },
|
||||
{ label: '工作状态', prop: 'workingStatus', width: 100 },
|
||||
{ label: '督办对象', prop: 'supervisoryObject' },
|
||||
{ label: '指令等级', prop: 'instructionLevel', width: 100 },
|
||||
{ label: '反馈位置', prop: 'feedbackPosition' },
|
||||
{ label: '反馈截止时间', prop: 'feedbackDeadline', width: 120 },
|
||||
{ label: '发送人数', prop: 'receivedNumber', width: 100 },
|
||||
{ label: '未接收人数', prop: 'unreceivedNumber', width: 100 },
|
||||
{ label: '处置状态', prop: 'processingStatus', width: 100 },
|
||||
{ label: '状态', prop: 'status', width: 100 },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, 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>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<div class="statistical-analysis">
|
||||
<!-- 左侧树形菜单 -->
|
||||
<div class="left-menu">
|
||||
<!-- 这个部分用的是组件-后期替换 -->
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
default-expand-all
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="right-content">
|
||||
<!-- 顶部筛选 -->
|
||||
<div class="filter-section">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="it.value" v-for="it in timeList" :key="it.value">{{
|
||||
it.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-button type="primary" @click="handleExport">查询</el-button>
|
||||
<el-button type="primary" @click="handleExport">重置</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 统计图表区域 -->
|
||||
<div class="charts-container">
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>线索采集统计</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<PieEcharts
|
||||
echartsId="pieChart"
|
||||
color="#333"
|
||||
:data="obj.cjList"
|
||||
></PieEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>指令统计</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<DbarEcharts
|
||||
echartsId="bar3DChart"
|
||||
:data="obj.zlList"
|
||||
></DbarEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>线索类型统计</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<ul class="chart">
|
||||
<li v-for="(it, idx) in obj.jjList" :key="idx" class="mb6">
|
||||
<div style="color: #333">{{ it.label }}</div>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
>
|
||||
<span
|
||||
><span style="color: #e37233">{{ it.value }}</span> 个</span
|
||||
>
|
||||
</el-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="chart-title">
|
||||
<span>线索类型统计</span>
|
||||
<el-button type="primary">导出统计表</el-button>
|
||||
</div>
|
||||
<lineEcharts
|
||||
color="#333"
|
||||
echartsId="areaChart"
|
||||
:data="obj.bkgzList"
|
||||
></lineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
|
||||
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
||||
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const radio = ref("日");
|
||||
const timeList = ref([
|
||||
{ label: "日", value: "0" },
|
||||
{ label: "月", value: "1" },
|
||||
{ label: "季", value: "2" },
|
||||
{ label: "年", value: "3" }
|
||||
]);
|
||||
const obj = reactive({
|
||||
listQuery: {},
|
||||
cjList: [
|
||||
{ label: "采纳数", value: 18 },
|
||||
{ label: "编刊数", value: 20 },
|
||||
{ label: "退回数", value: 50 },
|
||||
{ label: "合并数", value: 40 },
|
||||
{ label: "其他", value: 30 }
|
||||
],
|
||||
// 布控工作统计
|
||||
bkgzList: [
|
||||
{ label: "发起总数", value: 10 },
|
||||
{ label: "审核总数", value: 20 },
|
||||
{ label: "审批总数", value: 50 },
|
||||
{ label: "处置总数", value: 40 },
|
||||
{ label: "其他", value: 30 }
|
||||
],
|
||||
jjList: [
|
||||
{ label: "涉稳", value: 10 },
|
||||
{ label: "涉毒", value: 20 },
|
||||
{ label: "行政", value: 50 },
|
||||
{ label: "群体", value: 40 },
|
||||
{ label: "灾害", value: 40 }
|
||||
],
|
||||
zlList: {
|
||||
list: [
|
||||
{ label: "下发数", val: 50 },
|
||||
{ label: "未签收", val: 40 },
|
||||
{ label: "已签收", val: 10 },
|
||||
{ label: "超时签收", val: 30 },
|
||||
{ label: "未反馈", val: 40 },
|
||||
{ label: "已反馈", val: 40 }
|
||||
],
|
||||
topColor:'#1bd6c2',
|
||||
colors: ["#28EEBF","#0DBAC5"],
|
||||
}
|
||||
});
|
||||
|
||||
// 树形菜单数据
|
||||
const treeData = ref([
|
||||
{
|
||||
label: "林芝市公安局（200）",
|
||||
children: [
|
||||
{ label: "工布江达县公安局（100）" },
|
||||
{ label: "工布江达城区派出所（10）" },
|
||||
{ label: "某某某派出所（10）" },
|
||||
{ label: "某某某公安局（100）" }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "label"
|
||||
};
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 事件处理函数
|
||||
const handleNodeClick = (data) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const handleDateChange = () => {
|
||||
// 处理日期变化
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// 处理导出
|
||||
};
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistical-analysis {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.left-menu {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.charts-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 50px);
|
||||
.chart-item {
|
||||
width: 49.5%;
|
||||
height: calc(50% - 5px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
color: #333;
|
||||
}
|
||||
::v-deep .el-radio__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .el-progress-bar__innerText {
|
||||
color: #333;
|
||||
margin: 0 -40px;
|
||||
}
|
||||
::v-deep .el-progress.is-exception .el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #fe5d00 0%, #face35 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">新增</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form
|
||||
:model="listQuery"
|
||||
:label-width="130"
|
||||
inline
|
||||
label-position="right"
|
||||
>
|
||||
<el-divider content-position="left">基础信息</el-divider>
|
||||
<el-form-item label="线索名称">
|
||||
<el-input v-model="listQuery.xsmc" placeholder="请输入线索名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索编号">
|
||||
<el-input v-model="listQuery.xsbh" placeholder="请输入线索编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属专题">
|
||||
<el-input v-model="listQuery.sszt" placeholder="请输入所属专题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群体名称">
|
||||
<el-input v-model="listQuery.qtmc" placeholder="请输入群体名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群体类型">
|
||||
<el-input v-model="listQuery.qtlx" placeholder="请输入群体类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上报单位">
|
||||
<el-input v-model="listQuery.sbdw" placeholder="请输入上报单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上报时间">
|
||||
<el-date-picker
|
||||
style="width:100%"
|
||||
v-model="listQuery.sbsj"
|
||||
type="datetime"
|
||||
placeholder="请选择上报时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索内容" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.xsnr"
|
||||
type="textarea"
|
||||
style="width: 100%"
|
||||
:rows="3"
|
||||
placeholder="请输入线索内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">标签信息</el-divider>
|
||||
<el-form-item label="线索类型">
|
||||
<el-select v-model="listQuery.xslx" placeholder="请选择线索类型">
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索类型标签大类">
|
||||
<el-select
|
||||
v-model="listQuery.xsbqdl"
|
||||
placeholder="请选择线索类型标签大类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索类型标签细类">
|
||||
<el-select
|
||||
v-model="listQuery.xsbqxl"
|
||||
placeholder="请选择线索类型标签细类"
|
||||
>
|
||||
<el-option label="类型1" value="1" />
|
||||
<el-option label="类型2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索来源">
|
||||
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线索风险等级">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择线索风险等级"
|
||||
>
|
||||
<el-option label="状态1" value="1" />
|
||||
<el-option label="状态2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线索备注">
|
||||
<el-input v-model="listQuery.xsbz" placeholder="请输入线索备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="市内外">
|
||||
<el-input v-model="listQuery.snw" placeholder="请输入市内外" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否设计外地">
|
||||
<el-select
|
||||
v-model="listQuery.xsfxdj"
|
||||
placeholder="请选择是否设计外地"
|
||||
>
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指向地点">
|
||||
<el-input v-model="listQuery.zxdd" placeholder="请输入指向地点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="具体部位">
|
||||
<el-input v-model="listQuery.jtbw" placeholder="请输入具体部位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指向时间类型">
|
||||
<el-input v-model="listQuery.sjlx" placeholder="请输入指向时间类型" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="指向时间段">
|
||||
<el-date-picker
|
||||
v-model="listQuery.sjd"
|
||||
type="daterange"
|
||||
placeholder="请选择指向时间段"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">涉及人员</el-divider>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="listQuery.lxfs" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="住址">
|
||||
<el-input v-model="listQuery.zz" placeholder="请输入住址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">审批信息</el-divider>
|
||||
<el-form-item label="申请单位">
|
||||
<el-input v-model="listQuery.sqdw" placeholder="请输入申请单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人">
|
||||
<el-input v-model="listQuery.sqr" placeholder="请输入申请人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核单位">
|
||||
<el-input v-model="listQuery.shdw" placeholder="请输入审核单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审核人">
|
||||
<el-input v-model="listQuery.shr" placeholder="请输入审核人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批单位">
|
||||
<el-input v-model="listQuery.spdw" placeholder="请输入审批单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人">
|
||||
<el-input v-model="listQuery.spr" placeholder="请输入审批人" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="申请原因" style="width: 100%">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="listQuery.sqyy"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入申请原因"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
xsmc: "", // 线索名称
|
||||
xsly: "", // 线索来源
|
||||
xsbh: "", // 线索编号
|
||||
sbsj: "", // 上报时间
|
||||
xslx: "", // 线索类型
|
||||
xszt: "", // 线索状态
|
||||
xsnr: "", // 线索内容
|
||||
xm: "", // 姓名
|
||||
sfzh: "", // 身份证号
|
||||
lxfs: "", // 联系方式
|
||||
zz: "", // 住址
|
||||
sqr: "", // 申请人
|
||||
sqsj: "", // 申请时间
|
||||
sqyy: "" // 申请原因
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
<template>
|
||||
<div class="intelligence-management">
|
||||
<!-- 左边 -->
|
||||
<div class="left-panel">
|
||||
<div class="pl80">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="线索库" name="one"></el-tab-pane>
|
||||
<el-tab-pane label="人员库" name="two"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="请输入线索标题"
|
||||
suffix-icon="Search"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex mt10 just-center">
|
||||
<el-button size="small" type="primary">上报线索</el-button>
|
||||
<el-button size="small" type="primary" @click="addEdit('add',null)">新增线索</el-button>
|
||||
<el-button size="small" type="primary">查询</el-button>
|
||||
<el-button size="small">重置</el-button>
|
||||
</div>
|
||||
<div class="flex flex-warp">
|
||||
<span
|
||||
style="color: #0386fb"
|
||||
class="f12 ml10 mt4"
|
||||
v-for="(it, idex) in list.leftCoutn"
|
||||
:key="idex"
|
||||
>{{ it.label }}({{ it.value }})</span
|
||||
>
|
||||
</div>
|
||||
<div class="person-list">
|
||||
<div v-for="(item, index) in personList" :key="index" class="clue-item">
|
||||
<div class="clue-tag" v-if="item.tag">{{ item.tag }}</div>
|
||||
<span class="clue-status">处置</span>
|
||||
<div class="clue-content flex align-center">
|
||||
<img class="mr10" src="@/assets/images/icon100.png" alt="">
|
||||
<div class="clue-info">
|
||||
<div class="clue-header">*****线索</div>
|
||||
<div>编号：{{ item.number }}</div>
|
||||
<div>来源：{{ item.source }}</div>
|
||||
<div>涉及人员数量：{{ item.personCount }}</div>
|
||||
<div>指向地点：{{ item.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="right-panel">
|
||||
<div class="flex just-between align-center">
|
||||
<h2 class="title" style="color: #333">xxxx线索详情</h2>
|
||||
<el-button type="primary" size="small">收藏</el-button>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item :width="260" label="线索标题"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索编号"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索类型"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索来源"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="开始时间"
|
||||
>2020.04.12</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="截止时间"
|
||||
>2020.04.19</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="上报单位"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="指向地点"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="上报时间"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="处置状态"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="群体状态"
|
||||
>2020.04.12</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="群体名称"
|
||||
>2020.04.19</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索标签大类"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索标签细类"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="所属专题"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="市内外"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="是否涉及外地"
|
||||
>2020.04.12</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="具体部位"
|
||||
>2020.04.19</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="指向时间类型"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="指向时间备注"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="表现形式"
|
||||
>*****线索</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="涉事类型"
|
||||
>123213113212131312</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="获取手段"
|
||||
>2020.04.12</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索备注"
|
||||
>2020.04.19</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="线索内容" :span="2"
|
||||
>张三，身份证号:123，2025年，在林某...，涉</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="5" border>
|
||||
<el-descriptions-item :width="260" label="附件"
|
||||
>3.xls</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="涉及地">林芝</el-descriptions-item>
|
||||
<el-descriptions-item label="申请人">林芝</el-descriptions-item>
|
||||
<el-descriptions-item label="审核人">林芝</el-descriptions-item>
|
||||
<el-descriptions-item label="审批人">林芝</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="flex mt10 just-center">
|
||||
<el-button size="large" type="primary">核查单</el-button>
|
||||
<el-button size="large" type="primary">验收</el-button>
|
||||
</div>
|
||||
<div class="flex align-center">
|
||||
<h2 class="title" style="color: #333">******线索关联人员信息</h2>
|
||||
<span
|
||||
style="color: #0386fb"
|
||||
class="f12 ml10"
|
||||
v-for="(it, idex) in list.countList"
|
||||
:key="idex"
|
||||
>{{ it.label }}({{ it.value }})、</span
|
||||
>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
>
|
||||
<el-button type="primary">指派</el-button>
|
||||
<el-button type="primary">导出</el-button>
|
||||
</Search>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small">查看档案</el-button>
|
||||
<el-button size="small">编辑</el-button>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<div class="flex mt10 just-center">
|
||||
<el-button size="large" type="primary">保存</el-button>
|
||||
<el-button size="large" type="primary">采纳</el-button>
|
||||
<el-button size="large" type="primary">处置</el-button>
|
||||
<el-button size="large">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增 -->
|
||||
<AddForm ref="detailDiloag" ></AddForm>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AddForm from "./components/addForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref, reactive } from "vue";
|
||||
const detailDiloag = ref();
|
||||
const list = reactive({
|
||||
leftCoutn: [
|
||||
{ label: "总数", value: 100 },
|
||||
{ label: "下发总数", value: 100 },
|
||||
{ label: "已处置数", value: 10 },
|
||||
{ label: "收藏", value: 100 },
|
||||
{ label: "已反馈数量", value: 100 },
|
||||
{ label: "未反馈数量", value: 100 },
|
||||
{ label: "未处置数量", value: 100 }
|
||||
],
|
||||
countList: [
|
||||
{ label: "全部", value: 100 },
|
||||
{ label: "已稳控", value: 100 },
|
||||
{ label: "处置中", value: 10 },
|
||||
{ label: "非本地人", value: 100 },
|
||||
{ label: "未开始", value: 100 },
|
||||
{ label: "其他人", value: 100 }
|
||||
]
|
||||
});
|
||||
|
||||
const searchQuery = ref(""); // 搜索关键词
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "身份证号",
|
||||
prop: "sfzh",
|
||||
placeholder: "请输入身份证号",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
name: "张三",
|
||||
xb: "男",
|
||||
sfzh: "510154545454544454",
|
||||
sjh: "12345678900",
|
||||
jcbm: "xx公安局",
|
||||
zt: "已稳控"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
xb: "男",
|
||||
sfzh: "510154545454544454",
|
||||
sjh: "12345678900",
|
||||
jcbm: "xx公安局",
|
||||
zt: "已稳控"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
xb: "男",
|
||||
sfzh: "510154545454544454",
|
||||
sjh: "12345678900",
|
||||
jcbm: "xx公安局",
|
||||
zt: "已稳控"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
xb: "男",
|
||||
sfzh: "510154545454544454",
|
||||
sjh: "12345678900",
|
||||
jcbm: "xx公安局",
|
||||
zt: "已稳控"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
xb: "男",
|
||||
sfzh: "510154545454544454",
|
||||
sjh: "12345678900",
|
||||
jcbm: "xx公安局",
|
||||
zt: "已稳控"
|
||||
}
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
tableHeight: 300,
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "name" },
|
||||
{ label: "性别", prop: "xb" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "手机号", prop: "sjh" },
|
||||
{ label: "检查部门", prop: "jcbm" },
|
||||
{ label: "状态", prop: "zt" }
|
||||
]
|
||||
});
|
||||
|
||||
// 选中的人员
|
||||
const selectedPerson = ref(null);
|
||||
|
||||
// 搜所
|
||||
const onSearch = (data) => {
|
||||
console.log(data);
|
||||
};
|
||||
// 模拟人员列表数据
|
||||
const personList = ref([
|
||||
{
|
||||
number: "12345854",
|
||||
title: "*****线索",
|
||||
source: "*****",
|
||||
personCount: "涉及人员数量",
|
||||
location: "指向地点",
|
||||
tag: "待签收",
|
||||
status: "处置"
|
||||
},
|
||||
{
|
||||
number: "12345854",
|
||||
title: "*****线索",
|
||||
source: "*****",
|
||||
personCount: "涉及人员数量",
|
||||
location: "指向地点",
|
||||
status: "处置",
|
||||
tag: "待签收",
|
||||
}
|
||||
// 更多人员数据...
|
||||
]);
|
||||
|
||||
// 模拟相关人员数据
|
||||
const relatedPersons = ref([
|
||||
{
|
||||
name: "李四",
|
||||
relation: "朋友",
|
||||
phone: "13900139000",
|
||||
status: "正常"
|
||||
}
|
||||
// 更多相关人员数据...
|
||||
]);
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 选择人员
|
||||
const selectPerson = (person) => {
|
||||
selectedPerson.value = person;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.intelligence-management {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.left-panel {
|
||||
width: 300px;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
float: left;
|
||||
|
||||
.search-box {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.person-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
.clue-item {
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.clue-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10px;
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.clue-tag {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -27px;
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
padding: 10px 30px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
transform: rotate(-38deg);
|
||||
}
|
||||
|
||||
.clue-header {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.clue-info {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #e6f1fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: calc(100% - 310px);
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.title {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 78px;
|
||||
height: 4px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#3596f9 0%,
|
||||
rgba(53, 150, 249, 0) 100%
|
||||
);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
background: #e9e9e9;
|
||||
width: 58%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,35 +1,28 @@
|
|||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">典当业场所管理详情</span>
|
||||
<span class="title">情报语义分析{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<el-form :model="listQuery" ref="elform" :label-width="120" label-position="right">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
<el-form-item label="语义名称">
|
||||
<el-input v-model="listQuery.yymc" placeholder="请输入语义名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="张三"/>
|
||||
<el-form-item label="要素类型">
|
||||
<el-input v-model="listQuery.ddwplb" placeholder="请输入要素类型"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="要素名称">
|
||||
<el-input v-model="listQuery.ysmc" placeholder="请输入要素名称"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="时间">
|
||||
<el-input v-model="listQuery.sgfxsj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="照片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="要素描述">
|
||||
<el-input v-model="listQuery.ysms" type="textarea" rows="3" placeholder="要素描述"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
|
@ -39,7 +32,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const elform = ref();
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
|
|
@ -48,13 +41,36 @@ const listQuery = ref({
|
|||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
const title = ref('');
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = '新增'
|
||||
if(row){
|
||||
title.value = type == 'edit' ? '编辑' :'详情';
|
||||
}
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
|
@ -66,14 +82,6 @@ defineExpose({init})
|
|||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -111,14 +119,6 @@ defineExpose({init})
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="情报语义分析">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><Dete /></el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
<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"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem([row.id])">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="detailDiloag" @updateDate="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "语义名称", prop: 'yymc', placeholder: "请输入语义名称", showType: "input" },
|
||||
{ label: "要素类型", prop: 'yslx', placeholder: "请选择要素类型", showType: "select" },
|
||||
{ label: "要素名称", prop: 'ysmc', placeholder: "请输入要素名称", showType: "input" }
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
xh: 1,
|
||||
yymc: "XX公司",
|
||||
yslx: "实体识别",
|
||||
ysmc: "组织",
|
||||
ysms: "林芝某公司",
|
||||
bz: ""
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
xh: 2,
|
||||
yymc: "林芝工布公园",
|
||||
yslx: "实体识别",
|
||||
ysmc: "地点",
|
||||
ysms: "工布公园",
|
||||
bz: ""
|
||||
}
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "语义名称", prop: "yymc" },
|
||||
{ label: "要素类型", prop: "yslx" },
|
||||
{ label: "要素名称", prop: "ysmc" },
|
||||
{ label: "要素描述", prop: "ysms" },
|
||||
{ label: "备注", prop: "bz" }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// qcckGet(queryFrom.value).then((res)=>{
|
||||
// pageData.tableData = res.data.list;
|
||||
// pageData.total = res.data.total;
|
||||
// pageData.keyCount++;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, 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>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当物品信息管理"/>
|
||||
<PageTitle title="操作记录"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
174
src/views/home/echarts/3DbarEcharts.vue
Normal file
174
src/views/home/echarts/3DbarEcharts.vue
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { fa } from "element-plus/es/locale.mjs";
|
||||
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
|
||||
const props = defineProps({
|
||||
echartsId:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:{
|
||||
list:[],
|
||||
colors:[]
|
||||
}
|
||||
}
|
||||
});
|
||||
watch(()=>props.data,val=>{
|
||||
nextTick(()=>{ haandleData(val) })
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
const haandleData = (data)=>{
|
||||
let val = [],x_value=[]
|
||||
let color = data.colors;
|
||||
let topColor = data.topColor;
|
||||
data.list.forEach(item=>{
|
||||
val.push(item.val);
|
||||
x_value.push(item.label);
|
||||
})
|
||||
chartFn(val,x_value,color,topColor)
|
||||
}
|
||||
|
||||
function chartFn(val,x_value,color,topColor) {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
const sideData1 = val//[100, 110, 120, 134, 190, 230];
|
||||
const name = ''; //"销量";
|
||||
var x_value = x_value;//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
var option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
top:"30px",
|
||||
left:"5px",
|
||||
right:"0px",
|
||||
bottom:"10%",
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: x_value,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#333" //X轴文字颜色
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:'单位：元/吨',
|
||||
nameTextStyle: { color: "#fff" },
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#333" //X轴文字颜色
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: name,
|
||||
tooltip: { show: false },
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: color ? color[0] : '#28EEBF'// 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
data: sideData1,
|
||||
barGap: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 10,
|
||||
textStyle: {
|
||||
color: '#0EBBC5',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
formatter: '{c}'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: color ? color[0] : '#28EEBF'// 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0,
|
||||
data: sideData1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff',
|
||||
color: topColor || '#1bd6c2' // 顶部方块的颜色
|
||||
},
|
||||
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
|
||||
symbolSize: ['22', '12'], // 第一个值控制顶部方形大小
|
||||
symbolOffset: ['-0', '-6'], // 控制顶部放行 左右和上下
|
||||
symbolRotate: -30,
|
||||
symbolPosition: 'end',
|
||||
barGap: 0,
|
||||
data: sideData1,
|
||||
z: 3,
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener('resize',function(){
|
||||
myChart.resize();
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -9,6 +9,10 @@ const props = defineProps({
|
|||
type:String,
|
||||
default:'lineId'
|
||||
},
|
||||
color:{
|
||||
type:String,
|
||||
default:'#fff'
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:[]
|
||||
|
|
@ -20,13 +24,12 @@ watch(()=>props.data,val=>{
|
|||
|
||||
function chartFn() {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
var option;
|
||||
option = {
|
||||
var option = {
|
||||
grid: {
|
||||
top: "8%",
|
||||
right: "2%",
|
||||
left: "10%",
|
||||
bottom: "7%",
|
||||
bottom: "12%",
|
||||
containLabel:true
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -51,7 +54,7 @@ function chartFn() {
|
|||
axisLabel: { color: "#fff" },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
color: props.color,
|
||||
interval: 0, // 强制显示所有标签
|
||||
// rotate: 15, // 标签旋转角度
|
||||
}
|
||||
|
|
@ -67,7 +70,7 @@ function chartFn() {
|
|||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: "#fff" },
|
||||
axisLabel: { color: props.color },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
|
|||
119
src/views/home/echarts/pieEcharts.vue
Normal file
119
src/views/home/echarts/pieEcharts.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import { ref, watch ,defineProps,nextTick } from "vue";
|
||||
const props = defineProps({
|
||||
echartsId:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
},
|
||||
color:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
});
|
||||
watch(()=>props.data,val=>{
|
||||
nextTick(()=>{ handleDate(val) })
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
const handleDate = (val)=>{
|
||||
let newArray = val.map(v=>{
|
||||
let obj = {
|
||||
value: v.value,
|
||||
name: v.label,
|
||||
}
|
||||
if(v.color) obj.itemStyle = { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: v.color[0] }, { offset: 1, color: v.color[1] } ])}
|
||||
return obj
|
||||
})
|
||||
initChart(newArray)
|
||||
}
|
||||
|
||||
const initChart = (data) => {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
const option = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
borderColor: "#0C2E5A",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: "middle",
|
||||
right: "5%",
|
||||
orient: "vertical",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: props.color,
|
||||
fontSize: 14
|
||||
},
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
icon: "roundRect",
|
||||
formatter: function (name) {
|
||||
const data = option.series[0].data;
|
||||
const target = data.find((item) => item.label === name);
|
||||
if (target) {
|
||||
return `${name} ${target.value} ${( (target.value / 50) * 100 ).toFixed(0)}%`;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "情报反馈统计",
|
||||
type: "pie",
|
||||
radius: ["40%", "75%"],
|
||||
center: ["30%", "50%"],
|
||||
startAngle: 90,
|
||||
zlevel: 10,
|
||||
itemStyle: {},
|
||||
selectedMode: "single",
|
||||
selectedOffset: 30,
|
||||
animation: true,
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
|
||||
data: data,
|
||||
zlevel: 10,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 10,
|
||||
itemStyle: {
|
||||
shadowBlur: 30,
|
||||
shadowColor: "rgba(0,0,0,0.6)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.echartsBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,18 +41,6 @@ module.exports = {
|
|||
changeOrigin: true,
|
||||
logLevel: "debug"
|
||||
},
|
||||
"/data/rec": {
|
||||
target: "http://80.93.24.195:8181",
|
||||
changeOrigin: true,
|
||||
logLevel: "debug",
|
||||
pathRewrite: {
|
||||
"^/data/rec": "/"
|
||||
}
|
||||
},
|
||||
"/restcloud": {
|
||||
target: "http://www.api.sc:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
chainWebpack(config) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user