Browse Source

列表加loading,插槽实现组件更多与时间选择,满意度评价加背景框,满意度评价小成

v1.1
mk 2 years ago
parent
commit
0542f34948
  1. 2
      .env.development
  2. 3
      src/assets/scss/dataBoard/overview/index.scss
  3. 3
      src/views/dataBoard/cpts/map/index.vue
  4. 2
      src/views/dataBoard/overview/components/jdjs.vue
  5. 232
      src/views/dataBoard/overview/components/map-top.vue
  6. 99
      src/views/dataBoard/overview/components/wtqd.vue
  7. 4
      src/views/dataBoard/overview/index.vue
  8. 3
      src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue
  9. 55
      src/views/dataBoard/satisfactionEval/index.vue
  10. 14
      src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
  11. 94
      src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue

2
.env.development

@ -2,7 +2,7 @@ NODE_ENV=development
# VUE_APP_API_SERVER = https://epmet-preview.elinkservice.cn/api
# VUE_APP_API_SERVER = http://localhost:8080/api
VUE_APP_API_SERVER = http://192.168.1.144/api
VUE_APP_API_SERVER = http://219.146.91.110:30801/api
# VUE_APP_API_SERVER = http://219.146.91.110:30801/api
# VUE_APP_API_SERVER = https://epmet-yantai.elinkservice.cn/api
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api

3
src/assets/scss/dataBoard/overview/index.scss

@ -969,3 +969,6 @@
border-bottom: solid 1px #006cff;
}
}
::v-deep .el-autocomplete-suggestion{
background: #001c44;
}

3
src/views/dataBoard/cpts/map/index.vue

@ -1,6 +1,6 @@
<template>
<div class="m-map" :class="{ 'z-td': mapType == 'td' }">
<div id="map" :style="{ transform: `scale(${zoom})` }"></div>
<div id="map" ></div>
<div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div>
<div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
<!-- :style="{ transform: `scale(${zoom})` }" -->
@ -937,7 +937,6 @@ export default {
/deep/ .amap-container {
background: transparent !important;
}
.m-map {
position: relative;
height: 100%;

2
src/views/dataBoard/overview/components/jdjs.vue

@ -20,9 +20,11 @@
/>
</div>
<title-small text="不满意风险人员">
<template v-slot:time>
<el-select v-model="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" @change="timeChange">
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template>
</title-small>
<div class="f-flex white f-mean">
<div class="f-hflex" @click="

232
src/views/dataBoard/overview/components/map-top.vue

@ -1,131 +1,32 @@
<template>
<div class="m-per">
<!-- <template v-if="level != 'grid'">
<div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('staffAgency')">
<div>
<img src="~@/assets/images/shuju/overview/sqgzz-icon.png" />
社区工作者
</div>
<div>
<b>{{ numData.staffAgencyNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('staffGrid')">
<div>
<img src="~@/assets/images/shuju/overview/wgy-icon.png" />
网格员
</div>
<div>
<b>{{ numData.staffGridNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'chief' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('chief')">
<div>
<img src="~@/assets/images/shuju/overview/lzz-icon.png" />
楼组/单元长
</div>
<div>
<b>{{ numData.chiefNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'publicWelfareNum' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('publicWelfareNum')">
<div>
<img src="~@/assets/images/shuju/overview/gyg-icon.png" />
公益岗
</div>
<div>
<b>{{ numData.publicWelfareNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'staffDepartment' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('staffDepartment')">
<div><img src="~@/assets/images/shuju/overview/dwzz-icon.png" />单位/组织</div>
<div>
<b>{{ numData.staffDepartmentNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'volunteer' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('volunteer')">
<div>
<img src="~@/assets/images/shuju/overview/zyz-icon.png" />
志愿者
</div>
<div>
<b>{{ numData.volunteerNum }}</b>
</div>
</div>
</div>
</template>
<template v-else>
<div class="item" :class="selectIndex === 'unit' ? 'xz' : ''" @click="selectIcon('unit')">
<div class="item-info">
<div>
<img src="~@/assets/images/overview/icon_wg.png" />
微网格
</div>
<div>
<b>{{ numData.unitNum }}</b>
</div>
</div>
</div>
<div class="item" :class="selectIndex === 'building' ? 'xz' : ''" @click="selectIcon('building')">
<div class="item-info">
<div>
<img src="~@/assets/images/overview/icon_ld.png" />
楼栋
</div>
<div>
<b>{{ numData.buldingNum }}</b>
</div>
</div>
</div>
<div class="item">
<div class="item-info">
<div>
<img src="~@/assets/images/overview/icon_fw.png" />
房屋
</div>
<div>
<b>{{ numData.houseNum }}</b>
</div>
</div>
</div>
<div class="item">
<div class="item-info">
<div>
<img src="~@/assets/images/overview/icon_jm.png" />
居民
</div>
<div>
<b>{{ numData.residentNum }}</b>
</div>
</div>
</div>
</template> -->
<template>
<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input3" class="input-with-select">
<el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
<el-option label="需求"></el-option>
<el-option label="问题" ></el-option>
<el-option label="资源" ></el-option>
<el-option label="不满意事项"></el-option>
<div :class="['m-per', { 'm-l77': level != 'street' }]">
<el-autocomplete
v-model="keyWord"
:fetch-suggestions="querySearch"
:placeholder="searchPlaceholder"
class="input-with-select"
popper-class="selectPopClass"
:value-key="'value'"
>
<el-select
v-model="searchSelect"
slot="prepend"
placeholder="请选择"
popper-class="selectPopClass"
@change="handleSelect"
>
<el-option label="需求" value="1"></el-option>
<el-option label="问题" value="2"></el-option>
<el-option label="资源" value="3"></el-option>
<el-option label="不满意事项" value="4"></el-option>
</el-select>
<el-button slot="append">搜索</el-button>
</el-input>
</template>
<el-button slot="append" type="primary">搜索</el-button>
</el-autocomplete>
</div>
</template>
<script>
import { requestGet } from "@/js/dai/request";
export default {
name: "map-top",
props: {
@ -146,7 +47,11 @@ export default {
return {
selectIndex: "",
numData: {},
searchSelect:'不满意事项'
searchSelect: "1",
searchPlaceholder:"可按需求人、需求内容关键词搜索",
keyWord: "",
};
},
watch: {
@ -161,6 +66,7 @@ export default {
}
},
level(val) {
console.log(val);
if (val === "grid") {
this.selectIndex = "unit";
} else {
@ -178,20 +84,88 @@ export default {
this.selectIndex = type;
this.$emit("changeType", type);
},
async querySearch(queryString) {
try {
let params={
keyword: queryString,
pageSize:20,
pageNo:1
}
const {data} = await requestGet('/governance/dataBoard/demand/search', params);
const suggestions = data.map(item => ({ label: item.content, value: item.id }));
console.log(suggestions);
return suggestions
} catch (error) {
console.error('Error fetching suggestions:', error);
return [];
}
},
getData(item) {
this.$http.get("/actual/base/streetOverview/mapOrgSum?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
this.$http
.get(
"/actual/base/streetOverview/mapOrgSum?level=" +
item.orgLevel +
"&orgId=" +
item.orgId
)
.then(({ data: { data } }) => {
this.numData = data;
});
},
handleSelect(val){
if(val == 1){
this.searchPlaceholder = '可按需求人、需求内容关键词搜索'
}else if(val == 2){
this.searchPlaceholder = '可按联系人、问题描述关键词搜索'
}else if(val == 3){
this.searchPlaceholder = '可按单位名称、负责人、负责人联系电话关键词搜索'
}else if(val == 4){
this.searchPlaceholder = '可按姓名、联系电话、问题描述关键词搜索'
}
}
},
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
<style lang="scss" scoped>
.xz {
background: url("@/assets/images/shuju/overview/top-xz-bg.png") !important;
height: 90px !important;
background-size: 140px 90px !important;
.m-l77 {
margin-left: 77px;
}
::v-deep .el-autocomplete {
width: 100%;
}
::v-deep .el-input {
.el-input-group__prepend {
background: #001c44;
border: 1px solid #007ff1;
border-right: none;
position: relative;
width: 131px;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
height: 15px;
background-color: #007ff1;
width: 1px;
transform: translateY(-7px);
}
}
.el-input__inner {
background: #001c44;
border: 1px solid #007ff1;
border-left: none;
border-right: none;
}
.el-input-group__append {
background: #0058ac;
border: 1px solid #007ff1;
}
}
</style>

99
src/views/dataBoard/overview/components/wtqd.vue

@ -1,8 +1,8 @@
<template>
<div class="m-wtqd">
<title-small text="难点赌点" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions" v-if="nddd">
<div class="t-list f-hflex" v-if="nddd.length>0" >
<swiper ref="orderSwiper" :options="swiperOptions" >
<swiper-slide
v-for="(items, index) in nddd"
:key="index"
@ -12,17 +12,21 @@
:class="['item', 'f-flex']"
v-for="(item, index) in items"
:key="index"
@click="handleView(item)"
>
<span>{{ item.createdTime.substr(5,5) }}</span>
<span>{{ item.eventContent }}</span>
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<div class="no-data h200" v-loading="listLoading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 21, 64, 0" v-else>暂无数据</div>
<title-small text="矛盾纠纷" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions" v-if="mdjf">
<div class="t-list f-hflex" v-if="mdjf.length>0">
<swiper ref="orderSwiper" :options="swiperOptions" >
<swiper-slide
v-for="(items, index) in mdjf"
:key="index"
@ -38,11 +42,13 @@
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<div class="no-data h200" v-else v-loading="listLoading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
<title-small text="自身问题" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="zswt">
<div class="t-list f-hflex" v-if="zswt.length>0">
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
<swiper-slide
v-for="(items, index) in zswt"
:key="index"
@ -58,11 +64,13 @@
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<div class="no-data h150" v-else v-loading="listLoading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
<title-small text="超出服务范围" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="ccfwfw">
<div class="t-list f-hflex" v-if="ccfwfw.length>0">
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
<swiper-slide
v-for="(items, index) in ccfwfw"
:key="index"
@ -78,8 +86,10 @@
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<div class="no-data h150" v-else v-loading="listLoading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
<title-small text="不满意问题数" />
<div class="f-flex white f-mean">
<div
@ -116,6 +126,8 @@
<div class="f-darkGray"><b class="f-font34 f-skyBlue">0</b></div>
</div>
</div>
<EventDetails :showDialog="showDialog" :id="this.rowId" @close="close" />
</div>
</template>
<script>
@ -123,6 +135,8 @@ import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titl
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { requestPost } from "@/js/dai/request";
import EventDetails from "@/views/dataBoard/cpts/event-details.vue";
export default {
name: "wtqd",
props: {
@ -146,26 +160,6 @@ export default {
startTime: "",
tableData: [
{
time: "今天",
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现",
},
{
time: "今天",
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现",
},
{
time: "今天",
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现",
},
{
time: "今天",
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现",
},
{
time: "今天",
title: "小区进行老旧小区改造后,1号楼1单元楼下出现1单元楼下出现",
},
],
createdTime: '2022-05-20 10:50:58',
// 4
@ -182,7 +176,12 @@ export default {
nddd:[],
mdjf:[],
zswt:[],
ccfwfw:[]
ccfwfw:[],
listLoading:true,
showDialog:false,
rowId:''
};
},
watch: {
@ -202,6 +201,7 @@ export default {
titleSmall,
swiper,
swiperSlide,
EventDetails
},
//
methods: {
@ -255,17 +255,18 @@ export default {
//
}
}
return results;
},
//
async fetchDataAndProcess() {
this.listLoading = true
const apiResults = await this.fetchData();
this.nddd =this.groupList(apiResults[0],4);
this.mdjf =this.groupList(apiResults[1],4);
this.zswt =this.groupList(apiResults[2],3);
this.ccfwfw =this.groupList(apiResults[3],3);
this.listLoading = false
this.nddd =this.groupList(apiResults[0].list,4);
this.mdjf =this.groupList(apiResults[1].list,4);
this.zswt =this.groupList(apiResults[2].list,3);
this.ccfwfw =this.groupList(apiResults[3].list,3);
},
groupList(array, subGroupLength) {
let index = 0;
@ -276,12 +277,26 @@ export default {
return newArray;
},
getData() {},
handleView({ icEventId }) {
this.showDialog = true;
this.rowId = icEventId;
},
close() {
this.showDialog = false;
},
},
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
<style lang="scss" scoped>
.h150{
height: 150px;
}
.h200{
height: 200px;
}
/deep/ .el-input__inner {
width: 90px !important;
height: 24px !important;
@ -305,10 +320,10 @@ export default {
margin-top: 15px;
}
.no-data{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-30px);
display: flex;
align-items: center;
justify-content: center;
}
.t-list {
flex: 1;

4
src/views/dataBoard/overview/index.vue

@ -501,10 +501,10 @@ export default {
.go-back {
position: absolute;
z-index: 100;
top: 100px;
top: 20px;
left: 16px;
right: 0;
width: 64px;
img {
height: 36px;
width: 36px;

3
src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue

@ -5,7 +5,8 @@
<span class="txt">{{ text }}</span>
<span class="text-shadow">{{ text }}</span>
</span>
<slot></slot>
<slot name="time"></slot>
<slot name="info"></slot>
</div>
</template>

55
src/views/dataBoard/satisfactionEval/index.vue

@ -1,37 +1,34 @@
<template>
<div class="satisfaction-eval">
<el-row :gutter="20">
<el-col :span="8">
<div class="bg">
<el-col :span="8" class="bgImg">
<Title text="12345数据分析" />
<eventAnalysis/>
</el-col>
<el-col :span="8" >
<!-- <EventSituation /> -->
<div class=" bgImg">
<Title text="不满意事项类型分析">
<div class="more" @click="goToPage(`/dataBoard/satisfactionEval/dissatisfied/${index}/${type}/${time}`)">查看详细 <i class="el-icon-arrow-right"></i></div>
</Title>
<TypesOfDissatisfaction @timeChange="timeChange" />
</div>
<div class="bg">
<Title text="不满意风险人员统计及回访情况" />
<RiskStatistics :date="typeDate" />
</div>
</el-col>
<el-col :span="8">
<EventSituation />
<div class="bg2">
<div class="bgImg">
<Title text="不满意事项及满意度自查走势" />
<SelfTrend />
</div>
<div class="bg2">
<div class="bgImg">
<Title text="下级组织不满意事项统计" />
<EventStatistics :date="typeDate" />
</div>
</el-col>
<el-col :span="8">
<div class="bg2">
<div class="bgImg">
<Title text="不满意人员画像" />
<PersonnelPortrait />
</div>
<div class="bg2">
<div class="bgImg">
<Title text="潜在不满意人数" />
<PotentialPeople :date="typeDate" />
</div>
@ -49,6 +46,8 @@ import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend";
import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics";
import PersonnelPortrait from "@/views/dataBoard/satisfactionEval/modules/PersonnelPortrait";
import PotentialPeople from "@/views/dataBoard/satisfactionEval/modules/PotentialPeople";
import eventAnalysis from "@/views/dataBoard/satisfactionEval/modules/eventAnalysis";
export default {
name: "satisfactionEvaluation",
@ -61,6 +60,7 @@ export default {
Title,
PersonnelPortrait,
PotentialPeople,
eventAnalysis
},
data() {
return {
@ -80,11 +80,22 @@ export default {
},
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
<style scoped lang="scss">
.satisfaction-eval {
//padding: 24px 20px;
}
/deep/ .el-input__inner {
width: 90px !important;
height: 24px !important;
background: #021c49 !important;
border: 1px solid #125aaa !important;
border-radius: 12px !important;
color: #a0cdff;
}
/deep/ .el-input__icon {
line-height: 24px !important;
color: #a0cdff;
}
.more {
font-size: 14px;
@ -92,12 +103,10 @@ export default {
color: #a0cdff;
cursor: pointer;
}
.bg2 {
background: linear-gradient(180deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
.bgImg{
background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
background-size: 100% 100%;
margin-top: 5px;
}
.bg {
background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
}
</style>

14
src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue

@ -6,7 +6,7 @@
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<div id="typeConditionChart" style="height: 542px"></div>
<div id="typeConditionChart" style="height: 193px"></div>
</div>
</template>
@ -229,16 +229,17 @@ export default {
},
itemWidth: 6,
itemHeight: 6,
y: 30,
// x: "right",
x: "right", // "right"
y: 'center',
orient: "vertical", // "vertical"
formatter: (name) => {
return `{name|${name}}`;
},
data: legendName,
},
radar: {
center: ["50%", "55%"],
radius: "50%",
center: ["25%", "55%"],
radius: "60%",
startAngle: 90,
splitNumber: 5,
splitArea: {
@ -265,11 +266,12 @@ export default {
name: {
textStyle: {
color: "#ffffff",
fontSize: "16",
fontSize: "14",
borderRadius: 3,
padding: [3, 5],
},
},
nameGap:10,
indicator: indicator,
},
series,

94
src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue

@ -0,0 +1,94 @@
<template>
<div class='' style="padding: 0 10px;">
<title-small text="同地点同类型事件重复投诉问题">
<template v-slot:time>
<el-select v-model="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" @change="timeChange">
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</template>
<template v-slot:info>
<span class="infoColor">更多></span>
</template>
</title-small>
</div>
</template>
<script>
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
export default {
data() {
return {
typeCondition:'',
startTime:'',
endTime:'',
typeConditionList: [
{
label: "本月",
value: 1,
},
{
label: "上月",
value: 2,
},
{
label: "近三月",
value: 3,
},
{
label: "近半年",
value: 4,
},
{
label: "近一年",
value: 5,
},
],
};
},
created() {},
methods: {
timeChange() {
let startTime = "",
endTime = "";
if (this.typeCondition === 1) {
startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
}
if (this.typeCondition === 2) {
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
}
if (this.typeCondition === 3) {
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
}
if (this.typeCondition === 4) {
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
}
if (this.typeCondition === 5) {
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
}
if (this.typeCondition === 2) {
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
} else {
endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
}
this.startTime = startTime;
this.endTime = endTime;
// this.getData();
},
},
components:{
titleSmall
},
computed:{},
watch: {},
}
</script>
<style lang='scss' scoped>
.infoColor{
color: #A3B9DA ;
}
</style>
Loading…
Cancel
Save