是小王呀\24601
10 months ago
6 changed files with 1398 additions and 2 deletions
@ -0,0 +1,424 @@ |
|||||
|
.dashboard { |
||||
|
display: flex; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
width: 280px; |
||||
|
height: 49px; |
||||
|
background: #E6F0FF; |
||||
|
border-radius: 3px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.card1 { |
||||
|
width: 284px; |
||||
|
height: 49px; |
||||
|
background: #E6F0FF; |
||||
|
border-radius: 3px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.card-icon { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.card-icon.total { |
||||
|
background-color: #4a90e2; |
||||
|
} |
||||
|
|
||||
|
.card-icon.completed { |
||||
|
background-color: #f5a623; |
||||
|
} |
||||
|
|
||||
|
.card-icon.overdue-contact { |
||||
|
background-color: #7ed321; |
||||
|
} |
||||
|
|
||||
|
.card-icon.overdue-process { |
||||
|
background-color: #d0021b; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
.card-content1 { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.card-text { |
||||
|
font-size: 14px; |
||||
|
color: #777; |
||||
|
margin: 5px 0 0 0; |
||||
|
} |
||||
|
|
||||
|
.percentage { |
||||
|
font-size: 14px; |
||||
|
color: #777; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.br{ |
||||
|
padding: 20px 0; |
||||
|
border-left: #777 solid 1px; |
||||
|
} |
||||
|
.div_room { |
||||
|
// height: calc(88vh - 40px); |
||||
|
// margin-top: 9px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: flex-start; |
||||
|
margin-left: 42px; |
||||
|
// margin: 0 21px 0 21px; |
||||
|
|
||||
|
.item { |
||||
|
width: 21%; |
||||
|
|
||||
|
border-radius: 6px; |
||||
|
margin: 15px 25px 15px 0; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
|
||||
|
|
||||
|
.item_category { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px; |
||||
|
> img { |
||||
|
width: 66px; |
||||
|
height: 66px; |
||||
|
} |
||||
|
.item_content { |
||||
|
margin-left: 5px; |
||||
|
width: 100%; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
.item_count { |
||||
|
font-size: 28px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.item_row1 { |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 23px; |
||||
|
.row_left { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text1{ |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #00BB72; |
||||
|
margin-left:20px |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.text2{ |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #FF7135; |
||||
|
margin-left:20px |
||||
|
|
||||
|
} |
||||
|
.row_right { |
||||
|
margin: 0px 5px 0 0; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.img{ |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.item_row2 { |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 23px; |
||||
|
margin-top: 10px; |
||||
|
.row_left { |
||||
|
font-weight: 500; |
||||
|
color: #666666; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.row_right { |
||||
|
margin: 0px 5px 0 0; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.img{ |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 2px |
||||
|
} |
||||
|
.text{ |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #333333; |
||||
|
padding-left:10px |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
margin-left: 16px; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item_add { |
||||
|
cursor: pointer; |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 17px 16px; |
||||
|
|
||||
|
> img { |
||||
|
width: 86px; |
||||
|
height: 86px; |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
|
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon_circle { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: -10px; |
||||
|
right: -10px; |
||||
|
height: 23px; |
||||
|
width: 23px; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 50%; |
||||
|
border: 1px solid #a5a5a5; |
||||
|
} |
||||
|
|
||||
|
.icon_sel { |
||||
|
cursor: pointer; |
||||
|
background-color: #6bb9f8; |
||||
|
border: 1px solid #6bb9f8; |
||||
|
} |
||||
|
} |
||||
|
.item1 { |
||||
|
width: 30%; |
||||
|
height: 86px; |
||||
|
background: #f7faff; |
||||
|
border-radius: 6px; |
||||
|
margin: 15px 25px 15px 0; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
|
||||
|
|
||||
|
.item_category { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px; |
||||
|
> img { |
||||
|
width: 66px; |
||||
|
height: 66px; |
||||
|
} |
||||
|
.item_content { |
||||
|
margin-left: 5px; |
||||
|
width: 100%; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
.item_count { |
||||
|
font-size: 28px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.row_left1 { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.item_row1 { |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 23px; |
||||
|
|
||||
|
.row_left1 { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.row_left2 { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #FF7035; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.text1{ |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #FDB305; |
||||
|
padding-left:20px |
||||
|
} |
||||
|
.row_right { |
||||
|
margin: 0px 5px 0 0; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.img{ |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.item_row2 { |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 23px; |
||||
|
margin-top: 10px; |
||||
|
.row_left { |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
margin-left: 5px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.row_right { |
||||
|
margin: 0px 5px 0 0; |
||||
|
|
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.img{ |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 2px |
||||
|
} |
||||
|
.text{ |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #333333; |
||||
|
padding-left:10px |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
margin-left: 16px; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item_add { |
||||
|
cursor: pointer; |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 17px 16px; |
||||
|
|
||||
|
> img { |
||||
|
width: 86px; |
||||
|
height: 86px; |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
|
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon_circle { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: -10px; |
||||
|
right: -10px; |
||||
|
height: 23px; |
||||
|
width: 23px; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 50%; |
||||
|
border: 1px solid #a5a5a5; |
||||
|
} |
||||
|
|
||||
|
.icon_sel { |
||||
|
cursor: pointer; |
||||
|
background-color: #6bb9f8; |
||||
|
border: 1px solid #6bb9f8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,689 @@ |
|||||
|
<template> |
||||
|
<div class="g-main"> |
||||
|
<div> |
||||
|
<div class="m-search"> |
||||
|
|
||||
|
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
||||
|
<el-form-item label="所属组织" prop="ownerName"> |
||||
|
<el-cascader class="u-item-width-normal" ref="myCascader" clearable size="small" |
||||
|
v-model.trim="formData.agencyId" :options="orgOptions" :props="orgOptionProps" |
||||
|
@change="handleChangeAgency"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动类型" prop="warnFlag"> |
||||
|
<el-select class="u-item-width-normal" v-model.trim="formData.type" placeholder="全部" size="small" clearable> |
||||
|
<el-option v-for="item in ServicetypeList" :key="item.value" :label="item.label" |
||||
|
:value="item.value"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="统计时间"> |
||||
|
<el-date-picker v-model.trim="formData.startTimeFrom" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
placeholder="开始时间" style="width: 202px" clearable> |
||||
|
</el-date-picker> |
||||
|
至 |
||||
|
<el-date-picker v-model.trim="formData.startTimeTo" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
placeholder="结束时间" style="width: 202px" clearable> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default" size="small" |
||||
|
@click="exportReport">导出</el-button> |
||||
|
</el-form> |
||||
|
|
||||
|
</div> |
||||
|
<div class="m-table"> |
||||
|
<div style="margin:30px 0"> |
||||
|
<h1 style="font-size: 24px; font-weight: bold;"> 活动数据分析 </h1> |
||||
|
</div> |
||||
|
<div class="div_room"> |
||||
|
<div class="item"> |
||||
|
<div ref="pieChart3" style="width: 100%; height: 300px;"></div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div ref="pieChart4" style="width: 100%; height: 300px;"></div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div ref="pieChart5" style="width: 100%; height: 300px;"></div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div ref="pieChart6" style="width: 100%; height: 300px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="display: flex;justify-content: space-between;flex-direction:row;"> |
||||
|
<h1 style="font-size: 24px; font-weight: bold;"> 来源统计 </h1> |
||||
|
</div> |
||||
|
<el-table :data="tableList" style="width: 100%;margin-bottom: 20px;" row-key="id" border height="400px" |
||||
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
||||
|
<el-table-column prop="agencyName" label="组织名称"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="actQty" label="举办活动次数"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="actPartsPeopleQty" label="参与活动人数"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- <awoList ref="awoList" /> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import axios from "axios"; |
||||
|
import * as echarts from "echarts"; |
||||
|
import util from "@js/util.js"; |
||||
|
// import TableRow from '../../analysis/TableRow.vue'; |
||||
|
export default { |
||||
|
components: { }, |
||||
|
data() { |
||||
|
return { |
||||
|
ServicetypeList:[], |
||||
|
orgOptions:[],//所属组织 |
||||
|
orgOptionProps: { |
||||
|
value: 'agencyId', |
||||
|
label: 'agencyName', |
||||
|
children: 'subAgencyList', |
||||
|
emitPath: false, |
||||
|
multiple: false, |
||||
|
checkStrictly: true |
||||
|
},//所属组织配置 |
||||
|
starttime: "", |
||||
|
endtime: "", |
||||
|
level: 1, |
||||
|
tableList: [], |
||||
|
communityList: [], |
||||
|
departmentList: [], |
||||
|
searchH: 20, |
||||
|
formData: { |
||||
|
agencyId: "", |
||||
|
type: "", |
||||
|
startTimeFrom:"", |
||||
|
startTimeTo:"" |
||||
|
}, |
||||
|
|
||||
|
agencyLevel: '', |
||||
|
|
||||
|
orgData: { |
||||
|
id: "", |
||||
|
level: "agency", |
||||
|
}, |
||||
|
analysisList: {}, |
||||
|
|
||||
|
// 内容字段 |
||||
|
report: { |
||||
|
streetName: "", |
||||
|
overallOperation: "", |
||||
|
geoStatis: "", |
||||
|
departHotline: "", |
||||
|
hotDemand: "", |
||||
|
}, |
||||
|
|
||||
|
mobileData: [], |
||||
|
addressMobileData: [], |
||||
|
addComplainData: [], |
||||
|
|
||||
|
eventCategorys: [], |
||||
|
|
||||
|
categoryPie: {}, |
||||
|
communityChart: {}, |
||||
|
departChart: {}, |
||||
|
hotlineChart: {}, |
||||
|
|
||||
|
categoryCountShow: false, |
||||
|
communityCountShow: false, |
||||
|
departCountShow: false, |
||||
|
subCategoryCountShow: false, |
||||
|
|
||||
|
recId: "", |
||||
|
departId: "", |
||||
|
communityId: "", |
||||
|
|
||||
|
eventId: "", |
||||
|
eventDetailData: {}, |
||||
|
pageType: "info", |
||||
|
|
||||
|
mergeObj: {}, |
||||
|
mergeArr: ['address'], |
||||
|
|
||||
|
myBarchart: {}, |
||||
|
sourceType:'0' |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
maxTableHeight() { |
||||
|
const h = this.clientHeight - this.searchH - 330 + this.iframeHeight; |
||||
|
const _h = this.clientHeight - 330 - this.searchH; |
||||
|
return this.$store.state.inIframe ? h : _h; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.user = this.$store.state.user; |
||||
|
this.formData.agencyId = this.user.agencyId; |
||||
|
this.getOrgTreeList() |
||||
|
this.getCategoryTree() |
||||
|
this.initChart1() |
||||
|
this.initChart2() |
||||
|
this.initChart3() |
||||
|
this.initChart4() |
||||
|
this.volunteerservicetype() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取志愿组织服务类型 |
||||
|
volunteerservicetype() { |
||||
|
console.log("skldfjlsdfjlksjfd"); |
||||
|
const url = "/sys/dict/data/dictlist" |
||||
|
let params = { |
||||
|
dictType: 'voluntary_project_service_class' |
||||
|
} |
||||
|
requestPost(url, params).then(res => { |
||||
|
console.log(res, "res"); |
||||
|
this.ServicetypeList = res.data |
||||
|
}) |
||||
|
|
||||
|
console.log(this.ServicetypeList, " this.ServicetypeListName "); |
||||
|
}, |
||||
|
//获取当前组织 |
||||
|
getOrgTreeList() { |
||||
|
this.$http |
||||
|
.post("/gov/org/customeragency/agencygridtree", {orgTypeFilter:this.orgTypeFilter}) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} else { |
||||
|
this.orgOptions = []; |
||||
|
this.orgOptions.forEach(item => { |
||||
|
item.subAgencyList.forEach(item2 => { |
||||
|
|
||||
|
}) |
||||
|
}) |
||||
|
this.orgOptions.push(res.data); |
||||
|
console.log(this.orgOptions,"this.orgOptions"); |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error("网络错误"); |
||||
|
}); |
||||
|
}, |
||||
|
async initChart1() { |
||||
|
const url = "/voluntary/activityStats/statsActQtyByType"; |
||||
|
const params = { |
||||
|
...this.formData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
// 确保 xData 正确格式化 |
||||
|
const xData1 = data.map(item => ({ |
||||
|
value: item.qty, |
||||
|
name: item.typeName |
||||
|
})); |
||||
|
|
||||
|
const chartDom = this.$refs.pieChart3; |
||||
|
const myChart = echarts.init(chartDom); |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '各类活动举办次数', |
||||
|
left: 'center', |
||||
|
bottom: 0, // 调整位置，可以根据需求微调 |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'horizontal', |
||||
|
bottom: 25, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '访问来源', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '60%'], // 设置内外半径，形成环形图 |
||||
|
center: ['50%', '35%'], // 将饼图居中放置 |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, // 隐藏每个扇形的标签 |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '30', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false // 隐藏连接线 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderColor: '#ffffff', // 设置分割线颜色 |
||||
|
borderWidth: 2 // 设置分割线宽度 |
||||
|
}, |
||||
|
data: xData1, |
||||
|
color: ['#5087ec', '#68bbc4', '#58a55c','#f2bd42','#ee752f','#d95040','#d95000'] // 可以根据需要自定义颜色 |
||||
|
} |
||||
|
], |
||||
|
// 在中心添加显示总数的文本 |
||||
|
// graphic: { |
||||
|
// type: 'text', |
||||
|
// left: 'center', |
||||
|
// top: '45%', |
||||
|
// style: { |
||||
|
// text: `${data.reduce((total, item) => total + item.count, 0)}`, // 动态计算总数 |
||||
|
// textAlign: 'center', |
||||
|
// fill: '#333', |
||||
|
// fontSize: 24, |
||||
|
// fontWeight: 'bold' |
||||
|
// } |
||||
|
// } |
||||
|
}; |
||||
|
|
||||
|
myChart.setOption(option); |
||||
|
window.addEventListener('resize', myChart.resize); // 自适应窗口调整 |
||||
|
} |
||||
|
}, |
||||
|
async initChart2() { |
||||
|
const url = "/voluntary/activityStats/statsPartsPeopleQtyByType"; |
||||
|
const params = { |
||||
|
...this.formData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
// 确保 xData 正确格式化 |
||||
|
const xData1 = data.map(item => ({ |
||||
|
value: item.qty, |
||||
|
name: item.typeName |
||||
|
})); |
||||
|
|
||||
|
const chartDom = this.$refs.pieChart4; |
||||
|
const myChart = echarts.init(chartDom); |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '各类活动参加人数', |
||||
|
left: 'center', |
||||
|
top: 0, |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'horizontal', |
||||
|
bottom: -10, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '访问来源', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '60%'], // 设置内外半径，形成环形图 |
||||
|
center: ['50%', '35%'], // 将饼图居中放置 |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, // 隐藏每个扇形的标签 |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '30', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false // 隐藏连接线 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderColor: '#ffffff', // 设置分割线颜色 |
||||
|
borderWidth: 2 // 设置分割线宽度 |
||||
|
}, |
||||
|
data: xData1, |
||||
|
color: ['#5087ec', '#68bbc4', '#58a55c','#f2bd42','#ee752f','#d95040','#d95000'] // 可以根据需要自定义颜色 |
||||
|
} |
||||
|
], |
||||
|
// 在中心添加显示总数的文本 |
||||
|
// graphic: { |
||||
|
// type: 'text', |
||||
|
// left: 'center', |
||||
|
// top: '45%', |
||||
|
// style: { |
||||
|
// text: `${data.reduce((total, item) => total + item.count, 0)}`, // 动态计算总数 |
||||
|
// textAlign: 'center', |
||||
|
// fill: '#333', |
||||
|
// fontSize: 24, |
||||
|
// fontWeight: 'bold' |
||||
|
// } |
||||
|
// } |
||||
|
}; |
||||
|
|
||||
|
myChart.setOption(option); |
||||
|
window.addEventListener('resize', myChart.resize); // 自适应窗口调整 |
||||
|
} |
||||
|
}, |
||||
|
async initChart3() { |
||||
|
const url = "/voluntary/activityStats/statsPartsPeopleQtyByBirtyday"; |
||||
|
const params = { |
||||
|
...this.formData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
// 确保 xData 正确格式化 |
||||
|
const xData1 = data.map(item => ({ |
||||
|
value: item.qty, |
||||
|
name: item.ageLevelName |
||||
|
})); |
||||
|
|
||||
|
const chartDom = this.$refs.pieChart5; |
||||
|
const myChart = echarts.init(chartDom); |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '参加活动人数性别分析', |
||||
|
left: 'center', |
||||
|
top: 0, |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'horizontal', |
||||
|
bottom: -10, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '访问来源', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '60%'], // 设置内外半径，形成环形图 |
||||
|
center: ['50%', '35%'], // 将饼图居中放置 |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, // 隐藏每个扇形的标签 |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '30', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false // 隐藏连接线 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderColor: '#ffffff', // 设置分割线颜色 |
||||
|
borderWidth: 2 // 设置分割线宽度 |
||||
|
}, |
||||
|
data: xData1, |
||||
|
color: ['#5087ec', '#68bbc4', '#58a55c','#f2bd42','#ee752f','#d95040','#d95000'] // 可以根据需要自定义颜色 |
||||
|
} |
||||
|
], |
||||
|
// 在中心添加显示总数的文本 |
||||
|
// graphic: { |
||||
|
// type: 'text', |
||||
|
// left: 'center', |
||||
|
// top: '45%', |
||||
|
// style: { |
||||
|
// text: `${data.reduce((total, item) => total + item.count, 0)}`, // 动态计算总数 |
||||
|
// textAlign: 'center', |
||||
|
// fill: '#333', |
||||
|
// fontSize: 24, |
||||
|
// fontWeight: 'bold' |
||||
|
// } |
||||
|
// } |
||||
|
}; |
||||
|
|
||||
|
myChart.setOption(option); |
||||
|
window.addEventListener('resize', myChart.resize); // 自适应窗口调整 |
||||
|
} |
||||
|
}, |
||||
|
async initChart4() { |
||||
|
const url = "/voluntary/activityStats/statsPartsPeopleQtyByGender"; |
||||
|
const params = { |
||||
|
...this.formData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
// 确保 xData 正确格式化 |
||||
|
const xData1 = data.map(item => ({ |
||||
|
value: item.qty, |
||||
|
name: item.genderName |
||||
|
})); |
||||
|
|
||||
|
const chartDom = this.$refs.pieChart6; |
||||
|
const myChart = echarts.init(chartDom); |
||||
|
const option = { |
||||
|
title: { |
||||
|
text: '参加活动人数年龄分析', |
||||
|
left: 'center', |
||||
|
top: 0, |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'horizontal', |
||||
|
bottom: 0, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '访问来源', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '60%'], // 设置内外半径，形成环形图 |
||||
|
center: ['50%', '35%'], // 将饼图居中放置 |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, // 隐藏每个扇形的标签 |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '30', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false // 隐藏连接线 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
borderColor: '#ffffff', // 设置分割线颜色 |
||||
|
borderWidth: 2 // 设置分割线宽度 |
||||
|
}, |
||||
|
data: xData1, |
||||
|
color: ['#5087ec', '#68bbc4', '#58a55c','#f2bd42','#ee752f','#d95040','#d95000'] // 可以根据需要自定义颜色 |
||||
|
} |
||||
|
], |
||||
|
// 在中心添加显示总数的文本 |
||||
|
// graphic: { |
||||
|
// type: 'text', |
||||
|
// left: 'center', |
||||
|
// top: '45%', |
||||
|
// style: { |
||||
|
// text: `${data.reduce((total, item) => total + item.count, 0)}`, // 动态计算总数 |
||||
|
// textAlign: 'center', |
||||
|
// fill: '#333', |
||||
|
// fontSize: 24, |
||||
|
// fontWeight: 'bold' |
||||
|
// } |
||||
|
// } |
||||
|
}; |
||||
|
|
||||
|
myChart.setOption(option); |
||||
|
window.addEventListener('resize', myChart.resize); // 自适应窗口调整 |
||||
|
} |
||||
|
}, |
||||
|
//加载组织数据 |
||||
|
async getOrgData() { |
||||
|
const url = "/gov/org/agency/maporg"; |
||||
|
let params = { |
||||
|
orgId: "", |
||||
|
level: "", |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.orgData = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 搜索事件 |
||||
|
handleSearch(val) { |
||||
|
this.getOrgTreeList() |
||||
|
this.getCategoryTree() |
||||
|
this.initChart1() |
||||
|
this.initChart2() |
||||
|
this.initChart3() |
||||
|
this.initChart4() |
||||
|
}, |
||||
|
//事件类型统计 |
||||
|
async getCategoryTree() { |
||||
|
const url = "/voluntary/activityStats/statsPartsPeopleQtyAndActQtyOfSubAgencys"; |
||||
|
let param = { |
||||
|
...this.formData |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, param); |
||||
|
if (code === 0) { |
||||
|
this.tableList = data |
||||
|
// this.tableList=this.flattenTree(data); |
||||
|
console.log(this.tableList); |
||||
|
console.log(this.tableList, "lksdjfklj s"); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
formatDate1(date) { |
||||
|
// 获取年份、月份和日期 |
||||
|
const year = date.getFullYear(); |
||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = date.getDate().toString().padStart(2, '0'); |
||||
|
const hours = date.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
|
const seconds = date.getSeconds().toString().padStart(2, '0'); |
||||
|
|
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
//获取前一个月的日期 |
||||
|
getLastMonthRange() { |
||||
|
const now = new Date(); |
||||
|
const startOfYear = new Date(now.getFullYear(), 0, 1); // 当前年份的1月1日 |
||||
|
const endOfYear = new Date(now.getFullYear(), 11, 31); // 当前年份的12月31日 |
||||
|
|
||||
|
startOfYear.setHours(0, 0, 0, 0); |
||||
|
endOfYear.setHours(23, 59, 59, 999); |
||||
|
|
||||
|
this.formData.queryDateStart = this.formatDate1(startOfYear), |
||||
|
this.formData.queryDateEnd = this.formatDate1(endOfYear) |
||||
|
console.log(this.formData.queryDateEnd); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
props: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
@import "./index.scss"; |
||||
|
|
||||
|
table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
} |
||||
|
|
||||
|
th, |
||||
|
td { |
||||
|
width: 40px; |
||||
|
height: 20px; |
||||
|
border: 1px solid #ccc; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
thead { |
||||
|
background-color: #f9f9f9; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.m-table-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.centered-title { |
||||
|
text-align: center; |
||||
|
/* 将文本水平居中对齐 */ |
||||
|
font-size: 28px; |
||||
|
/* 设置标题字体大小 */ |
||||
|
font-weight: bold; |
||||
|
/* 设置标题加粗 */ |
||||
|
color: #333; |
||||
|
/* 设置标题颜色 */ |
||||
|
margin-bottom: 20px; |
||||
|
/* 设置标题与下方内容的间距 */ |
||||
|
} |
||||
|
|
||||
|
.no-data { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 200px; |
||||
|
/* 调整高度以适应你的需要 */ |
||||
|
color: #888; |
||||
|
/* 灰色字体颜色 */ |
||||
|
font-size: 20px; |
||||
|
/* 字体大小 */ |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.arrow-container { |
||||
|
position: relative; |
||||
|
width: 100px; |
||||
|
/* 调整箭头容器的宽度 */ |
||||
|
height: 100px; |
||||
|
/* 调整箭头容器的高度 */ |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 20px 0 20px 34.6px; |
||||
|
/* 通过调整这里的数值可以改变箭头的大小 */ |
||||
|
border-color: transparent transparent transparent #007bff; |
||||
|
/* 改变箭头颜色 */ |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,220 @@ |
|||||
|
<template> |
||||
|
<div class="g-main"> |
||||
|
<div v-show="pageType == 'list'"> |
||||
|
<div class="m-search"> |
||||
|
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'"> |
||||
|
<div> |
||||
|
<el-form-item label="意见类型" prop="warnFlag"> |
||||
|
<el-select class="u-item-width-normal" v-model.trim="formData.type" placeholder="全部" |
||||
|
size="small" clearable> |
||||
|
<el-option v-for="item in warnFlagList" :key="item.value" :label="item.label" |
||||
|
:value="item.value"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="意见内容" prop="intelligentFlag"> |
||||
|
<el-input v-model.trim="formData.content" size="small" class="u-item-width-normal" clearable |
||||
|
placeholder="请输入"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-col :span="24" align="right"> |
||||
|
<el-button style="margin-left: 30px" size="small" type="primary " |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left: 10px" size="small" class="diy-button--white" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="m-table"> |
||||
|
<el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight"> |
||||
|
<!-- <el-table-column label="" fixed="left" type="selection" align="center" width="50" /> --> |
||||
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
||||
|
<el-table-column prop="categoryName" align="center" label="需求类别" :show-overflow-tooltip="true"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.type == '0'">软件功能</span> |
||||
|
<span v-if="scope.row.type == '1'">政府业务</span> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column prop="content" label="需求标题" min-width="140" align="center" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="warnFlag" label="用户" align="center" :show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="warnFlag" label="用户手机号" align="center" :show-overflow-tooltip="true"> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="createdTime" label="需求发布时间" align="center" :show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" align="center" width="130"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button style="margin-right: 10px" @click="handleInfo(scope.row, 'info')" size="small" |
||||
|
type="text">查看</el-button> |
||||
|
<el-button @click="handleDel(scope.row)" type="text" size="small" class="">删除</el-button> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" :total="total"></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false" |
||||
|
title="查看" width="950px" top="5vh" class="dialog-h" @closed="diaClose"> |
||||
|
<info v-if="formShow" :list="fmData" /> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { requestPost } from '@/js/dai/request'; |
||||
|
import nextTick from 'dai-js/tools/nextTick'; |
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import axios from 'axios'; |
||||
|
import info from './info.vue' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formShow:false, |
||||
|
dialogVisible: false, |
||||
|
warnFlagList: [{ value: '0', label: '软件功能' }, { value: '1', label: '政府业务' }], |
||||
|
intelligentFlagList: [{ value: '0', label: '不开启' }, { value: '1', label: '开启' }], |
||||
|
disabled: false, |
||||
|
user: '', |
||||
|
agencyId: '', |
||||
|
fmData:{}, |
||||
|
formData: { |
||||
|
type: '', |
||||
|
content: '' |
||||
|
}, |
||||
|
pageType: 'list', // 列表list 新增add 处理dispose 详情info |
||||
|
gridList: [], //所属网格list--场所区域 |
||||
|
placeTypeList: [], //场所类型 |
||||
|
tableData: [], |
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem('pageSize') || 20, |
||||
|
total: 1, |
||||
|
detailId: '', |
||||
|
detailData: {}, |
||||
|
multipleSelection: [], |
||||
|
rowObj: {}, |
||||
|
importLoading: false |
||||
|
}; |
||||
|
}, |
||||
|
components: {info }, |
||||
|
created() {}, |
||||
|
computed: { |
||||
|
maxTableHeight() { |
||||
|
return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeigh : this.clientHeight - 410; |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'iframeHeight']) |
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.user = this.$store.state.user; |
||||
|
this.agencyId = this.user.agencyId; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
diaClose(){ |
||||
|
this.formShow=false |
||||
|
}, |
||||
|
handleInfo(row){ |
||||
|
this.formShow=true |
||||
|
this.fmData=row |
||||
|
}, |
||||
|
|
||||
|
handleSearch(val) { |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.dialogVisible = false; |
||||
|
this.detailId = ''; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
async getTableData() { |
||||
|
const url = '/sys/resiFeedback/page'; |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/330/actual/base/enterprise/list'; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
limit:this.pageSize, |
||||
|
page:this.pageNo, |
||||
|
...formData |
||||
|
}); |
||||
|
if (code === 0) { |
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list |
||||
|
? data.list.map(item => { |
||||
|
return item; |
||||
|
}) |
||||
|
: []; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem('pageSize', val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
resetSearch() { |
||||
|
this.formData = { |
||||
|
intelligentFlag: '', |
||||
|
warnFlag: '' |
||||
|
}; |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
// 删除触发事件 |
||||
|
async handleDel(row) { |
||||
|
this.$confirm("确认删除?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.cancelFuwu(row.id); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
if (err == "cancel") { |
||||
|
// this.$message({ |
||||
|
// type: "info", |
||||
|
// message: "已取消删除" |
||||
|
// }); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 删除处理 |
||||
|
async cancelFuwu(ids) { |
||||
|
const url = "/sys/resiFeedback/delete"; |
||||
|
let params = { |
||||
|
ids: ids |
||||
|
} |
||||
|
const { data, code, msg } = await requestPost(url, [ids]); |
||||
|
if (code === 0) { |
||||
|
this.$message.success("删除成功！"); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error("操作失败！"); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import '@/assets/scss/modules/management/list-main.scss'; |
||||
|
.m-search { |
||||
|
.u-item-width-normal { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,61 @@ |
|||||
|
<template> |
||||
|
<div style="display: flex; white-space: nowrap; padding: 10px 0 0 100px;" > |
||||
|
<el-form label-position="left" :model="tableData"> |
||||
|
<el-form-item label="需求类别" label-width="80px" style="margin-bottom:10px;" > |
||||
|
{{ fmData.type?"政府业务":"软件功能" }} |
||||
|
</el-form-item> |
||||
|
<el-form-item label="需求标题" label-width="80px"> |
||||
|
{{ fmData.content }} |
||||
|
</el-form-item> |
||||
|
<el-form-item label="需求发布时间" label-width="120px" > |
||||
|
{{ fmData.createdTime}} |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="手机号" label-width="80px"> |
||||
|
{{ tableData.mobile}} |
||||
|
</el-form-item> |
||||
|
<el-form-item label="身份证号"label-width="80px" > |
||||
|
{{ tableData.idCard}} |
||||
|
</el-form-item> --> |
||||
|
|
||||
|
<!-- <el-form-item label="星级" label-width="80px"> |
||||
|
{{ tableData.Nickname}} |
||||
|
</el-form-item> --> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { requestPost,requestGet } from "@/js/dai/request"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
labelPosition: 'right', |
||||
|
tableData: {}, |
||||
|
pageSize:10, |
||||
|
pageNo:1, |
||||
|
total:0, |
||||
|
fmData:{}, |
||||
|
volunteerOrgList:[] |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
props:{ |
||||
|
list:{ |
||||
|
type: Object, |
||||
|
default: () => {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
created() { |
||||
|
this.fmData=this.list |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/management/volunteet.scss"; |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue