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

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

v1.1
mk 2 years ago
parent
694c4e228b
commit
0542f34948
11 changed files with 324 additions and 225 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 236
      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. 46
      src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
  11. 94
      src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue

2
.env.development
View File

@ -2,7 +2,7 @@ NODE_ENV=development
# VUE_APP_API_SERVER = https://epmet-preview.elinkservice.cn/api # VUE_APP_API_SERVER = https://epmet-preview.elinkservice.cn/api
# VUE_APP_API_SERVER = http://localhost:8080/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 = http://219.146.91.110:30801/api
# VUE_APP_API_SERVER = https://epmet-yantai.elinkservice.cn/api # VUE_APP_API_SERVER = https://epmet-yantai.elinkservice.cn/api
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api # VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api

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

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

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

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

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

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

236
src/views/dataBoard/overview/components/map-top.vue
View File

@ -1,131 +1,32 @@
<template> <template>
<div class="m-per"> <div :class="['m-per', { 'm-l77': level != 'street' }]">
<!-- <template v-if="level != 'grid'"> <el-autocomplete
<div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''"> v-model="keyWord"
<div class="item-info" @click="selectIcon('staffAgency')"> :fetch-suggestions="querySearch"
<div> :placeholder="searchPlaceholder"
<img src="~@/assets/images/shuju/overview/sqgzz-icon.png" /> class="input-with-select"
社区工作者 popper-class="selectPopClass"
</div> :value-key="'value'"
<div> >
<b>{{ numData.staffAgencyNum }}</b> <el-select
</div> v-model="searchSelect"
</div> slot="prepend"
</div> placeholder="请选择"
<div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''"> popper-class="selectPopClass"
<div class="item-info" @click="selectIcon('staffGrid')"> @change="handleSelect"
<div> >
<img src="~@/assets/images/shuju/overview/wgy-icon.png" /> <el-option label="需求" value="1"></el-option>
网格员 <el-option label="问题" value="2"></el-option>
</div> <el-option label="资源" value="3"></el-option>
<div> <el-option label="不满意事项" value="4"></el-option>
<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>
</el-select> </el-select>
<el-button slot="append">搜索</el-button> <el-button slot="append" type="primary">搜索</el-button>
</el-input> </el-autocomplete>
</template>
</div> </div>
</template> </template>
<script> <script>
import { requestGet } from "@/js/dai/request";
export default { export default {
name: "map-top", name: "map-top",
props: { props: {
@ -146,7 +47,11 @@ export default {
return { return {
selectIndex: "", selectIndex: "",
numData: {}, numData: {},
searchSelect:'不满意事项' searchSelect: "1",
searchPlaceholder:"可按需求人、需求内容关键词搜索",
keyWord: "",
}; };
}, },
watch: { watch: {
@ -161,6 +66,7 @@ export default {
} }
}, },
level(val) { level(val) {
console.log(val);
if (val === "grid") { if (val === "grid") {
this.selectIndex = "unit"; this.selectIndex = "unit";
} else { } else {
@ -178,20 +84,88 @@ export default {
this.selectIndex = type; this.selectIndex = type;
this.$emit("changeType", 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) { getData(item) {
this.$http.get("/actual/base/streetOverview/mapOrgSum?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => { this.$http
this.numData = data; .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> </script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style> <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
<style lang="scss" scoped> <style lang="scss" scoped>
.xz { .m-l77 {
background: url("@/assets/images/shuju/overview/top-xz-bg.png") !important; margin-left: 77px;
height: 90px !important; }
background-size: 140px 90px !important; ::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> </style>

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

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

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

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

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

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

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

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

46
src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
View File

@ -6,7 +6,7 @@
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select> </el-select>
</div> </div>
<div id="typeConditionChart" style="height: 542px"></div> <div id="typeConditionChart" style="height: 193px"></div>
</div> </div>
</template> </template>
@ -215,30 +215,31 @@ export default {
color: "#fff", color: "#fff",
}, },
}, },
legend: { legend: {
show: true, show: true,
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
rich: { rich: {
name: { name: {
fontSize: 14, fontSize: 14,
lineHeight: 22, lineHeight: 22,
// padding: [24, 0, 0, 0], // padding: [24, 0, 0, 0],
},
}, },
}, },
}, itemWidth: 6,
itemWidth: 6, itemHeight: 6,
itemHeight: 6, x: "right", // 设置为 "right" 将图例放在右侧
y: 30, y: 'center',
// x: "right", orient: "vertical", // 设置为 "vertical" 垂直排列
formatter: (name) => { formatter: (name) => {
return `{name|${name}}`; return `{name|${name}}`;
}, },
data: legendName, data: legendName,
}, },
radar: { radar: {
center: ["50%", "55%"], center: ["25%", "55%"],
radius: "50%", radius: "60%",
startAngle: 90, startAngle: 90,
splitNumber: 5, splitNumber: 5,
splitArea: { splitArea: {
@ -265,11 +266,12 @@ export default {
name: { name: {
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: "16", fontSize: "14",
borderRadius: 3, borderRadius: 3,
padding: [3, 5], padding: [3, 5],
}, },
}, },
nameGap:10,
indicator: indicator, indicator: indicator,
}, },
series, series,

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

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