You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1166 lines
38 KiB
1166 lines
38 KiB
|
|
<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="自评周期">
|
|
<el-date-picker
|
|
v-model="formData.period"
|
|
type="month"
|
|
value-format="yyyy-MM"
|
|
placeholder="选择日期"
|
|
style="width: 202px"
|
|
clearable
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<div style="float: right; margin-top: 5px">
|
|
<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="resetSearch"
|
|
>重置</el-button
|
|
>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="m-table">
|
|
<div class="div_btn" v-if="btnFlag">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
class="diy-button--white el-button--default"
|
|
@click="handleCreateMonthlySurvey"
|
|
>生成本月社区自查问卷表</el-button
|
|
>
|
|
</div>
|
|
<div
|
|
class="m-table-item"
|
|
:style="{ height: maxTableHeight + 'px', width: '100%' }"
|
|
>
|
|
<div>本月已参与调研人数 {{ personQty }}人</div>
|
|
<section class="content_box">
|
|
<div class="left">
|
|
<img
|
|
src="../../../../assets/img/satisfaction/zhdf.png"
|
|
alt="Image"
|
|
/>
|
|
<div class="left_right">
|
|
<div>
|
|
{{
|
|
synthesisScore < 0
|
|
? Math.abs(synthesisScore)
|
|
: synthesisScore
|
|
}}
|
|
</div>
|
|
<div>综合得分</div>
|
|
</div>
|
|
<div class="right_box">
|
|
<div :class="synthesisState ? 'up' : 'down'">
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
alt=""
|
|
v-if="synthesisState && synthesisScoreBtLastMonth != 0"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
alt=""
|
|
v-if="
|
|
!synthesisState &&
|
|
synthesisScoreBtLastMonth != 0 &&
|
|
synthesisScoreBtLastMonth != null
|
|
"
|
|
/>
|
|
<span>{{
|
|
synthesisScoreBtLastMonth < 0
|
|
? Math.abs(synthesisScoreBtLastMonth)
|
|
: synthesisScoreBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
<div style="color: #999">较上月</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="box" v-for="(item, index) in score" :key="index">
|
|
<div class="card">
|
|
<img :src="item.imgUrl" alt="Image" />
|
|
<div class="right_right">
|
|
<div>{{ item.score }}</div>
|
|
<div>{{ item.satisfactionCategoryName }}</div>
|
|
</div>
|
|
<div class="right_box">
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
alt=""
|
|
v-if="item.state && item.scoreDiffBtLastMonth != 0"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
alt=""
|
|
v-if="!item.state && item.scoreDiffBtLastMonth != 0"
|
|
/>
|
|
<span :class="item.state ? 'up' : 'down'">
|
|
{{
|
|
item.scoreDiffBtLastMonth < 0
|
|
? Math.abs(item.scoreDiffBtLastMonth)
|
|
: item.scoreDiffBtLastMonth
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div style="color: #999">较上月</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bto-box">
|
|
<div id="myCharts" v-if="user.level != 'street'"></div>
|
|
<div v-else class="f-top16">
|
|
<el-table
|
|
:data="tableList"
|
|
:height="tabHeight"
|
|
border
|
|
align="center"
|
|
>
|
|
<el-table-column label="序号" type="index" width="80" />
|
|
<el-table-column
|
|
label="社区"
|
|
show-overflow-tooltip
|
|
prop="agencyName"
|
|
width="200"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="参与调研人数"
|
|
prop="personQty"
|
|
width="150"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="综合得分"
|
|
prop="synthesisScore"
|
|
width="150"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.synthesisScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.synthesisScoreDiffBtLastMonth > 0 &&
|
|
scope.row.synthesisScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.synthesisScoreDiffBtLastMonth < 0 &&
|
|
scope.row.synthesisScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.synthesisScoreDiffBtLastMonth < 0
|
|
? Math.abs(scope.row.synthesisScoreDiffBtLastMonth)
|
|
: scope.row.synthesisScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="文化设施"
|
|
prop="culturalFacilityScore"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.culturalFacilityScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth >
|
|
0 &&
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth <
|
|
0 &&
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.culturalFacilityScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.culturalFacilityScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="基础教育"
|
|
prop="basicEducation"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.basicEducationScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.basicEducationScoreDiffBtLastMonth > 0 &&
|
|
scope.row.basicEducationScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.basicEducationScoreDiffBtLastMonth < 0 &&
|
|
scope.row.basicEducationScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.basicEducationScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.basicEducationScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.basicEducationScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="体育设施"
|
|
prop="sportsFacility"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.sportsFacilityScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth > 0 &&
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth < 0 &&
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.sportsFacilityScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.sportsFacilityScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="生态环境"
|
|
prop="ecologicalEnv"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.ecologicalEnvScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth > 0 &&
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth < 0 &&
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.ecologicalEnvScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.ecologicalEnvScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="社会治安"
|
|
prop="socialSecurity"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.socialSecurityScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.socialSecurityScoreDiffBtLastMonth > 0 &&
|
|
scope.row.socialSecurityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.socialSecurityScoreDiffBtLastMonth < 0 &&
|
|
scope.row.socialSecurityScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.socialSecurityScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.socialSecurityScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.socialSecurityScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="社会救助"
|
|
prop="socialAssistance"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.socialAssistanceScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth >
|
|
0 &&
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth <
|
|
0 &&
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.socialAssistanceScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.socialAssistanceScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="老有所养"
|
|
prop="oldPeopleProvide"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.oldPeopleProvideScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth >
|
|
0 &&
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth <
|
|
0 &&
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth < 0
|
|
? Math.abs(
|
|
scope.row.oldPeopleProvideScoreDiffBtLastMonth
|
|
)
|
|
: scope.row.oldPeopleProvideScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="病有所医" prop="medical" width="150">
|
|
<template slot-scope="scope">
|
|
<div class="f-flex">
|
|
<span class="down f-right8">{{
|
|
scope.row.medicalScore
|
|
}}</span>
|
|
<div>
|
|
<img
|
|
src="@/assets/images/index/up.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.medicalScoreDiffBtLastMonth > 0 &&
|
|
scope.row.medicalScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<img
|
|
src="@/assets/images/index/down.png"
|
|
width="10px"
|
|
height="14px"
|
|
v-if="
|
|
scope.row.medicalScoreDiffBtLastMonth < 0 &&
|
|
scope.row.medicalScoreDiffBtLastMonth != 0
|
|
"
|
|
/>
|
|
<span class="gray">{{
|
|
scope.row.medicalScoreDiffBtLastMonth < 0
|
|
? Math.abs(scope.row.medicalScoreDiffBtLastMonth)
|
|
: scope.row.medicalScoreDiffBtLastMonth
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
width="90"
|
|
align="center"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="data">
|
|
<el-button type="text" @click="handleView(data.row)"
|
|
>查看</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-row type="flex">
|
|
<el-col :span="12" align="left">
|
|
<div style="margin-top: 25px">共{{ total }}条</div>
|
|
</el-col>
|
|
<el-col :span="12" align="right">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page.sync="pageNo"
|
|
:page-size="pageSize"
|
|
layout="prev, pager, next,jumper"
|
|
:total="total"
|
|
>
|
|
</el-pagination
|
|
></el-col>
|
|
</el-row>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
v-if="showCommunitDialog"
|
|
:visible.sync="showCommunitDialog"
|
|
:title="communitDialogTitle"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
width="1250px"
|
|
top="5vh"
|
|
class="dialog-h"
|
|
@closed="showCommunitDialog = false"
|
|
>
|
|
<community-dialog
|
|
:communityId="communityId"
|
|
:period="formData.period"
|
|
:satisfaction_category="dicts.satisfaction_category"
|
|
@handelClickChart="handelClickChart"
|
|
>
|
|
</community-dialog>
|
|
<el-dialog
|
|
v-if="showFormList"
|
|
:visible.sync="showFormList"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
title="社区自查"
|
|
append-to-body
|
|
width="820px"
|
|
top="5vh"
|
|
class="dialog-h"
|
|
@closed="showFormList = false"
|
|
>
|
|
<form-list
|
|
@handleClose="handleClose"
|
|
@handelDetail="handelDetail"
|
|
@handelFollowUpList="handelFollowUpList"
|
|
:period="formData.period"
|
|
:seriesName="seriesName"
|
|
:inspRecordId="inspRecordId"
|
|
:communityId="communityId"
|
|
></form-list>
|
|
<el-dialog
|
|
width="920px"
|
|
class="dialog-h"
|
|
title="社区自查报告详情"
|
|
:close-on-click-modal="false"
|
|
v-if="showFollowUpDetail"
|
|
:visible.sync="showFollowUpDetail"
|
|
append-to-body
|
|
>
|
|
<follow-Detail
|
|
:period="formData.period"
|
|
:inspResultId="inspResultId"
|
|
@handleClose="showFollowUpDetail = false"
|
|
></follow-Detail>
|
|
</el-dialog>
|
|
<el-dialog
|
|
width="820px"
|
|
class="dialog-h"
|
|
title="回访记录"
|
|
:close-on-click-modal="false"
|
|
v-if="showFollowUpList"
|
|
:visible.sync="showFollowUpList"
|
|
append-to-body
|
|
>
|
|
<follow-list :id="inspResultId"></follow-list>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
v-if="showFormList"
|
|
:visible.sync="showFormList"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
title="社区自查"
|
|
append-to-body
|
|
width="820px"
|
|
top="5vh"
|
|
class="dialog-h"
|
|
@closed="showFormList = false"
|
|
>
|
|
<form-list
|
|
@handleClose="handleClose"
|
|
@handelDetail="handelDetail"
|
|
@handelFollowUpList="handelFollowUpList"
|
|
:period="formData.period"
|
|
:modal-append-to-body="false"
|
|
:seriesName="seriesName"
|
|
:inspRecordId="inspRecordId"
|
|
:communityId="communityId"
|
|
></form-list>
|
|
<el-dialog
|
|
width="920px"
|
|
class="dialog-h"
|
|
title="社区自查报告详情"
|
|
:close-on-click-modal="false"
|
|
v-if="showFollowUpDetail"
|
|
:visible.sync="showFollowUpDetail"
|
|
append-to-body
|
|
>
|
|
<follow-Detail
|
|
:period="formData.period"
|
|
:inspResultId="inspResultId"
|
|
@handleClose="showFollowUpDetail = false"
|
|
></follow-Detail>
|
|
</el-dialog>
|
|
<el-dialog
|
|
width="820px"
|
|
class="dialog-h"
|
|
title="回访记录"
|
|
:close-on-click-modal="false"
|
|
v-if="showFollowUpList"
|
|
:visible.sync="showFollowUpList"
|
|
append-to-body
|
|
>
|
|
<follow-list :id="inspResultId"></follow-list>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
<el-dialog title="调查问卷" :visible.sync="showTduckImage" width="550px">
|
|
<el-image :src="qrCodeImgUrl">
|
|
<div slot="placeholder" class="image-slot">
|
|
加载中<span class="dot">...</span>
|
|
</div>
|
|
</el-image>
|
|
<div><span>问卷链接：</span> {{ questionnaireUrl }}</div>
|
|
<span slot="footer" class="dialog-footer"> </span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
import { mapGetters } from "vuex";
|
|
import * as echarts from "echarts";
|
|
import formList from "./formList";
|
|
import followList from "./followList";
|
|
import followDetail from "./followUpDetail";
|
|
import communityDialog from "./communityDialog";
|
|
|
|
import util from "@js/util.js";
|
|
|
|
export default {
|
|
components: { formList, followList, followDetail, communityDialog },
|
|
|
|
data() {
|
|
return {
|
|
searchH: 20,
|
|
|
|
formData: {
|
|
period: "", //月份
|
|
},
|
|
inspRecordId: "",
|
|
|
|
multiSelection: [], // 多选结果
|
|
|
|
dicts: {
|
|
satisfaction_category: [],
|
|
}, //字典对象
|
|
|
|
myChart: {},
|
|
option: {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["满意", "基本满意", "不满意"],
|
|
bottom: "10%",
|
|
icon: "rect",
|
|
itemWidth: 20,
|
|
itemHeight: 5,
|
|
itemGap: 20,
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "25%",
|
|
containLabel: true,
|
|
},
|
|
toolbox: {},
|
|
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: [], // 请将yourDataArray替换为您的x轴数据数组
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 60, // 设置阴影的宽度
|
|
color: "#000",
|
|
opacity: 0,
|
|
},
|
|
// 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整
|
|
},
|
|
},
|
|
|
|
yAxis: {
|
|
type: "value",
|
|
name: "单位(个)",
|
|
min: 0,
|
|
},
|
|
series: [
|
|
{
|
|
name: "满意",
|
|
type: "bar",
|
|
data: [],
|
|
barWidth: 16, // 设置柱子宽度
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#2c7cf2" }, // 从顶部开始
|
|
{ offset: 1, color: "#80b3ff" }, // 到底部结束
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
name: "基本满意",
|
|
type: "bar",
|
|
data: [],
|
|
barWidth: 16, // 设置柱子宽度
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#3ca267" }, // 从顶部开始
|
|
{ offset: 1, color: "#82cca0" }, // 到底部结束
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
name: "不满意",
|
|
type: "bar",
|
|
data: [],
|
|
barWidth: 16, // 设置柱子宽度
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#edb42d" }, // 从顶部开始
|
|
{ offset: 1, color: "#ffd981" }, // 到底部结束
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
satisfactionCategory: [], //类目
|
|
satisfactionCategoryName: [],
|
|
score: [], //得分
|
|
|
|
showFormList: false, //自查列表弹框
|
|
showFollowUpDetail: false, //自查列表中查看弹框
|
|
showFollowUpList: false, //回访记录弹框
|
|
showTduckImage: false,
|
|
|
|
qrCodeImgUrl: "", //生成二维码图片链接
|
|
questionnaireUrl: "", //问卷调查链接
|
|
|
|
synthesisScore: "", //综合得分
|
|
synthesisState: false, //综合得分状态
|
|
synthesisScoreBtLastMonth: null, //综合得分对比上月
|
|
personQty: "", //人数
|
|
|
|
inspResultId: "",
|
|
|
|
btnFlag: true, //生成调查问卷按钮权限(非社区账号)
|
|
|
|
user: {},
|
|
|
|
tableList: [],
|
|
|
|
total: 0,
|
|
pageNo: 1,
|
|
pageSize:window.localStorage.getItem('pageSize') || 20,
|
|
showCommunitDialog: false,
|
|
communitDialogTitle: "",
|
|
communityId: "",
|
|
};
|
|
},
|
|
computed: {
|
|
maxTableHeight() {
|
|
let num = this.user.level == "street" ? 50 : 0;
|
|
const _h = this.clientHeight - 260 - this.searchH - num;
|
|
return _h;
|
|
},
|
|
tabHeight() {
|
|
const _h = this.clientHeight - 600;
|
|
return _h;
|
|
},
|
|
...mapGetters(["clientHeight", "iframeHeight"]),
|
|
},
|
|
watch: {},
|
|
async mounted() {
|
|
this.user = this.$store.state.user;
|
|
this.agencyId = this.user.agencyId;
|
|
if (this.user.level != "community") {
|
|
this.btnFlag = false;
|
|
}
|
|
await this.getDicts();
|
|
await this.initData();
|
|
if (this.user.level != "street") {
|
|
this.initEcharts();
|
|
}
|
|
},
|
|
created() {
|
|
let date = new Date();
|
|
this.formData.period = util.formatDate(date, "yyyy-MM");
|
|
},
|
|
activated() {
|
|
// this.handleWindowResize();
|
|
},
|
|
methods: {
|
|
// ------------------------------------字典------------------------------------------
|
|
async getDicts() {
|
|
try {
|
|
const requests = [
|
|
this.$http.post("sys/dict/data/dictlist", {
|
|
dictType: "satisfaction_category",
|
|
}),
|
|
];
|
|
const dictKeys = ["satisfaction_category"]; // 对应的键名
|
|
|
|
const results = await Promise.all(requests);
|
|
results.forEach((result, index) => {
|
|
if (result.data.code === 0) {
|
|
this.dicts[dictKeys[index]].push(...result.data.data);
|
|
} else {
|
|
console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.log("获取字典失败: ", error);
|
|
}
|
|
},
|
|
// ------------------------------------事件------------------------------------------
|
|
handelDetail(id) {
|
|
this.showFollowUpDetail = true;
|
|
this.inspResultId = id;
|
|
},
|
|
handelFollowUpList(id) {
|
|
this.showFollowUpList = true;
|
|
this.inspResultId = id;
|
|
},
|
|
async handleCreateMonthlySurvey() {
|
|
try {
|
|
let url =
|
|
"/governance/satisfaction/communitySelfInsp/generateQuestionnaire";
|
|
const { data, code } = await requestPost(url);
|
|
if (code == 0) {
|
|
this.showTduckImage = true;
|
|
this.qrCodeImgUrl = data.qrCodeImgUrl;
|
|
this.questionnaireUrl = data.questionnaireUrl;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
initEcharts() {
|
|
this.myChart = echarts.init(document.getElementById("myCharts"));
|
|
this.myChart.setOption(this.option);
|
|
let than = this;
|
|
this.myChart.on("click", function (params) {
|
|
than.handelClickChart(params.name, params.seriesName);
|
|
});
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.handleWindowResize);
|
|
});
|
|
},
|
|
handleWindowResize() {
|
|
if (this.myChart) {
|
|
this.myChart.resize();
|
|
}
|
|
},
|
|
handelClickChart(name, seriesName) {
|
|
this.showFormList = true;
|
|
this.seriesName =
|
|
seriesName == "满意"
|
|
? "veryGood"
|
|
: seriesName == "基本满意"
|
|
? "good"
|
|
: "bad";
|
|
},
|
|
handleClose() {
|
|
this.showFormList = false;
|
|
this.showFollowUpDetail = false;
|
|
},
|
|
// 搜索事件
|
|
handleSearch(val) {
|
|
this.initData();
|
|
},
|
|
async initData() {
|
|
if (this.user.level != "street") {
|
|
this.getCharts();
|
|
} else {
|
|
this.getTableData();
|
|
}
|
|
},
|
|
async getCharts() {
|
|
let url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
|
|
const { formData } = this;
|
|
const { data, code, msg } = await requestGet(url, { ...formData });
|
|
if (code == 0) {
|
|
this.score = [];
|
|
this.option.series.forEach((series) => (series.data = []));
|
|
this.option.xAxis.data = [];
|
|
this.satisfactionCategory = [];
|
|
this.inspRecordId = data.inspRecordId;
|
|
this.synthesisScore = data.synthesisScore;
|
|
this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
|
|
this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
|
|
if (this.synthesisScoreBtLastMonth < 0) {
|
|
this.synthesisScoreBtLastMonth = Math.abs(
|
|
this.synthesisScoreBtLastMonth
|
|
);
|
|
}
|
|
this.personQty = data.personQty;
|
|
|
|
const allowedCategories = this.dicts.satisfaction_category.map(
|
|
(item) => item.value
|
|
);
|
|
for (const item of data.categoryDatas) {
|
|
if (allowedCategories.includes(item.satisfactionCategory)) {
|
|
this.option.series[0].data.push(item.veryGoodQty);
|
|
this.option.series[1].data.push(item.goodQty);
|
|
this.option.series[2].data.push(item.badQty);
|
|
this.option.xAxis.data.push(item.satisfactionCategoryName);
|
|
this.satisfactionCategory.push(item.satisfactionCategory);
|
|
this.score.push({
|
|
score: item.score,
|
|
satisfactionCategoryName: item.satisfactionCategoryName,
|
|
imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
|
|
scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
|
|
state: item.scoreDiffBtLastMonth >= 0,
|
|
});
|
|
if (item.scoreDiffBtLastMonth < 0) {
|
|
item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
|
|
}
|
|
}
|
|
}
|
|
this.myChart.setOption(this.option);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
async getTableData() {
|
|
let url =
|
|
"/governance/satisfaction/communitySelfInsp/stats/synthesis/superior";
|
|
const { formData, agencyId } = this;
|
|
const { data, msg, code } = await requestGet(url, {
|
|
...formData,
|
|
agencyId,
|
|
});
|
|
if (code == 0) {
|
|
this.score = [];
|
|
this.satisfactionCategory = [];
|
|
this.inspRecordId = data.inspRecordId;
|
|
this.synthesisScore = data.synthesisScore;
|
|
this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
|
|
this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
|
|
if (this.synthesisScoreBtLastMonth < 0) {
|
|
this.synthesisScoreBtLastMonth = Math.abs(
|
|
this.synthesisScoreBtLastMonth
|
|
);
|
|
}
|
|
this.personQty = data.personQty;
|
|
|
|
const allowedCategories = this.dicts.satisfaction_category.map(
|
|
(item) => item.value
|
|
);
|
|
for (const item of data.categoryDatas) {
|
|
if (allowedCategories.includes(item.satisfactionCategory)) {
|
|
this.satisfactionCategory.push(item.satisfactionCategory);
|
|
this.score.push({
|
|
score: item.score,
|
|
satisfactionCategoryName: item.satisfactionCategoryName,
|
|
imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
|
|
scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
|
|
state: item.scoreDiffBtLastMonth >= 0,
|
|
});
|
|
if (item.scoreDiffBtLastMonth < 0) {
|
|
item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
|
|
}
|
|
}
|
|
}
|
|
this.tableList = data.childrenAgencyDatas;
|
|
this.total = this.tableList.length;
|
|
}
|
|
},
|
|
handleCurrentChange() {
|
|
this.pageNo = val;
|
|
this.getTableData();
|
|
},
|
|
handleSizeChange() {
|
|
this.pageSize = val;
|
|
window.localStorage.setItem("pageSize", val);
|
|
this.getTableData();
|
|
},
|
|
// 重置
|
|
resetSearch() {
|
|
this.formData = {};
|
|
this.initData();
|
|
},
|
|
handleView(row) {
|
|
this.communityId = row.agencyId;
|
|
this.showCommunitDialog = true;
|
|
this.communitDialogTitle = `${row.agencyName}满意度自查详情`;
|
|
},
|
|
},
|
|
|
|
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";
|
|
|
|
.div_btn_left > * {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.m-table-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content_box {
|
|
display: flex;
|
|
height: 160px;
|
|
margin-top: 24px;
|
|
|
|
.left {
|
|
background: #f7faff;
|
|
margin-right: 10px;
|
|
min-width: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
img {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.left_right,
|
|
.right_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
:nth-child(1) {
|
|
font-size: 18px;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
:nth-child(2) {
|
|
font-size: 14px;
|
|
font-family: PingFang SC;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.right_box {
|
|
img {
|
|
margin: 0;
|
|
width: 10px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
.box {
|
|
height: 75px;
|
|
margin: 0 10px 10px 0;
|
|
|
|
.card {
|
|
background: #f7faff;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#myCharts {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bto-box {
|
|
flex: 1;
|
|
}
|
|
.down {
|
|
color: #ff7135;
|
|
}
|
|
.up {
|
|
color: #00bb72;
|
|
}
|
|
.gray {
|
|
color: #999999;
|
|
}
|
|
</style>
|
|
|
|
|