elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

统计报告,上报评价,等等

chengyang
是小王呀\24601 10 months ago
parent
232f35ca6b
commit
9ff60c8529
6 changed files with 1398 additions and 2 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. 3
      src/views/modules/shequzhili/eventOld/cpts/event-info.vue
  2. 3
      src/views/modules/shequzhili/eventOld/eventList.vue
  3. 424
      src/views/modules/volunteer/reportStatistical/index.scss
  4. 689
      src/views/modules/volunteer/reportStatistical/index.vue
  5. 220
      src/views/modules/workSys/opinionsFeedback/index.vue
  6. 61
      src/views/modules/workSys/opinionsFeedback/info.vue

3
src/views/modules/shequzhili/eventOld/cpts/event-info.vue
View File

@ -510,10 +510,9 @@ export default {
}
},
handelCLickGridId(val){
this.grid = val;
this.grid = val.value;
},
async handelDispose() {
console.log(this.grid,"DSFKDSFJDKS");
if(!this.grid){
console.log(this.grid,"DSFKDSFJDKS");
this.$message.error("请选择网格");

3
src/views/modules/shequzhili/eventOld/eventList.vue
View File

@ -781,7 +781,10 @@ export default {
// 处理 agencyId
if (Array.isArray(this.formData.agencyId) && this.formData.agencyId.length) {
if(this.level=="grid"){
console.log(this.formData.agencyId[this.formData.agencyId.length - 1],"dslkjksjldgh");
this.formData.gridId = this.formData.agencyId[this.formData.agencyId.length - 1];
this.formData.agencyId = "";
}else{
this.formData.agencyId = this.formData.agencyId[this.formData.agencyId.length - 1];

424
src/views/modules/volunteer/reportStatistical/index.scss
View File

@ -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;
}
}
}

689
src/views/modules/volunteer/reportStatistical/index.vue
View File

@ -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>

220
src/views/modules/workSys/opinionsFeedback/index.vue
View File

@ -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>

61
src/views/modules/workSys/opinionsFeedback/info.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save