Browse Source

书记看板初始样式

feature
mk 2 years ago
parent
commit
2fdbf2e7b2
  1. BIN
      src/assets/images/shuju/overview/title-small-bg.png
  2. 162
      src/assets/scss/dataBoard/overview/index.scss
  3. 1
      src/assets/scss/modules/management/list-main.scss
  4. 11
      src/utils/jwTool.js
  5. 274
      src/views/dataBoard/overview/components/jdjs.vue
  6. 9
      src/views/dataBoard/overview/index.vue
  7. 2
      src/views/dataBoard/renfang/index.vue
  8. 66
      src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue
  9. 58
      src/views/dataBoard/satisfactionEval/potentialPeople/index.vue
  10. 142
      src/views/modules/goverhotline/followDetail.vue
  11. 143
      src/views/modules/goverhotline/formList.vue
  12. 183
      src/views/modules/goverhotline/index.vue

BIN
src/assets/images/shuju/overview/title-small-bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

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

@ -32,7 +32,165 @@
width: 460px;
}
}
.white{
color: #fff;
}
.f-flex {
display: flex;
flex-wrap: nowrap;
}
.f-hflex {
display: flex;
flex-flow: column;
overflow: hidden;
}
.f-w50 {
width: 50% !important;
}
.f-flex1 {
flex: 1;
}
.f-mean {
justify-content: space-around;
}
.f-endpoint {
justify-content: space-between;
}
.f-align_item {
align-items: center;
}
.f-pingfang{
font-family: PingFang-SC-Regular;
}
// 字体大小
.f-font12 {
font-size: 12px;
}
.f-font14 {
font-size: 14px !important;
}
.f-font16 {
font-size: 16px !important;
}
.f-font18 {
font-size: 18px !important;
}
.f-font34 {
font-size: 34px !important;
font-style: italic;
font-weight: 500;
font-family: DIN Alternate;
}
.f-yellow{
color: #FFB73C;
}
.f-green{
color:#08EBAE;
}
.f-skyBlue{
color: #7FCEFF;
}
.f-darkGray{
color:#A3B9DA ;
}
//内边距
.f-p0 {
padding: 0 !important;
}
.f-p10 {
padding: 10px;
}
.f-p16 {
padding: 16px;
}
.f-p50 {
padding: 50px;
}
.f-p30 {
padding: 30px;
}
// 外边距
.f-right5 {
margin-right: 5px;
}
.f-right24 {
margin-right: 24px;
}
.f-bottom8 {
margin-bottom: 8px;
}
.f-bottom16 {
margin-bottom: 16px;
}
.f-top2 {
margin-top: 2px;
}
.f-top12 {
margin-top: 12px;
}
.f-top24 {
margin-top: 24px !important;
}
.f-top32 {
margin-top: 32px !important;
}
.f-top40 {
margin-top: 40px !important;
}
.f-top48 {
margin-top: 48px !important;
}
.f-top8 {
margin-top: 8px !important;
}
.f-bot8 {
margin-bottom: 8px;
}
.f-bot24 {
margin-bottom: 24px !important;
}
.f-top16 {
margin-top: 16px !important;
}
.f-bot16 {
margin-bottom: 16px !important;
}
.f-right8 {
margin-right: 8px !important;
}
.f-right10 {
margin-right: 10px !important;
}
.f-right16 {
margin-right: 16px !important;
}
.f-margin30 {
margin: 30px;
}
.f-m0 {
margin: 0 !important;
}
.m-map {
position: relative;
width: 100%;
@ -61,7 +219,7 @@
}
.m-jdjs {
height: 318px;
height: 548px;
padding: 0 16px;
&-js {
@ -133,8 +291,10 @@
line-height: 24px;
}
}
}
@keyframes move {
from {
margin-top: -232px;

1
src/assets/scss/modules/management/list-main.scss

@ -120,7 +120,6 @@
}
}
// 弹性盒子
.f-flex {
display: flex;
flex-wrap: nowrap;

11
src/utils/jwTool.js

@ -1,8 +1,17 @@
/*
* @Author: mk 2403457699@qq.com
* @Date: 2023-10-25 09:13:30
* @LastEditors: mk 2403457699@qq.com
* @LastEditTime: 2023-11-10 16:43:33
* @Description: satisfactionSource入参字符串报错
*
*
*/
import Vue from "vue";
const paramsFormat = function (params) {
const data = { ...params };
if (data.satisfactionSource) {
if (data.satisfactionSource && typeof data.satisfactionSource === "object") {
data.satisfactionSource = data.satisfactionSource.join(",");
}
let strArray = [];

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

@ -1,5 +1,5 @@
<template>
<div class="m-subbox m-jdjs">
<div class="m-jdjs">
<div class="m-jdjs-js">
<div class="m-jdjs-js-img">
<img src="../linshi/jiedaotu.jpg" />
@ -8,20 +8,66 @@
{{ overview }}
</div>
</div>
<!-- <div class="m-jdjs-bg">
<div class="m-jdjs-bg-title">
<div class="m-jdjs-bg-title-img">
<img src="../../../../assets/images/shuju/overview/zjbg-icon.png" />
</div>
<div class="m-jdjs-bg-title-txt">总结报告</div>
<title-small text="重点关注人群" />
<div class="event-statistics">
<div
id="zdgz"
v-loading="loading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0,0.5)"
style="height: 170px"
/>
</div>
<title-small text="不满意风险人员">
<span class="date-span">
<el-date-picker
popper-class="date-current-weiyi"
:append-to-body="false"
v-model="rffxDate"
format="yyyy-MM"
value-format="yyyy-MM"
@change="changeDate"
type="month"
:clearable="false"
placeholder="选择月"
>
</el-date-picker>
</span>
</title-small>
<div class="f-flex white f-mean">
<div class="f-hflex" @click="
$router.push(
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_12345'
)
">
<div><span class="f-pingfang">12345热线投诉人数</span></div>
<div class="f-darkGray" ><b class="f-font34 f-yellow">12</b></div>
</div>
<div class="m-jdjs-bg-txt">
{{ report }}
<div class="f-hflex" @click="
$router.push(
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_province'
)
">
<div><span class="f-pingfang">满意度调查不满意人数</span></div>
<div class="f-darkGray"><b class="f-font34 f-green">12</b></div>
</div>
</div> -->
<div class="f-hflex" @click="
$router.push(
'/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_community'
)
">
<div><span class="f-pingfang">社区自评不满意人数</span></div>
<div class="f-darkGray"><b class="f-font34 f-skyBlue">12</b></div>
</div>
</div>
</div>
</template>
<script>
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
import * as echarts from "echarts";
import resiCategoryMap from "@/views/business/resi-category-map.js";
export default {
name: "jdjs",
props: {
@ -35,17 +81,24 @@ export default {
orgId: this.$store.state.chooseArea.chooseName,
report: "",
overview: "",
loading: false,
rffxDate:''
};
},
watch: {
currentLevelData(val) {
if (val.orgId) {
this.getReport(val);
// this.getData();
}
},
},
mounted() {
this.getReport(this.currentLevelData);
this.getData();
},
components: {
titleSmall,
},
methods: {
getReport({ orgId, orgLevel }) {
@ -70,8 +123,209 @@ export default {
this.report = data;
});
},
getData() {
this.loading = true
this.$http.get('/actual/base/resiCategory/intelligentPredictioncategoryCountList').then(({data: {data}}) => {
this.initCharts(data)
})
},
initCharts(data) {
let div = document.getElementById('zdgz');
this.myChart = echarts.init(div);
let chartData = data.categoryList.map((item) => {
return {
name: resiCategoryMap[item.categoryName] || "",
count: item.categoryCountNext,
};
});
let xData = chartData.map(item=>item.name);
let yData = chartData.map(item=>item.count)
console.log(yData,xData);
let color = [[
{
offset: 0,
color: 'rgba(0, 84, 255, 0)' // 0%
},
{
offset: 1,
color: 'rgba(38, 244, 248, 1)' // 100%
}
]]
// let seriesArray = series.map((item, index) => {
// return {
// name: item.name,
// type: 'bar',
// barWidth: 14,
// itemStyle: {
// opacity: 1,
// color: new echarts.graphic.LinearGradient(
// 0,
// 1,
// 0,
// 0,
// color[0],
// false
// )
// },
// data: item.data,
// }
// })
let num = yData
const max = Math.max(...num)
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
var option = {
title: {
show: false,
text: '',
x: 'center',
top: '15px',
textStyle: {
color: '#333333',
fontWeight: 500,
fontSize: 18,
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(13,33,71,0.5)',
borderColor: 'rgba(143,174,252,0.6)',
padding: 8,
textStyle: {
color: '#fff',
},
formatter: function (params) {
var res = '<div"><p>' + params[0].name + ':'+params[0].value + '</p></div>'
return res;
},
},
grid: {
top: '18%',
left: '2%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#323c41'
}
},
axisLabel: {
align: 'center',
interval: 0,
textStyle: {
fontSize: 12,
color: '#A3B9DA'
}
},
boundaryGap: true,
data: xData,
}, {
type: 'category',
data: xData,
axisLine: {show: false},
axisLabel: {
show: false,
},
boundaryGap: true,
}
],
yAxis: [
{
type: 'value',
name: '单位:人',
nameLocation: 'end',
splitLine: {
show: true,
lineStyle: {
color: 'rgba(4,187,255,0.18)',
type: 'dashed'
},
},
nameTextStyle: {
color: '#A3B9DA',
textStyle: {
fontSize: 12
},
align: 'center'
},
axisLabel: {
show: true,
color: '#A3B9DA',
textStyle: {
fontSize: 12
}
},
axisTick: {
show: false
}
}
],
series: [
{
name: "",
type: 'bar',
barWidth: 20,
itemStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
color[0],
false
)
},
data: yData,
},
{
name: '',
type: 'bar',
barWidth: 50,
barGap: '-60%',
data: barArray,
itemStyle: {
normal: {
color: 'rgba(22,153,152, 0.1)'
}
},
zlevel: -1,
xAxisIndex: 1,
}
],
};
this.myChart.setOption(option);
window.addEventListener("resize", () => this.myChart.resize());
this.loading = false
},
changeDate() {},
},
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
<style lang="scss">
.f-hflex{
width: 83px;
}
.f-flex{
margin-top: 20px;
}
.f-darkGray{
margin-top: 15px;
}
</style>

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

@ -11,11 +11,10 @@
<title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" />
<jdjs :currentLevelData="currentLevelData" />
</div>
<div class="m-box">
<!-- <div class="m-box">
<title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
<jdtphx :currentLevelData="currentLevelData" :id="orgId" />
</div>
</div> -->
</div>
<div class="g-center">
<div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden">
@ -44,14 +43,14 @@
<rfsjtj :currentLevelData="currentLevelData" />
</div>
<!-- 街道概览 -->
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
<!-- <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
<title-box text="各社区人房数据更新排行">
<span class="date-span">
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
</span>
</title-box>
<sqrfph :currentLevelData="currentLevelData" :date="rfphDate" />
</div>
</div> -->
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
<title-box text="各社区12345投诉事件统计">
<span class="date-span">

2
src/views/dataBoard/renfang/index.vue

@ -737,7 +737,7 @@ export default {
count: item.categoryCount,
ratio: ((100 * item.categoryCount) / data.resiCount).toFixed(0),
growth: 0,
growthAbs: Math.abs(item.growth),
growthAbs: Math.abs(item.growth) || '--',
};
});
}

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

@ -0,0 +1,66 @@
<template>
<div class="title" :class="noBg ? 'no-bg' : ''">
<span class="text">
<span class="txt">{{ text }}</span>
<span class="text-shadow">{{ text }}</span>
</span>
<slot></slot>
</div>
</template>
<script>
export default {
name: "Title",
props: {
text: {
type: String,
default: "",
},
noBg: {
type: Boolean,
default: false,
},
},
};
</script>
<style scoped lang="scss">
.title {
// width: 100%;
height: 40px;
background: url(../../../../../assets/images/shuju/overview/title-small-bg.png) no-repeat;
background-size: 100% 100%;
padding: 8px 16px 8px 29px;
display: flex;
align-items: center;
justify-content: space-between;
.text {
position: relative;
font-size: 18px;
// font-family: HYShuYuanHeiJ;
font-weight: 400;
color: #fff;
.txt {
font-family: PingFang SC;
-webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
position: relative;
z-index: 2;
}
.text-shadow {
top: 4px;
left: 3px;
position: absolute;
color: #020f21;
white-space: nowrap;
}
}
}
.no-bg {
background: none;
}
</style>

58
src/views/dataBoard/satisfactionEval/potentialPeople/index.vue

@ -8,6 +8,7 @@
v-model="queryParams.agencyId"
size="small"
placeholder="按组织"
v-if="this.$route.query.type != 'shuji'"
>
<el-option
v-for="item in orgOptions"
@ -16,6 +17,20 @@
:value="item.value"
></el-option>
</el-select>
<el-select
popper-class="selectPopClass"
v-model="queryParams.satisfactionSource"
size="small"
placeholder="按类型"
v-else
>
<el-option
v-for="item in orgOptionsC"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-input
v-model.trim="queryParams.name"
clearable
@ -141,18 +156,26 @@ export default {
tel: "",
pageNo: 1,
pageSize: 10,
satisfactionSource:""
},
orgOptions: [],
total: 0,
breadcrumbList: [
],
orgOptionsC:[
{
path: "/dataBoard/satisfactionEval/index",
name: "满意度评价",
label:'12345政务热线',
value:'satisfaction_12345'
},
{
path: "",
name: "潜在不满意人数",
label:'上级满意度调查',
value:'satisfaction_province'
},
{
label:'社区满意度调查',
value:'satisfaction_community'
}
],
monthOptions: new Array(12).fill(0).map((_, index) => {
return { label: index - 0 + 1 + "月", value: index - 0 + 1 };
@ -162,6 +185,30 @@ export default {
},
activated() {
if(this.$route.query.type == 'shuji'){
this.breadcrumbList = [
{
path: "/dataBoard/overview/index",
name: "书记看板",
},
{
path: "",
name: "不满意风险人员",
},
]
this.queryParams.satisfactionSource = this.$route.query.satisfactionSource
}else{
this.breadcrumbList = [
{
path: "/dataBoard/satisfactionEval/index",
name: "满意度评价",
},
{
path: "",
name: "潜在不满意人数",
},
]
}
this.getOrg();
},
methods: {
@ -195,11 +242,12 @@ export default {
},
getList() {
this.loading = true;
console.log(this.$route.query.countType);
console.log(this.queryParams);
let params = {
...this.queryParams,
countType: this.$route.query.countType,
};
console.log(params);
this.$http
.get(
"/governance/satisfactionDetailList/getPotentialDissatisfiedCountDetail?" +

142
src/views/modules/goverhotline/followDetail.vue

@ -0,0 +1,142 @@
<template>
<div class='g-main dialog-h-content'>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">街道</span>
<div class="f-flex1">{{detailObj.streetName || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">社区</span>
<div class="f-flex1">{{detailObj.communityName || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">姓名</span>
<div class="f-flex1">{{detailObj.name || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">回访电话</span>
<div class="f-flex1">{{detailObj.mobile || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">领域</span>
<div class="f-flex1">{{detailObj.scopeName || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">问题</span>
<div class="f-flex1">{{detailObj.problemDesc || '--'}}</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">是否完成</span>
<div class="f-flex1">
<el-radio v-model="formData.completeFlag" :label="0" :disabled="disabled" >正在推进</el-radio>
<el-radio v-model="formData.completeFlag" :label="1" :disabled="disabled" >已完成</el-radio>
<el-radio v-model="formData.completeFlag" :label="2" :disabled="disabled" >已完成并取消风险标记</el-radio>
</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">组织类型</span>
<div class="f-flex1">
<el-radio v-model="formData.orgCategoryCode" label="province" :disabled="disabled"></el-radio>
<el-radio v-model="formData.orgCategoryCode" label="city" :disabled="disabled"></el-radio>
<el-radio v-model="formData.orgCategoryCode" label="district" :disabled="disabled"></el-radio>
</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">完成时限</span>
<div class="f-flex1">
<el-date-picker v-model="formData.completeTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
style="width: 202px" clearable :disabled="disabled">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row type="flex" justify="" class="f-top24">
<el-col :span="24" class="f-flex f-align_item"><span class="label">备注</span>
<div class="f-flex1" >
<el-input
type="textarea"
:rows="3"
style="width: 300px;"
placeholder="请输入内容"
v-model="formData.remark"
:disabled="disabled"
>
</el-input>
</div>
</el-col>
</el-row>
<div class="div_btn f-flex" style="justify-content: end;">
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
size="small"
type="primary"
@click="handleComfirm"
> </el-button
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
evaCulturalFacility: 'bad',
formData:{
completeTime:'',
remark:'',
orgCategoryCode:'',
completeFlag:""
},
disabled:false
};
},
props: {
detailObj: {
type: Object,
default: () => {}
},
formType:{
type:String,
default:''
}
},
created() {
this.formData = {...this.detailObj}
this.disabled = this.formType == 'detail' ? true : false
},
methods: {
handleCancle(){
this.$emit('handleCancle')
},
handleComfirm(){
this.$emit('handleComfirm',this.formData)
}
},
components: {},
computed: {},
watch: {},
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";
@import "@/assets/scss/modules/management/form-main.scss";
h3 {
text-align: center;
}
.label {
width: 100px;
margin-right: 10px;
text-align: right;
}</style>

143
src/views/modules/goverhotline/formList.vue

@ -0,0 +1,143 @@
<template>
<div style="margin-top:10px">
<el-table class="m-table-item" :data="tableData" style="width: 100%" border>
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
<el-table-column label="所属网格" prop="gridName" header-align="center" align="center" show-overflow-tooltip
width="150"></el-table-column>
<el-table-column label="接收时间" prop="happenTime" header-align="center" align="center" show-overflow-tooltip
width="150"></el-table-column>
<el-table-column label="问题描述" prop="eventContent" header-align="center" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
<el-table-column prop="voiceList" align="center" width="80" label="语音">
<template slot-scope="scope">
<img @click="handleShowVoice(scope.row.voiceList[0].url)" class="img-voice"
v-if="scope.row.voiceList && scope.row.voiceList.length > 0"
src="@/assets/img/icon-voice.png" />
<span v-else></span>
</template>
</el-table-column>
<el-table-column label="办结时限" prop="timeLimit" header-align="center" align="center" width="150"
show-overflow-tooltip></el-table-column>
<el-table-column label="联系人" prop="name" header-align="center" align="center" show-overflow-tooltip
width="100"></el-table-column>
<el-table-column label="联系电话" prop="mobile" header-align="center" align="center" show-overflow-tooltip
width="100"></el-table-column>
<el-table-column prop="status" align="center" label="状态" width="80" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.status === 'processing'">处理中</span>
<span v-else-if="scope.row.status === 'closed_case'">已完成</span>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button @click="handelClickDetail(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total"
:total="total"></el-pagination>
</div>
</div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { completeList } from "@/js/columns/constants";
export default {
//
data() {
return {
formData: {
gridId: "",
sourceType: "",
eventContent: "",
name: "",
mobile: "",
startTime: "",
endTime: "",
limitStartTime: "",
limitEndTime: "",
status: "",
firstIdList: [],
secondIdList: [],
workOrderNum: "",
departId:""
},
pageNo: 0,
pageSize: 20,
total: 0,
tableData: [],
};
},
//
created() { },
async mounted() {
await this.getTableData()
},
//
methods: {
handleSizeChange(val) {
console.log(`每页 ${val}`);
this.pageSize = val;
this.getTableData();
},
handelClickDetail(row) {
this.$emit('handelClickDetail', row);
},
handlClickEdit(row){
this.$emit('handelClickEdit', row);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNo = val;
this.getTableData();
},
async getTableData() {
try {
const url = "/governance/dwdEvent/list";
if(this.recId){
this.formData.secondIdList = [this.recId];
}
if(this.departId){
this.formData.departId = this.departId;
}
const { pageSize, pageNo, formData } = this;
const { data, code, msg } = await requestPost(url, {
pageSize,
pageNo,
...formData,
});
if (code == 0) {
this.tableData = data.list;
this.total = data.total;
} else {
console.log(err);
}
} catch (err) {
console.log(err);
}
},
},
//
components: {},
//
computed: {},
props: {
recId:{
type:String,
default:''
},
departId:{
type:String,
default:''
}
},
//
watch: {},
}
</script>
<style lang="scss"></style>

183
src/views/modules/goverhotline/index.vue

@ -71,7 +71,7 @@
</p>
<h1 style="text-align: center;font-size: 20px;">科室热线分布情况</h1>
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
<div id="communityChart"></div>
<div id="departChart"></div>
</div>
</div>
<div v-else class="no-data">
@ -102,7 +102,7 @@
<h2 style="font-size: 20px; font-weight: bold;"> (同地点同类型事件重复投诉 </h2>
</div>
<el-table :data="addressData" border class="m-table-item" style="width: 100%">
<el-table :data="addressData" border class="m-table-item" style="width: 100%" @row-click="clickAddressData">
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
<el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
@ -137,6 +137,38 @@
</div>
<el-dialog
v-if="showFormList"
:visible.sync="showFormList"
:close-on-click-modal="false"
:close-on-press-escape="false"
title="12345问题列表"
:modal-append-to-body="false"
width="60%"
top="5vh"
class="dialog-h"
@closed="showFormList = false"
>
<form-list
ref="ref_form_list"
@handleClose="handleClose"
:recId="recId"
:departId="departId"
@handelClickDetail="handelClickDetail"
></form-list>
<el-dialog
width="60%"
class="dialog-h"
title="12345事件详情"
:close-on-click-modal="false"
v-if="showFormDetail"
:visible.sync="showFormDetail"
append-to-body
>
<event-info ref="eleEditForm" :pageType="pageType" :eventId="eventId" :eventDetailData="eventDetailData"
@handleClose="handleClose" @handleOk="handleOk" @dialogOk="handleEditSuccess" />
</el-dialog>
</el-dialog>
</div>
</template>
@ -147,8 +179,13 @@ import { mapGetters } from "vuex";
import axios from "axios";
import * as echarts from "echarts";
import formList from "./formList";
import util from "@js/util.js";
import followDetail from "./followDetail";
import eventInfo from "../shequzhili/event/cpts/event-info";
export default {
components: {},
components: {formList, followDetail,eventInfo},
data() {
return {
@ -183,6 +220,16 @@ export default {
departCountShow:false,
subCategoryCountShow:false,
showFormList: false,
showFormDetail: false,
recId: "",
departId:"",
eventId: "",
eventDetailData: {},
pageType: "info",
categoryChartOption: {
@ -205,7 +252,6 @@ export default {
},
toolbox: {},
xAxis: {
type: 'category',
boundaryGap: true,
@ -522,37 +568,40 @@ export default {
this.categoryChart.setOption(this.categoryChartOption);
let than = this;
this.categoryChart.on("click", function (params) {
than.handelClickChart(params.name);
than.handelClickChart(params);
});
this.categoryPie= echarts.init(document.getElementById("categoryPie"));
this.categoryPie.setOption(this.categoryPieOption);
this.categoryPie.on("click", function (params) {
than.handelClickChart(params.name);
than.handelClickChart(params);
});
}
if(this.communityCountShow){
this.communityChart= echarts.init(document.getElementById("communityChart"));
this.communityChart.setOption(this.communityOption);
let than = this;
this.communityChart.on("click", function (params) {
than.handelClickChart(params.name);
than.handelClickChart(params);
});
}
if(this.departCountShow){
this.departChart= echarts.init(document.getElementById("departChart"));
this.departChart.setOption(this.departOption);
let than = this;
this.departChart.on("click", function (params) {
than.handelClickChart(params.name);
than.handelClickDepartChart(params);
});
}
if(this.subCategoryCountShow){
this.hotlineChart= echarts.init(document.getElementById("hotlineChart"));
this.hotlineChart.setOption(this.hotlineChartOption);
let than = this;
this.hotlineChart.on("click", function (params) {
than.handelClickChart(params.name);
than.handelClickChart(params);
});
}
@ -568,15 +617,54 @@ export default {
this.categoryPie.resize();
}
},
handelClickChart(name) {
handelClickChart(params) {
this.showFormList = true;
this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
(item) => item.label == name
)[0].value;
this.departId ='';
this.recId = params.data.id;
},
handelClickDepartChart(params) {
this.showFormList = true;
this.recId ='';
this.departId = params.data.id;
},
handleClose() {
this.showFormList = false;
},
async handelClickDetail(row) {
this.eventId = row.icEventId;
const url = "/governance/icEvent/detail";
const { data, code, msg } = await requestPost(url, {
icEventId: this.eventId,
});
if (code != 0) {
this.$message.error(msg);
} else {
this.eventDetailData = { ...data };
this.pageType = "info";
this.showFormDetail = true;
}
},
handleClose() {
this.showFormDetail = false;
this.pageType = "list";
this.eventId = "";
this.getTableData();
},
handleOk() {
this.showFormDetail = false;
this.pageType = "list";
this.eventId = "";
this.pageNo = 1;
this.getTableData();
},
handleEditSuccess() {
this.handleClose();
this.getTableData();
},
//
async handleSearch(val) {
console.log(this.formData);
@ -632,20 +720,28 @@ export default {
}
this.report = data;
console.log(this.report)
this.tableLoading = true;
//
Object.keys(this.report.categoryCount).forEach((key) => {
const value = this.report.categoryCount[key];
const category = this.report.categoryCount[key];
// this.categoryChartOption.series[0].data.push(category.count);
this.categoryChartOption.xAxis.data.push(category.name);
const recObject = {
id: category.id,
value: category.count
};
this.categoryChartOption.series[0].data.push(recObject);
this.categoryChartOption.series[0].data.push(value);
this.categoryChartOption.xAxis.data.push(key);
const jsonObject = {
name: key,
value: value
id: category.id,
name: category.name,
value: category.count
};
this.categoryPieOption.series[0].data.push(jsonObject);
@ -653,31 +749,46 @@ export default {
//
Object.keys(this.report.communityCount).forEach((key) => {
const value = this.report.communityCount[key];
const community = this.report.communityCount[key];
this.communityOption.xAxis[0].data.push(community.name);
const recObject = {
id: community.id,
value: community.count/this.report.totalEvent*100
};
this.communityOption.series[0].data.push(recObject);
this.communityOption.xAxis[0].data.push(key);
this.communityOption.series[0].data.push(value/this.report.totalEvent*100);
this.communityOption.series[1].data.push(value);
this.communityOption.series[1].data.push(community.count);
});
//
Object.keys(this.report.departCount).forEach((key) => {
const value = this.report.departCount[key];
const depart = this.report.departCount[key];
this.departOption.xAxis[0].data.push(key);
this.departOption.series[0].data.push(value/this.report.totalEvent*100);
this.departOption.series[1].data.push(value);
this.departOption.xAxis[0].data.push(depart.name);
const recObject = {
id: depart.id,
value: depart.count/this.report.totalEvent*100
};
this.departOption.series[0].data.push(recObject);
});
this.departOption.series[1].data.push(depart.count);
});
//
Object.keys(this.report.subCategoryCount).forEach((key) => {
const value = this.report.subCategoryCount[key];
const subcategory = this.report.subCategoryCount[key];
this.hotlineChartOption.xAxis.data.push(subcategory.name);
this.hotlineChartOption.xAxis.data.push(key);
this.hotlineChartOption.series[0].data.push(value);
const recObject = {
id: subcategory.id,
value: subcategory.count
};
this.hotlineChartOption.series[0].data.push(recObject);
});
this.addressData = this.report.addressEvent
@ -698,12 +809,11 @@ export default {
})
: [];
if (this.report && this.report. categoryCount && Object.keys(this.report. categoryCount).length > 0) {
if (this.report && this.report.categoryCount && Object.keys(this.report.categoryCount).length > 0) {
this.categoryCountShow = true;
}
if (this.report && this.report. communityCount && Object.keys(this.report. communityCount).length > 0) {
if (this.report && this.report.communityCount && Object.keys(this.report.communityCount).length > 0) {
this.communityCountShow = true;
}
@ -715,6 +825,11 @@ export default {
this.subCategoryCountShow = true;
}
},
clickAddressData(row, column){
console.log("============clickAddressData============");
console.log(row);
}
},
props: {},

Loading…
Cancel
Save