11 changed files with 978 additions and 118 deletions
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 46 KiB |
@ -0,0 +1,360 @@ |
|||
<template> |
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="社区自查报告详情"/> |
|||
</div> |
|||
|
|||
<div class="content2"> |
|||
<div class="title-sub"> |
|||
<img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/> |
|||
不满意事项列表 |
|||
</div> |
|||
<div class="preface"> |
|||
<p>尊敬的居民朋友:</p> |
|||
<p class="indent-2"> |
|||
为了更好地推进社区工作,为您提供更全面、优质的社区服务,请您根据真实情况填写此表,我们将认真对待您提出的问题,并承诺对您提供的信息保密,感谢您的配合!</p> |
|||
</div> |
|||
|
|||
<div class="problem-list"> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">1、您对本社区的文化设施建设情况</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">1.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">社区文化广场</el-radio> |
|||
<el-radio :label="2">图书阅览室</el-radio> |
|||
<el-radio :label="3">文艺演出</el-radio> |
|||
<el-radio :label="4">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因: 退休人员比较多,大家空闲时间多,没社区文化广场太少了,没法打发时间。</div> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">2、您对本社区的体育健身设施、组织开展的健身活动、比赛等体育活动是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">2.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">社区健身器材</el-radio> |
|||
<el-radio :label="2">健身运动</el-radio> |
|||
<el-radio :label="3">体育活动</el-radio> |
|||
<el-radio :label="3">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因: 老年人健身的地方都没有,平时想锻炼困难。</div> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">3、您对本社区的幼儿园保育教育质量,小学/初中数学质量以及师德师风方面是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">4、您对本社区的医疗机构便利程度、医务人员的服务态度是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">4.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">挂号缴费</el-radio> |
|||
<el-radio :label="2">检查化验</el-radio> |
|||
<el-radio :label="3">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">5、您对本社区的养老院建设和服务、居家社区养老服务等方面是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">5.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">社区老年人活动场所</el-radio> |
|||
<el-radio :label="2">社区为老服务</el-radio> |
|||
<el-radio :label="3">居家养老服务</el-radio> |
|||
<el-radio :label="4">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">6、您对本社区的社会救助和服务态度以及困难家庭住房保障工作是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">6.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">低保、特困、残疾人保障办理便利程度</el-radio> |
|||
<el-radio :label="3">临时救助申请办理便利程度</el-radio> |
|||
<el-radio :label="4">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">7、您对本社区的空气质量、居住环境、道路情况、停车情况是否满意?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">7.1、您具体对哪些方面不满意?请详细说明原因。</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">废气、异味、工地扬尘</el-radio> |
|||
<el-radio :label="3">楼院卫生</el-radio> |
|||
<el-radio :label="3">乱停车</el-radio> |
|||
<el-radio :label="3">占道经营</el-radio> |
|||
<el-radio :label="4">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
8、您对本社区的公安机关打击违法犯罪活动、开展巡逻执勤、维护治安秩序等安全防范工作方面是否满意? |
|||
</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">满意</el-radio> |
|||
<el-radio :label="2">基本满意</el-radio> |
|||
<el-radio :label="3">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
8、您对本社区的公安机关打击违法犯罪活动、开展巡逻执勤、维护治安秩序等安全防范工作方面是否满意? |
|||
</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">扫黑除恶</el-radio> |
|||
<el-radio :label="3">打击犯罪</el-radio> |
|||
<el-radio :label="3">保护人身财产安全</el-radio> |
|||
<el-radio :label="4">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
<div>9、您的姓名</div> |
|||
<div class="line">夯大力</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
<div>10、您的手机号</div> |
|||
<div class="line">夯大力</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">11、您是否接受回访?</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">接受回访</el-radio> |
|||
<el-radio :label="3">不接受回访</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">12、请选择合适您的回访方式</div> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="1">电话回访</el-radio> |
|||
<el-radio :label="2">工作人员上门回访</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">请填写您在社区的家庭住址</div> |
|||
<div class="select"> |
|||
<el-select v-model="value" class="select" filterable placeholder="选择所在小区" |
|||
popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="value" class="select" filterable placeholder="楼栋" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="value" class="select" filterable placeholder="单元" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="value" class="select" filterable placeholder="门牌号" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="textarea"> |
|||
<el-input |
|||
:autosize="{ minRows: 5, maxRows: 10}" |
|||
placeholder="如以上选择无法找到您的家庭住址,可在这里填写。" |
|||
type="textarea" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "dissatisfieReason", |
|||
components: {Title}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
radio: 3, |
|||
value: "", |
|||
options: [{ |
|||
label: '1', |
|||
value: 1 |
|||
}], |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(id) { |
|||
this.dialogVisible = true; |
|||
this.getDetail(id); |
|||
}, |
|||
getDetail(id) { |
|||
|
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
|
|||
.content2 { |
|||
padding: 42px 40px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.indent-2 { |
|||
text-indent: 2em; |
|||
} |
|||
|
|||
.title-sub { |
|||
font-size: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.problem-list { |
|||
font-size: 14px; |
|||
margin-top: 24px; |
|||
|
|||
.problem-item { |
|||
margin-bottom: 25px; |
|||
|
|||
.problem-title { |
|||
margin-bottom: 17px; |
|||
} |
|||
|
|||
.el-radio-group { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-radio__label { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
/deep/ .el-textarea__inner { |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgba(0, 23, 66, 0.72); |
|||
} |
|||
|
|||
.el-select { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.textarea { |
|||
width: 610px; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,221 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-date-picker |
|||
v-model="queryParams.month" |
|||
:append-to-body="false" |
|||
placeholder="按月度" |
|||
popper-class="date-current-weiyi" |
|||
size="small" |
|||
type="month" |
|||
value-format="yyyy-MM" |
|||
/> |
|||
|
|||
<el-select |
|||
v-model="queryParams.agencyId" |
|||
placeholder="按组织" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
> |
|||
<el-option |
|||
v-for="item in orgOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-model.trim="queryParams.name" placeholder="不满意原因" size="small"></el-input> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
|
|||
<el-table-column label="填写时间" prop="key" width="118"/> |
|||
<el-table-column label="所属组织" prop="gridName" width="118"/> |
|||
|
|||
<el-table-column label="姓名" prop="restName"></el-table-column> |
|||
|
|||
<el-table-column label="连写电话" prop="mobile"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="文化设施" prop="key"/> |
|||
<el-table-column label="体育设施" prop="key"/> |
|||
<el-table-column label="生态环境" prop="key"/> |
|||
<el-table-column label="社会治安" prop="key"/> |
|||
<el-table-column label="社会救助" prop="key"/> |
|||
<el-table-column label="老有所养" prop="key"/> |
|||
<el-table-column label="基础教育" prop="key"/> |
|||
<el-table-column label="病有所医" prop="key"/> |
|||
<el-table-column label="不满意原因" prop="key"/> |
|||
<el-table-column label="回访方式" prop="key"/> |
|||
<el-table-column label="回访状态" prop="key"/> |
|||
|
|||
<el-table-column align="center" label="详情" width="90"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<dissatisfieReasonDetail ref="detail" /> |
|||
|
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import dissatisfieReasonDetail from "@/views/dataBoard/satisfactionEval/dissatisfieReason/detail.vue"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "dissatisfied", |
|||
components: {Breadcrumb, Pagination, Title, dissatisfieReasonDetail}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "社区自查不满意原因列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [{},{},{}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
this.$http.get("?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
getOrg() { |
|||
let params = { |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
}; |
|||
this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => { |
|||
this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId; |
|||
let parent = {value: data.id, label: data.name}; |
|||
this.orgOptions = [ |
|||
parent, |
|||
...data.children.map((item) => { |
|||
return { |
|||
value: item.id, |
|||
label: item.name, |
|||
}; |
|||
}), |
|||
]; |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
|
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return [startTime, endTime]; |
|||
}, |
|||
handleView(id) { |
|||
this.id = id; |
|||
this.$refs.detail.open(id); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div class="charts"> |
|||
<div id="DissatisfiedReason" @click="$router.push('/dataBoard/satisfactionEval/dissatisfieReason')"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: "DissatisfiedReason", |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
timeChange() { |
|||
|
|||
}, |
|||
initChart() { |
|||
let div = document.getElementById('DissatisfiedReason'); |
|||
this.myChart = echarts.init(div); |
|||
var getname = ['社区工作不了解', '宣传力度小', '对社区工作不满意', '其他']; // 课程名 |
|||
var getNum = [8, 9, 16, 21]; |
|||
|
|||
var data = []; |
|||
for (var i = 0; i < getname.length; i++) { |
|||
data.push({name: getname[i], value: getNum[i]}) |
|||
} |
|||
const color = ['#1A95FF', '#27B5BD', '#F95619', '#FFAA01'] |
|||
|
|||
var option = { |
|||
color, |
|||
tooltip: { |
|||
trigger: "item" |
|||
}, |
|||
legend: { |
|||
type: "plain", |
|||
orient: "vertical", |
|||
right: 70, |
|||
top: "center", |
|||
align: "left", |
|||
itemGap: 16, |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
symbolKeepAspect: false, |
|||
selectedMode: false, |
|||
formatter: function (name) { |
|||
for (var i = 0; i < getname.length; i++) { |
|||
if (name == data[i].name) { |
|||
return '{name|' + name + '}{num|' + getNum[i] + '}' |
|||
} |
|||
} |
|||
}, |
|||
textStyle: { |
|||
rich: { |
|||
name: { |
|||
fontSize: 12, |
|||
width: 130, |
|||
overflow: 'hidden', |
|||
textOverflow: 'ellipsis', |
|||
padding: [0, 29, 0, 5], |
|||
color: '#A3B9DA', |
|||
}, |
|||
num: { |
|||
fontSize: 18, |
|||
fontWeight: 500, |
|||
align: 'right', |
|||
color: '#FFFFFF', |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: '', |
|||
type: "pie", |
|||
radius: ["65%", "90%"], |
|||
center: ["20%", "50%"], |
|||
avoidLabelOverlap: false, |
|||
|
|||
label: { |
|||
show: false, |
|||
position: "center", |
|||
color: "rgba(13, 17, 29,0)", |
|||
formatter: `{primary|{d}%}\n{point|占比}}`, |
|||
rich: { |
|||
primary: { |
|||
fontSize: 24, |
|||
color: '#7FCEFF', |
|||
align: 'center' |
|||
}, |
|||
point: { |
|||
fontSize: 12, |
|||
fontWeight: 400, |
|||
color: "#A3B9DA", |
|||
align: 'center' |
|||
} |
|||
} |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '14', |
|||
fontWeight: 'normal' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data, |
|||
zlevel: 30 |
|||
}] |
|||
}; |
|||
this.myChart.setOption(option, true); |
|||
window.addEventListener("resize", () => this.myChart.resize()); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.charts { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 32px; |
|||
#DissatisfiedReason { |
|||
flex: calc(100% - 100px); |
|||
width: calc(100% - 100px); |
|||
height: 150px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue