elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

项目分析研判分析

shibei_master
jiangyy 4 years ago
parent
09fff033b2
commit
b347210cfd
5 changed files with 503 additions and 397 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 642
      src/assets/scss/modules/visual/incident-info.scss
  2. 4
      src/assets/scss/modules/visual/typeAnalyze.scss
  3. 117
      src/views/modules/visual/communityGovern/cpt/project-info.vue
  4. 116
      src/views/modules/visual/communityGovern/typeAnalyze.vue
  5. 21
      src/views/modules/visual/components/screen-echarts-frame/index.vue

642
src/assets/scss/modules/visual/incident-info.scss
View File

@ -1,375 +1,379 @@
@import "../../c/config";
@import "../../c/function";
@import "./c/common";
@import '../../c/config';
@import '../../c/function';
@import './c/common';
.m-pop {
@include shield;
background-color: rgba(#000, 0.9);
overflow-y: auto;
@include shield;
background-color: rgba(#000, 0.9);
overflow-y: auto;
.wrap {
position: relative;
margin: 120px auto;
width: 1020px;
.title {
padding: 10px;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
img {
display: block;
margin-right: 5px;
}
span {
display: block;
}
}
.wrap {
position: relative;
margin: 120px auto;
width: 1020px;
.title {
padding: 10px;
font-size: 22px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
img {
display: block;
margin-right: 5px;
}
span {
display: block;
}
}
.btn-close {
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
}
.btn-close {
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
}
.line {
margin: 20px auto;
width: 900px;
height: 1px;
border: 1px dashed #1257c9;
}
.line {
margin: 20px auto;
width: 900px;
height: 1px;
border: 1px dashed #1257c9;
}
.tabs {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 20px;
padding-left: 58px;
.tab-btn {
width: 30px;
text-align: center;
cursor: pointer;
}
.tab {
margin: 0 5px;
min-width: 76px;
padding: 0 5px;
height: 30px;
background: rgba(255, 255, 255, 0);
border: 1px solid #1257c9;
box-shadow: 0 0 10px 0 inset #1257c9;
border-radius: 2px;
text-align: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 30px;
cursor: pointer;
transition: all ease 0.5s;
&.z-on {
background: linear-gradient(90deg, #1a5afd, #009cff);
box-shadow: none;
}
}
.tabs {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 20px;
padding-left: 58px;
.tab-btn {
width: 30px;
text-align: center;
cursor: pointer;
}
.tab {
margin: 0 5px;
min-width: 76px;
padding: 0 5px;
height: 30px;
background: rgba(255, 255, 255, 0);
border: 1px solid #1257c9;
box-shadow: 0 0 10px 0 inset #1257c9;
border-radius: 2px;
text-align: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 30px;
cursor: pointer;
transition: all ease 0.5s;
&.z-on {
background: linear-gradient(90deg, #1a5afd, #009cff);
box-shadow: none;
}
}
}
}
}
.m-info {
padding-left: 62px;
font-size: 14px;
padding-left: 62px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 24px;
width: 500px;
.info-title {
margin-top: 30px;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
font-weight: bold;
color: #ffffff;
line-height: 24px;
width: 500px;
.info-title {
margin-top: 30px;
font-size: 20px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
line-height: 30px;
}
.info-content {
margin: 20px 0;
}
.info-pics {
display: flex;
margin: 20px 0;
img {
display: block;
width: 32%;
height: 90px;
margin-right: 9px;
object-fit: cover;
}
line-height: 30px;
}
.info-content {
margin: 20px 0;
}
.info-pics {
display: flex;
margin: 20px 0;
img {
display: block;
width: 32%;
height: 90px;
margin-right: 9px;
object-fit: cover;
}
}
.info-prop {
position: relative;
margin: 10px 0;
display: flex;
padding-left: 15px;
.info-prop {
position: relative;
margin: 10px 0;
display: flex;
padding-left: 15px;
> span,
> div {
display: block;
max-width: 300px;
}
> span,
> div {
display: block;
max-width: 300px;
}
&::before {
content: "";
display: block;
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background: #0c81fe;
border-radius: 3px;
margin-right: 10px;
}
&::before {
content: '';
display: block;
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background: #0c81fe;
border-radius: 3px;
margin-right: 10px;
}
}
}
.m-case {
@include scrollBar;
height: 600px;
padding: 20px 0 20px 0;
overflow-y: auto;
@include scrollBar;
height: 600px;
padding: 20px 0 20px 0;
overflow-y: auto;
}
.m-row {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.m-yanpan {
padding-left: 62px;
padding-right: 0;
min-height: 300px;
padding-left: 62px;
padding-right: 0;
min-height: 300px;
}
.m-hint {
position: relative;
height: 300px;
// 暂无数据
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
position: relative;
height: 300px;
// 暂无数据
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
.m-line {
min-width: 400px;
min-width: 400px;
.stat {
margin: 20px 0 10px;
display: flex;
.stat-item {
width: 33%;
text-align: center;
div {
font-size: 17px;
font-family: Source Han Serif SC;
font-weight: 500;
color: rgba(#fff, 0.5);
line-height: 24px;
&.z-weak {
font-size: 12px;
font-family: Source Han Serif SC;
font-weight: 500;
color: rgba(#fff, 0.5);
line-height: 24px;
}
}
.stat {
margin: 20px 0 10px;
display: flex;
.stat-item {
width: 33%;
text-align: center;
div {
font-size: 17px;
font-family: Source Han Serif SC;
font-weight: 500;
color: rgba(#fff, 0.5);
line-height: 24px;
&.z-weak {
font-size: 12px;
font-family: Source Han Serif SC;
font-weight: 500;
color: rgba(#fff, 0.5);
line-height: 24px;
}
}
}
}
}
.m-tb {
padding-left: 62px;
padding-right: 40px;
padding-left: 62px;
padding-right: 40px;
}
.m-pagination {
box-sizing: border-box;
margin-top: 20px;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
box-sizing: border-box;
margin-top: 20px;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background: #0266d1;
color: #000d3f;
}
/deep/ .el-pagination .el-pager li {
background: #002e74;
}
/deep/ .el-pagination .btn-prev {
background: #002e74;
}
/deep/ .el-pagination .btn-next {
background: #002e74;
}
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background: #0266d1;
color: #000d3f;
}
.m-process {
width: 400px;
/deep/ .el-pagination .el-pager li {
background: #002e74;
}
.process-title {
margin-bottom: 25px;
margin-left: -5px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
line-height: 18px;
}
/deep/ .el-pagination .btn-prev {
background: #002e74;
.list {
position: relative;
box-sizing: border-box;
margin-top: 30px/2;
margin-left: 50px/2;
padding: 0 0 0 30px/2;
width: 680px/2;
border-left: 3px solid #0c81fe;
padding-right: 10px;
&::before {
content: '';
position: absolute;
z-index: 1;
display: block;
top: -2px/2;
left: -2px/2;
width: 5px/2;
height: 20px/2;
background-color: #ffffff;
}
/deep/ .el-pagination .btn-next {
background: #002e74;
}
}
.item {
position: relative;
z-index: 2;
margin-bottom: 8px;
padding-bottom: 8px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #fefefe;
line-height: 24px;
padding-left: 20px;
padding-top: 1px;
&::before {
content: '';
display: block;
position: absolute;
top: -5px;
left: -11px;
width: 18px;
height: 18px;
background: #0c81fe;
border: 4px solid lighten(#0c81fe, 15);
border-radius: 100%;
}
&.z-on {
&::before {
background: #e08400;
border-color: lighten(#e08400, 15);
}
}
.m-process {
width: 400px;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.process-title {
margin-bottom: 25px;
margin-left: -5px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
line-height: 18px;
}
.item-row {
margin-top: -10px;
margin-bottom: 10px;
display: flex;
}
.list {
.name {
position: relative;
box-sizing: border-box;
margin-top: 30px/2;
margin-left: 50px/2;
padding: 0 0 0 30px/2;
width: 680px/2;
border-left: 3px solid #0c81fe;
padding-right: 10px;
padding: 0 10px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #fefefe;
line-height: 22px;
height: 22px;
border-radius: 10px 0 10px 0;
background-color: #0c81fe;
// background-color: #e08400;
}
.date {
margin-left: 10px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #7ca1d2;
line-height: 25px;
}
&::before {
content: "";
position: absolute;
z-index: 1;
display: block;
top: -2px/2;
left: -2px/2;
width: 5px/2;
height: 20px/2;
background-color: #ffffff;
}
.detail {
@include cs;
font-size: 16px;
line-height: 20px;
margin-bottom: 5px;
display: flex;
.item {
position: relative;
z-index: 2;
margin-bottom: 8px;
padding-bottom: 8px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #fefefe;
line-height: 24px;
padding-left: 20px;
padding-top: 1px;
&::before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -11px;
width: 18px;
height: 18px;
background: #0c81fe;
border: 4px solid lighten(#0c81fe, 15);
border-radius: 100%;
}
&.z-on {
&::before {
background: #e08400;
border-color: lighten(#e08400, 15);
}
}
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.item-row {
margin-top: -10px;
margin-bottom: 10px;
display: flex;
}
.name {
position: relative;
padding: 0 10px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #fefefe;
line-height: 22px;
height: 22px;
border-radius: 10px 0 10px 0;
background-color: #0c81fe;
// background-color: #e08400;
}
.date {
margin-left: 10px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #7ca1d2;
line-height: 25px;
}
.detail {
@include cs;
font-size: 16px;
line-height: 20px;
margin-bottom: 5px;
display: flex;
.detail-field {
width: 22%;
text-align: justify;
text-align-last: justify;
}
.detail-value {
width: 78%;
.detail-link {
display: inline;
}
}
}
.attachement-list {
padding-left: 80px;
a {
display: block;
cursor: pointer;
color: #4df0ff;
font-size: 14px;
i {
color: #fff;
}
}
}
.detail-field {
width: 22%;
text-align: justify;
text-align-last: justify;
}
.detail-value {
width: 78%;
.detail-link {
display: inline;
}
}
}
.attachement-list {
padding-left: 80px;
a {
display: block;
cursor: pointer;
color: #4df0ff;
font-size: 14px;
i {
color: #fff;
}
}
}
}
}
}
.m-top {
display: flex;
}

4
src/assets/scss/modules/visual/typeAnalyze.scss
View File

@ -135,3 +135,7 @@
height: 90%;
}
}
.table-status {
margin-top: 200px;
}

117
src/views/modules/visual/communityGovern/cpt/project-info.vue
View File

@ -134,11 +134,13 @@
<div class="m-yanpan"
v-if="groupIndex == 0">
<div v-if="projectId">
<analyse v-if="!yanPan.loading"
<analyse v-if="yanPan.loading"
singleTitle="楼院小组"
:userList="yanPan.homeUserList"
:userName="yanPan.icUserName"
:singleList="yanPan.categoryList"
:singleList="yanPan.singleList"
:hasEvent="yanPan.hasEvent"
:moreList="yanPan.moreList"
@user="toUserInfo"
@project="toProjectInfo" />
<screen-loading v-else>加载中</screen-loading>
@ -258,7 +260,7 @@ import dateFormat from "dai-js/tools/dateFormat";
function iniData () {
return {
projectIdCopy: this.projectId,
groupList: [
{ label: "研判分析" },
{ label: "项目来源" },
@ -266,7 +268,6 @@ function iniData () {
groupIndex: 0,
startGroupIndex: 0,
projectProcess: [],
projectInfo: {
@ -345,7 +346,7 @@ function iniData () {
// icUserName: '',
// }
],
categoryList: [],
singleList: [],//楼院小组
projectData: [
// {
// firstCategoryCode: '',
@ -353,6 +354,9 @@ function iniData () {
// projectList: [],
// }
],
hasEvent: false,
moreList: [],//
},
};
}
@ -396,9 +400,14 @@ export default {
});
this.getApiData();
},
// projectIdCopy () {
// },
},
mounted () {
console.log(this.projectIdCopy)
this.getApiData();
},
@ -450,7 +459,7 @@ export default {
const url = "/gov/project/trace/projectdetail";
const { data, code, msg } = await requestPost(url, {
projectId: this.projectId,
projectId: this.projectIdCopy,
});
if (code === 0) {
@ -533,7 +542,7 @@ export default {
const url = "/gov/project/trace/processlist-v2";
const { data, code, msg } = await requestPost(url, {
projectId: this.projectId,
projectId: this.projectIdCopy,
});
if (code === 0) {
@ -554,7 +563,7 @@ export default {
const url = "/gov/project/projectcategory/categorytaglist";
const { data, code, msg } = await requestPost(url, {
projectId: this.projectId,
projectId: this.projectIdCopy,
});
if (code === 0) {
@ -576,34 +585,73 @@ export default {
});
if (code === 0) {
let array = []
if (this.projectInfo.origin === 'issue') {
array = [...data.groupProjectList]
} else if (this.projectInfo.origin === 'resi_event') {
array = [...data.eventProjectList]
data.icResiUserId = data.icUserId
data.homeUserList.forEach(item => {
item.icResiUserId = item.icUserId
});
let array1 = []
let array2 = []
// debugger
//楼院小组、居民上报都存在是，研判分析显示两个分支
if (data.groupProjectList && data.groupProjectList.length > 0 && data.eventProjectList && data.eventProjectList.length > 0) {
this.yanPan.hasEvent = true
array1 = [...data.groupProjectList]
array2 = [...data.eventProjectList]
} else {
this.yanPan.hasEvent = false
if (data.groupProjectList && data.groupProjectList.length > 0) {
array1 = [...data.groupProjectList]
} else if (data.eventProjectList && data.eventProjectList.length > 0) {
array1 = [...data.eventProjectList]
} else {
array1 = []
}
}
if (array1.length > 0) {
data.singleList = array1.map((item) => {
return {
categoryCode: item.categoryCode,
categoryName: item.categoryName,
showItem: true,
projectList: item.projectList.map((subItem) => {
return {
title: subItem.title,
status: subItem.status,
statusName:
subItem.status == "pending" ? "待处理" : "结案",
projectId: subItem.projectId,
};
}),
};
});
}
if (array2.length > 0) {
data.moreList = array2.map((item) => {
return {
categoryCode: item.categoryCode,
categoryName: item.categoryName,
showItem: true,
projectList: item.projectList.map((subItem) => {
return {
title: subItem.title,
status: subItem.status,
statusName:
subItem.status == "pending" ? "待处理" : "结案",
projectId: subItem.projectId,
};
}),
};
});
}
data.categoryList = array.map((item) => {
return {
categoryCode: item.categoryCode,
categoryName: item.categoryName,
showItem: true,
projectList: item.projectList.map((subItem) => {
return {
title: subItem.projectTitle,
status: subItem.projectStatus,
statusName:
subItem.projectStatus == "pending" ? "待处理" : "结案",
projectId: subItem.projectId,
};
}),
};
});
this.yanPan = { ...this.yanPan, ...data };
this.yanPan.loading = false;
this.yanPan = { ...this.yanPan, ...data };
console.log(this.yanPan)
this.yanPan.loading = true;
} else {
this.$message.error(msg);
}
@ -617,7 +665,12 @@ export default {
toProjectInfo (item) {
console.log(item);
this.projectId = item.projectId;
this.projectIdCopy = item.projectId;
// let data = iniData();
// Object.keys(data).forEach((k) => {
// this[k] = data[k];
// });
this.getApiData();
},
},
};

116
src/views/modules/visual/communityGovern/typeAnalyze.vue
View File

@ -31,10 +31,15 @@
<div class="g-cpt-resi">
<div class="g-l">
<screen-echarts-frame class="echart-wr"
<screen-echarts-frame v-if="!dataLoading"
class="echart-wr"
@myChartMethod="pieInitOk"
ref="pieChart"></screen-echarts-frame>
<div class="table-status"
v-if="dataLoading">
<screen-loading>加载中</screen-loading>
</div>
</div>
<div class="g-r">
<div class="m-tb">
@ -77,7 +82,7 @@ import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
import projectInfo from "./cpt/project-info";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import { pieOption } from './typePieOption.js'
import nextTick from 'dai-js/tools/nextTick'
@ -85,8 +90,7 @@ export default {
name: "HomeMap",
data () {
return {
showNoData: false,
timer: null,
dataLoading: true,
pieChartS: null,
pieChart: '',
pieOption: {},
@ -183,15 +187,17 @@ export default {
},
// mixins: [animate]
beforeDestroy () {
this.timer && clearInterval(this.timer)
},
async mounted () {
this.dataLoading = true
this.initData()
await this.getAgencylist()//获取组织级别
await nextTick(500)
await this.getPie()
await this.getPieChart()
this.dataLoading = false
this.getPie()
},
methods: {
@ -253,21 +259,15 @@ export default {
this.pieInitState = true
},
getPie () {
if (this.pieInitState) {
this.getPieChart()
} else {
setTimeout(() => {
this.getPie()
}, 500)
}
},
// 获取饼状图
async getPieChart () {
this.$refs.pieChart.clear()
this.pieTotal = 0
const _that = this
// this.$refs.pieChart.showLoading()
if (this.$refs.pieChart) {
this.$refs.pieChart.showLoading()
}
const url = "/data/aggregator/project/projectcategorylist";
// const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectcategorylist";
let params = {
@ -279,15 +279,40 @@ export default {
// 获取pieChart配置
if (code === 0) {
// 获取pieChart配置
this.pieOption = pieOption(this.pieChartS)
if (data && data.length > 0) {
this.pieData = data
} else {
this.pieData = [{ total: 0, categoryName: '无分类', color: '#00E5ED' }]
this.pieData = []
}
if (this.$refs.pieChart) {
this.$refs.pieChart.hideLoading()
}
} else {
this.$message.error(msg);
}
},
getPie () {
if (this.pieInitState) {
this.assignPieChart()
} else {
setTimeout(() => {
this.getPie()
}, 500)
}
},
assignPieChart () {
if (this.pieData.length > 0) {
this.$refs.pieChart.setNoData(false)
this.$refs.pieChart.clear()
this.pieTotal = 0
const _that = this
// 获取pieChart配置
this.pieOption = pieOption(this.pieChartS)
let maxValue = this.pieData[0].total
let maxIndex = 0
this.pieData[0].selected = true
@ -323,9 +348,8 @@ export default {
this.$refs.pieChart.handleClick(fun)
this.clickPie(maxIndex)
} else {
this.$message.error(msg);
this.$refs.pieChart.setNoData(true)
}
},
async clickPie (seriesIndex) {
@ -395,23 +419,28 @@ export default {
if (code === 0) {
this.demand.total = data.total;
this.tableList = data.list
this.demand.list = data.list.map((item) => {
//楼院小组:issue； 项目立项:agency 事件上报:resi_event【也可控制点击查看时里边三个按钮的显示】
item.originShow = item.origin === 'issue' ? '楼院小组' : item.origin === 'agency' ? '项目立项' : '事件上报'
//状态:待处理 pending，已结案closed
item.statusShow = item.status === 'pending' ? '待处理' : '已结案'
return [
{ type: "index" },
item.projectCode ? item.projectCode : '',
item.categoryNames.join(','),
item.originShow ? item.originShow : '',
item.gridName ? item.gridName : '',
item.statusShow ? item.statusShow : '',
item.title ? item.title : '',
item.time ? item.time : '',
{ type: "operate", list: ["查看"] },
];
});
if (data.list.length > 0) {
this.demand.list = data.list.map((item) => {
//楼院小组:issue； 项目立项:agency 事件上报:resi_event【也可控制点击查看时里边三个按钮的显示】
item.originShow = item.origin === 'issue' ? '楼院小组' : item.origin === 'agency' ? '项目立项' : '事件上报'
//状态:待处理 pending，已结案closed
item.statusShow = item.status === 'pending' ? '待处理' : '已结案'
return [
{ type: "index" },
item.projectCode ? item.projectCode : '',
item.categoryNames.join(','),
item.originShow ? item.originShow : '',
item.gridName ? item.gridName : '',
item.statusShow ? item.statusShow : '',
item.title ? item.title : '',
item.time ? item.time : '',
{ type: "operate", list: ["查看"] },
];
});
} else {
this.demand.list = []
}
} else {
this.$message.error(msg);
}
@ -446,6 +475,7 @@ export default {
cptTb,
screenEchartsFrame,
projectInfo,
ScreenLoading,
},
watch: {

21
src/views/modules/visual/components/screen-echarts-frame/index.vue
View File

@ -1,15 +1,22 @@
<template>
<div class="screenEchartsFrame"
ref="screenEchartsFrame"></div>
<div>
<div v-show="!noData"
class="screenEchartsFrame"
ref="screenEchartsFrame"></div>
<screen-nodata v-if="noData"
class="nodata"></screen-nodata>
</div>
</template>
<script>
import * as echarts from 'echarts';
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
export default {
name: 'screen-echarts-frame',
data () {
return {
myChart: ''
myChart: '',
noData: false,
}
},
props: {
@ -28,6 +35,10 @@ export default {
if (this.myChart) this.myChart.dispose()
},
watch: {},
components: {
ScreenNodata,
},
methods: {
initChart () {
@ -43,6 +54,10 @@ export default {
handleClick (fun) {
this.myChart.on('click', fun);
},
//没有数据
setNoData (nodata) {
this.noData = nodata
},
//高亮
highLight (index) {

Write Preview
Loading…
Cancel
Save