更新页面
This commit is contained in:
@ -29,10 +29,7 @@
|
||||
:header-cell-class-name="() => 'myTableHeadBgColorDark'"
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{
|
||||
height:
|
||||
getConfiger.rowHeight === 'auto'
|
||||
? getConfiger.rowHeight
|
||||
: getConfiger.rowHeight + 'px'
|
||||
height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'
|
||||
}"
|
||||
>
|
||||
<el-table-column
|
||||
|
@ -70,8 +70,7 @@
|
||||
:isAll="item.isAll"
|
||||
@getDepValue="getdep($event,item.depMc)"
|
||||
v-model="listQuery[item.prop]"
|
||||
:placeholder="listQuery[item.depMc] ? listQuery[item.depMc]:'请选择'"
|
||||
/>
|
||||
:placeholder="listQuery[item.depMc] ? listQuery[item.depMc]:'请选择'" />
|
||||
</template>
|
||||
|
||||
<!-- 上传 upload -->
|
||||
|
@ -450,7 +450,7 @@ export const publicRoutes = [
|
||||
name: "ResearchHome",
|
||||
component: () => import("@/views/backOfficeSystem/JudgmentHome/ResearchHome/index"),
|
||||
meta: {
|
||||
title: "研判首页",
|
||||
title: "专题研判",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
|
@ -128,7 +128,7 @@ const formData = ref([
|
||||
{ label: "群体成立时间", prop: "qtClsj", type: "date" },
|
||||
{ label: "群体标签", prop: "bqList", type: "slot", width: "100%" },
|
||||
{ label: "两群采集录入", prop: "lqxxList", type: "slot", width: "100%" },
|
||||
{ label: "管辖单位", prop: "gxSsbmdm",depMc:'gxSsbmmc', type: "department" },
|
||||
{ label: "管辖单位", prop: "gxSsdwdm",depMc:'gxSsdwmc', type: "department" },
|
||||
{ label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
|
||||
{ label: "入库截至时间", prop: "zdrRkjssj", type: "datetime" },
|
||||
{ label: "列控原因", prop: "zdrLkyy", type: "textarea",width: "100%" },
|
||||
|
@ -70,7 +70,7 @@
|
||||
<div class="flex one_text_detail">创建单位:{{ row.xtCjbmmc }}</div>
|
||||
</template>
|
||||
<template #gkxx="{ row }">
|
||||
<div class="flex one_text_detail">管辖单位:{{ row.gxSsbmmc }}</div>
|
||||
<div class="flex one_text_detail">管辖单位:{{ row.gxSsdwmc }}</div>
|
||||
<div class="flex one_text_detail">列控原因:{{ row.zdrLkyy }}</div>
|
||||
<div class="flex one_text_detail">开始时间:{{ row.zdrRkkssj }}</div>
|
||||
<div class="flex one_text_detail">截至时间:{{ row.zdrRkjssj }}</div>
|
||||
|
@ -26,7 +26,7 @@
|
||||
<div class="rightbox">
|
||||
<div class="title">
|
||||
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
|
||||
<span class="ml10 mr10">研判首页</span>
|
||||
<span class="ml10 mr10">专题研判</span>
|
||||
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
|
||||
<el-button class="btn" type="primary">研判报告</el-button>
|
||||
</div>
|
||||
|
@ -46,7 +46,7 @@
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
|
||||
|
||||
<!-- <el-popover placement="left" :visible="row.visible" :width="400" trigger="click">
|
||||
<el-popover placement="left" :visible="row.visible" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<el-link size="small" type="primary" @click.stop="handleSh(row)">审核</el-link>
|
||||
</template>
|
||||
@ -71,7 +71,7 @@
|
||||
<el-button size="small" @click.stop="cancel(row)">取消</el-button>
|
||||
<el-button size="small" type="primary" @click.stop="handleSumbit(row)">确定</el-button>
|
||||
</div>
|
||||
</el-popover> -->
|
||||
</el-popover>
|
||||
|
||||
<el-link size="small" type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
<!-- 续报 == 编辑 -->
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人力情报信息采集流转">
|
||||
<el-button type="primary">情报研判分析</el-button>
|
||||
<el-button type="primary" @click="showHome = true">情报研判分析</el-button>
|
||||
<el-button type="primary" @click="handleHB">线索串联</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
<ZlForm ref="zlDialog" v-if="isShow" :dic="{D_GS_XS_ZLLX,D_GS_ZDQT_FXDJ}"></ZlForm>
|
||||
<HbForm ref="isShowhB" :dic="{D_GS_XS_LX,D_GS_XS_LY,D_GS_XS_CZZT,D_BZ_XSSHZT,D_GS_XS_QTLX}"></HbForm>
|
||||
<teleport to="#app">
|
||||
<!-- <Qbypfx></Qbypfx> -->
|
||||
<Qbypfx v-if="showHome" @close="showHome = false"></Qbypfx>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
@ -79,6 +79,7 @@ const {D_GS_ZDQT_FXDJ,D_GS_XS_ZLLX,D_GS_XS_CZZT,D_GS_XS_LY, D_BZ_SSZT,D_BZ_SF,D_
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const isShow = ref(false)
|
||||
const showHome = ref(false)
|
||||
const zlDialog = ref(false)
|
||||
const isShowhB = ref()
|
||||
const searchConfiger = ref([
|
||||
@ -97,11 +98,6 @@ const pageData = reactive({
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
|
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:fixed ="false"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive } from "vue";
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
tableHeight:143,
|
||||
controlsWidth: 52,
|
||||
tableColumn: [
|
||||
{ label: "号码类型", prop: "zzMc",width:'70px' },
|
||||
{ label: "号码", prop: "sjrs",width:'70px'},
|
||||
{ label: "所属人员", prop: "bq",width:'50px'},
|
||||
{ label: "线索数", prop: "xss",width:'70px'},
|
||||
{ label: "指令数", prop: "zls" ,width:'70px'},
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table .cell{
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-table tr{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:fixed ="false"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive } from "vue";
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
tableHeight:143,
|
||||
controlsWidth: 52,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "zzMc",width:'70px' },
|
||||
{ label: "身份证", prop: "sjrs",width:'70px'},
|
||||
{ label: "标签", prop: "bq",width:'50px'},
|
||||
{ label: "线索数", prop: "xss",width:'70px'},
|
||||
{ label: "指令数", prop: "zls" ,width:'70px'},
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table .cell{
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-table tr{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:fixed ="false"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive } from "vue";
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
tableHeight:143,
|
||||
controlsWidth: 52,
|
||||
tableColumn: [
|
||||
{ label: "线索名称", prop: "xsMc",width:'70px' },
|
||||
{ label: "涉及人数", prop: "sjrs",width:'70px'},
|
||||
{ label: "标签", prop: "bq",width:'50px'},
|
||||
{ label: "风险等级", prop: "fxdj",width:'70px'},
|
||||
{ label: "指向地点", prop: "zxdz" ,width:'70px'},
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table .cell{
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-table tr{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:fixed ="false"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { reactive } from "vue";
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
tableHeight:143,
|
||||
controlsWidth: 52,
|
||||
tableColumn: [
|
||||
{ label: "组织名称", prop: "zzMc",width:'70px' },
|
||||
{ label: "涉及人数", prop: "sjrs",width:'70px'},
|
||||
{ label: "标签", prop: "bq",width:'50px'},
|
||||
{ label: "线索数", prop: "xss",width:'70px'},
|
||||
{ label: "指令数", prop: "zls" ,width:'70px'},
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table .cell{
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-table tr{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell{
|
||||
background: rgba(239, 245, 247,1) !important;
|
||||
}
|
||||
</style>
|
@ -1,68 +1,268 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header flex just-between">
|
||||
<span>情报研判分析</span>
|
||||
<span class="pointer"><el-icon><Close /></el-icon></span>
|
||||
</div>
|
||||
<div class="seachsBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"/>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="contant-left aside">
|
||||
<div></div>
|
||||
<div class="container">
|
||||
<div class="header flex just-between">
|
||||
<span>情报研判分析</span>
|
||||
<span class="pointer" @click="close"><el-icon><Close /></el-icon></span>
|
||||
</div>
|
||||
<div class="seachsBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch">
|
||||
<template #defaultSlot>
|
||||
<div class="flex align-center">
|
||||
<span class="marks" @click="active = idex" :class="active == idex ? 'activeBtn' : ''" v-for="(it, idex) in time" :key="idex">{{ it.label }}</span>
|
||||
<el-date-picker v-model="listQuery.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="contant-left aside">
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点线索</div>
|
||||
<div class="cnt">
|
||||
<Hot_xs></Hot_xs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点组织</div>
|
||||
<div class="cnt">
|
||||
<Hot_zz></Hot_zz>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点人员</div>
|
||||
<div class="cnt">
|
||||
<Hot_ry></Hot_ry>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点号码</div>
|
||||
<div class="cnt">
|
||||
<Hot_hm></Hot_hm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<GdMap></GdMap>
|
||||
<ul class="btns">
|
||||
<li><span>热点集访单位</span></li>
|
||||
<li><span>点位图</span></li>
|
||||
<li><span>指令分布</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contant-right aside">
|
||||
<div class="model">
|
||||
<div class="modelTitle">诉求分类</div>
|
||||
<div class="cnt">
|
||||
<Zqfl></Zqfl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">重点线索分类</div>
|
||||
<div class="cnt">
|
||||
<Zdxsfl></Zdxsfl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">指令次数</div>
|
||||
<div class="cnt">
|
||||
<Zlcs></Zlcs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contant-right aside"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Hot_xs from './hot_xs/index.vue'
|
||||
import Hot_zz from './hot_zz/index.vue'
|
||||
import Hot_ry from './hot_ry/index.vue'
|
||||
import Hot_hm from './hot_hm/index.vue'
|
||||
import Zqfl from './zqfl/index.vue'
|
||||
import Zlcs from './zlcs/index.vue'
|
||||
import Zdxsfl from './zdxsfl/index.vue'
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { reactive, ref } from 'vue';
|
||||
const searchConfiger = reactive([
|
||||
{ label: "所属部门", prop: 'ssbmdm', placeholder: "请输入所属部门", showType: "department" },
|
||||
{ label: "内容关键字", prop: 'xsNr', placeholder: "请输入语义关键字", showType: "input" },
|
||||
{ label: "线索类型", prop: 'xlLx', placeholder: "请选择线索类型", showType: "select"},
|
||||
{ label: "线索来源", prop: 'qbLy', placeholder: "请选择线索来源", showType: "select"},
|
||||
{ label: "指向地点", prop: 'zxdz', placeholder: "请输入指向地点", showType: "input" },
|
||||
import { reactive, ref } from "vue";
|
||||
const emits = defineEmits(['close'])
|
||||
const listQuery = ref({});
|
||||
const active = ref(0);
|
||||
const time = reactive([
|
||||
{ label: "今天", value: "10" },
|
||||
{ label: "近一周", value: "20" },
|
||||
{ label: "近一月", value: "30" },
|
||||
{ label: "近一季度", value: "40" },
|
||||
{ label: "近一年", value: "50" }
|
||||
]);
|
||||
const searchConfiger = reactive([
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "ssbmdm",
|
||||
placeholder: "请选择",
|
||||
showType: "department"
|
||||
},
|
||||
{
|
||||
label: "数据周期",
|
||||
prop: "sjzq",
|
||||
placeholder: "请选择",
|
||||
showType: "defaultSlot"
|
||||
},
|
||||
{
|
||||
label: "热点集访单位",
|
||||
prop: "jfdw",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{
|
||||
label: "行为特征",
|
||||
prop: "xwtz",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{ label: "指向地点", prop: "zxdz", placeholder: "请输入", showType: "input" },
|
||||
{
|
||||
label: "事件诱因类型",
|
||||
prop: "yxlx",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{ label: "诉求类型", prop: "sqlx", placeholder: "请选择", showType: "select" }
|
||||
]);
|
||||
|
||||
// 关闭
|
||||
function close(){
|
||||
emits('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: rgb(232, 237, 246);
|
||||
color: #333;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.header{
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.seachsBox{
|
||||
|
||||
.seachsBox {
|
||||
margin-bottom: 10px;
|
||||
.marks {
|
||||
padding: 5px 6px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
border: 1px solid #e1e1e1;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activeBtn {
|
||||
border: 1px solid #0072ff;
|
||||
background: #0072ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .pageSearch {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
padding: 0px 15px 0px;
|
||||
}
|
||||
}
|
||||
.contant{
|
||||
position: relative;
|
||||
height: calc(100% - 65px);
|
||||
|
||||
.contant {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: calc(100% - 160px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.aside{
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
.aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: red;
|
||||
.model {
|
||||
background: #fff;
|
||||
flex: 1 0 0;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
.modelTitle {
|
||||
position: relative;
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #333;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width:50px ;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right,#0072ff,#fff);
|
||||
}
|
||||
}
|
||||
.cnt{
|
||||
height: calc(100% - 30px);
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contant-left{
|
||||
left: 0;
|
||||
}
|
||||
.contant-right{
|
||||
right: 0;
|
||||
.map{
|
||||
flex: 1 0 0;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
.btns{
|
||||
position: absolute;
|
||||
bottom:0 ;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
li{
|
||||
white-space: nowrap;
|
||||
padding: 10px 30px;
|
||||
margin: 0 10px;
|
||||
background: #004597;
|
||||
color: #fff;
|
||||
transform: skewX(-30deg);
|
||||
cursor: pointer;
|
||||
span{
|
||||
display: inline-block;
|
||||
transform: skewX(30deg);
|
||||
}
|
||||
&:nth-child(2){
|
||||
background: #ee8134;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="comom-cnt">
|
||||
<LineEcharts echartsId="qbsbEcharts111" :data="dataList"></LineEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
|
||||
import { reactive, onMounted } from 'vue';
|
||||
|
||||
const dataList = reactive({
|
||||
xData:['巴宜区','工布江达县','米林县','墨脱县','波密县','察隅县','朗县'],
|
||||
color:['#0386FB','#00FFFF'],
|
||||
labelColor:'#333',
|
||||
list:[
|
||||
{label:'总数',val:[10,0,10,0,10,0,0]},
|
||||
{label:'已处置',val:[0,10,10,10,0,10,0]},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.comom-cnt{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<ul class="box-zl">
|
||||
<li class="items" v-for="(it,idx) in list" :key="idx">
|
||||
<div>{{ it.num }}</div>
|
||||
<div>{{ it.label }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
const list = reactive([
|
||||
{ label:'线索数量', num :0 },
|
||||
{ label:'线索转指令数量', num :0 },
|
||||
{ label:'关联群体数量', num :0 },
|
||||
{ label:'关联人员数量', num :0 },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-zl{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 4px;
|
||||
box-sizing: border-box;
|
||||
.items{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 48%;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(to top,#ff9585,#ffffff);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(to top, #fc6750, #ffffff) 1;
|
||||
&:nth-child(2){
|
||||
background: linear-gradient(to top,#ffcc8d,#ffffff);
|
||||
border-image: linear-gradient(to top, #e09c27, #ffffff) 1;
|
||||
}
|
||||
&:nth-child(3){
|
||||
background: linear-gradient(to top,#81eefe,#ffffff);
|
||||
border-image: linear-gradient(to top, #27dce0, #ffffff) 1;
|
||||
}
|
||||
&:nth-child(4){
|
||||
background: linear-gradient(to top,#96ccfe,#ffffff);
|
||||
border-image: linear-gradient(to top, #407fba, #ffffff) 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="comom-cnt">
|
||||
<PieEcharts echartsId="zqflEcharts" color="#333" :data="dataList"></PieEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
||||
import { reactive, onMounted } from 'vue';
|
||||
|
||||
const dataList = reactive([
|
||||
{
|
||||
label: "待办",
|
||||
value: 2056,
|
||||
color:['#FF6B9A','#FF4B7A']
|
||||
},
|
||||
{
|
||||
label: "已办",
|
||||
value: 4356,
|
||||
color:['#FFAA33','#FF8A00'],
|
||||
},
|
||||
]);
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.comom-cnt{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
@ -1,291 +0,0 @@
|
||||
<template>
|
||||
<div style="height:100%;width:100%" :id="echartsId"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import { fa } from "element-plus/es/locale.mjs";
|
||||
import { onMounted, toRefs,nextTick, defineProps,ref, reactive } from "vue";
|
||||
const props = defineProps({
|
||||
echartsId:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
},
|
||||
// 传入数据生成 option
|
||||
data:{
|
||||
type:Array,
|
||||
default:[
|
||||
{
|
||||
name: "待办",
|
||||
value: 2056,
|
||||
itemStyle: {
|
||||
// color: "#2A71FF"
|
||||
echarts: "rgba(44,44,44,0.8)"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "已办",
|
||||
value: 4356,
|
||||
itemStyle: {
|
||||
color: "#00EDFE"
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
watch(()=>props.data,val=>{
|
||||
nextTick(()=>{
|
||||
echartInit()
|
||||
})
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
|
||||
const echartInit = () => {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
const series = getPie3D(props.data, 0.8, 240, 28, 26, 0.5);
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
// show: false,
|
||||
opacity: 1,
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
// show: false,
|
||||
length: 20,
|
||||
length2: 25
|
||||
},
|
||||
startAngle: -30, //起始角度,支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
// radius: ["40%", "60%"],
|
||||
center: ["40%", "50%"],
|
||||
data: props.data,
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
// 准备待返回的配置项,把准备好的 legendData、series 传入。
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
orient: "vertical",
|
||||
data: props.data.map((item) => item.name),
|
||||
// data: ["待办", "已办", "未处理", "忽略"],
|
||||
top: "center",
|
||||
itemGap: 14,
|
||||
itemHeight: 8,
|
||||
itemWidth: 17,
|
||||
right: "2%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
animation: true,
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if ( params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d" ) {
|
||||
return `${ params.seriesName }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color };"></span>${option.series[params.seriesIndex].pieData.value + "人"}`;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
title: {
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0, 29, 75, 0.65)",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB"
|
||||
},
|
||||
normal: {
|
||||
show: false,
|
||||
length: 20,
|
||||
length2: 20
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{d}%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14px"
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 0.01,
|
||||
bottom: "50%",
|
||||
left: "-12%",
|
||||
// environment: "rgba(255,255,255,0)",// 环境颜色
|
||||
viewControl: {
|
||||
distance: 180, //圆环的大小 ,值越大换越小
|
||||
alpha: 25, //倾斜的角度
|
||||
beta: 0, //旋转的角度
|
||||
autoRotate: false // 取消自动旋转
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
function getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, height ) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
// 如果只有一个扇形,则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
|
||||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
|
||||
// 计算高亮效果的放大比例(未高亮,则比例为 1)
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return ( offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
function getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||
|
||||
// 为每一个饼图数据,生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, type: "surface",
|
||||
parametric: true,
|
||||
wireframe: { show: false },
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != "undefined") {
|
||||
let itemStyle = {};
|
||||
typeof pieData[i].itemStyle.color != "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
||||
typeof pieData[i].itemStyle.opacity != "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
console.log(series[i]);
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
@ -46,7 +46,6 @@ import ZdryWarning from './model/zdryWarning.vue'
|
||||
import Zdgk from './model/zdgk.vue'
|
||||
import Fjqk from './model/fjqk.vue'
|
||||
import Yszs from './model/yszs.vue'
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -4,7 +4,6 @@
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<pieEcharts echartsId='qbfk' :data="countData"></pieEcharts>
|
||||
<!-- <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
Reference in New Issue
Block a user