更新研判首页和echarts组件
This commit is contained in:
parent
1fafd27208
commit
6555a6d277
|
|
@ -210,6 +210,15 @@ export const publicRoutes = [
|
|||
name: "ResearchJudgment",
|
||||
meta: { title: "线索研判盯办系统", icon: "article" },
|
||||
children: [
|
||||
{
|
||||
path: "/ResearchHome",
|
||||
name: "ResearchHome",
|
||||
component: () => import("@/views/backOfficeSystem/ResearchJudgment/ResearchHome/index"),
|
||||
meta: {
|
||||
title: "研判首页",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/DatAcquisition",
|
||||
name: "DatAcquisition",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>22</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,81 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="网上会议室" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<div class="flexcb">
|
||||
<div class="btns">
|
||||
<el-button type="primary">新增</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</div>
|
||||
<Search :searchArr="searchArrMeet" @submit="onSearch" :key="pageData.keyCount + 1" class="search" />
|
||||
</div>
|
||||
|
||||
<div class="list noScollLine">
|
||||
<div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
|
||||
<div class="top">
|
||||
<div class="title ellipsis">{{ item.title }}</div>
|
||||
<div class="info h36 ellipsis2">会商内容：{{ item.hynr }}</div>
|
||||
<div class="info h36 ellipsis2">关联线索：{{ item.lxxs }}</div>
|
||||
<div class="info h36 ellipsis2">涉及人员：{{ item.sjry }}</div>
|
||||
</div>
|
||||
|
||||
<div class="mid">
|
||||
<div class="left">
|
||||
<div class="title ellipsis">参会人员：{{ item.chry }}</div>
|
||||
<div class="desc">
|
||||
<div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="`item${index}`">{{ i + 1 }}.{{ el }}</div>
|
||||
<!-- <div class="info ellipsis">2.应抓捕赵某，王某XXXXXXXXX王某XXXXXXXXXXXXXXXX等人</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" size="small">加入会议</el-button>
|
||||
<el-button type="primary" size="small">反馈情况</el-button>
|
||||
<el-button type="primary" size="small">处置下发</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<el-link type="primary">
|
||||
<el-icon><ChatDotSquare /></el-icon>
|
||||
评论</el-link
|
||||
>
|
||||
<el-link type="primary"
|
||||
><el-icon><VideoPlay /></el-icon>会议回放</el-link
|
||||
>
|
||||
<el-link type="danger"
|
||||
><el-icon><Delete /></el-icon>删除</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
<div class="titleBox">
|
||||
<PageTitle title="网上会议室" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<div class="flexcb">
|
||||
<div class="btns">
|
||||
<el-button type="primary">新增</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</div>
|
||||
<Search :searchArr="searchArrMeet" @submit="onSearch" :key="pageData.keyCount + 1" class="search" />
|
||||
</div>
|
||||
|
||||
<div class="list noScollLine">
|
||||
<div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
|
||||
<div class="top">
|
||||
<div class="title ellipsis">{{ item.title }}</div>
|
||||
<div class="info h20 ellipsis">会商内容：{{ item.hynr }}</div>
|
||||
<div class="info h20 ellipsis">关联线索：{{ item.lxxs }}</div>
|
||||
<div class="info h20 ellipsis">涉及人员：{{ item.sjry }}</div>
|
||||
<div class="info h20 ellipsis">会商处置意见：xxxxxxx线索</div>
|
||||
</div>
|
||||
|
||||
<div class="mid">
|
||||
<div class="left">
|
||||
<div class="title ellipsis">参会人员：{{ item.chry }}</div>
|
||||
<div class="desc">
|
||||
<div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="i">{{ i + 1 }}.{{ el }}</div>
|
||||
<!-- <div class="info ellipsis">2.应抓捕赵某，王某XXXXXXXXX王某XXXXXXXXXXXXXXXX等人</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" size="small">加入会议</el-button>
|
||||
<el-button type="primary" size="small">反馈情况</el-button>
|
||||
<el-button type="primary" size="small">处置下发</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<el-link type="primary"><el-icon><ChatDotSquare /></el-icon>评论</el-link>
|
||||
<el-link type="primary"><el-icon><VideoPlay /></el-icon>会议回放</el-link>
|
||||
<el-link type="primary"><el-icon><Edit /></el-icon>详情</el-link>
|
||||
<el-link type="danger"><el-icon><Delete /></el-icon>删除</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.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/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
|
@ -220,12 +213,6 @@
|
|||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = val => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = val => {
|
||||
queryFrom.value = { ...val };
|
||||
|
|
@ -256,7 +243,7 @@
|
|||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
// detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
|
|
@ -295,7 +282,7 @@
|
|||
.list-item {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
height: 280px;
|
||||
height: 254px;
|
||||
width: 380px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
|
@ -315,8 +302,6 @@
|
|||
color: black;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
// height: 24px;
|
||||
// line-height: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.info {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="yp—home flex">
|
||||
<div class="leftbox">
|
||||
<div class="title">
|
||||
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
|
||||
<span class="ml10 mr10">专题统计</span>
|
||||
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
|
||||
</div>
|
||||
<div class="commCnt">
|
||||
<div class="hh50">
|
||||
<div class="comm-title">处置统计</div>
|
||||
<div class="echartsBox">
|
||||
<MoreBarEcharts echartsId="cztjEcharts" :data="obj.data_cztj"></MoreBarEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hh50">
|
||||
<div class="comm-title">会商统计</div>
|
||||
<div class="echartsBox">
|
||||
<LineEcharts echartsId="hstjEcharts" :data="obj.data_hstj"></LineEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
|
||||
</div>
|
||||
<div class="commCnt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
|
||||
import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
|
||||
import { reactive } from 'vue';
|
||||
const obj = reactive({
|
||||
data_cztj:{
|
||||
xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
|
||||
color:[['#0DBAC5','#28EEBF'],['#F06C0D','#EEB416']],
|
||||
labelColor:'#000',
|
||||
list:[
|
||||
{label:'总数',val:[30,20,10,60,50,60,35,45,20]},
|
||||
{label:'未办结',val:[40,30,20,50,30,44,50,45,62]},
|
||||
]
|
||||
},
|
||||
data_hstj:{
|
||||
xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
|
||||
color:['#0386FB','#00FFFF'],
|
||||
labelColor:'#000',
|
||||
list:[
|
||||
{label:'总数',val:[30,20,10,60,50,60,35,45,20]},
|
||||
{label:'已会商',val:[40,30,20,50,30,44,50,45,62]},
|
||||
]
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.yp—home{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
.leftbox{
|
||||
width:500px;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.rightbox{
|
||||
flex: 1 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin common($width: 16px,$opacity:1){
|
||||
height: $width;
|
||||
width: $width;
|
||||
border-radius: 50%;
|
||||
background: #0386FB;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
// 共同
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
.sircle{
|
||||
display: inline-block;
|
||||
}
|
||||
.sircleL1{
|
||||
@include common(8px,0.5);
|
||||
}
|
||||
.sircleL2{
|
||||
@include common(12px,0.75);
|
||||
}
|
||||
.sircleL3{
|
||||
@include common(16px);
|
||||
}
|
||||
.sircleR1{
|
||||
@include common(16px);
|
||||
}
|
||||
.sircleR2{
|
||||
@include common(12px,0.75);
|
||||
}
|
||||
.sircleR3{
|
||||
@include common(8px,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.commCnt{
|
||||
height: calc(100% - 60px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
.comm-title{
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 78px;
|
||||
height: 4px;
|
||||
background: linear-gradient( 90deg, #3596F9 0%, rgba(53,150,249,0) 100%);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
}
|
||||
.echartsBox{
|
||||
height: calc(100% - 30px);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { el } from "element-plus/es/locale.mjs";
|
||||
import { on } from "element-plus/lib/utils";
|
||||
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
|
||||
|
||||
|
|
@ -16,6 +17,9 @@ const props = defineProps({
|
|||
default:{
|
||||
xData:[],
|
||||
color:[],
|
||||
stack:false, //fasle 并排展示 ，true 堆叠展示
|
||||
barWidth:'12px',
|
||||
labelColor:'#fff', //横坐标颜色 - 纵坐标颜色 - 标题颜色
|
||||
list:[]
|
||||
}
|
||||
}
|
||||
|
|
@ -29,23 +33,30 @@ watch(()=>props.data,val=>{
|
|||
function init (val) {
|
||||
let color = val.color;
|
||||
let list = val.list
|
||||
let total = 0
|
||||
let series = list.map((item ,idx)=>{
|
||||
let obj = {
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
name:item.label,
|
||||
data:item.val,
|
||||
barGap:'80%',
|
||||
barWidth: "30px",
|
||||
itemStyle:{normal: { color: color[idx] }}
|
||||
barWidth: val.barWidth ? val.barWidth: "12px",
|
||||
}
|
||||
if(item.label == '总数'){
|
||||
obj.stack = ''
|
||||
obj.z = -1
|
||||
obj.barGap = '-100%'
|
||||
obj.label = { normal:{show:true,position:'top',color:'#EB00FF'} }
|
||||
|
||||
// 是否渐变
|
||||
if( Array.isArray(color[idx]) && color[idx].length > 0){
|
||||
obj.label = { normal:{show:true,position:'top',color:color[idx][0] ? color[idx][0] : '#EB00FF'} }
|
||||
obj.itemStyle = {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0, color: color[idx][0] },{ offset: 1, color: color[idx][1] }],false)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
obj.itemStyle = {normal: {color: color[idx] ? color[idx] : '#EB00FF'}}
|
||||
obj.label = { normal:{show:true,position:'top',color:color[idx] ? color[idx] : '#EB00FF'} }
|
||||
}
|
||||
|
||||
// 是否堆叠
|
||||
if(val.stack) obj.stack = 'total';
|
||||
|
||||
return obj;
|
||||
})
|
||||
chartFn(series)
|
||||
|
|
@ -55,15 +66,15 @@ function chartFn(series) {
|
|||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
var option = {
|
||||
grid: {
|
||||
top: "30%",
|
||||
top: "12%",
|
||||
right: "2%",
|
||||
left: "2%",
|
||||
bottom: "3%",
|
||||
bottom: "5%",
|
||||
containLabel:true
|
||||
},
|
||||
legend:{
|
||||
data:props.data.list.map(v=>{return v.label}),
|
||||
textStyle: { color: "#fff"},
|
||||
textStyle: { color: props.data.labelColor || "#fff" },
|
||||
icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
|
||||
itemWidth:16,
|
||||
itemHeight:8,
|
||||
|
|
@ -84,7 +95,7 @@ function chartFn(series) {
|
|||
data:props.data.xData,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: "#fff",magin:20 },
|
||||
axisLabel: { color: props.data.labelColor || "#fff",magin:20 },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
|
|
@ -97,7 +108,7 @@ function chartFn(series) {
|
|||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: "#fff" },
|
||||
axisLabel: { color: props.data.labelColor || "#fff"},
|
||||
},
|
||||
series:series
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ const props = defineProps({
|
|||
color:[], //['#EB00FF','#F57100']
|
||||
list:[], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
|
||||
xData:[] ,//['09-01','09-02','09-03','09-04']
|
||||
labelColor:'#000', //横坐标颜色 - 纵坐标颜色 - 标题颜色
|
||||
rotate:0, //横坐标旋转角度
|
||||
interval:0, //横坐标间隔
|
||||
isVertical:false,//是否竖排垂直展示
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -66,7 +70,7 @@ function chartFn(series) {
|
|||
},
|
||||
legend:{
|
||||
data:props.data.list.map(v=>{return v.label}),
|
||||
textStyle: { color: "#fff"},
|
||||
textStyle: { color: props.data.labelColor || "#fff" },
|
||||
icon:'diamond', //arrow,diamond,roundRect,rect,none,circle
|
||||
itemWidth:16,
|
||||
itemHeight:8,
|
||||
|
|
@ -87,13 +91,12 @@ function chartFn(series) {
|
|||
data:props.data.xData,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: "#fff" },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
interval: 0, // 强制显示所有标签
|
||||
// rotate: 15, // 标签旋转角度
|
||||
// formatter: function(value) { return value.split("").join("\n");}
|
||||
color: props.data.labelColor || "#fff",
|
||||
interval: props.data.interval || 0, // 强制显示所有标签
|
||||
rotate: props.data.rotate || 0, // 标签旋转角度
|
||||
formatter: function(value) { return props.data.isVertical ? value.split("").join("\n") : value}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
|
|
@ -107,7 +110,7 @@ function chartFn(series) {
|
|||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: "#fff" },
|
||||
axisLabel: { color: props.data.labelColor || "#fff", },
|
||||
},
|
||||
series:series
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</el-popover>
|
||||
|
||||
<ul class="leftBtn-yjbtn flex">
|
||||
<li class="leftBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
|
||||
<li class="leftBtn-item pointer" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
|
||||
<span class="btms">{{ it }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -126,7 +126,7 @@ const router = useRouter();
|
|||
const route = useRoute();
|
||||
const btns = reactive({
|
||||
rightBtn: ["四色预警", "重点人群"],
|
||||
leftBtn: ["预警布控",'网上会议室'],
|
||||
leftBtn: ["预警布控",'研判首页'],
|
||||
moreBtn:['退出登录',]
|
||||
});
|
||||
const btnsActive = ref("");
|
||||
|
|
@ -159,8 +159,8 @@ const handleBtns = (val) => {
|
|||
case "四色预警":
|
||||
router.push("/IdentityManage");
|
||||
break;
|
||||
case "网上会议室":
|
||||
router.push("/MeetingRoom");
|
||||
case "研判首页":
|
||||
router.push("/ResearchHome");
|
||||
break;
|
||||
case "后台":
|
||||
router.push("/editPassword");
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user